配色修改说明.md 6.8 KB
山峡化工智慧校园系统 - 配色体系修改说明
修改时间
2025年10月22日
修改目标
将整个 Web 系统的配色体系从原来的蓝色主题修改为绿色主题，以 Logo 中的绿色 #1ca851 (RGB: 28, 168, 81) 作为主色调。
主色调定义
主绿色
- 色值:
#1ca851 - RGB:
28, 168, 81 - 用途: 主色调，用于按钮、链接、菜单高亮、表单组件等
辅助色
- 警告色:
#f5b531(Logo 中的黄色) - 成功色:
#1ca851(与主色调一致) - 信息色:
#1ca851(与主色调一致) - 次要色:
#49be78(浅绿色，RGB: 73, 190, 120)
修改文件清单
1. /crm/web/src/assets/styles/art-variables.scss
核心配色文件 - Art Design Pro 变量系统
浅色主题 (:root)
--art-primary:28, 168, 81(主绿色)--art-secondary:73, 190, 120(次要绿色)--art-success:28, 168, 81--art-info:28, 168, 81--art-warning:245, 181, 49(Logo黄色)--art-bg-primary:230, 248, 237(浅绿背景)--art-bg-success:230, 248, 237--art-bg-info:230, 248, 237--art-bg-warning:254, 248, 235(浅黄背景)
暗色主题 (html.dark)
--art-primary:28, 168, 81--art-secondary:73, 190, 120--art-success:28, 168, 81--art-info:28, 168, 81--art-warning:245, 181, 49--art-bg-primary:20, 50, 35(暗绿背景)--art-bg-success:20, 50, 35--art-bg-info:20, 50, 35
SCSS 变量
$green: #1ca851;
$panGreen: #1ca851;
$yellow: #f5b531;
2. /crm/web/src/assets/styles/element-ui.scss
Element Plus 主题配置
--el-color-primary: #1ca851;
--el-color-primary-light-3: #4cc072;
--el-color-primary-light-5: #6ed091;
--el-color-primary-light-7: #90dfb0;
--el-color-primary-light-8: #a8e7c2;
--el-color-primary-light-9: #c0efd4;
--el-color-primary-dark-2: #178641;
--el-color-primary-dark-3: #146f37;
--el-color-primary-dark-4: #11582c;
--el-color-primary-dark-5: #0e4222;
--el-color-primary-dark-6: #0a2b17;
3. /crm/web/src/assets/styles/variables.module.scss
全局 SCSS 变量
$green: #1ca851;
$panGreen: #1ca851;
$yellow: #f5b531;
4. /crm/web/src/assets/styles/index.scss
全局样式
- 渐变背景:
linear-gradient(90deg, rgba(28, 168, 81, 1) 0%, ... rgba(22, 140, 65, 1) 100%) - 链接颜色:
#1ca851 - 链接悬停:
rgb(28, 168, 81)
5. /crm/web/src/assets/styles/ruoyi.scss
若依框架样式
- 表单标题:
color: #1ca851; - 下拉链接:
color: #1ca851;
6. /crm/web/uno.config.ts
UnoCSS 配置
panel-title快捷类:text-[#1ca851]
7. /crm/web/src/layout/components/Navbar.vue
顶部导航栏样式
- 背景色:
#ffffff(白色) - 底部边框:
3px solid #1ca851(绿色强调线) - 阴影:
0 2px 8px rgba(28, 168, 81, 0.12)(绿色阴影) - Logo容器: 无背景色（简洁设计）
- 右侧图标颜色:
#333333(深灰色) - 悬停效果:
rgba(28, 168, 81, 0.08)(浅绿背景) - 头像边框:
2px solid #1ca851(绿色边框)
8. /crm/web/src/layout/components/TopMenu.vue
顶部菜单样式
- 背景色:
#ffffff(白色) - 文字颜色:
#333333(深灰色) - 激活文字颜色:
#1ca851(绿色) - 激活状态底边框:
#1ca851(绿色) - 悬停背景:
rgba(28, 168, 81, 0.08)(浅绿色)
9. /crm/web/src/layout/components/SecondaryMenu.vue
左侧二级/三级菜单样式 ⭐ 增强版 + 即时响应修复
修复问题： 解决了"第一次点击无效果，第二次点击才生效"的问题
修复方案：
- 修改
active-text-color从蓝色改为白色#ffffff - 添加
class="secondary-menu"提升样式优先级 - 添加
:key="activeMenu"强制重新渲染 - 所有激活状态样式添加
!important确保覆盖内联样式 - 为
span元素单独设置颜色确保文字立即变色
普通状态：
- 边距:
margin: 2px 8px(留出边距空间) - 圆角:
border-radius: 4px(圆角设计) - 悬停背景:
rgba(28, 168, 81, 0.08)(浅绿色) - 悬停文字/图标:
#1ca851(绿色) - 悬停位移:
transform: translateX(2px)(轻微向右移动)
激活状态（选中项）：
- 背景:
linear-gradient(90deg, #1ca851 0%, #49be78 100%) !important(绿色渐变) - 文字:
#ffffff !important(白色，强制覆盖) - 字重:
font-weight: 600 !important(加粗，强制覆盖) - 阴影:
box-shadow: 0 2px 8px rgba(28, 168, 81, 0.3) !important(绿色阴影) - 左侧指示条:
width: 4px,background: #0d7a37 !important(深绿色，圆角) - 图标缩放:
transform: scale(1.1)(放大10%) - span 文字:
color: #ffffff !important(确保文字立即变白)
子菜单父级激活状态：
- 背景:
rgba(28, 168, 81, 0.1) !important(浅绿色半透明) - 文字:
#1ca851 !important(绿色，强制覆盖) - 字重:
font-weight: 600 !important(加粗，强制覆盖) - 阴影:
box-shadow: 0 1px 4px rgba(28, 168, 81, 0.15) !important(轻微阴影) - 图标缩放:
transform: scale(1.1)(放大10%) - span 文字:
color: #1ca851 !important(确保文字立即变绿)
颜色应用场景
主色调 (#1ca851) 应用于：
- ✅ 所有按钮（主要按钮、成功按钮等）
- ✅ 菜单激活状态
- ✅ 链接文字
- ✅ 表单控件（输入框焦点、选择框、开关等）
- ✅ 复选框/单选框
- ✅ 进度条
- ✅ 标签（Tag）
- ✅ 面板标题
- ✅ 图标高亮
- ✅ 表格排序图标
- ✅ 分页器激活状态
黄色 (#f5b531) 应用于：
- ⚠️ 警告提示
- ⚠️ 警告按钮
- ⚠️ 警告标签
浏览器兼容性
- ✅ 现代浏览器 (Chrome, Firefox, Safari, Edge)
- ✅ 支持 CSS 变量 (CSS Custom Properties)
- ✅ 支持暗色模式
验证清单
启动项目后，请检查以下界面元素的颜色是否正确：
- 登录页面按钮
- 顶部导航栏
- 侧边菜单激活状态
- 表单输入框焦点状态
- 主要操作按钮
- 表格操作链接
- 分页器
- 标签（Tag）
- 开关组件
- 消息提示框
- 确认对话框
注意事项
- Element Plus 自动继承: Element Plus 组件会自动继承
--el-color-primary变量，无需额外配置 - 暗色模式: 系统支持暗色模式，相关颜色已同步修改
- 缓存清理: 修改后建议清理浏览器缓存或强制刷新 (Ctrl/Cmd + Shift + R)
- 构建优化: 生产构建时会自动压缩和优化 CSS
回滚方案
如需恢复原蓝色主题，可将以下色值改回：
--art-primary:0, 58, 255(蓝色)--el-color-primary:#003aff