优化布局

src/assets/css/main.css

@@ -8,7 +8,7 @@ body,
 .wrapper {
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
 }
 body {
   font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
@@ -29,13 +29,15 @@ body {
 .body{
   padding: 0 20px;
   padding-top: 20px;
+
 }
 .query{
   height: 105px;
   background-color: white;
   padding-left: 36px;
   padding-right: 30px;
-  min-width: 1460px;
+  /* min-width: 1460px; */
+
 }
 .f_title{
   font-size:16px
@@ -78,7 +80,7 @@ body {
   padding-right: 30px;
   box-sizing: border-box;
   overflow-y: auto;
-  min-width: 1460px;
+  /* min-width: 1460px; */
 }
 .table_title{
   display: flex;

src/components/Header.vue

@@ -40,7 +40,8 @@ export default {
     color: white;
   }
   .header{
-    width: 100%;
+    /* width: 100%; */
+    min-width: 1903px;
     height: 65px;
     display: flex;
     align-items: center;

src/components/Home.vue

@@ -3,13 +3,15 @@
     <v-head :name="data.accountName"></v-head>
     <div class="bootm">
       <v-sidebar :auth="data.auth"></v-sidebar>
-      <div class="content-box">
+      <!-- <div> -->
-        <div class="content">
+        <div class="content-box">
-          <transition name="move" mode="out-in">
+          <div class="content">
-            <router-view></router-view>
+            <transition name="move" mode="out-in">
-          </transition>
+              <router-view></router-view>
+            </transition>
+          </div>
         </div>
-      </div>
+      <!-- </div> -->
     </div>
   </div>
 </template>
@@ -72,18 +74,27 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+  .wrapper{
+    overflow:auto;
+    /* overflow: overlay */
+  }
   .content-box{
-    width: 100%;
+    min-height:903px;
+    min-width: 1700px;
     border-top: 2px solid #9A9A9A;
     border-left: 2px solid #9A9A9A;
     background: #F0F2F5;
     box-sizing: border-box;
+    /* overflow: auto; */
+
   }
   .content{
 
   }
   .bootm{
     display: flex;
-    height: 100%;
+    /* height: 100%; */
+    /* min-height:903px; */
+    background: #F0F2F5;
   }
 </style>

src/components/Sidebar.vue

@@ -196,7 +196,7 @@ export default {
 <style scoped>
   .sidebar_body{
     width: 200px;
-    height: 100%;
+    /* height: 100%; */
   }
   .sidebar{
     height: 100%;