4.8 KiB
4.8 KiB
赛事详情功能页面说明
📄 新增页面概览
为赛事详情页面的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 中添加所有页面配置：
{
"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
- 🖼 图片直播 → 暂未实现
💡 后续扩展建议
-
数据接口对接
- 所有页面目前使用静态数据
- 需要对接后端API获取真实数据
-
图片直播功能
- 可参考比赛实况页面
- 重点展示图片瀑布流
-
实时更新
- 比赛实况、成绩等页面添加自动刷新
- WebSocket推送实时数据
-
详情页
- 信息发布点击查看详情
- 选手信息点击查看详细资料
-
筛选和搜索
- 参赛选手搜索功能实现
- 成绩按时间/项目筛选