mall-web-ssr/components/applyPurchase/PublishApply.vue

<template>
  <div class="publish-apply">
    <div v-swiper:mySwiper="swiperOption" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="banner in banners">
          <a>
            <img :src="banner.pictureLink"/>
          </a>
        </div>
        <div v-if="banners.length === 0" class="swiper-button-prev"><i class="iconfont icon-swiper-left"></i></div>
        <div v-if="banners.length === 0"class="swiper-button-next"><i class="iconfont icon-swiper-right"></i></div>
      </div>
      <div v-if="banners.length === 0" class="swiper-pagination swiper-pagination-bullets"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        swiperOption: {
          autoplay: 6000,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          mousewheelControl: false,
          effect: 'fade',
          lazyLoading: true,
          loop: true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          onTransitionStart: (swiper) => {
            if (this.banners.data && this.banners.data.length && (swiper.activeIndex > this.banners.data.length)) {
              swiper.activeIndex = 1
            }
            if (this.banners.data && this.banners.data.length && swiper.activeIndex <= 0) {
              swiper.activeIndex = this.banners.data.length
            }
          }
        }
      }
    },
    computed: {
      banners () {
        return this.$store.state.applyPurchase.purchaseBannerList.bannerList.data.data
      }
    }
  }
</script>
<style lang="scss">
  .publish-apply {
    border-radius: 5px;
    height: 400px;
    margin-bottom: 20px;
    .swiper-container {
      z-index: 2;
      width: 955px;
      height: 400px;
      .swiper-wrapper {
        width: 955px;
        height: 400px;
        margin: 0 auto;
        .swiper-slide {
          height: 400px;
          margin: 0 auto;
          display: flex;
          img {
            width: 955px;
            height: 400px;
            border-radius: 5px;
          }
        }
        .swiper-button-prev i, .swiper-button-next i {
          font-size: 26px;
        }
      }
      .swiper-pagination-bullets {
        .swiper-pagination-bullet {
          width: 10px!important;
          height: 10px!important;
        }
      }
    }
  }
</style>