209 lines
4.8 KiB
Markdown
209 lines
4.8 KiB
Markdown
# 赛事详情功能页面说明
|
||
|
||
## 📄 新增页面概览
|
||
|
||
为赛事详情页面的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. **筛选和搜索**
|
||
- 参赛选手搜索功能实现
|
||
- 成绩按时间/项目筛选
|