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-val">{{ goodsList[1].finalPrice }}</text>
</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>
@ -69,7 +72,10 @@
<text class="price-label">券后￥</text>
<text class="price-val">{{ goodsList[0].finalPrice }}</text>
</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>
@ -88,7 +94,10 @@
<text class="price-label">券后￥</text>
<text class="price-val">{{ goodsList[2].finalPrice }}</text>
</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>
@ -113,10 +122,15 @@
<text class="rest-price-val">{{ goods.finalPrice }}</text>
<text class="rest-price-old">¥{{ goods.originalPrice }}</text>
</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">
<text class="rest-buy-txt">近2小时已抢 <text class="rest-buy-num">{{ goods.sales }}</text> 件</text>
<view class="rest-buy-btn">马上抢</view>
<view class="btn-prev">
<text class="rest-buy-txt">近2小时已抢 <text class="rest-buy-num">{{ goods.itemsale2 }}</text> 件</text>
</view>
<view class="btn-next">马上抢</view>
</view>
</view>
</view>
@ -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;
}
/* ========== 其他 ========== */