style(ui): 更新项目整体配色方案为Tailwind CSS标准色彩
- 将主要蓝色从 #409eff 替换为 #3B82F6 - 将成功绿色从 #67c23a 替换为 #10B981 - 将警告橙色从 #e6a23c 替换为 #F59E0B - 将危险红色从 #f56c6c 替换为 #EF4444 - 将信息灰色从 #909399 替换为 #64748B - 更新所有组件中的相关颜色配置 - 调整菜单主题为更深邃的午夜蓝风格 - 移除SCSS变量导出的注释标记
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -145,7 +145,7 @@
|
||||
/** 表格更多操作下拉样式 */
|
||||
.el-table .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
color: #3B82F6;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user