XuzhouArtwork/src/pages/Home.vue

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

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

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

    <!-- 底部菜单 -->
    <div
      v-show="!isShowPano"
      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>

    <transition name="fade-out">
      <div
        v-if="isShowPano"
        class="pano-layer"
      >
        <!-- 全景图 -->
        <iframe
          class="pano"
          src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1628651656780496896&vr=fd720_7cJ6ECymB"
          frameborder="0"
        />

        <button
          class="begin"
          @click="onClickBegin"
        >
          <img
            class=""
            src="@/assets/images/begin-explore.png"
            alt=""
            draggable="false"
          >
        </button>
      </div>
    </transition>
  </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,
      isShowPano: 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)
      }
    }

    const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
    if (locationQuerySection.get('show-cover')) {
      this.isShowPano = true
    }
  },

  methods: {
    // 控制背景音乐播放
    musicPlay() {
      if (!this.isMusicInitiallyPlayed) window.manage.switchBgmState(true)
      this.isMusicInitiallyPlayed = true
    },
    onClickBegin() {
      this.isShowPano = false
      const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
      locationQuerySection.delete('show-cover')
      const newLocation = location.href.split('?')[0] + '?' + locationQuerySection.toString()
      location.assign(newLocation)
    }
  },
}
</script>

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

.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;
//   }
// }

.pano-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  iframe.pano {
    width: 100%;
    height: 100%;
  }
  button.begin {
    position: absolute;
    bottom: 85px;
    left:50%;
    transform: translateX(-50%);
    > img {
      width: 141px;
    }
  }
}

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