和风天气组件

查询最近7天的天气，需在和风天气平台注册

组件代码：

<template>
  <div class="weather-box">
    <div class="screen-weather" @mouseenter="getWeather">
      <svg-icon :icon-class="weatherNow.icon" :class-name="weatherNow.icon" style="height: 24px;width: 24px;" fill="#FFFFFF"></svg-icon>
      <div class="screen-weather-ct">{{weatherNow?.text || ''}}</div>
      <div>{{(weatherNow?.temp || '')+'℃'}}</div>
    </div>
    <div class="weather-more" >
      <div class="weather-more-item" v-for="(item,index) in weatherList" :key="index">
        <div>{{item.fxDate}}</div>
        <svg-icon :icon-class="item.iconDay" :class-name="item.iconDay" style="height: 25px;width: 16px;"  fill="#FFFFFF"></svg-icon>
        <div>{{item.textDay}}</div>
        <div>{{item.tempMin+'℃~'+item.tempMax+'℃'}}</div>
      </div>
    </div>
  </div>

</template>

<script setup>
import {searchWeather, searchWeatherNow} from "../../../api/screen/weather";

const weatherList = ref([])
const weatherNow = ref({})

async function getWeatherNow() {
  let res = await searchWeatherNow()
  weatherNow.value = res.data.now
}

async function getWeather() {
  if(weatherList.value.length<=0){
    let res = await searchWeather()
    weatherList.value = res.data.daily
  }
}

getWeatherNow()
</script>

<style scoped>
.weather-box{
  position: relative;
  /*pointer-events: none;*/
}
.screen-weather {
  gap:20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 40px;
  cursor: pointer;
}
.weather-more{
  width: 270px;
  height: 280px;
  box-sizing: border-box;
  padding: 10px;
  background:#002856;
  display: none; /* 默认隐藏 */
  /*display: flex;*/
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top:40px;
  z-index: 999;
  border-radius: 4px;
  border: 1px solid rgba(216,240,255,0.1);
}

/* 鼠标悬停在父容器或自己时显示 */
.screen-weather:hover ~ .weather-more,  /* 兄弟选择器 */
.weather-more:hover {
  display: flex;
}

.weather-more-item{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #D8F0FF;
}
</style>