<template>
  <view>
    <view class="home_pic_static">
      <view class="home_pic" style="z-index: 0">
        <image :src="image3" mode="aspectFill" class="swp_1_img"></image>
      </view>
      <view class="home_pic">
        <image :src="image" mode="aspectFill" :class="cla"></image>
      </view>
      <view class="home_pic">
        <image :src="image2" mode="aspectFill" :class="cla2"></image>
      </view>
      <view class="hua_jt">
        <image src="/static/animg/index/jiant_up.png" mode="aspectFill" class="dong_j"></image>
      </view>
      <view class="home_nav">
        <view class="dy_fx fx_warp_w h_nav_box">
          <view class="w_25" hover-class="checkActive">
            <view class="kua_nav" @click="goToPages('jingqu')">
              <image src="/static/animg/index/jqmp.png" class="at_size_1"></image>
              <view class="at_t">景区门票</view>
            </view>
          </view>
          <view class="w_25" hover-class="checkActive">
            <view class="kua_nav" @click="goToPages('hotel')">
              <image src="/static/animg/index/jdms.png" class="at_size_1"></image>
              <view class="at_t">酒店民宿</view>
            </view>
          </view>
          <view class="w_25" hover-class="checkActive">
            <view class="kua_nav" @click="goToPages('line')">
              <image src="/static/animg/index/jpxl.png" class="at_size_1"></image>
              <view class="at_t">精品线路</view>
            </view>
          </view>
          <view class="w_25" hover-class="checkActive">
            <view class="kua_nav" @click="goToPages('jiqiren')">
              <image src="/static/animg/index/znkf.png" class="at_size_1"></image>
              <view class="at_t">智能客服</view>
            </view>
          </view>
        </view>
      </view>
      <view class="home_serch_1">
        <weather :show-location="false" ref="locationAndWeather" />
        <view class="sch_2" @click="gotoSearch">
          <image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-search_2.png"></image>
        </view>
      </view>
    </view>
    <view class="m-bankuai">
      <view class="left" hover-class="opacity-pic" @click="goBankuai('hd')">
        <view class="m-title">活动日历</view>
        <view class="m-tip">更多活动敬请期待！</view>
      </view>
      <view class="right">
        <view class="right-son meishi" hover-class="opacity-pic" @click="goBankuai('meishi')">
          <view class="tit">特色美食</view>
        </view>
        <view class="right-son wenhua" hover-class="opacity-pic" @click="goBankuai('wenhua')">
          <view class="tit">非遗文化</view>
        </view>
        <view class="right-son zhoubian" hover-class="opacity-pic" @click="goBankuai('zhoubian')">
          <view class="tit">文创周边</view>
        </view>
        <view class="right-son tousu" hover-class="opacity-pic" @click="goBankuai('tousu')">
          <!-- <view class="right-son tousu" hover-class="opacity-pic" > -->
          <view class="tit">我要投诉</view>
        </view>
      </view>
    </view>
    <view class="amt_30">
      <view class="an_box an_sch">
        <view class="dy_fx">
          <view class="tips">鹿泉<span class="m-red">新闻</span></view>
          <view class="fx_1 aml_30 amr_30 m-tips">
            <swiper autoplay="true" class="ht_swp_xi" :duration="duration_hj" :indicator-dots="falseDots"
              :interval="interval_hj" :vertical="trueVcal">
              <swiper-item class="word_1 xi_txt" v-for="(item, index) in zxList" :key="index"
                @click="goToZixunDetail(item.guid)">
                <view class="m-title">{{ item.title }}</view>
                <view class="more-ico">更多
                  <image class="more-icon" src="/static/animg/index/more.png" mode="scaleToFill" />
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
      <!-- 滑动nav -->
      <view class="m-slide-nav">
        <view :class="['m-slide-item', currIndex == index ? 'curr' : '']" v-for="(item, index) in slideNav"
          @tap="changeIndex(index)">
          {{ item }}
        </view>
      </view>
      <!-- 景区 -->
      <!-- <view class="amb_30">
        <view class="an_box_2">
          <view class="amt_30">
            <view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
              <custom-waterfalls-flow :value="currIndex == 0 ? scenicList : currIndex == 1 ? foodList : hotelList" :imageKey="currIndex == 0 ? 'slogo':currIndex == 1 ? 'logo' :'hlogo'" class="water-flow">
                <view class="item" v-for="(item, index) in allDatas" :key="index" slot="slot{{index}}">
                  <view class="title h-name">{{ currIndex == 0 ? item.sname : currIndex == 1 ? item.title : item.hname }}</view>
                </view>
              </custom-waterfalls-flow>
            </view>
          </view>
        </view>
      </view> -->

      <view class="list-box">
        <view class="mask-box" v-if="showLoading">
          加载中...
        </view>
        <!-- 景区 -->
        <view class="amb_30" v-if="scenicList && scenicList.length > 0 && currIndex == 0">
          <view class="an_box_2">
     <!--       <view class="an_t" @click="goToPages('jingqu')">
              <view class="an_t_1">大美鹿泉</view>
              <view class="an_t_2">特色文创和旅游商品</view>
            </view> -->
            <!-- 瀑布流 -->
            <view class="amt_30">
              <view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
                <custom-waterfalls-flow @imageClick="goToDetail('scenic', $event)" :value="scenicList" imageKey="slogo"
                  class="water-flow">
                  <view class="item" v-for="(item, index) in scenicList" :key="index" slot="slot{{index}}">
                    <view class="title h-name">{{ item.sname }}</view>
                  </view>
                </custom-waterfalls-flow>
              </view>
            </view>
          </view>
        </view>
        <!-- 酒店 -->
        <view class="amb_30" v-if="hotelList && hotelList.length > 0 && currIndex == 2">
          <view class="an_box_2">
       <!--     <view class="an_t" @click="goToPages('hotel')">
              <view class="an_t_1">酒店</view>
              <view class="an_t_2">特色文创和旅游商品</view>
            </view> -->
            <!-- 瀑布流 -->
            <view class="amt_30">
              <view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
                <custom-waterfalls-flow @imageClick="goToDetail('xiadan', $event)" :value="hotelList" imageKey="hlogo"
                  class="water-flow">
                  <view class="item" v-for="(item, index) in hotelList" :key="index" slot="slot{{index}}">
                    <view class="title h-name">{{ item.hname }}</view>
                  </view>
                </custom-waterfalls-flow>
              </view>
            </view>
          </view>
        </view>
        <!-- 美食 -->
        <view class="amb_30" v-if="foodList && foodList.length > 0 && currIndex == 1">
          <view class="an_box_2">
           <!-- <view class="an_t" @click="goToPages('meishi')">
              <view class="an_t_1">鹿泉味道</view>
              <view class="an_t_2">特色文创和旅游商品</view>
            </view> -->
            <!-- 瀑布流 -->
            <view class="amt_30">
              <view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
                <custom-waterfalls-flow @imageClick="goToDetail('food', $event)" :value="foodList" imageKey="logo" class="water-flow">
                  <view class="item" v-for="(item, index) in foodList" :key="index" slot="slot{{index}}">
                    <view class="title h-name">{{ item.title }}</view>
                  </view>
                </custom-waterfalls-flow>
              </view>
            </view>
          </view>
        </view>

      </view>


    </view>
    <f-login></f-login>
  </view>
</template>

<script>
import weather from "@/uni_modules/jr-weather/components/jr-weather/jr-weather.vue";
export default {
  components: {
    weather,
  },
  data() {
    return {
      currIndex: 0,
      slideNav: ["怎么玩", "吃什么", "住哪里"],

      trueVcal: true,
      falseDots: false,
      interval_hj: 4500,
      duration_hj: 1000,

      indicatorDots: false,
      autoplay: true,
      interval: 5000,
      duration: 500,
      //
      current: 0,
      swiperCurrent: 0,

      video: null,
      indexNum: 0,
      old: {
        scrollTop: 0,
        markIndex: 0,
      },
      scenicList: [],
      videoList: [],
      SJZObject: {},
      wcList: [],
      foodList: [],
      yzOneList: {},
      yzList: [],
      lineOneList: {},
      lineList: [],
      lbtList: [],
      zxList: [],

      feiyiList: [],//非遗
      hotelList: [],//酒店
      specialtyList: [],//特产
      allDatas: [],
      // 轮播图
      image: "",
      image2: "",
      image3: "",
      j: 0,
      a: 0,
      b: 1,
      images: [],
      cla: "swp_1_img dhua",
      cla2: "swp_1_img dhua2",
      clas: ["swp_1_img dhua", "swp_1_img dhua2"],
      netType: true,
      showLoading: false
    };
  },
  onLoad(option) {
    var that = this;
    this.$util.getNetworkType(
      function (res) {
        if (res.networkType === "none") {
          uni.showToast({
            title: that.$param.netMsg,
            icon: "none",
            duration: 2000,
          });
          that.netType = false;
        }
      },
      function () {
        uni.showToast({
          title: that.$param.netMsg,
          icon: "none",
          duration: 2000,
        });
        that.netType = false;
      }
    );
    if (!that.netType) {
      return;
    }
    this.getRedisData();
    this.getZiXunList();
    let video = uni.createVideoContext("myVideo");
    this.video = video;
    setInterval(
      function () {
        if (that.j % 2 == 0) {
          //这个为每次l轮换样式
          that.cla = that.clas[1];
          that.cla2 = that.clas[0];

          that.a = that.a + 2;
          if (that.a == that.images.length) {
            that.a = 0;
          } else if (that.a > that.images.length) {
            that.a = that.a - that.images.length;
          }
          that.image = that.images[that.a];
        } else {
          that.cla = that.clas[0];
          that.cla2 = that.clas[1];

          that.b = that.b + 2;
          if (that.b == that.images.length) {
            that.b = 0;
          } else if (that.b > that.images.length) {
            that.b = that.b - that.images.length;
          }
          that.image2 = that.images[that.b];
        }
        that.j++;
      },
      1000 * 10,
      that
    );
  },
  methods: {
    waterClick(val,ss){
      console.log(val, ss,'maxNum')
    },
    //图跳转
    goBankuai(val) {
      switch (val) {
        case 'hd':
          uni.navigateTo({
            url: "/subPageA/hotevent/hoteventlist/hoteventlist",
          });
          break;
        case 'meishi':
          uni.navigateTo({
            url: "/subPageA/food/foodlist/foodlist",
          });
          break;
        case 'wenhua':
          uni.navigateTo({
            url: "/subPageA/feiyi/feiyilist/feiyilist",
          });
          break;
        case 'zhoubian':
          uni.navigateTo({
            url: "/subPageA/wenchuang/wenlist/wenlist",
          });
          break;
        case 'tousu':
          this.onTokenJump('/subPageB/suggest/sug_list?type=1', 'navigateTo')
          // uni.navigateTo({
          //   url: "/subPageB/suggest/sug_list?type=1",
          // });
          break;
      }
    },
    //切换tab
    changeIndex(index) {
      this.showLoading = true
      this.currIndex = index;
      setTimeout(() => {
        this.showLoading = false
      },500);
      // switch(index){
      //   case 0:
      //     this.allDatas = this.scenicList;
      //     break;
      //   case 1:
      //     this.allDatas = this.foodList;
      //     break;
      //   case 2:
      //     this.allDatas = this.hotelList;
      //     break;
      // }
      // this.$refs.waterfallsFlowRef.refresh();
    },
    //
    changeSwiper(e) {
      this.swiperCurrent = e.detail.current;
    },
    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    getRedisData: function (mescroll) {
      var data = {
        key: this.$param.userkey + "_index",
      };
      this.$Request.post(this.$config.getRedisData, data).then((res) => {
        console.log(res);
        if (res.status == 200) {
          //所有的数据
          var initData = res.data;

          //轮播图
          var lbtList = initData.lbtList;
          for (let i = 0; i < lbtList.length; i++) {
            lbtList[i].logo = this.$config.ROOTPATH + lbtList[i].logo;
            this.images[i] = lbtList[i].logo;
          }
          this.image = this.images[0];
          this.image2 = this.images[1];
          this.image3 = this.images[0];
          //景区
          var scenicList = initData.scenicList;
          // var scLength = scenicList.length > 4 ? 4 : scenicList.length;
          var scLength = scenicList.length;
          var scdata = [];
          for (let i = 0; i < scLength; i++) {
            scenicList[i].slogo = this.$config.ROOTPATH + scenicList[i].slogo;
            scdata.push(scenicList[i]);
          }
          this.scenicList = scdata;
          //美食
          var foodList = initData.foodList;
          // var foodLength = foodList.length > 4 ? 4 : foodList.length;
          var foodLength = foodList.length;
          for (var i = 0; i < foodLength; i++) {
            var item = {
              logo: this.$config.ROOTPATH + foodList[i].logo,
              region: foodList[i].bm,
              guid: foodList[i].guid,
              title: foodList[i].title,
              content: foodList[i].content
            };
            this.foodList.push(item);
          }

          //酒店
          var hotelList = initData.hotelList;
          // var hotelLength = hotelList.length > 4 ? 4 : hotelList.length;
          var hotelLength = hotelList.length;
          var list1 = [];
          for (var i = 0; i < hotelLength; i++) {
            hotelList[i].hlogo = this.$config.ROOTPATH + hotelList[i].hlogo;
            list1.push(hotelList[i]);
          }
          this.hotelList = list1;
        } else {
          this.getImgList(); //轮播图
          this.getScenicList(); //景区
          this.getFoodList(); //美食
        }
      });
    },
    getImgList: function () {
      var data = {
        pageno: "1",
        pageSize: "5",
        sort: "2",
        type: this.$param.imgType,
        userkey: this.$param.userkey,
      };
      this.$Request.post(this.$config.getMessageInfoFormFilter, data).then((res) => {
        var lbtList = res.data;
        for (var i = 0; i < lbtList.length; i++) {
          this.images[i] = this.$config.ROOTPATH + lbtList[i].logo;
        }
        this.image = this.images[0];
        this.image2 = this.images[1];
        this.image3 = this.images[0];
      });
    },
    getZiXunList: function () {
      var data = {
        pageno: "1",
        pageSize: "3",
        sort: "2",
        type: this.$param.zixunType,
        userkey: this.$param.userkey,
      };
      this.$Request.post(this.$config.getMessageInfoFormFilter, data).then((res) => {
        this.zxList = res.data;
      });
    },
    goToZixunDetail(guid) {
      console.log(guid, 'guid')
      uni.navigateTo({
        url: "/subPageB/zixun/zixundetail/zixundetail?id=" + guid,
      });
    },
    getScenicList: function () {
      var data = {
        pageno: "1",
        pagesize: "4",
        sort: "2",
        timestamp: 0,
        areacode: this.$config.ARER_CODE,
        userkey: this.$param.userkey,
      };
      this.$Request.post(this.$config.getscenicList, data).then((res) => {
        if (res.status == 500) {
          uni.showToast({
            title: res.msg,
            duration: 2000,
          });
          return;
        }
        var data = res.data;
        for (let i = 0; i < data.length; i++) {
          data[i].slogo = this.$config.ROOTPATH + data[i].slogo;
        }
        this.scenicList = data;
      });
    },
    getFoodList: function () {
      this.onc = "meishi";
      var data = {
        pageno: "1",
        pageSize: "4",
        sort: "2",
        region: this.$config.ARER_CODE,
        type: this.$param.foodType,
        userkey: this.$param.userkey,
      };
      this.$Request.post(this.$config.getMessageInfoFormFilter, data).then((res) => {
        if (res.status == 500) {
          uni.showToast({
            title: res.msg,
            duration: 2000,
          });
          return;
        }
        var data = res.data;
        for (let i = 0; i < data.length; i++) {
          data[i].logo = this.$config.ROOTPATH + data[i].logo;
        }
        this.foodList = data;
      });
    },
    goToPages: function (type) {
      var that = this;
      if (type == "jingqu") {
        uni.navigateTo({
          url: "/subPageA/scenic/sceniclist/sceniclist",
        });
        // uni.navigateTo({
        //   url: "/subPageC/bookTicket/bookTicket",
        // });
      } else if (type == "meishi") {
        uni.navigateTo({
          url: "/subPageA/food/foodlist/foodlist",
        });
      } else if (type == "line") {
        uni.navigateTo({
          url: "/subPageA/travelroute/travelroutelist/travelroutelist",
        });
      } else if (type == "hotel") {
        uni.navigateTo({
          url: "/subPageB/hotel/hotellist/hotellist",
        });
      } else if (type == "more") {
        uni.navigateTo({
          url: "/pages/fuwu/fuwu",
        });
      } else if (type == "wenchuang") {
        uni.navigateTo({
          url: "/subPageA/wenchuang/wenlist/wenlist",
        });
      } else if (type == "yuyue") {
        switch (uni.getSystemInfoSync().platform) {
          case "android":
            //安卓授权
            var that = this;
            this.$util.bindGpsObj(that);
            Android.gotoDetial("JumpApplet", "gh_03bcfb833a55");
            break;
          case "ios":
            //ios授权
            var that = this;
            this.$util.bindGpsObj(that);
            window.location.href =
              "https://www.baidu.com?url=applet&value=gh_03bcfb833a55";
            break;
        }
      } else if (type == "feiyi") {
        uni.navigateTo({
          url: "/subPageA/feiyi/feiyilist/feiyilist",
        });
      } else if (type == "hotevent") {
        uni.navigateTo({
          url: "/subPageA/hotevent/hoteventlist/hoteventlist",
        });
      } else if (type == "jiqiren") {
        that.$util.saveOperatorLog(that, "FUN", "机器人");
        uni.navigateTo({
          url: "/subPageB/jiqiren/jiqiren/zhinengjiqiren",
        });
      }
    },
    goToDetail: function (type, guid, region) {
      if (type == "scenic") {
        const list = JSON.stringify(this.scenicList)
		console.log("list",list)
        uni.navigateTo({
          // url: "/subPageA/scenic/scenicdetial/scenicdetial?guid=" + guid + `&listA=` + list,
          url: "/subPageA/scenic/scenicdetial/scenicdetial?guid=" + guid.guid,
        });
      } else if (type == "food") {
        uni.navigateTo({
          url:
            "/subPageA/food/fooddetial/fooddetial?fid=" + guid.guid + "&fareacode=" + guid.region,
        });
      } else if (type == "line") {
        uni.navigateTo({
          url: "/pages/travelroute/travelroutedetail/travelroutedetail?id=" + guid,
        });
      } else if (type == "feiyi") {
        uni.navigateTo({
          url: '/subPageA/feiyi/feiyidetail/feiyidetail?guid=' + guid
        });
      } else if (type == "xiadan") {
        uni.navigateTo({
          url: '/subPageB/hotel/hoteldetail/hoteldetail?id=' + guid.guid + '&region=' + guid.region
        });
      }
    },
    gotoSearch: function () {
      var that = this;
      that.$util.saveOperatorLog(that, "FUN", "搜索");
      uni.navigateTo({
        url: "/subPageA/search/search",
      });
    },


  },
};
</script>
<style scoped lang="scss">
.checkActive {
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0upx 0upx 0upx rgba(255, 255, 255, 0.2) !important;
  color: #3d3d3d !important;
  transition: 0.1s ease !important;
}

.w_25 {
  width: 24%;
  margin: 0 0.5%;
  background: #ffffff12;
  border-radius: 20rpx;
  padding: 30rpx 0;

  .kua_nav {
    border: none;
  }
}

.tips {
  font-family: Source Han Sans SC;
  font-weight: bold;
  font-size: 30rpx;
  color: #333333;
  background-image: url("@/static/animg/index/tips_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5rpx 10rpx;
}

.m-tips {
  height: 45rpx;
}

.m-slide-nav {
  height: 100rpx;
  overflow-x: scroll;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: relative;
  margin-top: 20rpx;

  .m-slide-item {
    width: 33%;
    font-family: Source Han Sans SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    flex-shrink: 0;
    transition: all ease-in-out 0.2s;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: 50% 15px;
    padding-bottom: 10px;
    text-align: center;
  }

  .curr {
    scale: 1.1;
    background-image: url("@/static/animg/index/active-nav-bg.png");
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 50% 15px;
    padding-bottom: 10px;
  }
}

.m-slide-nav::-webkit-scrollbar {
  display: none;
}

.m-slide-nav::before {
  content: "";
  width: 143rpx;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("@/static/animg/index/left-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 0;
}

.m-slide-nav::after {
  content: "";
  width: 340rpx;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/right-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 0;
}

.an_box {
  margin-bottom: 0rpx !important;
}

.w-content {
  padding: 0 20rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Source Han Sans SC;
  font-weight: 500;
  font-size: 26rpx;
  color: #1b1b1b;
}

.m-bankuai {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 13px 13px 0 0;
  position: relative;
  z-index: 9;
  top: -10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    width: 220rpx;
    height: 320rpx;
    background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/hd.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .m-title {
      font-family: Source Han Sans SC;
      font-weight: bold;
      font-size: 36rpx;
      color: #ffffff;
      font-style: italic;
      margin: 0 auto;
      width: fit-content;
      margin-top: 29rpx;
      margin-bottom: 11rpx;
    }

    .m-tip {
      font-family: Source Han Sans SC;
      font-weight: 400;
      font-size: 16rpx;
      color: #ffffff;
      font-style: italic;
      padding: 5rpx 10rpx;
      border-radius: 15rpx;
      border: solid 1rpx #fff;
      text-align: center;
      width: fit-content;
      margin: 0 auto;
    }
  }

  .right {
    margin-left: 24rpx;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-self: flex-start;

    .right-son {
      width: 48%;
      height: 150rpx;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      font-family: Source Han Sans SC;
      font-weight: 500;
      font-size: 26rpx;
      border-radius: 12rpx;
      overflow: hidden;

      .tit {
        width: fit-content;
        margin-top: 18rpx;
        margin-left: 23rpx;
      }
    }

    .meishi {
      color: #fb8314;
      background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/meishi.png");
    }

    .wenhua {
      color: #fc5425;
      background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/wenhua.png");
    }

    .zhoubian {
      margin-top: 16rpx;
      color: #4781fb;
      background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/zhoubian.png");
    }

    .tousu {
      color: #04a3da;
      margin-top: 16rpx;
      background-image: url("https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tousu.png");
    }
  }
}

.an_sch {
  margin-top: 0;
}

.amt_30 {
  margin-top: 0;
}

.h-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 20rpx 12rpx;
}

.water-flow {
  width: 100%;
}

.list-box {
  position: relative;

  .mask-box {
    width: 100%;
    min-height: 85vh;
    text-align: center;
    height: 100%;
    line-height: 85vh;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    z-index: 9;
    font-size: 36rpx;
    transition: all ease-in-out 0.2s;
  }
}
</style>
