zhongShanScene/scene/src/pages/Home.vue

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

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

    <!-- 底部菜单 -->
    <div id="gui-parent">
      <!-- 进度条加载 -->
      <gui-loading />
      <div id="hot"></div>

      <!-- 三维 标签 -->
      <div class="widgets-doll-labels"></div>

      <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  />

        <!-- 导览 -->
        <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 class="loading" v-if="0">
        <span>加载中...</span>
      </div>
    </div>

    <!-- 左上方logo -->
    <div class="leftTopLogo" v-show="!isMobile">
        <img class="leftTopLogo1" src="../assets/img/home/logo.png" alt="" />

      <div class="leftTopLogo2"></div>
      <div class="leftTopLogo3">
        <p>欢迎您的到来，您是第{{isVisNum}}位参观者！</p>
        <p>
          <img src="../assets/img/home/icon-liulan.png" alt="">
          <span>{{isVisNum}}</span>浏览量</p>
      </div>
    </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 { getVisitAPI,addVisitAPI } from "../utils/api";

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

  data() {
    return {
      hotspots: "",
      loading: true,
      // 访问量
      isVisNum:0
    };
  },

  methods: {
    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;
        // document.title = "珠海高新区中共党史学习教育园地线上展厅";
        this.getHotSpotList();
        window.player.on("openTips", () => {
          this.$showTips();
        });

        window.player.on("openHotspot", (data) => {
          this.$showHotspot({
            hotspot: this.hotspots[data],
          });
        });
      });
    });
  },
  async created() {
    await addVisitAPI()
    const res =await getVisitAPI()
    this.isVisNum=res.data.visitSum
    
  },
};
</script>

<style lang="less" scoped>
.parent-body {
  width: 100%;
  height: 100%;
}

.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: #000;
  > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    display: inline-block;
  }
}
.leftTopLogo {
  pointer-events: none;
  position: fixed;
  // z-index: 9998;
  top: 20px;
  left: 20px;
  display: flex;
  .leftTopLogo1{
    // width: 90px;
  }
  .leftTopLogo2{
    margin: 0 15px;
    background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.15));
    width: 1px;
    height: 40px;
  }
  .leftTopLogo3{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &>p{
      img{
        width: 20px;

      }
      &>span{
        font-weight: 700;
        position: relative;
        top: 1px;
        display: inline-block;
        margin: 0 10px;
      }
    }
  }
}

</style>