SH_museum/sh_museum/src/pages/tunnel/index.vue

<template>
  <div class="wrapper">
    <div class="layout" v-if="!isMobile">
      <div class="video-con">
        <video ref="tunnel" :src="`${$cdn}video/Final_OLD_web.mp4`" autoplay loop></video>
      </div>
      <img v-if="showBtn" class="bofang" :src="`${$cdn}images/bofang.png`" alt="">
    </div>

    <div class="mobileLayout" v-if="isMobile">
      <div class="video-con">
        <img class="bg" :src="`${$cdn}images/mobile/default_bg.png`" alt="">
        <video ref="tunnelMobile" :src="`${$cdn}video/mobile/shl2_mobile.mp4`" autoplay loop controls></video>
      </div>
      <img @click="$router.push({path:'/'})" class="bofangMobile" :src="`${$cdn}images/mobile/btn_back.png`" alt="">
    </div>
  </div>
</template>

<script>
import browser from '@/utils/browser.js'
export default {
  data(){
    return {
      showBtn:false,
      isMobile: browser.mobile
    }
  },
  methods:{
    play(){
      if(this.isMobile) {
        this.$refs.tunnelMobile.play()
      } else {
        this.$refs.tunnel.play()
      }
      this.showBtn = false
    }
  },
  mounted(){
    if(this.isMobile) {
      this.$refs.tunnelMobile.play()
      this.$nextTick(()=>{
        setTimeout(() => {
          if (this.$refs.tunnelMobile.paused) {
            this.showBtn = true
          }
        });
      })
    } else {
      this.$refs.tunnel.play()
      this.$nextTick(()=>{
        setTimeout(() => {
          if (this.$refs.tunnel.paused) {
            this.showBtn = true
          }
        });
      })
    }
  }
}
</script>
<style lang="less" scoped>
.mobileLayout{
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  background: #000;
  .video-con{
    .bg {
      position: fixed;
      left: 0;
      bottom: 10vh;
      width: 100vw;
      height: 90vh;
    }
    video{
      width: 100%;
      top: 50%;
      left: 0;
      transform: translate(0%,-50%);
      z-index: 0;
      position: fixed;
      user-select: none;
    }
  }
}
.layout{
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(100% - 200px);
  left: 0;
  background: #000;
  .video-con{
    video{
      width: calc(100% - 200px);
      top: 50%;
      left: 0;
      transform: translate(0%,-50%);
      z-index: 0;
      position: fixed;
      user-select: none;
    }
  }
  
}
.bofangMobile {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 25vw;
  transform: translate(-50%,0%);
  cursor: pointer;
}
</style>