hyyfScreen/src/views/MainLayout.vue

<template>
  <div class="MainLayout" @click="showWeather = false">
    <div class="main-title">{{title}}</div>
    <div class="main-left">
      <!--  天气    -->
      <div v-show="isHome" class="main-home" @click.stop="showWeather = true">
        <div class="weatherBox" v-if="Object.keys(weather).length !== 0">
          <div class="box-left">
            <i class="qing" v-if="weather.day_weather === '晴'"></i>
            <i class="duoyun" v-else-if="weather.day_weather === '多云'"></i>
            <i class="yin" v-else-if="weather.day_weather === '阴'"></i>
            <i class="xiaoyu" v-else-if="weather.day_weather === '小雨'"></i>
            <i class="zyu" v-else-if="weather.day_weather.indexOf('中雨') != -1"></i>
            <i class="dyu" v-else-if="weather.day_weather.indexOf('大雨') != -1"></i>
            <i class="byu" v-else-if="weather.day_weather.indexOf('暴雨') != -1"></i>
            <i class="xxue" v-else-if="weather.day_weather === '小雪'"></i>
            <i class="zxue" v-else-if="weather.day_weather.indexOf('中雪') != -1"></i>
            <i class="dxue" v-else-if="weather.day_weather.indexOf('大雪') != -1"></i>
            <i class="bxue" v-else-if="weather.day_weather.indexOf('暴雪') != -1"></i>
            <i class="wu" v-else-if="weather.day_weather === '雾'"></i>
          </div>
          <div class="box-right">
            <p class="fontSize">{{weather.day_weather}}</p>
            <p class="fontSize">{{weather.min_degree}}-{{weather.max_degree}}℃</p>
          </div>
        </div>
        <div v-else @click="refresh">抓取天气数据失败，请重试</div>
      </div>
      <!--  返回首页    -->
      <div v-show="!isHome" class="main-back" @click="back">首页</div>
    </div>
    <div class="main-right" v-show="isHome">
      <i class="maxTem" v-if="alarm.maxTem" @click="openShow(0)"></i>
      <i class="minTem" v-if="alarm.minTem" @click="openShow(1)"></i>
      <template v-if="Object.keys(weatherInfo).length > 0">
        <i class="shan minSize" v-if="weatherInfo[0].type_name.indexOf('电') != -1" @click="openShow(2)"></i>
        <i class="wu minSize" v-if="weatherInfo[0].type_name.indexOf('雾') != -1" @click="openShow(2)"></i>
        <i class="hanchao minSize" v-if="weatherInfo[0].type_name.indexOf('寒潮') != -1" @click="openShow(2)"></i>
        <i class="taifeng minSize" v-if="weatherInfo[0].type_name.indexOf('台风') != -1" @click="openShow(2)"></i>
        <i class="dafeng minSize"  v-if="weatherInfo[0].type_name.indexOf('大风') != -1" @click="openShow(2)"></i>
        <i class="byu minSize" v-if="weatherInfo[0].type_name.indexOf('暴雨') != -1" @click="openShow(2)"></i>
        <i class="bxue minSize" v-if="weatherInfo[0].type_name.indexOf('暴雪') != -1" @click="openShow(2)"></i>
      </template>
    </div>
    <div class="time" v-show="isHome">{{currentTime}}</div>
    <div class="main-bottom">
      <p style="margin: 0">青莲食品</p>
      <p style="font-size: 12px; margin: 0; color: #fff; opacity: 0.4">本软件由杭州慧牧提供技术支持</p>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
    <transition :name=" isHome ? 'moveL' : 'moveR' ">
      <div id="weather" :class="[isHome ? 'weather1' : 'weather2']" v-if="showWeather">
        <div class="dayWeather">
          <p class="weatherTitle"><strong>{{getFarmName()}}</strong>&emsp;{{weather.location.replace(/,/g, '-')}}&emsp;今日：{{weather.day_weather}}&emsp;{{weather.min_degree}}℃~{{weather.max_degree}}℃&emsp;{{weather.day_wind_direction}}{{weather.day_wind_power}}级</p>
          <div class="dayFlex">
            <div class="FlexIcon">
              <i class="qing maxSize" v-if="weather.day_weather === '晴'"></i>
              <i class="duoyun maxSize" v-else-if="weather.day_weather === '多云'"></i>
              <i class="yin maxSize" v-else-if="weather.day_weather === '阴'"></i>
              <i class="xiaoyu maxSize" v-else-if="weather.day_weather === '小雨'"></i>
              <i class="zyu maxSize" v-else-if="weather.day_weather.indexOf('中雨') != -1"></i>
              <i class="dyu maxSize" v-else-if="weather.day_weather.indexOf('大雨') != -1"></i>
              <i class="byu maxSize" v-else-if="weather.day_weather.indexOf('暴雨') != -1"></i>
              <i class="xxue maxSize" v-else-if="weather.day_weather === '小雪'"></i>
              <i class="zxue maxSize" v-else-if="weather.day_weather.indexOf('中雪') != -1"></i>
              <i class="dxue maxSize" v-else-if="weather.day_weather.indexOf('大雪') != -1"></i>
              <i class="bxue maxSize" v-else-if="weather.day_weather.indexOf('暴雪') != -1"></i>
              <i class="wu maxSize" v-else-if="weather.day_weather === '雾'"></i>
              <span>{{weather.degree}}℃</span>
            </div>
            <div class="FlexInfo">
              <p>空气质量：<span>{{weather.airQuility}}</span></p>
              <p>空气湿度：<span>{{weather.humidity}}</span></p>
            </div>
            <div class="FlexInfo" v-if="Object.keys(weatherInfo).length > 0">
              <p @click.stop="openShow(2)">{{weatherInfo[0].type_name}}{{weatherInfo[0].level_name}}预警</p>
            </div>
          </div>
        </div>0
        <div class="chart">
          <chart-weather :data="weatherList"></chart-weather>
        </div>
        <div class="weatherGrid">
          <div>
            <p>今日</p>
            <p style="display: inline-block; width: 28px; height: 28px;">
              <i class="qing" v-if="weather.day_weather === '晴'"></i>
              <i class="duoyun" v-else-if="weather.day_weather === '多云'"></i>
              <i class="yin" v-else-if="weather.day_weather === '阴'"></i>
              <i class="xiaoyu" v-else-if="weather.day_weather === '小雨'"></i>
              <i class="zyu" v-else-if="weather.day_weather.search('中雨') != -1"></i>
              <i class="dyu" v-else-if="weather.day_weather.search('大雨') != -1"></i>
              <i class="byu" v-else-if="weather.day_weather.search('暴雨') != -1"></i>
              <i class="xxue" v-else-if="weather.day_weather === '小雪'"></i>
              <i class="zxue" v-else-if="weather.day_weather.search('中雪') != -1"></i>
              <i class="dxue" v-else-if="weather.day_weather.search('大雪') != -1"></i>
              <i class="bxue" v-else-if="weather.day_weather.search('暴雪') != -1"></i>
              <i class="wu" v-else-if="weather.day_weather === '雾'"></i>
            </p>
            <p>{{weather.day_weather}}</p>
            <p>{{weather.min_degree}}℃~{{weather.max_degree}}℃</p>
            <p>{{weather.day_wind_direction}}{{weather.day_wind_power}}级</p>
          </div>
          <div>
            <p>{{weather.tomorrow.weather_time}}</p>
            <p style="display: inline-block; width: 28px; height: 28px;">
              <i class="qing" v-if="weather.tomorrow.day_weather === '晴'"></i>
              <i class="duoyun" v-else-if="weather.tomorrow.day_weather === '多云'"></i>
              <i class="yin" v-else-if="weather.tomorrow.day_weather === '阴'"></i>
              <i class="xiaoyu" v-else-if="weather.tomorrow.day_weather === '小雨'"></i>
              <i class="zyu" v-else-if="weather.tomorrow.day_weather.search('中雨') != -1"></i>
              <i class="dyu" v-else-if="weather.tomorrow.day_weather.search('大雨') != -1"></i>
              <i class="byu" v-else-if="weather.tomorrow.day_weather.search('暴雨') != -1"></i>
              <i class="xxue" v-else-if="weather.tomorrow.day_weather === '小雪'"></i>
              <i class="zxue" v-else-if="weather.tomorrow.day_weather.search('中雪') != -1"></i>
              <i class="dxue" v-else-if="weather.tomorrow.day_weather.search('大雪') != -1"></i>
              <i class="bxue" v-else-if="weather.tomorrow.day_weather.search('暴雪') != -1"></i>
              <i class="wu" v-else-if="weather.tomorrow.day_weather === '雾'"></i>
            </p>
            <p>{{weather.tomorrow.day_weather}}</p>
            <p>{{weather.tomorrow.min_degree}}℃~{{weather.tomorrow.max_degree}}℃</p>
            <p>{{weather.tomorrow.day_wind_direction}}{{weather.tomorrow.day_wind_power}}级</p>
          </div>
          <div>
            <p>{{weather.towTomorrow.weather_time}}</p>
            <p style="display: inline-block; width: 28px; height: 28px;">
              <i class="qing" v-if="weather.towTomorrow.day_weather === '晴'"></i>
              <i class="duoyun" v-else-if="weather.towTomorrow.day_weather === '多云'"></i>
              <i class="yin" v-else-if="weather.towTomorrow.day_weather === '阴'"></i>
              <i class="xiaoyu" v-else-if="weather.towTomorrow.day_weather === '小雨'"></i>
              <i class="zyu" v-else-if="weather.towTomorrow.day_weather.search('中雨') != -1"></i>
              <i class="dyu" v-else-if="weather.towTomorrow.day_weather.search('大雨') != -1 "></i>
              <i class="byu" v-else-if="weather.towTomorrow.day_weather.search('暴雨') != -1"></i>
              <i class="xxue" v-else-if="weather.towTomorrow.day_weather === '小雪'"></i>
              <i class="zxue" v-else-if="weather.towTomorrow.day_weather.search('中雪') != -1"></i>
              <i class="dxue" v-else-if="weather.towTomorrow.day_weather.search('大雪') != -1 "></i>
              <i class="bxue" v-else-if="weather.towTomorrow.day_weather.search('暴雪') != -1 "></i>
              <i class="wu" v-else-if="weather.towTomorrow.day_weather === '雾'"></i>
            </p>
            <p>{{weather.towTomorrow.day_weather}}</p>
            <p>{{weather.towTomorrow.min_degree}}℃~{{weather.towTomorrow.max_degree}}℃</p>
            <p>{{weather.towTomorrow.day_wind_direction}}{{weather.towTomorrow.day_wind_power}}级</p>
          </div>
          <div>
            <p>{{weather.threeTomorrow.weather_time}}</p>
            <p style="display: inline-block; width: 28px; height: 28px;">
              <i class="qing" v-if="weather.threeTomorrow.day_weather === '晴'"></i>
              <i class="duoyun" v-else-if="weather.threeTomorrow.day_weather === '多云'"></i>
              <i class="yin" v-else-if="weather.threeTomorrow.day_weather === '阴'"></i>
              <i class="xiaoyu" v-else-if="weather.threeTomorrow.day_weather === '小雨'"></i>
              <i class="zyu" v-else-if="weather.threeTomorrow.day_weather.search('中雨') != -1"></i>
              <i class="dyu" v-else-if="weather.threeTomorrow.day_weather.search('大雨') != -1 "></i>
              <i class="byu" v-else-if="weather.threeTomorrow.day_weather.search('暴雨') != -1"></i>
              <i class="xxue" v-else-if="weather.threeTomorrow.day_weather === '小雪'"></i>
              <i class="zxue" v-else-if="weather.threeTomorrow.day_weather.search('中雪') != -1 "></i>
              <i class="dxue" v-else-if="weather.threeTomorrow.day_weather.search('大雪') != -1"></i>
              <i class="bxue" v-else-if="weather.threeTomorrow.day_weather.search('暴雪') != -1"></i>
              <i class="wu" v-else-if="weather.threeTomorrow.day_weather === '雾'"></i>
            </p>
            <p>{{weather.threeTomorrow.day_weather}}</p>
            <p>{{weather.threeTomorrow.min_degree}}℃~{{weather.threeTomorrow.max_degree}}℃</p>
            <p>{{weather.threeTomorrow.day_wind_direction}}{{weather.threeTomorrow.day_wind_power}}级</p>
          </div>
        </div>
      </div>
    </transition>
    <div class="farm">
      <label>当前牧场：</label>
      <el-select @change="onChange" v-model="farmId" size="mini" style="width: 150px;">
        <el-option v-for="item in getFarmList" :key="item.id" :label="item.farmName" :value="item.id"></el-option>
      </el-select>
    </div>
    <div class="alarmlist" v-show="alarmType && active!== 2" @mouseover="stopOut" @mouseout="startOut">
      <p style="color: #FF0033">{{alarmList[active]}}</p>
      <p style="color: #FF0033">{{str}}</p>
    </div>
    <div class="alarmText" v-show="alarmType && active === 2"  @mouseover="stopOut" @mouseout="startOut">
      <p style="color: #FF0033">{{alarmInfo}}</p>
      <p style="color: #FF0033">{{str}}</p>
    </div>
  </div>
</template>

<script>
import {getFarmId, getWeather, findUpdate, InfoWeater} from "@/utils/api";
import { mapActions, mapState } from 'vuex';
import { Select } from "element-ui";
import chartWeather from "@/views/Home/chart/chartWeather";

export default {
  name: "MainLayout",
  components: {
    'el-select': Select,
    chartWeather

  },
  data() {
    return {
      title: '',
      isHome: true,
      currentTime: '',
      timer4: null,
      showWeather: false,
      weather: {},
      // 天气报警
      weatherInfo: {},
      xList: [],
      isShow: false,
      getFarmList: [],
      alarm: {
        maxTem: false,
        minTem: false,
        maxTemStr: '',
        minTemStr: '',
      },
      alarmList: ['高温报警', '低温报警', '恶劣天气报警'],
      active: 0,
      str: '',
      alarmType: false,
      weatherList: [],
      alarmInfo: '',
      timer: null
    }
  },
  watch: {
    $route(newVal) {
      if(newVal) {
        this.title = newVal.meta.title;
        if (newVal.name === 'Home') {
          this.isHome = true;
          this.initTime();
        } else {
          this.isHome = false;
          clearInterval(this.timer4);
        }
      }
    },
    farmList: {
      handler(newVal) {
        if(newVal.length > 0) {
          this.getFarmList = []
          newVal.forEach(item => {
            if(item.rowStatus) {
              this.getFarmList.push(item)
            }
          })
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapState(['farmList', 'farmId'])
  },
  methods: {
    ...mapActions(['GetFarm', 'setFarmIdAsync']),
    initTime() {
      var _this = this;
      this.timer4 = setInterval(function() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var hour = date.getHours();
        var minutes = date.getMinutes() ;
        var seconds = date.getSeconds();
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if(hour >=1&& hour <= 9) {
          hour = "0" + hour;
        }
        if(minutes >=1&& minutes <= 9) {
          minutes = "0" + minutes;
        }
        if(seconds >=1&& seconds <= 9) {
          seconds = "0" + seconds;
        }
        _this.currentTime = year + '-' + month + '-' + strDate+"  "+hour+":" +minutes+":" +seconds;
      }, 1000)
    },
    back() {
      this.$router.push('/')
    },
    init() {
      getFarmId().then(res => {
        if(res.code === 10000) {
          this.setFarmIdAsync(res.data);
          if(this.$route.name  === 'Home') {
            this.title = this.getFarmName(this.farmId) + '数智驾驶舱'
          }
          localStorage.setItem('lastFarmId', res.data);
          this.refresh()
        }
      })
    },
    // 刷新拿到数据
    refresh() {
      getWeather({}).then(async res => {
        if(res.code === 10000) {
          this.weather = res.data;
          this.weatherInfo = JSON.parse(res.data.alarm)
          this.weatherList = [res.data.timeList, res.data.tempList]
          let params = {
            maxTem: res.data.max_degree,
            minTem: res.data.min_degree
          }
          await InfoWeater(params).then(res => {
            if(res.code === 10000) {
              this.alarm = res.data;
            }
          })
        }
      })
    },
    // 选择牧场
    onChange(val) {
      let params = {
        id: localStorage.getItem('UserId'),
        lastFarmId: val
      }
      localStorage.setItem('lastFarmId', val)
      findUpdate(params).then(res => {
        console.log(res)
      })
      this.setFarmIdAsync(val);
      setTimeout(() => {
        location.reload();
      }, 100)
    },
    openShow(num) {
      this.active = num;
      this.alarmType = true;
      if(num === 0) {
        this.str = this.alarm.maxTemStr;
      } else if(num === 1) {
        this.str = this.alarm.minTemStr
      } else {
        this.alarmInfo = this.weatherInfo[0].type_name + this.weatherInfo[0].level_name + '预警';
        this.str = this.weatherInfo[0].detail;
      }
      this.timer = setTimeout(() => {
        this.alarmType = false;
      }, 5000)
    },
    getFarmName() {
      let str = '';
      this.farmList.forEach(item => {
        if(item.id === this.farmId) {
          str = item.farmName
        }
      })
      return str
    },
    stopOut() {
      clearTimeout(this.timer);
      this.timer = null;
    },
    startOut() {
      this.timer = setTimeout(() => {
        this.alarmType = false;
      }, 5000)
    }
  },
  created() {
    this.GetFarm()
  },
  mounted() {
    this.init()
    if (this.$route.name === 'Home') {
      this.isHome = true;
      this.initTime();
      console.log(1111);
      console.log(this.farmId)
    } else {
      this.isHome = false;
      this.title = this.$route.meta.title;
      if(this.timer4) {
        clearInterval(this.timer4)
      }
    }
  }
}
</script>

<style scoped>
  /deep/.el-input__inner {
    background-color: #0F152B !important;
    color: white !important;
  }
  .MainLayout {
    width: 100vw;
    height: 100vh;
    background: url("../assets/u1.jpg") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    position: relative;
  }
  .content {
    width: 100%;
    height: 100%;
    background: url('../assets/home.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 70px 60px;
  }
  .main-title {
    width: 230px;
    height: 25px;
    line-height: 25px;
    position: absolute;
    top: 25px;
    left: 50.5%;
    text-align: center;
    transform: translate(-50%, 0);
    color: #66FFFF;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
  }
  .main-left {
    width: 180px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 150px;
  }
  .main-right {
    width: 180px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 125px;
  }
  .main-home {
    width: 100%;
    height: 100%;
    line-height: 40px;
    color: white;
  }
  .main-time {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 16px;
  }
  .main-bottom {
    width: 200px;
    height: 50px;
    /*background-color: red;*/
    position: absolute;
    /*line-height: 50px;*/
    color: #66FFFF;
    font-size: 24px;
    font-weight: 600;
    left: 51%;
    bottom: 20px;
    transform: translate(-50% , 0);
  }
  .main-back {
    width: 140px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    background: url("../assets/Home/u761.svg") no-repeat;
    background-size: 100% 100%;
    color: white;
    cursor: pointer;
  }
  #weather {
    background-color: rgba(0, 0, 0, .8);
    position: absolute;
    width: 700px;
    height: 700px;
    top: 0;
  }
  .weather1 {
    left: 0;
  }
  .weather2 {
    right: 0;
  }
  .moveL-enter-active,
  .moveL-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0%);
  }
  .moveL-enter,
  .moveL-leave {
    transform: translateX(-100%);
  }
  .moveL-leave-to {
    transform: translateX(-100%);
  }
  .moveR-enter-active,  .moveR-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0);
  }
  .moveR-enter,  .moveR-leave {
    transform: translateX(100%);
  }
  .moveR-leave-to{
    transform: translateX(100%);
  }
  .weatherBox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0  20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .box-left {
    width: 35px;
    height: 35px;
  }
  .box-right {
    width: 60px;
    height: 100%;
    margin-left: 20px;
  }
  .qing {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/qingtian.png") no-repeat;
    background-size: 100% 100%;
  }
  .fontSize {
    height: 20px;
    margin: 0;
    line-height: 20px;
    text-align: left;
    color: #28BCCA;
  }
  .duoyun {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/qingzhuanduoyun.png") no-repeat;
    background-size: 100% 100%;
  }
  .yin {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/yintian.png") no-repeat;
    background-size: 100% 100%;
  }
  .xiaoyu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/xiaoyu.png") no-repeat;
    background-size: 100% 100%;
  }
  .zyu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/zhongyu.png") no-repeat;
    background-size: 100% 100%;
  }
  .dyu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/dayu.png") no-repeat;
    background-size: 100% 100%;
  }
  .byu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/baoyu.png") no-repeat;
    background-size: 100% 100%;
  }
  .xxue{
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/xiaoxue.png") no-repeat;
    background-size: 100% 100%;
  }
  .zxue{
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/zhongxue.png") no-repeat;
    background-size: 100% 100%;
  }
  .dxue{
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/daxue.png") no-repeat;
    background-size: 100% 100%;
  }
  .bxue{
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/baoxue.png") no-repeat;
    background-size: 100% 100%;
  }
  .wu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/wu.png") no-repeat;
    background-size: 100% 100%;
  }
  .time {
    position: absolute;
    bottom: 35px;
    right: 80px;
    line-height: 50px;
    font-size: 16px;
    color: #289882
  }
  .bio-dialog {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, .9);
    z-index: 999;
  }
  .dialog-content {
    width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding: 20px;
    color: #fff;
    text-align: center;
  }
  .div-text {
    width: 400px;
    height: 60px;
    background: url("../assets/101.png") no-repeat;
    background-size: 100% 100%;
    line-height: 60px;
    margin: 20px auto;
    font-size: 20px;
    color: white;
    text-align: center;
    border-bottom: 1px solid #53bafd;
    cursor: pointer;
  }
  .div-text:hover {
    background-color: white;
    color: #53bafd;
    cursor: pointer;
  }
  .farm {
    /*width: 200px;*/
    height: 40px;
    /*background-color: red;*/
    position: absolute;
    bottom: 40px;
    left: 60px;
    line-height: 40px;
    text-align: left;
    color: #fff;
    font-size: 16px;
  }
  .maxTem {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/Home/gaowen.png');
    background-size: contain;
    margin-top: 10px;
    cursor: pointer;
  }
  .minTem {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/Home/diwen.png');
    background-size: contain;
    margin-top: 10px;
    cursor: pointer;
  }
  .shan {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/Home/shandian.png');
    background-size: contain;
    margin-top: 10px;
    cursor: pointer;
  }
  .hanchao {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/weather/hanchao.png');
    background-size: contain;
    margin-top: 10px;
    cursor: pointer;
  }
  .taifeng {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/weather/taifeng.png');
    background-size: contain;
    margin-top: 10px;
    cursor: pointer;
  }
  .dafeng {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/weather/dafeng.png');
    background-size: contain;
    margin-top: 10px;
    cursor: pointer;
  }
  .alarmlist {
    width: 200px;
    height: 100px;
    position: absolute;
    bottom: 500px;
    right: 100px;
    border: 1px solid red;
    animation: myfirst 1s;
  }
  .alarmText {
    width: 300px;
    height: 200px;
    position: absolute;
    bottom: 400px;
    right: 50px;
    border: 1px solid red;
    animation: myfirst 1s;
  }
  @keyframes myfirst {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .weatherList {
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
  }
  .grid {
    width: 100%;
    height: 100%;
    color: white;
  }
  .grid-title {
    line-height: 50px;
    font-size: 24px;
  }
  .grid-content {
    box-sizing: border-box;
    line-height: 30px;
    font-size: 16px;
    text-align: left;
    padding-left: 80px;
  }
  .dayWeather {
    color: white;
    text-align: left;
  }
  .weatherTitle {
    font-size: 16px;
    box-sizing: border-box;
    padding-left: 50px;
  }
  .weatherTitle > strong {
    font-size: 24px;
  }
  .dayFlex {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .FlexIcon {
    width: 200px;
    height: 90px;
    box-sizing: border-box;
    margin-left: 50px;
    display: flex;
    align-items: center;
  }
  .FlexIcon > span {
    font-size: 36px;
    padding-left: 20px;
    display: inline-block;
  }
  .maxSize {
    width: 90px;
    height: 90px;
  }
  .FlexInfo {
    margin-left: 30px;
    font-size: 18px;
    cursor: pointer;
  }
  .chart {
    width: 100%;
    height: calc(100% - 400px);
  }
  .weatherGrid {
    width: 100%;
    box-sizing: border-box;
    height: 200px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    padding: 0 50px;
  }
  .weatherGrid > div {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    color: #fff;
    box-sizing: border-box;
    padding-top: 10px;
    font-size: 18px;
  }
  .weatherGrid > div:nth-child(2) {
    border-left: none;
    border-right: none;
  }
  .weatherGrid > div:nth-child(3) {
    border-right: none;
  }
  .weatherGrid > div > p {
    margin-top: 0;
    margin-bottom: 10px;
  }
  .minSize {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>