nanjing-museum/src/views/Home.vue

<template>
  <div
    ref="hammer-target"
    class="home-page"
  >
    <div class="top-wrapper">
      <img
        draggable="false"
        class="council"
        src="@/assets/image/international-council-of-museums.png"
        alt=""
      >
      <img
        draggable="false"
        class="guojibowuguanri"
        src="@/assets/image/国际博物馆日.png"
        alt=""
      >
    </div>
    <img
      draggable="false"
      class="wuyiba"
      src="@/assets/image/nanjing-museum-logo.png"
      alt=""
    >
    <img
      draggable="false"
      class="title"
      src="@/assets/image/博物馆的力量.png"
      alt=""
    >
    <img
      v-for="index of 20"
      v-show="(currentFrameIdx === index - 1) || (currentFrameIdx - 1 === index - 1)"
      :key="index"
      draggable="false"
      class="slide-tip-emerge"
      :src="`${$publicPath}wenmai-frames/Abstract Element _${(index - 1).toString().padStart(4, '0')}.png`"
      alt=""
      @load="onImgLoad(index - 1)"
      @error="onImgError(index - 1)"
    >
    <SlideTip
      v-if="currentFrameIdx >= 20"
      text="文<br>脉"
    />
    <div class="bottom-wrapper">
      <img
        draggable="false"
        class="museum-logo"
        src="@/assets/image/museum-logo.png"
        alt=""
      >
      <img
        draggable="false"
        class="our-logo"
        src="@/assets/image/our-logo.png"
        alt=""
      >
    </div>
    <img
      draggable="false"
      class="background-image"
      src="@/assets/image/bg-text.png"
      alt=""
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentFrameIdx: 0,
      imgStateList: new Array(20),
      loadCountDown: 20,
    }
  },
  mounted() {
    utils.registerSlideToRoute('hammer-target', 'TreeAnimation', this)

    this.intervalId = setInterval(() => {
      if ((this.loadCountDown === 0)) {
        do {
          this.currentFrameIdx++
        } while (this.imgStateList[this.currentFrameIdx] === false)
        if (this.currentFrameIdx >= 20) {
          clearInterval(this.intervalId)
        }
      }
    }, 41)
  },
  destroyed() {
    clearInterval(this.intervalId)
  },
  methods: {
    onImgLoad(idx) {
      if (idx < 100) {
        this.loadCountDown--
      }
      this.imgStateList[idx] = true
    },
    onImgError(idx) {
      if (idx < 100) {
        this.loadCountDown--
      }
      this.imgStateList[idx] = false
    }
  }
}
</script>

<style lang="less" scoped>
.home-page {
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .top-wrapper {
    margin-top: 2.72rem;
    display: flex;
    justify-content: center;
    height: 1.17rem;
    .council {
      height: 100%;
      margin-right: 1.7rem;
    }
    .guojibowuguanri {
      height: 100%;
    }
  }
  .wuyiba {
    position: absolute;
    top: 6.03rem;
    height: 5.89rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .title {
    position: absolute;
    top: 13.3rem;
    height: 11.3rem;
    display: block;
    left: 50%;
    transform: translateX(-50%);
  }
  .slide-tip-emerge {
    position: absolute;
    left: 50%;
    bottom: 10rem;
    transform: translateX(-50%);
    width: 8rem;
  }
  .bottom-wrapper {
    position: absolute;
    width: 100%;
    bottom: 2.59rem;
    height: 1.36rem;
    display: flex;
    justify-content: center;
    .museum-logo {
      margin-right: 3.58rem;
      flex: 0 0 auto;
      width: 5.17rem;
    }
    .our-logo {
      flex: 0 0 auto;
      width: 4.97rem;
    }
  }
  .background-image {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
}
</style>