根据后端返回不同内容显示不同颜色/图片

<template>
<div class="container">

     <div class="beer-weather">
       <div class="beer-temperature">
          <img :src="
              require(`@/assets/images/beerCity/weather_code_${this.weatherList[0].code?this.weatherList[0].code:0}.png`) 
            " class="picture" />//根据后端返回的数字来动态饿切换图片。（这里是代表天气的图片）
         <!-- <img src="~@/assets/images/typhoonPersonCoastline/weather_code_05.png" class="picture"> -->
         <div class="temperature-num">
           <p style="font-size:18px;color:#ffffff;font-weight:600;line-height:18px"><span >{{this.weatherList[1] && this.weatherList[1].value? this.weatherList[1].value:22}}</span>℃</p>
            <p> <span style="font-size:18px;color:#ffffff;font-weight:600; padding-bottom:5px">{{this.weatherList[0].value?this.weatherList[0].value:'晴'}}</span> </p>
         </div>
         <div class="son">
           <P style="display:flex;justify-content:center;font-size:16px;color:#ffffff;margin-top:10px;font-weight:600">近三天天气</P>
           <div class="pop-list">
              <div  v-for="(item,index) in this.popList" :key="index">
             <div class="weather-text">
                <span style="color:rgba(59,248,250,0.8)">{{item.day}}</span>
                <span>{{item.temperature}}</span>
                <span>{{item.minTemp}}~{{item.maxTemp}}</span>
                <span>{{item.weather}}</span>
                <!-- <span>{{item.airStatus}}</span>
                <span> <img :src="require(`@/assets/images/beerCity/weather_code_${item.code&&item.code?item.code:11}.png`)"  class="icon-style"> </span>  -->

             </div>
           </div>
           </div>
         </div>
       </div>
       <div class="beer-quality" v-if="this.weatherList[3] && this.weatherList[3].value.length===1">
         <img :src="picturePng" >
         <p  style="font-size:24px;padding-left:7px;color:#ffffff;position:absolute;top: 7px;font-family:SourceHansCN-Regular;
    left: 8px">{{weatherGrade}}</p>
       </div>
       <div class="beer-quality" v-if="this.weatherList[3] && this.weatherList[3].value.length>1">
         <img :src="picturePng" > //显示不同的图片
         <p  style="padding-left:7px;font-size:14px;color:#ffffff;position:absolute;top: 6px;font-family:SourceHansCN-Regular;
    left: 5px">{{weatherGrade}}</p>  //不同的内容：优良中差等
       </div>
       <div class="beer-num">
          <p style="font-family:DIN-Medium;font-size:36px;padding-left:7px;font-weight:400"
          :class="colorStyle"
         >
            {{this.weatherList[2]&&this.weatherList[2].value}}
          </p>
       </div>
     </div>
      <div class="line"></div>
    <div class="weather-timer">
     <div class="top-center font-bold">{{ time }}</div>
     <div class="top-data  font-bold">{{ dataTime }}</div>
  </div>
</div>



</template>

<script>
import moment from "moment";
import  grade01  from "@/assets/images/beerCity/grade01.png"  \\图片的引入
import  grade02  from "@/assets/images/beerCity/grade02.png"
import  grade03  from "@/assets/images/beerCity/grade03.png"
import  grade04  from "@/assets/images/beerCity/grade04.png"
import  grade05  from "@/assets/images/beerCity/grade05.png"
import  grade06  from "@/assets/images/beerCity/grade06.png"
// import {getHomeData} from "@/api/beercity"
import axios from 'axios'
// import { getWeather } from "@/api/overview";

export default {
  name: "WeatherTimer",
  data() {
    return {
      picturePng:'',
      // weatherGrade:'',
      popList:[
        {day:"今天",minTemp:'',maxTemp:'',weather:'阴',temperature:'22℃', },
        {day:"明天",maxTemp:'',minTemp:'',type:'阴',temperature:'2℃',},
        {day:"后天",maxTemp:'',minTemp:'',type:'阴',temperature:'2℃',},
      ],
      city: "",
      weatherList: [{key:'',value:'',unit:'',code:'',frequencyType:null,frequency:null }],
      time: "",
      dataTime: "",
      xingqi: "",
      gotInfo: false,
    };
  },
  computed:{
    colorStyle() {
      let name = ''
      if(this.weatherList[3]){
      switch(this.weatherList[3].value){
        case '优':
         name= 'green'
          break
         case '良':
         name= 'yellow'
          break
          case '轻度污染':
         name= 'orange'
          break
          case '中度污染':
         name= 'red'
          break
          case '重度污染':
         name= 'pink'
          break
           case '严重污染':
         name= 'purple'
          break
      }
      }
        return name
    },

    weatherGrade(){
      if(this.weatherList[3]){
        switch(this.weatherList[3].value){
                  case '优' :
                    this.picturePng=grade01;
                    break;
                  case '良' :
                    this.picturePng=grade02;
                    break;
                  case '轻度污染' :
                    this.picturePng=grade03;
                    break;
                  case '中度污染' :
                    this.picturePng=grade04;
                    break;
                  case '重度污染' :
                    this.picturePng=grade05;
                    break;
                  case '严重污染' :
                    this.picturePng=grade06;
                    break;
                    }
              }

          return this.picturePng,this.weatherList[3].value
}
  },

 created () {
    axios({
      url: "http://10.134.135.9:8001/hx-weather-warning/beerFestivalHome/beerHomeData"
    }).then(res => {
      console.log('1111',res);
       this.gotInfo = true;
              this.popList = res.data.data.xhaWeatherTotal.threedaylist;
              this.weatherList = res.data.data.xhaWeatherTotal.xhaWeatherTodayViewList
    })
  },
  mounted() {
    // this.getWeather();
    // this.getHomeData()
    moment.locale("zh-cn");
    this.updateDatetime();
    this.timerId = setInterval(() => {
      this.updateDatetime();
    }, 1000);
  },
  beforeDestroy() {
    if (this.timerId) {
      clearInterval(this.timerId);
    }
  },
  methods: {
    getImage(val) {
      if (val.includes("晴")) {
        return "qing";
      } else if (val.includes("雪")) {
        return "xue";
      } else if (val.includes("雨夹雪")) {
        return "yuXue";
      } else if (val.includes("雨")) {
        return "yu";
      } else {
        return "yin";
      }
    },
    // getWeather() {
    //   let data = {
    //     city: "青岛",
    //   };
    //   getWeather(data, (res) => {
    //     if (res.data.status !== 1000) {
    //       this.$Message.error("访问天气接口异常");
    //       return;
    //     }
    //     this.gotInfo = true;
    //     this.weatherList = res.data.data.forecast[0];
    //   });
    // },
    getHomeData(){
      let data = {
              city: "青岛",
            };
            getHomeData(data, (res) => {
              console.log("this.weather",res)
              if (res.status !== 200) {
                this.$Message.error("访问天气接口异常");
                return;
              }
              this.gotInfo = true;
              this.popList = res.data.data.xhaWeatherTotal.threedaylist;
              this.weatherList = res.data.data.xhaWeatherTotal.xhaWeatherTodayViewList
              // this.weatherList[3].value = '轻度污染'
            });

    },
    updateDatetime() {
      this.time = moment(new Date()).format("HH:mm:ss");
      this.dataTime = moment(new Date()).format("YYYY年MM月DD日 dddd");
      this.xingqi = moment(new Date()).format("dddd");
    },
  },
};
</script>

<style lang="less" scoped>
.container{
  // width:350px;
  height:50px;
  display: flex;
  right:0px;
  top:-0px;
}
.beer-weather{
  margin-top: 14px;
  display: flex;
    // width:100px;
    height:50px;
    margin-right: 30px;
  }
  .beer-temperature{
    position:relative;
    display: flex;
    height:54px;
    width:150px;
    //background-color: rgba(5, 46, 90,0.8);
    margin-right: 5px;
    align-content: center;
    justify-content: center;
    padding:5px 5px;
    cursor: pointer;
    .picture{
      width:40px;
      height:40px;
      margin-right: 10px;
    }
    .temperature-num{
      display: flex;
      flex-direction: column;
      // padding-bottom: 5px;
    }
  }
  .beer-temperature:hover .son{
      display: block;}
  .son{
    display: none;
    position: fixed;
    // display: flex;
    top:80px;
    width:250px;
    height:150px;
    background-color: rgba(5, 46, 90,0.6);
    border:1px solid rgba(31,163,165,.85);
    .pop-list{
      display: flex;
      // width:150px;
      // display: flex;
      // flex-direction: row;
      // background-color: #feffff;
    }
    .weather-text{
      width:82.5px;
      margin-top: 10px;
      height:80px;
      display: flex;
      color:#ffffff;
      font-size: 16px;
      flex-direction: column;
      text-align: center;
      border-right: 1px solid #124882;
    }
}
  .beer-quality{
    width:50px;
    height:50px;
    position: relative;
    // background-color: rgb(143, 190, 120);
    // border:1px solid #80ff45;
     margin-right: 5px;

  }
  .beer-num{
     width:70px;
    height:50px;
    border-right:1px solid  rgba(45, 91, 135,0.8)
  }
.weather-timer {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  .top-center {
    border-right: 0px solid #226ea0;
    font-size: 38px;
    height:38px;
    line-height: 39px;
    margin-left: 40px;
    background-image: -webkit-linear-gradient(top, #feffff, #45b7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .line{
    width:1px;
    height:50px;
    margin-left: 20px;
    background-color: #2d5b87;
  }
  .top-data{
    border-right: 0px solid #226ea0;
    font-size: 18px;
    padding-right:19px;
    background-image: -webkit-linear-gradient(top, #feffff, #45b7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.green {
  color: #3df786;
}
.yellow{
 color: #ffff00;
}
.orange{
 color: #ff7b00;
}
.red{
 color: #fe0000;
}
.pink{
   color: #7c0024;
}
.purple{
   color: #a90154;
}
.icon-style{
  width:27px;
  height:27px
}

</style>