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

> **文档状态：** 产品定案稿（可评审）  
> **范围：** 主站壳层 —— **首页、登录、注册、找回密码**；附带 DB 体育场馆页对照（非本定案主壳）。  
> **交付物：** 本 PRD + **真实页面 Demo**（`pages/home|login|register|forgot.html`，元素拆解、全屏自适应）。  
> **自适应 Demo 入口（单独打开、切换宽度）：** [demo.html](./demo.html) · 线上 [vty-responsive-prd.pages.dev/demo.html](https://vty-responsive-prd.pages.dev/demo.html)  
> **读者：** 产品 / UI / 前端 / 测试

---

## 0. 一句话结论（定案）

| 项 | 定案 |
|----|------|
| **PC 宽** | **`w ≥ 1280`** → 左侧菜单 **展开常驻**（约 220px）；鉴权双栏 Modal；无底栏 |
| **PC 窄** | **`1024 ≤ w ≤ 1279`** → 左侧菜单 **自动折叠为图标轨**（64px）；**点击折叠区 / 汉堡 → 浮层完整菜单**；鉴权仍双栏 Modal |
| **平板** | **`768 ≤ w ≤ 1023`** → H5 壳 + 底栏；无常驻侧栏；**汉堡 → 抽屉浮层**；禁 PC 双栏鉴权 |
| **手机（H5 锁定）** | **`w ≤ 767`** → 强制 H5；底栏；鉴权整页；禁 PC 侧栏 / 双栏弹窗 |
| **平板 / 折叠屏（非 PC）** | **宽 >767 且（平板宽度 **或** 识别为折叠设备）** → 一律 **App 壳 `TABLET`**：底栏 + 抽屉 + **列表态赛程**（与 App 一致） |
| **华为三折叠** | 外屏/两折/三折展开 **均非 PC**；各形态展示见 **§0.2** |
| **判定基准** | 宽度断点 + 折叠设备识别；**仅真 PC 浏览器宽屏走 PC 卡片栅格** |
| **前端对齐说明** | **App 未实现 PC 卡片式赛程** → 平板与折叠屏禁止 fallback 到 PC 多列卡片 |
| **高度策略** | 布局切换只看宽度；高度只影响滚动 |

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

---

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

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

| 布局态 ID | 宽度区间 | 产品叫法 | 左侧菜单 | 顶栏汉堡 | 底栏 | 鉴权容器 | 右侧浮条 | 赛程/内容 |
|-----------|----------|----------|----------|----------|------|----------|----------|-----------|
| `PC_WIDE` | **≥ 1280** | PC / 桌面宽 | **展开常驻** 220px，文案+图标 | 隐藏 | 无 | 居中双栏 Modal | 可完整显示 | 多列（见 4.4）；赞助条可显 |
| `PC_NARROW` | **1024 – 1279** | PC 窄 | **自动折叠图标轨** 64px；**点轨/汉堡 → 左侧浮层菜单**（遮罩可关） | 显示，切换浮层 | 无 | 居中双栏 Modal | 可简化 | 仍 PC 栅格，列数随宽减 |
| `TABLET` | **768 – 1023**（**及折叠屏宽 >767**） | 平板 / 折叠 | 无占位；**汉堡 → 抽屉** | 显示 | **有** | 整页单栏 | **隐藏** | **App 列表态**（非 PC 卡片） |
| `H5_LOCK` | **≤ 767** | 手机 | 同平板抽屉 | 显示 | **有** | **强制整页** | **隐藏** | 标准 H5 单列为主 |

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

```text
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 窄 · 重点）

| 步骤 | 行为 |
|------|------|
| 进入 `1024–1279` | 侧栏 **立即** 变为图标轨，主区吃满剩余宽度；**不**需要用户手动点收起 |
| 点击折叠轨任意处 / 顶栏汉堡 | 打开 **浮层**：完整侧栏（促销块+文案菜单+日夜间），主区上盖半透明遮罩 |
| 点击遮罩 / 再次点汉堡 | 关闭浮层，回到图标轨 |
| 进入 `≥1280` | 浮层状态清除；侧栏强制展开常驻；汉堡隐藏 |
| 进入 `≤1023` | 改为平板/手机抽屉模式（无图标轨占位） |

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

---

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

> **背景（前端反馈）：** App **未做 PC 卡片式**赛程区。因此 **平板、两折叠、三折叠** 均走 **App 壳（列表态）**，**禁止**因视口变宽落入 PC 窄/PC 宽卡片栅格。  
> **原则：** 只有 **桌面浏览器 + 宽度进 PC 断点** 才用 PC 壳；折叠屏任意展开宽度仍属 App 壳。

### 0.2.1 壳层二分（评审必记）

| 壳层 | 谁用 | 赛程/首页内容 | 导航 |
|------|------|---------------|------|
| **PC 壳** | 桌面浏览器 `w≥1024` 且 **非折叠设备** | **多列卡片栅格**（5→4→3→2→1） | 侧栏展开/折叠轨 |
| **App 壳** | 手机 + **平板** + **折叠屏各形态** | **滚球/联赛列表**（与 App 一致） | 底栏 + 汉堡抽屉 |

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

| 形态 | 产品叫法 | 典型 CSS 视口 | `data-fold-posture` | 布局态 | **展示定案（做什么）** |
|------|----------|---------------|---------------------|--------|------------------------|
| 外屏 / 一折 | 单屏握持 | **≤767**（~504×1116） | `cover` | `H5_LOCK` | 同手机：四宫格分类 + Banner + **滚球 Tab 列表** + 底栏；**无** PC 侧栏/卡片 |
| 两折 / 双屏 | 折两层展开 | **768 – 1100**（~1024×1116） | `dual` | `TABLET` | App 壳：分类 + Banner 堆叠 + **列表态赛程**；主区 **max-width 720px 居中**；底栏；汉堡抽屉；**禁止 PC 窄图标轨** |
| 三折 / 全展开 | 完全展开 | **≥1101**（~1592×1116） | `triple` | `TABLET` | App 壳：同上；主区 **max-width 920px 居中**；列表可 **双列联赛块**（仍非 PC 卡片栅格）；底栏；**禁止 PC 宽侧栏/浮条** |

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

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

| 能力 | 定案 | 禁止 |
|------|------|------|
| 布局态 | `TABLET`（三折宽 >767）或 `H5_LOCK`（外屏 ≤767） | `PC_NARROW` / `PC_WIDE` |
| 赛程 | **`.h5-live` 列表**；隐藏 **`.pc-only-sec` 卡片栅格** | PC 多列 `match-grid` |
| 左侧 | 汉堡 → **抽屉浮层** | PC 侧栏、64px 图标轨 |
| 底栏 | **显示** H5 底栏 | PC 无底栏 |
| 鉴权 | 整页 / 近全屏 **单栏** | PC 双栏 Modal |
| 右侧浮条 | **隐藏** | PC 浮条 |
| 顶栏赞助 | **隐藏**（三折/App 壳） | PC 宽赞助条 |

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

```text
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 设备上）：**

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

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

### 0.2.5 与普通 iPad 平板的关系

| 项 | iPad 等普通平板 | 华为三折叠 |
|----|-----------------|------------|
| 壳层 | **同为 App 壳** | **同为 App 壳** |
| 触发 | 宽度 768–1023 | 折叠识别 + 宽度 |
| 宽 >1023 | 桌面浏览器 → PC | 折叠设备 → **仍 App 壳** |
| 赛程 | 列表态 | 列表态（三折全展开内容区更宽） |

---
## 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. 角色与闭环

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

---

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

### 3.1 首页壳

| 能力 | PC_WIDE（≥1280） | PC_NARROW（1024–1279） | 平板（768–1023） | 手机（≤767） |
|------|------------------|------------------------|------------------|--------------|
| 主导航 | 左栏展开：热门/体育… | **图标轨**；点开浮层完整菜单 | 底栏 Tab；汉堡抽屉 | 同平板 |
| 次级入口 | 左栏促销块、合营、APP | 浮层内展示 | 顶部分类四宫格 | 同平板 |
| 账户区 | 顶栏登录/注册 | 同左 | 顶栏+汉堡 | 同左 |
| 右侧浮条 | 可完整 | 可简化 | **隐藏** | **隐藏** |
| 底栏 | 无 | 无 | **有** | **有** |
| 赛程区 | **PC 多列卡片**（仅 PC 壳） | 仍 PC 栅格 | **App 列表态** | **App 列表态** |

### 3.2 登录 / 注册 / 找回密码

| 能力 | PC（≥1024，含宽/窄） | 平板 / 手机（≤1023） |
|------|----------------------|----------------------|
| 容器 | **居中 Modal** | **全屏页**（禁双栏品牌） |
| 品牌视觉 | 左 50% 赞助大图 | 底横幅或无左栏；表单为主 |
| 关闭 | Modal X → 回首页 | 返回/关闭 |

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

| 字段 | 规则 | 错误提示时机 |
|------|------|--------------|
| 会员账号（登录） | 6–20 位，数字与字母 | blur / 提交 |
| 账号（注册） | 6–12 位，数字与字母 | blur / 提交 |
| 密码 | 8–20 位，数字与字母 | blur / 提交 |
| 确认密码 | 与密码一致 | blur / 提交 |
| 手机验证码 | 必填；获取后倒计时 | 提交 |
| 注册协议 | 须勾选年满 18 岁及条款 | 提交拦截 |
| 记住密码 | 可选；仅本机存储策略按安全规范 | — |

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

---

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

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

### 4.1 布局态枚举

| 布局态 ID | 条件 | 一句话 |
|-----------|------|--------|
| `H5_LOCK` | `w ≤ 767` | 手机：底栏 + 鉴权整页 + 抽屉菜单 |
| `TABLET` | `768 ≤ w ≤ 1023` | 平板：同 H5 交互，内容可加宽 |
| `PC_NARROW` | `1024 ≤ w ≤ 1279` | PC 窄：侧栏折叠轨 + 点击浮层 |
| `PC_WIDE` | `w ≥ 1280` | PC 宽：侧栏展开常驻 |

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

### 4.2 切换原则

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

### 4.3 设备矩阵

| 设备类型 | 典型宽度 | 布局态 | 侧栏如何处理 |
|----------|----------|--------|--------------|
| 大桌面 | 1440 / 1920 | `PC_WIDE` | 展开常驻 |
| 小笔记本 | 1280 / 1366 | `PC_WIDE` | 展开常驻 |
| 窄桌面 / 分屏 | 1024–1279 | `PC_NARROW` | **折叠轨 → 点开浮层** |
| iPad 横屏偏窄 | ~1024–1180 | `PC_NARROW` 或边界 | ≥1024 走 PC 窄规则 |
| iPad 竖屏 | ~768–834 | `TABLET` | 汉堡抽屉 |
| 安卓平板 | 800–1000 | `TABLET` | 汉堡抽屉 |
| 主流手机 | 375 / 390 / 414 | `H5_LOCK` | 汉堡抽屉 + 底栏 |
| 小屏手机 | 320–360 | `H5_LOCK` | 触控热区 ≥44px |
| **华为 Mate XT 三折叠·展开** | **~1592** | **`TABLET`（强制）** | **底栏+抽屉；禁止 PC** |
| **华为三折叠·双屏** | **~1024** | **`TABLET`（强制）** | 同上 |
| **华为三折叠·外屏** | **~504 / ≤767** | **`H5_LOCK`** | 标准手机 |

---



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

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

| 视口宽度 | 一行卡片数 |
|----------|------------|
| > 1399px | **5** |
| 1100 – 1399 | **4** |
| 900 – 1099 | **3** |
| 600 – 899 | **2** |
| ≤ 599 | **1** |

Hero 区：PC 壳 **Banner + 注册礼包并排**；**H5 / 平板 / 折叠屏 App 壳** 为 **单栏轮播**（赛事 Banner ↔ 礼包），底部指示点，支持自动轮播与左右滑动；**禁止**把 PC 双栏直接上下堆叠。

### 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 登录

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

**自适应行为：**

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

### 5.3 注册

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

### 5.4 找回密码

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

闭环：任意步可 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 | 首页 PC_WIDE（侧栏展开） | ≥1280 |
| UI-02 | 首页 PC_NARROW（折叠轨 + 浮层开/关各一态） | 1024–1279 |
| UI-03 | 首页 TABLET | 768–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-10 | 华为三折叠 TABLET（1592 展开 + 1024 双屏） | 真机 / `?triFold=1` |

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

---

## 8. 测试说明

### 8.1 如何触发

| 方式 | 步骤 |
|------|------|
| 演示页缩宽 | 打开 **[demo.html](demo.html)**（推荐）或 `index.html` → Demo 模式 → **默认跟随窗口宽度**，拖曳浏览器边缘即可看断点切换；也可点固定宽度预设 |
| Chrome 设备模式 | F12 → Toggle device toolbar → 选 iPhone/iPad 或 Responsive，改宽度 |
| 真机 | 同网访问演示页或预发环境，横竖屏切换 |
| 自动化 | Playwright `page.setViewportSize({ width, height })` 断言 `[data-layout]` |

### 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 用例表（可直接建用例库）

| 用例ID | 模块 | 前置 | 步骤 | 预期 |
|--------|------|------|------|------|
| TC-BP-01 | 断点 | Demo | 宽 1440 | `PC_WIDE`；侧栏展开 |
| TC-BP-02 | 断点 | Demo | 宽 1280 | `PC_WIDE`；侧栏展开；无汉堡 |
| TC-BP-03 | 断点 | Demo | 宽 1279 | `PC_NARROW`；图标轨 64px |
| TC-BP-04 | 断点 | Demo | 宽 1024 | `PC_NARROW`；图标轨 |
| TC-BP-05 | 断点 | Demo | 宽 1023 | `TABLET`；无轨占位；有底栏 |
| TC-BP-06 | 断点 | Demo | 宽 768 | `TABLET` |
| TC-BP-07 | 断点 | Demo | 宽 767 | `H5_LOCK` |
| TC-BP-08 | 断点 | Demo | 宽 375 | `H5_LOCK` |
| TC-NAV-01 | 侧栏 | 宽 1100 | 默认 | 仅图标轨，无完整文案菜单占位 |
| TC-NAV-02 | 侧栏 | 宽 1100 | 点击折叠轨 | 浮层完整菜单 + 遮罩 |
| TC-NAV-03 | 侧栏 | 浮层已开 | 点遮罩 | 关闭，回到图标轨 |
| TC-NAV-04 | 侧栏 | 浮层已开 | 拉宽到 1280 | 侧栏展开常驻，浮层消失 |
| TC-AUTH-01 | 登录 | PC_NARROW | 点登录 | 双栏 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_NARROW | 开浮层再关 | 主区宽度不异常跳动（占位保持轨宽） |
| TC-HOME-03 | 首页 | H5 | 点充值 | 充值闭环 |
| TC-TRI-01 | 折叠 | Demo+模拟 | 宽 1592 | `TABLET`+`triple`；列表态；无 PC 卡片 |
| TC-TRI-02 | 折叠 | 同上 | 宽 1024 | `TABLET`+`dual`；720 居中；非 PC 窄 |
| TC-TRI-03 | 折叠 | 同上 | 宽 767 | `H5_LOCK`+`cover`（外屏） |
| TC-TRI-04 | 折叠 | 1592 | 点汉堡 | 抽屉；无 PC 侧栏 |
| TC-TRI-05 | 折叠 | 1592 | 赛程区 | 见 `.h5-live` 列表，**不见** `.pc-only-sec` |
| TC-TRI-06 | 折叠 | 1592 | 进登录 | 单栏整页 |
| TC-TRI-07 | 平板 | 关模拟宽 900 | — | `TABLET`；同为 App 列表态 |
| TC-TRI-08 | 对照 | 关模拟宽 1592 | — | `PC_WIDE` PC 卡片栅格 |
| TC-VENUE-01 | DB场馆 | 主站进 DB | H5 | 场馆底栏接管 |
### 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 主断点常量（必须落地）

| 常量名 | 值 | Media Query 参考 | 布局态 `data-layout` | 壳层 |
|--------|-----|------------------|----------------------|------|
| `BP_H5_MAX` | **767** | `max-width: 767px` | `H5_LOCK` | App 壳 |
| `BP_TABLET_MAX` | **1023** | `768px – 1023px` | `TABLET` | App 壳 |
| `BP_PC_MIN` | **1024** | `min-width: 1024px` | 进入 PC 体系 | PC 壳* |
| `BP_PC_NARROW_MAX` | **1279** | `1024px – 1279px` | `PC_NARROW` | PC 壳* |
| `BP_PC_WIDE_MIN` | **1280** | `min-width: 1280px` | `PC_WIDE` | PC 壳* |

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

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

| 边界 | 左侧（含） | 右侧（含） | 跨边界变化 |
|------|------------|------------|------------|
| **767 ↔ 768** | `H5_LOCK` | `TABLET` | 鉴权整页 ↔ 平板整页；仍 App 壳 |
| **1023 ↔ 1024** | `TABLET`（App） | `PC_NARROW`（PC）* | 底栏消失；侧栏变图标轨；鉴权变双栏 Modal |
| **1279 ↔ 1280** | `PC_NARROW` | `PC_WIDE` | 侧栏图标轨 → 展开常驻；汉堡隐藏 |

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

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

| 视口宽度 w | 一行卡片数 | CSS |
|------------|------------|-----|
| **w > 1399** | 5 | `grid-template-columns: repeat(5, 1fr)` |
| **1100 – 1399** | 4 | `max-width: 1399px` |
| **900 – 1099** | 3 | `max-width: 1099px` |
| **600 – 899** | 2 | `max-width: 899px` |
| **w ≤ 599** | 1 | `max-width: 599px` |

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

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

| 常量 | 值 | `data-fold-posture` | 布局态 | 典型设备视口 |
|------|-----|---------------------|--------|--------------|
| 外屏上限 | **w ≤ 767** | `cover` | `H5_LOCK` | ~504×1116 |
| 两折区间 | **768 – 1100** | `dual` | `TABLET` | ~1024×1116 |
| 三折下限 | **w ≥ 1101** | `triple` | `TABLET` | ~1592×1116 |

| 折态 | 主内容 max-width | 列表布局 |
|------|------------------|----------|
| `dual` | **720px** 居中 | 单列联赛列表 |
| `triple` | **920px** 居中 | 联赛块可 **双列**（`w>1200` 内有效） |

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

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

| Token / 元素 | 尺寸 | 适用 |
|--------------|------|------|
| `--sidebar-w` | **220px** | PC 宽侧栏展开 |
| `--sidebar-rail` | **64px** | PC 窄图标轨占位 |
| 抽屉侧栏宽 | **min(280px, 86vw)** | App 壳汉堡抽屉 |
| 三折抽屉宽 | **min(300px, 86vw)** | 折叠屏 |
| `--header-h` | **56px** | 顶栏 |
| `--bottom-h` | **56px** | H5 底栏 |
| `--float-w` | **56px** | PC 右侧浮条 |
| 评审条 `.bp-bar` | **28px** | Demo 顶指示（可生产去掉） |
| 主区底 padding（App） | **bottom-h + 48px** | 为底栏/App 提示留空 |
| 顶栏赞助块 max | **180px** | 仅 PC 宽显示 |
| 鉴权卡 max-width | **860px** | PC 双栏 Modal |
| 鉴权卡 min-height | **480px** | PC Modal |
| 平板鉴权 max | **480px** | 768–1023 单栏 |
| 折叠/App 鉴权 max | **480px** | foldable >767 |
| 输入框最小热区 | **44px** 高 | 手机触控 |
| 鉴权输入最小宽 | **≥280px** | 禁止双栏挤压 |

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

| 预设名 | 宽度 | 期望布局态（非折叠） | 期望（开折叠模拟） |
|--------|------|----------------------|-------------------|
| 小屏手机 | **320** | `H5_LOCK` | `H5_LOCK` + `cover` |
| 主流手机 | **375 / 414** | `H5_LOCK` | 同左 |
| 手机边界 | **767** | `H5_LOCK` | `H5_LOCK` + `cover` |
| 平板起点 | **768** | `TABLET` | `TABLET` + `dual`* |
| 平板常用 | **900** | `TABLET` | `TABLET` + `dual` |
| 平板终点 | **1023** | `TABLET` | `TABLET` + `dual` |
| PC 起点 | **1024** | `PC_NARROW` | **`TABLET` + `dual`** |
| PC 窄常用 | **1100 / 1279** | `PC_NARROW` | **`TABLET` + `dual/triple`** |
| PC 宽起点 | **1280** | `PC_WIDE` | **`TABLET` + `triple`** |
| 大桌面 | **1440 / 1920** | `PC_WIDE` | **`TABLET` + `triple`** |
| 折叠外屏 | **504** | `H5_LOCK` | `H5_LOCK` + `cover` |
| 折叠两折 | **1024** | `PC_NARROW` | **`TABLET` + `dual`** |
| 折叠三折 | **1592** | `PC_WIDE` | **`TABLET` + `triple`** |

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

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

| 设备/场景 | 典型 w | 折叠? | `data-layout` | 壳层 | 赛程 | 导航 | 鉴权 |
|-----------|--------|-------|---------------|------|------|------|------|
| iPhone | 375 | 否 | `H5_LOCK` | App | 列表 | 底栏+抽屉 | 整页 |
| 小屏 Android | 360 | 否 | `H5_LOCK` | App | 列表 | 底栏+抽屉 | 整页 |
| iPad 竖屏 | 768–834 | 否 | `TABLET` | App | 列表 | 底栏+抽屉 | 整页单栏 |
| iPad 横屏 | 1024–1180 | 否 | `PC_NARROW`* | PC | **卡片** | 图标轨 | 双栏 Modal |
| 安卓平板 | 800–1000 | 否 | `TABLET` | App | 列表 | 底栏+抽屉 | 整页单栏 |
| 笔记本 | 1280–1366 | 否 | `PC_WIDE` | PC | **卡片** | 侧栏展开 | 双栏 Modal |
| 大显示器 | 1440–1920 | 否 | `PC_WIDE` | PC | **卡片 5 列** | 侧栏展开 | 双栏 Modal |
| 分屏窄窗 | 1024–1279 | 否 | `PC_NARROW` | PC | **卡片** | 图标轨+浮层 | 双栏 Modal |
| Mate XT 外屏 | ≤767 | 是 | `H5_LOCK` | App | 列表 | 底栏+抽屉 | 整页 |
| Mate XT 两折 | ~1024 | 是 | `TABLET` | App | 列表 720 | 底栏+抽屉 | 整页单栏 |
| Mate XT 三折 | ~1592 | 是 | `TABLET` | App | 列表 920 双列 | 底栏+抽屉 | 整页单栏 |

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

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

### A.9 鉴权容器断点

| 宽度 | 非折叠设备 | 折叠设备 |
|------|------------|----------|
| **w ≤ 767** | 整页满宽；隐藏左品牌 | 同左（外屏） |
| **768 – 1023** | 近全屏单栏 max 480px | 同左 |
| **w ≥ 1024** | PC 居中双栏 Modal 860px | **仍整页单栏**（App 壳） |

### A.10 Hero / 其它次级断点

| 规则 | 断点 | 行为 |
|------|------|------|
| Hero 双栏并排 | **w ≥ 1024** 且 PC 壳 | Banner + 礼包左右并排 |
| Hero 单栏轮播 | App 壳 / **w ≤ 1023** | Banner ↔ 礼包轮播，指示点 |
| H5 分类四宫格显示 | **w ≤ 1023** 或 App 壳 | 显示 `.h5-cats` |
| PC 卡片区显示 | **w ≥ 1024** 且 PC 壳 | 显示 `.pc-only-sec` |
| H5 列表区显示 | App 壳 / **w ≤ 1023** | 显示 `.h5-live` |
| 右侧浮条 | **w ≥ 1024** 且 PC 壳 | 显示 `.float-bar` |
| 顶栏赞助 | **w ≥ 1280** 且 PC 壳 | 显示 `.header .sponsor` |
| 滚球行窄屏 | **w ≤ 420** | 比赛行改单列 |
| 三折联赛双列 → 单列 | **w ≤ 1200** 且 triple | `.h5-live-list` 改 1 列 |

### 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. 修订记录

| 版本 | 日期 | 说明 |
|------|------|------|
| v1.3 | 2026-08-31 | 独立 `demo.html` 自适应预览入口；PRD 顶栏一键打开 Demo |
| v1.2 | 2026-08-28 | 附录 A 次级断点；独立 `BREAKPOINTS.md` + Demo 断点清单面板 |
| v1.1 | 2026-08-28 | 非 PC 定案（平板/折叠 App 列表态）；附录 A 断点全表 |
| v1.0 | 2026-08-26 | 初稿：基于 PC/H5 截图定案响应式规则与演示页 |