Browse Source

style(components): 优惠券相关组件样式调整

- 调整了 CouponCard、CouponList 和 orderConfirm 组件中的字体大小、间距等样式
- 优化了标题、金额、条件等元素的视觉效果
- 统一了按钮和状态文本的样式
-调整了部分布局和对齐方式
master
科技小王子 2 weeks ago
parent
commit
87b83b4d2c
  1. 16
      src/components/CouponCard.scss
  2. 8
      src/components/CouponList.tsx
  3. 8
      src/shop/orderConfirm/index.scss
  4. 2
      src/shop/orderConfirm/index.tsx

16
src/components/CouponCard.scss

@ -46,10 +46,10 @@
.amount-wrapper {
display: flex;
align-items: baseline;
margin-bottom: 4px;
margin-bottom: 8px;
.currency {
font-size: 14px;
font-size: 24px;
font-weight: 500;
margin-right: 2px;
}
@ -62,7 +62,7 @@
}
.condition {
font-size: 12px;
font-size: 24px;
opacity: 0.9;
margin-top: 2px;
}
@ -118,14 +118,14 @@
flex: 1;
.coupon-title {
font-size: 14px;
font-size: 28px;
font-weight: 600;
color: #1f2937;
margin-bottom: 4px;
}
.coupon-validity {
font-size: 12px;
font-size: 24px;
color: #6b7280;
}
}
@ -139,7 +139,7 @@
min-width: 48px;
height: 24px;
border-radius: 12px;
font-size: 12px;
font-size: 24px;
border: none;
color: #fff;
@ -165,7 +165,7 @@
}
.status-text {
font-size: 12px;
font-size: 24px;
color: #6b7280;
padding: 4px 8px;
}
@ -189,7 +189,7 @@
color: #fff;
padding: 4px 12px;
border-radius: 12px;
font-size: 14px;
font-size: 28px;
font-weight: 500;
}
}

8
src/components/CouponList.tsx

@ -34,12 +34,12 @@ const CouponList: React.FC<CouponListProps> = ({
return (
<View className="p-4">
{title && (
<View className="text-lg font-semibold text-gray-800 mb-4">{title}</View>
<View className="font-semibold text-gray-800 mb-4">{title}</View>
)}
{coupons.length === 0 ? (
showEmpty && (
<View className="text-center py-10 px-5 text-gray-500 text-sm">
<View className="text-center py-10 px-5 text-gray-500">
{emptyText}
</View>
)
@ -61,14 +61,14 @@ const CouponList: React.FC<CouponListProps> = ({
return (
<View>
{title && (
<View className="text-lg font-semibold text-gray-800 mb-4 pl-4">
<View className="font-semibold text-gray-800 mb-4 pl-4">
{title}
</View>
)}
{coupons.length === 0 ? (
showEmpty && (
<View className="text-center py-10 px-5 text-gray-500 text-sm">
<View className="text-center py-10 px-5 text-gray-500">
{emptyText}
</View>
)

8
src/shop/orderConfirm/index.scss

@ -89,7 +89,7 @@
border-bottom: 1px solid #f0f0f0;
&-title {
font-size: 14px;
font-size: 28rpx;
color: #666;
margin-bottom: 8px;
}
@ -98,10 +98,10 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
padding: 8rpx 12rpx;
background: #fff;
border-radius: 6px;
font-size: 14px;
border-radius: 6rpx;
font-size: 28rpx;
}
}
}

2
src/shop/orderConfirm/index.tsx

@ -458,7 +458,7 @@ const OrderConfirm = () => {
<View className="coupon-popup__content">
{selectedCoupon && (
<View className="coupon-popup__current">
<Text className="coupon-popup__current-title">使</Text>
<Text className="coupon-popup__current-title font-medium">使</Text>
<View className="coupon-popup__current-item">
<Text>{selectedCoupon.title} -{selectedCoupon.amount}</Text>
<Button size="small" onClick={handleCouponCancel}>使</Button>

Loading…
Cancel
Save