OpenPlatForm/components/index/swiper.vue

<template>
  <div class="swiper-box">
    <div class="swiper-title">他们为何选择智莺</div>

    <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          :class="{ test: ls_id == banner.id }"
          v-for="(banner, index) in banners"
          :key="index"
        >
          <img class="swiper-img" :src="banner.src" />
        </div>
      </div>
    </div>

    <div class="swiper-text">
      <img class="left-1" src="@/static/img/left-1.png" alt="" />

      <div class="font-swiper" v-if="ls_id">
        {{ banners[ls_id].content }}
      </div>

      <img class="right-1" src="@/static/img/right-1.png" alt="" />
    </div>
  </div>
</template>


<script>
export default {
  name: "index-swiper",
  data() {
    const that = this;
    return {
      ls_id: null,
      banners: [
        {
          src: require("../../static/img/touxiang/1.png"),
          link: "",
          id: "1",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑1",
        },
        {
          src: require("../../static/img/touxiang/2.png"),
          link: "",
          id: "2",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑2",
        },
        {
          src: require("../../static/img/touxiang/3.png"),
          link: "",
          id: "3",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑3",
        },
        {
          src: require("../../static/img/touxiang/4.png"),
          link: "",
          id: "4",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑4",
        },
        {
          src: require("../../static/img/touxiang/5.png"),
          link: "",
          id: "5",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑5",
        },
        {
          src: require("../../static/img/touxiang/6.png"),
          link: "",
          id: "6",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑6",
        },
        {
          src: require("../../static/img/touxiang/7.png"),
          link: "",
          id: "7",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑7",
        },
        {
          src: require("../../static/img/touxiang/8.png"),
          link: "",
          id: "8",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑8",
        },
        {
          src: require("../../static/img/touxiang/9.png"),
          link: "",
          id: "9",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑9",
        },
        {
          src: require("../../static/img/touxiang/10.png"),
          link: "",
          id: "10",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑10",
        },
        {
          src: require("../../static/img/touxiang/11.png"),
          link: "",
          id: "11",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑11",
        },
        {
          src: require("../../static/img/touxiang/12.png"),
          link: "",
          id: "12",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑12",
        },
        {
          src: require("../../static/img/touxiang/13.png"),
          link: "",
          id: "13",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑13",
        },
        {
          src: require("../../static/img/touxiang/14.png"),
          link: "",
          id: "14",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑14",
        },
        {
          src: require("../../static/img/touxiang/15.png"),
          link: "",
          id: "15",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑15",
        },
        {
          src: require("../../static/img/touxiang/16.png"),
          link: "",
          id: "16",
          content:
            "开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制；使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑16",
        },
      ],
      swiperOption: {
        slidesPerView: "7",
        grabCursor: true,
        observer: true,
        observeParents: true,
        on: {
          init(even) {
            that.ls_id = even.activeIndex + 4;
          },
          slideChange(even) {
            that.ls_id = even.activeIndex + 4;
          },
          tap(even) {
            console.log(even.activeIndex);
            console.log("onTap", this);
          },
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.swiper-box {
  width: 100vw;
  height: 630px;
  box-sizing: border-box;
  background: #f9f9f9;

  .swiperWrap {
    height: 255px;
    width: 1200px;
    .swiper-wrapper {
      align-items: center;
    }
  }

  .swiper-slide {
    width: 100px !important;
    height: 100px !important;
    transition: width 0.3s, height 0.3s;

    border-radius: 50%;
    overflow: hidden;
    margin-right: 73px;
    .swiper-img {
      width: 100%;
      height: 100%;
      opacity: 0.5;
    }
  }

  .test {
    width: 160px !important;
    height: 160px !important;
    transition: width 0.3s, height 0.3s;
    .swiper-img {
      opacity: 1;
      transition: opacity 0.3s;
    }
  }

  .swiper-slide:last-child {
    margin: 0;
  }
  .swiper-title {
    padding-top: 80px;
    font-size: 26px;
    color: #333333;
    text-align: center;
    font-weight: bold;
  }

  .swiper-text {
    width: 1200px;
    width: 1200px;
    height: 191px;
    background: #1890ff;
    box-shadow: 0px 0px 20px 0px rgba(24, 144, 255, 0.4);
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .font-swiper {
      line-height: 50px;
      font-size: 22px;
      color: #fff;
      text-align: center;
      width: 1125px;
    }
  }
  .swiper-text::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    border-color: transparent;
    margin-bottom: -10px;
    border-bottom-width: 25px;
    border-bottom-color: currentColor;
    color: #1890ff;
  }

  .left-1 {
    position: absolute;
    left: -100px;
    top: 0;
 
  }
  .right-1 {
    position: absolute;
    right: -100px;
    top: 0;
  }
}
</style>