xinjiang_army/web/src/views/scene/index.vue

<template>
  <div class="parent-body">
    <!-- 热点 -->
    <hot/>
    <!-- 热点弹出框 -->
    <popup/>
    <!-- 加载初始页面 -->
    <div id="gui-thumb"></div>
    <!-- cad -->
    <cad/>
    <!-- 主容器 -->
    <div id="player"></div>
    <div id="gui-parent">
        <!-- 进度条加载 -->
        <gui-loading/>
        <div id="gui" style="display: none;">

            <!-- 退出VR模式按钮 -->
            <div id="vrOff">
                <img id="vrOffImg" src="images/vrOffImg.png" alt="">
            </div>

            <!-- 热点列表 -->
            <hotspot-list/>

            <!-- 标题 -->
            <v-title/>

            <!-- 底部菜单 -->
            <v-menu @btnactive="handleActive"/>
            
            <!-- 导览 -->
            <v-guide/>

            <!-- logo -->
            <div id="myCompany"
                style="width:100%;position:absolute;bottom:20px;text-align:center;font-size:14px;font-family: '微软雅黑';font-weight:580;color: rgba(255, 255, 255, 0.8);">
                四维时代提供技术支持
            </div>
        </div>

        <!-- vr -->
        <web-vr/>

        <!-- loading -->
        <div id="gui-spinner" style="display: none;">
            <div class="gui-spinner-icon"></div>
        </div>

        <!-- guimsg -->
        <guimsg/>

        <!-- 错误提示 -->
        <v-error/>

        <vr-con/>
        
        <v-other/>
        
    </div>
    <exhibition class="exhibition"/>

      <Danmaku
        class="danmaku"
        :quotes="danmu"
        :showIcon="require(`@/assets/images/icon/danmu_open_${theme}.png`)"
        :closeIcon="require('@/assets/images/icon/danmu_close.png')"
        :arrowIcon="require('@/assets/images/icon/danmu_top.png')"
      />
      <vpopup @close="handlepopClose" :cp="cp" v-if="cp"/>
  </div>
</template>

<script>
import hot from './hot';
import popup from './popup';
import cad from './cad';
import guiLoading from './gui/loading';
import hotspotList from './gui/hotspotlist';
import vTitle from './gui/title';
import vMenu from './gui/menu';
import vGuide from './gui/guide';
import webVr from './gui/webvr';
import guimsg from './gui/guimsg';
import vError from './gui/error';
import vrCon from './gui/vrcon';
import vOther from './gui/other';
import exhibition from '@/components/exhibition';

import vpopup from './components/popup.vue'


export default {
  name: 'Home',
  components: {
      hot,
      popup,
      cad,
      guiLoading,
      hotspotList,
      vTitle,
      vMenu,
      vGuide,
      webVr,
      guimsg,
      vError,
      vrCon,
      vOther,
      exhibition,
      vpopup
  },
  watch:{
    '$route.query.route':function (newVal) {
      this.page = newVal
    }
  },
  mounted(){
      this.$bus.$on('opendaolan',()=>{
        this.showExhibition = true
      })
      this.starLoad()
  },
  methods:{
    starLoad(){
      window.loadMainJs()
      window.loadMange()
      window.loadScene()
    },
    handleClose(){
      $('.cad').css('transform', 'translate(-150%,-50%)')
      this.showExhibition=false
    },
    handlepopClose(){
      this.cp = ''
      this.$bus.$emit('resetbtnactive')
    },
    handleActive(data){
      if (data=='question') {
        this.cp = 'question'
      }
      console.log(data)
    }
  },
  beforeDestroy(){
    window.hadLoad = true
    if (window.player) {
      window.player.sceneRenderer.suspend()
      window.player = ''
      $('.parent-body').remove()
    }
  },
  data(){
      return {
        danmu:[
          "很漂亮的线上展馆，支持！",
          "足不出户就能浏览参观，太棒了！",
          "期待能有机会到实体馆参观。",
          "请问英模在第几展区？",
          "向革命先烈们致敬。",
          "展馆的信息介绍很详细，干货满满！",
          "向人民解放军致敬"
          ],
        page: this.$route.query.route,
        showExhibition: false,
        cp:''
      }
  }
}
</script>

<style lang="less" scoped>

.parent-body{
    width: 100%;
    height: calc(100vh - 100px);
    margin-top: 100px;
    padding-top: 0;
    position: relative;
    overflow: hidden;
}

.danmaku{
  position: absolute;
  bottom: 10px;
  left: 34px;
  z-index: 99;
  width: 340px;
}

.exhibition{
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 99;
}

</style>