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 / 675 * windowHeight"
      :height="windowHeight"
      :frame-number="51"
      :frame-duration="55"
    />

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

    <Transition name="fade-in">
      <img
        v-if="isShowLoadingTip"
        class="loading-tip"
        src="@/assets/images/loading.png"
        alt=""
        draggable="false"
      >
    </Transition>
    <SerialFrames
      v-if="!isShowLoadingTip"
      class="btn-start"
      :class="isStartBtnBlink ? 'animation-show-hide' : ''"
      :image-src="require(`@/assets/images/btn-start.png`)"
      :total-width="864 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)"
      :height="72 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)"
      :frame-number="12"
      :loop="false"
      @over="isStartBtnBlink = true"
      @click="onClickStart"
    />

    <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>
    <Transition name="fade-in">
      <BtnSkip
        v-if="isShowSkip"
        @click="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"
import { useWindowSize } from '@vueuse/core'

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

const $env = inject('$env')

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const { width: windowWidth, height: windowHeight } = useWindowSize()


const isShowLoadingTip = ref(true)
setTimeout(() => {
  isShowLoadingTip.value = false
}, 3000)
const isStartBtnBlink = ref(false)

const isShowVideo = ref(false)
const isShowSkip = ref(false)
const videoEl = ref(null)
function onClickStart() {
  isShowVideo.value = true
  nextTick(() => {
    videoEl.value.play()
  })
  setTimeout(() => {
    isShowSkip.value = true
  }, 2000)
}
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: 50%;
    top: 0;
    transform: translateX(-50%);
    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(-48%);
    width: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >.btn-start{
    position: absolute;
    left: 50%;
    bottom: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translateX(-48%);
  }

  >video.transition-video{
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
  }

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