<template>
  <div id="weather2">
    <div class="item">
      <img src="../../../../public/img/grid/tem.png" alt="">
      <span>{{tem}}</span>
    </div>
    <div class="item">
      <img src="../../../../public/img/grid/humidity.png" alt="">
      <span>{{humidity}}</span>
    </div>
    <div class="item">
      <img src="../../../../public/img/grid/pm25.png" alt="">
      <span>{{pm25}}</span>
    </div>
  </div>
</template>
<script>

  export default{
    data(){
      return{
        tem:null,
        humidity:null,
        pm25:32,
      }
    },
    mounted() {
        var _this = this;
      $.get("https://tianqiapi.com/api?vue=1&version=v10&appid=86846957&appsecret=Tb1guLov",(res)=>{
        if(res.pm25){
          _this.pm25 = JSON.parse(res).pm25
        }
      })
      //加载天气查询插件
      AMap.plugin('AMap.Weather', function() {
          //创建天气查询实例
          var weather = new AMap.Weather();
          //执行实时天气信息查询
          weather.getLive('银川', function(err, data) {
              _this.humidity = data.humidity;
              _this.tem = data.temperature
          });
      });

    },

  }



</script>

<style lang="less">
  #weather2{
    display: flex;
    position: absolute;
    bottom: -10px;
    right: 15%;
    .item{
      display: flex;
      align-items: center;
      margin-left: 20px;
      img{
        width: 25px;
        height: 25px;
        display: block;
      }
      span{
        margin-left: 10px;
        font-size: 16px;
        font-weight: bold;
        color: rgba(3,221,255,0.8);
        display: block;
      }
    }
  }
</style>
