1. init scrollbar 外壳交互优化处理

src/views/pages/main.vue

 <template>
-    <div class="manager-container d-flex flex-column">
-        <div class="flex-none">
-            <CommonHeader></CommonHeader>
+    <el-scrollbar class="container-scrollbar-main">
+        <div class="manager-container d-flex flex-column">
+            <div class="flex-none">
+                <CommonHeader></CommonHeader>
+            </div>
+            <div class="root-contaniner d-flex">
+                <el-scrollbar class="container-scrollbar-left">
+                    <AsidePanels class="flex-none"></AsidePanels>
+                </el-scrollbar>
+                <el-scrollbar class="container-scrollbar-right">
+                    <div
+                        class="
+                            main-container
+                            flex-fill
+                            d-flex
+                            align-items-center
+                            justify-content-center
+                        "
+                    >
+                        <router-view
+                            class="router-page flex-fill"
+                        ></router-view>
+                    </div>
+                </el-scrollbar>
+            </div>
         </div>
-        <div class="root-contaniner d-flex">
-            <el-scrollbar class="container-scrollbar-left">
-                <AsidePanels class="flex-none"></AsidePanels>
-            </el-scrollbar>
-            <el-scrollbar class="container-scrollbar-right">
-                <div
-                    class="
-                        main-container
-                        flex-fill
-                        d-flex
-                        align-items-center
-                        justify-content-center
-                    "
-                >
-                    <router-view class="router-page flex-fill"></router-view>
-                </div>
-            </el-scrollbar>
-        </div>
-    </div>
+    </el-scrollbar>
 </template>
 
 <script lang="ts">
@@ -37,10 +41,10 @@
     @import "~@/css/variables.less";
     .manager-container {
         height: 100%;
-        min-width: 1200px;
 
         .root-contaniner {
             height: calc(100vh - 64px);
+            min-width: 1200px;
         }
 
         .main-container {
@@ -62,18 +66,19 @@
         height: 100%;
     }
 
-    .container-scrollbar-left,
-    .container-scrollbar-right {
+    /deep/ .container-scrollbar-left,
+    /deep/ .container-scrollbar-main,
+    /deep/ .container-scrollbar-right {
         display: flex;
         flex-direction: column;
 
-        /deep/ .el-scrollbar__wrap {
+        > .el-scrollbar__wrap {
             display: flex;
             flex-direction: column;
             flex: 1 1 auto;
             height: 100%;
 
-            .el-scrollbar__view {
+            > .el-scrollbar__view {
                 height: 100%;
             }
         }