55 lines
1.7 KiB
Markdown
55 lines
1.7 KiB
Markdown
|
# Dashboard颜色修改报告
|
|||
|
|
|
|||
|
|
## 修改概述
|
|||
|
|
本次修改将数据大屏Dashboard组件的颜色方案统一调整为基于Map3D组件的基础颜色，移除了所有渐变色，使用单一颜色方案。
|
|||
|
|
|
|||
|
|
## 颜色方案
|
|||
|
|
基于Map3D组件的以下颜色：
|
|||
|
|
|
|||
|
|
1. **主色调**: `#84acf0` - 地图顶部材质颜色
|
|||
|
|
2. **辅助色**: `#7af4ff` - 地图光源颜色
|
|||
|
|
3. **强调色**: `#00F6FF` - 养殖场标签颜色
|
|||
|
|
4. **深色**: `#123024` - 地图侧面材质颜色
|
|||
|
|
5. **背景色**: `#0c1426` - 深色背景
|
|||
|
|
|
|||
|
|
## 主要修改内容
|
|||
|
|
|
|||
|
|
### 1. 背景和容器
|
|||
|
|
- 移除了复杂的渐变背景，使用纯色 `#0c1426`
|
|||
|
|
- 简化背景装饰效果，只保留基础的径向渐变
|
|||
|
|
|
|||
|
|
### 2. 顶部标题栏
|
|||
|
|
- 标题颜色改为 `#84acf0`
|
|||
|
|
- 移除彩虹渐变文字效果
|
|||
|
|
- 边框和装饰线使用单色
|
|||
|
|
|
|||
|
|
### 3. 面板和卡片
|
|||
|
|
- 所有面板背景使用 `rgba(132, 172, 240, 0.05)`
|
|||
|
|
- 边框颜色统一为 `rgba(132, 172, 240, 0.3)`
|
|||
|
|
- 移除顶部装饰渐变线，使用单色
|
|||
|
|
|
|||
|
|
### 4. 数据展示
|
|||
|
|
- 统计数值颜色改为 `#84acf0`
|
|||
|
|
- 进度条背景使用 `rgba(18, 48, 36, 0.3)`
|
|||
|
|
- 进度条填充使用单色 `#84acf0`
|
|||
|
|
|
|||
|
|
### 5. 图表配置
|
|||
|
|
- 饼图使用四种基础颜色：`#84acf0`, `#7af4ff`, `#00F6FF`, `#123024`
|
|||
|
|
- 柱状图使用单色 `#84acf0`
|
|||
|
|
- 折线图使用 `#7af4ff` 或其他单色
|
|||
|
|
- 移除所有LinearGradient渐变效果
|
|||
|
|
|
|||
|
|
## 修改文件
|
|||
|
|
- `d:\1212\nxzhihui\website\src\components\Dashboard.vue`
|
|||
|
|
|
|||
|
|
## 验证方法
|
|||
|
|
1. 启动website项目: `cd website && npm run dev`
|
|||
|
|
2. 访问数据大屏页面
|
|||
|
|
3. 检查颜色是否与Map3D组件协调统一
|
|||
|
|
4. 确认没有渐变色残留
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
- 保持了原有的视觉层次和可读性
|
|||
|
|
- 所有交互效果和动画保持不变
|
|||
|
|
- 响应式布局保持不变
|
|||
|
|
- 只修改了颜色方案，未改变布局结构
|