feat:优惠券
This commit is contained in:
黄泽群
@@ -109,11 +109,6 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
filteredCoupons() {
|
||||
if (this.currentTab === 1) {
|
||||
return this.coupons.filter(item => item.status === 'active');
|
||||
} else if (this.currentTab === 2) {
|
||||
return this.coupons.filter(item => item.status === 'expired');
|
||||
}
|
||||
return this.coupons;
|
||||
}
|
||||
},
|
||||
@@ -133,21 +128,22 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #f7f8fa;
|
||||
background-color: #F5F5F5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ================= 顶部分类 Tab 栏像素级还原 ================= */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 0 40rpx;
|
||||
height: 100rpx;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #fcfcfc;
|
||||
padding-left: 28rpx; /* 关键：左侧对齐优惠券卡片的边距 */
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #f6f6f6; /* 隐约的底部分割线 */
|
||||
|
||||
.tab-item {
|
||||
margin-right: 54rpx;
|
||||
margin-right: 48rpx; /* 增大字与字之间的间距 */
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -158,41 +154,40 @@ export default {
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #9c9c9c; /* 未激活时为较淡的灰色 */
|
||||
color: #7f7f7f; /* 未激活时是略深一点的灰色 */
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: #692bc7; /* 完美的深紫激活色 */
|
||||
color: #7A35F6; /* 完美还原原图中的亮紫色 */
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* 独立的底部短下划线控制 */
|
||||
/* 底部指示线：缩短宽度并适当下移 */
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 12rpx;
|
||||
width: 52rpx; /* 缩短下划线宽度，完美贴合字宽 */
|
||||
height: 5rpx; /* 加粗 */
|
||||
background-color: #692bc7;
|
||||
border-radius: 4rpx;
|
||||
bottom: 4rpx; /* 贴近底部边缘 */
|
||||
width: 44rpx; /* 缩短下划线宽度，原图横线比“全部”两个字还要窄一点 */
|
||||
height: 4rpx; /* 适中的粗细 */
|
||||
background-color: #7A35F6;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ================= 优惠券列表区域 ================= */
|
||||
.coupon-list {
|
||||
padding: 30rpx 24rpx;
|
||||
padding: 28rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
/* 优惠券单卡片基本样式 */
|
||||
.coupon-card {
|
||||
background-color: #fff4f4; /* 淡淡的红粉色底 */
|
||||
background: rgba(102,102,102,0.06);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
height: 196rpx;
|
||||
@@ -209,14 +204,14 @@ export default {
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: flex-end; /* 底部对齐 */
|
||||
align-items: flex-end;
|
||||
color: #ff1224;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.currency {
|
||||
font-size: 26rpx;
|
||||
font-size: 32rpx;
|
||||
margin-right: 2rpx;
|
||||
margin-bottom: 6rpx; /* 让¥符号优雅落地 */
|
||||
}
|
||||
|
||||
.amount {
|
||||
@@ -243,7 +238,7 @@ export default {
|
||||
.divider-line {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed #ffcbd0;
|
||||
border-left: 2rpx dashed rgba(253,28,36,0.3);
|
||||
}
|
||||
|
||||
/* 模拟卡片边缘剪票口的半圆凹槽 */
|
||||
@@ -281,16 +276,15 @@ export default {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-size: 36rpx;
|
||||
color: #2c2c2c;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #6a6a6a;
|
||||
margin-top: 8rpx;
|
||||
white-space: nowrap;
|
||||
@@ -299,7 +293,7 @@ export default {
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 22rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ff5260;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
@@ -307,12 +301,12 @@ export default {
|
||||
|
||||
/* 立即使用按钮 */
|
||||
.use-btn {
|
||||
width: 120rpx;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background-color: #ff1a2e;
|
||||
background-color: #FD1C24;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 12rpx; /* 原图接近微圆角矩形，而非纯半圆 */
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx; /* 原图接近微圆角矩形，而非纯半圆 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -127,7 +127,7 @@ export default {
|
||||
},
|
||||
handleClick(item) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/other_package/productInfo/evaluateDetail?item=" + JSON.stringify(item),
|
||||
url: "/pages/other_package/productInfo/evaluateDetail",
|
||||
});
|
||||
},
|
||||
},
|
||||
@@ -152,6 +152,7 @@ export default {
|
||||
padding: 30rpx 0 20rpx;
|
||||
position: relative;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
@@ -159,6 +160,8 @@ export default {
|
||||
background-color: #ffffff;
|
||||
padding: 10rpx 30rpx 30rpx;
|
||||
gap: 24rpx; /* 标签之间的标准间距 */
|
||||
margin: 0 20rpx;
|
||||
border-top: 1rpx solid #f6f6f6;
|
||||
|
||||
.filter-tab {
|
||||
text-align: center;
|
||||
@@ -193,6 +196,8 @@ export default {
|
||||
.eval-item {
|
||||
padding: 30rpx 30rpx 20rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.user-info-row {
|
||||
|
||||
Reference in New Issue
Block a user