581 lines
20 KiB
Markdown
581 lines
20 KiB
Markdown
# 深蓝色 UI 规范 · 00 基础（色彩 / 字体 / 阴影 / 圆角 / 间距 / 分割线）
|
||
|
||
> 本文件是《深蓝色 UI 规范》拆分后的**基础篇（§1–§7）**，是全站设计令牌的唯一来源。
|
||
> 其余分册见同目录 `README.md`；可直接 import 的变量见 `tokens.css`。
|
||
> 跨章节 `§N` 编号全局唯一，所属文件见 README 的「§ 索引」。
|
||
|
||
**本篇目录（§1–§7）**：`1` 色彩 · `2` 字体 · `3` 阴影 · `4` 圆角 · `5` 按钮 · `6` 分割线 · `7` 间距
|
||
|
||
---
|
||
|
||
## 1. 色彩
|
||
|
||
### 1.1 标准色
|
||
|
||
色彩体系由四个色系构成，每个色系分主色与辅色两组，每组按明度从浅到深编号（01 最浅，数字越大越深）。
|
||
|
||
---
|
||
|
||
#### 1.1.1 色系总览
|
||
|
||
| 色系 | 用途定位 | 代码前缀 |
|
||
|------|----------|----------|
|
||
| 渐红系 | 警示、错误、强调操作 | ZS-001 |
|
||
| 渐蓝系 | 信息、链接、次级操作 | ZS-002 |
|
||
| 渐青系 | 成功、在线状态、数据高亮 | ZS-003 |
|
||
| 深蓝系 | 页面背景、容器、导航底色 | ZS-004 |
|
||
|
||
---
|
||
|
||
#### 1.1.2 渐红系（ZS-001）
|
||
|
||
用于错误提示、危险操作、重要告警。
|
||
|
||
| 编号 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| ZS-001-01 | `#FFF1F0` | 极浅红，错误背景底色 |
|
||
| ZS-001-02 | `#FFCCC7` | 浅红，输入框错误边框 |
|
||
| ZS-001-03 | `#FFA39E` | — |
|
||
| ZS-001-04 | `#FF7875` | — |
|
||
| ZS-001-05 | `#FF4D4F` | 标准红，Tag / Badge |
|
||
| ZS-001-06 | `#F5222D` | 主色红，按钮 / 图标 |
|
||
| ZS-001-07 | `#CF1322` | 深红，Hover 状态 |
|
||
| ZS-001-08 | `#A8071A` | 深红，Active / Press |
|
||
| ZS-001-09 | `#820014` | 极深红 |
|
||
| ZS-001-10 | `#5C0011` | 最深红 |
|
||
|
||
---
|
||
|
||
#### 1.1.3 渐蓝系（ZS-002）
|
||
|
||
用于信息提示、链接、次级按钮。
|
||
|
||
| 编号 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| ZS-002-01 | `#E6F4FF` | 极浅蓝，信息背景底色 |
|
||
| ZS-002-02 | `#BAE0FF` | 浅蓝 |
|
||
| ZS-002-03 | `#91CAFF` | — |
|
||
| ZS-002-04 | `#69B1FF` | — |
|
||
| ZS-002-05 | `#4096FF` | 标准蓝，链接 / 信息 Tag |
|
||
| ZS-002-06 | `#1677FF` | 主色蓝，主操作按钮 |
|
||
| ZS-002-07 | `#0958D9` | 深蓝，Hover |
|
||
| ZS-002-08 | `#003EB3` | 深蓝，Active |
|
||
| ZS-002-09 | `#002C8C` | 极深蓝 |
|
||
| ZS-002-10 | `#001D6C` | 最深蓝 |
|
||
|
||
---
|
||
|
||
#### 1.1.4 渐青系（ZS-003）
|
||
|
||
用于成功状态、在线标识、数据图表高亮。
|
||
|
||
| 编号 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| ZS-003-01 | `#E6FFFB` | 极浅青，成功背景 |
|
||
| ZS-003-02 | `#B5F5EC` | 浅青 |
|
||
| ZS-003-03 | `#87E8DE` | — |
|
||
| ZS-003-04 | `#5CDBD3` | — |
|
||
| ZS-003-05 | `#36CFC9` | 标准青，成功 Tag |
|
||
| ZS-003-06 | `#13C2C2` | 主色青，在线点 / 图标 |
|
||
| ZS-003-07 | `#08979C` | 深青，Hover |
|
||
| ZS-003-08 | `#006D75` | 深青，Active |
|
||
| ZS-003-09 | `#00474F` | 极深青 |
|
||
| ZS-003-10 | `#002329` | 最深青 |
|
||
|
||
---
|
||
|
||
#### 1.1.5 深蓝系（ZS-004）
|
||
|
||
用于页面背景、导航栏、侧边栏、卡片容器。这是深蓝主题的核心色系。
|
||
|
||
| 编号 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| ZS-004-01 | `#E8EDF5` | 极浅，分割线 / 禁用底色 |
|
||
| ZS-004-02 | `#C5CFE0` | 浅，边框 |
|
||
| ZS-004-03 | `#9BADC8` | — |
|
||
| ZS-004-04 | `#6E88B0` | — |
|
||
| ZS-004-05 | `#4A6491` | 中深蓝，次级文字 |
|
||
| ZS-004-06 | `#2D4473` | 深蓝，卡片容器背景 |
|
||
| ZS-004-07 | `#1A2F5A` | 深蓝，侧边栏背景 |
|
||
| ZS-004-08 | `#122347` | 深蓝，导航栏背景 |
|
||
| ZS-004-09 | `#0C1836` | 极深蓝，页面背景 |
|
||
| ZS-004-10 | `#060E24` | 最深，全局底色 |
|
||
|
||
---
|
||
|
||
#### 1.1.6 功能色（主色 / 字体色 / 辅色 / 背景色）
|
||
|
||
从标准色系中提取，用于具体 UI 角色指定。
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 主色（Primary） | `#1677FF` | ZS-002-06 |
|
||
| 主色 Hover | `#0958D9` | ZS-002-07 |
|
||
| 主色 Active | `#003EB3` | ZS-002-08 |
|
||
| 正常字体色 | `#C5CFE0` | ZS-004-02 |
|
||
| 次级字体色 | `#6E88B0` | ZS-004-04 |
|
||
| 禁用字体色 | `#4A6491` | ZS-004-05 |
|
||
| 辅色（Accent） | `#13C2C2` | ZS-003-06 |
|
||
| 页面背景色 | `#0C1836` | ZS-004-09 |
|
||
| 容器背景色 | `#1A2F5A` | ZS-004-07 |
|
||
| 白色 | `#FFFFFF` | — |
|
||
|
||
---
|
||
|
||
#### 1.1.7 小面积装饰色
|
||
|
||
用于图标点缀、徽标、少量强调，不用于大面积背景。
|
||
|
||
| 色值 | 说明 |
|
||
|------|------|
|
||
| `#6388FF` | 紫蓝，图标装饰 |
|
||
| `#F5222D` | 红色，危险徽标 |
|
||
| `#12306C` | 深蓝，品牌点缀 |
|
||
| `#478880` | 青绿，辅助点缀 |
|
||
| `#950404` | 深红，重要告警点 |
|
||
|
||
---
|
||
|
||
#### 1.1.8 图表配色
|
||
|
||
**通用图表色序**（面积较大，如柱状图、折线图、饼图）：
|
||
|
||
| 序号 | 色值 |
|
||
|------|------|
|
||
| 1 | `#1677FF` |
|
||
| 2 | `#13C2C2` |
|
||
| 3 | `#4096FF` |
|
||
| 4 | `#36CFC9` |
|
||
| 5 | `#69B1FF` |
|
||
| 6 | `#5CDBD3` |
|
||
| 7 | `#91CAFF` |
|
||
| 8 | `#87E8DE` |
|
||
|
||
**小面积图表色序**（面积较小，如散点、小徽章、迷你图）：
|
||
|
||
| 序号 | 色值 |
|
||
|------|------|
|
||
| 1 | `#4096FF` |
|
||
| 2 | `#36CFC9` |
|
||
| 3 | `#FF4D4F` |
|
||
| 4 | `#FFA39E` |
|
||
| 5 | `#6388FF` |
|
||
| 6 | `#478880` |
|
||
|
||
---
|
||
|
||
#### 1.1.9 功能语义色（Functional / Status）
|
||
|
||
承载「成功 / 警告 / 错误 / 信息 / 处理中」语义。其中**错误红、信息蓝、处理中青**直接复用标准色；**成功绿、警告橙**为标准色系之外的补充色（深色背景下 ZS-003 青偏冷、且无现成橙），在此正式收录。全站语义场景一律引用本表，不再各处自定义。
|
||
|
||
| 语义 | 色值 | 来源 | 典型用途 |
|
||
|------|------|------|----------|
|
||
| 成功 / 已完成 | `#52C41A` | 补充色（绿） | 成功提示、完成状态、通过校验 |
|
||
| 警告 / 进行中 | `#FAAD14` | 补充色（橙） | 警告提示、进行中、需注意 |
|
||
| 错误 / 失败 | `#F5222D` | ZS-001-06 | 错误提示、删除、失败状态 |
|
||
| 信息 / 默认 | `#1677FF` | ZS-002-06 | 信息提示、主操作、链接 |
|
||
| 处理中 / 等待 | `#13C2C2` | ZS-003-06 | 处理中、排队、等待反馈 |
|
||
|
||
> 浅底变体（Message / Alert / Tag 底色）：前景色取 16% 透明度，如成功底 `rgba(82,196,26,0.16)`、警告底 `rgba(250,173,20,0.16)`。
|
||
> CSS Token 见 `tokens.css` 的 `--func-success / --func-warning / --func-error / --func-info / --func-processing`。
|
||
|
||
---
|
||
|
||
## 2. 字体
|
||
|
||
### 2.1 全局样式 - 字体
|
||
|
||
---
|
||
|
||
#### 2.1.1 大屏页面字体规范
|
||
|
||
##### 中文字体：Noto Sans S Chinese
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 24px Bold | 一级标题 |
|
||
| 24px Medium | 次要一级标题 |
|
||
| 22px Medium | 二级标题 |
|
||
| 22px Regular | 正文 |
|
||
| 20px Regular | 排版空间有限的正文 |
|
||
|
||
##### 数字字体：D-DIN
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 32px Bold | 重要数据展示 |
|
||
| 32px Regular | 普通数据展示 |
|
||
| 26px Bold | 常规数据展示 |
|
||
| 26px Regular | 常规数据展示 |
|
||
|
||
##### 特殊数字：DS-Digital
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 50px Bold | 大屏主数据展示 |
|
||
|
||
##### 表格字体：Arial
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 20px Regular | 表格横纵轴数字 |
|
||
|
||
---
|
||
|
||
#### 2.1.2 后台系统字体规范
|
||
|
||
##### 中文字体：Noto Sans S Chinese
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 18px Bold | 导航、一级标题 |
|
||
| 18px Medium | 次要一级标题 |
|
||
| 16px Bold | 二级标题 |
|
||
| 16px Medium | 次要二级标题 |
|
||
| 16px Regular | 正文、按钮内部文字等 |
|
||
| 16px Light | 次要正文 |
|
||
|
||
##### 数字字体：D-DIN
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 26px Bold | 重要数据展示 |
|
||
| 26px Regular | 普通数据展示 |
|
||
| 24px Bold | 常规数据展示（小） |
|
||
| 24px Regular | 常规数据展示（小） |
|
||
|
||
##### LOGO 字体：DOUYUFont
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 20px 文字样式 | 页面顶部系统名称 |
|
||
|
||
##### 表格数字：Arial
|
||
|
||
| 样式 | 使用场景 |
|
||
|------|----------|
|
||
| 16px Regular | 表格横纵轴数字 |
|
||
| 14px Regular | 表格横轴数字（空间有限） |
|
||
|
||
---
|
||
|
||
## 3. 阴影
|
||
|
||
### 3.1 容器与卡片配色
|
||
|
||
阴影组通过深浅层级叠加形成空间感：外层容器最深，内层卡片次之，边框与高亮文字使用主色或字体色。
|
||
|
||
#### 3.1.1 外层容器
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 页面 / 最外层背景 | `#060E24` | ZS-004-10 |
|
||
| 分栏容器背景 | `#0C1836` | ZS-004-09 |
|
||
|
||
#### 3.1.2 卡片（标题 + 操作）
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 卡片背景 | `#122347` | ZS-004-08 |
|
||
| 卡片边框 | `#1A2F5A` | ZS-004-07 |
|
||
| 卡片阴影（外发光） | `rgba(22, 119, 255, 0.12)` | 基于 ZS-002-06 主色蓝 12% 透明度 |
|
||
| 标题文字（16px Bold） | `#C5CFE0` | ZS-004-02（正常字体色） |
|
||
| 操作按钮文字 | `#4096FF` | ZS-002-05（标准蓝，链接） |
|
||
| 次级操作图标（✏️ / ⋯） | `#6E88B0` | ZS-004-04（次级字体色） |
|
||
|
||
#### 3.1.3 卡片新增（占位卡片）
|
||
|
||
虚线描边的"新增入口"卡片，用于引导用户添加内容。
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 卡片背景 | `#0C1836` | ZS-004-09（与外层同色，营造凹陷感） |
|
||
| 虚线边框 | `#4096FF` | ZS-002-05 |
|
||
| 加号图标 | `#4096FF` | ZS-002-05 |
|
||
|
||
#### 3.1.4 阴影投影规则
|
||
|
||
| 层级 | 阴影值 | 使用场景 |
|
||
|------|--------|----------|
|
||
| 一级阴影（卡片悬浮） | `0 2px 8px rgba(22, 119, 255, 0.12)` | 普通卡片 |
|
||
| 二级阴影（hover / 强调） | `0 4px 16px rgba(22, 119, 255, 0.24)` | 卡片 hover、弹出层 |
|
||
| 三级阴影（弹窗 / Modal） | `0 8px 32px rgba(6, 14, 36, 0.6)` | Dialog、Drawer |
|
||
|
||
---
|
||
|
||
## 4. 圆角
|
||
|
||
### 4.1 圆角统一规范
|
||
|
||
| 元素 | 圆角值 | 说明 |
|
||
|------|--------|------|
|
||
| 按钮 | `2px` | 所有按钮（主按钮 / 次按钮 / 文本按钮）统一使用 |
|
||
| 卡片 | `4px` | 内容卡片、标题+操作卡片、卡片新增占位 |
|
||
| 页面分栏框 | `4px` | 外层容器、分栏区域 |
|
||
| 输入框 / 选择器 | `2px` | 与按钮一致，保持表单内对齐 |
|
||
| Tag / Badge | `2px` | 与按钮一致 |
|
||
| Modal / Drawer | `4px` | 与卡片一致 |
|
||
|
||
### 4.2 按钮配色（圆角 2px）
|
||
|
||
#### 4.2.1 主按钮（Primary）
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 背景 | `#1677FF` | ZS-002-06 |
|
||
| 文字 | `#FFFFFF` | — |
|
||
| Hover 背景 | `#0958D9` | ZS-002-07 |
|
||
| Active 背景 | `#003EB3` | ZS-002-08 |
|
||
| 禁用背景 | `#4A6491` | ZS-004-05 |
|
||
| 禁用文字 | `#6E88B0` | ZS-004-04 |
|
||
|
||
#### 4.2.2 次按钮（Outline / Default）
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 背景 | `transparent` | — |
|
||
| 边框 | `#6E88B0` | ZS-004-04 |
|
||
| 文字 | `#C5CFE0` | ZS-004-02 |
|
||
| Hover 边框 | `#4096FF` | ZS-002-05 |
|
||
| Hover 文字 | `#4096FF` | ZS-002-05 |
|
||
| Active 边框 | `#1677FF` | ZS-002-06 |
|
||
|
||
### 4.3 卡片与分栏（圆角 4px）
|
||
|
||
| 角色 | 色值 | 来源 |
|
||
|------|------|------|
|
||
| 卡片背景 | `#122347` | ZS-004-08 |
|
||
| 卡片边框 | `#1A2F5A` | ZS-004-07 |
|
||
| 分栏框背景 | `#0C1836` | ZS-004-09 |
|
||
| 分栏框边框 | `#1A2F5A` | ZS-004-07 |
|
||
|
||
---
|
||
|
||
## 5. 按钮
|
||
|
||
> 全部圆角 `2px`，文字字号 14px（小尺寸）/ 14px（正常尺寸），字体 Noto Sans S Chinese Regular。
|
||
|
||
### 5.1 按钮尺寸
|
||
|
||
| 规格 | 高度 | 内边距 | 使用场景 |
|
||
|------|------|--------|----------|
|
||
| 小 | `28px` | `0 10px` | 空间小的板块内部，如表格中、卡片标题等 |
|
||
| 正常 | `32px` | `0 14px` | 默认尺寸，所有常用按钮 |
|
||
|
||
### 5.2 按钮类型与配色
|
||
|
||
#### 5.2.1 主按钮（Primary）
|
||
|
||
> 一个操作区域只能有一个主按钮。
|
||
|
||
| 状态 | 背景 | 边框 | 文字 |
|
||
|------|------|------|------|
|
||
| 默认 | `#1677FF` (ZS-002-06) | — | `#FFFFFF` |
|
||
| Hover | `#0958D9` (ZS-002-07) | — | `#FFFFFF` |
|
||
| Active | `#003EB3` (ZS-002-08) | — | `#FFFFFF` |
|
||
| 失效 | `rgba(22, 119, 255, 0.35)` | — | `#6E88B0` (ZS-004-04) |
|
||
|
||
#### 5.2.2 默认按钮（Default / Outline）
|
||
|
||
用于"取消 / 返回"等次要操作，与主按钮成对出现时主按钮在右。
|
||
|
||
| 状态 | 背景 | 边框 | 文字 |
|
||
|------|------|------|------|
|
||
| 默认 | `transparent` | `#6E88B0` (ZS-004-04) | `#C5CFE0` (ZS-004-02) |
|
||
| Hover | `rgba(22, 119, 255, 0.08)` | `#4096FF` (ZS-002-05) | `#4096FF` (ZS-002-05) |
|
||
| Active | `rgba(22, 119, 255, 0.16)` | `#1677FF` (ZS-002-06) | `#1677FF` (ZS-002-06) |
|
||
| 失效 | `transparent` | `#4A6491` (ZS-004-05) | `#4A6491` (ZS-004-05) |
|
||
|
||
#### 5.2.3 文本按钮（Text）
|
||
|
||
用于表格操作、文件下载等。无背景与边框，靠文字色识别。
|
||
|
||
| 状态 | 文字 | 装饰 |
|
||
|------|------|------|
|
||
| 默认 | `#4096FF` (ZS-002-05) | 无下划线 |
|
||
| Hover | `#1677FF` (ZS-002-06) | 显示下划线（与文字同色） |
|
||
| Active | `#0958D9` (ZS-002-07) | 下划线 |
|
||
| 失效 | `#4A6491` (ZS-004-05) | 无装饰 |
|
||
|
||
#### 5.2.4 图标按钮（Icon-only）
|
||
|
||
用于增强辨识度或节省空间。仅图标，无文字。
|
||
|
||
| 变体 | 背景 | 图标颜色 |
|
||
|------|------|----------|
|
||
| 主色（常用） | `#1677FF` (ZS-002-06) | `#FFFFFF` |
|
||
| 主色 Hover | `#0958D9` (ZS-002-07) | `#FFFFFF` |
|
||
| 危险（删除等） | `#F5222D` (ZS-001-06) | `#FFFFFF` |
|
||
| 危险 Hover | `#CF1322` (ZS-001-07) | `#FFFFFF` |
|
||
| 透明（仅图标） | `transparent` | `#6E88B0` (ZS-004-04) → hover `#4096FF` (ZS-002-05) |
|
||
|
||
### 5.3 按钮组合
|
||
|
||
#### 5.3.1 文字 + 下拉按钮（含 ▾）
|
||
|
||
两种填充：
|
||
|
||
| 形态 | 配色规则 |
|
||
|------|----------|
|
||
| 默认（Outline） | 沿用 §5.2.2 默认按钮，箭头 ▾ 与文字同色 `#C5CFE0` |
|
||
| 主色（Filled） | 沿用 §5.2.1 主按钮，箭头 ▾ 同步白色 `#FFFFFF` |
|
||
|
||
#### 5.3.2 图标 + 文字按钮（如 `+ 正常`）
|
||
|
||
| 形态 | 配色规则 |
|
||
|------|----------|
|
||
| 默认（Outline） | 沿用 §5.2.2，左侧图标颜色与文字一致 `#C5CFE0` |
|
||
| 主色（Filled） | 沿用 §5.2.1，左侧图标与文字一致 `#FFFFFF` |
|
||
|
||
#### 5.3.3 文本按钮 + 图标（"更多 »"、"展开 ⌄"、"下一页 »"、"« 上一页"）
|
||
|
||
| 角色 | 色值 |
|
||
|------|------|
|
||
| 文字 + 图标（默认） | `#4096FF` (ZS-002-05) |
|
||
| 文字 + 图标（Hover） | `#1677FF` (ZS-002-06) |
|
||
| 失效 | `#4A6491` (ZS-004-05) |
|
||
|
||
> 图标可在文字前或后；多个文本按钮排成一行时，间距 `16px`，无分隔符。
|
||
|
||
#### 5.3.4 主按钮 + 默认按钮组合（如"确定 / 取消 / 返回"）
|
||
|
||
- **排列顺序**：默认按钮在左，主按钮在右（最右侧为主操作）
|
||
- **按钮间距**：`8px`
|
||
- **示例**：`[ 返回 ] [ 取消 ] [ 确定 ]`
|
||
- **配色**：主按钮沿用 §5.2.1，其余沿用 §5.2.2
|
||
|
||
### 5.4 其他按钮
|
||
|
||
#### 5.4.1 悬浮状态（Floating）
|
||
|
||
用于 Banner / 登录 / 视觉冲击强等展示场景。配色与主按钮一致，叠加阴影抬升。
|
||
|
||
| 状态 | 阴影 |
|
||
|------|------|
|
||
| 默认 | `0 2px 8px rgba(22, 119, 255, 0.12)`（§3.1.4 一级阴影） |
|
||
| Hover | `0 4px 16px rgba(22, 119, 255, 0.24)`（§3.1.4 二级阴影） |
|
||
| Active | 阴影消失，按下感 |
|
||
|
||
#### 5.4.2 加载中（Loading）
|
||
|
||
用于异步操作等待反馈。点击瞬间将按钮锁定，文字前显示旋转图标。
|
||
|
||
| 角色 | 色值 |
|
||
|------|------|
|
||
| 背景 | `#1677FF` (ZS-002-06) |
|
||
| 文字 | `#FFFFFF` |
|
||
| 加载图标 | `#FFFFFF`，旋转动画 `1.2s linear infinite` |
|
||
| 不可点击 | 鼠标 `cursor: not-allowed` |
|
||
|
||
> 与失效态的区别：失效是"不可操作"，加载是"操作进行中"——保留品牌主色，只是不可再次触发。
|
||
|
||
---
|
||
|
||
## 6. 分割线
|
||
|
||
> 统一线宽 `1px`，颜色全部从 ZS-004 深蓝系取色，与深色背景保持低对比度但仍可识别。
|
||
|
||
### 6.1 水平分割线
|
||
|
||
水平分割线常用来对不同元素内容进行分割。
|
||
|
||
| 类型 | 色值 | 来源 | 样式 | 使用场景 |
|
||
|------|------|------|------|----------|
|
||
| 实线（默认） | `#4A6491` | ZS-004-05 | `border-top: 1px solid` | 模块间、列表项间分割 |
|
||
| 实线（强调） | `#6E88B0` | ZS-004-04 | `border-top: 1px solid` | 主区块标题下方、卡片头部分割 |
|
||
| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-top: 1px solid` | 卡片内部、密集列表分隔 |
|
||
| 虚线 | `#4A6491` | ZS-004-05 | `border-top: 1px dashed` | 次级 / 层级内分割，提示"非主结构" |
|
||
| 主色实线（高亮） | `#1677FF` | ZS-002-06 | `border-top: 1px solid` | 强调分隔，少量使用（如当前激活区块底边） |
|
||
|
||
### 6.2 垂直分割线
|
||
|
||
垂直分割线常用来做行内分割（如导航项之间、状态指示之间、表格列头之间）。
|
||
|
||
| 类型 | 色值 | 来源 | 样式 | 使用场景 |
|
||
|------|------|------|------|----------|
|
||
| 实线（默认） | `#4A6491` | ZS-004-05 | `border-left: 1px solid` | 行内 inline 元素分割（面包屑、操作按钮组） |
|
||
| 实线（弱化） | `#2D4473` | ZS-004-06 | `border-left: 1px solid` | 表格列分割、紧凑布局 |
|
||
| 虚线 | `#4A6491` | ZS-004-05 | `border-left: 1px dashed` | 多列对齐辅助、辅助参考线 |
|
||
|
||
### 6.3 规格与间距
|
||
|
||
| 规则 | 取值 |
|
||
|------|------|
|
||
| 线宽 | `1px` |
|
||
| 水平分割线与上下元素间距 | `≥ 8px`（紧凑布局可用 `4px`） |
|
||
| 垂直分割线与左右元素间距 | `≥ 8px`（行内紧凑 `4px`） |
|
||
| 垂直分割线高度 | 与文字行高一致，约 `12–14px`（也可全高跟随容器） |
|
||
| 透明度 | 必要时叠 `opacity: 0.6` 实现"更弱"层级 |
|
||
|
||
### 6.4 CSS 参考
|
||
|
||
```css
|
||
/* 默认水平分割线 */
|
||
.divider-h { border-top: 1px solid #4A6491; }
|
||
.divider-h-strong { border-top: 1px solid #6E88B0; }
|
||
.divider-h-weak { border-top: 1px solid #2D4473; }
|
||
.divider-h-dashed { border-top: 1px dashed #4A6491; }
|
||
.divider-h-accent { border-top: 1px solid #1677FF; }
|
||
|
||
/* 垂直分割线 */
|
||
.divider-v { border-left: 1px solid #4A6491; height: 14px; display: inline-block; vertical-align: middle; }
|
||
.divider-v-weak { border-left: 1px solid #2D4473; height: 14px; display: inline-block; vertical-align: middle; }
|
||
.divider-v-dashed { border-left: 1px dashed #4A6491; height: 14px; display: inline-block; vertical-align: middle; }
|
||
```
|
||
|
||
---
|
||
|
||
## 7. 间距
|
||
|
||
> 全站以 `8px (0.5rem)` 为对照基准单位，划分"密 / 疏"两个层次。所有间距取值均来自下列阶梯，禁止使用非阶梯值（如 5px、13px）。
|
||
|
||
### 7.1 间距阶梯
|
||
|
||
| 阶 | px | rem | 分组 | 典型场景 |
|
||
|----|------|--------|------|----------|
|
||
| 1 | `4px` | `0.25rem` | 密 | 图标与文字间距、Tag 内边距、紧凑徽标 |
|
||
| 2 | `8px` | `0.5rem` | 密 | 行内元素相邻、按钮组间距、表单 label 与控件 |
|
||
| 3 | `12px` | `0.75rem` | 密 | 表单项垂直间距、列表项内边距 |
|
||
| 4 | `16px` | `1rem` | 密 | 卡片内容内边距、模块内分隔 |
|
||
| 5 | `24px` | `1.5rem` | 疏 | 模块之间、Section 内边距 |
|
||
| 6 | `32px` | `2rem` | 疏 | 卡片之间、表单组之间 |
|
||
| 7 | `40px` | `2.5rem` | 疏 | 主区块之间、页面 Header / Footer 内边距 |
|
||
| 8 | `56px` | `3.5rem` | 疏 | 页面段落级隔断、Banner 区域 |
|
||
|
||
> "密"对应紧凑信息密度（表格、表单、卡片内部）；"疏"对应视觉呼吸（模块之间、页面整体留白）。**16px 是"密"的上限，24px 是"疏"的下限**，两者之间不应再插入自定义值。
|
||
|
||
### 7.2 使用原则
|
||
|
||
- **同层级一致**：同一布局层级内的间距必须使用同一阶值；多种取值会破坏节奏。
|
||
- **就近取阶**：相邻区块的间距尽量从相邻阶梯取值（如 `16px → 24px`），跨越过多阶（如 `8px → 56px`）会让视觉断裂。
|
||
- **密疏不混用**：一个组件内部全部用"密"，外部用"疏"，避免内/外间距颠倒。
|
||
- **优先 8 的倍数**：除最小阶 `4px` 外，所有阶皆为 8 的倍数，方便 4/8 网格对齐。
|
||
- **响应式按比例衰减**：移动端可整体降一阶（如 `24px → 16px`），但仍在阶梯内。
|
||
|
||
### 7.3 CSS Token 建议
|
||
|
||
```css
|
||
:root {
|
||
--spacing-1: 4px; /* 0.25rem */
|
||
--spacing-2: 8px; /* 0.5rem */
|
||
--spacing-3: 12px; /* 0.75rem */
|
||
--spacing-4: 16px; /* 1rem */
|
||
--spacing-5: 24px; /* 1.5rem */
|
||
--spacing-6: 32px; /* 2rem */
|
||
--spacing-7: 40px; /* 2.5rem */
|
||
--spacing-8: 56px; /* 3.5rem */
|
||
}
|
||
```
|
||
|
||
### 7.4 与已有规范的对齐
|
||
|
||
| 已有规则 | 对应阶 |
|
||
|----------|--------|
|
||
| §4.x 卡片圆角内边距 | `--spacing-4` (16px) |
|
||
| §5.3.4 主+默认按钮组合间距 `8px` | `--spacing-2` |
|
||
| §5.3.3 文本按钮间距 `16px` | `--spacing-4` |
|
||
| §6.3 分割线与上下元素间距 `≥ 8px` | `--spacing-2` 起 |
|
||
|
||
---
|
||
|