产品定义

核心功能：Ban/Pick 机制

本产品实现一个 H5 端的足球队伍/球员 Ban/Pick 选择系统，核心机制参考英雄联盟（LoL）的 BP 阶段设计。

Ban/Pick 规则

• Ban 阶段：双方轮流禁用对方可用资源（球队或球员），每个队伍有固定 Ban 槽位（如 3-5 个）
• Pick 阶段：双方轮流选择己方使用的资源（球队或球员），每个队伍有固定 Pick 槽位（如 5-11 个）
• 顺序规则：通常采用交叉选择顺序（A1 - B1 - B2 - A2 - A3 - B3...）或对称顺序
• 状态管理：已选/已 Ban 的资源不可再次被选择

用户流程

流程图

进入页面 → 选择对战模式（队伍对战/球员对战）→ BP 阶段启动
    ↓
Ban 阶段（交替禁用）→ Pick 阶段（交替选择）
    ↓
选择完成 → 展示双方阵容 → 确认提交

详细步骤

1. 页面初始化

   • 加载球队/球员资源数据（图片、名称、信息）
   • 初始化双方面板（Team A / Team B）
   • 显示 Ban/Pick 时间倒计时（可选）

2. 模式选择

   • 队伍对战模式：选择完整球队
   • 球员对战模式：选择单个球员组合阵容

3. Ban 阶段

   • 当前操作队伍高亮提示
   • 点击资源卡片进行 Ban 操作
   • 已 Ban 的资源卡片变灰，添加锁定图标
   • 动效：Ban 动画（划叉/锁定图标放大效果）

4. Pick 阶段

   • 当前操作队伍高亮提示
   • 点击资源卡片进行 Pick 操作
   • 已 Pick 的资源移动到对应队伍面板
   • 动效：卡片飞入动画、选中高亮效果

5. 完成阶段

   • 展示双方最终阵容
   • 提供确认/重新选择按钮

界面布局描述

整体布局

• 顶部栏：标题、当前阶段指示器（Ban 阶段 / Pick 阶段）
• 左侧面板（Team A）：显示 Team A 已选阵容，Ban 槽位区域
• 中间区域：资源选择池（球队/球员卡片网格）
• 右侧面板（Team B）：显示 Team B 已选阵容，Ban 槽位区域
• 底部栏：操作提示、进度条、确认按钮

资源卡片设计

• 尺寸：正方形卡片（如 120x120px）
• 内容：球队/球员图片、名称标签
• 状态样式：
  • 默认状态：正常显示
  • 已 Ban：半透明、灰色滤镜、锁定图标覆盖
  • 已 Pick A：高亮边框（Team A 配色）
  • 已 Pick B：高亮边框（Team B 配色）
  • 悬停状态：轻微放大、阴影效果

动效要求

• Ban 动效：点击后卡片快速缩小+变灰，锁定图标从中心放大弹出
• Pick 动效：选中卡片沿路径移动到对应队伍面板位置，伴随缩放和透明度变化
• 切换提示：当前操作队伍轮换时，面板边缘高亮闪烁
• 完成动画：双方阵容卡片依次弹出展示

设备适配

• H5 页面：移动端优先，响应式布局
• 屏幕适配：支持 375px - 768px 宽度
• 横竖屏兼容：横屏下双面板左右分栏，竖屏下上下分栏