wanwuqinag/src/components/lunbo.vue

<template>
  <div
    class="lunbo"
    :class="{ rjianjin: isReverse }"
    :key="id"
    :ref="id"
    v-swiper:mySwiper="swiperOptions"
  >
    <ul class="swiper-wrapper swiper2">
      <li
        class="swiper-slide"
        v-for="(item, i) in data"
        :data-link="item.link"
        :key="i"
      >
        <img
          :src="require(`@/assets/images/collection/${active}/${item.img}`)"
        />
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <div
      :style="{ backgroundImage: `url(${require('@/assets/images/bg.jpg')})` }"
      class="jianchubg"
    ></div>
  </div>
</template>

<script>
import { directive } from "vue-awesome-swiper";
// import style (<= Swiper 5.x)
import "swiper/css/swiper.css";

export default {
  props: ["isReverse", "id", "active", "data"],
  directives: {
    swiper: directive,
  },
  computed: {
    swiperOptions() {
      let that = this;
      return {
        preventLinksPropagation: !1,
        slidesPerView: "auto",
        speed: 1e4,
        loop: true,
        freeMode: false,
        autoplay: {
          delay: 0,
          disableOnInteraction: !1,
          reverseDirection: this.isReverse,
        },
        on: {
          click: function () {
            const clickedRealIndex = parseInt(
              this.clickedSlide.dataset.swiperSlideIndex || this.clickedIndex
            );
            let { link, name } = that.data[clickedRealIndex];
            that.$emit("openIframe", { url: link, isShow: true, name: name });
          },
        },
      };
    },
  },
  beforeDestroy() {
    this.$refs[this.id].swiper.destroy();
  }
};
</script>

<style lang="less" scoped>
@jianjinw: 10%;
.lunbo {
  width: 100%;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      #034c52 0,
      rgba(3, 76, 82, 1) 50%,
      rgba(3, 76, 82, 0) 100%
    );
    left: 0;
    top: 0;
    height: 100%;
    width: @jianjinw;
    z-index: 9999;
  }
  &::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: linear-gradient(-90deg, #034c52, rgba(3, 76, 82, 0));
    right: 0;
    top: 0;
    height: 100%;
    width: @jianjinw*0.8;
    z-index: 9999;
  }
  .jianchubg {
    width: 100%;
  }
  .swiper-wrapper {
    width: 100%;
    .swiper-slide {
      width: 15vw;
      height: 15vw;
      position: relative;
      cursor: pointer;
      transition: 0.3s ease all;
      margin: 0 1vw 0;
      > img {
        width: 100%;
        height: 100%;
      }
      > span {
        position: absolute;
        right: 13px;
        top: 14px;
        writing-mode: vertical-lr;
        display: inline-block;
        color: #9c8e4f;
        text-shadow: 0px 0px 4px #000000;
        letter-spacing: 2px;
        font-family: KaiTi;
        font-size: 16px;
      }
      &:hover {
        transform: scale(1.1);
      }
    }
  }
}

.rjianjin {
  &::before {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, #034c52, rgba(3, 76, 82, 0));
    left: 0;
    top: 0;
    height: 100%;
    width: @jianjinw*0.8;
    z-index: 9999;
  }
  &::after {
    content: "";
    position: absolute;
    background: linear-gradient(
      -90deg,
      #034c52 0,
      rgba(3, 76, 82, 0.7) 76%,
      rgba(3, 76, 82, 0) 100%
    );
    right: 0;
    top: 0;
    height: 100%;
    width: @jianjinw;
    z-index: 9999;
  }
}
</style>

<style lang="less">
.swiper-container .swiper-wrapper {
  transition-timing-function: linear !important;
}
</style>