colmo-h5/src/pages/IndexImage.vue

<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="../../public/yushi-image/2.png" />
        </swiper-slide>

        <swiper-slide class="index-inner-slide">
          <img src="../../public/yushi-image/3.png" />
        </swiper-slide>

        <swiper-slide class="index-inner-slide">
          <img src="../../public/yushi-image/4.png" />
        </swiper-slide>
        <swiper-slide class="index-inner-slide">
          <img src="../../public/yushi-image/4.png" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexImage',
  data() {
    return {
      swiperOptions: {
        autoplay: {
          delay: 100
        }
      }
    }
  }
}
</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>