<template>
  <div class="tab2">
    <div class="con">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../../assets/img/swiper.png" alt="" />
            111111111
          </div>
          <div class="swiper-slide">
            <img src="../../assets/img/swiper2.png" alt="" />
            222222222
          </div>
          <div class="swiper-slide">
            <img src="../../assets/img/swiper3.png" alt="" />
            333333333
          </div>
          <div class="swiper-slide">
            <img src="../../assets/img/swiper4.png" alt="" />
            444444444
          </div>
          <div class="swiper-slide">
            <img src="../../assets/img/swiper5.png" alt="" />
            555555555
          </div>
        </div>
      </div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tab2',
  components: {},
  data () {
    // 这里存放数据
    return {}
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // eslint-disable-next-line
    new Swiper(".swiper-container", {
      slidesPerView: 3,
      spaceBetween: 0,
      // centeredSlides: true,
      loop: true,
      // 如果需要前进后退按钮
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
    })
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab2 {
  position: relative;
  width: 100%;
  height: 100%;
}
.con {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  .swiper-container {
    padding-top: 200px;
    width: 100%;
    height: 100%;
    .swiper-wrapper {
      .swiper-slide {
        text-align: center;
        color: black;
        width: 100%;
        height: 500px;
        overflow: hidden;
        img {
          border: 2px solid #b9412e;
          width: 100%;
          height: 500px;
          object-fit: cover;
        }
      }
    }
    // /deep/.swiper-slide.swiper-slide-active {
    //   transform: translate(0, 0);
    // }
    /deep/.swiper-slide.swiper-slide-next {
      transform:scale(1.3) ;
      overflow: visible;
      z-index: 9999 !important;
    }
  }
  .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
    background-image: url('../../assets/img/swiLeft.png');
  }
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
    background-image: url('../../assets/img/swiRight.png');
  }
}
</style>
