diff --git a/pages/rank/rank.vue b/pages/rank/rank.vue
index 53bf96e..3e8a635 100644
--- a/pages/rank/rank.vue
+++ b/pages/rank/rank.vue
@@ -49,7 +49,10 @@
券后￥
{{ goodsList[1].finalPrice }}
- 券 {{ goodsList[1].couponValue }}元
+
+ 券
+ {{ goodsList[1].couponValue }}元
+
@@ -69,7 +72,10 @@
券后￥
{{ goodsList[0].finalPrice }}
- 券 {{ goodsList[0].couponValue }}元
+
+ 券
+ {{ goodsList[0].couponValue }}元
+
@@ -88,7 +94,10 @@
券后￥
{{ goodsList[2].finalPrice }}
- 券 {{ goodsList[2].couponValue }}元
+
+ 券
+ {{ goodsList[2].couponValue }}元
+
@@ -113,10 +122,15 @@
{{ goods.finalPrice }}
¥{{ goods.originalPrice }}
- 券 {{ goods.couponValue }}元
+
+ 券
+ {{ goods.couponValue }}元
+
- 近2小时已抢 {{ goods.sales }} 件
- 马上抢
+
+ 近2小时已抢 {{ goods.itemsale2 }} 件
+
+ 马上抢
@@ -191,9 +205,13 @@
title = title.substring(0, 18) + '...';
}
- // 处理销量显示
+ // 处理销量显示 (总销量/今日销量)
let salesCount = this.rankType === 1 ? (item.todaysale || item.itemsale2 || 0) : item.itemsale;
let salesStr = salesCount >= 10000 ? (salesCount / 10000).toFixed(1) + '万' : salesCount;
+
+ // 近2小时销量 (itemsale2)
+ let itemSale2 = item.itemsale2 || 0;
+ let itemSale2Str = itemSale2 >= 10000 ? (itemSale2 / 10000).toFixed(1) + '万' : itemSale2;
return {
id: item.itemid,
@@ -203,6 +221,7 @@
originalPrice: item.itemprice,
couponValue: item.couponmoney || 0,
sales: salesStr,
+ itemsale2: itemSale2Str,
shopName: item.shopname,
labels: item.label || []
};
@@ -466,14 +485,14 @@
}
.top-info-box {
- padding: 24rpx 10rpx 12rpx;
+ padding: 24rpx 16rpx 16rpx; /* 增加左右内边距 */
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: #ffffff;
border-radius: 0 0 20rpx 20rpx;
- text-align: center;
+ text-align: left; /* 切换为左对齐 */
}
.top-name {
@@ -489,7 +508,7 @@
.top-price-box {
display: flex;
align-items: baseline;
- justify-content: center;
+ justify-content: flex-start; /* 切换为左对齐 */
color: #ff4b2b;
}
@@ -503,15 +522,40 @@
font-weight: 900;
}
- .top-coupon-tag {
- margin: 4rpx auto 0;
- font-size: 18rpx;
- color: #ff4b2b;
- background: rgba(255, 75, 43, 0.1);
- padding: 0 12rpx;
+ .coupon-wrap {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ margin: 8rpx 0 0; /* 移除 auto，改为左对齐 */
+ border: 1rpx solid #ff4b2b;
border-radius: 4rpx;
- display: inline-block;
- border: 1rpx solid rgba(255, 75, 43, 0.3);
+ overflow: hidden;
+ background: #ffffff;
+ align-self: flex-start; /* 确保在 flex 容器中左对齐 */
+ }
+
+ .rest-right .coupon-wrap {
+ margin: 8rpx 0;
+ align-self: flex-start;
+ }
+
+ .coupon-label {
+ background: #ff4b2b;
+ color: #ffffff;
+ font-size: 18rpx;
+ padding: 0 8rpx;
+ height: 30rpx;
+ line-height: 30rpx;
+ font-weight: bold;
+ }
+
+ .coupon-value {
+ color: #ff4b2b;
+ font-size: 18rpx;
+ padding: 0 10rpx;
+ height: 30rpx;
+ line-height: 30rpx;
+ font-weight: bold;
}
/* ========== Top 4+ 列表 ========== */
@@ -533,15 +577,15 @@
width: 200rpx;
height: 200rpx;
border-radius: 12rpx;
- overflow: visible; /* 修改为 visible 允许角标超出 */
+ overflow: visible;
position: relative;
background: #f5f5f5;
}
.rest-badge-wrap {
position: absolute;
- top: -12rpx; /* 向上移动一点 */
- left: -4rpx; /* 向左移动一点 */
+ top: -12rpx;
+ left: -4rpx;
width: 50rpx;
height: 50rpx;
z-index: 99;
@@ -575,6 +619,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
+ min-width: 0; /* 关键：防止 Flex 子项被内容撑开导致超伸 */
}
.rest-title-row {
@@ -623,46 +668,51 @@
text-decoration: line-through;
}
- .rest-coupon {
- display: inline-block;
- align-self: flex-start;
- background: linear-gradient(90deg, #ff9a44, #ff6534);
- color: #ffffff;
- font-size: 20rpx;
- padding: 4rpx 16rpx;
- border-radius: 20rpx;
- margin-top: 6rpx;
- }
-
.rest-buy-bar {
display: flex;
align-items: center;
- justify-content: space-between;
background: url("https://web.cms.hykefu.cn/static/img/todayBg.png") no-repeat center;
background-size: 100% 100%;
- border-radius: 30rpx;
+ border-radius: 40rpx;
margin-top: 10rpx;
- padding: 4rpx 4rpx 4rpx 20rpx;
overflow: hidden;
+ width: 100%;
+ height: 56rpx;
+ box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
+ }
+
+ .btn-prev {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ padding-left: 20rpx;
+ height: 100%;
}
.rest-buy-txt {
+ padding-left: 15rpx;
font-size: 20rpx;
color: #ff6534;
+ white-space: nowrap;
}
.rest-buy-num {
font-weight: bold;
color: #ff4b2b;
+ margin: 0 4rpx;
}
- .rest-buy-btn {
- background: linear-gradient(90deg, #ff6534, #ff4b2b);
- color: #ffffff;
- font-size: 22rpx;
+ .btn-next {
+ width: 150rpx; /* 调整宽度以对齐图片中的按钮区域 */
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: transparent; /* 背景透明，直接使用底图效果 */
+ color: #ffffff !important;
+ font-size: 24rpx;
font-weight: bold;
- padding: 10rpx 24rpx;
- border-radius: 30rpx;
+ flex-shrink: 0;
}
/* ========== 其他 ========== */