From eb2ab518b75c2d38f2064710a5462ec2b0562195 Mon Sep 17 00:00:00 2001
From: saatana <1041367524@qq.com>
Date: Tue, 22 Mar 2022 18:40:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=B8=83=E5=B1=80=E6=BA=A2=E5=87=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/aside.vue  |  3 +++
 src/layouts/components/header.vue |  4 ----
 src/layouts/components/menu.vue   | 28 ++++++++++++++++++----------
 src/layouts/components/title.vue  |  2 +-
 src/layouts/default.vue           | 14 +++-----------
 src/styles/base.less              |  1 -
 6 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/layouts/components/aside.vue b/src/layouts/components/aside.vue
index 20e3678..90ba8a4 100644
--- a/src/layouts/components/aside.vue
+++ b/src/layouts/components/aside.vue
@@ -1,5 +1,6 @@
 <template>
     <el-scrollbar class="layout-aside">
+        <LayoutLogo />
         <el-menu collapse :default-active="activeAside">
             <el-menu-item v-for="(item, index) in asideList" :key="index" :index="item.name" @click="handleClick(item)">
                 <el-icon :name="item.meta.icon" size="30" />
@@ -10,6 +11,8 @@
 </template>
 
 <script setup>
+    import LayoutLogo from './logo.vue';
+
     const store = useStore();
 
     const asideList = computed(() => store.getters['layout/asideList']);
diff --git a/src/layouts/components/header.vue b/src/layouts/components/header.vue
index d071942..aff1664 100644
--- a/src/layouts/components/header.vue
+++ b/src/layouts/components/header.vue
@@ -1,7 +1,5 @@
 <template>
     <div class="layout-header">
-        <LayoutLogo />
-        <LayoutTitle />
         <div class="header-left">
             <el-icon :name="collapseMenu ? 'menu-unfold-fill' : 'menu-fold-fill'" size="16" @click="handleCollapse" />
             <LayoutBreakcrumb />
@@ -14,8 +12,6 @@
 </template>
 
 <script setup>
-    import LayoutLogo from './logo.vue';
-    import LayoutTitle from './title.vue';
     import LayoutBreakcrumb from './breakcrumb.vue';
     import LayoutProfile from './profile.vue';
     import LayoutOperation from './operation.vue';
diff --git a/src/layouts/components/menu.vue b/src/layouts/components/menu.vue
index 8e1f2f2..4451b12 100644
--- a/src/layouts/components/menu.vue
+++ b/src/layouts/components/menu.vue
@@ -1,12 +1,16 @@
 <template>
-    <el-scrollbar class="layout-menu" :class="{ collapse: collapseMenu }">
-        <el-menu unique-opened :default-active="activeMenu" @select="handleSelect">
-            <MenuItem v-for="(item, index) in menuList" :key="index" :menu-item="item" />
-        </el-menu>
-    </el-scrollbar>
+    <div class="layout-menu" :class="{ collapse: collapseMenu }">
+        <LayoutTitle />
+        <el-scrollbar>
+            <el-menu unique-opened :default-active="activeMenu" @select="handleSelect">
+                <MenuItem v-for="(item, index) in menuList" :key="index" :menu-item="item" />
+            </el-menu>
+        </el-scrollbar>
+    </div>
 </template>
 
 <script setup>
+    import LayoutTitle from './title.vue';
     import MenuItem from './menu-item.vue';
     const router = useRouter();
     const store = useStore();
@@ -46,7 +50,6 @@
         width: @layout-menu-width;
         height: 100%;
         background-color: @layout-menu-bgc;
-        padding: @layout-space;
         transition: width 0.3s;
         box-sizing: border-box;
         &.collapse {
@@ -61,10 +64,15 @@
         :deep(*) {
             white-space: nowrap;
         }
-        :deep(.el-scrollbar__view) {
-            height: 100%;
-            .el-menu {
-                border-right: none;
+        :deep(.el-scrollbar) {
+            height: calc(100% - @layout-header-height);
+            padding: @layout-space;
+            box-sizing: border-box;
+            .el-scrollbar__view {
+                height: 100%;
+                .el-menu {
+                    border-right: none;
+                }
             }
         }
     }
diff --git a/src/layouts/components/title.vue b/src/layouts/components/title.vue
index 33ee1bf..9086a52 100644
--- a/src/layouts/components/title.vue
+++ b/src/layouts/components/title.vue
@@ -14,7 +14,7 @@
 <style lang="less" scoped>
     .layout-title {
         width: @layout-menu-width;
-        height: 100%;
+        height: @layout-header-height;
         background-color: @layout-menu-bgc;
         padding: 0 @layout-space;
         transition: width 0.3s;
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 710eb39..8a25ffe 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,8 +1,5 @@
 <template>
     <div class="layout-container layout-default">
-        <div class="layout-top">
-            <LayoutHeader />
-        </div>
         <div class="layout-left">
             <LayoutAside />
         </div>
@@ -10,6 +7,7 @@
             <LayoutMenu />
         </div>
         <div class="layout-right">
+            <LayoutHeader />
             <LayoutTabs />
             <LayoutMain />
             <LayoutFooter />
@@ -28,18 +26,12 @@
 
 <style lang="less" scoped>
     .layout-container {
-        width: 100%;
-        height: 100%;
+        width: 100vw;
+        height: 100vh;
         background-color: @color-white-dark;
     }
     .layout-default {
         display: flex;
-        flex-wrap: wrap;
-        .layout-top {
-            width: 100%;
-            box-shadow: @layout-shadow;
-            z-index: 10;
-        }
         .layout-left {
             display: flex;
             flex-direction: column;
diff --git a/src/styles/base.less b/src/styles/base.less
index 1ac6b93..2d39849 100644
--- a/src/styles/base.less
+++ b/src/styles/base.less
@@ -10,7 +10,6 @@ ul,
 ol {
     list-style: none;
 }
-// *:not([class^='el-']):not([class^='el-'] *) {
 *:not([class^='el-']) {
     margin: 0;
     padding: 0;