天气前端接入

src/components/Header.vue

@@ -10,7 +10,15 @@
       <div class="title_bg_title">{{ systemName }}</div>
     </div>
     <!-- 天气 -->
-    <div class="weather">天气</div>
+    <div class="weather">
+      <div class="tq_img">
+        <img :src="tq_imgsrc" />
+      </div>
+      <div>
+        <div class="temperature">{{ temperature }}度</div>
+        <div class="tq_text">{{ tq_text }}</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -23,6 +31,9 @@ export default {
       setInterval_: "",
       date: "",
       systemName: "",
+      temperature: "", // 天气
+      tq_text: "",
+      tq_imgsrc: ""
     };
   },
   created() {
@@ -49,6 +60,7 @@ export default {
   methods: {
     // 前提获取
     tqRefresh() {
+      let that = this;
       let loc = this.getCenterPosition(viewer);
       axios
         .get(
@@ -57,12 +69,13 @@ export default {
             ":" +
             loc.lon
         )
-        .then((data) => {
+        .then(data => {
           //解析 {data}
           let result = data.data.results[0];
-          let imgsrc = "./images/tianqi/" + result.now.code + "@1x.png";
-          let text = result.now.text;
-          let temperature = result.now.temperature;
+          that.tq_imgsrc =
+            "./static/image/tianqi/" + result.now.code + "@1x.png";
+          that.tq_text = result.now.text;
+          that.temperature = result.now.temperature;
         });
     },
     // 获取当前地图中心的经纬度
@@ -73,25 +86,27 @@ export default {
           viewer.canvas.clientHeight / 2
         )
       );
-      let curPosition = SkyScenery.Ellipsoid.WGS84.cartesianToCartographic(centerResult);
+      let curPosition = SkyScenery.Ellipsoid.WGS84.cartesianToCartographic(
+        centerResult
+      );
       let curLongitude = (curPosition.longitude * 180) / Math.PI;
       let curLatitude = (curPosition.latitude * 180) / Math.PI;
       return {
         lon: curLongitude,
-        lat: curLatitude,
+        lat: curLatitude
       };
-    },
+    }
   },
   computed: {
     mapStatus() {
       return this.$store.state.initMap;
-    },
+    }
   },
   watch: {
     mapStatus(newVal, oldVal) {
       if (newVal) this.tqRefresh();
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -118,7 +133,7 @@ export default {
   text-shadow: 1px 1px 1px #000, 0 0 5px #000;
   .time {
     color: #ffffff;
-    font-size: 20px;
+    font-size: 24px;
   }
   .date {
     color: #f2f6fc;
@@ -127,10 +142,37 @@ export default {
 }
 .weather {
   display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   width: calc(50vw - 698px - 10px);
   height: 60px;
   margin-right: 10px;
-  background: red;
+  color: #ffffff;
+  text-align: right;
+  font-family: "YouSheBiaoTiHei";
+  text-shadow: 1px 1px 1px #000, 0 0 5px #000;
+  .tq_img {
+    width: 40px;
+    height: 40px;
+    margin: 10px 10px;
+    display: flex;
+    justify-content: center;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .temperature,
+  .tq_text {
+    max-width: 105px;
+  }
+  .temperature {
+    font-size: 24px;
+  }
+  .tq_text {
+    font-size: 16px;
+  }
 }
 .title_bg {
   position: relative;