xzrkz-web/src/pages/Index/components/Swiper.vue

<template>
    <div class="index-swiper">
      <swiper ref="mySwiper" :options="swiperOptions" class="swiper-outer">
        <swiper-slide class="swiper-box" v-for="(swiper,idx) in swiperList" :key="idx">
          <img :src="url + 'news/route/file/downloadfile/false/' + swiper.newsContentCoverList" alt="" class="banner-img" @click="goDetail(swiper.templateRecordUrl)">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
import common from '@/common/components/common.js'
export default {
  name: 'IndexSwiper',
  props: {
    swiperList: Array
  },
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        // loop: true,
        autoplay: 3000
      },
      url: common.url
    }
  },
  methods: {
    goDetail: function (url) {
      window.location.href = this.url + url
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.index-swiper
  width 100%
  min-width 1200px
  height 500px
  position relative
  min-height 375px
  box-sizing border-box
  &:after
    content ''
    display block
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background url("../../../assets/images/loading.gif") center no-repeat
    z-index -1
  .swiper-outer
    width 100%
    height 100%
    .swiper-box
      cursor pointer
      .banner-img
        width 100%
        height 100%
</style>