DX-LargeScreen/src/components2/weather/index.vue

<template>
  <el-row class="weather modular" :gutter="40" >
    <el-col :span="8" class="rowN">
      <el-image :src="weather1" fit="scale-down" />
      <div class="name">温度</div>
      <div class="num">
        {{data.temperature}}
        <div class="unit">℃</div>
      </div>
    </el-col>
    <el-col :span="8" class="rowN">
      <el-image :src="weather2" fit="scale-down" />
      <div class="name">湿度</div>
      <div class="num">
        {{data.sd}}
        <div class="unit">%RH</div>
      </div>
    </el-col>
    <el-col :span="8" class="rowN">
      <el-image :src="weather3" fit="scale-down" />
      <div class="name">PM2.5</div>
      <div class="num">
        {{data.aqiDetail.pm2_5}}
        <div class="unit">ug/m3</div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import axios from 'axios'
import weather1 from "@/assets/images2/温度.png";
import weather2 from "@/assets/images2/湿度.png";
import weather3 from "@/assets/images2/pm2.5.png";
export default {
  name: "weather",
  data() {
    return {
      weather1: weather1,
      weather2: weather2,
      weather3: weather3,
      data:{
        aqiDetail:{}
      }
    };
  },
  created(){
    this.initData()
  },
  methods: {
    //初始化数据
    initData() {
      axios({
            method: 'get',
            url: 'https://smartpark.caih.com/dxapi/aliWeather?area=南宁',
            timeout: 3000,
        }).then(res =>{
            this.data = res.data.showapi_res_body.now
        }).catch(err =>{
        })
    },
  }
};
</script>
<style lang="scss" scoped>
.weather{
  height:100px;
}
.rowN {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  .el-image {
    width: 60px;
    margin-top:-1px;
  }
  .name {
    font-size: 20px;
    margin: auto 24px auto 12px;
  }
  .num {
    font-size: 36px;
    font-family: "DINAlternate-Bold";
    font-weight: 700;
    display: inline-block;
    margin: auto 24px auto 12px;
    .unit {
      font-size: 24px;
      font-family: "MicrosoftYaHei-Bold";
      font-weight: 700;
      display: inline-block;
    }
  }
}
</style>