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;
}

130
klp-ui/src/assets/styles/klp.scss
View File

@@ -88,83 +88,83 @@
padding: 10px 20px 0;
}
.el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #f8f8f9;
color: #515a6e;
height: 40px;
font-size: 13px;
}
}
// .el-table {
// .el-table__header-wrapper, .el-table__fixed-header-wrapper {
// th {
// word-break: break-word;
// background-color: #f8f8f9;
// color: #515a6e;
// height: 40px;
// font-size: 13px;
// }
// }
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
margin-left: 1px;
}
}
}
// .el-table__body-wrapper {
// .el-button [class*="el-icon-"] + span {
// margin-left: 1px;
// }
// }
// }
/** 表单布局 **/
.form-header {
font-size: 15px;
color: #6379bb;
border-bottom: 1px solid #ddd;
margin: 8px 10px 25px 10px;
padding-bottom: 5px
}
// .form-header {
// font-size: 15px;
// color: #6379bb;
// border-bottom: 1px solid #ddd;
// margin: 8px 10px 25px 10px;
// padding-bottom: 5px
// }
/** 表格布局 **/
.pagination-container {
position: relative;
height: 25px;
margin-bottom: 10px;
margin-top: 15px;
padding: 10px 20px !important;
}
// /** 表格布局 **/
// .pagination-container {
// position: relative;
// height: 25px;
// margin-bottom: 10px;
// margin-top: 15px;
// padding: 10px 20px !important;
// }
/* tree border */
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #FFFFFF none;
border-radius: 4px;
}
// .tree-border {
// margin-top: 5px;
// border: 1px solid #e5e6e7;
// background: #FFFFFF none;
// border-radius: 4px;
// }
.pagination-container .el-pagination {
right: 0;
position: absolute;
}
// .pagination-container .el-pagination {
// right: 0;
// position: absolute;
// }
@media (max-width: 768px) {
.pagination-container .el-pagination > .el-pagination__jump {
display: none !important;
}
.pagination-container .el-pagination > .el-pagination__sizes {
display: none !important;
}
}
// @media (max-width: 768px) {
// .pagination-container .el-pagination > .el-pagination__jump {
// display: none !important;
// }
// .pagination-container .el-pagination > .el-pagination__sizes {
// display: none !important;
// }
// }
.el-table .fixed-width .el-button--mini {
padding-left: 0;
padding-right: 0;
width: inherit;
}
// .el-table .fixed-width .el-button--mini {
// padding-left: 0;
// padding-right: 0;
// width: inherit;
// }
/** 表格更多操作下拉样式 */
.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
cursor: pointer;
margin-left: 5px;
}
// /** 表格更多操作下拉样式 */
// .el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
// cursor: pointer;
// margin-left: 5px;
// }
.el-table .el-dropdown, .el-icon-arrow-down {
font-size: 12px;
}
// .el-table .el-dropdown, .el-icon-arrow-down {
// font-size: 12px;
// }
.el-tree-node__content > .el-checkbox {
margin-right: 8px;
}
// .el-tree-node__content > .el-checkbox {
// margin-right: 8px;
// }
.list-group-striped > .list-group-item {
border-left: 0;

27
klp-ui/src/assets/styles/sidebar.scss
View File

@@ -4,13 +4,14 @@
--text-regular: #333333;
--text-secondary: #555555;
--text-placeholder: #777777;
--background-color: #fff;
.main-container {
height: 100%;
transition: margin-left .28s, box-shadow .3s ease;
margin-left: $base-sidebar-width;
position: relative;
background: #1E2227; // 金属浅色渐变
// background: #1E2227; // 金属浅色渐变
}
.sidebarHide {
@@ -21,7 +22,7 @@
-webkit-transition: width .28s, background .3s ease;
transition: width 0.28s, background .3s ease;
width: $base-sidebar-width !important;
background: #1E2227; // 金属深色渐变
background: var(--background-color); // 金属深色渐变
border-right: 1px solid #8d939b;
height: 100%;
position: fixed;
@@ -44,11 +45,12 @@
.el-scrollbar__bar.is-vertical {
right: 0px;
background: rgba(0, 0, 0, 0.05);
background: #2Bf;
width: 0;
}
.el-scrollbar__thumb {
background: #1E2227;
background: var(--background-color);
border-radius: 3px;
}
@@ -112,13 +114,6 @@
}
}
// 深色主题下子菜单选中高亮
& .theme-dark .is-active>.el-submenu__title {
color: #fff !important; // 选中时文字纯白
// background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮
// border-left: 3px solid #5F7BA0; // 左边高亮条
}
// & .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
// 子菜单默认样式
@@ -146,7 +141,7 @@
&.is-active {
background: rgba(95, 123, 160, 0.28) !important; // 激活背景
color: #fff !important; // 激活文字白色
color: #000 !important; // 激活文字白色
font-weight: 600;
border-left: 3px solid #5F7BA0; // 左边高亮条
}
@@ -154,10 +149,10 @@
}
.el-menu-item.is-active.submenu-title-noDropdown {
background: rgba(95, 123, 160, 0.28) !important; // 激活背景
color: #fff !important; // 激活文字白色
background: #657b96; // 激活背景
color: #fff; // 激活文字白色
font-weight: 600;
border-left: 3px solid #5F7BA0; // 左边高亮条
border-left: 3px solid #657b96; // 左边高亮条
}
.hideSidebar {
@@ -247,7 +242,7 @@
}
}
// when menu collapsed
// 收起状态下的菜单
.el-menu--vertical {
&>.el-menu {
.svg-icon {