From c5c40b48b131d3723e409b157b117f04cf4dd73d Mon Sep 17 00:00:00 2001 From: hooray <304327508@qq.com> Date: Mon, 30 May 2022 20:53:18 +0800 Subject: [PATCH] =?UTF-8?q?layout=20=E5=8F=98=E9=87=8F=E5=85=A8=E9=83=A8?= =?UTF-8?q?=E6=94=B9=E7=94=A8=20css=20var?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/globals.scss | 3 +++ src/assets/styles/layout.scss | 14 ++++++++++++++ src/assets/styles/resources/layout.scss | 17 ----------------- src/assets/styles/{resources => }/themes.scss | 0 src/layout/components/Header/index.vue | 8 ++++---- src/layout/components/Logo/index.vue | 2 +- src/layout/components/MainSidebar/index.vue | 2 +- src/layout/components/SubSidebar/index.vue | 2 +- src/layout/components/Topbar/index.vue | 2 +- src/layout/index.vue | 8 ++++---- 10 files changed, 29 insertions(+), 29 deletions(-) create mode 100644 src/assets/styles/layout.scss delete mode 100644 src/assets/styles/resources/layout.scss rename src/assets/styles/{resources => }/themes.scss (100%) diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index 1634614c..ec9703c5 100644 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -1,3 +1,6 @@ +@use "./layout.scss" as *; +@use "./themes.scss" as *; + // 全局样式 ::-webkit-scrollbar { width: 12px; diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss new file mode 100644 index 00000000..6b2ae43c --- /dev/null +++ b/src/assets/styles/layout.scss @@ -0,0 +1,14 @@ +// 全局变量 +:root { + // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示） + --g-header-width: 100%; + // 头部高度 + --g-header-height: 70px; + // 侧边栏宽度 + --g-main-sidebar-width: 70px; + --g-sub-sidebar-width: 220px; + // 侧边栏Logo高度 + --g-sidebar-logo-height: 50px; + // 顶栏高度 + --g-topbar-height: 50px; +} diff --git a/src/assets/styles/resources/layout.scss b/src/assets/styles/resources/layout.scss deleted file mode 100644 index 7537af51..00000000 --- a/src/assets/styles/resources/layout.scss +++ /dev/null @@ -1,17 +0,0 @@ -// 全局变量 - -// 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示） -$g-header-width: 100%; -// 头部高度 -$g-header-height: 70px; -// 侧边栏Logo高度 -$g-sidebar-logo-height: 50px; -// 顶部导航栏高度 -$g-topbar-height: 50px; - -// 全局变量 -:root { - // 侧边栏宽度 - --g-main-sidebar-width: 70px; - --g-sub-sidebar-width: 220px; -} diff --git a/src/assets/styles/resources/themes.scss b/src/assets/styles/themes.scss similarity index 100% rename from src/assets/styles/resources/themes.scss rename to src/assets/styles/themes.scss diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue index 8aee9a4d..7a4df3fa 100644 --- a/src/layout/components/Header/index.vue +++ b/src/layout/components/Header/index.vue @@ -44,12 +44,12 @@ header { display: flex; align-items: center; padding: 0 20px; - height: $g-header-height; + height: var(--g-header-height); color: var(--g-header-color); background-color: var(--g-header-bg); transition: background-color 0.3s, var(--el-transition-color); .header-container { - width: $g-header-width; + width: var(--g-header-width); height: 100%; margin: 0 auto; display: flex; @@ -61,7 +61,7 @@ header { height: 100%; } } - @media screen and (max-width: $g-header-width) { + @media screen and (max-width: var(--g-header-width)) { .header-container { width: 100%; } @@ -135,6 +135,6 @@ header { } .header-enter-from, .header-leave-to { - transform: translateY(-#{$g-header-height}); + transform: translateY(calc(var(--g-header-height) * -1)); } diff --git a/src/layout/components/Logo/index.vue b/src/layout/components/Logo/index.vue index 67e380c8..09a54846 100644 --- a/src/layout/components/Logo/index.vue +++ b/src/layout/components/Logo/index.vue @@ -44,7 +44,7 @@ const to = computed(() => { display: flex; align-items: center; justify-content: center; - height: $g-sidebar-logo-height; + height: var(--g-sidebar-logo-height); text-align: center; overflow: hidden; text-decoration: none; diff --git a/src/layout/components/MainSidebar/index.vue b/src/layout/components/MainSidebar/index.vue index 148df6a5..b4665569 100644 --- a/src/layout/components/MainSidebar/index.vue +++ b/src/layout/components/MainSidebar/index.vue @@ -57,7 +57,7 @@ const switchMenu = inject('switchMenu') } .nav { width: inherit; - padding-top: $g-sidebar-logo-height; + padding-top: var(--g-sidebar-logo-height); .item { display: flex; align-items: center; diff --git a/src/layout/components/SubSidebar/index.vue b/src/layout/components/SubSidebar/index.vue index a537a202..706af802 100644 --- a/src/layout/components/SubSidebar/index.vue +++ b/src/layout/components/SubSidebar/index.vue @@ -86,7 +86,7 @@ function onSidebarScroll(e) { } .el-menu { border-right: 0; - padding-top: $g-sidebar-logo-height; + padding-top: var(--g-sidebar-logo-height); transition: border-color 0.3s, background-color 0.3s, color 0.3s, padding-top 0.3s; background-color: var(--g-sub-sidebar-bg); &:not(.el-menu--collapse) { diff --git a/src/layout/components/Topbar/index.vue b/src/layout/components/Topbar/index.vue index 18766547..1aa2767e 100644 --- a/src/layout/components/Topbar/index.vue +++ b/src/layout/components/Topbar/index.vue @@ -78,7 +78,7 @@ function pathCompile(path) { display: flex; align-items: center; justify-content: space-between; - height: $g-topbar-height; + height: var(--g-topbar-height); background-color: var(--g-toolbar-bg); transition: width 0.3s, top 0.3s, transform 0.3s, background-color 0.3s, var(--el-transition-box-shadow); &.fixed { diff --git a/src/layout/index.vue b/src/layout/index.vue index 9688fe21..a26a5b0e 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -185,14 +185,14 @@ function switchMenu(index) { transition: 0.3s; } .topbar-container + .main { - margin: $g-topbar-height 0 0; + margin: var(--g-topbar-height) 0 0; } } } header:not(.header-leave-active) + .wrapper { - padding-top: $g-header-height; + padding-top: var(--g-header-height); .sidebar-container { - top: $g-header-height; + top: var(--g-header-height); :deep(.sidebar-logo) { display: none; } @@ -202,7 +202,7 @@ header:not(.header-leave-active) + .wrapper { } .main-container { .topbar-container { - top: $g-header-height; + top: var(--g-header-height); :deep(.tools) { display: none; }