YuHuaTai-Mobile/src/views/HomeView.vue

<template>
  <div class="home">
    <transition name="fade-out">
      <div
        v-if="isShowVideo"
        class="video-wrap"
      >
        <video
          id="VideoDom"
          src="@/assets/videos/swkk-fade-in-video.mp4"
          muted
          autoplay
          playsinline
          x5-playsinline
          webkit-playsinline
          @ended="onVideoHide"
        />
        <button
          class="skip"
          :class="{ active: isShowSkip }"
          @click="onVideoHide"
        >
          <span>跳过</span>
        </button>
      </div>
    </transition>

    <button
      class="music"
      @click="toggleMute"
    >
      <img
        :src="isMuted ? require('@/assets/images/music-muted-homepage.png') : require('@/assets/images/music-homepage.png')"
        alt="声音"
        draggable="false"
      >
    </button>

    <img
      class="title"
      src="@/assets/images/title.png"
      alt="雨花台烈士纪念馆"
      draggable="false"
    >

    <div class="button-group">
      <router-link
        class="router-link"
        to="./swkk-view?floor=1"
      >
        <img
          src="@/assets/images/button-to-scenes.png"
          alt="场馆漫游"
          draggable="false"
        >
        <span>场馆漫游</span>
      </router-link>
      <router-link
        class="router-link"
        to="./oblique-view"
      >
        <img
          src="@/assets/images/button-to-panos.png"
          alt="全景风貌"
          draggable="false"
        >
        <span>全景风貌</span>
      </router-link>
      <router-link
        class="router-link"
        to="./relics-appr"
      >
        <img
          src="@/assets/images/button-to-relics.png"
          alt="文物赏析"
          draggable="false"
        >
        <span>文物赏析</span>
      </router-link>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (!from.name) {
        vm.isShowVideo = true
      }
    })
  },
  data() {
    return {
      isShowSkip: false,
      isShowVideo: false,
    }
  },
  computed: {
    ...globalMapState([
      'isMuted',
    ])
  },
  mounted() {
    setTimeout(() => {
      this.isShowSkip = true
    }, 3000)
    // setTimeout(() => {
    //   let dom = document.querySelector("#VideoDom")
    //   if (dom) {
    //     console.log('找到了视频')
    //     dom.play()
    //     dom.addEventListener('canplaythrough', () => {
    //       console.log('play!!!!!')
    //       dom.play()
    //     })
    //     dom.addEventListener("ended", () => {
    //       this.isShowVideo = false
    //     })
    //   } else {
    //     console.error('居然没找到视频？！')
    //   }
    // }, 2000)
  },
  methods: {
    ...globalMapMutations([
      'toggleMute',
    ]),
    onVideoHide() {
      this.isShowVideo = false
      const audioNode = document.getElementById('global-audio')
      audioNode.src = require(`@/assets/audios/${globalConfig.audioName.homeView}.mp3`)
      audioNode.play()
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  position: relative;
  height: 100%;
  background-color: #D8B275;
  background-image: url(@/assets/images/homepage-bg.jpg);
  background-size: cover;

  .video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #000;
    > video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .skip {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s;
      background-image: url("@/assets/images/skip.png");
      background-size: 100% 100%;
      position: absolute;
      bottom: 4.96rem;
      right: 1.29rem;
      width: 5.42rem;
      height: 5.42rem;
      font-size: 1.25rem;
      color: #930909;
      &.active {
        opacity: 1;
        pointer-events: auto;
      }
      span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-40%, -50%);
      }
    }
  }

  button.music {
    position: absolute;
    width: 3.08rem;
    height: 3.08rem;
    top: 1.1rem;
    right: 1.79rem;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .title {
    position: absolute;
    width: 39.63rem;
    top: 9.4%;
    left: 50%;
    transform: translateX(-50%);
  }
  .button-group {
    position: absolute;
    left: 50%;
    bottom: 8.08rem;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    gap: 3rem;
    > .router-link {
      display: inline-block;
      width: 21.67rem;
      height: 6.25rem;
      position: relative;
      > img {
        width: 100%;
        height: 100%;
      }
      > span {
        position: absolute;
        top: 50%;
        left: 8.46rem;
        transform: translateY(-50%);
        color: #fff;
        font-weight: bold;
        font-size: 1.83rem;
      }
    }
  }
}
</style>