<template>
  <div>
    <div class="topBanner">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
          <div class="item">
            <img :src="item.CalendarImg">
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-button-next">
        <i class="iconfont icon-you"></i>
      </div>
      <div class="swiper-button-prev">
        <i class="iconfont icon-left"></i>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  props: ['banner'],
  data () {
    const self = this
    return {
      mainIndex: 1,
      swiperOption: {
        observer: true,
        speed: 1500,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        on: {
          transitionStart: function () {
            self.mainIndex = this.activeIndex + 1
          }
        }
      },
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    MySwiper () {
      return this.$refs.mySwiper.swiper
    }
  },
}
</script>

<style lang="scss" scoped>
.topBanner {
  width: 100%;
  height: 100%;
  background: #e9e9e9;
  position: relative;
  overflow: hidden;
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-button-next,
  .swiper-button-prev {
    background-image: url();
    outline: 0px;
    text-align: center;
    line-height: 0.44rem;
  }
  .swiper-cover {
    z-index: 2;
    position: absolute;
    bottom: 0.1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.12rem;
    color: #fc6243;
  }
  .item {
    position: relative;
    height: 100%;
    img {
      width: 2.8rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
