73 lines
2.6 KiB
Markdown
73 lines
2.6 KiB
Markdown
# 后台界面视觉统一调整方案
|
||
|
||
## 一、设计差异分析
|
||
|
||
### 前台设计风格
|
||
- **颜色方案**：深色背景 `#050505`，金色强调色 `#d4b383`，半透明效果
|
||
- **排版样式**：Inter/Noto Sans SC 字体，金色标题，白色文本
|
||
- **组件风格**：玻璃效果、卡片设计、模糊背景
|
||
- **交互模式**：平滑过渡动画，精细悬停效果
|
||
|
||
### 后台设计风格
|
||
- **颜色方案**：浅色背景 `#f5f7fa`，蓝色强调色 `#3b82f6`，实色背景
|
||
- **排版样式**：默认字体，普通标题，深色文本
|
||
- **组件风格**：传统企业后台设计，没有玻璃效果
|
||
- **交互模式**：简单过渡，基础悬停效果
|
||
|
||
## 二、调整方案
|
||
|
||
### 1. 颜色方案统一
|
||
- **背景色**：将后台背景改为 `#050505`，与前台保持一致
|
||
- **强调色**：替换蓝色 `#3b82f6` 为前台金色 `#d4b383`
|
||
- **文本色**：改为白色或浅灰色，与前台保持一致
|
||
- **边框色**：使用半透明边框，与前台卡片风格统一
|
||
|
||
### 2. 组件风格统一
|
||
- **玻璃效果**：为侧边栏、头部添加 `glass-nav` 效果
|
||
- **卡片设计**：后台卡片改为 `art-card` 风格，半透明背景
|
||
- **按钮样式**：统一使用前台的按钮样式，圆角、悬停效果
|
||
- **图标风格**：使用 Lucide Icons，统一图标颜色和大小
|
||
|
||
### 3. 排版样式统一
|
||
- **字体**：使用与前台相同的 Inter/Noto Sans SC 字体
|
||
- **标题样式**：统一标题样式，如大写、金色等
|
||
- **文本大小**：统一文本大小和行高
|
||
|
||
### 4. 交互模式统一
|
||
- **过渡动画**：添加平滑过渡动画
|
||
- **悬停效果**：统一悬停效果，使用金色强调
|
||
- **点击反馈**：添加精细的点击反馈
|
||
|
||
## 三、具体调整点
|
||
|
||
### 1. AdminLayout.vue
|
||
- 修改背景色为 `#050505`
|
||
- 侧边栏添加 `glass-nav` 效果
|
||
- 头部添加 `glass-nav` 效果
|
||
- 按钮和链接使用金色 `#d4b383` 作为强调色
|
||
- 添加平滑过渡动画
|
||
|
||
### 2. 表单组件
|
||
- 统一表单样式，使用玻璃效果
|
||
- 输入框样式与前台保持一致
|
||
- 按钮样式与前台保持一致
|
||
|
||
### 3. 表格组件
|
||
- 表格背景改为半透明
|
||
- 表头样式与前台保持一致
|
||
- 行悬停效果与前台保持一致
|
||
|
||
### 4. 其他组件
|
||
- 模态框样式与前台保持一致
|
||
- 通知样式与前台保持一致
|
||
- 加载状态样式与前台保持一致
|
||
|
||
## 四、预期效果
|
||
|
||
- 后台界面与前台界面视觉风格统一
|
||
- 消除当前存在的视觉突兀感
|
||
- 提升整体产品的设计统一性
|
||
- 增强用户体验连贯性
|
||
- 保持后台功能的可用性和专业性
|
||
|
||
通过以上调整，后台界面将与前台界面保持视觉统一，同时保持后台功能的专业性和可用性。 |