# 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. 一句话结论（定案）

| 项 | 定案 |
|----|------|
| **三断点（固定）** | **手机 `≤767`** · **平板 `768–1199`** · **PC `≥1200`** |
| **手机** | **`w ≤ 767`** → `H5_LOCK`：App 壳；底栏；鉴权整页；Hero 轮播；列表态赛程 |
| **平板** | **`768 ≤ w ≤ 1199`** → `TABLET`：App 壳；底栏 + 汉堡抽屉；鉴权整页；Hero 轮播；列表态赛程 |
| **PC** | **`w ≥ 1200`** → `PC`：PC 壳；左侧菜单 **展开常驻**（220px）；鉴权双栏 Modal；PC 卡片栅格；Hero 双栏并排 |
| **折叠屏（非 PC）** | 识别为折叠设备时，**宽 >767 恒 `TABLET`**（App 壳），即使 CSS 宽 >1199 也不进 PC |
| **判定基准** | 宽度三断点 + 折叠设备识别；**仅桌面浏览器 `w≥1200` 且非折叠** 走 PC 壳 |
| **高度策略** | 布局切换只看宽度；高度只影响滚动 |

Demo 为真实 DOM：拖宽度时壳层、栅格列数、底栏、鉴权形态会自动切换。

---

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

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

| 布局态 ID | 宽度区间 | 产品叫法 | 左侧菜单 | 顶栏汉堡 | 底栏 | 鉴权容器 | 右侧浮条 | 赛程/内容 |
|-----------|----------|----------|----------|----------|------|----------|----------|-----------|
| `H5_LOCK` | **≤ 767** | 手机 | 无占位；**汉堡 → 抽屉** | 显示 | **有** | **强制整页** | **隐藏** | App 列表态；Hero **轮播** |
| `TABLET` | **768 – 1199** | 平板 | 无占位；**汉堡 → 抽屉** | 显示 | **有** | 整页单栏 | **隐藏** | App 列表态；Hero **轮播**；内容可加宽 |
| `PC` | **≥ 1200** | PC / 桌面 | **展开常驻** 220px，文案+图标 | 隐藏 | 无 | 居中双栏 Modal | 可完整显示 | PC **卡片栅格**（见 4.4）；Hero **双栏并排**；赞助条可显 |

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

```text
BP_H5_MAX         = 767     // ≤ → H5_LOCK（手机）
BP_TABLET_MAX     = 1199    // 768–1199 → TABLET（平板）
BP_PC_MIN         = 1200    // ≥ → PC（桌面）
SIDEBAR_EXPANDED  = 220px
```

### 边界切换（±1px 必测）

| 边界 | 左侧 | 右侧 | 主要变化 |
|------|------|------|----------|
| **767 ↔ 768** | `H5_LOCK` | `TABLET` | 仍 App 壳；平板内容区可加宽 |
| **1199 ↔ 1200** | `TABLET` | `PC` | 底栏消失 → 侧栏展开；列表 → PC 卡片；鉴权整页 → 双栏 Modal；Hero 轮播 → 双栏并排 |

**禁止：** 在 `768–1199` 区间渲染 PC 侧栏 / PC 卡片 / 双栏鉴权 Modal；禁止仅缩字体不折叠。

### H5 设计稿基准宽度（UI 出图）

| 项 | 定案 |
|----|------|
| **UI 出图宽度** | **430px**（评审 / 还原 / 标注均以此为准） |
| **布局归属** | 仍在手机断点 **`w ≤ 767`** → `H5_LOCK`；430 不是第四断点 |
| **其它手机宽** | 414 / 390 / 375 / 320 等同属 `H5_LOCK`，布局一致，仅可视区宽窄不同 |
| **Demo 入口** | 顶栏 **「手机尺寸」** 保留；**★ 设计稿 430** 高亮；点任一预设后 **说明条** 显示归属三断点 + 文案 |

---

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

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

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

| 壳层 | 谁用 | 赛程/首页内容 | 导航 |
|------|------|---------------|------|
| **PC 壳** | 桌面浏览器 **`w≥1200`** 且 **非折叠设备** | **多列卡片栅格**（5→4→3→2→1） | 侧栏展开常驻 |
| **App 壳** | 手机 + **平板（768–1199）** + **折叠屏各形态** | **滚球/联赛列表**（与 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` |
| 赛程 | **`.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–1199 | 折叠识别 + 宽度 |
| 宽 ≥1200 | 桌面浏览器 → 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（≥1200） | 平板（768–1199） | 手机（≤767） |
|------|-------------|------------------|--------------|
| 主导航 | 左栏展开：热门/体育… | 底栏 Tab；汉堡抽屉 | 同平板 |
| 次级入口 | 左栏促销块、合营、APP | 顶部分类四宫格 | 同平板 |
| 账户区 | 顶栏登录/注册 | 顶栏+汉堡 | 同左 |
| 右侧浮条 | 可完整 | **隐藏** | **隐藏** |
| 底栏 | 无 | **有** | **有** |
| 赛程区 | **PC 多列卡片** | **App 列表态** | **App 列表态** |

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

| 能力 | PC（≥1200） | 平板 / 手机（≤1199） |
|------|-------------|----------------------|
| 容器 | **居中 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     = 1199
BP_PC_MIN         = 1200
```

### 4.1 布局态枚举（三断点）

| 布局态 ID | 条件 | 一句话 |
|-----------|------|--------|
| `H5_LOCK` | `w ≤ 767` | 手机：底栏 + 鉴权整页 + 抽屉菜单 |
| `TABLET` | `768 ≤ w ≤ 1199` | 平板：App 壳，同手机交互，内容可加宽 |
| `PC` | `w ≥ 1200` | PC：侧栏展开常驻 + PC 卡片栅格 |

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

### 4.2 切换原则

1. **只认宽度**，旋转跨断点立即切态。  
2. 首屏 CSS `@media` 必须直接命中正确态，禁止 UA 闪屏。  
3. 鉴权：`≥1200` 双栏 Modal；跨到 `≤1199` 转为整页，表单尽量保留。  
4. 侧栏：跨入 `PC（≥1200）` 侧栏展开常驻；`≤1199` 无侧栏占位，仅汉堡抽屉。

### 4.3 设备矩阵

| 设备类型 | 典型宽度 | 布局态 | 侧栏如何处理 |
|----------|----------|--------|--------------|
| 大桌面 | 1440 / 1920 | `PC` | 展开常驻 |
| 小笔记本 | 1280 / 1366 | `PC` | 展开常驻 |
| iPad 横屏 | 1024–1180 | `TABLET` | 汉堡抽屉 + 底栏 |
| iPad 竖屏 | ~768–834 | `TABLET` | 汉堡抽屉 |
| 安卓平板 | 800–1199 | `TABLET` | 汉堡抽屉 |
| 主流手机 | **430** / 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)`）。  
- 鉴权：`≥1200` 双栏卡片居中；`≤767` 表单整页满宽，左品牌图隐藏。

## 5. 页面级布局规格

### 5.1 首页

#### PC（≥1200）

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

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

- 无侧栏占位；汉堡开抽屉。  
- 底栏 + H5 分类四宫格 + 列表态赛程 + Hero 轮播。  
- `TABLET` 内容可加宽；`H5_LOCK` 按手机稿（参考宽度 **430**）。

### 5.2 登录

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

**自适应行为：**

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

### 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"` 便于测试断言。  
- 三折叠设备：`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（侧栏展开） | ≥1200 |
| UI-02 | 首页 TABLET | 768–1199 |
| UI-03 | 首页 H5 | ≤767 |
| UI-04 | 登录 PC Modal | ≥1200 |
| UI-05 | 登录 H5 整页 | ≤767 |
| UI-06 | 注册 PC / H5 | 同上 |
| UI-07 | 找回 PC / H5 | 同上 |
| UI-08 | **断点定案标注图**（红线 **767 / 1199 / 1200**） | — |
| UI-09 | 华为三折叠 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 模式 → **默认跟随窗口宽度**，拖曳浏览器边缘即可看断点切换 |
| **三断点快捷** | 顶栏 **「三断点」**：767（手机界）/ 900（平板）/ 1200（PC）— 对应 **仅 3 个主断点** |
| **手机尺寸** | 顶栏 **「手机尺寸」**：**★ 设计稿 430**（H5 UI 出图基准）+ 414 / 390 / 375 / 320 / 767 上界 |
| **说明条** | 点选任一宽度预设后，**说明条**显示：归属手机/平板/PC、布局态 ID、设计/边界说明 |
| 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=1199` → `TABLET`；仍有底栏；App 列表态。  
4. `width=1200` → `PC`；侧栏展开；汉堡隐藏；PC 卡片栅格。  
5. 登录打开状态下从 1200 拖到 430：形态切 H5，表单尽量保留。  
6. 注册/找回成功闭环同前。

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

| 用例ID | 模块 | 前置 | 步骤 | 预期 |
|--------|------|------|------|------|
| TC-BP-01 | 断点 | Demo | 宽 1440 | `PC`；侧栏展开 |
| TC-BP-02 | 断点 | Demo | 宽 1200 | `PC`；侧栏展开；无汉堡 |
| TC-BP-03 | 断点 | Demo | 宽 1199 | `TABLET`；有底栏；App 列表 |
| TC-BP-04 | 断点 | Demo | 宽 768 | `TABLET` |
| TC-BP-05 | 断点 | Demo | 宽 767 | `H5_LOCK` |
| TC-BP-06 | 断点 | Demo | 宽 430 | `H5_LOCK` |
| 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-TRI-01 | 折叠 | Demo+模拟 | 宽 1592 | `TABLET`+`triple`；列表态；无 PC 卡片 |
| TC-TRI-02 | 折叠 | 同上 | 宽 1024 | `TABLET`+`dual`；720 居中 |
| TC-TRI-03 | 折叠 | 同上 | 宽 767 | `H5_LOCK`+`cover`（外屏） |
| TC-TRI-07 | 平板 | 关模拟宽 900 | — | `TABLET`；同为 App 列表态 |
| TC-TRI-08 | 对照 | 关模拟宽 1592 | — | **`PC` PC 卡片栅格**（非折叠） |
| TC-VENUE-01 | DB场馆 | 主站进 DB | H5 | 场馆底栏接管 |
### 8.4 缺陷判定

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

---

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

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

---

## 附录 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` | **1199** | `768px – 1199px` | `TABLET` | App 壳 |
| `BP_PC_MIN` | **1200** | `min-width: 1200px` | `PC` | PC 壳* |

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

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

| 边界 | 左侧（含） | 右侧（含） | 跨边界变化 |
|------|------------|------------|------------|
| **767 ↔ 768** | `H5_LOCK` | `TABLET` | 仍 App 壳 |
| **1199 ↔ 1200** | `TABLET` | `PC` | 底栏→侧栏；列表→卡片；整页鉴权→Modal |

\* 折叠设备在 1200 仍保持 `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 侧栏展开 |
| 抽屉侧栏宽 | **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–1199 单栏 |
| 折叠/App 鉴权 max | **480px** | foldable >767 |
| 输入框最小热区 | **44px** 高 | 手机触控 |
| 鉴权输入最小宽 | **≥280px** | 禁止双栏挤压 |

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

> Demo 顶栏分组：**三断点**（767 / 900 / 1200）· **手机尺寸**（430★ 设计稿 + 常见逻辑宽）· **其它宽度**（边界 / 折叠 / 桌面）。点选后 **说明条** 与下表一致。

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

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

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

| 设备/场景 | 典型 w | 折叠? | `data-layout` | 壳层 | 赛程 | 导航 | 鉴权 |
|-----------|--------|-------|---------------|------|------|------|------|
| iPhone | 430 | 否 | `H5_LOCK` | App | 列表 | 底栏+抽屉 | 整页 |
| iPad 横屏 | 1024–1180 | 否 | `TABLET` | App | 列表 | 底栏+抽屉 | 整页单栏 |
| 安卓平板 | 800–1199 | 否 | `TABLET` | App | 列表 | 底栏+抽屉 | 整页单栏 |
| 笔记本 | 1280–1366 | 否 | `PC` | PC | **卡片** | 侧栏展开 | 双栏 Modal |
| 大显示器 | 1440–1920 | 否 | `PC` | PC | **卡片 5 列** | 侧栏展开 | 双栏 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"]
html[data-device-form="foldable"]          // 可选，折叠设备
html[data-fold-posture="cover|dual|triple"] // 可选，折态
```

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

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

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

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

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

- [ ] 常量 `767 / 1199 / 1200` 与 media 一致  
- [ ] 折叠设备宽 1024、1592 **不进 PC**（开模拟时）  
- [ ] 边界 767、768、1199、1200 各测 ±1px  

---

## 10. 修订记录

| 版本 | 日期 | 说明 |
|------|------|------|
| v1.5 | 2026-09-01 | Demo 顶栏：三断点 + 手机尺寸分组；430 设计稿说明条；PRD 补 H5 出图基准 |
| v1.4 | 2026-09-01 | **三断点定案**：手机 ≤767 / 平板 768–1199 / PC ≥1200；取消 PC 窄；参考手机宽 430 |
| v1.2 | 2026-08-28 | 附录 A 次级断点；独立 `BREAKPOINTS.md` + Demo 断点清单面板 |
| v1.1 | 2026-08-28 | 非 PC 定案（平板/折叠 App 列表态）；附录 A 断点全表 |
| v1.0 | 2026-08-26 | 初稿：基于 PC/H5 截图定案响应式规则与演示页 |