布局代码提交

src/App.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div id="app">
     <div class="top">
@@ -49,7 +50,7 @@ export default {
 <style lang="less" scoped>
 .top{
   width: 100%;
-  height: 9.6%;
+  height: 8.6%;
   display: flex;
   justify-content: space-between;
   .topLeft{
@@ -75,7 +76,9 @@ export default {
   }
 }
 .main{
-  height: calc(100% - 9.6%);
+  height: calc(100% - 8.6%);
   width: 100%;
+  position: relative;
+  top: -3.8%;
 }
 </style>

src/view/index.vue

@@ -51,16 +51,15 @@ methods:{
 
 <style>
 .content{
-    /* width: 100%;
-     */
+    width: 100%;
      height: 100%;
      position: relative;
 }
 .left-content,.right-content{
     position: absolute;
-    width: 396px;
+    width: 20.6%;
     top: 0;
-    height: 980px;
+    height: 100%;
     /* background-color: aqua; */
 }
 /* 内容板块背景 */
@@ -70,23 +69,23 @@ methods:{
     margin-bottom: 5px;
 }
 .left-content .business-hall{
-    height: 378px;
+    height: 38.2%;
     
 }
 .left-content .passenger-flow{
-    height: 392px;
+    height: 39.7%;
 }
 .left-content .hall-statistics{
-    height: 197px;
+    height: 20.4%;
 }
 .right-content .payment{
-    height: 378px;
+    height: 38.3%;
 }
 .right-content .business-acceptance{
-    height: 296px;
+    height: 30%;
 }
 .right-content .service{
-    height: 296px;
+    height: 30%;
 }
 .right-content{
     right: 0;