CjyTravel/pages/index/index.vue

<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">
          <span>搜一下</span>
          <image src="/static/animg/index/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="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" 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;">
              <view class="w_two" v-for="(item, index) in scenicList" :key="index"
                @tap="goToDetail('scenic', item.guid)">
                <view class="">
                  <image :src="item.slogo" mode="aspectFill" class="pbl_1_img"></image>
                  <view class="h-name">{{ item.sname }}</view>
                </view>
              </view>
            </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;">
              <view class="w_two" v-for="(item, index) in hotelList" :key="index"
                @tap="goToDetail('xiadan', item.guid, item.region)">
                <view class="">
                  <image :src="item.hlogo" mode="aspectFill" class="pbl_1_img"></image>
                  <view class="h-name">{{ item.hname }}</view>
                </view>
              </view>
            </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;">
              <view class="w_two" v-for="(item, index) in foodList" :key="index"
                @tap="goToDetail('food', item.guid, '')">
                <view class="">
                  <image :src="item.logo" mode="aspectFill" class="pbl_1_img"></image>
                  <view class="h-name">{{ item.title }}</view>
                </view>
              </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: [],//特产
      // 轮播图
      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,
    };
  },
  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: {
    //图跳转
    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.currIndex = index;
    },
    //
    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 lineList = initData.lineList;
          // var lineLength = lineList.length > 4 ? 4 : lineList.length;
          var lineLength = lineList.length;
          var list = [];
          for (var i = 0; i < lineLength; i++) {
            lineList[i].llogo = this.$config.ROOTPATH + lineList[i].llogo;
            // if (i == 0) {
            //   this.lineOneList = lineList[i];
            // } else {
            list.push(lineList[i]);

            // }
          }
          this.lineOneList = list[0]; // 取数组的第一个元素
          this.lineList = list.slice(1); // 取数组中除了第一个以外的所有元素

          // this.lineList = list;
          console.log(this.lineOneList, this.lineList)
          //酒店
          debugger
          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;
          //特产

          var specialtyList = initData.specialtyList;
          // var specialltyLength = specialtyList.length > 4 ? 4 : specialtyList.length;
          var specialltyLength = specialtyList.length;
          var list2 = [];
          for (var i = 0; i < specialltyLength; i++) {
            specialtyList[i].slogo = this.$config.ROOTPATH + specialtyList[i].slogo;

            list2.push(specialtyList[i]);
          }
          this.specialtyList = list2;
          //非遗
          var feiyiList = initData.feiyiList;
          // var feiyiLength = feiyiList.length > 4 ? 4 : feiyiList.length;
          var feiyiLength = feiyiList.length;
          var list3 = [];
          for (var i = 0; i < feiyiLength; i++) {
            feiyiList[i].logo = this.$config.ROOTPATH + feiyiList[i].logo;

            list3.push(feiyiList[i]);

          }
          this.feiyiList = list3;
        } else {
          this.getImgList(); //轮播图
          this.getScenicList(); //景区
          this.getFoodList(); //美食
          this.getLineList(); //线路
        }
      });
    },
    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,
      });
    },
    handle: function (obj) {
      // 检测 this.video 的值
      // 停止播放
      let newVideo = uni.createVideoContext(obj.currentTarget.id);
      if (this.video !== newVideo) {
        newVideo.play();
        this.video.pause();
      }
      this.video = newVideo;
    },
    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;
      });
    },
    getYzList: function () {
      var data = {
        pageno: "1",
        pageSize: "4",
        sort: "2",
        type: this.$param.yzType,
        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;
        var list = [];
        for (let i = 0; i < data.length; i++) {
          data[i].logo = this.$config.ROOTPATH + data[i].logo;
          if (i == 0) {
            this.yzOneList = data[i];
          } else {
            list.push(data[i]);
          }
        }
        this.yzList = list;
      });
    },
    getWcList: function () {
      this.onc = "meishi";
      var data = {
        pageno: "1",
        pageSize: "4",
        sort: "2",
        type: this.$param.wcType,
        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.wcList = data;
      });
    },
    getDuoCaiSJZ: function () {
      var data = {
        pageno: "1",
        pageSize: "1",
        sort: "2",
        region: this.$config.ARER_CODE,
        type: this.$param.duoCaiType,
        userkey: this.$param.userkey,
      };
      this.$Request.post(this.$config.getMessageInfoFormFilter, data).then((res) => {
        this.SJZObject = res.data[0];
      });
    },
    getVideoData: function () {
      var data = {
        pageno: "1",
        pageSize: "4",
        sort: "2",
        region: this.$config.ARER_CODE,
        type: this.$param.videoType,
        userkey: this.$param.userkey,
      };
      this.$Request.post(this.$config.getMessageInfoFormFilter, data).then((res) => {
        var d = res.data;
        for (var i = 0; i < d.length; i++) {
          var item = {
            imgurl: d[i].logo == "" ? "" : this.$config.ROOTPATH + d[i].logo,
            videourl: this.$config.ROOTPATH + d[i].videolist[0],
            guid: d[i].guid,
            time: d[i].subtitle,
          };
          this.videoList.push(item);
        }
        this.indexNum = d.length;
      });
    },
    getLineList: function () {
      var data = {
        pageSize: 4,
        region: this.$config.ARER_CODE,
        pageno: 1,
        timestamp: 0,
        sort: "2",
        userkey: this.$param.userkey,
      };
      this.$Request.post(this.$config.getLineInfoFormFilterByPage, data).then((res) => {
        var data = res.data;
        var list = [];
        for (var i = 0; i < data.length; i++) {
          data[i].llogo = this.$config.ROOTPATH + data[i].llogo;
          if (i == 0) {
            this.lineOneList = data[i];
          } else {
            list.push(data[i]);
          }
        }
        this.lineList = list;
      });
    },
    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 == "techan") {
        uni.navigateTo({
          url: "/subPageA/specialgood/specialgoodlist/specialgoodlist",
        });
      } 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 == "video") {
        uni.navigateTo({
          url: "/subPageA/video/videolist/videolist",
        });
      } 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 = encodeURIComponent(JSON.stringify(this.scenicList))
        uni.navigateTo({
          // url: "/subPageA/scenic/scenicdetial/scenicdetial?guid=" + guid + `&listA=` + list,
          url: "/subPageA/scenic/scenicdetial/scenicdetial?guid=" + guid,
        });
      } else if (type == "food") {
        uni.navigateTo({
          url:
            "/subPageA/food/fooddetial/fooddetial?fid=" + guid + "&fareacode=" + region,
        });
      } else if (type == "line") {
        uni.navigateTo({
          url: "/pages/travelroute/travelroutedetail/travelroutedetail?id=" + guid,
        });
      } else if (type == "speciallty") {
        uni.navigateTo({
          url: '/subPageA/specialgood/specialgooddetail/specialgooddetail?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 + '&region=' + region
        });
      }
    },
    gotoSearch: function () {
      var that = this;
      that.$util.saveOperatorLog(that, "FUN", "搜索");
      uni.navigateTo({
        url: "/subPageA/search/search",
      });
    },

    // 直播跳转
    gotoZhibo: function () {
      //window.location.href = "https://ceo.unitracing.com/timeline/37";
      uni.navigateTo({
        url: "/subPageA/zhibo/zhibo",
      });
    },
  },
};
</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 {
  width: 100%;
  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("@/static/animg/index/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("@/static/animg/index/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("@/static/animg/index/meishi.png");
    }

    .wenhua {
      color: #fc5425;
      background-image: url("@/static/animg/index/wenhua.png");
    }

    .zhoubian {
      margin-top: 16rpx;
      color: #4781fb;
      background-image: url("@/static/animg/index/zhoubian.png");
    }

    .tousu {
      color: #04a3da;
      margin-top: 16rpx;
      background-image: url("@/static/animg/index/tousu.png");
    }
  }
}

.an_sch {
  margin-top: 0;
}

.amt_30 {
  margin-top: 0;
}

.h-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>