neim/neim-ui/src/views/largeScreenPage/Subpage/stationInfo.vue

<template>
  <div class="page stationInfoPage">
    <div class="timeBox">{{ time }}</div>
    <div class="kaiguanBox"><img src="../../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px"
                                 @click="pushZaiXian()"/></div>
    <div class="topTiltle">
      <span class="title">在运风光场站信息</span>
    </div>
    <div class="btuGroup">
      <div class="topBtu topLeftBtu" @click="back()">
        <span class="btuText">返回&nbsp;</span>
      </div>
      <div class="topBtu topRightBtu" @click="push()">
        <span class="btuText">后台管理</span>
      </div>
    </div>
    <div class="myMain-container">
      <div class="rightTextBg">
        <div class="rightBg topBox">
          <div class="rightTiltleTextBg">
            <div class="rightMainTitle" style="display: flex;justify-content: space-between;width: 100%">

              <span class="mainTitle" @click="pushInfo()">{{ station.stationName }}</span>
              <div style="display: flex;margin-right: 8%;color: #f9ff00;font-size: 16px">
                <span v-if="station.type === '风'">主风向：</span>
                <span v-else>天气：</span>{{ wdSum }}
              </div>

            </div>
          </div>

          <div class="rightTopContent" v-for="item in dataInfo">
            <div class="branckTitleBg">
              <span class="fjModel">{{ item.modelType }}
                <span class="number" style="margin-left: 4%">{{ item.modelTotal }}</span>台</span>
            </div>
            <div>
              <div class="rightMain"  v-if="station.type === '风'">
                <div class="contentBox">
                  <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>
                  <span class="textBox">平均风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>
                </div>
                <div class="tabelTextbg">
                  <div class="tabelText">
                    <div>最小风速:</div>
                    <span>{{ item.wsMax.replace(/\.?0+$/, "") }} (m/s)</span>
                  </div>
                  <div class="tabelText">
                    <div>最大风速:</div>
                    <span>{{ item.wsMin.replace(/\.?0+$/, "") }}(m/s)</span>
                  </div>
                </div>
              </div>
              <div class="rightMain" v-else>
                <div class="contentBox">
                  <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>
                  <span class="textBox">平均日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>
                </div>
                <div class="tabelTextbg">
                  <div class="tabelText">
                    <div>最小日照:</div>
                    <span>{{ item.wsMax.replace(/\.?0+$/, "") }} (W/m²)</span>
                  </div>
                  <div class="tabelText">
                    <div>最大日照:</div>
                    <span>{{ item.wsMin.replace(/\.?0+$/, "") }}(W/m²)</span>
                  </div>
                </div>
              </div>
              <div style="width: 100%;display: flex;justify-content: center">
              <dv-decoration-10 style="width:80%;height:5px;" />
              </div>

              <div class="rightMain">
                <div class="contentBox">
                  <span class="numberBox">{{ item.generatingCapacityr.replace(/\.?0+$/, "") }}</span>
                  <span class="textBox">发电量<div class="numberBox" style="font-size: 14px">(MWh)</div></span>
                </div>
                <div class="tabelTextbg">
                  <div class="tabelText">
                    <div>月发电量:</div>
                    <span>{{ item.generatingCapacityy.replace(/\.?0+$/, "") }} (MWh)</span>
                  </div>
                  <div class="tabelText">
                    <div>年发电量:</div>
                    <span>{{ item.generatingCapacityr.replace(/\.?0+$/, "") }}(MWh)</span>
                  </div>
                </div>
              </div>
              <div style="width: 100%;display: flex;justify-content: center">
                <dv-decoration-10 style="width:80%;height:5px;" />
              </div>
              <div class="rightMain">
                <div class="contentBox">
                  <span class="numberBox">{{ item.realTimeTotalr.replace(/\.?0+$/, "") }}</span>
                  <span class="textBox">满发小时数<div class="numberBox" style="font-size: 14px">(h)</div></span>
                </div>
                <div class="tabelTextbg">
                  <div class="tabelText">
                    <div>月累计:</div>
                    <span>{{ item.realTimeTotaly.replace(/\.?0+$/, "") }} (h)</span>
                  </div>
                  <div class="tabelText">
                    <div>年累计:</div>
                    <span>{{ item.realTimeTotal.replace(/\.?0+$/, "") }}(h)</span>
                  </div>
                </div>
              </div>
            </div>


            <!--            -->
<!--            <div class="mainContent" v-if="station.type === '风'">-->
<!--              <div class="contentBox">-->
<!--                <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>-->
<!--                <span class="textBox">平均风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>-->
<!--              </div>-->
<!--              <div class="contentBox">-->
<!--                <span class="numberBox">{{ item.wsMax.replace(/\.?0+$/, "") }}</span>-->
<!--                <span class="textBox">最大风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>-->
<!--              </div>-->
<!--              <div class="contentBox">-->
<!--                <span class="numberBox">{{ item.wsMin }}</span>-->
<!--                <span class="textBox">最小风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="mainContent" v-else>-->
<!--              <div class="contentBox">-->
<!--                <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>-->
<!--                <span class="textBox">平均日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>-->
<!--              </div>-->
<!--              <div class="contentBox">-->
<!--                <span class="numberBox">{{ item.wsMax.replace(/\.?0+$/, "") }}</span>-->
<!--                <span class="textBox">最大日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>-->
<!--              </div>-->
<!--              <div class="contentBox">-->
<!--                <span class="numberBox">{{ item.wsMin }}</span>-->
<!--                <span class="textBox">最小日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">-->
<!--              <div class="tabelTextbg">-->
<!--                <div style="width: 100%;text-align: center;margin-bottom: 1%">发电量 (MWh)</div>-->
<!--                <div class="split-line"></div>-->
<!--                &lt;!&ndash;              <el-divider></el-divider>&ndash;&gt;-->
<!--                <div class="tabelText" style="padding-top: 2%;">-->
<!--                  <div>日累计:</div>-->
<!--                  <div>{{ item.generatingCapacityr.replace(/\.?0+$/, "") }}</div>-->
<!--                </div>-->
<!--                <div class="tabelText">-->
<!--                  <div>月累计:</div>-->
<!--                  <div>{{ item.generatingCapacityy.replace(/\.?0+$/, "") }}</div>-->
<!--                </div>-->
<!--                <div class="tabelText">-->
<!--                  <div>年累计:</div>-->
<!--                  <div>{{ item.generatingCapacity.replace(/\.?0+$/, "") }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="tabelTextbg">-->
<!--                <div style="width: 100%;text-align: center;margin-bottom: 1%">等效小时数 (h)</div>-->
<!--                <div class="split-line"></div>-->
<!--                &lt;!&ndash;              <el-divider></el-divider>&ndash;&gt;-->
<!--                <div class="tabelText" style="padding-top: 2%;">-->
<!--                  <div>日累计:</div>-->
<!--                  <div>{{ item.realTimeTotalr.replace(/\.?0+$/, "") }}</div>-->
<!--                </div>-->
<!--                <div class="tabelText">-->
<!--                  <div>月累计:</div>-->
<!--                  <div>{{ item.realTimeTotaly.replace(/\.?0+$/, "") }}</div>-->
<!--                </div>-->
<!--                <div class="tabelText">-->
<!--                  <div>年累计:</div>-->
<!--                  <div>{{ item.realTimeTotal.replace(/\.?0+$/, "") }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
          </div>


        </div>

      </div>

      <div class="mapBtuBg">
        <div id="mapBtuOne" class="mapBtu mapBtuBefore" @click="clickBtu('mapBtuOne')">
          <span class="mapBtuText">地形图</span>
        </div>
        <!--        <div id="mapBtuTwo" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuTwo')">-->
        <!--          <span class="mapBtuText">风场气象图</span>-->
        <!--        </div>-->
        <div id="mapBtuThree" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuThree')">
          <span class="mapBtuText">风资源分布图</span>
        </div>
        <!--        <div id="mapBtuFour" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFour')">-->
        <!--          <span class="mapBtuText">光辐射气象图</span>-->
        <!--        </div>-->
        <div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFive')">
          <span class="mapBtuText">光资源分布图</span>
        </div>
        <div id="mapBtu3D" class="mapBtu mapBtuAfter" @click="dialog3DMap()">
          <span class="mapBtuText">3D地形图</span>
        </div>
      </div>
    </div>
    <div v-if="mapMark === 'mapBtuOne'">
      <bige-map ref="childMethod" :mapValue="mapValue"/>
    </div>
    <div v-if="mapMark === 'mapBtuThree'">
      <bige-heat-map ref="childMethod" :mapValue="mapValue"/>
    </div>
    <div v-if="mapMark === 'mapBtuFive'">
      <bige-heat-sun-map ref="childMethod" :mapValue="mapValue"/>
    </div>
    <div v-if="mapMark === 'mapBtu'">
      <zai-xian-bige-map ref="childMethod" :mapValue="mapValue"/>
    </div>
    <!--3D弹窗-->
    <div class="map3D">
      <el-dialog
        :visible.sync="dialogVisible" :modal-append-to-body="false"
        width="80%"
        :before-close="handleClose">
        <bige-map3-d :mapValue="mapValue" v-if="dialogVisible"/>
      </el-dialog>
    </div>
    <div class="bottomPushBtu" @click="pushStationResource()">
      <span>在运风光场站资源管理</span>
    </div>

  </div>
</template>

<script>
import {getPointMap, stationInfo} from "@/api/biz/dataQuery/largeScreenPage";
import bigeMap from "@/views/largeScreenPage/components/bigeMap";
import bigeHeatMap from "@/views/largeScreenPage/components/bigeHeatMap";
import bigeHeatSunMap from "@/views/largeScreenPage/components/bigeHeatSunMap";
import zaiXianBigeMap from "@/views/largeScreenPage/components/zaiXianBigeMap";
import bigeMap3D from "@/views/largeScreenPage/components/3DbigeMap";

export default {
  name: "stationInfo",
  components: {
    bigeMap, bigeHeatMap, bigeHeatSunMap, zaiXianBigeMap, bigeMap3D
  },
  data() {
    return {
      timer: null,
      time: '',
      station: {stationName: "XXX风电场", type: "风"},
      dataInfo: [
        // {category:'一期',fjNum:'20',model:'恩德1.3MW机型',avgWs:'4.5',power:'39650',wd:'西南',hour:'1525'},
        // {category:'二期',fjNum:'30',model:'华锐1.5MW机型',avgWs:'4.7',power:'73125',wd:'西',hour:'1625'},
      ],
      modelT: [],
      coordinates: [],
      mapMark: 'mapBtuOne',
      //地图传值
      mapValue: {
        level: null,//地图层级
        center: [],//中心坐标
        allStationInfo: null,//场站坐标
        projectInfo: null,//项目坐标
        allPointInfo: null,//所有点位信息
      },
      allPointInfo: [],
      dialogVisible: false,
      wdSum: ''
    }
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.station = JSON.parse(this.$store.getters.stationInfo)
    // console.log(this.station)
    this.formatTime()
    this.getPointMap()
    this.timer = setInterval(this.formatTime, 1000 * 60)
  },
  methods: {
    /*所有风机、塔、拐点坐标信息*/
    getPointMap() {
      if (this.$store.getters.allPointInfo.length > 0) {
        this.allPointInfo = JSON.parse(this.$store.getters.allPointInfo).info
        this.getInfo()
      } else {
        getPointMap().then(res => {
          // console.log(res.data)
          this.allPointInfo = res.data
          this.getInfo()
          sessionStorage.setItem("allPointInfo", JSON.stringify({info: this.allPointInfo}))
          this.$store.dispatch('equipmentInfo/allPointInfo', JSON.stringify({info: this.allPointInfo}))
        }).catch(err => {
          console.log('所有点位坐标：' + err)
        })
      }
    },
    getInfo() {
      stationInfo({stationId: this.station.id}).then(res => {
        console.log(res.data)
        let data = res.data
        this.dataInfo = data.modelT
        if (this.dataInfo) {
          if (this.dataInfo[0] === undefined) {
            this.wdSum = ''
          } else {
            this.wdSum = this.dataInfo[0].wdSum
          }
        }
        if (data.latitude === undefined) {
          this.coordinates = []
        } else {
          this.coordinates = [Number(data.latitude), Number(data.longitude)]
        }

        this.mapValue = {
          params: new Date(),
          level: 12,//地图层级
          center: this.coordinates,//中心坐标
          allStationInfo: null,//场站坐标
          projectInfo: null,//项目坐标
          id: this.station.id,
          allPointInfo: this.allPointInfo,//所有点位信息
        }
      }).catch(err => {
        this.mapValue = {
          params: new Date(),
          level: 6,//地图层级
          center: [],//中心坐标
          allStationInfo: null,//场站坐标
          projectInfo: null,//项目坐标
          id: this.station.id,
          allPointInfo: null,//所有点位信息
        }
        if (err.msg === 'Index: 0, Size: 0') {
          console.log('此场站没有风机与测风塔')
        } else {
          console.log('场站信息获取异常：', err)
        }

      })
    },
    push() {
      this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
    },
    pushInfo() {
      let station = {stationId: this.station.id, equipmentNo: null}
      if (this.station.type === '风') {
        sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
        this.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
        this.$router.push({path: "/homepage/realResourcesInfo"})
      } else {
        sessionStorage.setItem("realPvWindTowerInfo", JSON.stringify(station))
        this.$store.dispatch('equipmentInfo/realPvWindTowerInfo', JSON.stringify(station))
        this.$router.push({path: "/homepage/realPvResourcesInfo"})
      }

    },
    back() {
      this.$router.push({path: "/homepage/stationResources"})
    },
    pushStationResource() {
      this.$router.push({path: "/homepage/stationResources"})
    },
    pushZaiXian() {
      if (this.mapMark === 'mapBtuOne') {
        let center = this.$refs.childMethod.center
        let level = this.$refs.childMethod.level
        this.mapValue = {
          params: new Date(),
          level: level === '' ? null : level,//地图层级
          center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
          allStationInfo: null,//场站坐标
          projectInfo: null,//项目坐标
          id: this.station.id,
          allPointInfo: this.allPointInfo,//所有点位信息
        }
        this.mapMark = 'mapBtu'
      }
    },
    dialog3DMap() {
      let center = this.$refs.childMethod.center
      let level = this.$refs.childMethod.level
      this.mapValue = {
        params: new Date(),
        level: level === '' ? null : level,//地图层级
        center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
        allStationInfo: null,//场站坐标
        projectInfo: null,//项目坐标
        id: this.station.id,
        allPointInfo: this.allPointInfo,//所有点位信息
      }
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    clickBtu(id) {
      let center = this.$refs.childMethod.center
      let level = this.$refs.childMethod.level
      this.mapValue = {
        params: new Date(),
        level: level === '' ? null : level,//地图层级
        center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
        allStationInfo: null,//场站坐标
        projectInfo: null,//项目坐标
        id: this.station.id,
        allPointInfo: this.allPointInfo,//所有点位信息
      }
      this.mapMark = id
      let clickItem = document.getElementById(id)
      let activeItem = document.querySelector('.mapBtuBefore')
      activeItem.classList.remove('mapBtuBefore')
      activeItem.classList.add('mapBtuAfter')
      clickItem.classList.remove('mapBtuAfter')
      clickItem.classList.add('mapBtuBefore')
    },
    /*时间格式化*/
    formatTime() {
      this.time = ''
      let date = new Date()
      let year = date.getFullYear();                // 年
      let month = date.getMonth() + 1;        // 月
      let day = date.getDate();
      let hour = date.getHours();                   // 获取当前小时数(0-23)
      let minutes = date.getMinutes();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      if (minutes < 10) minutes = "0" + minutes;
      this.time = year + "-" + month + "-" + day + " " + hour + ' : ' + minutes;
    }
  }
}
</script>

<style scoped>
.stationInfoPage {
  width: 100%;
  height: calc(100vh);
  background: url(../../../assets/largeScreenImg/backBg.png) no-repeat;
  background-size: 100% 100%;
  color: white;
}

.timeBox {
  position: absolute;
  left: 2%;
  top: 0;
  font-size: 20px;
  line-height: 40px;
  font-family: timeFont !important;
}

.page {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  box-shadow: inset -1px -20px 550px 200px rgb(12 25 69  / 80%);
}

.topTiltle {
  width: 100%;
  height: 5.5%;
  background: url(../../../assets/largeScreenImg/index/topTitleBg.png) -2px -1px no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}

.title {
  width: 17%;
  height: 100%;
  text-align: center;
  margin-top: .2%;
  font-size: 30px;
  font-weight: 800;
  background-image: linear-gradient(
    360deg,
    rgba(178, 204, 252, 1) 0,
    rgba(178, 204, 252, 1) 0,
    rgba(255, 255, 255, 1) 100%,
    rgba(255, 255, 255, 1) 100%
  );
  background-clip: text;
  color: transparent;
}

.btuGroup {
  position: absolute;
  right: 0;
  top: 0;
  color: white;
  width: 15%;
  height: 5.5%;
  display: flex;
  justify-content: flex-end;
  font-size: 18px;
}

.topBtu {
  height: 100%;
  margin-top: -1.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.topRightBtu {
  background: url(../../../assets/largeScreenImg/index/topRightBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 50%;
}

.topLeftBtu {
  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 35%;
}

.rightTextBg {
  height: calc(90vh);
  position: absolute;
  right: 2%;
  top: 5%;
  width: 20%;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.rightBg {
  background: url(../../../assets/largeScreenImg/index/leftTextBg.png) 100% no-repeat;
  background-size: 100% 100%;
  padding: 5%;
}

.tabelTextbg {
  width: 80%;
  height: 80px;
  background: url(../../../assets/largeScreenImg/resourcesInfo/heightBg.png) 100% no-repeat;
  background-size: 100% 100%;
  padding: 5%;
}

.tabelText {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mapBtuBg {
  position: absolute;
  right: 22%;
  top: 7%;
  width: 10%;
  z-index: 1000;
}

.rightTiltleTextBg {
  height: 32px;
  background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/rightTitleBg.png) 100% no-repeat;
  background-size: 100% 100%;
}


.rightMainTitle {
  color: rgba(183, 243, 252, 1);
  font-size: 20px;
  font-weight: 550;
  margin-left: 8%;
  position: relative;
  top: -25%;
}

.rightTopContent {
  margin-top: 4%;
}

.branckTitleBg {
  background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/branckTitleBg.png) 100% no-repeat;
  background-size: 100% 100%;
  height: 32px;
  display: flex;
  align-items: center;
}

.textBox {
  display: flex;
  flex-direction: column;
  align-items: center
}

.fjModel {
  width: 100%;
  margin-left: 2%;
}

.mainContent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.rightMain{
  display: flex;
  align-items: center;
}
.contentBox {
  margin-top: 2%;
  width: 40%;
  height: 100px;
  background: url(../../../assets/largeScreenImg/index/liubianxingBorder.png) 100% no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.number {
  font-weight: 700;
  background-image: linear-gradient(
    rgba(255, 255, 255, 1) 0,
    rgba(255, 255, 255, 1) 0,
    rgba(70, 255, 222, 1) 98.730469%,
    rgba(70, 255, 222, 1) 100%
  );
  background-clip: text;
  color: transparent;
}

.numberBox {
  font-size: 24px;
  font-weight: 700;
  background-image: linear-gradient(
    rgba(255, 255, 255, 1) 0,
    rgba(255, 255, 255, 1) 0,
    rgba(70, 255, 222, 1) 98.730469%,
    rgba(70, 255, 222, 1) 100%
  );
  background-clip: text;
  color: transparent;
}

.mapBtu {
  height: 50px;
  width: 200px;
}

.mapBtuAfter {
  background: url(../../../assets/largeScreenImg/index/mapBtuClickAfter.png) 100% no-repeat;
  background-size: 100% 100%;
}

.mapBtuBefore {
  background: url(../../../assets/largeScreenImg/index/mapBtuClickBefore.png) 100% no-repeat;
  background-size: 100% 100%;
  /*margin-top: 9px;*/
}

.mapBtuText {
  line-height: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  margin-left: 20%;
}

.bottomPushBtu {
  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  line-height: 60px;
  width: 12%;
  cursor: pointer;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
}

.kaiguanBox {
  cursor: pointer;
  position: absolute;
  left: 22%;
  top: .5%;
}

.map3D /deep/ .el-dialog__header, .map3D /deep/ .el-dialog__body {
  padding: 0;
}

.map3D /deep/ .el-dialog__headerbtn {
  z-index: 100;
  top: 10px;
  right: 10px;
}

.map3D /deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
}
</style>
<style scoped>

.split-line {
  position: relative;
  height: 2px; /* 分割线的高度 */
  background-color: #f0f0f0; /* 分割线的背景色 */
  overflow: hidden; /* 避免伪元素溢出容器 */
  border-radius: 10%;
}

.split-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #5ffffa, #7bfafe, #5fcfff); /* 创建渐变效果 */
  background-size: 300%; /* 渐变区域比容器大，以便创造重复的效果 */
  animation: slide 5s linear infinite; /* 使用关键帧动画 */
}

@keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 300% 0;
  }
}

/* 设置滚动条样式 */
/* 设置scrollbar-thumb之前要设置scrollbar的width和height */
::-webkit-scrollbar-track {
  border-radius: 0;
  background-color: #f2f3f8;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(0deg, rgba(202, 214, 220, 0.5) 0, #737179 100%);
  -webkit-transition: all .2s;
  transition: all .2s;
}

::-webkit-scrollbar-corner {
  background-color: #f2f3f8;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

</style>