<template>
  <div class="index-image">
    <!-- <img :src="require('@/assets/images/index.png')" class="bg-image" @load="loadBg" /> -->
    <div class="index-inner-swiper">
      <swiper :options="swiperOptions">
        <swiper-slide class="index-inner-slide">
          <img :src="typeImage.swiper1" />
        </swiper-slide>

        <swiper-slide class="index-inner-slide">
          <img :src="typeImage.swiper2" />
        </swiper-slide>

        <swiper-slide class="index-inner-slide">
          <img :src="typeImage.swiper3" />
        </swiper-slide>
        <swiper-slide class="index-inner-slide" v-if="typeImage.swiper4">
          <img :src="typeImage.swiper4" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexImage',
  props: {
    typeImage: {
      type: Object
      // default: () => ({})
    }
  },
  data() {
    return {
      swiperOptions: {
        autoplay: {
          delay: 2500
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.index-image {
  .index-inner-swiper {
    width: 100vw;
    .index-inner-slide {
      position: relative;
      left: -11vw;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
