style(ui): 更新项目整体配色方案为Tailwind CSS标准色彩

- 将主要蓝色从 #409eff 替换为 #3B82F6
- 将成功绿色从 #67c23a 替换为 #10B981
- 将警告橙色从 #e6a23c 替换为 #F59E0B
- 将危险红色从 #f56c6c 替换为 #EF4444
- 将信息灰色从 #909399 替换为 #64748B
- 更新所有组件中的相关颜色配置
- 调整菜单主题为更深邃的午夜蓝风格
- 移除SCSS变量导出的注释标记
This commit is contained in:
2026-06-02 12:52:59 +08:00
parent 1dc8b593fe
commit 2e865dd446
141 changed files with 614 additions and 631 deletions

View File

@@ -90,7 +90,7 @@
&:hover,
&:focus {
color: #409eff;
color: #3B82F6;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
@@ -149,7 +149,7 @@
// 不同颜色的链接按钮
.blue-btn-link {
@extend .pan-btn-link;
color: #409eff;
color: #3B82F6;
&:hover,
&:focus {
@@ -159,7 +159,7 @@
.red-btn-link {
@extend .pan-btn-link;
color: #f56c6c;
color: #EF4444;
&:hover,
&:focus {
@@ -169,7 +169,7 @@
.info-btn-link {
@extend .pan-btn-link;
color: #909399;
color: #64748B;
&:hover,
&:focus {

View File

@@ -145,7 +145,7 @@
/** 表格更多操作下拉样式 */
.el-table .el-dropdown-link {
cursor: pointer;
color: #409EFF;
color: #3B82F6;
margin-left: 10px;
}

View File

@@ -245,7 +245,7 @@
padding: 60px 0;
&__description {
color: #909399;
color: #64748B;
font-size: 14px;
margin-top: 16px;
}
@@ -285,23 +285,23 @@
14. 工具类
============================================ */
.text-primary {
color: #409eff;
color: #3B82F6;
}
.text-success {
color: #67c23a;
color: #10B981;
}
.text-warning {
color: #e6a23c;
color: #F59E0B;
}
.text-danger {
color: #f56c6c;
color: #EF4444;
}
.text-info {
color: #909399;
color: #64748B;
}
.text-regular {
@@ -309,7 +309,7 @@
}
.text-secondary {
color: #909399;
color: #64748B;
}
/* ============================================

View File

@@ -8,39 +8,24 @@ $tiffany: #4AB7BD;
$yellow: #FEC171;
$panGreen: #30B08F;
// 默认菜单主题风格
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
// 菜单主题风格 — 微调为更深邃的午夜蓝
$base-menu-color: rgba(255, 255, 255, 0.65);
$base-menu-color-active: #FFFFFF;
$base-menu-background: #0F172A;
$base-logo-title-color: #ffffff;
$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;
$base-sub-menu-background: #0C1322;
$base-sub-menu-hover: #1E293B;
// 自定义暗色菜单风格
/**
$base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528;
*/
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;
$--color-primary: #3B82F6;
$--color-success: #10B981;
$--color-warning: #F59E0B;
$--color-danger: #EF4444;
$--color-info: #64748B;
// 侧边栏宽度(垂直菜单)
$sideBarWidth: 200px;
@@ -49,8 +34,6 @@ $base-sidebar-width: $sideBarWidth;
// Logo高度
$logoHeight: 50px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuColor: $base-menu-color;
menuLightColor: $base-menu-light-color;
@@ -67,4 +50,4 @@ $logoHeight: 50px;
dangerColor: $--color-danger;
infoColor: $--color-info;
warningColor: $--color-warning;
}
}