# 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)
- **布局**: 3列 x 4行
- **卡片结构**:
  ```
  ┌─────────────┐
  │   图片      │  ← 带圆角的主图
  │  ❤️ 9653   │  ← 点赞图标 + 数字
  ├─────────────┤
  │  新铸爱的小卡也太绝了  │  ← 文案
  ├─────────────┤
  │   TOP 1    │  ← 排名标签 (金色)
  └─────────────┘
  ```
- **卡片样式**:
  - 图片圆角: 8px
  - 背景: 白色圆角卡片带阴影
  - 点赞数: 带文字阴影
  - TOP 标签: 金色/红色渐变

### 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 | 咕咕嘎嘎 |

---

## 七、结论

这是一个**粉丝应援类排行榜页面**，核心功能：
1. 展示用户积分和应援任务入口
2. TOP 12 藏品排行榜 (3x4 grid)
3. 分类导航 (星卡/吧唧/海报)
4. 热门/最新作品筛选
5. 瀑布流UGC内容展示

**开发优先级建议**: 高 (核心排行榜功能)