VTY / V.VIP 响应式布局定案 PRD
0. 一句话结论
0.1 断点总表
1. 背景与目标
2. 角色与闭环
3. 信息架构对照
4. 断点与布局态
5. 页面级布局
6. 实现原则
7. UI 需补齐的交付
8. 测试说明
9. 闭环清单
10. 修订记录
0. 一句话结论（定案）
| 项 | 定案 |
|---|---|
| PC 宽 | 视口 ≥ 1280：左侧菜单展开常驻；鉴权为居中双栏弹窗；无底栏 |
| PC 窄 | 1024–1279：左侧菜单自动折叠为图标轨；点击轨 / 汉堡打开完整菜单浮层；鉴权仍为双栏弹窗；无底栏 |
| 平板 | 768–1023：走 H5 壳（汉堡抽屉 + 底栏）；禁止 PC 双栏鉴权；右侧浮条隐藏 |
| 手机 | ≤ 767：强制 H5；底栏；鉴权整页；禁止 PC 侧栏占位 / 双栏弹窗 |
| 判定基准 | 只认视口 CSS 宽度，不以 UA 判端。布局切换只看宽度，高度只影响滚动 |
| 全站一致 | 首页定什么布局态，二级页就用什么布局态。禁止按页面另起断点或改壳层结构 |
Demo 为真实页面：拖宽度时侧栏展开 / 折叠轨 / 浮层、内容列数、底栏、鉴权形态会自动切换。视觉细节以 UI 标注为准。
0.1 断点定案总表（评审主表）
读表规则：落在哪一行，就只允许该行的处理方式；跨边界 ±1px 以表内闭开区间为准。
| 布局态 | 宽度区间 | 产品叫法 | 左侧菜单 | 顶栏汉堡 | 底栏 | 鉴权容器 | 右侧浮条 | 主内容 |
|---|---|---|---|---|---|---|---|---|
PC_WIDE |
≥ 1280 | PC / 桌面宽 | 展开常驻（文案 + 图标） | 隐藏 | 无 | 居中双栏弹窗 | 完整显示 | 多列（见 4.4） |
PC_NARROW |
1024 – 1279 | PC 窄 | 自动折叠为图标轨；点轨 / 汉堡 → 浮层完整菜单 | 显示，切换浮层 | 无 | 居中双栏弹窗 | 可简化 | 仍 PC 栅格，列数随宽减 |
TABLET |
768 – 1023 | 平板 / 折叠屏展开偏窄 | 无占位；汉堡 → 抽屉 | 显示 | 有 H5 底栏 | 禁止双栏；整页 / 近全屏 | 隐藏 | 少列 / 列表；内容可加宽 |
H5_LOCK |
≤ 767 | 手机 / 折叠屏折叠 | 同平板抽屉 | 显示 | 有 | 强制整页 | 隐藏 | 单列为主 |
侧栏交互（PC 窄 · 重点）
| 步骤 | 行为 |
|---|---|
| 进入 1024–1279 | 侧栏立即变为图标轨，主区吃满剩余宽度；不需要用户手动点收起 |
| 点击折叠轨任意处 / 顶栏汉堡 | 打开浮层完整菜单 + 半透明遮罩 |
| 点击遮罩 / 再次点汉堡 | 关闭浮层，回到图标轨 |
| 进入 ≥1280 | 浮层清除；侧栏强制展开常驻；汉堡隐藏 |
| 进入 ≤1023 | 改为平板 / 手机抽屉（无图标轨占位） |
禁止：PC 窄下把完整侧栏硬挤进布局导致主区过窄；禁止仅缩字体不折叠。
1. 背景与目标
1.1 为什么做
主站同时存在 PC 深色壳与 H5 深色壳两套信息架构。产品需先定案：
- 从宽屏缩到窄屏时，哪一像素锁成 H5；
- 登录 / 注册 / 找回在 PC 是弹窗、在 H5 是整页 —— 如何连续自适应；
- 首页侧栏 / 底栏 / 浮条如何映射到二级页，避免「半 PC 半 H5」脏布局。
1.2 目标（验收）
- 每个断点区有唯一布局态，组件显隐无歧义。
- 前端可按布局态编码，不依赖 User-Agent。
- 测试可用宽度断言布局态，规则可回归。
1.3 非目标
- 不定视觉标注（色值、字号、圆角、间距、控件高度）—— 由 UI 出稿。
- 不改业务接口与账务。
- 不定案娱乐城 / 真人等其它品类详情的内部盘口结构。
2. 角色与闭环
| 角色 | 在本定案中的职责 | 闭环出口 |
|---|---|---|
| 产品 | 确认断点与布局态命名、组件显隐与交互 | 评审通过本 PRD + Demo |
| UI | 按布局态出稿，补齐视觉标注 | 切图 / 标注对齐第 7 节清单 |
| 前端 | 实现 media 规则与组件切换，壳层全站复用 | 联调通过第 8 节用例 |
| 测试 | 按设备矩阵与缩宽脚本回归 | 用例全过，缺陷闭环 |
3. 信息架构对照（PC ↔ H5）
3.1 首页 / 优惠活动等主站壳
| 能力 | PC_WIDE | PC_NARROW | 平板 | 手机 |
|---|---|---|---|---|
| 主导航 | 左栏展开 | 图标轨；点开浮层完整菜单 | 底栏 Tab + 汉堡抽屉 | 同平板 |
| 次级入口（优惠活动、邀请等） | 左栏促销块 | 浮层内展示 | 顶部分类四宫格 | 同平板 |
| 账户区 | 顶栏登录 / 注册或已登录信息 | 同左 | 顶栏 + 汉堡 | 同左 |
| 右侧浮条 | 可完整 | 可简化 | 隐藏 | 隐藏 |
| 底栏 | 无 | 无 | 有 | 有 |
3.2 登录 / 注册 / 找回密码
| 能力 | PC（≥1024，含宽 / 窄） | 平板 / 手机（≤1023） |
|---|---|---|
| 容器 | 居中弹窗 | 全屏页（禁双栏品牌） |
| 品牌视觉 | 左栏赞助大图 | 表单为主；左品牌图隐藏 |
| 关闭 | 弹窗关闭 → 回来源页 | 返回 / 关闭 |
字段校验规则（账号长度、密码、协议勾选等）PC / H5 一致，以现网规则为准，本 PRD 不合并登录与注册的账号长度差异。
4. 断点体系
| 布局态 ID | 条件 | 一句话 |
|---|---|---|
H5_LOCK | w ≤ 767 | 手机：底栏 + 鉴权整页 + 抽屉菜单 |
TABLET | 768 ≤ w ≤ 1023 | 平板：同 H5 交互，内容可加宽 |
PC_NARROW | 1024 ≤ w ≤ 1279 | PC 窄：侧栏折叠轨 + 点击浮层 |
PC_WIDE | w ≥ 1280 | PC 宽：侧栏展开常驻 |
折叠屏展开：按当前视口宽度落入上表对应行（通常是平板或 PC 窄）。折叠屏折叠：走手机。
4.1 切换原则
- 只认宽度，旋转跨断点立即切态。
- 首屏必须直接命中正确态，禁止 UA 闪屏。
- 鉴权：≥1024 双栏弹窗；跨到 ≤1023 转为整页，已填表单尽量保留。
- 侧栏：跨入 PC 窄自动折叠；跨入 PC 宽自动展开并关浮层。
4.2 设备矩阵（产品对照）
| 设备类型 | 典型宽度 | 布局态 |
|---|---|---|
| 大桌面 | 1440 / 1920 | PC_WIDE |
| 小笔记本 | 1280 / 1366 | PC_WIDE |
| 窄桌面 / 分屏 | 1024–1279 | PC_NARROW |
| iPad 横屏偏窄 | ~1024–1180 | ≥1024 走 PC 窄 |
| iPad 竖屏 / 安卓平板 | ~768–1000 | TABLET |
| 主流 / 小屏手机 | 320–414 | H5_LOCK |
4.3 内容列数（产品密度，不是视觉标注）
首页赛程区随宽度减少列数：很宽 5 列 → 逐步减到手机 1 列。
优惠活动列表：PC（≥1024）2 列；平板 / 手机（≤1023）1 列。
活动详情信息卡：PC / 平板 3 项并排；手机改为上下堆叠。
首页 Hero：宽屏 Banner 与注册礼包并排；≤1023 上下堆叠，各自拉满。
全屏无留白：禁止居中手机框 + 两侧黑边。主内容随侧栏显隐吃满剩余宽度。
5. 页面级布局规格
5.1 首页
- PC_WIDE：顶栏 + 展开左栏 + 主区 + 右侧浮条。汉堡隐藏。
- PC_NARROW：顶栏 + 图标轨 + 主区。点轨 / 汉堡出浮层。无 H5 底栏。
- TABLET / H5_LOCK：无侧栏占位；汉堡开抽屉；有底栏与顶部分类；赛程为列表 / 少列。
5.2 优惠活动列表
- 壳层与首页完全相同。左栏「优惠活动」为当前页。
- 已登录顶栏展示充值、余额、消息。
- 主区为活动封面网格：PC 2 列，窄屏 1 列。点击封面进入对应详情。
5.3 活动详情
- 壳层不变。主区：头图 → 活动时间 / 对象 / 场馆 → 报名状态按钮 → 活动内容文案。
- 内部可按内容多少改排版，但不得改全站壳层结构。
5.4 登录 / 注册 / 找回
- PC：顶栏入口打开居中双栏弹窗（或同等双栏卡片）。
- H5 / 平板：整页表单，禁止双栏品牌挤占输入区。
- 从 PC 打开鉴权后缩到手机：形态切 H5，已填内容尽量保留。
6. 实现原则（给前端，不含视觉 token）
- 断点用与第 0.1 节一致的宽度媒体查询。
- 布局态同步到
data-layout，便于测试断言。 - 壳层组件（顶栏、左栏、浮条、底栏）全站复用，二级页不要各做一套。
- 禁止仅用 User-Agent 判断 H5。
- 禁止在手机布局下仍露出 PC 左栏占位或双栏弹窗。
- 禁止用整页缩放冒充自适应。
7. UI 需补齐的交付（本文不定稿）
以下由 UI 按布局态出标注稿，不在本 PRD 规定具体数值：
- 色值、字体层级、圆角、间距、控件高度、图标尺寸。
- 各布局态下顶栏、侧栏、卡片、按钮的视觉稿。
- PC 窄：图标轨态 + 浮层打开态各一帧。
- 平板 / 手机：抽屉开 / 关、底栏、鉴权整页。
- 活动列表封面与详情头图的视觉规范。
8. 测试说明
8.1 如何触发
- 打开总览 Demo，用宽度按钮或拖浏览器边缘。
- Chrome 设备模式改宽度；真机横竖屏切换。
8.2 断言要点
- 宽 767 → 手机态；底栏可见；无 PC 侧栏占位。
- 宽 768 → 平板；汉堡抽屉；无双栏登录。
- 宽 1024 → PC 窄；图标轨；点轨出现浮层。
- 宽 1280 → PC 宽；侧栏展开；汉堡隐藏；浮层关闭。
- 登录打开状态下从宽屏拖到手机：形态切 H5，表单尽量保留。
- 首页点「优惠活动」进入列表；点封面进入详情；壳层布局态与首页一致。
8.3 缺陷判定
- 手机态出现 PC 左栏或双栏弹窗 → P0。
- 断点边界 ±1 与定义不符 → P1。
- 仅视觉间距 / 色值偏差 → 交 UI，不按本 PRD 判 P0。
9. 闭环清单
- 断点数值（767 / 1024 / 1280）与第 0.1 总表一致
- PC 窄折叠轨 + 浮层交互确认
- 首页 / 优惠活动 / 详情 壳层映射确认
- 登录 / 注册 / 找回 容器切换与状态保留确认
- 平板 / 手机禁止 PC 侧栏占位已确认
- UI 补各布局态标注稿（见第 7 节）
- 测试用例导入并跑通 Demo
10. 修订记录
| 版本 | 日期 | 说明 |
|---|---|---|
| v1.0 | 2026-08-26 | 初稿：基于 PC / H5 截图定案响应式规则与演示页 |
| v1.1 | 2026-08-28 | 纳入优惠活动列表 / 详情；全站沿用首页布局态 |
| v1.2 | 2026-08-28 | 改为产品 PRD：去掉字号 / 色值 / 间距等 UI 标注内容 |