QzDCJ/src/components/welcome/index.vue

<template>
  <div class="welcome">
    <div class="videoBox" v-if="videoShow">
      <video
        ref="myVideo"
        src="../../assets/myData/play.mp4"
        autoplay
        muted
      ></video>
      <div class="button" v-if="time" @click="videoShow = false">
        <img src="../../assets/myData/btn1.png" alt="" />
      </div>
    </div>

    <div class="imgBox" v-else>
      <div class="button" @click.stop="$emit('close')">
        <img src="../../assets/myData/btn2.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoShow: true,
      time: false,
    };
  },
  methods: {},
  mounted() {
    // 监听视频播放完毕
    this.$refs.myVideo.addEventListener("ended", () => {
      this.videoShow = false;
    });

    setTimeout(() => {
      this.time = true;
    }, 1000);
  },
};
</script>

<style lang="less">
.welcome {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  font-size: 0;
  transition: all ease 0.3s;
  background-color: black;
  .videoBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .imgBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../assets/myData/bg.jpg");
    background-size: 100% 100%;
  }
  .button {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    & > img {
      width: 260px;
    }
  }
}
</style>