From dc1758288ad3dfaadcd1dffb16ddb1d8d57017a4 Mon Sep 17 00:00:00 2001 From: "du.meimei" Date: Wed, 7 May 2025 18:29:15 +0800 Subject: [PATCH] =?UTF-8?q?refactor(layout):=20=E4=BE=A7=E8=BE=B9=E6=A0=8F?= =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E4=BD=BF=E7=94=A8=20CSS=20=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将侧边栏宽度从 SASS 变量改为 CSS 变量 - 更新相关样式文件，使用新的 CSS 变量 - 在 Sidebar 组件中动态设置侧边栏宽度 - 删除了不再使用的 $sideBarWidth SASS变量 --- src/assets/sass/renderSass/theme.scss | 1 + src/assets/sass/sidebar.scss | 11 ++++++----- src/assets/sass/variables.scss | 12 ++++++------ .../app/layout/components/Sidebar/Sidebar.vue | 15 +++++++++++++-- src/views/app/layout/index.vue | 9 +++++++-- src/views/app/layout/layout.vue | 3 ++- 6 files changed, 35 insertions(+), 16 deletions(-) diff --git a/src/assets/sass/renderSass/theme.scss b/src/assets/sass/renderSass/theme.scss index b5dc257..591cf12 100644 --- a/src/assets/sass/renderSass/theme.scss +++ b/src/assets/sass/renderSass/theme.scss @@ -78,6 +78,7 @@ $--message-info-border: #cecece; // 信息消息框的边框色 --color-primary-label: #70778d; // 主题色的标签颜色 --color-primary-desc-text-drank: #999; // 主题色的深色描述文本颜色 --ep-color-bg: #fff !important; // 全局背景色 + --sidebar-width: 270px; } // 描述文本样式 diff --git a/src/assets/sass/sidebar.scss b/src/assets/sass/sidebar.scss index de48352..4907796 100644 --- a/src/assets/sass/sidebar.scss +++ b/src/assets/sass/sidebar.scss @@ -2,7 +2,8 @@ .main-container { min-height: 100%; transition: margin-left 0.28s; - margin-left: $sideBarWidth; + margin-left: var(--sidebar-width); + //$sideBarWidth position: relative; } @@ -79,7 +80,7 @@ & .nest-menu .el-submenu > .el-submenu__title, & .el-submenu .el-menu-item { - min-width: $sideBarWidth !important; + min-width: var(--sidebar-width) !important; background-color: $subMenuBg !important; &:hover { @@ -142,7 +143,7 @@ } .el-menu--collapse .el-menu .el-submenu { - min-width: $sideBarWidth !important; + min-width: var(--sidebar-width) !important; } // mobile responsive @@ -153,14 +154,14 @@ .sidebar-container { transition: transform 0.28s; - width: $sideBarWidth !important; + width: var(--sidebar-width) !important; } &.hideSidebar { .sidebar-container { pointer-events: none; transition-duration: 0.3s; - transform: translate3d(-$sideBarWidth, 0, 0); + transform: translate3d(var(--sidebar-width), 0, 0); } } } diff --git a/src/assets/sass/variables.scss b/src/assets/sass/variables.scss index 07acc26..a3daaaa 100644 --- a/src/assets/sass/variables.scss +++ b/src/assets/sass/variables.scss @@ -14,11 +14,14 @@ $gray: #b1b1b1 !default; $black: #000 !default; // 宽度列表 -$width-list: 5 8 10 20 30 40 50 60 65 70 80 86 100 110 120 140 150 155 160 180 192 200 220 260 280 299 300 315 325 350 400 440 445 450 550 700 1340; +$width-list: 5 8 10 20 30 40 50 60 65 70 80 86 100 110 120 140 150 155 160 180 + 192 200 220 260 280 299 300 315 325 350 400 440 445 450 550 700 1340; // 内外边距列表 -$distance-list: 0 1 2 5 6 8 9 10 12 15 20 25 30 35 40 45 50 60 80 86 90 100 120 140; -$distance-class-list: m, mv, mh, mt, ml, mr, mb, p, pv, ph, pt, pl, pr, pb, top, left, right, bottom; +$distance-list: 0 1 2 5 6 8 9 10 12 15 20 25 30 35 40 45 50 60 80 86 90 100 120 + 140; +$distance-class-list: m, mv, mh, mt, ml, mr, mb, p, pv, ph, pt, pl, pr, pb, top, + left, right, bottom; //圆角弧度 $radius: 1 2 3 4 5 6 7 8 9 10 12 13 14 15 18 20 50 100; @@ -37,8 +40,6 @@ $menuHover: #263445; $subMenuBg: #1f2d3d; $subMenuHover: #001528; -$sideBarWidth: 270px; - // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { @@ -49,5 +50,4 @@ $sideBarWidth: 270px; menuHover: $menuHover; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; - sideBarWidth: $sideBarWidth; } diff --git a/src/views/app/layout/components/Sidebar/Sidebar.vue b/src/views/app/layout/components/Sidebar/Sidebar.vue index 649d6ed..7dac710 100644 --- a/src/views/app/layout/components/Sidebar/Sidebar.vue +++ b/src/views/app/layout/components/Sidebar/Sidebar.vue @@ -36,7 +36,7 @@ -
+
@@ -156,9 +156,20 @@ export default { this.activeParent = route.url // this.$store.dispatch('app/toggleSideBar') // If this parent has children, don't navigate + if (route.children && route.children.length > 1) { + document.documentElement.style.setProperty( + '--sidebar-width', + 270 + 'px' + ) + } else { + document.documentElement.style.setProperty( + '--sidebar-width', + 110 + 'px' + ) + } if (route.children && route.children.length > 0) { // Optionally navigate to the first child - // this.navigateTo(route.children[0].url) + this.navigateTo(route.children[0].url) } else { // If no children, navigate to the parent route this.navigateTo(route.url) diff --git a/src/views/app/layout/index.vue b/src/views/app/layout/index.vue index b2419bf..df2f027 100644 --- a/src/views/app/layout/index.vue +++ b/src/views/app/layout/index.vue @@ -1,6 +1,10 @@