sis_zhfx/src/views/WindSite/pages/Home/wind-site-weather.vue

// 天气分析
<template>
  <div class="wind-site-weather">
    <div class="title">风场 AM10:52 实况</div>
    <div class="weather">
      <div class="weather-info">
        <span class="svg-icon">
          <svg-icon class="weather-icon" svgid="svg-duoyun" />
        </span>
        <div class="temperature-info">
          <div class="temperature">{{ temperature }} °</div>
          <div class="other">
            <div>{{ windDirection }}</div>
            <span>{{ weather }}</span>
            <span>{{ windSpeed }}</span>
          </div>
        </div>
      </div>
      <div class="other-info">
        <Row>
          <Col>
            <div class="svg-icon svg-icon-sm svg-icon-green">
              <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">
              <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">
              <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">
              <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">
              <svg-icon svgid="svg-日落" />
            </div>
            <div class="value">{{ sunset }}</div>
            <div class="text">日落时间</div>
          </Col>
        </Row>
      </div>
    </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 },

  data() {
    return {
      weather: "阴", // 气象法
      temperature: "11", // 温度
      windDirection: "北风", // 风向
      windSpeed: "3-4级", // 风速
      visibility: "20KM", //能见度
      humidity: "75.0%", // 湿度
      pressure: "994kPa", // 气压
      sunrise: "4:06", // 日出
      sunset: "18:50", // 日落
    };
  },
};
</script>

<style lang="less" scoped>
.wind-site-weather {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.741vh 1.481vh;
  display: inline-block;
  border: 0.093vh solid #536268;
  .title {
    font-size: @fontsize;
    color: @gray;
  }

  .weather {
    display: inline-flex;

    .weather-info {
      display: flex;
      .title {
        display: inline-block;
      }

      .weather-icon {
        width: 5.556vh;
        height: 5.556vh;
        margin-right: 0.741vh;
      }

      .temperature-info {
        display: flex;
        .temperature {
          font-size: 2.778vh;
        }
        .other {
          margin-left: -2.963vh;
          margin-right: 1.481vh;
          div {
            text-align: right;
            margin: 0.741vh 0;
          }

          span {
            font-size: 1.111vh;
            margin-left: 2.222vh;
          }
        }
      }
    }

    .other-info {
      text-align: center;
      font-size: 1.111vh;
      .svg-icon {
        margin: auto;
      }

      .text {
        color: @gray;
        width: 5.5vh;
      }

      .value {
        margin: 0.37vh 0;
      }

      .col + .col {
        margin-left: 0.741vh;
      }
    }
  }
}
</style>