From c466b7f253a93d3a9b58c658adf6ec75574f5bd8 Mon Sep 17 00:00:00 2001 From: spring <2396852758@qq.com> Date: 星期二, 17 六月 2025 09:06:38 +0800 Subject: [PATCH] 公司logo动态切换,整体样式修改 --- src/layout/components/Sidebar/index.vue | 32 +++++++++++--------------------- 1 files changed, 11 insertions(+), 21 deletions(-) diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index f746f2d..0732505 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,23 +2,11 @@ <div :class="{ 'has-logo': showLogo }" class="sidebar-container"> <logo v-if="showLogo" :collapse="isCollapse" /> <el-scrollbar wrap-class="scrollbar-wrapper"> - <el-menu - :default-active="activeMenu" - :collapse="isCollapse" - :background-color="getMenuBackground" - :text-color="getMenuTextColor" - :unique-opened="true" - :active-text-color="theme" - :collapse-transition="false" - mode="vertical" - :class="sideTheme" - > - <sidebar-item - v-for="(route, index) in sidebarRouters" - :key="route.path + index" - :item="route" - :base-path="route.path" - /> + <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="getMenuBackground" + :text-color="getMenuTextColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false" + mode="vertical" :class="sideTheme"> + <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" + :base-path="route.path" /> </el-menu> </el-scrollbar> </div> @@ -42,6 +30,7 @@ const sideTheme = computed(() => settingsStore.sideTheme) const theme = computed(() => settingsStore.theme) const isCollapse = computed(() => !appStore.sidebar.opened) +console.log(44444, settingsStore.isDark, sideTheme.value) // 鑾峰彇鑿滃崟鑳屾櫙鑹� const getMenuBackground = computed(() => { @@ -71,7 +60,7 @@ <style lang="scss" scoped> .sidebar-container { background-color: v-bind(getMenuBackground); - + .scrollbar-wrapper { background-color: v-bind(getMenuBackground); } @@ -80,8 +69,9 @@ border: none; height: 100%; width: 100% !important; - - .el-menu-item, .el-sub-menu__title { + + .el-menu-item, + .el-sub-menu__title { &:hover { background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; } @@ -89,7 +79,7 @@ .el-menu-item { color: v-bind(getMenuTextColor); - + &.is-active { color: var(--menu-active-text, #409eff); background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; -- Gitblit v1.9.3