From b67e7ceba6dbc5388869f484e632cef9a9ca702b Mon Sep 17 00:00:00 2001 From: wangfukang <15630117759@163.com> Date: Fri, 17 Jul 2026 13:39:29 +0800 Subject: [PATCH] 1 --- package1/buyFood/buyFood.vue | 2 +- package1/order/orderDetail.vue | 4 +- package1/runErrand/runErrand.vue | 2 +- package1/tabbar/release.vue | 1269 +++++++++++++++++++++++++++++- 4 files changed, 1232 insertions(+), 45 deletions(-) diff --git a/package1/buyFood/buyFood.vue b/package1/buyFood/buyFood.vue index dac72b9..b0985d2 100644 --- a/package1/buyFood/buyFood.vue +++ b/package1/buyFood/buyFood.vue @@ -357,7 +357,7 @@ 最低 0.1 元，最高 200 元，最多输入 2 位小数 ￥ - diff --git a/package1/order/orderDetail.vue b/package1/order/orderDetail.vue index f68d407..0cf14b4 100644 --- a/package1/order/orderDetail.vue +++ b/package1/order/orderDetail.vue @@ -888,8 +888,7 @@ 最低 0.1 元，最高 200 元，最多输入 2 位小数 ￥ - + 取消 @@ -2115,6 +2114,7 @@ } }, fail: function(err) { + that.$refs.addFeePayPopup.close(); that.cancelPendingAddFeeAssign(); that.tui.toast('支付失败取消'); } diff --git a/package1/runErrand/runErrand.vue b/package1/runErrand/runErrand.vue index 24d16d0..f92971c 100644 --- a/package1/runErrand/runErrand.vue +++ b/package1/runErrand/runErrand.vue @@ -320,7 +320,7 @@ 最低 0.1 元，最高 200 元，最多输入 2 位小数 ￥ - diff --git a/package1/tabbar/release.vue b/package1/tabbar/release.vue index faef09e..d4f40aa 100644 --- a/package1/tabbar/release.vue +++ b/package1/tabbar/release.vue @@ -1,15 +1,184 @@ @@ -17,25 +186,174 @@ export default { data() { return { - menuButtonInfo: {}, + statusBarHeight: 24, + keyword: '', + bubbleTimer: null, + bubbleReady: false, + ranks: [{ + rank: 1, + title: '食堂红烧肉今天又翻车了', + views: 982, + rise: 236, + pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png', + emoji: '🍱', + reactions: [{ icon: '😂', count: 341 }, { icon: '😭', count: 22 }, { icon: '🤢', count: 88 }, { icon: '👍', count: 101 }] + }, { + rank: 2, + title: '图书馆突然停电全场尖叫', + views: 756, + rise: 198, + pic: '', + emoji: '🏫', + reactions: [{ icon: '😂', count: 276 }, { icon: '😭', count: 19 }, { icon: '😱', count: 66 }, { icon: '👍', count: 95 }] + }, { + rank: 3, + title: '东门奶茶买一送一排队排到操场', + views: 645, + rise: 152, + pic: '', + emoji: '🧋', + reactions: [{ icon: '😂', count: 231 }, { icon: '😭', count: 11 }, { icon: '🤢', count: 45 }, { icon: '👍', count: 88 }] + }, { + rank: 4, + title: '操场有人放《孤勇者》全场合唱', + views: 593, + rise: 121, + pic: '', + emoji: '🌃', + reactions: [{ icon: '😂', count: 206 }, { icon: '😈', count: 8 }] + }, { + rank: 5, + title: '宿舍楼有人煮螺蛳粉', + views: 512, + rise: 96, + pic: '', + emoji: '😎🐱', + reactions: [{ icon: '😂', count: 108 }, { icon: '😭', count: 15 }] + }], + topics: [ + { name: '宿舍断电', count: 2564, x: 20, y: 80, size: 98, vx: .32, vy: -.18 }, + { name: '食堂', count: 5621, x: 135, y: 10, size: 125, vx: -.24, vy: .22 }, + { name: '军训', count: 1890, x: 110, y: 145, size: 84, vx: .25, vy: -.3 }, + { name: '毕业设计', count: 1654, x: 270, y: 140, size: 83, vx: -.28, vy: -.22 }, + { name: '四六级', count: 3412, x: 300, y: 15, size: 115, vx: .27, vy: .2 }, + { name: '恋爱', count: 2376, x: 430, y: 20, size: 90, vx: -.3, vy: .26 }, + { name: '外卖涨价', count: 1243, x: 430, y: 140, size: 84, vx: .26, vy: -.24 }, + { name: '图书馆', count: 4128, x: 565, y: 85, size: 110, vx: -.32, vy: -.2 } + ] } }, - onLoad(option) { - + computed: { + headerSpacerHeight() { + return this.statusBarHeight + 96 + }, + filteredRanks() { + const keyword = this.keyword.toLowerCase() + if (!keyword) return this.ranks + return this.ranks.filter(item => item.title.toLowerCase().indexOf(keyword) > -1) + } + }, + onLoad() { + const systemInfo = uni.getSystemInfoSync() + this.statusBarHeight = Number(systemInfo.statusBarHeight) || 24 + }, + onReady() { + this.bubbleReady = true + this.startBubbleMotion() }, onShow() { - this.menuButtonInfo = uni.getMenuButtonBoundingClientRect(); + if (this.bubbleReady) this.startBubbleMotion() + }, + onHide() { + this.stopBubbleMotion() + }, + onUnload() { + this.stopBubbleMotion() }, methods: { - back() { - const pages = getCurrentPages(); - if (pages.length > 1) { - uni.navigateBack(); - } else { - uni.switchTab({ - url: '/pages/index/index' - }); + backHome() { + uni.switchTab({ + url: '/pages/index/index' + }) + }, + search() { + uni.hideKeyboard() + if (this.keyword && !this.filteredRanks.length) { + uni.showToast({ title: '暂时没有相关热榜', icon: 'none' }) } + }, + shuffleTopics() { + this.topics.forEach((topic, index) => { + const direction = index % 2 ? -1 : 1 + topic.vx = direction * (.32 + Math.random() * .22) + topic.vy = (Math.random() - .5) * .7 + }) + }, + selectTopic(topic) { + this.keyword = topic.name + uni.showToast({ title: '正在围观「' + topic.name + '」', icon: 'none' }) + }, + bubbleStyle(topic) { + return 'width:' + topic.size + 'rpx;' + + 'height:' + topic.size + 'rpx;' + + 'transform:translate3d(' + topic.x + 'rpx,' + topic.y + 'rpx,0);' + }, + startBubbleMotion() { + if (this.bubbleTimer) return + this.bubbleTimer = setInterval(this.moveBubbles, 360) + }, + stopBubbleMotion() { + if (!this.bubbleTimer) return + clearInterval(this.bubbleTimer) + this.bubbleTimer = null + }, + moveBubbles() { + const stageWidth = 700 + const stageHeight = 235 + const stepFactor = 9 + const bubbles = this.topics + + bubbles.forEach(bubble => { + bubble.x += bubble.vx * stepFactor + bubble.y += bubble.vy * stepFactor + if (bubble.x <= 0 || bubble.x + bubble.size >= stageWidth) { + bubble.x = Math.max(0, Math.min(stageWidth - bubble.size, bubble.x)) + bubble.vx *= -1 + } + if (bubble.y <= 0 || bubble.y + bubble.size >= stageHeight) { + bubble.y = Math.max(0, Math.min(stageHeight - bubble.size, bubble.y)) + bubble.vy *= -1 + } + }) + + for (let i = 0; i < bubbles.length; i++) { + for (let j = i + 1; j < bubbles.length; j++) { + const first = bubbles[i] + const second = bubbles[j] + const dx = second.x + second.size / 2 - first.x - first.size / 2 + const dy = second.y + second.size / 2 - first.y - first.size / 2 + const distance = Math.sqrt(dx * dx + dy * dy) || 1 + const minDistance = (first.size + second.size) / 2 + if (distance >= minDistance) continue + + const nx = dx / distance + const ny = dy / distance + const overlap = (minDistance - distance) / 2 + first.x -= nx * overlap + first.y -= ny * overlap + second.x += nx * overlap + second.y += ny * overlap + + const firstNormal = first.vx * nx + first.vy * ny + const secondNormal = second.vx * nx + second.vy * ny + first.vx += (secondNormal - firstNormal) * nx + first.vy += (secondNormal - firstNormal) * ny + second.vx += (firstNormal - secondNormal) * nx + second.vy += (firstNormal - secondNormal) * ny + } + } + + this.topics = bubbles.slice() } } } @@ -45,45 +363,914 @@ page { width: 100%; height: 100%; - font-size: 24rpx; - background: #F5F8F5; - color: #00231C; + background: #f7faf8; + color: #161d1a; + font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; } - .page1 { + .hot-page, + .page-scroll { width: 100%; height: 100%; - font-size: 24rpx; - position: relative; } - .title { - background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat; + .page-content { + min-height: 100%; + background: + radial-gradient(circle at 90rpx 30rpx, rgba(198, 247, 231, .65), transparent 250rpx), + linear-gradient(180deg, #f1fffb 0, #fff 720rpx, #f8fbf9 100%); + } + + .header { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1000; + padding-right: 190rpx; + padding-left: 28rpx; + padding-bottom: 18rpx; + background: linear-gradient(180deg, rgba(237, 255, 249, .99), rgba(249, 255, 252, .98)); + box-shadow: 0 8rpx 24rpx rgba(33, 111, 87, .06); + } + + .header-spacer { width: 100%; - height: 340rpx; - background-size: 100%; + } + + .back-home { + position: absolute; + left: 18rpx; + width: 92rpx; + height: 48rpx; + display: flex; + align-items: center; + justify-content: center; + gap: 1rpx; + border: 1rpx solid rgba(35, 164, 122, .16); + border-radius: 25rpx; + background: rgba(255,255,255,.72); + box-shadow: 0 5rpx 14rpx rgba(31, 94, 73, .07); + color: #1e6f57; + font-size: 18rpx; + font-weight: 700; + } + + .brand-line { + height: 58rpx; + display: flex; + align-items: center; + margin-left: 102rpx; + } + + .brand { + font-size: 39rpx; + font-weight: 900; + letter-spacing: -1rpx; + } + + .eyes { + margin-left: 9rpx; + font-size: 26rpx; + font-weight: 900; + letter-spacing: 3rpx; + } + + .eating { + margin-left: 13rpx; + padding: 7rpx 17rpx; + border-radius: 24rpx; + background: #31c78a; + color: #fff; + font-size: 19rpx; + font-weight: 800; + } + + .subtitle { + margin-top: 2rpx; + color: #69726f; + font-size: 19rpx; + letter-spacing: 1rpx; + } + + .search-box { + position: relative; + width: calc(100vw - 48rpx); + height: 66rpx; + display: flex; + align-items: center; + margin-top: 20rpx; + padding-left: 20rpx; + border: 2rpx solid #57d4ac; + border-radius: 36rpx; + background: rgba(255,255,255,.92); + box-shadow: 0 9rpx 22rpx rgba(35, 145, 111, .08); + } + + .search-input { + flex: 1; + height: 62rpx; + margin-left: 9rpx; + color: #26302c; + font-size: 22rpx; + line-height: 62rpx; + } + + .placeholder { + color: #a0a6a4; + } + + .search-button { + width: 94rpx; + height: 56rpx; + margin-right: 5rpx; + border-radius: 30rpx; + background: linear-gradient(135deg, #2bd398, #0db779); + box-shadow: 0 7rpx 15rpx rgba(20, 182, 123, .24); + color: #fff; + font-size: 21rpx; + font-weight: 800; + line-height: 56rpx; + text-align: center; + } + + .hero-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14rpx; + padding: 0 24rpx 20rpx; + } + + .heat-card, + .watch-card, + .melon-card { position: relative; + height: 204rpx; overflow: hidden; + border-radius: 21rpx; + box-shadow: 0 10rpx 24rpx rgba(35, 74, 61, .08); } - .nav-bar { - position: fixed; - top: 0; + .heat-card { + padding: 20rpx 17rpx; + background: linear-gradient(145deg, #071417, #071012); + color: #fff; + } + + .heat-label { + font-size: 20rpx; + font-weight: 800; + } + + .heat-number { + margin-top: 10rpx; + color: #ffe568; + font-family: Arial, sans-serif; + font-size: 40rpx; + font-weight: 900; + text-shadow: 0 0 14rpx rgba(255,224,72,.42); + } + + .heat-number text { + margin-left: 5rpx; + color: #18c78b; + font-size: 38rpx; + } + + .heat-rise { + display: inline-block; + margin-top: 12rpx; + padding: 5rpx 9rpx; + border-radius: 10rpx; + background: rgba(14, 129, 91, .24); + color: #19c88d; + font-size: 14rpx; + } + + .chart { + position: absolute; + right: 0; + bottom: 12rpx; left: 0; + height: 48rpx; + } + + .chart-line { + position: absolute; + height: 4rpx; + border-radius: 6rpx; + background: linear-gradient(90deg, #f1eb1b, #77f23b); + box-shadow: 0 0 10rpx #b8ed31; + transform-origin: left center; + } + + .line-a { width: 69rpx; left: -4rpx; top: 30rpx; transform: rotate(-13deg); } + .line-b { width: 61rpx; left: 61rpx; top: 15rpx; transform: rotate(2deg); } + .line-c { width: 58rpx; left: 120rpx; top: 17rpx; transform: rotate(-20deg); } + .line-d { width: 48rpx; left: 172rpx; top: 0; transform: rotate(-12deg); } + .chart-dot { position: absolute; right: 7rpx; top: -8rpx; width: 9rpx; height: 9rpx; border-radius: 50%; background: #e8f637; box-shadow: 0 0 10rpx #e8f637; } + + .watch-card { + padding: 17rpx 16rpx; + background: + radial-gradient(circle at 80% 8%, rgba(219,201,255,.65), transparent 85rpx), + linear-gradient(135deg, #fbf8ff, #fff); + } + + .watch-tag { + display: inline-block; + padding: 5rpx 10rpx; + border-radius: 14rpx; + background: linear-gradient(135deg, #9560f2, #b66df2); + color: #fff; + font-size: 14rpx; + font-weight: 800; + } + + .watch-title { + margin-top: 11rpx; + font-size: 19rpx; + font-weight: 800; + line-height: 29rpx; + } + + .watch-title text, + .reply-copy, + .map-point text, + .podium-item > view text { + display: block; + } + + .watch-meta { + margin-top: 12rpx; + color: #747c79; + font-size: 14rpx; + } + + .watch-meta text { + color: #ce9132; + } + + .avatar-row { + display: flex; + align-items: center; + margin-top: 10rpx; + } + + .avatar { + width: 30rpx; + height: 30rpx; + margin-right: -6rpx; + border: 2rpx solid #fff; + border-radius: 50%; + background: #ebe8e5; + font-size: 17rpx; + line-height: 30rpx; + text-align: center; + } + + .more { + margin-left: 12rpx; + color: #8a908e; + font-size: 15rpx; + letter-spacing: 2rpx; + } + + .melon-card { + background: + radial-gradient(circle at 78% 19%, rgba(255, 230, 169, .72), transparent 95rpx), + linear-gradient(145deg, #fffdf7, #fff8e9); + } + + .melon-image { + position: absolute; + top: -10rpx; + left: 12rpx; + width: 284rpx; + height: 234rpx; + } + + .melon-new { + position: absolute; + top: 55rpx; + right: 33rpx; + z-index: 4; + padding: 6rpx 10rpx; + border-radius: 12rpx; + background: linear-gradient(135deg, #ff6a62, #ff413d); + box-shadow: 0 5rpx 11rpx rgba(255, 74, 67, .22); + color: #fff; + font-size: 15rpx; + font-weight: 900; + transform: rotate(5deg); + } + + .melon-tip { + position: absolute; + right: 12rpx; + bottom: 13rpx; + z-index: 3; + width: 224rpx; + padding: 15rpx 16rpx 13rpx; + border-radius: 22rpx; + background: rgba(255,255,255,.96); + box-shadow: 0 10rpx 24rpx rgba(90,67,34,.12); + font-size: 20rpx; + font-weight: 800; + } + + .melon-tip-bottom { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 7rpx; + } + + .melon-tip-bottom > text:first-child { + color: #8e9693; + font-size: 16rpx; + font-weight: 400; + } + + .melon-arrow { + width: 27rpx; + height: 27rpx; + border-radius: 50%; + background: #ffae25; + color: #fff; + font-size: 22rpx; + font-weight: 800; + line-height: 25rpx; + text-align: center; + } + + .section { + border: 1rpx solid rgba(231,237,234,.82); + border-radius: 22rpx; + background: rgba(255,255,255,.94); + box-shadow: 0 9rpx 26rpx rgba(36,79,64,.055); + } + + .top-section { + margin: 0 24rpx; + padding: 15rpx 0 18rpx; + overflow: hidden; + } + + .section-head { + height: 40rpx; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 16rpx; + font-size: 21rpx; + font-weight: 900; + } + + .section-head.compact { + padding: 0; + } + + .section-link, + .change { + color: #87908d; + font-size: 15rpx; + font-weight: 500; + } + + .change { + color: #1dbc87; + } + + .rank-scroll { + width: 100%; + margin-top: 6rpx; + white-space: nowrap; + } + + .rank-list { + display: inline-flex; + gap: 13rpx; + padding: 0 15rpx; + } + + .rank-card { + width: 142rpx; + white-space: normal; + } + + .rank-picture { + position: relative; + width: 142rpx; + height: 86rpx; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border-radius: 12rpx; + background: #dfe8e4; + } + + .rank-picture image { + position: absolute; width: 100%; + height: 100%; + } + + .rank-picture--2 { background: linear-gradient(180deg, #27333c, #080d11); } + .rank-picture--3 { background: linear-gradient(145deg, #e9ded0, #caa780); } + .rank-picture--4 { background: linear-gradient(180deg, #071c2b, #173924); } + .rank-picture--5 { background: linear-gradient(145deg, #ded5c3, #f3e9d6); } + + .picture-emoji { + position: relative; + z-index: 1; + font-size: 42rpx; + } + + .rank-badge { + position: absolute; + top: -2rpx; + left: -2rpx; + z-index: 3; + width: 34rpx; + height: 34rpx; + border-radius: 50%; + background: #ffad12; + color: #fff; + font-size: 20rpx; + font-weight: 900; + line-height: 34rpx; + text-align: center; + } + + .rank-badge--2 { background: #559eea; } + .rank-badge--3 { background: #ff8249; } + .rank-badge--4 { background: #8d58e5; } + .rank-badge--5 { background: #55c96e; } + + .rank-title { + height: 57rpx; + margin-top: 8rpx; + overflow: hidden; + font-size: 18rpx; + font-weight: 800; + line-height: 28rpx; + } + + .rank-view { + margin-top: 6rpx; + color: #777f7c; + font-size: 14rpx; + white-space: nowrap; + } + + .rank-view text { + margin-left: 5rpx; + color: #ff682f; + } + + .reaction-row { display: flex; + justify-content: space-between; + margin-top: 10rpx; + } + + .reaction-row view { + display: flex; + flex-direction: column; align-items: center; - z-index: 100; - padding: 16rpx 24rpx; - box-sizing: border-box; + color: #68706d; + font-size: 13rpx; + } + + .reaction-row view text:first-child { + font-size: 20rpx; + } + + .bubble-section { + margin: 18rpx 24rpx 0; + padding: 15rpx 0 10rpx; + background: + radial-gradient(circle at 90% 18%, rgba(190,246,228,.42), transparent 140rpx), + linear-gradient(135deg, #fff, #f1fffa); + } + + .bubble-stage { + position: relative; + height: 235rpx; + overflow: hidden; } - .back-btn { + .topic-bubble { + position: absolute; + top: 0; + left: 0; + z-index: 1; display: flex; + flex-direction: column; align-items: center; justify-content: center; - width: 60rpx; - height: 60rpx; border-radius: 50%; + color: #fff; + font-size: 18rpx; + font-weight: 800; + line-height: 28rpx; + text-align: center; + box-shadow: + inset 8rpx 10rpx 18rpx rgba(255,255,255,.38), + inset -8rpx -10rpx 20rpx rgba(28,65,53,.14), + 0 13rpx 24rpx rgba(36,84,69,.2), + 0 0 22rpx rgba(255,255,255,.8); + transition: transform 360ms linear; + will-change: transform; + } + + .topic-bubble::before { + content: ''; + position: absolute; + top: 13%; + left: 18%; + width: 34%; + height: 20%; + border-radius: 50%; + background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0)); + transform: rotate(-25deg); + filter: blur(1rpx); + } + + .topic-bubble::after { + content: ''; + position: absolute; + top: -8rpx; + right: -8rpx; + bottom: -8rpx; + left: -8rpx; + z-index: -1; + border: 3rpx solid rgba(255,255,255,.45); + border-radius: 50%; + animation: bubble-pulse 2.4s ease-in-out infinite; + } + + .bubble-glow { + position: absolute; + right: 13%; + bottom: 13%; + width: 17%; + height: 17%; + border-radius: 50%; + background: rgba(255,255,255,.25); + box-shadow: 0 0 13rpx rgba(255,255,255,.55); + } + + .topic-bubble > text { + position: relative; + z-index: 2; + } + + .topic-bubble text:nth-child(2) { + font-size: 21rpx; + } + + .topic-bubble--0 { background: radial-gradient(circle at 28% 22%, #eeeaff 0, #a29aff 34%, #7263e8 100%); } + .topic-bubble--1 { background: radial-gradient(circle at 28% 22%, #ffe0b4 0, #ff9a5f 35%, #ff5534 100%); font-size: 24rpx; } + .topic-bubble--2 { background: radial-gradient(circle at 28% 22%, #fff0b9 0, #ffd25e 35%, #f4a618 100%); } + .topic-bubble--3 { background: radial-gradient(circle at 28% 22%, #cceaff 0, #78baff 34%, #367ee1 100%); } + .topic-bubble--4 { background: radial-gradient(circle at 28% 22%, #d6e8ff 0, #8bb9ff 35%, #4279dc 100%); font-size: 22rpx; } + .topic-bubble--5 { background: radial-gradient(circle at 28% 22%, #ffd6d1 0, #ff8e87 35%, #ed4d48 100%); } + .topic-bubble--6 { background: radial-gradient(circle at 28% 22%, #d3e6ff 0, #85b8ff 35%, #4a7cdf 100%); } + .topic-bubble--7 { background: radial-gradient(circle at 28% 22%, #c7ffe7 0, #67dfa9 35%, #13b778 100%); font-size: 21rpx; } + + @keyframes bubble-pulse { + 0%, 100% { transform: scale(.96); opacity: .2; } + 50% { transform: scale(1.05); opacity: .62; } + } + + .bubble-fire { + position: absolute; + top: -12rpx; + right: 2rpx; + font-size: 27rpx !important; + } + + .duo-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14rpx; + margin: 18rpx 24rpx 0; + } + + .duo-grid > .section { + min-width: 0; + height: 216rpx; + padding: 15rpx; + } + + .comment-content { + margin-top: 5rpx; + padding: 9rpx 8rpx; + border-bottom: 1rpx solid #edf0ee; + } + + .comment-source { + color: #3c4441; + font-size: 14rpx; + } + + .comment-main { + margin-top: 9rpx; + font-size: 20rpx; + font-weight: 900; + } + + .comment-user { + display: flex; + justify-content: space-between; + margin-top: 10rpx; + color: #7d8582; + font-size: 13rpx; + } + + .hot-count { + color: #f34c31; + } + + .reply-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 9rpx 7rpx 0; + color: #747c79; + font-size: 13rpx; + } + + .reply-row > view { + display: flex; + align-items: center; + color: #353d3a; + } + + .reply-avatar { + margin-right: 7rpx; + font-size: 25rpx; + } + + .reply-copy { + color: #8f9693; + font-size: 11rpx; + } + + .reward-card { + background: linear-gradient(145deg, #fff, #f7fffb); + } + + .reward-title { + margin-top: 18rpx; + font-size: 19rpx; + font-weight: 800; + } + + .reward-sub { + margin-top: 5rpx; + color: #9ba29f; + font-size: 14rpx; + } + + .reward-prize { + margin-top: 13rpx; + color: #dc9a24; + font-size: 16rpx; + font-weight: 800; + } + + .reward-bottom { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 15rpx; + } + + .mini-avatars { + color: #747d79; + font-size: 12rpx; + } + + .answer-btn { + padding: 8rpx 18rpx; + border-radius: 22rpx; + background: #18bd82; + color: #fff; + font-size: 14rpx; + font-weight: 800; + } + + .trio-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 13rpx; + margin: 18rpx 24rpx 0; + } + + .trio-grid > .section { + position: relative; + min-width: 0; + height: 205rpx; + padding: 14rpx; + overflow: hidden; + } + + .card-sub { + margin-top: 2rpx; + color: #9ca3a0; + font-size: 12rpx; + } + + .rumor-card { + background: linear-gradient(145deg, #fff, #fbf7ff); + } + + .rumor-text { + margin-top: 13rpx; + font-size: 15rpx; + font-weight: 700; + line-height: 25rpx; + } + + .stamp { + position: absolute; + right: 13rpx; + bottom: 44rpx; + padding: 5rpx; + border: 3rpx solid rgba(37,183,138,.35); + border-radius: 50%; + color: rgba(37,183,138,.55); + font-size: 13rpx; + font-weight: 900; + transform: rotate(-13deg); + } + + .card-foot { + position: absolute; + left: 14rpx; + bottom: 14rpx; + color: #79817e; + font-size: 12rpx; + } + + .map-card { + background: linear-gradient(180deg, #f4fff9, #dcf6e8) !important; + } + + .map-body { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 155rpx; + background: linear-gradient(145deg, rgba(191,234,204,.35), rgba(145,220,190,.4)); + } + + .road { + position: absolute; + width: 270rpx; + height: 18rpx; + border: 4rpx solid rgba(255,255,255,.8); + border-right: 0; + border-left: 0; + transform: rotate(-20deg); + } + + .road-a { left: -25rpx; top: 69rpx; } + .road-b { left: 25rpx; top: 93rpx; transform: rotate(24deg); } + + .map-point { + position: absolute; + z-index: 2; + padding: 5rpx 8rpx; + border-radius: 9rpx; + background: rgba(255,255,255,.9); + font-size: 11rpx; + font-weight: 800; + line-height: 17rpx; + text-align: center; + box-shadow: 0 4rpx 9rpx rgba(48,112,87,.09); + } + + .point-a { left: 18rpx; top: 25rpx; color: #ee8b35; } + .point-b { right: 18rpx; top: 15rpx; color: #4587df; } + .point-c { left: 52rpx; bottom: 12rpx; color: #5099d0; } + .point-d { right: 13rpx; bottom: 10rpx; color: #eb8840; } + + .pk-card { + background: linear-gradient(145deg, #fff, #fff1f7) !important; + } + + .podium { + height: 117rpx; + display: flex; + align-items: flex-end; + justify-content: center; + gap: 4rpx; + margin-top: 2rpx; + } + + .podium-item { + width: 57rpx; + text-align: center; + } + + .podium-item > text { + display: inline-block; + margin-bottom: 3rpx; + color: #fff; + font-size: 15rpx; + font-weight: 900; + } + + .podium-item > view { + padding: 7rpx 2rpx; + border-radius: 10rpx 10rpx 0 0; + font-size: 10rpx; + line-height: 16rpx; + } + + .second > text { width: 25rpx; height: 25rpx; border-radius: 50%; background: #9db0be; line-height: 25rpx; } + .third > text { width: 25rpx; height: 25rpx; border-radius: 50%; background: #e5973e; line-height: 25rpx; } + .first > text { color: #efa90e; font-size: 18rpx; line-height: 18rpx; } + .second > view { height: 47rpx; background: #e9eff4; } + .first > view { height: 65rpx; background: #fff0c8; } + .third > view { height: 41rpx; background: #ffe8d9; } + + .pk-cheer { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 25rpx; + background: #f9d7e8; + color: #e275a2; + font-size: 11rpx; + line-height: 25rpx; + text-align: center; + } + + /* 全页按手机实机可读尺寸放大 */ + .brand { font-size: 44rpx; } + .eyes { font-size: 30rpx; } + .eating { padding: 8rpx 19rpx; font-size: 21rpx; } + .subtitle { font-size: 21rpx; } + .search-box { height: 72rpx; border-radius: 38rpx; } + .search-input { height: 68rpx; font-size: 25rpx; line-height: 68rpx; } + .search-button { width: 100rpx; height: 60rpx; font-size: 23rpx; line-height: 60rpx; } + + .heat-card, + .watch-card, + .melon-card { height: 238rpx; } + .heat-label { font-size: 23rpx; } + .heat-number { font-size: 46rpx; } + .heat-rise { font-size: 16rpx; } + .watch-tag { font-size: 16rpx; } + .watch-title { font-size: 22rpx; line-height: 33rpx; } + .watch-meta { font-size: 16rpx; } + .avatar { width: 35rpx; height: 35rpx; font-size: 19rpx; line-height: 35rpx; } + + .section { border-radius: 26rpx; } + .section-head { height: 48rpx; font-size: 25rpx; } + .section-link, + .change { font-size: 18rpx; } + .top-section { padding-top: 18rpx; padding-bottom: 22rpx; } + .rank-card { width: 158rpx; } + .rank-picture { width: 158rpx; height: 100rpx; } + .rank-title { height: 66rpx; font-size: 21rpx; line-height: 32rpx; } + .rank-view { font-size: 16rpx; } + .reaction-row view { font-size: 15rpx; } + .reaction-row view text:first-child { font-size: 23rpx; } + + .duo-grid > .section { height: 260rpx; padding: 18rpx; } + .comment-source { font-size: 16rpx; } + .comment-main { font-size: 23rpx; } + .comment-user, + .reply-row { font-size: 15rpx; } + .reply-copy { font-size: 13rpx; } + .reward-title { font-size: 22rpx; } + .reward-sub { font-size: 16rpx; } + .reward-prize { font-size: 18rpx; } + .mini-avatars { font-size: 14rpx; } + .answer-btn { padding: 9rpx 20rpx; font-size: 16rpx; } + + .trio-grid > .section { height: 245rpx; padding: 17rpx; } + .card-sub { font-size: 14rpx; } + .rumor-text { font-size: 17rpx; line-height: 29rpx; } + .card-foot { left: 17rpx; bottom: 17rpx; font-size: 14rpx; } + .map-body { height: 188rpx; } + .map-point { font-size: 13rpx; line-height: 19rpx; } + .podium { height: 148rpx; } + .podium-item { width: 65rpx; } + .podium-item > view { font-size: 12rpx; line-height: 18rpx; } + .pk-cheer { height: 30rpx; font-size: 13rpx; line-height: 30rpx; } + + .bottom-space { + height: calc(42rpx + constant(safe-area-inset-bottom)); + height: calc(42rpx + env(safe-area-inset-bottom)); } \ No newline at end of file