NanjingMuseumWuJinZang/src/views/StartupView.vue

<template>
  <div class="startup-view">
    <span class="font-load-trigger">这是为了尽早触发字体文件加载</span>

    <!-- 背景序列帧 -->
    <SerialFrames
      class="bg-serial-frames"
      :image-src="require(`@/assets/images/serial-frame-startup.png`)"
      :total-width="22950"
      :height="675"
      :frame-number="51"
      :frame-duration="55"
    />

    <img
      class="title"
      src="@/assets/images/startup-title.png"
      alt=""
      draggable="false"
    >

    <Transition name="fade-in-out">
      <div
        v-if="isShowLoadingTip"
        class="loading-tip animation-show-hide"
      >
        loading...
      </div>
      <button
        v-else-if="isShowStartBtn"
        class="start"
        @click="onClickStart"
      >
        <img
          class="bg"
          src="@/assets/images/start-btn-bg.png"
          alt=""
          draggable="false"
        >
        开始
      </button>
    </Transition>

    <Transition name="fade-in">
      <video
        v-if="isShowVideo"
        ref="videoEl"
        class="transition-video"
        src="@/assets/videos/startup.mp4"
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
        muted
        @ended="onVideoEnd"
      />
    </Transition>
  </div>
</template>

<script setup>
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
import { ref, computed, watch, onMounted, inject, nextTick } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()



const isShowLoadingTip = ref(true)
const isShowStartBtn = ref(false)
setTimeout(() => {
  isShowLoadingTip.value = false
}, 2000)
setTimeout(() => {
  isShowStartBtn.value = true
}, 4000)

const isShowVideo = ref(false)
const videoEl = ref(null)
function onClickStart() {
  isShowVideo.value = true
  nextTick(() => {
    videoEl.value.play()
  })
}
function onVideoEnd() {
  store.dispatch('recordShownStartup')
}
</script>

<style lang="less" scoped>
.startup-view{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/startup-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  >.font-load-trigger{
    pointer-events: none;
    opacity: 0;
    font-family: KaiTi, KaiTi;
  }

  >.bg-serial-frames{
    position: absolute;
    left: 0;
    top: 0;
    mix-blend-mode: multiply;
  }

  >img.title{
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: calc(152 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }

  >.loading-tip{
    position: absolute;
    left: 50%;
    bottom: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translateX(-50%);
    font-family: KingHwa_OldSong, KingHwa_OldSong;
    font-weight: 400;
    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    color: #FFFFFF;
    line-height: 1.5em;
  }
  >button.start{
    position: absolute;
    left: 50%;
    bottom: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translateX(-50%);
    width: calc(71 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(69 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-family: KaiTi, KaiTi;
    font-weight: 400;
    font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    color: #FFFFFF;
    line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    >img.bg{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      animation-name: spin;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }

  >video.transition-video{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>