完整 PRD
打开首页 Demo总览
请拖浏览器宽度验收真实页面自适应（非截图切换）。

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

文档状态： 产品定案稿（可评审）
范围： 主站壳层 —— 首页、登录、注册、找回密码；附带 DB 体育场馆页对照（非本定案主壳）。
交付物： 本 PRD + 真实页面 Demo（pages/home|login|register|forgot.html，元素拆解、全屏自适应）。
读者： 产品 / UI / 前端 / 测试

0. 一句话结论（定案）

项定案
H5 锁定宽度viewport width ≤ 767px → 强制使用 H5 布局与 H5 组件（不可再显示 PC 侧栏 / PC 双栏弹窗）
平板过渡带768px – 1023px → H5 壳 + 可适度加宽内容区（仍禁止 PC 左栏展开、禁止登录双栏品牌图）
PC 起点≥ 1024px → PC 布局；侧栏可展开；登录/注册/找回为居中双栏弹窗
大屏增强≥ 1280px → PC 完整信息密度（首页赛程多列、右侧浮条完整展示）
判定基准以浏览器视口 CSS 宽度为准（window.innerWidth / media query），不以 UA 判移动端
高度策略布局切换只看宽度；高度变化只影响滚动，不切换 PC/H5 模式

Demo 为真实 DOM（非截图切换）：拖浏览器宽度时，栅格列数/侧栏/底栏/鉴权双栏会自动重排；页面左右顶满，不留黑边。

1. 背景与目标

1.1 为什么做

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

1. 从宽屏缩到窄屏时，哪一像素锁成 H5；

2. 登录/注册/找回在 PC 是弹窗、在 H5 是整页 —— 如何连续自适应；

3. 首页侧栏 / 底栏 / 浮条如何映射，避免「半 PC 半 H5」脏布局。

1.2 目标（验收）

1.3 非目标（本定案不做）

2. 角色与闭环

角色在本定案中的职责闭环出口
产品确认断点与布局态命名评审通过本 PRD + 演示页
UI按断点出稿 / 标注间距与组件切图与标注对齐第 5 节
前端实现 media / container 规则与组件切换联调通过第 8 节用例
测试按设备矩阵与缩宽脚本回归用例全过，缺陷闭环

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

3.1 首页壳

能力PC（≥1024）H5（≤767）平板带（768–1023）
主导航左侧栏：热门/体育/真人…底部 Tab：品牌 / 充值 / 注单 / 客服 / 我的同 H5 底栏；可选顶部简易分类
次级入口左栏促销块、合营、APP顶部分类四宫格：体育/娱乐/广场/活动同 H5
账户区顶栏登录/注册；登录后余额在顶栏顶栏余额+刷新；汉堡菜单同 H5
公告顶栏跑马灯顶栏跑马灯（可缩短）同 H5
右侧浮条充值/客服/手机端/合营隐藏（能力进底栏或「我的」）隐藏
底部直播条可有「当前关注赛事」条App 下载提示条（可关）同 H5
赛程区多列卡片 / 宽表格单列联赛折叠列表；滚球/今日…单列或双列卡片（见 5.2）

3.2 登录 / 注册 / 找回密码

能力PC（≥1024）H5（≤767）平板带
容器居中 Modal，遮罩压暗首页全屏页（非浮层双栏）全屏页或近全屏卡片（禁止双栏品牌）
品牌视觉左 50% 阿根廷赞助大图底部横幅或无左栏；表单为主同 H5
登录方式Tab：账号登录 / 手机验证码主按钮账号登录 + 「手机号登录」次按钮同 H5
注册Tab：账号注册 / 手机验证码注册设置账户+密码 + 「手机号注册」同 H5
找回三步 Stepper（确认账号→验证码→重置）单页「设置新密码」：验证码+新密+确认同 H5
关闭Modal 右上角 X → 回首页左上角返回/关闭 → 回上一页或首页同 H5
跳转闭环登录↔注册↔找回 互链保持在同一容器类型内同左同左

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

字段规则错误提示时机
会员账号（登录）6–20 位，数字与字母blur / 提交
账号（注册）6–12 位，数字与字母blur / 提交
密码8–20 位，数字与字母blur / 提交
确认密码与密码一致blur / 提交
手机验证码必填；获取后倒计时提交
注册协议须勾选年满 18 岁及条款提交拦截
记住密码可选；仅本机存储策略按安全规范—
校验文案以现网截图为准；前后端规则必须一致。账号长度登录/注册不一致是现网事实，定案保留，不在本 PRD 合并。

4. 断点体系（前端必须实现的常量）


BP_H5_MAX        = 767    // ≤ 此值：H5_LOCK

BP_TABLET_MAX    = 1023   // 768–1023：TABLET_BRIDGE

BP_PC_MIN        = 1024   // ≥ 此值：PC

BP_DESKTOP_WIDE  = 1280   // ≥ 此值：PC_WIDE（密度增强，不改交互范式）

4.1 布局态枚举

布局态 ID条件描述
H5_LOCKw ≤ 767强制 H5：底栏、鉴权整页、无 PC 侧栏、无双栏弹窗
TABLET_BRIDGE768 ≤ w ≤ 1023H5 交互范式；内容最大宽度可居中；仍禁 PC 侧栏展开与双栏弹窗
PC1024 ≤ w < 1280PC 壳：侧栏可展开；鉴权双栏 Modal
PC_WIDEw ≥ 1280同 PC，首页信息密度按宽屏稿

4.2 切换原则

1. 只认宽度，旋转设备时若宽度跨断点则立即切换布局态。

2. 不得用「先显示 PC 再 JS 检测 UA 改 H5」造成闪屏；首屏 CSS media 必须命中正确态。

3. 从 PC 缩到 H5：打开中的 双栏 Modal 必须销毁并改为整页路由/全屏层（或自动关闭并提示「请使用手机版登录入口」——推荐：自动转为全屏鉴权页，表单状态尽量保留）。

4. 从 H5 拉到 PC：全屏鉴权页可转为居中 Modal，表单值保留。

4.3 设备矩阵（展示规则）

设备类型典型 CSS 宽度期望布局态展示要点
主流桌面1440 / 1920PC_WIDE完整侧栏+双栏弹窗+多列赛程
小笔记本1280 / 1366PC / PC_WIDE侧栏可收为窄轨；弹窗仍双栏
iPad 横屏~1024–1180PC 或边界≥1024 用 PC；注意安全区
iPad 竖屏~768–834TABLET_BRIDGEH5 范式，内容可加宽
安卓平板800–1000TABLET_BRIDGE同上
折叠屏展开~700–900+按宽度落入上表禁止按「折叠」特殊 UA
折叠屏外屏~360–400H5_LOCK标准 H5
主流手机375 / 390 / 414H5_LOCK标准 H5
小屏手机320–360H5_LOCK保证触控热区 ≥44px，横向禁裁切主按钮

4.4 赛程卡片列数自适应（必须实现）

首页「热门/足球」赛程区使用 CSS Grid，随宽度减少列数（示例已在 Demo 落地）：

视口宽度一行卡片数
> 1399px5
1100 – 13994
900 – 10993
600 – 8992
≤ 5991

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

4.5 全屏无留白

5. 页面级布局规格

5.1 首页

#### PC / PC_WIDE

#### H5_LOCK

#### TABLET_BRIDGE

5.2 登录

项PCH5
打开方式顶栏「登录」→ Modal入口进 /login 或全屏层
结构左品牌 \右表单顶栏标题「登录」+ 注册按钮；表单竖排；底品牌条
主按钮登录登录
次操作手机验证码 Tab；忘记密码；去注册手机号登录按钮；忘记密码；联系客服
关闭XX / 返回

自适应行为：

5.3 注册

同登录的容器规则。

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

5.4 找回密码

项PCH5
形态Modal + 三步 Stepper整页「设置新密码」
步骤1 确认账号 → 2 验证码 → 3 重置验证码 + 新密码 + 确认（可合并展示）
成功Toast + 关 Modal 或跳登录Toast + 回登录页

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

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

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

6.1 推荐技术约束

6.2 禁止事项

6.3 性能与首屏

7. UI 交付清单

编号交付物断点
UI-01首页 PC_WIDE≥1280
UI-02首页 PC1024–1279
UI-03首页 TABLET_BRIDGE768–1023
UI-04首页 H5≤767
UI-05登录 PC Modal≥1024
UI-06登录 H5 整页≤767
UI-07注册 PC / H5同上
UI-08找回 PC / H5同上
UI-09断点说明标注图（红线标 767/1024/1280）—

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

8. 测试说明

8.1 如何触发

方式步骤
演示页缩宽打开 index.html →「交互模拟器」→ 拖动宽度滑杆或点设备预设
Chrome 设备模式F12 → Toggle device toolbar → 选 iPhone/iPad 或 Responsive，改宽度
真机同网访问演示页或预发环境，横竖屏切换
自动化Playwright page.setViewportSize({ width, height }) 断言 [data-layout]

8.2 断言要点

1. width=767 → data-layout=H5_LOCK；可见底栏；不可见 PC 左栏。

2. width=768 → TABLET_BRIDGE；仍无 PC 左栏；无双栏登录。

3. width=1024 → PC；可出现左栏与双栏登录。

4. 登录打开状态下从 1200 拖到 375：表单不丢关键已填账号（允许密码按安全策略清空，若清空须在用例注明）。

5. 注册成功 → 自动登录或跳登录，并能进入首页（闭环）。

6. 找回成功 → 用新密码登录成功（闭环）。

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

用例ID模块前置步骤预期
TC-BP-01断点演示页宽度设 1440PC_WIDE；首页多列
TC-BP-02断点演示页宽度 1024PC
TC-BP-03断点演示页宽度 1023TABLET_BRIDGE；无左栏
TC-BP-04断点演示页宽度 768TABLET_BRIDGE
TC-BP-05断点演示页宽度 767H5_LOCK；H5 首页稿
TC-BP-06断点演示页宽度 375H5_LOCK
TC-BP-07断点375 竖屏旋转使宽≥1024切到 PC
TC-AUTH-01登录PC点登录双栏 Modal
TC-AUTH-02登录H5进登录整页；有手机号登录
TC-AUTH-03登录PC 打开登录缩宽至 767变为 H5 登录形态
TC-AUTH-04登录非法账号提交提示规则文案
TC-AUTH-05注册H5不勾协议提交拦截
TC-AUTH-06注册合法确定并登录进入已登录首页
TC-AUTH-07找回PC走完三步可登录
TC-AUTH-08找回H5验证码+新密可登录
TC-HOME-01首页H5滚球 Tab列表刷新且底栏仍在
TC-HOME-02首页PC收起侧栏主区变宽，仍为 PC 态
TC-HOME-03首页H5点充值进充值闭环（有登录则进充值，未登录先登录）
TC-VENUE-01DB场馆主站进 DBH5场馆底栏接管，主站底栏不叠

8.4 缺陷判定

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

10. 修订记录

版本日期说明
v1.02026-08-26初稿：基于 PC/H5 截图定案响应式规则与演示页