HaiDeBao/src/pages/Home.vue

<template>
  <div
    class="parent-body"
    @click="musicPlay"
    @touchstart="musicPlay"
  >
    <!-- 热点弹出框 -->
    <popup />
    <!-- 加载初始页面——也并没有什么卵用 -->
    <div id="gui-thumb" />

    <!-- 场景canvs主容器 -->
    <div id="player" />

    <!-- <MiniMapDecorator
      class="mini-map-decorator"
    /> -->

    <button
      class="enlarge-btn"
      @click="onClickEnlarge"
    >
      <img
        class=""
        src="@/assets/images/enlarge.png"
        alt=""
        draggable="false"
      >
    </button>

    <!-- 底部菜单 -->
    <div
      id="gui-parent"
    >
      <!-- 进度条加载 -->
      <gui-loading />
      <div id="hot" />
      <div
        id="gui"
        style="display: none"
      >
        <!-- 退出VR模式按钮 -->
        <div id="vrOff">
          <img
            id="vrOffImg"
            src="@/assets/images/vrOffImg.png"
            alt=""
          >
        </div>

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

        <!-- 通用样式的标题，代码里必须有，但其实没有显示 -->
        <v-title />
        <!-- 针对本项目需求的标题 -->

        <!-- 底部菜单 -->
        <v-menu class="v-menu" />

        <!-- 导览 -->
        <v-guide class="v-guide" />

        <!-- logo -->
        <div
          id="myCompany"
          style="
            width: 100%;
            position: absolute;
            bottom: 0px;
            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">
        <div class="gui-spinner-icon"></div>
      </div> -->

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

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

      <vr-con />

      <v-other />
    </div>
    <router-view />
  </div>
</template>

<script>
import popup from "@/views/popup"
import guiLoading from "@/views/gui/loading"
// import hotspotList from "@/views/gui/hotspotlist"
import vTitle from "@/views/gui/title"
import vMenu from "@/views/gui/menu"
import vGuide from "@/views/gui/guide"
import webVr from "@/views/gui/webvr"
import guimsg from "@/views/gui/guimsg"
import vError from "@/views/gui/error"
import vrCon from "@/views/gui/vrcon"
import vOther from "@/views/gui/other"
// import MiniMapDecorator from "@/views/gui/MiniMapDecorator.vue"

export default {
  name: "Home",
  components: {
    popup,
    guiLoading,
    // hotspotList,
    vTitle,
    vMenu,
    vGuide,
    webVr,
    guimsg,
    vError,
    vrCon,
    vOther
    // MiniMapDecorator,
  },

  data() {
    return {
      hotspots: "",
      // 控制背景音乐
      isMusicInitiallyPlayed: false,
    }
  },

  mounted() {
  },
  created() {
    // 移动端和pc端的切换
    if (
      window.navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      // 移动端
      if (window.location.href.includes("web")) {
        window.location.href = window.location.href.replace("web", "webM")
        setTimeout(() => {
          location.reload(true)
        }, 1000)
      }
    }
  },

  methods: {
    // 控制背景音乐播放
    musicPlay() {
      if (!this.isMusicInitiallyPlayed) window.manage.switchBgmState(true)
      this.isMusicInitiallyPlayed = true
    },
    onClickEnlarge() {
      this.$router.push({ name: 'BigMap' })
    },
  },
}
</script>

<style lang="less" scoped>
.mini-map-decorator {
}

.enlarge-btn {
  position: fixed;
  width: 12vw;
  height: 12vw;
  top: 45vw;
  right: 3.6vw;
  z-index: 999;
  > img {
    width: 100%;
    height: 100%;
  }
}

.parent-body {
  position: relative;
  width: 100%;
  height: 100%;
  > #gui-parent {
    > #gui {
    }
  }
}

/deep/#drawer {
  transition: all 0.3s;
}

// .mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'], .mobile[view-mode='transitioning'] {
//   .mini-map-decorator {
//     display: none;
//   }
// }

.hotspot-detail-open {
  .v-menu {
    display: none;
  }
  .v-guide {
    display: none;
  }
}
</style>