AnhuiDaily2/src/pages/Home.vue

<template>
  <!-- @click="musicPlay" @touchstart="musicPlay" -->
  <div class="parent-body">
    <!-- 热点 -->
    <!-- <hot/> -->
    <!-- 热点弹出框 -->
    <popup />
    <!-- 加载初始页面 -->
    <div id="gui-thumb"></div>

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

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

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

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

        <!-- 通用样式的标题，代码里必须有，但其实没有显示 -->
        <v-title />
        <!-- 针对本项目需求的标题 -->
        <h1 v-if="!isMobile">
          安徽省纪录小康工程数据库云展馆
        </h1>

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

        <!-- 导览 -->
        <v-guide :pageFlag="pageFlag" />

        <!-- 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>
  </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 "@/components/MiniMapDecorator.vue";

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

  data() {
    return {
      hotspots: "",
      loading: true,
      // 控制页面宽度（通过菜单的展开和隐藏）
      pageFlag: false,
      // 控制背景音乐
      musicFlag: true,
    };
  },

  methods: {
    musicPlay() {
      if (this.musicFlag) window.manage.switchBgmState(true);
      this.musicFlag = false;
    },
    // 控制背景音乐播放👆
    hndeMenu(val) {
      this.pageFlag = val;
    },
    getHotSpotList() {
      $.ajax({
        url:
          g_Prefix +
          "data/" +
          window.number +
          "/hot/js/data.js" +
          "?" +
          Math.random(),
        type: "get",
        dataType: "json",
        contentType: "application/json",
        success: (result) => {
          this.hotspots = result;
        },
      });
    },
  },

  mounted() {
    this.$nextTick(() => {
      window.evt = document.createEvent("HTMLEvents");
      window.evt.initEvent("loadfinish", false, false);
      window.addEventListener("loadfinish", () => {
        this.loading = false;
        this.getHotSpotList();
        window.player.on("openTips", () => {
          this.$showTips();
        });

        window.player.on("openHotspot", (data) => {
          console.log('open hotspot');
          this.$showHotspot({
            hotspot: this.hotspots[data],
          });
        });
      });
    });
  },
  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);
      }
    } 
  },
};
</script>

<style lang="less" scoped>
.mini-map-decorator {
  position: fixed;
  top: 28px;
  right: 20px;
  width: 237px !important;
  height: 149px !important;
  backdrop-filter: blur(10px);
  z-index: 998;
}

.parent-body {
  position: relative;
  width: 100%;
  height: 100%;
  > #gui-parent {
    > #gui {
      > h1 {
        position: absolute;
        z-index: 1;
        top: 23px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.45);
        border-radius: 33px;
        font-size: 16px;
        color: #FFFFFF;
        padding: 9px 29px;
      }
    }
  }
  > .guiParent {
    width: 100% !important;
  }
}

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