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.
2588 lines
62 KiB
2588 lines
62 KiB
<template>
|
|
<view class="hot-page">
|
|
<scroll-view
|
|
class="page-scroll"
|
|
scroll-y
|
|
:show-scrollbar="false"
|
|
:lower-threshold="120"
|
|
@scrolltolower="loadMoreWallPosts"
|
|
>
|
|
<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="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="category-panel">
|
|
<view
|
|
class="hot-category"
|
|
:class="['hot-category--' + item.tone, { 'hot-category--active': activeCategory === item.tone }]"
|
|
v-for="item in hotCategories"
|
|
:key="item.name"
|
|
@tap="selectCategory(item)"
|
|
>
|
|
<view class="hot-category-icon">
|
|
<image v-if="releaseCategoryIconImages[item.tone]" class="hot-category-img" :src="releaseCategoryIconImages[item.tone]" mode="aspectFit"></image>
|
|
<view v-else class="hot-category-empty"></view>
|
|
</view>
|
|
<view class="hot-category-name">{{item.name}}</view>
|
|
<view class="hot-category-desc">{{item.desc}}</view>
|
|
</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="section wall-section">
|
|
<view class="section-head wall-head">
|
|
<view>
|
|
<text class="wall-title-main">{{currentSectionTitle}}</text>
|
|
<view class="wall-subtitle">{{currentSectionSubtitle}}</view>
|
|
</view>
|
|
<view class="wall-page">
|
|
<view class="wall-live-dot"></view>
|
|
<text>{{activeCategory === 'wall' ? '实时更新' : '正在匹配'}}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="activeCategory === 'wall'" class="wall-list">
|
|
<view
|
|
class="wall-item"
|
|
v-for="item in visibleWallPosts"
|
|
:key="item.id"
|
|
>
|
|
<view class="wall-author-row">
|
|
<view class="wall-avatar">{{item.author.slice(0, 1)}}</view>
|
|
<view class="wall-author">{{item.author}}</view>
|
|
<view class="wall-time">{{item.time}}</view>
|
|
</view>
|
|
<view class="wall-title">{{item.title}}</view>
|
|
<view class="wall-text">{{item.content}}</view>
|
|
<view
|
|
v-if="getWallImages(item).length"
|
|
class="wall-image-grid"
|
|
:class="'wall-image-grid--' + Math.min(getWallImages(item).length, 3)"
|
|
>
|
|
<image
|
|
v-for="(pic, picIndex) in getWallImages(item)"
|
|
:key="picIndex"
|
|
class="wall-post-image"
|
|
:src="pic"
|
|
mode="aspectFill"
|
|
@tap.stop="previewWallImages(item, picIndex)"
|
|
></image>
|
|
</view>
|
|
<view class="wall-footer">
|
|
<view class="wall-meta">
|
|
<text class="wall-comment">{{item.comments}} 条评论</text>
|
|
</view>
|
|
<view class="reaction-row wall-reactions">
|
|
<view
|
|
v-for="reaction in item.reactions"
|
|
:key="reaction.icon"
|
|
class="reaction-pill"
|
|
:class="{ 'reaction-pill--active': activeReactionKey === item.id + '-' + reaction.icon }"
|
|
@tap.stop="reactRank(item, reaction, $event)"
|
|
>
|
|
<text class="reaction-emoji">{{reaction.icon}}</text>
|
|
<text class="reaction-count">{{reaction.count}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="partner-list">
|
|
<view class="partner-card" v-for="item in currentPartnerPosts" :key="item.id">
|
|
<view class="partner-top">
|
|
<view class="partner-avatar">{{item.author.slice(0, 1)}}</view>
|
|
<view class="partner-main">
|
|
<view class="partner-title">{{item.title}}</view>
|
|
<view class="partner-meta">{{item.author}} · {{item.time}} · {{item.place}}</view>
|
|
</view>
|
|
<view class="partner-action">搭一下</view>
|
|
</view>
|
|
<view class="partner-desc">{{item.desc}}</view>
|
|
<view class="partner-tags">
|
|
<text v-for="tag in item.tags" :key="tag">{{tag}}</text>
|
|
</view>
|
|
<view class="partner-bottom">
|
|
<text>{{item.need}}</text>
|
|
<text>{{item.heat}} 人想一起</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="activeCategory === 'wall'" class="wall-load-state">
|
|
{{wallLoading ? '正在加载更多校园墙...' : (wallHasMore ? '上滑查看更多校园墙' : '今天的校园墙先看到这里')}}
|
|
</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 class="reaction-effect-layer" v-if="reactionEffects.length">
|
|
<view
|
|
v-for="effect in reactionEffects"
|
|
:key="effect.id"
|
|
class="reaction-pop-bubble"
|
|
:style="effect.style"
|
|
>
|
|
<text>{{ effect.icon }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const RELEASE_ICON_CACHE_KEY = 'release_category_icon_cache_v1'
|
|
const RELEASE_ICON_CACHE_TTL = 30 * 24 * 60 * 60 * 1000
|
|
const RELEASE_ICON_CACHE_LIMIT = 8
|
|
const releaseIconDownloading = {}
|
|
const RELEASE_CATEGORY_ICON_URLS = {
|
|
wall: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f3b050e7f6d74bb9adca54de0bf3fc17.png',
|
|
game: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f8d490dfec0a4d17b7c18d710502f6f2.png',
|
|
daily: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e810837993204689bda2fc68d1d29448.png',
|
|
sport: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/01444d0812c544fe9cde7cbbb919b473.png'
|
|
}
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBarHeight: 24,
|
|
keyword: '',
|
|
activeReactionKey: '',
|
|
reactionEffects: [],
|
|
bubbleTimer: null,
|
|
bubbleReady: false,
|
|
activeCategory: 'wall',
|
|
wallPage: 1,
|
|
wallPageSize: 3,
|
|
wallLoading: false,
|
|
releaseCategoryIconImages: {
|
|
wall: '',
|
|
game: '',
|
|
daily: '',
|
|
sport: ''
|
|
},
|
|
hotCategories: [{
|
|
name: '校园墙',
|
|
desc: '看看新鲜事',
|
|
tone: 'wall',
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f3b050e7f6d74bb9adca54de0bf3fc17.png'
|
|
}, {
|
|
name: '游戏搭子',
|
|
desc: '开黑组队',
|
|
tone: 'game',
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f8d490dfec0a4d17b7c18d710502f6f2.png'
|
|
}, {
|
|
name: '日常搭子',
|
|
desc: '饭搭自习',
|
|
tone: 'daily',
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e810837993204689bda2fc68d1d29448.png'
|
|
}, {
|
|
name: '运动搭子',
|
|
desc: '约球跑步',
|
|
tone: 'sport',
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/01444d0812c544fe9cde7cbbb919b473.png'
|
|
}],
|
|
wallPosts: [{
|
|
id: 'w1',
|
|
title: '食堂二楼新窗口今天终于不用排队了',
|
|
content: '刚下课过去正好赶上出锅，阿姨还多给了一勺汤。',
|
|
author: '一只小番茄',
|
|
time: '08:12',
|
|
comments: 36,
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
|
|
pics: [
|
|
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
|
|
'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=500&q=85'
|
|
],
|
|
reactions: [{ icon: '😂', count: 341 }, { icon: '😭', count: 22 }, { icon: '🤢', count: 88 }, { icon: '👍', count: 101 }]
|
|
}, {
|
|
id: 'w2',
|
|
title: '图书馆三楼靠窗位置好适合发呆',
|
|
content: '下午阳光刚好落在桌角，写作业都没有那么痛苦了。',
|
|
author: '银河修理员',
|
|
time: '10:26',
|
|
comments: 18,
|
|
pic: '',
|
|
reactions: [{ icon: '😂', count: 76 }, { icon: '😭', count: 19 }, { icon: '🤢', count: 6 }, { icon: '👍', count: 95 }]
|
|
}, {
|
|
id: 'w3',
|
|
title: '东门奶茶买一送一，队伍已经排到路口',
|
|
content: '想喝的同学建议先去吃个饭，回来可能刚好排到。',
|
|
author: '干饭第一名',
|
|
time: '12:40',
|
|
comments: 45,
|
|
pic: '',
|
|
reactions: [{ icon: '😂', count: 231 }, { icon: '😭', count: 11 }, { icon: '🤢', count: 45 }, { icon: '👍', count: 88 }]
|
|
}, {
|
|
id: 'w4',
|
|
title: '操场有人放歌，全场突然合唱了',
|
|
content: '晚风、跑道、歌声，今天的校园有点像青春片。',
|
|
author: '不会投三分',
|
|
time: '18:32',
|
|
comments: 29,
|
|
pic: 'https://images.unsplash.com/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=500&q=85',
|
|
pics: [
|
|
'https://images.unsplash.com/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=500&q=85',
|
|
'https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=500&q=85',
|
|
'https://images.unsplash.com/photo-1574629810360-7efbbe195018?auto=format&fit=crop&w=500&q=85'
|
|
],
|
|
reactions: [{ icon: '😂', count: 206 }, { icon: '😭', count: 8 }, { icon: '🤢', count: 3 }, { icon: '👍', count: 133 }]
|
|
}, {
|
|
id: 'w5',
|
|
title: '宿舍楼下的猫今天营业了',
|
|
content: '它蹲在门口看了我们十分钟，像是在检查谁没带饭。',
|
|
author: '桃桃乌龙',
|
|
time: '21:10',
|
|
comments: 52,
|
|
pic: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?auto=format&fit=crop&w=500&q=85',
|
|
reactions: [{ icon: '😂', count: 108 }, { icon: '😭', count: 15 }, { icon: '🤢', count: 2 }, { icon: '👍', count: 167 }]
|
|
}, {
|
|
id: 'w6',
|
|
title: '求问：明天早八的教室是不是换了？',
|
|
content: '群里消息太多翻不到了，有同课的同学救一下。',
|
|
author: '匿名同学',
|
|
time: '22:06',
|
|
comments: 23,
|
|
pic: '',
|
|
reactions: [{ icon: '😂', count: 54 }, { icon: '😭', count: 66 }, { icon: '🤢', count: 1 }, { icon: '👍', count: 49 }]
|
|
}],
|
|
partnerPosts: [{
|
|
id: 'p1',
|
|
type: 'game',
|
|
title: '今晚王者五排差一个辅助',
|
|
desc: '不压力，开麦就行，输赢随缘，主要是宿舍太安静了。',
|
|
author: '蓝 buff 保管员',
|
|
time: '20:30',
|
|
place: '线上',
|
|
need: '还差 1 人',
|
|
heat: 18,
|
|
tags: ['王者荣耀', '开麦', '不压力']
|
|
}, {
|
|
id: 'p2',
|
|
type: 'game',
|
|
title: '周末桌游局，缺两个新朋友',
|
|
desc: '狼人杀、UNO、卡坦都可以，新手友好，社恐也能来。',
|
|
author: '桌游社小窗',
|
|
time: '周六 14:00',
|
|
place: '活动中心',
|
|
need: '还差 2 人',
|
|
heat: 26,
|
|
tags: ['桌游', '新手友好', '周末']
|
|
}, {
|
|
id: 'p3',
|
|
type: 'daily',
|
|
title: '找一个长期自习搭子',
|
|
desc: '图书馆三楼，晚上 7 点到 10 点，互相监督别刷手机。',
|
|
author: '明天一定早睡',
|
|
time: '今晚',
|
|
place: '图书馆',
|
|
need: '1 对 1',
|
|
heat: 31,
|
|
tags: ['自习', '考研', '互相监督']
|
|
}, {
|
|
id: 'p4',
|
|
type: 'daily',
|
|
title: '东门晚饭搭子，有人一起吗',
|
|
desc: '想吃砂锅或者麻辣拌，吃完顺便散步回宿舍。',
|
|
author: '干饭雷达',
|
|
time: '18:10',
|
|
place: '东门',
|
|
need: '2-3 人',
|
|
heat: 22,
|
|
tags: ['饭搭子', '东门', '不尬聊']
|
|
}, {
|
|
id: 'p5',
|
|
type: 'sport',
|
|
title: '操场夜跑 3 公里，慢速局',
|
|
desc: '不卷配速，跑完拉伸，适合想恢复运动的同学。',
|
|
author: '慢跑小队',
|
|
time: '21:00',
|
|
place: '操场',
|
|
need: '还差 3 人',
|
|
heat: 39,
|
|
tags: ['夜跑', '慢速', '操场']
|
|
}, {
|
|
id: 'p6',
|
|
type: 'sport',
|
|
title: '周三羽毛球双打缺一位',
|
|
desc: '水平普通，主要出汗，拍子可以借。',
|
|
author: '羽毛球不落地',
|
|
time: '周三 19:30',
|
|
place: '体育馆',
|
|
need: '还差 1 人',
|
|
heat: 16,
|
|
tags: ['羽毛球', '双打', '可借拍']
|
|
}],
|
|
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: 28, y: 120, size: 98, vx: .32, vy: -.18 },
|
|
{ name: '食堂', count: 5621, x: 150, y: 28, size: 128, vx: -.24, vy: .22 },
|
|
{ name: '军训', count: 1890, x: 95, y: 198, size: 84, vx: .25, vy: -.3 },
|
|
{ name: '毕业设计', count: 1654, x: 265, y: 178, size: 86, vx: -.28, vy: -.22 },
|
|
{ name: '四六级', count: 3412, x: 315, y: 80, size: 116, vx: .27, vy: .2 },
|
|
{ name: '恋爱', count: 2376, x: 448, y: 60, size: 92, vx: -.3, vy: .26 },
|
|
{ name: '外卖涨价', count: 1243, x: 506, y: 190, size: 86, vx: .26, vy: -.24 },
|
|
{ name: '图书馆', count: 4128, x: 560, y: 120, size: 112, 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)
|
|
},
|
|
visibleWallPosts() {
|
|
return this.wallPosts.slice(0, this.wallPage * this.wallPageSize)
|
|
},
|
|
wallHasMore() {
|
|
return this.visibleWallPosts.length < this.wallPosts.length
|
|
},
|
|
currentSectionTitle() {
|
|
const titleMap = {
|
|
wall: '校园墙',
|
|
game: '游戏搭子',
|
|
daily: '日常搭子',
|
|
sport: '运动搭子'
|
|
}
|
|
return titleMap[this.activeCategory] || '校园墙'
|
|
},
|
|
currentSectionSubtitle() {
|
|
const subtitleMap = {
|
|
wall: '同学们正在讨论的校园小事',
|
|
game: '开黑、桌游、联机都在这里找队友',
|
|
daily: '饭搭、自习、散步，找一个刚好同频的人',
|
|
sport: '约球、夜跑、健身，校园运动搭子集合'
|
|
}
|
|
return subtitleMap[this.activeCategory] || subtitleMap.wall
|
|
},
|
|
currentPartnerPosts() {
|
|
return this.partnerPosts.filter(item => item.type === this.activeCategory)
|
|
}
|
|
},
|
|
onLoad() {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight) || 24
|
|
this.applyCachedReleaseCategoryIcons()
|
|
},
|
|
onReady() {
|
|
this.bubbleReady = true
|
|
this.startBubbleMotion()
|
|
},
|
|
onShow() {
|
|
if (this.bubbleReady) this.startBubbleMotion()
|
|
},
|
|
onHide() {
|
|
this.stopBubbleMotion()
|
|
},
|
|
onUnload() {
|
|
this.stopBubbleMotion()
|
|
},
|
|
methods: {
|
|
reactRank(item, reaction, event) {
|
|
const key = (item.id || item.rank) + '-' + reaction.icon
|
|
this.activeReactionKey = key
|
|
reaction.count += 1
|
|
const touch = event && event.touches && event.touches[0]
|
|
const detail = event && event.detail
|
|
const id = Date.now() + '-' + Math.random()
|
|
const left = touch ? touch.clientX : (detail && detail.x ? detail.x : 180)
|
|
const top = touch ? touch.clientY : (detail && detail.y ? detail.y : 360)
|
|
this.reactionEffects.push({
|
|
id,
|
|
icon: reaction.icon,
|
|
style: `left:${left}px;top:${top}px;`
|
|
})
|
|
setTimeout(() => {
|
|
this.reactionEffects = this.reactionEffects.filter(item => item.id !== id)
|
|
}, 820)
|
|
},
|
|
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) {
|
|
uni.showModal({
|
|
title: topic.name + ' · 正在爆',
|
|
content: '当前热度 ' + topic.count + '。这里后续可以展示该话题的校园墙讨论、最新评论和相关地点。',
|
|
confirmText: '去看看',
|
|
cancelText: '关闭'
|
|
})
|
|
},
|
|
selectCategory(item) {
|
|
if (!item || !item.tone) return
|
|
this.activeCategory = item.tone
|
|
},
|
|
getReleaseIconCache() {
|
|
const cache = uni.getStorageSync(RELEASE_ICON_CACHE_KEY)
|
|
return cache && typeof cache === 'object' ? cache : {}
|
|
},
|
|
saveReleaseIconCache(cache) {
|
|
uni.setStorageSync(RELEASE_ICON_CACHE_KEY, cache)
|
|
},
|
|
isReleaseSavedFileExists(filePath) {
|
|
if (!filePath || filePath.indexOf('__tmp__') !== -1) return false
|
|
try {
|
|
const fs = (uni.getFileSystemManager && uni.getFileSystemManager())
|
|
|| (typeof wx !== 'undefined' && wx.getFileSystemManager ? wx.getFileSystemManager() : null)
|
|
if (fs && fs.accessSync) {
|
|
fs.accessSync(filePath)
|
|
return true
|
|
}
|
|
} catch (e) {
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
isReleaseIconCacheValid(cacheItem) {
|
|
return !!(cacheItem
|
|
&& Date.now() - Number(cacheItem.savedAt || 0) < RELEASE_ICON_CACHE_TTL
|
|
&& this.isReleaseSavedFileExists(cacheItem.path))
|
|
},
|
|
applyCachedReleaseCategoryIcons() {
|
|
const cache = this.getReleaseIconCache()
|
|
Object.keys(RELEASE_CATEGORY_ICON_URLS).forEach((key) => {
|
|
const imageUrl = RELEASE_CATEGORY_ICON_URLS[key]
|
|
const cacheItem = cache[imageUrl]
|
|
if (this.isReleaseIconCacheValid(cacheItem)) {
|
|
this.releaseCategoryIconImages[key] = cacheItem.path
|
|
return
|
|
}
|
|
if (cacheItem && cacheItem.path) {
|
|
delete cache[imageUrl]
|
|
}
|
|
this.releaseCategoryIconImages[key] = ''
|
|
this.cacheReleaseCategoryIcon(key, imageUrl)
|
|
})
|
|
this.pruneReleaseIconCache(cache, Object.keys(RELEASE_CATEGORY_ICON_URLS).map(key => RELEASE_CATEGORY_ICON_URLS[key]))
|
|
this.saveReleaseIconCache(cache)
|
|
},
|
|
cacheReleaseCategoryIcon(key, imageUrl) {
|
|
if (releaseIconDownloading[imageUrl]) return
|
|
releaseIconDownloading[imageUrl] = true
|
|
uni.downloadFile({
|
|
url: imageUrl,
|
|
success: (downloadRes) => {
|
|
if (downloadRes.statusCode !== 200 || !downloadRes.tempFilePath) {
|
|
this.releaseCategoryIconImages[key] = imageUrl
|
|
delete releaseIconDownloading[imageUrl]
|
|
return
|
|
}
|
|
uni.saveFile({
|
|
tempFilePath: downloadRes.tempFilePath,
|
|
success: (saveRes) => {
|
|
const cache = this.getReleaseIconCache()
|
|
const oldCacheItem = cache[imageUrl]
|
|
if (oldCacheItem && oldCacheItem.path && oldCacheItem.path !== saveRes.savedFilePath) {
|
|
uni.removeSavedFile({
|
|
filePath: oldCacheItem.path,
|
|
fail: () => {}
|
|
})
|
|
}
|
|
cache[imageUrl] = {
|
|
path: saveRes.savedFilePath,
|
|
savedAt: Date.now()
|
|
}
|
|
this.saveReleaseIconCache(cache)
|
|
this.releaseCategoryIconImages[key] = saveRes.savedFilePath
|
|
},
|
|
fail: () => {
|
|
this.releaseCategoryIconImages[key] = imageUrl
|
|
},
|
|
complete: () => {
|
|
delete releaseIconDownloading[imageUrl]
|
|
}
|
|
})
|
|
},
|
|
fail: () => {
|
|
this.releaseCategoryIconImages[key] = imageUrl
|
|
delete releaseIconDownloading[imageUrl]
|
|
},
|
|
complete: (downloadRes) => {
|
|
if (!downloadRes || downloadRes.statusCode !== 200) {
|
|
this.releaseCategoryIconImages[key] = imageUrl
|
|
delete releaseIconDownloading[imageUrl]
|
|
}
|
|
}
|
|
})
|
|
},
|
|
pruneReleaseIconCache(cache, activeUrls) {
|
|
const activeUrlMap = activeUrls.reduce((result, url) => {
|
|
result[url] = true
|
|
return result
|
|
}, {})
|
|
const now = Date.now()
|
|
Object.keys(cache).forEach((url) => {
|
|
const item = cache[url]
|
|
const isExpired = !this.isReleaseIconCacheValid(item)
|
|
if (isExpired && !activeUrlMap[url]) {
|
|
item && item.path && uni.removeSavedFile({
|
|
filePath: item.path,
|
|
fail: () => {}
|
|
})
|
|
delete cache[url]
|
|
}
|
|
})
|
|
const urls = Object.keys(cache).sort((a, b) => Number(cache[a].savedAt || now) - Number(cache[b].savedAt || now))
|
|
while (urls.length > RELEASE_ICON_CACHE_LIMIT) {
|
|
const url = urls.shift()
|
|
if (activeUrlMap[url]) {
|
|
urls.push(url)
|
|
if (urls.every(itemUrl => activeUrlMap[itemUrl])) break
|
|
continue
|
|
}
|
|
const item = cache[url]
|
|
item && item.path && uni.removeSavedFile({
|
|
filePath: item.path,
|
|
fail: () => {}
|
|
})
|
|
delete cache[url]
|
|
}
|
|
},
|
|
getWallImages(item) {
|
|
if (!item) return []
|
|
if (Array.isArray(item.pics) && item.pics.length) return item.pics
|
|
return item.pic ? [item.pic] : []
|
|
},
|
|
previewWallImages(item, index) {
|
|
const urls = this.getWallImages(item)
|
|
if (!urls.length) return
|
|
uni.previewImage({
|
|
urls,
|
|
current: urls[index] || urls[0]
|
|
})
|
|
},
|
|
loadMoreWallPosts() {
|
|
if (this.activeCategory !== 'wall') return
|
|
if (this.wallLoading || !this.wallHasMore) return
|
|
this.wallLoading = true
|
|
setTimeout(() => {
|
|
this.wallPage += 1
|
|
this.wallLoading = false
|
|
}, 280)
|
|
},
|
|
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 = 288
|
|
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;
|
|
}
|
|
|
|
.category-panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14rpx;
|
|
margin-top: 18rpx;
|
|
padding: 10rpx 24rpx 20rpx;
|
|
}
|
|
|
|
.hot-category {
|
|
height: 170rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 24rpx;
|
|
background: #fff;
|
|
box-shadow: 0 10rpx 24rpx rgba(35, 74, 61, 0.075);
|
|
}
|
|
|
|
.hot-category--active {
|
|
border: 2rpx solid rgba(34, 191, 134, 0.55);
|
|
box-shadow: 0 14rpx 30rpx rgba(34, 191, 134, 0.14);
|
|
transform: translateY(-3rpx);
|
|
}
|
|
|
|
.hot-category--wall {
|
|
background: linear-gradient(145deg, #ffffff, #edf5ff);
|
|
}
|
|
|
|
.hot-category--daily {
|
|
background: linear-gradient(145deg, #ffffff, #edf5ff);
|
|
}
|
|
|
|
.hot-category--sport {
|
|
background: linear-gradient(145deg, #ffffff, #edf5ff);
|
|
}
|
|
|
|
.hot-category--game {
|
|
background: linear-gradient(145deg, #ffffff, #edf5ff);
|
|
}
|
|
|
|
.hot-category-icon {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 4rpx;
|
|
border-radius: 26rpx;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
box-shadow:
|
|
inset 0 2rpx 0 rgba(255, 255, 255, 0.92),
|
|
0 9rpx 18rpx rgba(33, 111, 87, 0.08);
|
|
}
|
|
|
|
.hot-category-img {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 22rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hot-category-empty {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
border-radius: 14rpx;
|
|
background: linear-gradient(145deg, #e6eee9, #ffffff);
|
|
box-shadow: inset 0 2rpx 0 rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.hot-category-name {
|
|
color: #173f36;
|
|
font-size: 21rpx;
|
|
font-weight: 900;
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.hot-category-desc {
|
|
margin-top: 5rpx;
|
|
color: #7d8e88;
|
|
font-size: 17rpx;
|
|
font-weight: 700;
|
|
line-height: 23rpx;
|
|
}
|
|
|
|
.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));
|
|
}
|
|
|
|
/* 二次整理：降低信息密度，统一可读字号 */
|
|
.page-content {
|
|
background: #f4fbf8;
|
|
}
|
|
|
|
.header {
|
|
padding-left: 28rpx;
|
|
padding-right: 198rpx;
|
|
padding-bottom: 14rpx;
|
|
background: linear-gradient(180deg, #effff9 0%, rgba(248, 255, 252, 0.98) 100%);
|
|
}
|
|
|
|
.back-home {
|
|
width: 82rpx;
|
|
height: 42rpx;
|
|
border-color: rgba(35, 164, 122, 0.18);
|
|
background: rgba(255, 255, 255, 0.68);
|
|
font-size: 17rpx;
|
|
}
|
|
|
|
.brand-line {
|
|
height: 50rpx;
|
|
margin-left: 92rpx;
|
|
max-width: calc(100vw - 330rpx);
|
|
}
|
|
|
|
.brand {
|
|
color: #153d32;
|
|
font-size: 38rpx;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.eating {
|
|
margin-left: 12rpx;
|
|
padding: 5rpx 13rpx;
|
|
background: #22bf86;
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
.subtitle {
|
|
margin-top: 0;
|
|
margin-left: 92rpx;
|
|
color: #60766f;
|
|
font-size: 17rpx;
|
|
font-weight: 700;
|
|
letter-spacing: 3rpx;
|
|
}
|
|
|
|
.search-box {
|
|
height: 72rpx;
|
|
margin-top: 14rpx;
|
|
border-color: rgba(34, 191, 134, 0.45);
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.search-input {
|
|
height: 72rpx;
|
|
font-size: 24rpx;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
.search-button {
|
|
width: 108rpx;
|
|
height: 62rpx;
|
|
font-size: 24rpx;
|
|
line-height: 62rpx;
|
|
}
|
|
|
|
.hero-grid {
|
|
gap: 18rpx;
|
|
padding: 0 26rpx 22rpx;
|
|
}
|
|
|
|
.watch-card,
|
|
.melon-card {
|
|
height: 230rpx;
|
|
border-radius: 26rpx;
|
|
}
|
|
|
|
.watch-tag {
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
.watch-title {
|
|
font-size: 24rpx;
|
|
line-height: 35rpx;
|
|
}
|
|
|
|
.watch-meta {
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
.melon-tip {
|
|
width: 210rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.melon-tip-bottom > text:first-child {
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
.section {
|
|
border-radius: 28rpx;
|
|
box-shadow: 0 10rpx 28rpx rgba(36, 79, 64, 0.07);
|
|
}
|
|
|
|
.section-head {
|
|
height: 54rpx;
|
|
padding: 0 22rpx;
|
|
color: #173f36;
|
|
font-size: 29rpx;
|
|
}
|
|
|
|
.section-link,
|
|
.change {
|
|
font-size: 21rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.top-section {
|
|
margin: 0 26rpx;
|
|
padding: 20rpx 0 24rpx;
|
|
}
|
|
|
|
.rank-scroll {
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.rank-list {
|
|
gap: 22rpx;
|
|
padding: 0 22rpx;
|
|
}
|
|
|
|
.rank-card {
|
|
width: 238rpx;
|
|
padding-bottom: 2rpx;
|
|
}
|
|
|
|
.rank-picture {
|
|
width: 238rpx;
|
|
height: 150rpx;
|
|
border-radius: 22rpx;
|
|
}
|
|
|
|
.rank-badge {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
font-size: 24rpx;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.picture-emoji {
|
|
font-size: 56rpx;
|
|
}
|
|
|
|
.rank-title {
|
|
height: 76rpx;
|
|
margin-top: 12rpx;
|
|
color: #1c2d28;
|
|
font-size: 25rpx;
|
|
line-height: 38rpx;
|
|
}
|
|
|
|
.rank-view {
|
|
margin-top: 8rpx;
|
|
color: #61726d;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.reaction-row {
|
|
display: none;
|
|
}
|
|
|
|
.bubble-section,
|
|
.duo-grid,
|
|
.trio-grid {
|
|
margin-top: 22rpx;
|
|
}
|
|
|
|
.topic-bubble {
|
|
font-size: 21rpx;
|
|
}
|
|
|
|
.duo-grid,
|
|
.trio-grid {
|
|
gap: 18rpx;
|
|
margin-left: 26rpx;
|
|
margin-right: 26rpx;
|
|
}
|
|
|
|
.duo-grid > .section {
|
|
height: 280rpx;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.comment-source,
|
|
.reward-sub,
|
|
.card-sub,
|
|
.card-foot {
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
.comment-main,
|
|
.reward-title {
|
|
font-size: 25rpx;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.comment-user,
|
|
.reply-row,
|
|
.reward-prize,
|
|
.mini-avatars {
|
|
font-size: 17rpx;
|
|
}
|
|
|
|
.rank-card .reaction-row {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 10rpx;
|
|
margin-top: 14rpx;
|
|
overflow: visible;
|
|
}
|
|
|
|
.reaction-pill {
|
|
min-width: 50rpx;
|
|
height: 52rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 18rpx;
|
|
background: linear-gradient(145deg, #ffffff, #f0f6f3);
|
|
box-shadow:
|
|
inset 0 2rpx 0 rgba(255, 255, 255, 0.95),
|
|
0 8rpx 16rpx rgba(24, 61, 49, 0.08);
|
|
transform: translateZ(0);
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
|
|
}
|
|
|
|
.reaction-emoji {
|
|
font-size: 25rpx;
|
|
line-height: 25rpx;
|
|
}
|
|
|
|
.reaction-count {
|
|
margin-top: 2rpx;
|
|
color: #63746e;
|
|
font-size: 14rpx;
|
|
font-weight: 800;
|
|
line-height: 16rpx;
|
|
}
|
|
|
|
.reaction-pill--active {
|
|
z-index: 3;
|
|
background: radial-gradient(circle at 30% 18%, #ffffff 0, #fff4c7 38%, #ffd977 100%);
|
|
box-shadow:
|
|
inset 0 3rpx 0 rgba(255, 255, 255, 0.88),
|
|
0 16rpx 26rpx rgba(255, 180, 60, 0.28);
|
|
transform: translateY(-8rpx) scale(1.22) rotate(-4deg);
|
|
}
|
|
|
|
.reaction-pill--active .reaction-emoji {
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
filter: drop-shadow(0 6rpx 8rpx rgba(88, 55, 10, 0.18));
|
|
}
|
|
|
|
.reaction-pill--active .reaction-count {
|
|
color: #7b4f08;
|
|
}
|
|
|
|
.wall-section {
|
|
margin: 22rpx 26rpx 0;
|
|
padding: 24rpx 20rpx 18rpx;
|
|
overflow: hidden;
|
|
border-radius: 30rpx;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 245, 0.96));
|
|
border: 1rpx solid rgba(222, 239, 232, 0.9);
|
|
box-shadow: 0 16rpx 40rpx rgba(31, 78, 63, 0.1);
|
|
}
|
|
|
|
.wall-head {
|
|
height: auto;
|
|
align-items: flex-start;
|
|
padding: 0 4rpx 22rpx;
|
|
}
|
|
|
|
.wall-head > view:first-child {
|
|
min-width: 0;
|
|
}
|
|
|
|
.wall-head text {
|
|
display: block;
|
|
color: #173f36;
|
|
font-size: 22rpx;
|
|
font-weight: 900;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.wall-title-main {
|
|
font-size: 32rpx !important;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.wall-subtitle {
|
|
margin-top: 6rpx;
|
|
color: #70847d;
|
|
font-size: 17rpx;
|
|
font-weight: 700;
|
|
line-height: 26rpx;
|
|
}
|
|
|
|
.wall-page {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
gap: 8rpx;
|
|
height: 42rpx;
|
|
padding: 0 16rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(135deg, rgba(238, 251, 246, 0.96), rgba(216, 246, 234, 0.96));
|
|
color: #258365;
|
|
font-size: 18rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.wall-live-dot {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
background: #22bf86;
|
|
box-shadow: 0 0 0 6rpx rgba(34, 191, 134, 0.12);
|
|
}
|
|
|
|
.wall-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.wall-item {
|
|
padding: 20rpx;
|
|
border-radius: 26rpx;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
border: 1rpx solid rgba(214, 233, 226, 0.95);
|
|
box-shadow: 0 10rpx 24rpx rgba(42, 89, 72, 0.08);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.wall-author-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.wall-avatar {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #dff8ee, #bcebdc);
|
|
color: #23815f;
|
|
font-size: 22rpx;
|
|
font-weight: 900;
|
|
line-height: 46rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.wall-author {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: #60736c;
|
|
font-size: 24rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.wall-time {
|
|
flex-shrink: 0;
|
|
color: #a4b0ab;
|
|
font-size: 21rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.wall-title {
|
|
margin-top: 18rpx;
|
|
color: #1a2f28;
|
|
font-size: 29rpx;
|
|
font-weight: 900;
|
|
line-height: 38rpx;
|
|
}
|
|
|
|
.wall-text {
|
|
margin-top: 10rpx;
|
|
color: #51665f;
|
|
font-size: 23rpx;
|
|
font-weight: 700;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.wall-image-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.wall-post-image {
|
|
width: 150rpx;
|
|
height: 126rpx;
|
|
border-radius: 10rpx;
|
|
background: #e8f0ec;
|
|
}
|
|
|
|
.wall-image-grid--1 .wall-post-image {
|
|
width: 230rpx;
|
|
height: 154rpx;
|
|
}
|
|
|
|
.wall-image-grid--2 .wall-post-image {
|
|
width: 170rpx;
|
|
height: 136rpx;
|
|
}
|
|
|
|
.wall-meta {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: 8rpx 12rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
color: #879691;
|
|
font-size: 18rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.wall-comment {
|
|
color: #5f756d;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.wall-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14rpx;
|
|
margin-top: 16rpx;
|
|
padding-top: 14rpx;
|
|
border-top: 1rpx solid rgba(222, 236, 231, 0.9);
|
|
}
|
|
|
|
.wall-reactions {
|
|
display: flex !important;
|
|
flex-shrink: 0;
|
|
justify-content: flex-start;
|
|
gap: 8rpx;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
border-top: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.wall-reactions .reaction-pill {
|
|
min-width: 48rpx;
|
|
height: 46rpx;
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
.wall-reactions .reaction-emoji {
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
}
|
|
|
|
.wall-reactions .reaction-count {
|
|
font-size: 12rpx;
|
|
line-height: 14rpx;
|
|
}
|
|
|
|
.wall-load-state {
|
|
padding: 22rpx 0 6rpx;
|
|
color: #8b9b95;
|
|
font-size: 21rpx;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
}
|
|
|
|
.partner-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.partner-card {
|
|
padding: 22rpx;
|
|
border-radius: 26rpx;
|
|
background:
|
|
radial-gradient(circle at 92% 10%, rgba(34, 191, 134, 0.13), transparent 150rpx),
|
|
#ffffff;
|
|
border: 1rpx solid rgba(214, 233, 226, 0.95);
|
|
box-shadow: 0 10rpx 24rpx rgba(42, 89, 72, 0.08);
|
|
}
|
|
|
|
.partner-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14rpx;
|
|
}
|
|
|
|
.partner-avatar {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
flex-shrink: 0;
|
|
border-radius: 18rpx;
|
|
background: linear-gradient(145deg, #dff8ee, #a9e8d3);
|
|
color: #23815f;
|
|
font-size: 24rpx;
|
|
font-weight: 900;
|
|
line-height: 54rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.partner-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.partner-title {
|
|
color: #183d33;
|
|
font-size: 29rpx;
|
|
font-weight: 900;
|
|
line-height: 38rpx;
|
|
}
|
|
|
|
.partner-meta {
|
|
margin-top: 4rpx;
|
|
color: #7c8e88;
|
|
font-size: 17rpx;
|
|
font-weight: 700;
|
|
line-height: 26rpx;
|
|
}
|
|
|
|
.partner-action {
|
|
flex-shrink: 0;
|
|
padding: 10rpx 18rpx;
|
|
border-radius: 999rpx;
|
|
background: #22bf86;
|
|
color: #ffffff;
|
|
font-size: 22rpx;
|
|
font-weight: 900;
|
|
box-shadow: 0 8rpx 18rpx rgba(34, 191, 134, 0.22);
|
|
}
|
|
|
|
.partner-desc {
|
|
margin-top: 16rpx;
|
|
color: #4d625a;
|
|
font-size: 23rpx;
|
|
font-weight: 700;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.partner-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.partner-tags text {
|
|
padding: 7rpx 14rpx;
|
|
border-radius: 999rpx;
|
|
background: #edf8f4;
|
|
color: #278164;
|
|
font-size: 18rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.partner-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16rpx;
|
|
padding-top: 14rpx;
|
|
border-top: 1rpx solid rgba(222, 236, 231, 0.9);
|
|
color: #7a8b85;
|
|
font-size: 21rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.bubble-section {
|
|
overflow: hidden;
|
|
padding-top: 0;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.76) 100%),
|
|
url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/105af316e4df4412996e7716bc422b32.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.bubble-section .section-head {
|
|
margin: 0;
|
|
padding: 0 22rpx;
|
|
border-radius: 0 0 18rpx 18rpx;
|
|
background: rgba(255, 255, 255, 0.76);
|
|
backdrop-filter: blur(10rpx);
|
|
}
|
|
|
|
.bubble-stage {
|
|
height: 286rpx;
|
|
margin-top: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.bubble-stage::before,
|
|
.bubble-stage::after {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 0;
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
box-shadow:
|
|
92rpx 42rpx 0 rgba(255, 255, 255, 0.7),
|
|
238rpx 86rpx 0 rgba(107, 232, 181, 0.72),
|
|
388rpx 22rpx 0 rgba(255, 220, 116, 0.72),
|
|
536rpx 132rpx 0 rgba(255, 255, 255, 0.78),
|
|
626rpx 188rpx 0 rgba(117, 190, 255, 0.72);
|
|
}
|
|
|
|
.bubble-stage::before {
|
|
left: 44rpx;
|
|
top: 58rpx;
|
|
}
|
|
|
|
.bubble-stage::after {
|
|
left: 78rpx;
|
|
top: 176rpx;
|
|
transform: scale(0.78);
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.topic-bubble {
|
|
overflow: visible;
|
|
text-shadow: 0 3rpx 10rpx rgba(16, 46, 36, 0.18);
|
|
box-shadow:
|
|
inset 8rpx 10rpx 20rpx rgba(255, 255, 255, 0.52),
|
|
inset -12rpx -14rpx 22rpx rgba(26, 77, 60, 0.14),
|
|
0 16rpx 28rpx rgba(22, 92, 72, 0.18),
|
|
0 0 28rpx rgba(255, 255, 255, 0.84);
|
|
backdrop-filter: blur(4rpx);
|
|
}
|
|
|
|
.topic-bubble::before {
|
|
top: 12%;
|
|
left: 18%;
|
|
width: 42%;
|
|
height: 22%;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.05));
|
|
}
|
|
|
|
.topic-bubble::after {
|
|
top: -14rpx;
|
|
right: -14rpx;
|
|
bottom: -14rpx;
|
|
left: -14rpx;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.58);
|
|
box-shadow: 0 0 24rpx rgba(255, 255, 255, 0.55);
|
|
}
|
|
|
|
.bubble-glow {
|
|
right: 16%;
|
|
bottom: 16%;
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
box-shadow:
|
|
-32rpx -42rpx 0 rgba(255, 255, 255, 0.55),
|
|
24rpx -18rpx 0 rgba(255, 255, 255, 0.38),
|
|
40rpx 20rpx 0 rgba(255, 255, 255, 0.28),
|
|
0 0 16rpx rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.topic-bubble--0 {
|
|
background:
|
|
radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.94) 0, rgba(255, 255, 255, 0) 26%),
|
|
radial-gradient(circle at 78% 82%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 36%),
|
|
linear-gradient(145deg, #b9a9ff 0%, #7362eb 100%);
|
|
}
|
|
|
|
.topic-bubble--1 {
|
|
background:
|
|
radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0) 25%),
|
|
radial-gradient(circle at 76% 82%, rgba(255, 243, 198, 0.38), rgba(255, 255, 255, 0) 36%),
|
|
linear-gradient(145deg, #ffc56e 0%, #ff6a39 100%);
|
|
}
|
|
|
|
.topic-bubble--2 {
|
|
background:
|
|
radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 25%),
|
|
linear-gradient(145deg, #ffe78f 0%, #f2ad18 100%);
|
|
}
|
|
|
|
.topic-bubble--3,
|
|
.topic-bubble--4,
|
|
.topic-bubble--6 {
|
|
background:
|
|
radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.94) 0, rgba(255, 255, 255, 0) 25%),
|
|
linear-gradient(145deg, #a9d8ff 0%, #3f8de8 100%);
|
|
}
|
|
|
|
.topic-bubble--5 {
|
|
background:
|
|
radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.94) 0, rgba(255, 255, 255, 0) 25%),
|
|
linear-gradient(145deg, #ffb9b4 0%, #ef514b 100%);
|
|
}
|
|
|
|
.topic-bubble--7 {
|
|
background:
|
|
radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0) 25%),
|
|
linear-gradient(145deg, #9cf3c7 0%, #18b978 100%);
|
|
}
|
|
|
|
.reaction-effect-layer {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 3000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.reaction-pop-bubble {
|
|
position: absolute;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: -75rpx;
|
|
margin-top: -75rpx;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.98) 0, rgba(255, 255, 255, 0.68) 32%, rgba(255, 222, 112, 0.96) 100%);
|
|
box-shadow:
|
|
inset 0 8rpx 16rpx rgba(255, 255, 255, 0.7),
|
|
inset -10rpx -14rpx 24rpx rgba(214, 142, 28, 0.2),
|
|
0 28rpx 48rpx rgba(218, 134, 20, 0.26),
|
|
0 0 0 14rpx rgba(255, 218, 102, 0.16);
|
|
animation: reaction-pop 820ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
|
|
}
|
|
|
|
.reaction-pop-bubble text {
|
|
font-size: 74rpx;
|
|
line-height: 1;
|
|
filter: drop-shadow(0 10rpx 10rpx rgba(110, 70, 12, 0.18));
|
|
transform: translateY(-2rpx);
|
|
}
|
|
|
|
.reaction-pop-bubble::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 26rpx;
|
|
top: 22rpx;
|
|
width: 42rpx;
|
|
height: 20rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
transform: rotate(-25deg);
|
|
filter: blur(1rpx);
|
|
}
|
|
|
|
@keyframes reaction-pop {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 20rpx, 0) scale(0.25) rotate(-18deg);
|
|
}
|
|
16% {
|
|
opacity: 1;
|
|
transform: translate3d(0, -18rpx, 0) scale(1.28) rotate(8deg);
|
|
}
|
|
36% {
|
|
transform: translate3d(0, -6rpx, 0) scale(1) rotate(-4deg);
|
|
}
|
|
72% {
|
|
opacity: 1;
|
|
transform: translate3d(0, -92rpx, 0) scale(1.08) rotate(5deg);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(0, -140rpx, 0) scale(0.86) rotate(0deg);
|
|
}
|
|
}
|
|
</style>
|