TOPFANS 排行榜页面结构分析
页面概述
- 页面名称: HOME
- 尺寸: 375 x 1588 (移动端)
- 风格: 梦幻甜美、饭圈审美、粉色系渐变
一、页面布局结构（从上到下）
┌─────────────────────────────────┐
│ 1. 状态栏 (iPhone Status Bar) │ 高度: ~20px
├─────────────────────────────────┤
│ 2. 顶部用户区 │ y: 45px
│ - 积分: 2713 │
│ - 每日任务 | 巴士应援 图标 │
├─────────────────────────────────┤
│ 3. Banner 横幅区域 │ y: 264px
│ - 背景装饰 (模糊渐变) │
│ - "TOPFANS 排行榜" 主标题 │
│ - "日榜" 标签 │
├─────────────────────────────────┤
│ 4. 藏品内容区 (3x4 Grid) │ y: 293px
│ - 12 个藏品卡片 │
│ - 每个卡片带 TOP 1-12 排名 │
│ - 点赞数和文案 │
│ - "查看更多" 按钮 │
├─────────────────────────────────┤
│ 5. 分类导航区 │ y: 950px
│ - 星卡 | 吧唧 | 海报 │
│ - 3 个大图标导航 │
├─────────────────────────────────┤
│ 6. 筛选 Tab 栏 │
│ - 热门作品 | 最新作品 │
├─────────────────────────────────┤
│ 7. 瀑布流作品展示区 │
│ - 多张卡片，含图片+点赞+文案 │
└─────────────────────────────────┘
二、核心组件详解
2.1 状态栏 (1:29 -> 1:7)
- iPhone 状态栏组件，包含时间、信号、电池图标
2.2 顶部用户区 (活动栏位)
| 元素 |
类型 |
说明 |
| 每日任务 |
文字 |
粉水晶样式 |
| 巴士应援 |
文字 |
粉水晶样式 |
| 用户头像 |
图片 |
圆形 |
| 积分显示 |
文字 (2713) |
白色带阴影 |
2.3 Banner 横幅 (banner条)
- 背景: 模糊渐变 (粉红到透明)
- "TOPFANS 排行榜" 主标题
- "日榜" 标签 (右上角)
- 装饰性圆形图案
2.4 藏品内容区 (Grid)
2.5 分类导航区 (顶部金刚区)
| 图标 |
名称 |
样式 |
| 星卡 |
星卡 |
粉色水晶风格，opacity 0.75 |
| 吧唧 |
吧唧 |
同上 |
| 海报 |
海报 |
同上 |
2.6 筛选 Tab 栏
- 热门作品: 选中状态 (opacity 0.75)
- 最新作品: 未选中状态 (opacity 0.52)
- 样式: 胶囊形状，半透明背景
2.7 瀑布流展示区
三、颜色主题
| 用途 |
颜色 |
| 主背景渐变 |
linear-gradient(126deg, #FFE5E5, #FF9C9C, #6AC5D3) |
| 卡片背景 |
#FFFFFF |
| 强调/排名 |
#FC6466, #F45668, #FFF60F |
| 点赞红心 |
#FF5A5D |
| 文字主色 |
#FFFFFF |
| 文字深色 |
#000000 |
| Tab 未选中 |
opacity 0.52 |
| Tab 选中 |
opacity 0.75 |
四、阴影与效果
| 效果 |
参数 |
| 粉色卡片阴影 |
box-shadow: 2px 2px 4px rgba(242, 21, 21, 0.47) |
| 应援图标阴影 |
box-shadow: 0px 4px 4px rgba(238, 38, 38, 0.33) |
| 模糊背景 |
blur(4px), blur(9.3px) |
| 状态栏背景 |
blur(4px) |
五、文字样式
| 用途 |
样式 |
| TOP 排名 |
金色带阴影 (style_GT3LFV) |
| 日榜标签 |
白色带阴影 |
| 藏品文案 |
白色带阴影 (style_S0XHUK) |
| 瀑布发文案 |
同上 |
| 分类名称 |
白色带阴影 (style_0R0H6H) |
| 积分数字 |
白色 (style_F5RO1M) |
六、数据内容示例
排行榜藏品 (12个)
| 排名 |
点赞数 |
文案 |
| TOP 1 |
9653 |
新铸爱的小卡也太绝了 |
| TOP 2 |
9430 |
今日翻牌：这张海报… |
| TOP 3 |
7933 |
细节控狂喜 |
| TOP 4 |
8034 |
海报墙又添新成员了 |
| TOP 5 |
9223 |
这张小卡光影感绝了 |
| TOP 6 |
6420 |
展开那一刻，忍不住… |
| TOP 7 |
6342 |
必须单独发一条 |
| TOP 8 |
9070 |
这个角度我直接封神 |
| TOP 9 |
5943 |
这套效果每张都想单独说一次 |
| TOP 10 |
5270 |
新进一位门面 |
| TOP 11 |
4766 |
压箱底的海报 |
| TOP 12 |
4326 |
铸爱进度又往前了 |
瀑布流内容 (示例)
| 点赞数 |
文案 |
| 3244 |
来给大家看看我新到手的宝贝呀～～～ |
| 7189 |
マイドラだゆううううう |
| 147 |
咕咕嘎嘎 |
七、结论
这是一个粉丝应援类排行榜页面，核心功能：
- 展示用户积分和应援任务入口
- TOP 12 藏品排行榜 (3x4 grid)
- 分类导航 (星卡/吧唧/海报)
- 热门/最新作品筛选
- 瀑布流UGC内容展示
开发优先级建议: 高 (核心排行榜功能)
