From 0ddbba548efb299ce0598ec107c13d5d2bff7083 Mon Sep 17 00:00:00 2001 From: "1173117610@qq.com" Date: Mon, 11 May 2026 15:14:21 +0800 Subject: [PATCH] 1 --- pages/rank/rank.vue | 308 +++++++++++++++++++++++++--------------- scratch/decode_wheat.js | 15 ++ static/wheat_icon.png | Bin 0 -> 1866 bytes 3 files changed, 209 insertions(+), 114 deletions(-) create mode 100644 scratch/decode_wheat.js create mode 100644 static/wheat_icon.png 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 0000000000000000000000000000000000000000..612b4d0e1fecc917d64e539c12024e9c9e8d4e1d GIT binary patch literal 1866 zcmV-Q2etT#P)C(gR#kef9}pOn~=Q^NWBV0-J$91Ahd*&IdacD$rkBBFn z`-snYZ$xZ!u8b8Cao7~r`M)vQ8&7fJ93P5^)2r(T1bk67SH?{dF{f2=PjR->nA6-DZz>14{*am>Rwp_9`Ks9I_hk5s0*9QYdWK{G{?@D|`)>1RwW z*~z*~Sf$ZZ+b4T1kwt#@4NiaJxw?Dy2{ zvT8mxI0x7*4|Y{jgU{7u8IgYgUg`BqfTMtK>k1cZ`jZ5dJ9`xP3h<|Hfy{+p1N=b$ z`XbLPI^_JAnIZ}JlSb=k<*Pe7QL#Lmqy`72h|lP2@3TVrr~r0bq3m@-VfxCbz0LWq z0^C;d*43u5O~4Uy+GfG_yP2K(<+Mms9xEnG0OwbnxVgHwUyl4baJ!`5b?FtvYJ(!> z49%7RA9F50`;>)2SR5obPKyRpzF}K9W*VEN*>|hW>zv!`_$u(9>Cj*SxXB3KrGNDZ zFtzm_HJ#v}w4k_qI>6z=uLafsE2WYJa^t9tP@loF+KkcE7t=M?Ob5WF=Fxjh`oFPA z7&9=gsqR0|4zJ&0qU(~{Sf{pLCKn!Q3LCW!EOMc>UXOm5CH=Gj{AE>{%(mZn-0OMX zH_t+$R55o-;?n}K^t2^~%`=k>tHD9Fx6gYXGBsvDa_tn)ccv_*-1@!?o#FLq77r&{ z<;)lS-@G@qd8VKn(*ZCSzu8DVUoO1Emh)7jcZ1ry&`vM?@R6z)=_tsXe5{1y<810Fxa{Ru-{YCKF?dSe7egZSZ|57L@l18D~x&$lXc+RWPt0GGROe=Q8XQ#w-eJ#CBDqHb@3rR`u(Nvt_?;C^ z=Hj!f!eUsEbGrd>M2+0*f(7WM0@|yY?{hQ5p4F5byx{ z@xPq=`YN!paVo@}Y4YXr=JEP-N8~_ffDMN|wV(Q%V z1ML7E53on>n`e8uOR$^N?ox^SEKjkr!TO0n4zB=?*c}e&I=iH!DZe!u4{))IkAK*( zHQ=x0!6j16E!EL*2(Z+Xvz$NKGwnC2=`B+MI6jZA^kE}aVKC-K&avdbs|uPkt5jDi zpmkM6p5uAIp<3l)6F|!v3^g@mb~whxN)P;~DQ~pmz(GlTqq+Mp)pr`2dC*hWUca-V zRe(iy7|9dKYW?b5HFTM8l-7BkxX00>dyH1rctIxs)^e1ZnQK}syqAGzu(Fm_nG4!f(t&b>7MeQqcv&20M=Hm>>R-! zGLE>*tF%(W?P=#n6{*P?l{UgfPm&vPE?jhn6jT