diff --git a/pages/rank/rank.vue b/pages/rank/rank.vue
index 0d33e03..53bf96e 100644
--- a/pages/rank/rank.vue
+++ b/pages/rank/rank.vue
@@ -6,12 +6,16 @@
- 🔥
- 实时热销榜
- 🔥
+
+
+ 实时热销榜
+
+
- 全天热销榜
+
+ 全天热销榜
+
@@ -25,63 +29,67 @@
-
-
-
-
+
+
+
+
-
-
- 2
+
+ TOP 2
已抢{{ goodsList[1].sales }}件
-
-
+
{{ goodsList[1].title }}
+
+ 券后￥
+ {{ goodsList[1].finalPrice }}
+
+ 券 {{ goodsList[1].couponValue }}元
- 券后¥{{ goodsList[1].finalPrice }}
- 券 {{ goodsList[1].couponValue }}元
-
+
-
-
- 1
+
+
+ TOP 1
- 已抢{{ goodsList[0].sales }}件
+ 已抢{{ goodsList[0].sales }}件
-
-
+
{{ goodsList[0].title }}
+
+ 券后￥
+ {{ goodsList[0].finalPrice }}
+
+ 券 {{ goodsList[0].couponValue }}元
- 券后¥{{ goodsList[0].finalPrice }}
- 券 {{ goodsList[0].couponValue }}元
-
-
- 3
+
+ TOP 3
已抢{{ goodsList[2].sales }}件
-
-
+
{{ goodsList[2].title }}
+
+ 券后￥
+ {{ goodsList[2].finalPrice }}
+
+ 券 {{ goodsList[2].couponValue }}元
- 券后¥{{ goodsList[2].finalPrice }}
- 券 {{ goodsList[2].couponValue }}元
@@ -234,8 +242,10 @@
top: 0;
left: 0;
right: 0;
- background: linear-gradient(180deg, #ff6034, #ff4b2b, #ff416c);
- z-index: 100;
+ background-image: linear-gradient(90deg, rgba(255, 154, 12, 0.9), rgba(253, 36, 39, 0.9)), url("https://img.alicdn.com/bao/uploaded/O1CN015WwOJy1qPYhqS1DwG_!!6000000005488-0-yinhe.jpg_310x310");
+ background-size: cover;
+ background-position: center;
+ z-index: 200; /* 提升层级至最高，确保滑动时文字不被卡片遮挡 */
padding-bottom: 0;
}
@@ -249,14 +259,22 @@
.main-tab {
display: flex;
+ flex-direction: column;
align-items: center;
- gap: 4rpx;
+ position: relative;
+ }
+
+ .tab-content-wrap {
+ display: flex;
+ align-items: center;
+ gap: 8rpx;
}
.tab-main-txt {
font-size: 30rpx;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s;
+ padding-bottom: 8rpx;
}
.main-tab.active .tab-main-txt {
@@ -265,58 +283,86 @@
font-weight: bold;
}
- .fire-icon {
- font-size: 28rpx;
+ .main-tab.active::after {
+ content: "";
+ width: 40rpx;
+ height: 4rpx;
+ background: #ffffff;
+ border-radius: 2rpx;
+ margin-top: 4rpx; /* 紧贴文字下方 */
+ }
+
+ .wheat-icon {
+ width: 32rpx;
+ height: 44rpx;
+ }
+
+ .wheat-right {
+ transform: scaleX(-1);
}
/* 分类导航 */
.cate-nav {
white-space: nowrap;
- padding: 16rpx 0;
- background: #ffffff;
- border-radius: 20rpx 20rpx 0 0;
+ padding: 10rpx 0 20rpx;
+ background: transparent;
}
.cate-item {
display: inline-block;
- padding: 8rpx 28rpx;
- margin: 0 8rpx;
+ padding: 8rpx 32rpx;
position: relative;
}
.cate-txt {
font-size: 28rpx;
- color: #666;
+ color: rgba(255, 255, 255, 0.8);
}
.cate-item.active .cate-txt {
- color: #333;
+ color: #ffffff;
font-weight: bold;
+ font-size: 30rpx;
}
- .cate-item.active {
- border-bottom: 4rpx solid #ff4b2b;
+ .cate-item.active::after {
+ content: "";
+ position: absolute;
+ bottom: 4rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 48rpx;
+ height: 6rpx;
+ background: #ffffff;
+ border-radius: 3rpx;
}
/* ========== 滚动内容 ========== */
.rank-content {
flex: 1;
height: 100%;
+ background-color: #f5f6f8;
+ overflow: visible;
}
- .header-placeholder {
+ .rank-bg-header {
width: 100%;
+ background-image: linear-gradient(90deg, rgba(255, 154, 12, 0.9), rgba(253, 36, 39, 0.9)), url("https://img.alicdn.com/bao/uploaded/O1CN015WwOJy1qPYhqS1DwG_!!6000000005488-0-yinhe.jpg_310x310");
+ background-size: cover;
+ background-position: bottom;
}
/* ========== Top 1-3 领奖台 ========== */
.top-three-wrap {
display: flex;
align-items: flex-end;
- justify-content: center;
- padding: 20rpx 16rpx 10rpx;
- background: #ffffff;
- margin: 0 0 16rpx;
- gap: 10rpx;
+ justify-content: space-between;
+ padding: 60rpx 20rpx 20rpx;
+ margin-top: -60rpx; /* 调小负边距，防止遮挡导航文字 */
+ position: relative;
+ z-index: 110;
+ box-sizing: border-box;
+ width: 100%;
}
.top-card {
@@ -324,122 +370,148 @@
flex-direction: column;
align-items: center;
background: #ffffff;
- border-radius: 12rpx;
- overflow: hidden;
+ border-radius: 20rpx;
+ overflow: visible;
position: relative;
+ box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.15);
}
.top-card-side {
- flex: 1;
+ width: 31%;
+ height: 410rpx; /* 侧边基准高度 */
+ z-index: 10;
}
.top-card-center {
- flex: 1.15;
- margin-top: -20rpx;
+ width: 34%;
+ height: 470rpx; /* 中间拔高 */
+ z-index: 15;
+ border: 2rpx solid #ffd700;
}
+ .crown-icon {
+ position: absolute;
+ top: -50rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 76rpx;
+ z-index: 100;
+ }
+
+ /* 荣誉徽章体系 (参考 shop-sy2) */
.top-badge-wrap {
position: absolute;
- top: -6rpx;
- left: 8rpx;
- width: 60rpx;
- height: 60rpx;
- z-index: 10;
+ top: 0;
+ left: 0;
+ padding: 4rpx 16rpx;
+ border-radius: 20rpx 0 20rpx 0;
+ z-index: 99;
display: flex;
align-items: center;
justify-content: center;
}
- .top-badge-img {
- width: 60rpx;
- position: absolute;
+ .badge-1 {
+ background: linear-gradient(135deg, #ff4b2b, #ff416c);
+ }
+
+ .badge-2 {
+ background: linear-gradient(135deg, #4facfe, #00f2fe);
+ }
+
+ .badge-3 {
+ background: linear-gradient(135deg, #f093fb, #f5576c);
}
.top-badge-num {
- position: relative;
- z-index: 11;
- font-size: 24rpx;
- font-weight: bold;
+ font-size: 20rpx;
+ font-weight: 900;
color: #ffffff;
- margin-top: -6rpx;
+ font-style: italic;
}
.top-img-box {
width: 100%;
- aspect-ratio: 1;
- border-radius: 12rpx;
- overflow: hidden;
+ height: 210rpx;
+ overflow: visible;
position: relative;
background: #f5f5f5;
}
+ .top-card-center .top-img-box {
+ height: 270rpx;
+ }
+
.top-img {
width: 100%;
height: 100%;
+ border-radius: 16rpx 16rpx 0 0;
}
+ /* 胶囊式销量标签 */
.top-sales-bar {
position: absolute;
bottom: 0;
- left: 0;
- right: 0;
- background: linear-gradient(90deg, #ff9a44, #ff6534);
+ left: 50%;
+ transform: translate(-50%, 50%);
+ background: rgba(255, 75, 43, 0.9);
color: #ffffff;
- font-size: 20rpx;
- text-align: center;
- padding: 6rpx 0;
+ font-size: 18rpx;
+ white-space: nowrap;
+ padding: 4rpx 16rpx;
+ border-radius: 40rpx;
font-weight: bold;
+ z-index: 100;
+ box-shadow: 0 4rpx 12rpx rgba(255, 75, 43, 0.3);
}
- .top-sales-bar-1 {
- background: linear-gradient(90deg, #ff5e62, #ff416c);
- }
-
- .top-title {
- display: flex;
- align-items: center;
- padding: 10rpx 8rpx 4rpx;
+ .top-info-box {
+ padding: 24rpx 10rpx 12rpx;
width: 100%;
+ display: flex;
+ flex-direction: column;
box-sizing: border-box;
- }
-
- .p-icon {
- width: 24rpx;
- height: 24rpx;
- margin-right: 4rpx;
- flex-shrink: 0;
+ background: #ffffff;
+ border-radius: 0 0 20rpx 20rpx;
+ text-align: center;
}
.top-name {
- font-size: 22rpx;
+ font-size: 24rpx;
color: #333;
font-weight: bold;
+ margin-bottom: 8rpx;
+ white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- white-space: nowrap;
- flex: 1;
}
- .top-price {
- font-size: 22rpx;
+ .top-price-box {
+ display: flex;
+ align-items: baseline;
+ justify-content: center;
color: #ff4b2b;
- padding: 0 8rpx;
- width: 100%;
- box-sizing: border-box;
}
- .tp-val {
- font-size: 30rpx;
+ .price-label {
+ font-size: 18rpx;
font-weight: bold;
}
+ .price-val {
+ font-size: 34rpx;
+ font-weight: 900;
+ }
+
.top-coupon-tag {
- background: linear-gradient(90deg, #ff9a44, #ff6534);
- color: #ffffff;
- font-size: 20rpx;
- padding: 4rpx 16rpx;
- border-radius: 20rpx;
- margin: 6rpx 0 12rpx;
+ margin: 4rpx auto 0;
+ font-size: 18rpx;
+ color: #ff4b2b;
+ background: rgba(255, 75, 43, 0.1);
+ padding: 0 12rpx;
+ border-radius: 4rpx;
+ display: inline-block;
+ border: 1rpx solid rgba(255, 75, 43, 0.3);
}
/* ========== Top 4+ 列表 ========== */
@@ -461,18 +533,18 @@
width: 200rpx;
height: 200rpx;
border-radius: 12rpx;
- overflow: hidden;
+ overflow: visible; /* 修改为 visible 允许角标超出 */
position: relative;
background: #f5f5f5;
}
.rest-badge-wrap {
position: absolute;
- top: -2rpx;
- left: 4rpx;
+ top: -12rpx; /* 向上移动一点 */
+ left: -4rpx; /* 向左移动一点 */
width: 50rpx;
height: 50rpx;
- z-index: 10;
+ z-index: 99;
display: flex;
align-items: center;
justify-content: center;
@@ -510,6 +582,13 @@
align-items: center;
}
+ .p-icon {
+ width: 26rpx;
+ height: 26rpx;
+ margin-right: 8rpx;
+ flex-shrink: 0;
+ }
+
.rest-name {
font-size: 26rpx;
color: #333;
@@ -559,7 +638,8 @@
display: flex;
align-items: center;
justify-content: space-between;
- background: linear-gradient(90deg, #fff0e6, #ffe8d6);
+ background: url("https://web.cms.hykefu.cn/static/img/todayBg.png") no-repeat center;
+ background-size: 100% 100%;
border-radius: 30rpx;
margin-top: 10rpx;
padding: 4rpx 4rpx 4rpx 20rpx;
diff --git a/scratch/decode_wheat.js b/scratch/decode_wheat.js
new file mode 100644
index 0000000..1a03ef4
--- /dev/null
+++ b/scratch/decode_wheat.js
@@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+
+const base64Data = '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';
+
+const buffer = Buffer.from(base64Data, 'base64');
+const outputPath = path.join(__dirname, '..', 'static', 'wheat_icon.png');
+
+try {
+ fs.writeFileSync(outputPath, buffer);
+ console.log('Success: Saved to ' + outputPath);
+} catch (err) {
+ console.error('Error: ' + err.message);
+ process.exit(1);
+}
diff --git a/static/wheat_icon.png b/static/wheat_icon.png
new file mode 100644
index 0000000..612b4d0
Binary files /dev/null and b/static/wheat_icon.png differ