代码提交

src/App.vue

@@ -5,11 +5,13 @@
         <div style="font-size:28px;color:#ffffff">{{time}} &nbsp;&nbsp; | &nbsp;&nbsp;{{week}}</div>
       </div>
       <div class="middle">
-        <div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">电力行业发展</div></div>
+        <div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">2022年度中国能源大数据报告——电力行业发展篇</div></div>
         <div class="middleText"><img src="./assets/images/homeText.png"/></div>
-        <div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">能源发展综述</div></div>
+        <div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">2022年度中国能源大数据报告——能源发展综述篇</div></div>
+      </div>
+      <div class="right"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} &nbsp;&nbsp;| &nbsp;&nbsp;<span style="color:rgb(23,231,232)">{{lowTemperature}}-{{highTemperature}}℃</span>&nbsp;&nbsp;|&nbsp;&nbsp; {{wind}}
+      <span style="color:rgb(23,231,232);height: 50%;align-items: center;display: flex;">{{windLevel}}</span>级
       </div>
-      <div class="right"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} &nbsp;&nbsp;| &nbsp;&nbsp;<span style="color:rgb(23,231,232)">{{lowTemperature}}-{{highTemperature}}℃</span>&nbsp;&nbsp;|&nbsp;&nbsp; {{wind}}</div>
     </div>
      <div class="content">
       <router-view />
@@ -76,7 +78,8 @@ import {getData} from './api/index.js'
       highTemperature:'',
       lowTemperature:'',
       wind:'',
-      weatherText:''
+      weatherText:'',
+      windLevel:'',
       }
     },
     mounted() {
@@ -97,13 +100,14 @@ import {getData} from './api/index.js'
         action:'one',
         key:'天气情况'
       }).then((res)=>{
-        let toDay = this.$moment().format("DD")
+        let toDay = this.$moment().format("D")
         for (let i = 0; i < res.data.data.length; i++) {
           if (toDay == res.data.data[i].第N天) {
             this.highTemperature = res.data.data[i].最高温度;
             this.lowTemperature = res.data.data[i].最低温度;
             this.wind = res.data.data[i].风向;
             this.weatherText = res.data.data[i].天气;
+            this.windLevel = res.data.data[i].风力等级;
             switch (this.weatherText) {
                 case "多云":
                   return this.weather = require('./assets/weather/Cloudy .png');
@@ -149,7 +153,8 @@ import {getData} from './api/index.js'
           }else{
             this.highTemperature = '0';
             this.lowTemperature = '0';
-            this.wind = '东风0级';
+            this.wind = '东风';
+            this.windLevel = '0'
             this.weatherText = '阴';
             this.weather = require('./assets/weather/Cloudy .png');
           }
@@ -228,14 +233,14 @@ import {getData} from './api/index.js'
     font-family:"Microsoft YaHei";
   }
   .middle{
-    width: 35%;
+    width: 50%;
     height: 100%;
     font-size:28px;
      display: flex;
      align-items: center;
     justify-content: space-between;
     .leftBtn{
-      width:20%;
+      width:25%;
       height: 100%;
      display: flex;
     justify-content: flex-start;
@@ -243,7 +248,7 @@ import {getData} from './api/index.js'
     .leftBtnText{
       height: 61%;
       // width: 56.62%;
-       width: 62%;
+       width: 100%;
       background: url("./assets/images/btnLeftPdf.png") no-repeat;
       background-size: 100% 100%;
       display: flex;
@@ -252,7 +257,7 @@ import {getData} from './api/index.js'
     }
     }
     .handleAction{
-      width:20%;
+      width:25%;
       height: 100%;
       display: flex;
       justify-content: flex-start;
@@ -279,7 +284,7 @@ import {getData} from './api/index.js'
     //     -webkit-mask:linear-gradient(to top, rgb(58,253,228), transparent );
     // }
     .rightBtn{
-      width:24%;
+      width:25%;
       height: 100%;
      display: flex;
     justify-content: flex-end;
@@ -287,7 +292,7 @@ import {getData} from './api/index.js'
     .rightBtnText{
       height: 61%;
       // width: 56.62%;
-       width: 62%;
+       width: 100%;
       background: url("./assets/images/btnRightPdf.png") no-repeat;
       background-size: 100% 100%;
       display: flex;
@@ -296,7 +301,7 @@ import {getData} from './api/index.js'
     }
     }
     .handleAction1{
-      width:24%;
+      width:25%;
       height: 100%;
      display: flex;
     justify-content: flex-end;