From ad12376037197b28e0c17e9cf5a6422f14a6abfc Mon Sep 17 00:00:00 2001 From: Hooray Hu <304327508@qq.com> Date: Mon, 20 Nov 2023 15:10:46 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AF=BC=E8=88=AA=E9=A1=B6?= =?UTF-8?q?=E9=83=A8=E6=A8=A1=E5=BC=8F=E4=B8=8B=E5=B1=95=E7=A4=BA=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 8 ++--- src/assets/styles/globals.scss | 2 +- src/layouts/components/Header/index.vue | 30 ++++--------------- src/layouts/components/MainSidebar/index.vue | 15 ++++------ src/layouts/components/Menu/item.vue | 7 ++--- src/layouts/components/SubSidebar/index.vue | 10 +++---- .../components/Topbar/Toolbar/index.vue | 10 +++---- 7 files changed, 30 insertions(+), 52 deletions(-) diff --git a/src/App.vue b/src/App.vue index e479b33b..0427bd59 100755 --- a/src/App.vue +++ b/src/App.vue @@ -28,10 +28,10 @@ const subSidebarActualWidth = computed(() => { } if ( menuStore.sidebarMenus.length === 1 - && ( - !menuStore.sidebarMenus[0].children - || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false) - ) + && ( + !menuStore.sidebarMenus[0].children + || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false) + ) ) { actualWidth = 0 } diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index b4460de6..acc186e0 100755 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -1,7 +1,7 @@ // 页面布局 CSS 变量 :root { // 头部高度 - --g-header-height: 80px; + --g-header-height: 60px; // 侧边栏宽度 --g-main-sidebar-width: 80px; --g-sub-sidebar-width: 220px; diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue index f16ae138..dfd8e4f8 100755 --- a/src/layouts/components/Header/index.vue +++ b/src/layouts/components/Header/index.vue @@ -39,13 +39,13 @@ function handlerMouserScroll(event: WheelEvent) { }" >
-
+
- + {{ item.meta?.title }}
@@ -104,12 +104,12 @@ header { background-color: inherit; .logo { - width: 50px; - height: 50px; + width: initial; + height: 40px; } span { - font-size: 24px; + font-size: 20px; letter-spacing: 1px; color: var(--g-header-color); } @@ -135,24 +135,15 @@ header { .menu { display: inline-flex; height: 100%; - background-color: var(--g-header-bg); :deep(.menu-item) { .menu-item-container { - width: 80px; - padding: 0 5px; color: var(--g-header-menu-color); - background-color: var(--g-header-menu-bg); &:hover { color: var(--g-header-menu-hover-color); background-color: var(--g-header-menu-hover-bg); } - - .menu-item-container-icon { - transform: scale(1); - font-size: 24px !important; - } } &.active .menu-item-container { @@ -164,15 +155,6 @@ header { :deep(.tools) { padding: 0; - - .buttons .item .icon { - color: var(--g-header-color); - } - - .user-container { - font-size: 16px; - color: var(--g-header-color); - } } } diff --git a/src/layouts/components/MainSidebar/index.vue b/src/layouts/components/MainSidebar/index.vue index fc6db4aa..cd98ec30 100755 --- a/src/layouts/components/MainSidebar/index.vue +++ b/src/layouts/components/MainSidebar/index.vue @@ -77,22 +77,19 @@ const { switchTo } = useMenu() :deep(.menu-item) { .menu-item-container { - height: 60px; - padding: 0 5px; + padding-block: 8px; color: var(--g-main-sidebar-menu-color); - background-color: var(--g-main-sidebar-menu-bg); + + &:hover { + color: var(--g-main-sidebar-menu-hover-color); + background-color: var(--g-main-sidebar-menu-hover-bg); + } .menu-item-container-icon { - transform: scale(1); font-size: 24px !important; } } - &:hover .menu-item-container { - color: var(--g-main-sidebar-menu-hover-color); - background-color: var(--g-main-sidebar-menu-hover-bg); - } - &.active .menu-item-container { color: var(--g-main-sidebar-menu-active-color) !important; background-color: var(--g-main-sidebar-menu-active-bg) !important; diff --git a/src/layouts/components/Menu/item.vue b/src/layouts/components/Menu/item.vue index bd38f6d1..ce158e21 100644 --- a/src/layouts/components/Menu/item.vue +++ b/src/layouts/components/Menu/item.vue @@ -46,15 +46,14 @@ defineExpose({
diff --git a/src/layouts/components/SubSidebar/index.vue b/src/layouts/components/SubSidebar/index.vue index c7e9ee74..f26d999f 100755 --- a/src/layouts/components/SubSidebar/index.vue +++ b/src/layouts/components/SubSidebar/index.vue @@ -22,11 +22,11 @@ function onSidebarScroll(e: Event) { const enableSidebar = computed(() => { return settingsStore.mode === 'mobile' || ( ['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode) - && menuStore.sidebarMenus.length !== 0 - && !( - !menuStore.sidebarMenus[0].children - || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false) - ) + && menuStore.sidebarMenus.length !== 0 + && !( + !menuStore.sidebarMenus[0].children + || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false) + ) ) }) diff --git a/src/layouts/components/Topbar/Toolbar/index.vue b/src/layouts/components/Topbar/Toolbar/index.vue index b6a7a5b6..16a75be7 100755 --- a/src/layouts/components/Topbar/Toolbar/index.vue +++ b/src/layouts/components/Topbar/Toolbar/index.vue @@ -18,11 +18,11 @@ const menuStore = useMenuStore() const enableSubMenuCollapseButton = computed(() => { return settingsStore.mode === 'mobile' || ( ['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode) - && settingsStore.settings.menu.enableSubMenuCollapseButton - && !( - !menuStore.sidebarMenus[0].children - || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false) - ) + && settingsStore.settings.menu.enableSubMenuCollapseButton + && !( + !menuStore.sidebarMenus[0].children + || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false) + ) ) })