sis_zhfx/src/views/Home/components/weather.vue

<template>
  <div class="weather">
    <div class="weather-info">
      <span class="svg-icon">
        <svg-icon class="weather-icon" :svgid="'svg-' + sourceMap.tqtp" />
      </span>
      <div>
        <div class="temperature">{{ sourceMap.wd }} °</div>
        <div class="other">
          <span>{{ sourceMap.tqmc }}</span>
          <span>{{ sourceMap.fx }}</span>
          <span>{{ sourceMap.fs }}</span>
        </div>
      </div>
    </div>
    <div class="other-info">
      <Row>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-能见度" />
          </div>
          <div class="value">{{ sourceMap.qxd }}</div>
          <div class="text">能见度</div>
        </Col>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-湿度" />
          </div>
          <div class="value">{{ sourceMap.sd }}</div>
          <div class="text">湿度</div>
        </Col>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-气压" />
          </div>
          <div class="value">{{ sourceMap.dqyl }}kPa</div>
          <div class="text">气压</div>
        </Col>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-日出" />
          </div>
          <div class="value">{{ sourceMap.richushijian }}</div>
          <div class="text">日出时间</div>
        </Col>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-日落" />
          </div>
          <div class="value">{{ sourceMap.riluoshijian }}</div>
          <div class="text">日落时间</div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import Col from "@/components/coms/grid/col.vue";
import Row from "@/components/coms/grid/row.vue";
import SvgIcon from "../../../components/coms/icon/svg-icon.vue";

export default {
  components: { Row, Col, SvgIcon },
  props:{
    data:{
      type:Object,
      default:() => { }
    }
  },
  // 数据自己获取天气情况
  data() {
    return {
      sourceMap:{},
      weather: "阴", // 气象
      temperature: "11", // 温度
      windDirection: "北风", // 风向
      windSpeed: "3-4级", // 风速
      visibility: "20KM", //能见度
      humidity: "75.0%", // 湿度
      pressure: "994kPa", // 气压
      sunrise: "08:10", // 日出
      sunset: "17:39", // 日落
    };
  },

  mounted(){
    this.sourceMap=this.data;
  },

  watch:{
    data(res){
      this.sourceMap=res;
    }
  }
};
</script>

<style lang="less" scoped>
.weather {
  .weather-info {
    display: flex;
    margin-bottom: 1.481vh;

    .weather-icon {
      width: 5.5556vh;
      height: 5.5556vh;
      margin: 0 1.481vh;
    }
    .temperature {
      font-size: 2.778vh;
    }
    .other span {
      font-size: @fontsize-s;
      margin-right: 2.222vh;
    }
  }

  .other-info {
    text-align: center;
    font-size: @fontsize-s;

    .text {
      color: @font-color;
      font-size: 12px;
      margin-bottom: 8px;
    }

    .value {
      margin: 8px 0;
    }

    .other-icon {
      margin: 0 auto;
    }
  }
}
</style>