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

7
klp-ui/src/components/VditorEditor.vue
View File

@@ -28,6 +28,12 @@ export default {
value: this.value,
height: 360,
cache: { enable: false },
theme: 'dark',
preview: {
theme: {
current: 'dark'
}
},
after: () => {
this.vditor.setValue(this.value || '')
},
@@ -66,6 +72,7 @@ export default {
<style scoped>
#vditor {
border: 1px solid #e4e7ed;
color: white;
border-radius: 4px;
}
</style>

4
klp-ui/src/layout/components/Sidebar/Logo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: '#1e2227'}">
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" />
@@ -57,7 +57,7 @@ export default {
width: 100%;
height: 50px;
line-height: 50px;
background: #2b2f3a;
background: #111;
text-align: center;
overflow: hidden;

6
klp-ui/src/layout/components/Sidebar/index.vue
View File

@@ -1,14 +1,14 @@
<template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: '#1e2227' }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
background-color="#1e2227"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"
:active-text-color="settings.theme"
active-text-color="#fff"
:collapse-transition="false"
mode="vertical"
>

6
klp-ui/src/views/components/AllApplications.vue
View File

@@ -233,7 +233,7 @@ export default {
}
.edit-btn {
color: #0078ff; /* 飞书常用的主题蓝 */
color: #687b98; /* 飞书常用的主题蓝 */
padding: 0;
font-size: 14px;
}
@@ -307,13 +307,13 @@ export default {
.app-icon {
font-size: 24px; /* 调整图标大小 */
color: #0078ff; /* 主题蓝 */
color: #687b98; /* 主题蓝 */
}
// 应用名称样式
.app-name {
font-size: 14px;
color: #2bf; /* 飞书常用的文本色 */
color: #687b98; /* 飞书常用的文本色 */
text-align: center;
white-space: nowrap;
overflow: hidden;

2
klp-ui/src/views/index.vue
View File

@@ -310,7 +310,7 @@ export default {
.greeting-title {
font-size: 28px;
font-weight: 600;
color: #333;
color: #888;
}
.greeting-desc {

2
klp-ui/src/views/wms/order/components/PerformanceArea.vue
View File

@@ -336,7 +336,7 @@ export default {
.stat-number {
font-size: 24px;
font-weight: bold;
color: #409EFF;
color: #687b98;
margin-bottom: 5px;
}

4
klp-ui/src/views/wms/order/dashboard.vue
View File

@@ -195,13 +195,13 @@ export default {
margin: 0 0 8px 0;
font-size: 20px;
font-weight: 600;
color: #303133;
color: #ddd;
}
.section-title p {
margin: 0;
font-size: 14px;
color: #909399;
color: #ccc;
}
.top-row,