diff --git a/klp-ui/src/assets/images/avatar.png b/klp-ui/src/assets/images/avatar.png index 357f31d4..305ebdf8 100644 Binary files a/klp-ui/src/assets/images/avatar.png and b/klp-ui/src/assets/images/avatar.png differ diff --git a/klp-ui/src/assets/styles/element-ui.scss b/klp-ui/src/assets/styles/element-ui.scss index 33e2eaee..7885fcec 100644 --- a/klp-ui/src/assets/styles/element-ui.scss +++ b/klp-ui/src/assets/styles/element-ui.scss @@ -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; } } diff --git a/klp-ui/src/assets/styles/element-variables.scss b/klp-ui/src/assets/styles/element-variables.scss index 1615ff28..da51038f 100644 --- a/klp-ui/src/assets/styles/element-variables.scss +++ b/klp-ui/src/assets/styles/element-variables.scss @@ -4,7 +4,7 @@ **/ /* theme color */ -$--color-primary: #1890ff; +$--color-primary: #5F7BA0; $--color-success: #13ce66; $--color-warning: #ffba00; $--color-danger: #ff4949; diff --git a/klp-ui/src/assets/styles/sidebar.scss b/klp-ui/src/assets/styles/sidebar.scss index 2ee6a676..fe9caed7 100644 --- a/klp-ui/src/assets/styles/sidebar.scss +++ b/klp-ui/src/assets/styles/sidebar.scss @@ -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; } \ No newline at end of file diff --git a/klp-ui/src/components/VditorEditor.vue b/klp-ui/src/components/VditorEditor.vue index f9692248..49dc80b6 100644 --- a/klp-ui/src/components/VditorEditor.vue +++ b/klp-ui/src/components/VditorEditor.vue @@ -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 { diff --git a/klp-ui/src/layout/components/Sidebar/Logo.vue b/klp-ui/src/layout/components/Sidebar/Logo.vue index cf6300b7..9843efb4 100644 --- a/klp-ui/src/layout/components/Sidebar/Logo.vue +++ b/klp-ui/src/layout/components/Sidebar/Logo.vue @@ -1,5 +1,5 @@