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-02 15:39:51 +08:00
parent 96b5c3ee45
commit 52cc671ca3
11 changed files with 68 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
klp-ui/src/assets/images/avatar.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

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

@@ -274,11 +274,21 @@ body {
}
}
.el-button--medium {
padding: 4px 8px;
font-size: 12px;
height: $--btn-height - 4px;
}
// 迷你按钮（超紧凑）
.el-button--mini {
padding: 4px 8px;
font-size: 12px;
height: calc($--btn-height - 4px);
height: $--btn-height - 4px;
}
.el-button--mini.is-circle {
padding: 4px !important;
}
@@ -290,7 +300,7 @@ body {
box-shadow: $--metal-shadow;
color: $--color-text-regular;
overflow: hidden;
margin-top: calc($--form-item-margin * 2); // 与表单间距
margin-top: $--form-item-margin * 2; // 与表单间距
// 分割线
&::before {
@@ -635,8 +645,8 @@ body {
// 自定义表格工具类（补充紧凑）
.small-padding .cell {
padding-left: calc($--spacing-base / 2);
padding-right: calc($--spacing-base / 2);
padding-left: $--spacing-base / 2;
padding-right: $--spacing-base / 2;
}
.status-col .cell {
@@ -939,6 +949,15 @@ body {
}
}
// 抽屉
.el-drawer {
background: $--metal-gradient-light;
border: 1px solid $--border-color-light;
box-shadow: $--metal-shadow;
border-radius: 8px;
color: $--color-text-regular;
}
// Popover
.el-popover {
background: $--metal-gradient-light;
@@ -1410,12 +1429,12 @@ body {
.el-descriptions__label,
.el-descriptions__content {
padding: calc($--spacing-base / 2) $--spacing-base;
padding: $--spacing-base / 2 $--spacing-base;
font-size: 12px;
}
.el-descriptions__header {
padding: calc($--spacing-base / 2) $--spacing-base;
padding: $--spacing-base / 2 $--spacing-base;
font-size: 13px;
}
}
@@ -1424,12 +1443,12 @@ body {
.el-descriptions__label,
.el-descriptions__content {
padding: $--spacing-lg calc($--spacing-lg * 1.5);
padding: $--spacing-lg $--spacing-lg * 1.5;
font-size: 14px;
}
.el-descriptions__header {
padding: $--spacing-base calc($--spacing-lg * 1.5);
padding: $--spacing-base $--spacing-lg * 1.5;
font-size: 15px;
}
}

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

@@ -4,7 +4,7 @@
**/
/* theme color */
$--color-primary: #1890ff;
$--color-primary: #5F7BA0;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;

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

@@ -14,7 +14,7 @@
}
.sidebarHide {
margin-left: 0!important;
margin-left: 0 !important;
}
.sidebar-container {
@@ -86,7 +86,8 @@
background: transparent;
}
.el-menu-item, .el-submenu__title {
.el-menu-item,
.el-submenu__title {
// 明确默认状态样式（关键修复）
background: transparent !important;
box-shadow: none !important;
@@ -107,12 +108,12 @@
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important; // hover时文本更深
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
}
// 深色主题下子菜单选中高亮
& .theme-dark .is-active > .el-submenu__title {
& .theme-dark .is-active>.el-submenu__title {
color: #fff !important; // 选中时文字纯白
// background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮
// border-left: 3px solid #5F7BA0; // 左边高亮条
@@ -152,6 +153,13 @@
}
}
.el-menu-item.is-active.submenu-title-noDropdown {
background: rgba(95, 123, 160, 0.28) !important; // 激活背景
color: #fff !important; // 激活文字白色
font-weight: 600;
border-left: 3px solid #5F7BA0; // 左边高亮条
}
.hideSidebar {
.sidebar-container {
width: 54px !important;
@@ -205,6 +213,10 @@
min-width: $base-sidebar-width !important;
}
.el-submenu .el-menu{
padding-left: 10px;
}
// mobile responsive
.mobile {
.main-container {
@@ -227,6 +239,7 @@
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
@@ -252,7 +265,7 @@
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
::v-deep &.is-active {
@@ -261,7 +274,7 @@
font-weight: 600;
border-left: 3px solid #5F7BA0;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15),
inset -1px -1px 2px rgba(255, 255, 255, 0.08);
inset -1px -1px 2px rgba(255, 255, 255, 0.08);
}
::v-deep .el-menu-item.is-active span,
@@ -288,12 +301,12 @@
&::-webkit-scrollbar-thumb {
background: #8d939b;
border-radius: 3px;
border-radius: 3px;
}
}
}
#app .sidebar-container .el-menu-item,
#app .sidebar-container .el-menu-item,
#app .sidebar-container .el-submenu__title {
margin: 0;
}