macao_army/code/src/pages/index/index.vue

<template>
  <div class="wrapper">
    <div class="layout" v-if="!$isMobile">
      <bg @close="isBgLoading=false" v-if="isBgLoading" :canvasWidth='width' :canvasHeight='height' class="xlz-bg"/>
      <div class="video-con">
        <iframe :key="ifrUrl" allowfullscreen="true" :src="ifrUrl" frameborder="0"></iframe>
      </div>
      <div class="mask" v-if="page"></div>
      <div class="hover-con" >
        <story v-if="page==='story'"/>
        <tunnel v-if="page==='tunnel'"/>
        <history v-if="page==='history'"/>
      </div>
    </div>

    <div v-else class="mobile-layout">
        <iframe allowfullscreen="true" :key="ifrUrl" :src="ifrUrl" frameborder="0"></iframe>
        <div class="mask" v-if="page"></div>
        <div class="hover-conm" v-if="page">
          <story v-if="page==='story'"/>
          <tunnel v-if="page==='tunnel'"/>
          <history v-if="page==='history'"/>
        </div>
    </div>
  </div>
</template>

<script>
import story from '@/pages/story'
import tunnel from '@/pages/tunnel'
import history from '@/pages/history'
import bg from '@/components/background'


// http://192.168.0.44:8110/
let temp = ''
const outKey = "791"
const inKey = "762"

let height = window.innerHeight + 10
window.onresize = ()=>{
  height = window.innerHeight + 10
}

export default {
  components:{story,tunnel,history,bg},
  data(){
    return {
      showBtn:false,
      page: this.$route.query.route,
      ifr:outKey,
      lang:'',
      isBgLoading:true
    }
  },
  methods:{
    
  },
  computed:{
    width(){
      return height * (2120/1080)
    },
    height(){
      return height
    },
    ifrUrl(){
      
      let tmp = `${temp}/SuperTwo${this.ifr}/index.html?m=${this.ifr+(this.ifr==inKey?'_en':this.lang)}&qust=1`
      return tmp
    }
  },
  watch:{
    '$route.query.route':function (newVal) {
      this.page = newVal
    },
    ifr(newVal){
      if (newVal&&this.$isMobile) {
        this.$showLoading()
      }
    }
  },
  mounted(){

    if (this.$isMobile) {
      this.$showLoading()
      window.addEventListener("message", (data) => {
        if (Object.prototype.toString.call(data.data) == "[object String]") {
          if (data.data === "loadComplete") {
            this.$hideLoading() 
          }
        }
      });
    }

     this.$bus.$on('outScene', data=>{
       this.ifr = data?outKey:inKey
     })

      this.$bus.$on('changeLang', data=>{
        this.lang = data
      })




     window.addEventListener("message", (data) => {
        if (Object.prototype.toString.call(data.data) == "[object String]") {
          if (data.data === "goInside") {
            this.$bus.$emit('switchScene')
          }
        }
      });
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
}

.layout{
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  background: #000;
  .video-con{
    video,iframe{
      width: 100%;
      height: 100%;
      top: 50%;
      left: 0;
      transform: translate(0%,-50%);
      z-index: 0;
      position: fixed;
      user-select: none;
    }
    >iframe{
      top: 0;
      left: 0;
      transform: none;
    }
  }
  .mask{
    position: fixed;
    top: 0;
    // width: calc(100% - 200px);
    width:100%;
    height: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
  }
  .hover-con{
    width: calc(90% - 200px);
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;;
    background-color: #DC2506;
    border-radius: 4px;
    overflow: hidden;
  }
}

.mobile-layout{
  width: 100%;
  height: 100%;
  iframe{
    width: 100%;
    height: 100%;
  }
  .mask{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
  }
  .hover-conm{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: none;
    overflow: hidden;
  }
}
</style>