76 lines
1.3 KiB
Markdown
76 lines
1.3 KiB
Markdown
# UI 配色规范
|
||
|
||
## 基本原则
|
||
|
||
- **使用纯色背景**，不使用渐变色（`linear-gradient`）
|
||
- **科技风配色**，偏好深色系
|
||
- **避免灰色系**，不使用沉闷的灰色调
|
||
|
||
## 主色调
|
||
|
||
### 科技蓝主题
|
||
|
||
```css
|
||
/* 主色 */
|
||
--primary-color: #1a237e;
|
||
|
||
/* 用于 */
|
||
- 登录页背景
|
||
- 侧边栏背景
|
||
- 按钮背景
|
||
- 输入框聚焦态边框
|
||
```
|
||
|
||
## 配色方案
|
||
|
||
### 登录页面
|
||
|
||
```css
|
||
/* 背景 */
|
||
background: #1a237e;
|
||
|
||
/* 登录按钮 */
|
||
background: #1a237e;
|
||
|
||
/* 输入框聚焦 */
|
||
border-color: #1a237e;
|
||
box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.1);
|
||
```
|
||
|
||
### 布局页面
|
||
|
||
```css
|
||
/* 侧边栏 */
|
||
background: #1a237e;
|
||
|
||
/* 菜单文字 */
|
||
color: rgba(255, 255, 255, 0.7);
|
||
|
||
/* 菜单激活项 */
|
||
color: #fff;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
|
||
/* 菜单悬停 */
|
||
background: rgba(255, 255, 255, 0.1);
|
||
|
||
/* Logo 区域 */
|
||
background: rgba(0, 0, 0, 0.2);
|
||
```
|
||
|
||
## 禁止使用的配色
|
||
|
||
- ❌ 灰色系：`#545c64`、`#304156`、`#263445` 等
|
||
- ❌ 渐变色：`linear-gradient(...)`
|
||
- ❌ 默认 Element UI 蓝色：`#409EFF`
|
||
|
||
## 品牌名称
|
||
|
||
- **正式名称**：Kenaito配置中心
|
||
- **使用场景**：登录页标题、侧边栏 Logo、页面标题、欢迎语等
|
||
- **不要简写**：不使用"配置中心"
|
||
|
||
## 参考文件
|
||
|
||
- 登录页：`web/src/views/Login.vue`
|
||
- 布局页：`web/src/views/Layout.vue`
|