15133400227
/
baimacms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

排行榜

This commit is contained in:
1173117610@qq.com 2026-05-11 15:36:42 +08:00
parent 0ddbba548e
commit dbbba56a1b
1 changed files with 91 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
pages/rank/rank.vue
View File

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