huaqiaocheng-h5/src/views/components/IndexImage.vue

<template>
  <div class="index-image">
    <img :src="require('@/assets/images/index.png')" class="bg-image" @load="loadBg" />
    <div class="index-inner-swiper" :style="swiperItemStyle">
      <swiper v-if="showSwiper" :options="swiperOptions">
        <swiper-slide class="index-inner-slide">
          <img
            :src="require('@/assets/images/1home.png')"
            alt
            @click="$router.push({ name: 'Apartment' })"
          />
        </swiper-slide>
        <swiper-slide class="index-inner-slide">
          <img
            :src="require('@/assets/images/2home.png')"
            alt
            @click="$router.push({ name: 'Office' })"
          />
        </swiper-slide>
      </swiper>
    </div>
    <div class="index-pos-hander" :style="handerStyle">
      <img :src="require('@/assets/images/toLeft.png')" alt />
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexImage',
  data() {
    return {
      showSwiper: false,
      swiperOptions: {
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        }
      },
      swiperItemStyle: {},
      handerStyle: {}
    }
  },
  methods: {
    loadBg(e) {
      const { offsetTop, width, height, naturalWidth, naturalHeight } = e.target

      const widthRatio = width / naturalWidth
      const heightRatio = height / naturalHeight

      this.swiperItemStyle = {
        width: `${636 * widthRatio}px`, // 636 是图片原始宽度
        height: `${637 * heightRatio}px`, // 637 是图片原始高度
        top: `${offsetTop + 1612 * heightRatio}px`,
        left: `${352 * widthRatio}px`
      }

      this.handerStyle = {
        top: `${offsetTop + 1800 * heightRatio}px`,
        left: `${1020 * widthRatio}px`
      }

      this.showSwiper = true
    }
  }
}
</script>

<style lang="scss" scoped>
.index-image {
  position: relative;
  background-color: #1d429d;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;

  .bg-image {
    width: 100%;
    pointer-events: none;
    z-index: 100;
  }

  .index-inner-swiper {
    position: absolute;

    .index-inner-slide {
      background: transparent;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .index-pos-hander {
    position: absolute;
    z-index: 200;
    width: 64px;
    height: 56px;
    animation: slidefade 2s infinite;

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