sis_zhfx/src/views/SandTable/component/weather.vue

// 天气分析
<template>
  <div class="weather">
    <div class="weather-info">
      <span class="svg-icon">
        <svg-icon class="weather-icon" svgid="svg-duoyun" />
      </span>
      <div>
        <div class="temperature">{{ temperature }} °</div>
        <div class="other">
          <span>{{ weather }}</span>
          <span>{{ windDirection }}</span>
          <span>{{ windSpeed }}</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">{{ visibility }}</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">{{ humidity }}</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">{{ pressure }}</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">{{ sunrise }}</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">{{ sunset }}</div>
          <div class="text">日落时间</div>
        </Col>
      </Row>
    </div>
  </div>
</template>

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

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

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

    .weather-icon {
      width: 4.63vh;
      height: 4.63vh;
      margin: 0 1.481vh;
    }
    .temperature {
      font-size: 2.407vh;
    }
    .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: 0.741vh;
    }

    .value {
      margin: 0.741vh 0 0 0;
    }

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