DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 主题变更为白色

Browse Source
This commit is contained in:
砂糖
2025-09-24 17:23:06 +08:00
parent 3c30290b50
commit 833c16a0e9
26 changed files with 221 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
klp-ui/src/assets/styles/element-ui.scss
View File

@@ -11,13 +11,27 @@ $info-base: #AEB6BF;
/* 次主色原始值 */
// 背景色原始值
$background-base: #2B2F36;
// 暗色
// $background-base: #2B2F36;
// $background-light-base: lighten($background-base, 5%);
// $background-lighter-base: lighten($background-base, 10%);
// $panel-bg-base: #3A3F45;
// $table-bg-base: #1E2227;
// // 暗色边框色原始值
// $border-color-base: #6E757D;
// $border-color-light: #828991;
// $border-color-lighter: #9AA1A9;
// 亮色
$background-base: #F5F5F5;
$background-light-base: lighten($background-base, 5%);
$background-lighter-base: lighten($background-base, 10%);
$panel-bg-base: #3A3F45;
$table-bg-base: #1E2227;
$--color-text-primary: #1a1a1a;
$panel-bg-base: $--color-text-primary;
$table-bg-base: $--color-text-primary;
// 边框色原始值（新增基础边框色变量）
// 亮色边框色原始值
$border-color-base: #6E757D;
$border-color-light: #828991;
$border-color-lighter: #9AA1A9;
@@ -52,10 +66,10 @@ $--border-color: $border-color-base;
--table-bg: #{$table-bg-base};
/* 文本色 */
--color-text-primary: #FFFFFF;
--color-text-regular: #EAEAEA;
--color-text-secondary: #B6BDC5;
--color-text-placeholder: #8A9098;
--color-text-primary: #{$--color-text-primary};
--color-text-regular: #333333;
--color-text-secondary: #555555;
--color-text-placeholder: #777777;
/* 边框色 */
--border-color-base: #{$border-color-base};
@@ -73,8 +87,10 @@ $--border-color: $border-color-base;
--btn-height: #{$--btn-height};
/* 金属质感变量 */
--metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41);
--metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A);
// --metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41);
// --metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A);
--metal-gradient-light: linear-gradient(145deg, $--color-background-light, $--color-background);
--metal-gradient-dark: linear-gradient(145deg, $--color-background, $--color-background-light);
--metal-highlight: rgba(255, 255, 255, .14);
--metal-shadow: 5px 5px 12px rgba(0, 0, 0, .22), -5px -5px 12px rgba(255, 255, 255, .06);
--metal-shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, .28), inset -3px -3px 6px rgba(255, 255, 255, .06);
@@ -194,7 +210,7 @@ body {
// 主按钮（品牌梯度）
.el-button--primary {
@include button-variant(#fff, darken($--color-primary, 10%));
@include button-variant($--color-text-primary, darken($--color-primary, 10%));
background: linear-gradient(145deg, lighten($--color-primary, 6%), darken($--color-primary, 6%));
border-color: darken($--color-primary, 10%);
@@ -205,17 +221,17 @@ body {
// 功能按钮（统一风格）
.el-button--success {
@include button-variant(#fff, darken($--color-success, 10%));
@include button-variant($--color-text-primary, darken($--color-success, 10%));
background: linear-gradient(145deg, lighten($--color-success, 6%), darken($--color-success, 6%));
}
.el-button--warning {
@include button-variant(#fff, darken($--color-warning, 10%));
@include button-variant($--color-text-primary, darken($--color-warning, 10%));
background: linear-gradient(145deg, lighten($--color-warning, 6%), darken($--color-warning, 6%));
}
.el-button--danger {
@include button-variant(#fff, darken($--color-danger, 10%));
@include button-variant($--color-text-primary, darken($--color-danger, 10%));
background: linear-gradient(145deg, lighten($--color-danger, 6%), darken($--color-danger, 6%));
}
@@ -300,7 +316,7 @@ body {
// ---------------------- 3.2 表格（深色交替 + 金属边框）----------------------
.el-table {
background: $--table-bg;
border: 1px solid $--border-color-light;
// border: 1px solid $--border-color-light;
border-radius: 8px;
box-shadow: $--metal-shadow;
color: $--color-text-regular;
@@ -315,10 +331,10 @@ body {
// 表头（深灰黑 + 纯白文字）
.el-table__header-wrapper {
th.el-table__cell {
background: #1F2227;
background: $--color-background;
color: $--color-text-primary;
font-weight: 600;
border-bottom: 1px solid #444A52;
border-bottom: 1px solid $--border-color-lighter;
padding: 4px !important; // 紧凑 padding
height: auto;
font-size: 13px;
@@ -331,14 +347,14 @@ body {
// 奇数行
&:nth-child(odd) .el-table__cell {
background: #2F3339;
color: #EAEAEA;
background: $--color-background-light;
color: $--color-text-regular;
}
// 偶数行
&:nth-child(even) .el-table__cell {
background: #353A40;
color: #EAEAEA;
background: $--color-background-light;
color: $--color-text-regular;
}
// hover
@@ -357,8 +373,8 @@ body {
// 单元格（统一边框 + 紧凑 padding）
.el-table__cell {
border-bottom: 1px solid #444A52;
color: #EAEAEA;
border-bottom: 1px solid $--border-color-lighter;
color: $--color-text-regular;
padding: 2px 4px !important; // 超紧凑
font-size: 13px;
}
@@ -391,7 +407,7 @@ body {
}
&__empty-block {
background: #1e2227;
background: $--color-background;
}
// 适配尺寸类（统一紧凑）
@@ -405,10 +421,10 @@ body {
// 表头（深灰黑 + 纯白文字）
.el-table__fixed-header-wrapper {
th.el-table__cell {
background: #1F2227;
background: $--color-background;
color: $--color-text-primary;
font-weight: 600;
border-bottom: 1px solid #444A52;
border-bottom: 1px solid $--border-color-lighter;
padding: 4px !important; // 紧凑 padding
font-size: 13px;
}
@@ -420,14 +436,14 @@ body {
// 奇数行
&:nth-child(odd) .el-table__cell {
background: #2F3339;
color: #EAEAEA;
background: $--color-background-light;
color: $--color-text-regular;
}
// 偶数行
&:nth-child(even) .el-table__cell {
background: #353A40;
color: #EAEAEA;
background: $--color-background-light;
color: $--color-text-regular;
}
// 当前行
@@ -598,7 +614,7 @@ body {
&.current {
background: $--color-primary;
color: #fff;
color: $--color-text-primary;
}
&.in-range {
@@ -612,13 +628,13 @@ body {
&.start-date,
&.end-date {
background: $--color-primary;
color: #fff;
color: $--color-text-primary;
}
}
}
.available.in-range div {
background-color: #111;
background-color: $--color-background;
}
}
@@ -645,7 +661,7 @@ body {
&.el-button--primary {
background: $--color-primary;
border-color: $--color-primary;
color: #fff;
color: $--color-text-primary;
&:hover {
background: lighten($--color-primary, 10%);
@@ -697,7 +713,7 @@ body {
background: $--metal-gradient-light;
border-color: $--border-color-light;
color: $--color-text-regular;
box-shadow: $--metal-shadow-inset;
// box-shadow: $--metal-shadow-inset;
border-radius: 0;
height: $--btn-height;
line-height: $--btn-height;
@@ -709,7 +725,7 @@ body {
&:focus {
border-color: $--color-primary;
box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary, .22);
box-shadow: $--metal-shadow-inset;
}
}
@@ -738,7 +754,7 @@ body {
border-left: 1px solid $--border-color-light;
background: $--metal-gradient-light;
color: $--color-text-regular;
box-shadow: $--metal-shadow-inset;
// box-shadow: $--metal-shadow-inset;
font-size: 13px;
}
}
@@ -748,7 +764,7 @@ body {
background: $--metal-gradient-light;
border-color: $--border-color-light;
color: $--color-text-regular;
box-shadow: $--metal-shadow-inset;
// box-shadow: $--metal-shadow-inset;
border-radius: 0;
padding: $--spacing-base;
font-size: 13px;
@@ -851,7 +867,7 @@ body {
&.selected {
background-color: rgba($--color-primary, .20);
color: #fff;
color: $--color-text-primary;
}
}
}
@@ -930,12 +946,12 @@ body {
left: 0;
position: relative;
margin: 10vh auto 0;
background: $--metal-gradient-light !important;
// background: $--metal-gradient-light !important;
background-color: white !important;
border: 1px solid $--border-color-light;
box-shadow: $--metal-shadow;
border-radius: 8px;
color: $--color-text-regular;
width: 60% !important; // 自适应宽度
// 对话框头部
.el-dialog__header {
@@ -1299,7 +1315,7 @@ body {
&.current,
&.selected {
background: $--color-primary;
color: #fff;
color: $--color-text-primary;
&:hover {
background: darken($--color-primary, 5%);
@@ -1336,7 +1352,7 @@ body {
&.is-selected {
background: $--color-primary;
color: #fff;
color: $--color-text-primary;
&:hover {
background: darken($--color-primary, 5%);
@@ -1581,7 +1597,7 @@ body {
&.active {
background: $--color-primary;
color: #fff;
color: $--color-text-primary;
border-color: $--color-primary;
}
}
@@ -1637,28 +1653,13 @@ div.pagination-container {
color: $--color-text-regular;
.el-tree-node {
&:hover {
background: rgba($--color-primary, .12);
}
// &:hover {
// background: rgba($--color-primary, .12);
// }
&.is-current>.el-tree-node__content {
background: rgba($--color-primary, .2);
color: $--color-primary;
}
}
}
// ---------------------- 3.8 自定义工具类 ----------------------
// 固定按钮宽度
// .fixed-width {
// .el-button--mini {
// padding: 7px 10px;
// width: 60px;
// }
// }
// 居中单元格（深色表头）
.is-center.is-leaf.el-table__cell {
background-color: #1F2227;
}