<template>
  <div>
    <img
      style="width:100%;height:100%"
      src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school21.png"
      alt=""
    />
    <div class="content">
      <img
        style="width:1200px;height:661px;margin-top:10px;margin:auto;text-align:center"
        src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school22.png"
        alt=""
      />
    </div>

    <img
      style="padding-right:364px;margin-top:68px"
      src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school23.png"
      alt=""
    />
    <img
      style="margin-top:68px"
      src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school24.png"
      alt=""
    />
    <img
      style="margin-top:68px;padding-left:368px;padding-right:368px"
      src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school25.png"
      alt=""
    />
    <img
      style="margin-top:64px"
      src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school26.png"
      alt=""
    />
    <img
      style="margin-top:68px;padding-left:368px;padding-right:368px"
      src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school27.png"
      alt=""
    />
    <div style="display:flex;justify-content:flex-start;margin-left:360px;margin-top:64px">
      <div style="width: 6px;height: 34px;background: #AA1941;margin-right:9px;margin-top:6px"></div>
      <h1 style="color: #333333; font-size: 34px;font-weight: bold;">校园风光</h1>
    </div>
    <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
      <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
            <img :src="item.web_img_uri" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  layout: 'normal',

  data() {
    const _this = this

    return {
      listData: [
        { web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl1.png' },
        { web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl2.png' },
        { web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl3.png' },
        { web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl4.png' },
        { web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/school_zl5.png' }
      ],
      swiperOption: {
        observer: true,
        observeParents: true,
        speed: 400,
        autoplay: true,
        delay: 3000,
        loop: true,
        slidesPerView: 3,
        centeredSlides: true,
        spaceBetween: 20,
        on: {
          init() {
            _this.swiper.slideNext()
          }
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
    isMobile() {
      return this.$store.state.isMobile
    }
  },
  methods: {
    swiperStop() {
      this.swiper.autoplay.stop()
    },
    swiperStart() {
      this.swiper.autoplay.start()
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 1200px;
  margin: auto;
  text-align: center;
  margin-top: 70px;
}
.swiper-content {
  padding-top: 37px;
  padding-bottom: 132px;

  // width: 100%;
  .swiper-slide {
    position: relative;
    width: 388px;
    height: 244px;
    margin-top: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .swiper-slide-active {
    width: 423px;
    height: 266px;
    margin-top: 0;
  }
}
</style>
