# 赛事详情功能页面说明

## 📄 新增页面概览

为赛事详情页面的9个功能模块设计并实现了8个页面（图片直播暂未实现）：

### 1. 信息发布 (`pages/event-info/event-info.vue`)
**功能：** 展示赛事相关的通知、公告和重要信息

**设计特点：**
- 卡片式列表布局
- 不同信息类型有不同的标签颜色（通知、公告、重要）
- 显示发布时间
- 内容简要预览，可点击查看详情

**数据示例：**
- 通知：报名截止时间通知
- 公告：场地变更公告
- 重要：疫情防控须知

---

### 2. 赛事规程 (`pages/event-rules/event-rules.vue`)
**功能：** 展示比赛规则和章程

**设计特点：**
- 可折叠的章节列表
- 清晰的章节标题
- 点击展开/收起查看详细内容
- 红点装饰增强视觉效果

**章节示例：**
- 第一章：总则
- 第二章：参赛资格
- 第三章：比赛规则
- 第四章：奖项设置

---

### 3. 活动日程 (`pages/event-schedule/event-schedule.vue`)
**功能：** 展示赛事活动时间表

**设计特点：**
- 日期选项卡切换不同日期
- 时间线布局展示日程
- 显示时间、活动名称、地点
- 红色圆点和连线构成时间轴

**日程示例：**
- 2月1日：签到、开幕式、预赛
- 2月2日：半决赛、决赛
- 2月3日：颁奖典礼、闭幕式

---

### 4. 参赛选手 (`pages/event-players/event-players.vue`)
**功能：** 展示所有参赛选手信息

**设计特点：**
- 搜索框支持查找选手
- 分类标签（全部、男子组、女子组）
- 选手编号圆形徽章
- 显示队伍、项目、状态

**状态标识：**
- 已确认：绿色背景
- 待确认：橙色背景

---

### 5. 比赛实况 (`pages/event-live/event-live.vue`)
**功能：** 实时直播比赛动态

**设计特点：**
- 时间轴式信息流
- 不同类型实况有不同标签颜色
- 支持图片展示（3列网格）
- 下拉刷新提示

**实况类型：**
- 精彩瞬间（红色）
- 比分（橙色）
- 赛况（绿色）

---

### 6. 出场顺序 (`pages/event-lineup/event-lineup.vue`)
**功能：** 展示选手出场顺序表

**设计特点：**
- 组别选项卡切换
- 渐变色序号卡片
- 显示出场时间和队伍
- 状态标识（已完成、进行中、待出场）

**状态颜色：**
- 已完成：绿色
- 进行中：橙色
- 待出场：灰色

---

### 7. 成绩 (`pages/event-score/event-score.vue`)
**功能：** 展示各项目比赛成绩

**设计特点：**
- 项目分类选项卡
- 前三名渐变色徽章（金、银、铜）
- 大号红色分数突出显示
- 排名徽章视觉效果强

**排名标识：**
- 第1名：金色渐变
- 第2名：银色渐变
- 第3名：铜色渐变
- 其他：灰色

---

### 8. 奖牌榜 (`pages/event-medals/event-medals.vue`)
**功能：** 展示各队伍奖牌统计

**设计特点：**
- 顶部统计卡片（参赛队伍数、奖牌总数）
- 表格式展示金银铜牌数量
- 金银铜牌用不同颜色区分
- 总计突出显示

**排名标识：**
- 第1名：金色数字
- 第2名：银色数字
- 第3名：铜色数字

---

## 🎨 统一设计风格

所有页面遵循统一的设计规范：

### 颜色方案
- **主题色：** #C93639（中国红）
- **背景色：** #f5f5f5（浅灰）
- **卡片背景：** #fff（白色）
- **文字颜色：** #333333（深灰）/ #666666（中灰）/ #999999（浅灰）

### 视觉元素
- 圆角：12rpx - 16rpx
- 内边距：20rpx - 30rpx
- 卡片间距：15rpx - 20rpx
- 字号：24rpx - 36rpx

### 交互设计
- 选项卡切换（活动状态红色背景）
- 卡片点击效果
- 状态标识色彩区分
- 空状态提示

---

## 🔗 页面路由配置

已在 `pages.json` 中添加所有页面配置：

```json
{
  "path": "pages/event-info/event-info",
  "style": { "navigationBarTitleText": "信息发布" }
}
// ... 其他7个页面配置
```

## 📱 使用方式

在赛事详情页面点击对应功能图标即可跳转：

- 📄 信息发布 → event-info
- 📋 赛事规程 → event-rules
- 📅 活动日程 → event-schedule
- 👥 参赛选手 → event-players
- 📹 比赛实况 → event-live
- 📝 出场顺序 → event-lineup
- 📊 成绩 → event-score
- 🏆 奖牌榜 → event-medals
- 🖼 图片直播 → 暂未实现

---

## 💡 后续扩展建议

1. **数据接口对接**
   - 所有页面目前使用静态数据
   - 需要对接后端API获取真实数据

2. **图片直播功能**
   - 可参考比赛实况页面
   - 重点展示图片瀑布流

3. **实时更新**
   - 比赛实况、成绩等页面添加自动刷新
   - WebSocket推送实时数据

4. **详情页**
   - 信息发布点击查看详情
   - 选手信息点击查看详细资料

5. **筛选和搜索**
   - 参赛选手搜索功能实现
   - 成绩按时间/项目筛选