From ab70a196a79a246229de6b6aef8c2de495eb42d5 Mon Sep 17 00:00:00 2001 From: lyt <1105290566@qq.com> Date: Mon, 18 Jan 2021 11:06:36 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.01.18:=E5=A4=84=E7=90=86=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E3=80=81=E9=BB=98=E8=AE=A4=E4=B8=BB=E9=A2=98=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E7=AD=89'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/theme/common/transition.scss | 3 ++- .../src/theme/common/var.scss | 2 +- .../src/theme/element.scss | 23 ++++++++++++++++--- .../src/utils/themeConfig.ts | 2 +- .../layout/navBars/breadcrumb/setings.vue | 2 +- .../src/views/layout/navMenu/subItem.vue | 6 +++-- .../src/views/layout/navMenu/vertical.vue | 4 +++- 7 files changed, 32 insertions(+), 10 deletions(-) diff --git a/vue-admin-wonderful-next/src/theme/common/transition.scss b/vue-admin-wonderful-next/src/theme/common/transition.scss index e23f4d2..5dde045 100644 --- a/vue-admin-wonderful-next/src/theme/common/transition.scss +++ b/vue-admin-wonderful-next/src/theme/common/transition.scss @@ -37,12 +37,13 @@ ------------------------------- */ .breadcrumb-enter-active, .breadcrumb-leave-active { + will-change: transform; transition: all 0.3s ease; position: absolute; + opacity: 0; } .breadcrumb-enter-from, .breadcrumb-leave-to { - opacity: 0; transform: translateX(20px); } diff --git a/vue-admin-wonderful-next/src/theme/common/var.scss b/vue-admin-wonderful-next/src/theme/common/var.scss index 7161097..8ca3774 100644 --- a/vue-admin-wonderful-next/src/theme/common/var.scss +++ b/vue-admin-wonderful-next/src/theme/common/var.scss @@ -62,7 +62,7 @@ $--bg-topBar: #ffffff; $--bg-menuBar: #545c64; $--bg-columnsMenuBar: #4276ab; $--bg-topBarColor: #606266; -$--bg-menuBarColor: #c4c4c4; +$--bg-menuBarColor: #eaeaea; $--bg-columnsMenuBarColor: #e6e6e6; /* 赋值给:root diff --git a/vue-admin-wonderful-next/src/theme/element.scss b/vue-admin-wonderful-next/src/theme/element.scss index 293adaf..eaaf44e 100644 --- a/vue-admin-wonderful-next/src/theme/element.scss +++ b/vue-admin-wonderful-next/src/theme/element.scss @@ -722,7 +722,7 @@ } .el-menu--horizontal > .el-menu-item, .el-menu--horizontal > .el-submenu .el-submenu__title { - color: var(--bg-menuBarColor); + color: var(--bg-topBarColor); } // 外部链接时 .el-menu-item a, @@ -763,11 +763,28 @@ color: #ffffff !important; text-decoration: none; } +// 菜单收起时鼠标经过背景颜色/字体颜色 +.el-popper.is-light { + .el-menu--vertical { + background: var(--bg-menuBar); + } + .el-menu--horizontal { + background: var(--bg-topBar); + .el-menu-item, + .el-submenu__title { + color: var(--bg-topBarColor); + } + } +} // 第三方图标字体间距/大小设置 .el-menu-item .iconfont, .el-submenu .iconfont { - font-size: 14px !important; - padding-right: 8px; + font-size: 18px !important; + display: inline-block; + vertical-align: middle; + margin-right: 5px; + width: 24px; + text-align: center; } /* Tabs 标签页 diff --git a/vue-admin-wonderful-next/src/utils/themeConfig.ts b/vue-admin-wonderful-next/src/utils/themeConfig.ts index dd15aed..f12a0b5 100644 --- a/vue-admin-wonderful-next/src/utils/themeConfig.ts +++ b/vue-admin-wonderful-next/src/utils/themeConfig.ts @@ -10,7 +10,7 @@ export default { menuBar: "#545c64", columnsMenuBar: '#4276ab', topBarColor: "#606266", - menuBarColor: "#c4c4c4", + menuBarColor: "#eaeaea", columnsMenuBarColor: '#e6e6e6', isTopBarColorGradual: false, isMenuBarColorGradual: false, diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue index b44a1e3..a6194b7 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue @@ -539,7 +539,7 @@ export default defineComponent({ getThemeConfig.value.isTagsview = true; getThemeConfig.value.isClassicSplitMenu = false; getThemeConfig.value.menuBar = "#545c64"; - getThemeConfig.value.menuBarColor = "#c4c4c4"; + getThemeConfig.value.menuBarColor = "#eaeaea"; getThemeConfig.value.topBar = "#FFFFFF"; getThemeConfig.value.topBarColor = "#606266"; initLayoutChangeFun(); diff --git a/vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue b/vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue index 7497a85..4d714d1 100644 --- a/vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue +++ b/vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue @@ -3,13 +3,15 @@ - + diff --git a/vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue b/vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue index 32bdbe2..7d93d95 100644 --- a/vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue +++ b/vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue @@ -11,7 +11,9 @@ - +