nsgk_mobile/src/views/pest/weather/weather.vue

<template>
  <div class="app-container">

    <van-nav-bar
      title="气象服务"
      left-arrow
      fixed
      placeholder
      @click-left="$router.push({path:'/pest/index'})"
    />

    <div class="address_main">
      <div class="address">
        <p>当前天气</p>
        <i class="border"></i>
        <p><i></i>威海市</p>
      </div>
    </div>

    <div class="celsius_main">
      <div class="celsius_block">
        <p class="celsius_num">16</p>
        <p class="celsius_wea"><span>°</span><span>晴</span></p>
      </div>
      <div class="celsius_humidity">
        <p>东南风 <span>2级</span></p>
        <p>湿度 <span>66%</span></p>
      </div>
    </div>

    <div id="weatherMain" ref="weatherMain"></div>

    <div class="file_main center">
      <van-field readonly label="农情评价" :border="false" />
      <van-field readonly v-model="textarea" placeholder="请输入" type="textarea" autosize :border="false" style="padding-top: 0;" />
    </div>

    <div class="file_main">
      <van-field readonly label="气象监测" input-align="right">
        <template #input>
          <p class="time_box2">2024-03-18<van-icon name="arrow-down" /></p>
        </template>
      </van-field>
      <div style="padding: 16px;">
        <p class="time_box">采集时间：2024-03-18  17：17</p>
        <div class="flex_main">
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">17.0<span class="flex_unit">℃</span></p>
              <p class="flex_name">温度</p>
            </div>
            <i class="icon icon1"></i>
          </div>
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">35.5<span class="flex_unit">%</span></p>
              <p class="flex_name">湿度</p>
            </div>
            <i class="icon icon2"></i>
          </div>
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">35.5<span class="flex_unit">mm</span></p>
              <p class="flex_name">雨量</p>
            </div>
            <i class="icon icon3"></i>
          </div>
        </div>
        <div class="flex_main">
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">17.0<span class="flex_unit">m/s</span></p>
              <p class="flex_name">风速</p>
            </div>
            <i class="icon icon4"></i>
          </div>
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">35.5<span class="flex_unit">hpa</span></p>
              <p class="flex_name">气压</p>
            </div>
            <i class="icon icon5"></i>
          </div>
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">35.5<span class="flex_unit">ppm</span></p>
              <p class="flex_name">CO2</p>
            </div>
            <i class="icon icon6"></i>
          </div>
        </div>
        <div class="flex_main">
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">17.0<span class="flex_unit">lx</span></p>
              <p class="flex_name">光照</p>
            </div>
            <i class="icon icon7"></i>
          </div>
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">35.5<span class="flex_unit">w/㎡</span></p>
              <p class="flex_name">辐射</p>
            </div>
            <i class="icon icon8"></i>
          </div>
        </div>
        <div class="flex_main">
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">17.0<span class="flex_unit">℃</span></p>
              <p class="flex_name">土壤温度</p>
            </div>
            <i class="icon icon9"></i>
          </div>
          <div class="flex_block">
            <div class="flex_nr">
              <p class="flex_num">35.5<span class="flex_unit">%</span></p>
              <p class="flex_name">土壤湿度</p>
            </div>
            <i class="icon icon10"></i>
          </div>
        </div>

      </div>
    </div>

    <div class="file_main center">
      <van-field readonly label="预警信号" :border="false" />
      <van-field readonly v-model="textarea" placeholder="请输入" type="textarea" autosize :border="false" style="padding-top: 0;" />
    </div>

    <div class="bottom"></div>

  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import * as echarts from "echarts";

  import request from "@/utils/request";
  export default {
    name: "soilTesting",
    data() {
      return {
        textarea:'当前土壤湿度较低，土壤温度较低，请注意农事的防护'
      };
    },
    created() {

    },
    mounted() {
      this.getWeather();
    },
    methods: {
      getWeather(){
        let url = 'https://devapi.qweather.com/v7/weather/7d?key=8956360de63949c78d7d1eb884b07bc9&location=101121307'
        request(url).then((resp) => {
          let weatherOptions = resp.daily;
          weatherOptions.map(rr=>{
            rr.windScaleDay = rr.windScaleDay + '级';
            rr.fxDate = rr.fxDate.substr(5,11)
          })
          this.weatherOptions = weatherOptions;
          this.leftBottomEchart(weatherOptions);
        })
      },
      leftBottomEchart(data,type){

        const extractField = (field, array) => {
          return array.map(item => item[field]);
        };

        const dayOp = extractField('fxDate', data);//日期
        const tempMaxOp = extractField('tempMax', data);//最高温度
        const tempMinOp = extractField('tempMin', data);//最低温度
        const textDayOp = extractField('textDay', data);//白天天气文字描述
        const textNightOp = extractField('textNight', data);//夜间天气文字描述
        const windDirDayOp = extractField('windDirDay', data);//风向
        const windScaleDayOp = extractField('windScaleDay', data);//风力等级

        var weatherMain = echarts.init(this.$refs.weatherMain);

        var containerWidth = weatherMain.getWidth();//获取容器宽度
        var containerHeight = weatherMain.getHeight();//获取容器高度

        const constoption = {
          grid: {
            show: true,
            backgroundColor: "transparent",
            opacity: 0.3,
            borderWidth: "0",
            top: "40%",
            bottom: "25%",
            left:'5%',
            right:'5%',
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              lineStyle: {
                color: "transparent",
              },
            },
          },
          legend: {
            show: false,
          },
          xAxis: [
            // 日期
            {
              type: "category",
              boundaryGap: false,
              position: "top",
              offset:containerHeight*0.24,//偏移量，根据高度百分比偏移
              zlevel: 100,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                formatter: ["{a|{value}}"].join("\n"),
                rich: {
                  a: {
                    // color: 'white',
                    fontSize: 12,
                  },
                },
                color:'#ffffff'
              },
              nameTextStyle: {},
              data: dayOp,
            },
            // 最高气温
            {
              type: "category",
              boundaryGap: false,
              show:false,
              position: "top",
              offset:0,//偏移量，根据高度百分比偏移
              zlevel: 100,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                formatter: ["{a|{value}}°"].join("\n"),
                rich: {
                  a: {
                    // color: 'white',
                    fontSize: 12,
                  },
                },
                color:'#ffffff'
              },
              nameTextStyle: {},
              data: tempMaxOp,
            },
            // 最低气温
            {
              type: "category",
              boundaryGap: false,
              show:false,
              position: "top",
              offset:-containerHeight*0.28,//偏移量，根据高度百分比偏移
              zlevel: 100,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                formatter: ["{a|{value}}°"].join("\n"),
                rich: {
                  a: {
                    // color: 'white',
                    fontSize: 12,
                  },
                },
                color:'#ffffff'
              },
              nameTextStyle: {},
              data: tempMinOp,
            },
            // 天气图标
            {
              type: "category",
              boundaryGap: false,
              position: "top",
              offset:containerHeight*0.03,//偏移量，根据高度百分比偏移
              zlevel: 100,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color:'#ffffff',
                formatter: function (value, index) {
                  return "{" + index + "| }\n{b|" + value + "}";
                },
                rich: {
                  0: {
                    backgroundColor: {
                      image: (() => {
                        const index = 0; // 图片序号
                        const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  1: {
                    backgroundColor: {
                      image: (() => {
                        const index = 1; // 图片序号
                        const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  2: {
                    backgroundColor: {
                      image: (() => {
                        const index = 2; // 图片序号
                        const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  3: {
                    backgroundColor: {
                      image: (() => {
                        const index = 3; // 图片序号
                        const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  4: {
                    backgroundColor: {
                      image: (() => {
                        const index = 4; // 图片序号
                        const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  5: {
                    backgroundColor: {
                      image: (() => {
                        const index = 5; // 图片序号
                        const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  6: {
                    backgroundColor: {
                      image: (() => {
                        const index = 6; // 图片序号
                        const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  b: {
                    // color: 'white',
                    fontSize: 12,
                    lineHeight: 30,
                    height: 20,
                  },
                },
              },
              nameTextStyle: {
                fontWeight: "bold",
                fontSize: 19,
              },
              data: textDayOp,
              // data: ["小雨", "小雨", "阴", "小雨", "多云", "小雨", "小雨"],
            },
            // 底部天气图标
            {
              type: "category",
              boundaryGap: false,
              zlevel: 100,
              position: "top", // 轴线位置为底部
              offset:-containerHeight*0.5,//偏移量，根据高度百分比偏移
              axisLine: {
                show: false, // 不显示轴线
              },
              axisTick: {
                show: false, // 不显示刻度线
              },
              axisLabel: {
                interval: 0,
                color:'#ffffff',
                formatter: function (value, index) {
                  return "{" + index + "| }\n{b|" + value + "}";
                },
                rich: {
                  0: {
                    backgroundColor: {
                      image: (() => {
                        const index = 0; // 图片序号
                        const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  1: {
                    backgroundColor: {
                      image: (() => {
                        const index = 1; // 图片序号
                        const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  2: {
                    backgroundColor: {
                      image: (() => {
                        const index = 2; // 图片序号
                        const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  3: {
                    backgroundColor: {
                      image: (() => {
                        const index = 3; // 图片序号
                        const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  4: {
                    backgroundColor: {
                      image: (() => {
                        const index = 4; // 图片序号
                        const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  5: {
                    backgroundColor: {
                      image: (() => {
                        const index = 5; // 图片序号
                        const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  6: {
                    backgroundColor: {
                      image: (() => {
                        const index = 6; // 图片序号
                        const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                        if (weather === "晴") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "多云") {
                          return require("@/assets/images/weather/tianqi-duoyun.png");
                        } else if (weather === "阴") {
                          return require("@/assets/images/weather/tianqi-yin.png");
                        } else if (weather === "晴雨") {
                          return require("@/assets/images/weather/tianqi-zhenyu.png");
                        } else if (weather === "小雨") {
                          return require("@/assets/images/weather/tianqi-xiaoyu.png");
                        } else if (weather === "中雨") {
                          return require("@/assets/images/weather/tianqi-zhongyu.png");
                        } else if (weather === "大雨") {
                          return require("@/assets/images/weather/tianqi-dayu.png");
                        } else if (weather === "暴雨") {
                          return require("@/assets/images/weather/tianqi-baoyu.png");
                        } else if (weather === "雷阵雨") {
                          return require("@/assets/images/weather/tianqi-leizhenyu.png");
                        } else if (weather === "晴雪") {
                          return require("@/assets/images/weather/tianqi-zhenxue.png");
                        } else if (weather === "小雪") {
                          return require("@/assets/images/weather/tianqi-xiaoxue.png");
                        } else if (weather === "中雪") {
                          return require("@/assets/images/weather/tianqi-zhongxue.png");
                        } else if (weather === "大雪") {
                          return require("@/assets/images/weather/tianqi-daxue.png");
                        } else if (weather === "暴雪") {
                          return require("@/assets/images/weather/tianqi-baoxue.png");
                        } else if (weather === "雷电") {
                          return require("@/assets/images/weather/tianqi-qing.png");
                        } else if (weather === "大风") {
                          return require("@/assets/images/weather/tianqi-feng.png");
                        } else if (weather === "雾") {
                          return require("@/assets/images/weather/tianqi-wu.png");
                        } else if (weather === "霾") {
                          return require("@/assets/images/weather/tianqi-wumai.png");
                        } else if (weather === "浮尘") {
                          return require("@/assets/images/weather/tianqi-fuchen.png");
                        } else if (weather === "沙尘") {
                          return require("@/assets/images/weather/tianqi-yangsha.png");
                        } else if (weather === "沙尘暴") {
                          return require("@/assets/images/weather/tianqi-shachenbao.png");
                        }
                      })(),
                    },
                    height: 24,
                    width: 24,
                  },
                  b: {
                    // color: 'white',
                    fontSize: 12,
                    lineHeight: 30,
                    height: 20,
                  },
                },
              },
              nameTextStyle: {
                fontWeight: "bold",
                fontSize: 19,
              },
              //data: weatherdata,
              data: textNightOp,
            },
            // 风向
            {
              type: "category",
              boundaryGap: false,
              position: "top",
              offset:-containerHeight*0.52,//偏移量，根据高度百分比偏移
              zlevel: 100,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                formatter: ["{a|{value}}"].join("\n"),
                rich: {
                  a: {
                    // color: 'white',
                    fontSize: 12,
                  },
                },
                color:'#ffffff'
              },
              nameTextStyle: {},
              data: windDirDayOp,
            },
            // 风力
            {
              type: "category",
              boundaryGap: false,
              position: "top",
              offset:-containerHeight*0.57,//偏移量，根据高度百分比偏移
              zlevel: 100,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                formatter: ["{a|{value}}"].join("\n"),
                rich: {
                  a: {
                    // color: 'white',
                    fontSize: 12,
                  },
                },
                color:'#ffffff'
              },
              nameTextStyle: {},
              data: windScaleDayOp,
            },
          ],
          yAxis: {
            type: "value",
            show: false,
            axisLabel: {
              formatter: "{value} °C",
              color: "white",
            },
          },
          series: [
            // 最高气温
            {
              name: "最高气温",
              type: "line",
              data: tempMaxOp,
              symbolSize: 3,
              showSymbol: true,
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#ffffff",
                },
              },
              label: {
                show: true,
                position: "top",
                // offset: 10, // 设置标签相对于数据点的偏移量
                color: 'white',
                formatter: "{c} °C",
              },
              lineStyle: {
                width: 2,
                color: "#ffffff",
                // normal: {
                //   color: "#4c9bfd",

                //   shadowBlur: 10, // 阴影模糊度
                //   shadowColor: "rgba(76, 155, 253, 0.3)", // 阴影颜色
                // },
              },
              areaStyle: {
                opacity: 1,
                color: "transparent",
              },
            },
            // 最低气温
            {
              name: "最低气温",
              type: "line",
              data: tempMinOp,
              symbolSize: 3,
              showSymbol: true,
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#ffffff",
                },
              },
              label: {
                show: true,
                position: "bottom",
                color: 'white',
                formatter: "{c} °C",
              },
              lineStyle: {
                width: 2,
                color: "#ffffff",
              },
              areaStyle: {
                opacity: 1,
                color: "transparent",
              },
            },
          ],
        };
        if(type == 'redraw'){
          setTimeout(() => {
            weatherMain.setOption(constoption, true);
            weatherMain.resize();
          }, 1);
        }else{
          setTimeout(() => {
            weatherMain.setOption(constoption);
            weatherMain.resize();
          },1)
        }

      }
    },
  };
</script>
<style scoped lang="scss">

  .app-container{
    background: #33A5FB url("../../../../static/images/pest/daytime.png") no-repeat right top;
    height: 100vh;
    padding: 0 4vw;
    overflow-y: scroll;
  }

  .time_box2{
    font-size: .3rem;
    background: #F5F8F6;
    color: rgba(28,35,76,.5);
    padding:0 15PX;
    border-radius: 100vh;
  }

  #weatherMain{
    height: 40vh;
    background:rgba(255,255,255,.2);
    padding: 0 20px;
    border-radius: 15PX;
    margin-top: 3vh;
  }

  .celsius_main{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    margin-top: 3vh;
    .celsius_block{
      display: flex;
      /*align-items: baseline;*/
      line-height: 1;
      .celsius_num{
        font-size: 1.5rem;
        font-weight: bold;
      }
      .celsius_wea{
        font-size: .35rem;
        font-weight: normal;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        span:nth-child(1){
          font-weight: bold;
          font-size: 1rem;
        }
      }
    }
    .celsius_humidity{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 3vh;
      p{
        padding: 0 20px;
        font-size: .35rem;
        color: rgba(255,255,255,.6);
        &:nth-child(1){
          border-right: 1px solid rgba(255,255,255,.6);
        };
        span{
          color: #ffffff;
          margin-left: 10px;
        }
      }
    }

  }

  .address_main{
    display: flex;
  }

  .address{
    display: flex;
    color: #ffffff;
    background: rgba(255,255,255,.1);
    font-size: .4rem;
    padding: 10px 20px;
    align-items: center;
    border-radius: 10px;
    .border{
      display: block;
      border-right: 1px solid #ffffff;
      height: .3rem;
      margin: 0 15px;
    }
    p:last-child{
      display: flex;
      align-items: center;
      i{
        display: block;
        width: .4rem;
        height: .4rem;
        background: url("../../../../static/images/pest/address.png") no-repeat left center;
        background-size: auto 90%;
      }
    }
  }

  .flex_main{
    display: flex;
    margin-top: 16px;
    .flex_block{
      flex: 1;
      position: relative;
      padding: 1vh;
      border: 1px solid #B6E7A9;
      margin-left: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 15PX;
      .flex_y{
        font-size: .35rem;
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px 10px 10px 20px;
        line-height: 1;
        border-bottom-left-radius: 15PX;
        &.green{
          background: #ADF1C2;
          color: #19D77C;
        }
        &.orange{
          background: #FFE9BA;
          color: #FDCD63;
        }
        &.blue{
          background: #B3DCFB;
          color: #53B1F6;
        }
      }
      .flex_nr{
        display: flex;
        flex-direction: column;
        align-items: baseline;
        justify-content: space-evenly;
        .flex_num{font-size: .45rem;color: #000000;font-weight: bold;}
        .flex_unit{font-size: .25rem;color: #9F9F9F;font-weight: normal;}
        .flex_name{font-size: .3rem;color: #666666;}
      }
      &:nth-child(1){
        margin-left: 0px;
      }
      i{
        display: block;
        width: 2.5vh;
        height: 2.5vh;
      }
      .icon1{
        background: url("../../../../static/images/pest/weather/weather_icon_02.png") no-repeat center;
        background-size: 100% 100%;
      }
      .icon2{
        background: url("../../../../static/images/pest/weather/weather_icon_01.png") no-repeat center;
        background-size: 100% 100%;
      }
      .icon3{
        background: url("../../../../static/images/pest/weather/weather_icon_03.png") no-repeat center;
        background-size: 100% 100%;
      }
      .icon4{
        background: url("../../../../static/images/pest/weather/weather_icon_04.png") no-repeat center;
        background-size: 100% 100%;
      }
      .icon5{
        background: url("../../../../static/images/pest/weather/weather_icon_05.png") no-repeat center;
        background-size: 100% 100%;
      }
      .icon6{
        background: url("../../../../static/images/pest/weather/weather_icon_06.png") no-repeat center;
        background-size: 100% 100%;
      }
      .icon7{
        background: url("../../../../static/images/pest/weather/weather_icon_07.png") no-repeat center;
        background-size: 100% 100%;
      }
      .icon8{
        background: url("../../../../static/images/pest/weather/weather_icon_08.png") no-repeat center;
        background-size: 100% 100%;
      }
      .icon9{
        background: url("../../../../static/images/pest/weather/weather_icon_09.png") no-repeat center;
        background-size: 100% 100%;
      }
      .icon10{
        background: url("../../../../static/images/pest/weather/weather_icon_10.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
  }

  .time_box{
    font-size: .3rem;
    color: rgba(28,35,76,.5);
  }

  .file_swipe{
    padding: 36px;
  }

  .bottom{
    padding-bottom: 10vh;
  }

  /deep/ .center textarea{
    background: #F5F8F6;
    color: #999999;
    padding: 20px;
  }

  /deep/ .van-nav-bar{
    background: transparent;
  }
  /deep/ .van-nav-bar__title{
    color: #ffffff;
  }

  /deep/ .van-nav-bar .van-icon{
    color: #ffffff;
  }

  /deep/ .van-hairline--bottom::after{
    border: none;
  }

  /deep/ .van-search{
    padding: 0;
    background: transparent;
  }
  /deep/ .van-search__content{
    padding: 5px 25px;
    border-radius: 20px;
  }
  /deep/ .van-search .van-cell{
    align-items: center;
  }
  .file_main{
    background: #ffffff;
    margin: 25px auto 0;
    border-radius: 15PX;
    overflow: hidden;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
  }
  .statistics_main{
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 15PX;
    font-size: .35rem;
    line-height: 1;
    .statistics_tt{
      flex: 1; /* 占据剩余空间 */
      text-align: center; /* 文字水平居中 */
    }
    .statistics_block{
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
    }
  }
  .list_main{
    margin-top: 15PX;
    height: 65vh;
    overflow-y: scroll;
    .item{
      border-radius: 30px;
      background: #fff;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
      padding:25px 32px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      img{
        width: 174px;
        height: 174px;
        border-radius: 10px;
        margin-right: 2vh;
        display: block;
      }
      .info{
        flex: 1;
        .title{
          display: flex;
          align-items: center;
          height: 58px;
          .news_title{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            word-break: break-all;
            overflow: hidden;
            font-size: .35rem;
            color: rgba(28,35,76,.7);
            margin-right: 15px;
          }
          .tips_mark{
            font-size: .35rem;
            color: #1C234C;
            text-align: center;
            border-radius: 100vh;
          }
        }
        .time{
          font-size: 16PX;
          color: #c1c1c1;
          display: flex;
          align-items: center;
          margin-top: 5PX;
          justify-content: space-between;
          p:first-child{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            word-break: break-all;
            overflow: hidden;
            span{
              color: #5fe495;
              font-weight: bold;
            }
          }
          p:last-child{
            font-size: 16PX;
            text-align: center;
            flex-shrink: 0;
            span{
              color: #5fe495;
              font-weight: bold;
            }
          }
        }
      }
    }

    .operation{
      display: flex;
      align-items: center;
      justify-content: right;
      text-align: center;
      border-radius: 30px;
      background: #fff;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
      height: 100%;
      padding: 0 15Px;
      margin-left: 10PX;
      .opera_btn{
        border-radius: 50%;
        &.delete{
          background:#df0707;
          margin-left: 10PX;
          .icon{
            width: 22PX;
            height: 29PX;
            background: url('../../../assets/images/sunVillage_info/signature_icon_03.png') no-repeat;
            background-size: 100% 100%;
            display: block;
          }
        }
        &.edit{
          background: #79cf13;
          margin-left: 10PX;
          .icon {
            width: 26PX;
            height: 25PX;
            background: url('../../../assets/images/sunVillage_info/signature_icon_02.png') no-repeat;
            background-size: 100% 100%;
            display: block;
          }
        }
        &.view{
          background: #3494ff;
          margin-left: 10PX;
          .icon {
            width: 29PX;
            height: 21PX;
            background: url('../../../assets/images/sunVillage_info/signature_icon_04.png') no-repeat;
            background-size: 100% 100%;
            display: block;
          }
        }
        &.list{
          background: #79cf13;
          margin-left: 10PX;
          .icon {
            width: 29px;
            height: 21px;
            background: url('../../../assets/images/sunVillage_info/list_icon_10.png') no-repeat;
            background-size: 100% 100%;
            display: block;
          }
        }
      }
    }
  }

</style>