VTY / V.VIP 响应式布局定案 PRD

文档状态： 产品定案稿（可评审）

范围： 主站壳层 —— 首页、登录、注册、找回密码；附带 DB 体育场馆页对照（非本定案主壳）。

交付物： 本 PRD + 真实页面 Demo（pages/home|login|register|forgot.html，元素拆解、全屏自适应）。

自适应 Demo： demo.html — 单独打开，切换宽度看布局态（推荐前端/测试使用）。

读者： 产品 / UI / 前端 / 测试

0. 一句话结论（定案）

Demo 为真实 DOM：拖宽度时侧栏展开/折叠轨/浮层、栅格列数、底栏、鉴权形态会自动切换。

0.1 断点定案总表（评审主表 · 必须过）

读表规则： 落在哪一行，就只允许该行「如何处理」列；跨边界 ±1px 以表内闭开区间为准。

常量（前端必须原样落地）

BP_H5_MAX         = 767     // ≤ → H5_LOCK（手机）
BP_TABLET_MAX     = 1023    // 768–1023 → TABLET（平板）
BP_PC_MIN         = 1024    // ≥ → 进入 PC 体系
BP_PC_NARROW_MAX  = 1279    // 1024–1279 → PC_NARROW（折叠菜单）
BP_PC_WIDE_MIN    = 1280    // ≥ → PC_WIDE（展开菜单）
SIDEBAR_EXPANDED  = 220px
SIDEBAR_RAIL      = 64px

侧栏交互定案（PC 窄 · 重点）

禁止： PC 窄下把完整侧栏硬挤进布局导致主区过窄；禁止仅缩字体不折叠。

0.2 非 PC 定案：平板 + 华为三折叠（含两折/三折展示 · 必须过）

背景（前端反馈）： App 未做 PC 卡片式赛程区。因此 平板、两折叠、三折叠 均走 App 壳（列表态），禁止因视口变宽落入 PC 窄/PC 宽卡片栅格。

原则： 只有 桌面浏览器 + 宽度进 PC 断点 才用 PC 壳；折叠屏任意展开宽度仍属 App 壳。

0.2.1 壳层二分（评审必记）

0.2.2 华为三折叠 · 各形态展示定案

物理屏约 3184×2232；上表以 CSS 视口 为准。旋转屏幕时按 当前宽度 重新判定 cover / dual / triple。

0.2.3 App 壳统一行为（平板 = 两折 = 三折）

0.2.4 识别与标记（前端实现）

html[data-device-form="foldable"]     // 华为三折叠等折叠设备
html[data-fold-posture="cover|dual|triple"]  // 当前折态（随宽度变）
html[data-layout="H5_LOCK|TABLET"]    // 布局态（折叠宽>767 恒 TABLET）

识别折叠设备（任一）：

1. UA：Mate XT、GRL-AL、ALT-AL、tri-fold / 三折叠 等。
2. Huawei/HarmonyOS + 屏参：展开 ~1592、双屏 ~1024、物理 ≥3100×2200。
3. Demo：?triFold=1 / ?foldable=1 / localStorage vty_sim_tri_fold=1。

折态判定（仅 foldable 设备上）：

w ≤ 767        → cover  （外屏/一折）
768 ≤ w ≤ 1100 → dual   （两折/双屏）
w ≥ 1101       → triple （三折/全展开）

禁止： 桌面浏览器仅拉宽到 1592 即变折叠态（须模拟开关或真机 UA）。

0.2.5 与普通 iPad 平板的关系

1. 背景与目标

1.1 为什么做

主站同时存在 PC 深色壳（V.VIP） 与 H5 深色壳（V SPORT） 两套视觉与信息架构。产品需先定案：

1. 从宽屏缩到窄屏时，哪一像素锁成 H5；
2. 登录/注册/找回在 PC 是弹窗、在 H5 是整页 —— 如何连续自适应；
3. 首页侧栏 / 底栏 / 浮条如何映射，避免「半 PC 半 H5」脏布局。

1.2 目标（验收）

• UI：每个断点区有唯一布局态，标注组件显隐，无歧义。
• 前端：断点常量、组件拆分、弹窗 vs 整页切换规则可直接编码。
• 测试：有触发方式、预期结果、用例表；每个规则可回归。
• 闭环：每个交互有「入口 → 状态 → 出口 → 回查页」。

1.3 非目标（本定案不做）

• 不改业务接口、不改账务。
• 不定案娱乐城 / 真人等其它品类详情页（仅首页壳与鉴权页）。
• DB 场馆页仅作「内嵌场馆另一套 UI」对照，不与主站壳共用同一套底栏。

2. 角色与闭环

3. 信息架构对照（PC ↔ H5）

3.1 首页壳

3.2 登录 / 注册 / 找回密码

3.3 字段与校验（鉴权，PC/H5 一致）

校验文案以现网截图为准；前后端规则必须一致。账号长度登录/注册不一致是现网事实，定案保留，不在本 PRD 合并。

4. 断点体系（与第 0.1 节一致，供开发拷贝）

BP_H5_MAX         = 767
BP_TABLET_MAX     = 1023
BP_PC_MIN         = 1024
BP_PC_NARROW_MAX  = 1279
BP_PC_WIDE_MIN    = 1280

4.1 布局态枚举

data-layout 必须同步上述四值，供测试断言。

4.2 切换原则

1. 只认宽度，旋转跨断点立即切态。
2. 首屏 CSS @media 必须直接命中正确态，禁止 UA 闪屏。
3. 鉴权：≥1024 双栏 Modal；跨到 ≤1023 转为整页，表单尽量保留。
4. 侧栏：跨入 PC_NARROW 自动折叠；跨入 PC_WIDE 自动展开并关浮层。

4.3 设备矩阵

4.4 赛程卡片列数自适应（仅 PC 壳 · App/平板/折叠屏不走本节）

平板、折叠屏各形态使用 §0.2 App 列表态，不应用下列卡片列数。

Hero 区：宽屏 Banner + 注册礼包 并排；≤1023 上下堆叠，各自 width:100%。

4.5 全屏无留白

• html/body/.app 宽度 100%，背景色与壳层一致，禁止居中手机框+两侧黑边。
• 主内容区随侧栏显隐自动吃满剩余宽度（1fr / minmax(0,1fr)）。
• 鉴权：≥1024 双栏卡片居中；≤767 表单整页满宽，左品牌图隐藏。

5. 页面级布局规格

5.1 首页

#### PC_WIDE（≥1280）

• 结构：Header + 展开 LeftNav + Main + RightFloat。
• LeftNav 约 220px，常驻可见文案。
• 汉堡隐藏。

#### PC_NARROW（1024–1279）

• 结构：Header + 图标轨 LeftNav(64px) + Main。
• 轨上仅图标；促销块/日夜间在浮层内才出现。
• 点击轨或汉堡 → 浮层完整菜单 + 遮罩；关遮罩回轨。
• 鉴权仍为双栏 Modal；无 H5 底栏。

#### TABLET（768–1023） / H5_LOCK（≤767）

• 无侧栏占位；汉堡开抽屉。
• 底栏 + H5 分类四宫格 + 列表态赛程。
• TABLET 内容可加宽；H5_LOCK 按手机稿。

5.2 登录

自适应行为：

• w 从 ≥1024 连续减到 ≤767：Modal 在跨越 767 时切换为 H5 整页（推荐保留账号/密码已填值）。
• 反向同理。

5.3 注册

同登录的容器规则。

H5：协议勾选默认勾选（以截图为准）；主按钮「确定并登录」；次「手机号注册」。

5.4 找回密码

闭环：任意步可 X/返回；未完成不改密码；成功后必须能用新密码登录（测试用例覆盖）。

5.5 DB 体育场馆页（对照，非主壳）

• PC：三栏（左筛选 / 中列表 / 右详情盘口）。
• H5：顶筛选 + 列表；底「赛果/设置/未结/已结/刷新」。
• 嵌入主站时：主站底栏与场馆底栏不得叠两层；进入场馆后主站底栏隐藏或场馆全屏接管（产品二选一，默认：场馆全屏接管，返回键回主站）。

6. 前端实现指引（怎么做）

6.1 推荐技术约束

• 断点用 CSS @media (max-width: 767px) 等与常量一致。
• 布局态可同步到 data-layout="H5_LOCK|TABLET|PC_NARROW|PC_WIDE" 便于测试断言。
• 三折叠设备：data-device-form="foldable" + data-fold-posture=cover|dual|triple；宽 >767 时 JS 强制 data-layout=TABLET，CSS 覆盖 PC 断点，仅展示 App 列表态。
• 鉴权容器做成同一业务组件两套 skin：AuthModalPC / AuthPageH5，由布局态选择，共享表单状态。
• 图片与栅格用 srcset / CSS grid；禁止仅靠 transform: scale 整页缩放冒充自适应。

6.2 禁止事项

• 禁止仅用 User-Agent 判断 H5。
• 禁止三折叠宽 ≥768 时渲染 PC 侧栏 / PC 双栏鉴权 / PC 浮条（见 0.2）。
• 禁止在 H5_LOCK 下仍渲染 PC 左栏 DOM 可见。
• 禁止双栏弹窗在窄屏横向挤压导致输入框 < 280px。
• 禁止断点抖动：在阈值边界 ±1px 快速横跳时需 debounce 或 CSS 优先（推荐纯 CSS 控制显隐）。

6.3 性能与首屏

• 首屏按当前宽度只加载对应布局关键资源。
• 弹窗品牌大图懒加载；H5 可不加载 PC 品牌大图。

7. UI 交付清单

现有截图已覆盖 UI-01/04/05/06/07/08 主视觉；UI-02/03 可由 UI 在演示页规则上补标注。

8. 测试说明

8.1 如何触发

8.2 断言要点

1. width=767 → H5_LOCK；底栏可见；无 PC 侧栏占位。
2. width=768 → TABLET；汉堡抽屉；无双栏登录。
3. width=1024 → PC_NARROW；侧栏为 64px 图标轨；点轨出现浮层完整菜单。
4. width=1280 → PC_WIDE；侧栏展开；汉堡隐藏；浮层关闭。
5. 登录打开状态下从 1200 拖到 375：形态切 H5，表单尽量保留。
6. 注册/找回成功闭环同前。

8.3 用例表（可直接建用例库）

8.4 缺陷判定

• 在 H5_LOCK 出现 PC 左栏或双栏弹窗 → P0。
• 断点边界 ±1 与定义不符 → P1。
• 仅视觉间距偏差 → P2/P3。

9. 闭环清单（必须全部打勾才算定案完成）

• [ ] 非 PC 定案（平板 + 折叠屏 App 列表态 · §0.2）评审通过
• [ ] 断点数值评审通过（767 / 1024 / 1280）与第 0.1 总表一致
• [ ] PC 窄折叠轨 + 浮层交互确认
• [ ] 首页 PC↔H5 组件映射表确认
• [ ] 登录/注册/找回 容器切换与状态保留策略确认
• [ ] 平板/手机禁止 PC 侧栏占位已确认
• [ ] DB 场馆与主站底栏冲突策略确认
• [ ] 测试用例导入用例库并跑通演示页
• [ ] UI 补 PC_NARROW 轨态 + 浮层态标注稿

附录 A：断点与尺寸全表（前端评估用）

判定顺序： ① 是否折叠设备 data-device-form=foldable → ② 视口宽度 → ③ 得到 data-layout / 壳层 / 组件规则。

基准： 一律以 window.innerWidth（CSS 视口宽） 为准，高度不参与切壳。

A.1 主断点常量（必须落地）

\* 折叠设备例外： 识别为 foldable 时，宽 >767 永远 TABLET，不进 PC 壳。

A.2 边界像素一览（±1px 敏感点）

\* 折叠设备在 1024 仍保持 TABLET。

A.3 PC 赛程卡片栅格断点（仅 PC 壳）

App 壳（平板/手机/折叠屏）不使用上表，统一 .h5-live 列表态。

A.4 折叠屏折态断点（仅 data-device-form=foldable）

物理屏参考：Mate XT 3184×2232（CSS 约 1592×1116 @2x）。

A.5 布局尺寸 Token（CSS 变量 / 定值）

A.6 Demo 预设宽度（评审 / Playwright 参考）

\* 768 在折叠模拟下 posture 为 dual（>767 且 ≤1100）。

A.7 设备矩阵 × 壳层 × 赛程（汇总）

A.8 DOM 标记（前端断言）

html[data-layout="H5_LOCK|TABLET|PC_NARROW|PC_WIDE"]
html[data-device-form="foldable"]          // 可选，折叠设备
html[data-fold-posture="cover|dual|triple"] // 可选，折态

A.9 鉴权容器断点

A.10 Hero / 其它次级断点

A.11 前端评估清单（建议逐项打勾）

• [ ] 常量 767 / 1023 / 1024 / 1279 / 1280 与 media 一致
• [ ] PC 卡片 5 档列数与 A.3 一致
• [ ] 折叠 1100 / 1101 折态切换
• [ ] 折叠设备宽 1024、1592 不进 PC
• [ ] App 壳不出现 .pc-only-sec / PC 侧栏 / 双栏鉴权
• [ ] data-layout 与 UI 壳层一致，可供 E2E 断言
• [ ] 边界 767、768、1023、1024、1279、1280 各测 ±1px

10. 修订记录