<!--
 * @Author: song
 * @Date: 2021-12-06 20:47:28
 * @LastEditors: song
 * @LastEditTime: 2022-05-27 19:14:01
 * @Description: file content
 * @FilePath: \lancangrivervue3\src\views\FormalAnalysis\monitor\components\weather.vue
-->
<template>
  <div class="weather">
    <div class="weather-ul">
      <div v-for="(value, key) in forecastData.weatherData" :key="key" @click="weatherClick()" class="weather-li">
        <div
          ><span>{{ key }}</span></div
        >
        <div>
          <div>今天 阴</div>
          <div><img src="../../assets/images/weatherIcon/大雨.png" alt="icon" /></div>
          <div> 30°C </div>
        </div>
        <div>
          <div>今天 阴</div>
          <div><img src="../../assets/images/weatherIcon/大雨.png" alt="icon" /></div>
          <div> 30°C </div>
        </div>
        <div>
          <div>今天 阴</div>
          <div><img src="../../assets/images/weatherIcon/大雨.png" alt="icon" /></div>
          <div> 30°C </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import eventBus from '/@/utils/eventBus';
import { onMounted, reactive } from 'vue';
import { getWeathForecast } from '/@/api/swHome/index';
// 获取天气预报
function weatherClick() {
  eventBus.emit('weatherClick');
}
let forecastData = reactive({
  weatherData: {},
});
function getWeathForecastData() {
  getWeathForecast().then((res) => {
    console.log(res.data);
    forecastData.weatherData = res.data;
  });
}
onMounted(() => {
  getWeathForecastData();
});
</script>
<style scoped lang="less">
.weather {
  padding: 10px;
}
.weather-li {
  display: flex;
  background-color: #06305e;
  // padding: 10px 0;
  margin-bottom: 6px;
  & > div {
    flex: 1;
    text-align: center;
    color: #fff;
    img {
      display: inline-block;
      width: 27px;
    }
    div:nth-child(1) {
      padding-top: 5px;
    }
    div:nth-child(3) {
      font-weight: bold;
    }
  }
  & > div:nth-child(1) {
    flex: initial;
    height: 76px;
    width: 40px;
    background: linear-gradient(270deg, rgba(12, 193, 233, 0.36) 0%, rgba(12, 193, 233, 0) 100%);
    display: flex;
    justify-content: center;
    /* 侧轴剧中 */
    align-items: center;

    span {
      background: linear-gradient(0deg, #69c8ff 0%, #00f6ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      font-size: 18px;
      font-weight: 500;
      writing-mode: vertical-lr;
    }
  }
}
</style>
