HuiZhouGuJianZhu/src/components/StartUp.vue

<template>
  <div class="start-up">
    <button
      v-show="!isBeginVideo"
      v-click-audio
      class="begin"
      :style="{
        left: beginBtnPos.x + 'px',
        top: beginBtnPos.y + 'px',
      }"
      @click="onClickBeginVideo"
    >
      <img
        class=""
        src="@/assets/images/btn-begin.png"
        alt=""
        draggable="false"
      >
    </button>
    <video
      ref="startup-video"
      v-click-audio
      src="@/assets/videos/startup-video.mp4"
      @play="onVideoPlay"
      @ended="onStartupOver"
      @click="onClickVideo"
    />
    <!-- <transition name="fade-in">
      <button
        v-show="isShowSkip"
        v-click-audio
        class="skip"
        @click="onStartupOver"
      >
        跳&emsp;过
      </button>
    </transition> -->
  </div>
</template>

<script>
import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
import { onMounted, reactive, ref } from "vue"
export default {
  name: 'StartUp',
  emits: ['begin', 'over'],
  setup() {
    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
    const beginBtnPos = ref({})
    // const beginBtnPos = reactive( utils.mapPosFromDraftToWindow({
    //   x: 1850,
    //   y: 630,
    // }, 'contain'))
    function computebeginBtnPos() {
      beginBtnPos.value = utils.mapPosFromDraftToWindow({
        x: 1850,
        y: 630,
      }, 'contain')
      console.log('更新屏幕', beginBtnPos.value)
    }

    onMounted(() => {
      beginBtnPos.value = utils.mapPosFromDraftToWindow({
        x: 1850,
        y: 630,
      }, 'contain')
      window.addEventListener('resize', computebeginBtnPos)
    })

    return {
      windowSizeWhenDesign,
      unit,
      beginBtnPos
    }
  },
  data() {
    return {
      isBeginVideo: false,
      isShowSkip: false,
    }
  },
  methods: {
    onClickBeginVideo() {
      this.isBeginVideo = true
      this.$refs['startup-video'].play()
      this.$emit('begin')
    },
    onVideoPlay() {
      this.isShowSkip = true
      // setTimeout(() => {
      //   this.isShowSkip = true
      // }, 3000)
    },
    onStartupOver() {
      this.$emit('over')
    },
    onClickVideo() {
      if (this.isShowSkip) {
        this.onStartupOver()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.start-up {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 10;

  >button.begin {
    position: absolute;
    right: 5vh;
    bottom: 5vh;
    z-index: 1;
    // left: calc(1850 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    // top: calc(630 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    width: calc(40 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    height: fit-content;

    >img {
      width: 100%;
    }

    &:hover {
      transform: scale(1.1);
    }
  }

  >video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  // >.skip {
  //   position: absolute;
  //   top: 70px;
  //   right: 42px;
  //   height: 36px;
  //   width: 120px;
  //   background-image: url(@/assets/images/btn-skip.png);
  //   background-size: cover;
  //   background-repeat: no-repeat;
  //   background-position: center center;
  //   font-size: 18px;
  //   font-family: FZShaoEr-M11-Regular, FZShaoEr-M11;
  //   font-weight: 400;
  //   color: #D11414;
  //   &:hover {
  //     transform: scale(1.1);
  //   }
  // }
}
</style>