496 lines
19 KiB
Markdown
496 lines
19 KiB
Markdown
# 浅红色 UI 规范 · 三、导航
|
||
|
||
> 返回 [规范目录](README.md) | 本篇：导航组件 · 面包屑 · 页头与分页 · 步骤条 · 页签与锚点
|
||
|
||
---
|
||
|
||
## 7. 导航组件
|
||
|
||
> 适用于"后台 / 控制台"类浅红主题界面。整体结构 = 顶部导航（红底）+ 二级导航（白底）+ 左侧分级菜单 + 多级下拉。颜色取自 ZS-001 主色红与 FS-004 中性灰。
|
||
|
||
### 7.1 顶部导航（Header · 红底）
|
||
|
||
#### 7.1.1 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 高度 | `56px` |
|
||
| 左右 padding | `--spacing-4` (16px) |
|
||
| 背景 | `linear-gradient(90deg, #A8071A 0%, #CF1322 100%)`（ZS-001-11 → ZS-001） |
|
||
| LOGO 区切角装饰 | 叠深红斜切块 `#A8071A` (ZS-001-11)，`clip-path` 斜边 |
|
||
| 底边 | 无（与二级导航白底直接相接） |
|
||
| 文字基线 | `Noto Sans S Chinese`，垂直居中 |
|
||
|
||
#### 7.1.2 系统标题（LOGO + ******系统）
|
||
|
||
- 字号 `20px Bold`，颜色 `#FFFFFF`，字体 `DOUYUFont` 或 Noto Sans Medium
|
||
- LOGO 图标 `#FFFFFF`，置于左侧切角块上
|
||
|
||
#### 7.1.3 一级导航（中部主导航，红底白字）
|
||
|
||
| 状态 | 文字 | 背景 / 装饰 |
|
||
|------|------|------------|
|
||
| 默认 | `#FFFFFF` | `transparent` |
|
||
| Hover | `#FFFFFF` | 背景 `rgba(255, 255, 255, 0.12)` |
|
||
| 激活 | `#FFFFFF` | 底部 `2px solid #FFFFFF` 高亮线，背景 `rgba(255, 255, 255, 0.16)` |
|
||
|
||
- 字号 `16px Medium`，项间距 `--spacing-5` (24px)
|
||
|
||
#### 7.1.4 右侧工具区（图标 / 用户 / 退出）
|
||
|
||
| 元素 | 字号/尺寸 | 颜色 |
|
||
|------|----------|------|
|
||
| 工具图标（消息 / 通知等） | `16px` | `#FFFFFF`，hover `rgba(255,255,255,0.7)` |
|
||
| 用户名（如"李向前"） | `14px Regular` | `#FFFFFF` |
|
||
| 用户头像 | `28px` 圆形 | — |
|
||
| 退出图标 | `16px` | `#FFFFFF` |
|
||
|
||
- 元素间距 `--spacing-3` (12px)，整体右 padding `--spacing-4` (16px)
|
||
|
||
#### 7.1.5 用户下拉菜单（右上角）
|
||
|
||
白底面板，规格同 §7.4 下拉面板。
|
||
|
||
| 状态 | 背景 | 文字 / 图标 |
|
||
|------|------|-------------|
|
||
| 默认 | `transparent` | `#575757` (FS-004-09) |
|
||
| Hover / 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) |
|
||
|
||
> 项示例：用户中心 / 修改密码 / 退出；每项左侧带 16px 图标，图标色与文字同步。
|
||
|
||
### 7.2 二级导航（白底 Tab 行）
|
||
|
||
紧贴顶部导航下方的白底标签行。
|
||
|
||
#### 7.2.1 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 高度 | `48px` |
|
||
| 背景 | `#FFFFFF` (FS-004-01) |
|
||
| 底边 | `border-bottom: 1px solid #E8E8E8` (FS-004-04) |
|
||
| 项间距 | `--spacing-6` (32px) |
|
||
| 字号 | `16px Medium` |
|
||
|
||
#### 7.2.2 状态配色
|
||
|
||
| 状态 | 文字 | 下划线 / 装饰 |
|
||
|------|------|--------------|
|
||
| 默认 | `#222222` (FS-004) | 无 |
|
||
| Hover | `#F5222D` (ZS-001-09) | 无 |
|
||
| 激活 | `#F5222D` (ZS-001-09) | 底部 `2px solid #F5222D`，含下拉箭头 `▾` 同色 |
|
||
| 失效 | `#C1C1C1` (FS-004-06) | 无 |
|
||
|
||
### 7.3 侧边栏（分级菜单）
|
||
|
||
#### 7.3.1 规格
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 宽度 | `200px`（展开）/ `64px`（折叠仅图标） |
|
||
| 背景 | `#FFFFFF` (FS-004-01) |
|
||
| 右边界 | `border-right: 1px solid #E8E8E8` (FS-004-04) |
|
||
| 项高度 | `40px` |
|
||
| 项左 padding | 二级 `--spacing-4` (16px)；三级 `--spacing-6` (32px) |
|
||
| 字号 | `16px Regular`（二级）/ `14px Regular`（三级） |
|
||
|
||
#### 7.3.2 二级菜单项配色
|
||
|
||
| 状态 | 背景 | 文字 | 图标 | 左侧指示条 |
|
||
|------|------|------|------|-----------|
|
||
| 默认 | `transparent` | `#222222` (FS-004) | `#A6A6A6` (FS-004-07) | 无 |
|
||
| Hover | `#FAFAFA` (FS-004-02) | `#F5222D` (ZS-001-09) | `#F5222D` | 无 |
|
||
| 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | `#F5222D` | 左侧 `2px solid #F5222D` |
|
||
|
||
#### 7.3.3 三级菜单项配色（前缀 `-` 短横线）
|
||
|
||
| 状态 | 背景 | 文字 | 左侧指示条 |
|
||
|------|------|------|-----------|
|
||
| 默认 | `transparent` | `#575757` (FS-004-09) | 无 |
|
||
| Hover | `#FAFAFA` (FS-004-02) | `#F5222D` (ZS-001-09) | 无 |
|
||
| 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) | 左侧 `2px solid #F5222D` |
|
||
|
||
### 7.4 下拉菜单面板
|
||
|
||
#### 7.4.1 列表型面板（如二级导航的"浏览器容器 / 手机板卡容器…"）
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 背景 | `#FFFFFF` (FS-004-01) |
|
||
| 边框 | `1px solid #E8E8E8` (FS-004-04) |
|
||
| 阴影 | `0 4px 16px rgba(34, 34, 34, 0.12)`（§3.1.3 二级阴影） |
|
||
| 圆角 | `4px` |
|
||
| 内边距 | 上下 `--spacing-2` (8px) |
|
||
| 最小宽度 | `150px` |
|
||
| 行高 | `36px` |
|
||
|
||
| 状态 | 背景 | 文字 |
|
||
|------|------|------|
|
||
| 默认 | `transparent` | `#575757` (FS-004-09) |
|
||
| Hover / 激活 | `#FEEDED` (ZS-001-03) | `#F5222D` (ZS-001-09) |
|
||
| 失效 | `transparent` | `#C1C1C1` (FS-004-06) |
|
||
|
||
#### 7.4.2 卡片宫格型面板（一级导航的图标宫格下拉）
|
||
|
||
白底大面板内以网格陈列"图标 + 二级导航名"卡片。
|
||
|
||
| 角色 | 背景 | 图标 / 文字 |
|
||
|------|------|-------------|
|
||
| 卡片（默认） | `#FEF6F6` (ZS-001-02) | 图标 `#F5222D`，文字 `#575757` |
|
||
| 卡片（Hover） | `#FEEDED` (ZS-001-03) | 图标 / 文字 `#F5222D` |
|
||
| 卡片（激活 / 当前） | `#F5222D` (ZS-001-09) | 图标 / 文字 `#FFFFFF` |
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 卡片尺寸 | `80px × 72px`（自适应等分） |
|
||
| 卡片圆角 | `4px` |
|
||
| 卡片间距 | `--spacing-2` (8px) |
|
||
| 面板内边距 | `--spacing-4` (16px) |
|
||
| 面板阴影 | `0 8px 32px rgba(34, 34, 34, 0.16)`（§3.1.3 三级阴影） |
|
||
|
||
### 7.5 交互与动画
|
||
|
||
| 行为 | 动效 |
|
||
|------|------|
|
||
| 下拉面板展开 | `transform-origin: top; scaleY(0.95) → scaleY(1); opacity 0 → 1`，`200ms ease-out` |
|
||
| 展开箭头旋转 | `rotate(0 → 180deg)`，`200ms ease-out` |
|
||
| Hover 背景过渡 | `background-color 120ms ease-out` |
|
||
| 激活底部高亮线 | `width 0% → 100%`，`240ms ease-out` |
|
||
|
||
### 7.6 侧边栏布局变体
|
||
|
||
> 侧边栏宽度通常固定，按"是否分级 / 是否展开"分为四种形态。关键区分：**叶子节点选中**用实心红填充 + 白字 + 左侧红指示条；**父级（含子项的可展开项）选中**仅用红字 + 红图标，不填充。
|
||
|
||
#### 7.6.1 上下分级 · 收起（仅图标）
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 宽度 | `64px`，仅图标 |
|
||
| 图标项（默认） | 图标 `#A6A6A6`，背景 `transparent` |
|
||
| 图标项（激活） | 图标 `#FFFFFF`，背景 `#F5222D` (ZS-001-09) 圆角方块 `4px` |
|
||
| Hover 弹出浮层 | **深色浮层**：背景 `#3D3D3D` (FS-004-10)，圆角 `4px`，阴影 §3.1.3 三级 |
|
||
| 浮层内二级标题 | `14px Medium`，`#FFFFFF` |
|
||
| 浮层内三级项（前缀 `-`） | `14px Regular`，`#FFFFFF`；hover 背景 `rgba(255,255,255,0.1)` |
|
||
|
||
#### 7.6.2 上下分级 · 展开
|
||
|
||
完整宽度列表，二级为可展开组（`^ / ▾`），其下挂三级项。
|
||
|
||
| 层级 / 状态 | 背景 | 文字 / 图标 | 左侧指示条 |
|
||
|------|------|-------------|-----------|
|
||
| 二级（默认） | `transparent` | 文字 `#222222`、图标 `#A6A6A6` | 无 |
|
||
| 二级（展开 / 当前父级） | `transparent` | 文字 `#F5222D`、图标 `#F5222D` | 无 |
|
||
| 三级（默认，前缀 `-`） | `transparent` | `#575757` (FS-004-09) | 无 |
|
||
| 三级（选中 · 叶子） | `#F5222D` (ZS-001-09) | `#FFFFFF` | 左侧 `2px solid #F5222D` |
|
||
|
||
#### 7.6.3 只有二级标题 · 不分级
|
||
|
||
扁平列表，二级即叶子节点，无三级。
|
||
|
||
| 状态 | 背景 | 文字 / 图标 | 左侧指示条 |
|
||
|------|------|-------------|-----------|
|
||
| 默认 | `transparent` | 文字 `#222222`、图标 `#A6A6A6` | 无 |
|
||
| Hover | `#FAFAFA` (FS-004-02) | 文字 `#F5222D`、图标 `#F5222D` | 无 |
|
||
| 选中 | `#F5222D` (ZS-001-09) | `#FFFFFF` | 左侧 `2px solid #F5222D` |
|
||
|
||
#### 7.6.4 二级选中 · 分级（含四级浮层）
|
||
|
||
二级展开后选中三级，三级再向右弹出**白底四级浮层**。
|
||
|
||
| 角色 | 配色 |
|
||
|------|------|
|
||
| 三级选中（叶子） | 背景 `#F5222D`，文字 `#FFFFFF`，左侧 `2px solid #F5222D` |
|
||
| 四级浮层背景 | `#FFFFFF`，边框 `1px solid #E8E8E8`，阴影 §3.1.3 二级 |
|
||
| 四级项（默认） | `#575757` (FS-004-09) |
|
||
| 四级项（Hover） | 背景 `#FEEDED` (ZS-001-03)，文字 `#F5222D` |
|
||
| 四级项（选中） | 文字 `#F5222D`，左侧 `2px solid #F5222D` |
|
||
|
||
---
|
||
|
||
## 8. 面包屑（Breadcrumb）
|
||
|
||
> 用于标识当前页面在层级结构中的位置，并提供逐级返回与跳转。建议层级**不超过四级**。
|
||
|
||
### 8.1 顶部路径式（🏠 | 概况 / 总概况）
|
||
|
||
页面顶部的简版面包屑，靠 `/` 分隔。
|
||
|
||
| 元素 | 色值 | 来源 | 说明 |
|
||
|------|------|------|------|
|
||
| 首页图标 🏠 | `#A6A6A6` (FS-004-07) | — | hover `#F5222D` |
|
||
| 竖分隔 `\|` | `#E8E8E8` | FS-004-04 | 首页图标与路径间 |
|
||
| 父级路径文字 | `#575757` (FS-004-09) | — | 可点击，hover `#F5222D` |
|
||
| 路径分隔 `/` | `#C1C1C1` | FS-004-06 | — |
|
||
| 当前页文字 | `#222222` (FS-004) | — | `Medium`，不可点击 |
|
||
|
||
### 8.2 返回 + 路径式（含 ← 返回）
|
||
|
||
左侧"← 返回"按钮 + 竖分隔 + 文字路径。按层级展开：
|
||
|
||
```
|
||
一级: ← 返回 │ 现在位置
|
||
二级: ← 返回 │ 上一级位置 / 现在位置
|
||
三级: ← 返回 │ 上二级位置 / 上一级位置 / 现在位置
|
||
四级: ← 返回 │ 上三级位置 / 上二级位置 / 上一级位置 / 现在位置
|
||
```
|
||
|
||
| 元素 | 色值 | 来源 | 说明 |
|
||
|------|------|------|------|
|
||
| 返回箭头 ← + "返回" | `#F5222D` (ZS-001-09) | — | hover `#CF1322`，文本按钮态 |
|
||
| 竖分隔 `\|` | `#E8E8E8` | FS-004-04 | 返回与路径间 |
|
||
| 历史层级文字 | `#575757` (FS-004-09) | — | 可点击，hover `#F5222D` |
|
||
| 路径分隔 `/` | `#C1C1C1` | FS-004-06 | — |
|
||
| 当前位置文字 | `#222222` (FS-004) | — | `Medium`，不可点击 |
|
||
|
||
### 8.3 行为规则
|
||
|
||
- 点击「返回」按钮逐步向上返回一级。
|
||
- 点击文字路径，快速返回到该层级页面。
|
||
- 层级尽可能不超过四级；超出时中间层折叠为 `…`。
|
||
- 字号 `14px Regular`，元素间距 `--spacing-2` (8px)，竖分隔高度约 `12–14px`。
|
||
|
||
---
|
||
|
||
## 9. 页头与分页
|
||
|
||
### 9.1 页头（Page Header）
|
||
|
||
内容区顶部的标题区，底部叠一条 `1px solid #E8E8E8` (FS-004-04) 分割线。
|
||
|
||
| 变体 | 构成 | 配色 |
|
||
|------|------|------|
|
||
| 基础页头 | 页头标题 | 标题 `16px Bold #222222` (FS-004) |
|
||
| 页头 + 说明 | 标题 +（简要说明） | 说明 `14px Regular #A6A6A6` (FS-004-07) |
|
||
| 页头 + 说明 icon | 标题 + `?` 帮助图标 | 图标 `#A6A6A6`，hover `#F5222D` |
|
||
| 分 Tabs 页头 | 多个标题 Tab | 见 §9.2 |
|
||
|
||
### 9.2 分 Tabs 页头
|
||
|
||
横向页签形态，激活态红色下划线。
|
||
|
||
| 状态 | 文字 | 下划线 |
|
||
|------|------|--------|
|
||
| 默认 | `#222222` (FS-004) | 无 |
|
||
| Hover | `#F5222D` (ZS-001-09) | 无 |
|
||
| 激活 | `#F5222D` (ZS-001-09) | `2px solid #F5222D`，宽度与文字齐 |
|
||
| 失效 | `#C1C1C1` (FS-004-06) | 无 |
|
||
|
||
- 字号 `14px Medium`，项间距 `--spacing-5` (24px)，下划线与文字底部间距 `--spacing-2` (8px)
|
||
|
||
### 9.3 分页（Pagination）
|
||
|
||
#### 9.3.1 正常分页
|
||
|
||
`共 240 项 [1] 2 3 4 5 … 24 > 每页 [10 ▾] 条 前往 [ ] 页`
|
||
|
||
| 元素 | 默认 | Hover | 激活 | 失效 |
|
||
|------|------|-------|------|------|
|
||
| 总数 / 辅助文字（共N项 / 每页 / 条 / 前往 / 页） | `#575757` (FS-004-09) | — | — | — |
|
||
| 页码数字 | `#222222` (FS-004) | `#F5222D` (ZS-001-09) | 背景 `#F5222D` + 文字 `#FFFFFF` | `#C1C1C1` (FS-004-06) |
|
||
| 翻页箭头 `< >` | `#575757` (FS-004-09) | `#F5222D` | — | `#C1C1C1` |
|
||
| 省略号 `…` | `#A6A6A6` (FS-004-07) | — | — | — |
|
||
| 每页选择器 / 跳转输入框 | 边框 `#DBDBDB` (FS-004-05) | 边框 `#F5222D` | — | 边框 `#E8E8E8` |
|
||
|
||
- 页码项尺寸 `28px × 28px`，圆角 `2px`，激活态为实心红方块；项间距 `--spacing-1` (4px)
|
||
|
||
#### 9.3.2 精简分页
|
||
|
||
`共 1 项 < [1] / 10 >`
|
||
|
||
| 元素 | 色值 |
|
||
|------|------|
|
||
| 总数文字 | `#575757` (FS-004-09) |
|
||
| 当前页输入框 | 边框 `#DBDBDB`，文字 `#222222` |
|
||
| 总页数 `/ N` | `#A6A6A6` (FS-004-07) |
|
||
| 翻页箭头 `< >` | `#575757`，hover `#F5222D`，失效 `#C1C1C1` |
|
||
|
||
#### 9.3.3 导航式分页
|
||
|
||
仅"下一页 » / « 上一页"文本按钮，无页码。配色沿用 §5.3.3 文本按钮 + 图标：
|
||
|
||
| 状态 | 色值 |
|
||
|------|------|
|
||
| 默认 | `#F5222D` (ZS-001-09) |
|
||
| Hover | `#CF1322` (ZS-001) |
|
||
| 失效 | `#C1C1C1` (FS-004-06) |
|
||
|
||
---
|
||
|
||
## 10. 步骤条（Steps）
|
||
|
||
> 用于多步流程的进度指引。按布局分**横向**（弹窗 / 页面）与**纵向**两类。颜色取自 ZS-001 主色红与 FS-004 中性灰。
|
||
|
||
### 10.1 步骤节点（公共）
|
||
|
||
每个步骤由「指示圆 + 标题（可选描述）」组成。指示圆按状态切换形态：
|
||
|
||
| 状态 | 圆形外观 | 圆内符号 | 来源 |
|
||
|------|----------|----------|------|
|
||
| 已完成（Completed） | 描边圆 `2px solid #F5222D`，背景 `transparent` | `✓`（对勾，`#F5222D`） | ZS-001-09 |
|
||
| 当前（Current） | 实心圆，背景 `#F5222D` | 步骤数字，`#FFFFFF` | ZS-001-09 / 白 |
|
||
| 未开始（Upcoming） | 描边圆 `1px solid #C1C1C1`，背景 `transparent` | 步骤数字，`#A6A6A6` | FS-004-06 / FS-004-07 |
|
||
| 失效（Disabled） | 描边圆 `1px solid #E8E8E8`，背景 `transparent` | 步骤数字，`#C1C1C1` | FS-004-04 / FS-004-06 |
|
||
|
||
**指示圆规格**：
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 直径 | `24px` |
|
||
| 圆内字号 | `12px Bold`（D-DIN 或 Noto Sans Bold） |
|
||
| 对勾图标 | `12px`，居中 |
|
||
|
||
**标题与描述文字**：
|
||
|
||
| 元素 | 状态 | 字号 / 颜色 | 来源 |
|
||
|------|------|-------------|------|
|
||
| 标题 | 已完成 / 当前 | `14px Medium`，`#222222` | FS-004 |
|
||
| 标题 | 未开始 / 失效 | `14px Medium`，`#A6A6A6` → `#C1C1C1` | FS-004-07 → FS-004-06 |
|
||
| 描述 | 已完成 / 当前 | `12px Regular`，`#575757` | FS-004-09 |
|
||
| 描述 | 未开始 / 失效 | `12px Regular`，`#A6A6A6` → `#C1C1C1` | FS-004-07 → FS-004-06 |
|
||
|
||
**连接线（步骤之间）**：
|
||
|
||
| 类型 | 色值 | 来源 | 样式 |
|
||
|------|------|------|------|
|
||
| 已完成段 | `#F5222D` | ZS-001-09 | `1px dashed`（弹窗）/ `1px solid`（页面） |
|
||
| 未完成段 | `#C1C1C1` | FS-004-06 | `1px dashed` |
|
||
|
||
> 连接线在指示圆两侧水平居中（横向）或正下方垂直（纵向）；线两端与圆外缘留 `--spacing-1` (4px) 间隙。
|
||
|
||
### 10.2 弹窗步骤条（横向 · 描边圆为主）
|
||
|
||
用于 Modal / Drawer 内的紧凑步骤条。完成态用**描边 + 红色对勾**，避免在弹窗内过于抢眼。
|
||
|
||
```
|
||
( ✓ ) ┄┄┄ (●2) ┄┄┄ ( 3 ) ┄┄┄ ( 4 ) ┄┄┄ ( 5 )
|
||
标题 标题 标题 标题 标题
|
||
(描述) (描述) (描述) (描述) (描述)
|
||
```
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 容器水平 padding | `--spacing-5` (24px) |
|
||
| 指示圆 → 标题间距 | `--spacing-2` (8px) |
|
||
| 标题 → 描述间距 | `--spacing-1` (4px) |
|
||
| 连接线 | `1px dashed`，完成段 `#F5222D`，未完成段 `#C1C1C1` |
|
||
| 文字对齐 | 标题、描述居中于指示圆下方 |
|
||
| 两种变体 | 仅标题 / 标题 + 描述 |
|
||
|
||
### 10.3 页面步骤条（横向 · 实心圆 + 自定义首项标题）
|
||
|
||
用于页面级向导（如「新建集群」）。完成态连接线改为**实线**，首步标题可显示具体名称。
|
||
|
||
```
|
||
(✓) ──── (●2) ┄┄┄ ( 3 ) ┄┄┄ ( 4 ) ┄┄┄ ( 5 )
|
||
新建集群 标题 标题 标题 标题
|
||
(描述文本) (描述文本) (描述文本) (描述文本) (描述文本)
|
||
```
|
||
|
||
| 维度 | 弹窗步骤条 | 页面步骤条 |
|
||
|------|-----------|-----------|
|
||
| 完成态圆形 | 描边圆 + 红色对勾 | 描边圆 + 红色对勾（同） |
|
||
| 完成段连接线 | `1px dashed #F5222D` | `1px solid #F5222D` |
|
||
| 第一项 | 通用「标题」占位 | 可显示具体名称（自定义文案） |
|
||
|
||
### 10.4 纵向步骤条
|
||
|
||
用于侧栏 / 详情页内的纵向流程指引。两种变体——「仅标题」与「标题 + 描述」。
|
||
|
||
```
|
||
仅标题: 标题 + 描述:
|
||
|
||
(✓) 新建集群 (✓) 新建集群
|
||
┊ 描述文本描述
|
||
(●2) 标题 ┊
|
||
┊ (●2) 标题
|
||
( 3 ) 标题 描述文本描述
|
||
┊ ┊
|
||
( 4 ) 标题 ( 3 ) 标题
|
||
描述文本描述
|
||
```
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 指示圆 → 标题水平间距 | `--spacing-2` (8px) |
|
||
| 节点垂直间距（仅标题） | `--spacing-5` (24px)，圆心到圆心 |
|
||
| 节点垂直间距（标题 + 描述） | `--spacing-6` (32px)，圆心到圆心 |
|
||
| 标题 → 描述间距 | `--spacing-1` (4px) |
|
||
| 连接线位置 | 上下指示圆正下方垂直，居中于圆心 |
|
||
| 连接线样式 | `1px dashed`，完成段 `#F5222D`，未完成段 `#C1C1C1` |
|
||
| 文字对齐 | 标题与描述左对齐 |
|
||
|
||
### 10.5 交互与动画
|
||
|
||
| 行为 | 动效 |
|
||
|------|------|
|
||
| 步骤切换（next） | 当前圆 `background: transparent → #F5222D`，`200ms ease-out`；上一步圆 `border-color: #C1C1C1 → #F5222D`，再 `200ms` 切换为对勾图标淡入 |
|
||
| 连接线进度 | 完成段 `width 0% → 100%`，`240ms ease-out` |
|
||
|
||
---
|
||
|
||
## 11. 页签与锚点
|
||
|
||
> 共用主色红指示当前位置：页签用于同层级内容切换，锚点用于长页面内章节跳转。
|
||
|
||
### 11.1 页签（Tabs）
|
||
|
||
#### 11.1.1 横向页签（下划线 · 横向）
|
||
|
||
| 状态 | 文字 | 下划线 |
|
||
|------|------|--------|
|
||
| 默认 | `#222222` (FS-004) | 无 |
|
||
| Hover | `#F5222D` (ZS-001-09) | 无 |
|
||
| 激活 | `#F5222D` (ZS-001-09) | `2px solid #F5222D`，宽度与文字齐 |
|
||
| 失效 | `#C1C1C1` (FS-004-06) | 无 |
|
||
|
||
- 字号 `14px Medium`，项间距 `--spacing-5` (24px)，下划线与文字底部间距 `--spacing-2` (8px)
|
||
- 容器底边叠一条 `1px solid #E8E8E8` (FS-004-04) 基线，激活高亮线压在其上
|
||
|
||
#### 11.1.2 纵向页签（下划线 · 纵向）
|
||
|
||
| 状态 | 文字 | 右侧指示线 |
|
||
|------|------|-----------|
|
||
| 默认 | `#222222` (FS-004) | 无 |
|
||
| Hover | `#F5222D` (ZS-001-09) | 无 |
|
||
| 激活 | `#F5222D` (ZS-001-09) | 右侧 `2px solid #F5222D`，高度与文字齐 |
|
||
| 失效 | `#C1C1C1` (FS-004-06) | 无 |
|
||
|
||
- 字号 `14px Medium`，项高度 `32px`，项间距 `--spacing-2` (8px)
|
||
- 容器右边叠一条 `1px solid #E8E8E8` 基线，激活指示线压在其上
|
||
|
||
### 11.2 锚点（Anchor）
|
||
|
||
用于长内容页的章节快速跳转，支持一 / 二级缩进。
|
||
|
||
```
|
||
│ 一级
|
||
│ 一级 (active)
|
||
│ 二级
|
||
│ 二级
|
||
│ 一级
|
||
│ 一级
|
||
```
|
||
|
||
| 属性 | 取值 |
|
||
|------|------|
|
||
| 左侧基线 | `1px solid #E8E8E8` (FS-004-04) 通栏 |
|
||
| 项高度 | `32px` |
|
||
| 一级项左 padding | `--spacing-3` (12px) |
|
||
| 二级项左 padding | `--spacing-5` (24px) |
|
||
| 字号 | `14px Regular` |
|
||
|
||
| 状态 | 一级文字 | 二级文字 | 左侧指示条 |
|
||
|------|----------|----------|-----------|
|
||
| 默认 | `#222222` (FS-004) | `#A6A6A6` (FS-004-07) | 无 |
|
||
| Hover | `#F5222D` (ZS-001-09) | `#F5222D` (ZS-001-09) | 无 |
|
||
| 激活 | `#F5222D` (ZS-001-09) | — | 左侧 `2px solid #F5222D`，覆盖容器基线 |
|
||
|
||
- 二级项不单独支持激活态：选中二级时其父级一级显示激活态，指示条按父级位置渲染
|
||
|
||
---
|
||
|
||
|
||
---
|
||
|
||
> 返回 [规范目录](README.md)
|