fix:布局溢出问题

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']);

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';

src/layouts/components/menu.vue

@@ -1,12 +1,16 @@
 <template>
-    <el-scrollbar class="layout-menu" :class="{ collapse: collapseMenu }">
+    <div class="layout-menu" :class="{ collapse: collapseMenu }">
-        <el-menu unique-opened :default-active="activeMenu" @select="handleSelect">
+        <LayoutTitle />
-            <MenuItem v-for="(item, index) in menuList" :key="index" :menu-item="item" />
+        <el-scrollbar>
-        </el-menu>
+            <el-menu unique-opened :default-active="activeMenu" @select="handleSelect">
-    </el-scrollbar>
+                <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) {
+        :deep(.el-scrollbar) {
-            height: 100%;
+            height: calc(100% - @layout-header-height);
-            .el-menu {
+            padding: @layout-space;
-                border-right: none;
+            box-sizing: border-box;
+            .el-scrollbar__view {
+                height: 100%;
+                .el-menu {
+                    border-right: none;
+                }
             }
         }
     }

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;

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%;
+        width: 100vw;
-        height: 100%;
+        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;

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;