JT-CIM/src/views/Map3d/components/weather.vue

<template>
   <div class="box">
	    <p class="boxCity">{{weatcherData.city}}市</p>
		 <p class="boxWeather">{{weatcherData.wea}}<br> 
		 <div class="boxTemperature">
			 {{weatcherData.tem}}°
		 </div>
		 </p>
	  
     
    <!--  <p class="boxWind">{{weatcherData.win}}{{weatcherData.win_speed}}</p> -->
     
   </div>
</template>

<script>
import axios from 'axios'
export default {
   data(){
      return{
         weatcherData:{}
      }
   },
   mounted() {
      this.getWeather();
      this.timer = setInterval(() => {
         this.getWeather();
      }, 1000 * 60 * 60)	//每小时调用一次	
   },
   methods: {
      getWeather() { // 第三方天气api接口
         axios.get('https://yiketianqi.com/free/day', {
            params: {
               unescape: "1",
               appid: '66192398',
               appsecret: 'cqIyJ5ZP',
               // version: 'v91'
            }
         }).then(res => {
            console.log(res.data);
            if (res.data) {
               this.weatcherData = res.data;
            }
         }).catch(err => {
            console.log(err)
         })
      }
   }
}
</script>

<style scoped>
.box{
   display: flex;
   align-items: center;
   color: #fff;
   margin-right: 20rem;
}
.boxTemperature{
   font-size: 18rem;
}
.boxWeather{
   font-size: 14rem;
   margin: 0 0 0 15rem;
}
.boxWind{
   margin: 0 15rem 0 8rem;
   font-size: 14rem;
   
}
.boxCity{
   font-size: 16rem;
}
</style>