代码提交

src/App.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div id="app">
     <div class="top">
@@ -11,12 +12,19 @@
         </div>
       </div>
       <div class="topCenter">
-        <div class="topText" text="国网南京雨花供电营业厅">
-          国网南京雨花供电营业厅
+        <div class="topText">
+          <img src="./assets/images/topText.png"/>
         </div>
         
       </div>
-      <div class="topRight"></div>
+      <div class="topRight">
+        <div>
+          天气&nbsp;:&nbsp;
+          <img src="./assets/weather/sun.png"/>
+          多云
+        </div>
+        <div style="color:rgb(57,173,194)">|&nbsp;&nbsp;5~25℃</div>
+      </div>
     </div>
     <div class="main">
       <router-view /> 
@@ -52,7 +60,7 @@ export default {
 <style lang="less" scoped>
 .top{
   width: 100%;
-  height: 93px;
+  height: 8.6%;
   display: flex;
   jjustify-content: space-evenly;
   .topLeft{
@@ -74,29 +82,24 @@ export default {
     justify-content: center;
     .topText{
       height: 65%;
-      font-size: 35px;
       display: flex;
       align-items: center;
-      color: #ffffff;
-    }
-      .topText:before{
-        content: attr(text);
-        position: absolute;
-        z-index: 10;
-        color:rgb(86, 254, 246);
-        -webkit-mask:linear-gradient(to top , transparent,);
     }
   }
   .topRight{
-    width: 11%;
-    height: 100%;
-    border: 1px solid blue;
+    width: 12%;
+    height: 50%;
+    color:#ffffff;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    color: #fff;
   }
 }
 .main{
-  height: calc(1080px - 93px);
+  height: calc(100% - 8.6%);
   width: 100%;
   position: relative;
-  top: -40px;
+  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;