You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1276 lines
31 KiB
1276 lines
31 KiB
<template>
|
|
<view class="hot-page">
|
|
<scroll-view class="page-scroll" scroll-y :show-scrollbar="false">
|
|
<view class="page-content">
|
|
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|
<view class="back-home" :style="{ top: (statusBarHeight + 7) + 'px' }" @tap="backHome">
|
|
<uni-icons type="left" size="18" color="#1e6f57"></uni-icons>
|
|
<text>首页</text>
|
|
</view>
|
|
<view class="brand-line">
|
|
<text class="brand">校园热榜</text>
|
|
<text class="eyes">••</text>
|
|
<text class="eating">吃瓜中</text>
|
|
</view>
|
|
<view class="subtitle">每天都有新瓜，全校都在围观 ••</view>
|
|
<view class="search-box">
|
|
<uni-icons type="search" size="20" color="#929b98"></uni-icons>
|
|
<input
|
|
v-model.trim="keyword"
|
|
class="search-input"
|
|
placeholder="搜你想看的瓜..."
|
|
placeholder-class="placeholder"
|
|
confirm-type="search"
|
|
@confirm="search"
|
|
/>
|
|
<view class="search-button" @tap="search">搜索</view>
|
|
</view>
|
|
</view>
|
|
<view class="header-spacer" :style="{ height: headerSpacerHeight + 'px' }"></view>
|
|
|
|
<view class="hero-grid">
|
|
<view class="watch-card">
|
|
<view class="watch-tag">大家都在看</view>
|
|
<view class="watch-title">
|
|
<text>“食堂阿姨手抖了，</text>
|
|
<text>今天的红烧肉咸到流泪😭”</text>
|
|
</view>
|
|
<view class="watch-meta">982 人围观 · <text>236</text> 条评论</view>
|
|
<view class="avatar-row">
|
|
<view class="avatar" v-for="item in 4" :key="item">{{['👩','👨','🧑','👩🦱'][item - 1]}}</view>
|
|
<text class="more">•••</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="melon-card">
|
|
<view class="melon-new">NEW</view>
|
|
<image
|
|
class="melon-image"
|
|
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f3b050e7f6d74bb9adca54de0bf3fc17.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
<view class="melon-tip">
|
|
<view>今日新瓜已送达</view>
|
|
<view class="melon-tip-bottom">
|
|
<text>速来围观吧！</text>
|
|
<text class="melon-arrow">›</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 按设计要求省略五个快捷入口，TOP10 直接承接顶部内容 -->
|
|
<view class="section top-section">
|
|
<view class="section-head">
|
|
<text>今日 TOP10</text>
|
|
<view class="section-link">全部榜单 ›</view>
|
|
</view>
|
|
<scroll-view class="rank-scroll" scroll-x :show-scrollbar="false">
|
|
<view class="rank-list">
|
|
<view class="rank-card" v-for="item in filteredRanks" :key="item.rank">
|
|
<view class="rank-picture" :class="'rank-picture--' + item.rank">
|
|
<image v-if="item.pic" :src="item.pic" mode="aspectFill"></image>
|
|
<text class="picture-emoji">{{item.emoji}}</text>
|
|
<view class="rank-badge" :class="'rank-badge--' + item.rank">{{item.rank}}</view>
|
|
</view>
|
|
<view class="rank-title">{{item.title}}</view>
|
|
<view class="rank-view">{{item.views}} 人围观 <text>🔥+{{item.rise}}</text></view>
|
|
<view class="reaction-row">
|
|
<view v-for="reaction in item.reactions" :key="reaction.icon">
|
|
<text>{{reaction.icon}}</text>
|
|
<text>{{reaction.count}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="section bubble-section">
|
|
<view class="section-head">
|
|
<text>正在爆 🔥</text>
|
|
<view class="change" @tap="shuffleTopics">⟳ 换一换</view>
|
|
</view>
|
|
<view class="bubble-stage">
|
|
<view
|
|
v-for="(topic, index) in topics"
|
|
:key="topic.name"
|
|
class="topic-bubble"
|
|
:class="'topic-bubble--' + index"
|
|
:style="bubbleStyle(topic)"
|
|
@tap="selectTopic(topic)"
|
|
>
|
|
<view class="bubble-glow"></view>
|
|
<text>{{topic.name}}</text>
|
|
<text>{{topic.count}}</text>
|
|
<text v-if="index === 1" class="bubble-fire">🔥</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="duo-grid">
|
|
<view class="section comment-card">
|
|
<view class="section-head compact"><text>今日神评论</text></view>
|
|
<view class="comment-content">
|
|
<view class="comment-source">神评 今天食堂阿姨手抖了。</view>
|
|
<view class="comment-main">抖的是手，不是良心。 😼</view>
|
|
<view class="comment-user"><text>🐱 一只小番茄</text><text class="hot-count">🔥 1238</text></view>
|
|
</view>
|
|
<view class="reply-row">
|
|
<view>
|
|
<text class="reply-avatar">👩</text>
|
|
<view><text>快乐肥宅水</text><text class="reply-copy">哈哈哈哈阿姨人间清醒！</text></view>
|
|
</view>
|
|
<text>♧ 362</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section reward-card">
|
|
<view class="section-head compact">
|
|
<text>校园悬赏</text>
|
|
<view class="change">更多悬赏 ›</view>
|
|
</view>
|
|
<view class="reward-title">谁知道今天为什么停电？</view>
|
|
<view class="reward-sub">在线等，挺急的！</view>
|
|
<view class="reward-prize">✿ 奖励 🟡 星球券</view>
|
|
<view class="reward-bottom">
|
|
<view class="mini-avatars"><text>👨</text><text>👩</text><text>🧑</text><text>23 人正在回答</text></view>
|
|
<view class="answer-btn">去回答</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="trio-grid">
|
|
<view class="section rumor-card">
|
|
<view class="section-head compact"><text>今日最离谱</text></view>
|
|
<view class="card-sub">匿名爆料 · 真实分享</view>
|
|
<view class="rumor-text">凌晨三点，有人在操场放《好运来》，全宿舍楼一起鼓掌... 😂</view>
|
|
<view class="stamp">离谱</view>
|
|
<view class="card-foot">👥 886 人觉得离谱</view>
|
|
</view>
|
|
|
|
<view class="section map-card">
|
|
<view class="section-head compact">
|
|
<text>校园瓜地图</text>
|
|
<view class="change">进地图 ›</view>
|
|
</view>
|
|
<view class="map-body">
|
|
<view class="road road-a"></view>
|
|
<view class="road road-b"></view>
|
|
<view class="map-point point-a"><text>宿舍区</text><text>😂😂😂</text></view>
|
|
<view class="map-point point-b"><text>图书馆</text><text>🔥😎</text></view>
|
|
<view class="map-point point-c"><text>操场</text><text>😂😂😂</text></view>
|
|
<view class="map-point point-d"><text>食堂</text><text>😂😂😂</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section pk-card">
|
|
<view class="section-head compact"><text>学院热度 PK</text></view>
|
|
<view class="card-sub">今日活跃学院</view>
|
|
<view class="podium">
|
|
<view class="podium-item second"><text>2</text><view><text>法学院</text><text>发帖 67</text></view></view>
|
|
<view class="podium-item first"><text>👑 1</text><view><text>计算机学院</text><text>发帖 89</text></view></view>
|
|
<view class="podium-item third"><text>3</text><view><text>文学院</text><text>发帖 61</text></view></view>
|
|
</view>
|
|
<view class="pk-cheer">为你的学院加油助威 💪</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom-space"></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
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 }
|
|
]
|
|
}
|
|
},
|
|
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() {
|
|
if (this.bubbleReady) this.startBubbleMotion()
|
|
},
|
|
onHide() {
|
|
this.stopBubbleMotion()
|
|
},
|
|
onUnload() {
|
|
this.stopBubbleMotion()
|
|
},
|
|
methods: {
|
|
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()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f7faf8;
|
|
color: #161d1a;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
}
|
|
|
|
.hot-page,
|
|
.page-scroll {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
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;
|
|
}
|
|
|
|
.topic-bubble {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
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));
|
|
}
|
|
</style>
|