zfc/bindbox-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化优惠券“去使用”按钮的样式和布局，并调整了底部行的对齐方式。

Browse Source
This commit is contained in:
邹方成 2025-12-26 02:21:46 +08:00
parent 7406f8b308
commit 7e08aa5f43
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
pages/mine/index.vue
View File

@ -266,7 +266,7 @@
</view> </view>
<view class="coupon-action-v2" v-if="couponsTab === 1"> <view class="coupon-action-v2" v-if="couponsTab === 1">
<text class="use-btn-v2">去使用</text> <view class="use-btn-v2">去使用</view>
</view> </view>
<view class="coupon-status-v2" v-else> <view class="coupon-status-v2" v-else>
<text class="status-tag" :class="couponsTab === 2 ? 'used' : 'expired'">{{ couponsTab === 2 ? '已使用' : '已过期' }}</text> <text class="status-tag" :class="couponsTab === 2 ? 'used' : 'expired'">{{ couponsTab === 2 ? '已使用' : '已过期' }}</text>
@ -1531,10 +1531,20 @@ export default {
color: $text-tertiary; color: $text-tertiary;
} }
.coupon-footer-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; } .coupon-footer-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.coupon-footer-left { display: flex; flex-direction: column; } .coupon-footer-left { display: flex; flex-direction: column; }
.coupon-expire-v2 { font-size: 20rpx; color: $text-tertiary; } .coupon-expire-v2 { font-size: 20rpx; color: $text-tertiary; }
.use-btn-v2 { background: $brand-primary; color: #fff; font-size: 22rpx; padding: 8rpx 24rpx; border-radius: 100rpx; } .use-btn-v2 {
background: $brand-primary;
color: #fff;
font-size: 22rpx;
padding: 8rpx 24rpx;
border-radius: 100rpx;
display: flex;
align-items: center;
justify-content: center;
line-height: normal;
}
.status-tag { font-size: 22rpx; color: $text-tertiary; background: #F5F5F5; padding: 4rpx 12rpx; border-radius: 6rpx; } .status-tag { font-size: 22rpx; color: $text-tertiary; background: #F5F5F5; padding: 4rpx 12rpx; border-radius: 6rpx; }
.coupon-used-time { font-size: 18rpx; color: $text-tertiary; margin-top: 4rpx; text-align: left; } .coupon-used-time { font-size: 18rpx; color: $text-tertiary; margin-top: 4rpx; text-align: left; }