admin-ui/src/views/monitor/weather/index.vue

<template>
  <div class="monitor-weather">
    <div class="left" :style="{width: isCollapse?'384px':'40px',minWidth: isCollapse?'384px':'40px'}">
      <SvgIcon class="collapse" :name="isCollapse ? 'ele-Expand' : 'ele-Fold'" :size="16" @click="changeCollapse" />
      <div class="city-weather-data-overview-wrap" v-if="isCollapse">
        <section class="title">
          <span>城市</span>
          <span>风力</span>
          <span>日照时长</span>
        </section>
        <section style="cursor: pointer" :class="currentcityId == item.id ? 'active' : ''" @click="currentcityId = item.id, currentcityName = item.name" v-for="(item, index) in cityList" :key="index">
          <span>{{ item.name }}</span>
          <span>{{ item.windpower }}</span>
          <span>{{ item.sunshineDuration }}</span>
        </section>
      </div>
    </div>
    <div class="right">
      <el-row :gutter="15" class="home-card-two mb15">
        <el-col>
          <div class="weather-info">
            <section v-if="oneCityInfo.weather" style="display: flex;justify-content: space-between;">
              <div>
                <span class="temperature">{{ oneCityInfo.Temperature }}℃</span>
                <img :src="`/imgs/weather/${oneCityInfo.weather}.svg`" alt="">
                <span class="weather">{{ oneCityInfo.weather }}</span>
                <span>{{ oneCityInfo.reporttime }}更新</span>
              </div>
              <div class="history" @click="$router.push('/monitor/weather-history/' + oneCityInfo.id)">历史数据 &gt;</div>
            </section>
            <section>
              <span style="margin-right: 20px;">地点：{{ currentcityName }}</span>
              <img src="/@/assets/img/windPowerIcon.svg" alt="">
              <span>风力: {{ oneCityInfo.winddirection + oneCityInfo.windpower }}</span>
              <img class="sunset-sunrise" src="/@/assets/img/sunset.svg" alt="">
              <span class="sunset">日出时间: {{ oneCityInfo.sunrise }}</span>
              <span>日落时间: {{ oneCityInfo.sunset }}</span>
            </section>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15" class="home-card-two mb15">
        <el-col>
          <div class="home-card-item">
            <div class="home-card-item-title">
              <span>温度 监测图表</span>
              <el-select @change="getTemperatureEchartById(currentcityId)" v-model="temperatureType" placeholder="请选择查询范围" size="mini">
                <el-option v-for="item in ranges" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div style="height: 100%" ref="homeTemLineRef"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15" class="home-card-three">
        <el-col>
          <div class="home-card-item">
            <div class="home-card-item-title">
              <span>风力 监测图表</span>
              <el-select @change="getWindpowerEchartById(currentcityId)" v-model="windpowerType" placeholder="请选择查询范围" size="mini">
                <el-option v-for="item in ranges" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div style="height: 100%" ref="homeWindLineRef"></div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import * as echarts from 'echarts';
import { useStore } from '/@/store/index';

import api from '/@/api/datahub';

let global: any = {
  homeChartOne: null,
  homeChartTwo: null,
  homeCharThree: null,
  dispose: [null, '', undefined]
};

export default defineComponent({
  name: 'weather',
  setup() {
    const homeTemLineRef = ref();
    const homeWindLineRef = ref();
    const isCollapse = ref(true);
    const store = useStore();
    const state = reactive({
      city: '',
      cityList: [],
      oneCityInfo: {} as any,
      temperatureType: 1,
      windpowerType: 1,
      ranges: [
        {
          value: 1,
          label: "日数据"
        },
        {
          value: 2,
          label: "周数据"
        },
        {
          value: 3,
          label: "月数据"
        },
        {
          value: 4,
          label: "年数据"
        }
      ],
      xAxis: [],
      tem: [],
      averageTem: [],
      foreCastInfoTem: [],
      foreCastAvgInfoTem: [],
      xAxisWind: [],
      foreCastInfoWind: [],
      foreCastAvgInfoWind: [],
      temWind: [],
      averageTemWind: [],
      currentcityId: 0,
      currentcityName: '',
      myCharts: [],
      charts: {
        theme: '',
        bgColor: '',
        color: '#303133',
      },
    });
    // 获取左侧数据
    const getCityWeatherList = () => {
      api.weather.getCityWeatherList().then((res: any) => {
        state.cityList = res.Info;
        if (!res.Info.length) return;
        state.currentcityId = res.Info[0].id;
        state.currentcityName = res.Info[0].name;
      });
    };

    // 根据ID获取指定城市的风力图表
    const getWindpowerEchartById = (id: number) => {
      api.weather.getWindpowerEchartById({ id: id, types: state.windpowerType }).then((res: any) => {
        const { AvgInfo, Info, ForeCastInfo,  ForeCastAvgInfo} = res;
        state.xAxisWind = [];
        state.temWind = [];
        state.foreCastInfoWind = [];
        state.averageTemWind = [];
        state.foreCastAvgInfoWind = [];
        if (Info && Info.length) {
          state.xAxisWind = [];
          Info.forEach((i: any) => {
            state.xAxisWind.push(i.time);
            state.temWind.push(i.value);
            // state.foreCastInfoWind.push('-');
          })
        }
        if (AvgInfo && AvgInfo.length) {
          AvgInfo.forEach((i: any) => {
            state.averageTemWind.push(i.value)
            // state.foreCastAvgInfoWind.push('-');
          })
        }
        if([2, 3].indexOf(state.windpowerType) > -1) {
          // 周数据、月数据
          state.xAxisWind = [];
          ForeCastInfo.forEach((i: any) => {
            // state.xAxisWind.push(i.time);
            // state.temWind.push('-');
            state.foreCastInfoWind.push(i.value);
            state.xAxisWind.push(i.time);
          })
          ForeCastAvgInfo.forEach((i: any) => {
            state.foreCastAvgInfoWind.push(i.value);
          })
        }
        nextTick(() => {
          initWindLineChart();
        });
      });
    };

    // 根据ID获取指定城市的温度图表
    const getTemperatureEchartById = (id: number) => {
      api.weather.getTemperatureEchartById({ id: id, types: state.temperatureType }).then((res: any) => {
        const { AvgInfo, Info, ForeCastLowInfo, ForeCastHighInfo } = res;
        state.xAxis = [];
        state.tem = [];
        state.foreCastInfoTem = [];
        state.averageTem = [];
        state.foreCastAvgInfoTem = [];
        if (Info && Info.length) {
          state.xAxis = [];
          Info.forEach((i: any) => {
            state.xAxis.push(i.time);
            state.tem.push(i.value);
            // state.foreCastInfoTem.push('-');
          })
        }
        if (AvgInfo && AvgInfo.length) {
          AvgInfo.forEach((i: any) => {
            state.averageTem.push(i.value)
            // state.foreCastAvgInfoTem.push('-');
          })
        }
        
        if([2, 3].indexOf(state.temperatureType) > -1) {
          // 周数据、月数据
          state.xAxis = [];
          ForeCastLowInfo.forEach((i:any) => {
            // state.xAxis.push(i.time);
            // state.tem.push('-');
            state.xAxis.push(i.time);
            state.foreCastInfoTem.push(i.value);
          })
          ForeCastHighInfo.forEach((i: any) => {
            state.foreCastAvgInfoTem.push(i.value);
          })
        }
        console.log(state.xAxis)
        nextTick(() => {
          initTemLineChart();
        });
      });
    };

    // 获取顶部天气数据
    const getWhichCityWeather = (id: number) => {
      api.weather.getWhichCityWeather({ id: id }).then((res: any) => {
        state.oneCityInfo = res.Info
      });
    };

    // 温度折线图
    const initTemLineChart = () => {
      if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
      global.homeChartOne = <any>echarts.init(homeTemLineRef.value, state.charts.theme);

      const option = {
        backgroundColor: state.charts.bgColor,
        grid: { top: 70, right: 40, bottom: 50, left: 40 },
        tooltip: { trigger: 'axis' },
        legend: { data: [2, 3].indexOf(state.temperatureType) > -1 ? ['平均气温（℃）', '最低温度（℃）', '最高温度（℃）'] : ['气温（℃）', '平均气温（℃）'], left: '0' },
        xAxis: {
          data: state.xAxis
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: "{value}℃"
            },
            splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
          },
        ],
        series:  [2, 3].indexOf(state.temperatureType) > -1 ? [
          {
            name: '平均气温（℃）',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
            data: state.averageTem,
            lineStyle: { color: '#fe9a8b' },
            itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fe9a8bb3' },
                { offset: 1, color: '#fe9a8b03' },
              ]),
            },
          },
          {
            name: '最低温度（℃）',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
            data: state.foreCastInfoTem,
            lineStyle: { color: '#2b79ff' },
            itemStyle: { color: '#2b79ff', borderColor: '#2b79ff' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2b79ff' },
                { offset: 1, color: '#c5e3ed' },
              ]),
            },
          },
          {
            name: '最高温度（℃）',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: state.foreCastAvgInfoTem,
            lineStyle: { color: '#41b883' },
            itemStyle: { color: '#41b883', borderColor: '#41b883' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#41b883' },
                { offset: 1, color: '#ddf2eaab' },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    { offset: 0, color: '#9E87FF' },
                    { offset: 0.4, color: '#9E87FF' },
                    { offset: 0.5, color: '#fff' },
                    { offset: 0.7, color: '#fff' },
                    { offset: 0.8, color: '#fff' },
                    { offset: 1, color: '#fff' },
                  ],
                },
                borderColor: '#9E87FF',
                borderWidth: 2,
              },
            },
          },
        ]: [{
            name: '气温（℃）',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            // data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
            data: state.tem,
            lineStyle: { color: '#fe9a8b' },
            itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fe9a8bb3' },
                { offset: 1, color: '#fe9a8b03' },
              ]),
            },
          },
          {
            name: '平均气温（℃）',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: state.averageTem,
            lineStyle: { color: '#9E87FF' },
            itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#9E87FFb3' },
                { offset: 1, color: '#9E87FF03' },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    { offset: 0, color: '#9E87FF' },
                    { offset: 0.4, color: '#9E87FF' },
                    { offset: 0.5, color: '#fff' },
                    { offset: 0.7, color: '#fff' },
                    { offset: 0.8, color: '#fff' },
                    { offset: 1, color: '#fff' },
                  ],
                },
                borderColor: '#9E87FF',
                borderWidth: 2,
              },
            },
          },],
      };
      (<any>global.homeChartOne).setOption(option);
      (<any>state.myCharts).push(global.homeChartOne);
    };
    // 风力折线图
    const initWindLineChart = () => {
      if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
      global.homeChartTwo = <any>echarts.init(homeWindLineRef.value, state.charts.theme);
      const option = {
        backgroundColor: state.charts.bgColor,
        grid: { top: 70, right: 40, bottom: 50, left: 40 },
        tooltip: { trigger: 'axis' },
        legend: { data: [2, 3].indexOf(state.windpowerType) > -1 ? ['风力（级）', '平均风力（级）', '预测风力（级）', '预测平均风力（级）'] : ['风力（级）', '平均风力（级）'], left: '0' },
        xAxis: {
          data: state.xAxisWind
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: "{value}级"
            },
            splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
          },
        ],
        series: [
          {
            name: '风力（级）',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: state.temWind,
            lineStyle: { color: '#fe9a8b' },
            itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fe9a8bb3' },
                { offset: 1, color: '#fe9a8b03' },
              ]),
            },
          },
          {
            name: '预测风力（级）',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: state.foreCastInfoWind,
            lineStyle: { color: '#2b79ff' },
            itemStyle: { color: '#2b79ff', borderColor: '#2b79ff' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2b79ff' },
                { offset: 1, color: '#c5e3ed' },
              ]),
            },
          },
          {
            name: '平均风力（级）',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: state.averageTemWind,
            lineStyle: { color: '#9E87FF' },
            itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#9E87FFb3' },
                { offset: 1, color: '#9E87FF03' },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    { offset: 0, color: '#9E87FF' },
                    { offset: 0.4, color: '#9E87FF' },
                    { offset: 0.5, color: '#fff' },
                    { offset: 0.7, color: '#fff' },
                    { offset: 0.8, color: '#fff' },
                    { offset: 1, color: '#fff' },
                  ],
                },
                borderColor: '#9E87FF',
                borderWidth: 2,
              },
            },
          },
          {
            name: '预测平均风力（级）',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: state.foreCastAvgInfoWind,
            lineStyle: { color: '#41b883' },
            itemStyle: { color: '#41b883', borderColor: '#41b883' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#41b883' },
                { offset: 1, color: '#ddf2eaab' },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    { offset: 0, color: '#9E87FF' },
                    { offset: 0.4, color: '#9E87FF' },
                    { offset: 0.5, color: '#fff' },
                    { offset: 0.7, color: '#fff' },
                    { offset: 0.8, color: '#fff' },
                    { offset: 1, color: '#fff' },
                  ],
                },
                borderColor: '#9E87FF',
                borderWidth: 2,
              },
            },
          },
        ],
      };
      (<any>global.homeChartTwo).setOption(option);
      (<any>state.myCharts).push(global.homeChartTwo);
    };
    // 批量设置 echarts resize
    const initEchartsResizeFun = () => {
      nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
          setTimeout(() => {
            (<any>state.myCharts[i]).resize();
          }, 0);
        }
      });
    };
    // 批量设置 echarts resize
    const changeCollapse = () => {
      isCollapse.value = !isCollapse.value;
      initEchartsResizeFun()
    };
    // 批量设置 echarts resize
    const initEchartsResize = () => {
      window.addEventListener('resize', initEchartsResizeFun);
    };
    // 页面加载时
    onMounted(() => {
      initEchartsResize();
      getCityWeatherList();
    });
    // 由于页面缓存原因，keep-alive
    onActivated(() => {
      initEchartsResizeFun();
    });
    // 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
    watch(
      () => store.state.tagsViewRoutes.isTagsViewCurrenFull,
      () => {
        initEchartsResizeFun();
      }
    );
    // 监听 vuex 中是否开启深色主题
    watch(
      () => store.state.themeConfig.themeConfig.isIsDark,
      (isIsDark) => {
        nextTick(() => {
          state.charts.theme = isIsDark ? 'dark' : '';
          state.charts.bgColor = isIsDark ? 'transparent' : '';
          state.charts.color = isIsDark ? '#dadada' : '#303133';
          setTimeout(() => {
            initTemLineChart();
          }, 500);
          setTimeout(() => {
            initWindLineChart();
          }, 700);
        });
      },
      {
        deep: true,
        immediate: true,
      }
    );
    watch(
      () => state.currentcityId,
      () => {
        getWhichCityWeather(state.currentcityId);
        getTemperatureEchartById(state.currentcityId);
        getWindpowerEchartById(state.currentcityId)
      }
    );
    return {
      changeCollapse,
      isCollapse,
      homeTemLineRef,
      homeWindLineRef,
      getWhichCityWeather,
      getCityWeatherList,
      getTemperatureEchartById,
      getWindpowerEchartById,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.history{
  font-weight: bold;
  cursor: pointer;
}
.monitor-weather {
	overflow: hidden;
	display: flex;
	background-color: #fff;
	padding: 20px;
	justify-content: space-between;

	.left {
		width: 384px;
		height: 500px;
		margin-right: 20px;
		position: relative;
		.collapse {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			padding: 5px;
			width: 36px;
			height: 36px;
			cursor: pointer;
		}

		.city-weather-data-overview-wrap {
			border: 1px solid #f2f2f2;

			section.title {
				font-size: 18px;
				font-weight: bold;
				color: #1a1a1a;
				padding-top: 30px;
			}

			section {
				padding: 20px 0;

				span {
					display: inline-block;
					width: 33%;
					text-align: center;
				}

				span:nth-child(2) {
					border-left: 1px solid #f2f2f2;
					border-right: 1px solid #f2f2f2;
				}
			}

			section:nth-child(2n) {
				background-color: #fff;
			}

			section:nth-child(2n + 1) {
				background-color: #f8f8f8;
			}

			section.active {
				background: var(--el-color-primary-light-9);
			}
		}
	}

	.right {
		flex: 1;
		height: 100%;
		overflow: hidden;

		.weather-info {
			padding: 15px 30px 15px 30px;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);

			section:nth-child(1) {
				margin-bottom: 12px;
			}

			section {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.temperature {
					font-size: 50px;
					font-weight: bold;
				}

				img {
					margin: 0 10px 0 30px;
				}

				.weather {
					margin-right: 30px;
				}

				img {
					width: 24px;
				}

				.sunset-sunrise {
					margin: 0 8xpx 0 47px;
				}

				.sunset {
					margin-right: 40px;
				}
			}
		}
	}

	.home-card-two,
	.home-card-three {
		.home-card-item,
		.home-card-top {
			width: 100%;
			height: 130px;
			border-radius: 4px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);

			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}

			&-icon {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				flex-shrink: 1;

				i {
					color: var(--el-text-color-placeholder);
				}
			}

			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
			}
		}
	}

	// .home-card-one {
	// 	@for $i from 0 through 3 {
	// 		.home-one-animation#{$i} {
	// 			opacity: 0;
	// 			animation-name: error-num;
	// 			animation-duration: 0.5s;
	// 			animation-fill-mode: forwards;
	// 			animation-delay: calc($i/10) + s;
	// 		}
	// 	}
	// }
	.home-card-item-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	// .home-card-one .home-card-item {
	// 		width: 100%;
	// 		border-radius: 4px;
	// 		transition: all ease 0.3s;
	// 		overflow: hidden;
	// 		background: var(--el-color-white);
	// 		color: var(--el-text-color-primary);
	// 		border: 1px solid var(--next-border-color-light);
	// 		&:hover {
	// 			box-shadow: 0 2px 12px var(--next-color-dark-hover);
	// 			transition: all ease 0.3s;
	// 		}
	// 		.item-header {
	// 			display: flex;
	// 			justify-content: center;
	// 			align-content: center;
	// 			color: #101010;
	// 			padding: 10px 0;
	// 			border-bottom: 1px solid var(--next-border-color-light);
	// 			font-size: 20px;
	// 			font-weight: bold;
	// 			img {
	// 				margin-right: 32px;
	// 				width: 24px;
	// 				height: 24px;;
	// 				margin-top: 3px;
	// 			}
	// 		}
	// 		.item-content {
	// 			padding: 26px;
	// 			p {
	// 				display: flex;
	// 				justify-content: space-between;
	// 				align-content: center;
	// 				span:nth-child(1) {
	// 					// padding-top: 4px;
	// 					line-height: 33px;;
	// 					font-size: 14px;
	// 				}
	// 				span:nth-child(2) {
	// 					color: #101010;
	// 					font-weight: bold;
	// 					font-size: 22px;
	// 				}
	// 			}
	// 			p:nth-child(2) {
	// 				margin-top: 26px;
	// 			}
	// 		}
	// }

	.home-card-two,
	.home-card-three {
		.home-card-item {
			height: 500px;
		}

		.home-card-top {
			height: 250px;

			.box-card {
				padding: 15px 20px 20px 20px;

				p {
					margin-bottom: 10px;
				}

				&-item {
					margin-bottom: 20px;
				}
			}
		}

		.home-card-item,
		.home-card-top {
			width: 100%;
			overflow: hidden;

			.home-monitor {
				height: 100%;

				.flex-warp-item {
					width: 25%;
					height: 111px;
					display: flex;

					.flex-warp-item-box {
						margin: auto;
						text-align: center;
						color: var(--el-text-color-primary);
						display: flex;
						border-radius: 5px;
						background: var(--next-bg-color);
						cursor: pointer;
						transition: all 0.3s ease;

						&:hover {
							background: var(--el-color-primary-light-9);
							transition: all 0.3s ease;
						}
					}

					@for $i from 0 through $homeNavLengh {
						.home-animation#{$i} {
							opacity: 0;
							animation-name: error-num;
							animation-duration: 0.5s;
							animation-fill-mode: forwards;
							animation-delay: calc($i/10) + s;
						}
					}
				}
			}
		}
	}

	.text-info {
		color: #23c6c8;
	}

	.text-danger {
		color: #ed5565;
	}

	.git-res {
		margin-top: 20px;
	}

	.git-res .el-link {
		margin-right: 30px;
	}

	ul,
	li {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.product {
		margin-top: 50px;

		h3 {
			margin-bottom: 15px;
		}
	}

	.product li {
		margin-bottom: 20px;
		float: left;
		width: 150px;
	}

	.box-card.xx {
		margin-top: 20px;
	}
}
</style>