<template>
  <div class="layout_com_page_banner major-kc-wm" :style="{ 'min-height': 730 + 'px' }">
    <h3 style="padding-top:30px;">
      <span v-m>丰富多彩的学生活动</span>
    </h3>
    <div class="major-kc-wm-body" @mouseover="mouseOver" @mouseleave="mouseLeave">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item, index) in list" :key="index">
          <div>
            <!-- <div class="activity-list"> -->
            <div class="activity-item">
              <div class="title">{{ item.title }}</div>
              <img :src="img" v-for="img in item.img" :key="img" />
            </div>
            <!-- </div> -->
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  data() {
    return {
      list: [
        {
          title: '线下课程',
          img: [
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-1-1.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-1-2.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-1-3.png'
          ]
        },
        {
          title: '企业参访',
          img: [
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-2-1.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-2-2.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-2-3.png'
          ]
        },
        {
          title: '班级活动',
          img: [
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-3-1.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-3-2.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-3-3.png'
          ]
        },
        {
          title: '班级庆典',
          img: [
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-4-1.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-4-2.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-4-3.png'
          ]
        },
        {
          title: '赴美毕业游',
          img: [
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-5-1.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-5-2.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-5-3.png'
          ]
        },
        {
          title: '毕业典礼',
          img: [
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-6-1.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-6-2.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-6-3.png'
          ]
        },
        {
          title: '紫荆校友',
          img: [
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-7-1.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-7-2.png',
            'https://webapp-pub.oss-cn-beijing.aliyuncs.com/lms/wmp/s-7-3.png'
          ]
        }
      ],
      swiperOptions: {
        observer: true,
        autoHeight: true,
        slidesPerView: 4,
        // paginationClickable: true,
        spaceBetween: 0,
        freeMode: true,
        autoplay: {
          delay: 2000
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        }
      }
    }
  },
  methods: {
    mouseOver() {
      this.swiper.autoplay.stop()
    },
    mouseLeave() {
      this.swiper.autoplay.start()
    }
  }
}
</script>

<style lang="scss" scoped>
.major-kc-wm {
  background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/course_bg.png);
  background-size: cover;
  position: relative;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  h3 {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 40px;
    color: rgba(255, 255, 255, 1);
    span {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        bottom: -8px;
        width: 100%;
        height: 3px;
        background: #f6a800;
      }
    }
  }
  .major-kc-wm-body {
    ::v-deep .swiper-container {
      .swiper-pagination-bullet {
        opacity: 1;
        background: #fff;
      }
      .swiper-pagination-bullet-active {
        background: rgb(174, 14, 63);
      }
    }
    width: 950px;
    display: flex;
    justify-content: center;
    h3 {
      color: #ffffffff;
    }
  }
}
.swiper-container {
  padding-top: 20px;
  padding-bottom: 40px;
}
.activity-item {
  width: 210px;
  .title {
    width: 210px;
    line-height: 50px;
    background: #f6a800;
    text-align: center;
    font-size: 24px;
    color: #fff;
    margin-bottom: 20px;
  }
  img {
    margin-bottom: 10px;
  }
}
</style>
