upp

pc场景/public/static/js/loadCAD.js

@@ -5,7 +5,7 @@ window.grendCAD = (function grendCAD() {
   let point, dire
 
   window.cad = {
-    setSign: function(p, d) {
+    setSign: function (p, d) {
       point = p
       dire = d
     }
@@ -16,7 +16,7 @@ window.grendCAD = (function grendCAD() {
 
     let $script = document.createElement('script')
     $script.src = '//www.4dmodel.com/CAD/bundle.js'
-    $script.onload = function() {
+    $script.onload = function () {
       initScript = true
       cb()
     }
@@ -38,30 +38,19 @@ window.grendCAD = (function grendCAD() {
     style.innerHTML = `
       .cad {
         position: absolute;
-        right: 80px;
-        top: 16px;
+        right: 30px;
+        top: 30px;
         width: 200px;
         height: 200px;
-        background: rgba(0, 0, 0, .3);
+        background: rgba(21, 52, 115, 0.80);
         border-radius: 5px;
+        border: 1px solid #94E1FF;
       }
 
       .cad > div {
         width: 100%;
         height: 100%;
       }
-
-      @media only screen and (max-width: 600px) { 
-        .cad {
-            position: absolute;
-            right: 15px;
-            top: 50px;
-            width: 100px;
-            height: 100px;
-            background: rgba(0, 0, 0, .3);
-            border-radius: 5px;
-        }
-      }
     `
 
     document.documentElement.appendChild(style)
@@ -90,7 +79,7 @@ window.grendCAD = (function grendCAD() {
   }
 
 
-  return function(floor, $parent, signColor, borderColor, borderWidth) {
+  return function (floor, $parent, signColor, borderColor, borderWidth) {
     if (initFloor) {
       console.log('cache')
       return setStyle(signColor, borderColor, borderWidth)
@@ -98,28 +87,28 @@ window.grendCAD = (function grendCAD() {
     console.log('load')
     initFloor = floor
 
-    loadScript(function() {
+    loadScript(function () {
       let $layer = loadDOM($parent)
 
       $layer.style.visibility = 'hidden'
       window.cad = structureCAD({
         data: {
-            block: [],
-            column: [],
-            door: [],
-            hole: [],
-            segment: [],
-            "vertex-xy": [],
-            "vertex-z": [],
-        }, 
+          block: [],
+          column: [],
+          door: [],
+          hole: [],
+          segment: [],
+          "vertex-xy": [],
+          "vertex-z": [],
+        },
         layer: $layer.querySelector('#cad'),
         edit: false
       });
-      
+
       setStyle(signColor, borderColor, borderWidth)
       cad.hideDire()
       cad.hideGauge()
-  
+
       console.log('loadData')
       cad.loadData(initFloor);
       if (point && dire) {
@@ -139,9 +128,9 @@ $.ajax({
     if (!data.showCad) return
 
 
-    
+
     $.ajax({
-      url: '//super.4dage.com/data/'+ window.number +'/floor.json', 
+      url: '//super.4dage.com/data/' + window.number + '/floor.json',
       method: 'GET',
       success(res) {
         grendCAD(res, document.querySelector('body'), data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)

pc场景/src/assets/style/public.css

@@ -0,0 +1,117 @@
+* {
+  font-family: 'SY-medium';
+}
+img {
+  -webkit-user-drag: none;
+}
+.ui-button {
+  height: 50px;
+  line-height: 1;
+  border-radius: 25px;
+  border: none;
+  background-color: transparent;
+  text-align: center;
+  letter-spacing: 1px;
+  outline: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.ui-button.default {
+  background-color: #CCCCCC;
+  color: #333333;
+}
+.ui-button.submit {
+  color: #fff;
+  background-color: #BC1915;
+}
+.ui-button.cancel {
+  color: #05c8ae;
+  background-color: transparent;
+}
+.ui-button.block {
+  width: 100%;
+}
+.ui-button.link {
+  display: inline-block;
+  text-decoration: none;
+}
+.ui-button.danger {
+  background-color: #c80303;
+  color: #fff;
+}
+.ui-input {
+  padding: 0 14px;
+  color: #fff;
+  letter-spacing: 1px;
+  height: 50px;
+  line-height: 50px;
+  width: 100%;
+  background: rgba(204, 204, 204, 0.2);
+  border: 1px solid #FFB521;
+  border-radius: 25px;
+}
+input::-webkit-input-placeholder {
+  color: #fff;
+}
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: #fff;
+}
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: #fff;
+}
+input:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: #fff;
+}
+.cad {
+  position: fixed;
+  right: 10px;
+  top: 130px;
+  width: 280px;
+  height: 150px;
+  z-index: 999;
+  transition: 0.3s ease all;
+}
+.cad #cad {
+  width: 100%;
+  height: 100%;
+}
+.cad #cad path {
+  fill: #04a2e6;
+}
+.cad #cad circle {
+  fill: #04a2e6;
+}
+@media only screen and (max-width: 487px), (max-height: 487px) {
+  .cad {
+    position: fixed;
+    top: 38%;
+    left: 50%;
+    transform: translate(-150%, -50%);
+    width: 280px;
+    height: 150px;
+    z-index: 999;
+    transition: none;
+  }
+  .cad #cad {
+    width: 100%;
+    height: 100%;
+  }
+  .ui-input {
+    padding: 0 14px;
+    color: #fff;
+    letter-spacing: 0;
+    height: 34px;
+    line-height: 34px;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid #FFB521;
+    border-radius: 17px;
+  }
+}
+.no-record {
+  text-align: center;
+  margin: 28vh auto;
+}

pc场景/src/assets/style/public.less

@@ -88,6 +88,12 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
   #cad{
     width: 100%;
     height: 100%;
+    path{
+      fill: #04a2e6;
+    }
+    circle{
+      fill: #04a2e6;
+    }
   }
 }
 

pc场景/src/pages/Home.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- @click="musicPlay" @touchstart="musicPlay" -->
-  <div class="parent-body">
+  <div class="parent-body" @click.once="$refs.VmenuRef.switchBGM(true)">
     <!-- 热点 -->
     <!-- <hot/> -->
     <!-- 热点弹出框 -->
@@ -29,10 +28,10 @@
         <v-title />
 
         <!-- 底部菜单 -->
-        <v-menu  />
+        <VMenu ref="VmenuRef" />
 
         <!-- 导览 -->
-        <v-guide/>
+        <v-guide />
 
         <!-- logo -->
         <div
@@ -84,7 +83,7 @@ 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 VMenu from "@/views/gui/menu";
 import vGuide from "@/views/gui/guide";
 import webVr from "@/views/gui/webvr";
 import guimsg from "@/views/gui/guimsg";
@@ -100,7 +99,7 @@ export default {
     guiLoading,
     hotspotList,
     vTitle,
-    vMenu,
+    VMenu,
     vGuide,
     webVr,
     guimsg,
@@ -115,19 +114,10 @@ export default {
       showWelcome: true,
       hotspots: "",
       loading: true,
-      // 控制页面宽度（通过菜单的展开和隐藏）
-      // 控制背景音乐
-      musicFlag: true,
     };
   },
 
   methods: {
-    musicPlay() {
-      if (this.musicFlag) window.manage.switchBgmState(true);
-      this.musicFlag = false;
-    },
-    // 控制背景音乐播放👆
-
     hideWelcome() {
       this.showWelcome = false;
       window.manage.switchBgmState(true);
@@ -212,7 +202,7 @@ export default {
     color: #fff;
     font-size: 16px;
     display: inline-block;
+    
   }
 }
-
 </style>

pc场景/src/views/gui/compomemt/antique.vue

@@ -1,511 +0,0 @@
-<template>
-  <div class="antique" :class="{ full: smBtn }">
-    <!-- 毛玻璃 -->
-    <div class="meanPageMBL"></div>
-
-    <div class="main">
-      <div class="top">
-        <div class="row">类型：</div>
-        <div
-          class="row"
-          v-for="item in topData"
-          @click="cutType(item.type)"
-          :key="item.name"
-          :class="{ active: item.type === formData.type }"
-        >
-          {{ item.name }}
-        </div>
-        <div class="search" @keyup.enter="mySearch">
-          <el-input
-            prefix-icon="el-icon-search"
-            type="text"
-            placeholder="搜索"
-            v-model="formData.searchKey"
-            maxlength="10"
-          />
-          <span class="btnn" @click="mySearch"></span>
-        </div>
-      </div>
-      <!-- 没有数据的时候 -->
-      <div class="hint" v-if="myArr.length === 0">
-        <img src="@/assets/img/serachNull.png" alt="" />
-        <p>暂时没有数据</p>
-        <p>请试一下其他关键字</p>
-      </div>
-      <!-- 渲染的内容 -->
-      <div class="infoBox" v-else>
-        <div
-          @click="lookInfo(item)"
-          class="infoRow"
-          :title="item.name"
-          v-for="item in myArr"
-          :key="item.id"
-        >
-          <img :src="baseURL + item.thumb" alt="" />
-          <p>{{ item.name }}</p>
-        </div>
-      </div>
-      <!-- 分页 -->
-      <div class="paging" v-show="myArr.length !== 0">
-        <el-pagination
-          layout="prev,pager,next,jumper"
-          :total="total"
-          :current-page="formData.pageNum"
-          @current-change="currentChange"
-          @size-change="sizeChange"
-        >
-        </el-pagination>
-      </div>
-      <!-- 关闭按钮 -->
-      <div class="close el-icon-close" @click="$emit('close')"></div>
-    </div>
-    <!-- 模型和图片 -->
-    <div class="model" v-if="modelShow">
-      <div class="ifrCon" ref="ifrCon">
-        <img
-          :src="baseURL + txtInfo.thumb"
-          alt=""
-          v-if="txtInfo.type === 'img'"
-        />
-        <div class="iframeBox" v-else>
-          <!-- 全屏的底部名字和右上角logo -->
-          <div class="fullLogo" v-if="fullscreen"></div>
-          <div class="fullName" v-if="fullscreen">{{txtInfo.name}}</div>
-        <iframe :src="mySrc" frameborder="0"></iframe>
-        </div>
-        <!-- 全屏按钮 -->
-        <div class="full" @click="screen">
-          <img src="@/assets/img/tab3FullX.png" alt="" v-if="fullscreen" />
-          <img src="@/assets/img/tab3Full.png" alt="" v-else />
-        </div>
-      </div>
-      <div class="rightTxt">
-        <h3>{{ txtInfo.name }}</h3>
-        <p class="ppov" v-html="txtInfo.description"></p>
-      </div>
-      <!-- 返回按钮 -->
-      <div class="close el-icon-arrow-left" @click="modelShow = false"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "@/utils/request";
-import { goodList } from "@/utils/api";
-export default {
-  name: "antique",
-  props: {
-    smBtn: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      total: 0,
-      baseURL: "",
-      topData: [
-        { name: "全部", type: "" },
-        { name: "精品图片", type: "img" },
-        { name: "三维模型", type: "model" },
-      ],
-      formData: {
-        pageNum: 1,
-        pageSize: 10,
-        searchKey: "",
-        type: "",
-      },
-      myArr: [],
-      // 有关三维模型的数据
-      mySrc: "",
-      modelShow: false,
-      fullscreen: false,
-      txtInfo: {},
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    // 点击模型全屏
-    screen() {
-      const element = this.$refs.ifrCon; // 获取容器
-      if (this.fullscreen) {
-        // 如果已经全屏了就退出全屏
-
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-      } else {
-        // 如果不是全屏就变成全屏
-        if (element.requestFullscreen) {
-          element.requestFullscreen();
-        } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen();
-        } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen();
-        } else if (element.msRequestFullscreen) {
-          // IE11
-          element.msRequestFullscreen();
-        }
-      }
-
-      this.fullscreen = !this.fullscreen;
-    },
-    lookInfo(item) {
-      this.txtInfo = item;
-      // 三维模型
-      this.mySrc = "4dage/Model.html?m=" + item.filePath;
-      this.modelShow = true;
-    },
-    mySearch() {
-      this.formData.pageNum = 1;
-      this.goodList(this.formData);
-    },
-    cutType(type) {
-      this.formData.type = type;
-      this.formData.pageNum = 1;
-      this.goodList(this.formData);
-    },
-    // 分页器方法
-    currentChange(val) {
-      // console.log('当前页改变了', val)
-      this.formData.pageNum = val;
-      this.goodList(this.formData);
-    },
-    sizeChange(val) {
-      // console.log('条数改变了', val)
-      this.formData.pageNum = 1;
-      this.formData.pageSize = val;
-      this.goodList(this.formData);
-    },
-    // 封装获取列表函数
-    async goodList(data) {
-      const res = await goodList(data);
-      this.total = res.data.total;
-      this.myArr = res.data.records;
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-    this.goodList(this.formData);
-    // 设置一个全局变量控制空格建的监听
-    window.myKeyBlank = true;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    // 监听esc事件
-    document.addEventListener("webkitfullscreenchange", (e) => {
-      if (!e.currentTarget.webkitIsFullScreen) {
-        // console.log('退出啊webkitIsFullScreen11111111111')
-        setTimeout(() => {
-          this.fullscreen = false;
-        }, 100);
-      } else {
-        // console.log('进入webkitIsFullScreen')
-      }
-    });
-
-    document.addEventListener("fullscreenchange", () => {
-      if (!document.fullscreenElement) {
-        // console.log('退出啊fullscreenchange1111111111')
-        setTimeout(() => {
-          this.fullscreen = false;
-        }, 100);
-      } else {
-        // console.log('进入fullscreenchange')
-      }
-    });
-
-    document.addEventListener("MSFullscreenChange", () => {
-      if (!document.msFullscreenElement) {
-        // console.log('IE退出111111')
-        setTimeout(() => {
-          this.fullscreen = false;
-        }, 100);
-      } else {
-        // console.log('IE进')
-      }
-    });
-    document.addEventListener("mozfullscreenchange", () => {
-      if (!document.mozFullScreenElement) {
-        // console.log('火狐退出1111111111111')
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.fullscreen = false;
-          }, 100);
-        });
-      } else {
-        // console.log('火狐进')
-      }
-    });
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {
-    window.myKeyBlank = false;
-  }, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.antique {
-  transition: width 0.3s;
-  color: #fff6d2;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 998;
-  width: calc(100% - 200px);
-  height: 100%;
-  // m毛玻璃
-  .meanPageMBL {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(161, 101, 59, 0.8);
-    backdrop-filter: blur(4px);
-    z-index: -1;
-  }
-  .close {
-    color: #cc946d;
-    font-size: 34px;
-    cursor: pointer;
-    position: absolute;
-    right: 40px;
-    top: 55px;
-  }
-  .main {
-    color: #774926;
-    padding: 55px 26px 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1200px;
-    height: 700px;
-    background: url("../../../assets/img/goodBg.png");
-    background-size: 100% 100%;
-    .top {
-      height: 36px;
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      .row {
-        cursor: pointer;
-        height: 36px;
-        line-height: 36px;
-        padding: 0 20px;
-        border-radius: 18px;
-        margin-right: 15px;
-        &:nth-of-type(1) {
-          pointer-events: none;
-          margin-right: 0;
-        }
-      }
-      .active {
-        background-color: #cc946d;
-        color: #fff6d2;
-      }
-      .search {
-        position: relative;
-        /deep/.el-icon-search {
-          color: #774926;
-          font-size: 20px;
-          margin-top: -1px;
-        }
-        .btnn {
-          z-index: 10;
-          cursor: pointer;
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 36px;
-          width: 36px;
-          border-radius: 50%;
-          background-color: transparent;
-        }
-      }
-    }
-    .hint {
-      text-align: center;
-      margin-top: 100px;
-      width: 100%;
-      height: 380px;
-      & > p {
-        color: #cc946d;
-        font-size: 20px;
-        margin-top: 20px;
-      }
-    }
-    .infoBox {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: 55px;
-      width: 100%;
-      height: 410px;
-      .infoRow {
-        margin-right: 12px;
-        margin-bottom: 26px;
-        cursor: pointer;
-        overflow: hidden;
-        width: 220px;
-        height: 192px;
-        border-radius: 6px;
-        background-color: #fff;
-        & > img {
-          width: 100%;
-          height: 154px;
-          object-fit: cover;
-        }
-        & > p {
-          padding: 0 10px;
-          width: 100%;
-          height: 38px;
-          line-height: 38px;
-          font-size: 14px;
-          text-align: center;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        &:nth-of-type(5n) {
-          margin-right: 0;
-        }
-        &:hover {
-          & > p {
-            color: #cc946d;
-          }
-        }
-      }
-    }
-    .paging {
-      position: absolute;
-      bottom: 70px;
-      left: 0;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  // 模型
-  .model {
-    color: #774926;
-    padding: 110px 26px 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1200px;
-    height: 700px;
-    background: url("../../../assets/img/goodBg.png");
-    background-size: 100% 100%;
-    display: flex;
-    .ifrCon {
-      background-color: #fff6d2;
-      position: relative;
-      width: 558px;
-      height: 478px;
-      .iframeBox{
-        position: relative;
-        width: 100%;
-        height: 100%;
-        .fullLogo{
-          position: absolute;
-          z-index: 10;
-          right: 10px;
-          top: 10px;
-          width: 166px;
-          height: 43px;
-          background: url('../../../assets/img/logo.png');
-          background-size: 100% 100%;
-        }
-        .fullName{
-          position: absolute;
-          left: 50%;
-          bottom: 20px;
-          transform: translateX(-50%);
-          color: #774926;
-          font-size: 24px;
-        }
-        iframe {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      & > img {
-        max-width: 100%;
-        max-height: 100%;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-      .full {
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-        position: absolute;
-        right: 10px;
-        bottom: 10px;
-        color: #fff;
-        & > img {
-          width: 30px;
-          height: 30px;
-        }
-      }
-    }
-    .rightTxt {
-      padding-right: 20px;
-      height: 478px;
-      flex: 1;
-      margin-left: 110px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      & > h3 {
-        width: 100%;
-        word-break: break-all;
-        font-size: 30px;
-        margin-bottom: 20px;
-      }
-      & > P {
-        padding-right: 15px;
-        max-height: calc(100% - 60px);
-        overflow-y: auto;
-        line-height: 24px;
-        width: 100%;
-        word-break: break-all;
-        color: #cc946d;
-        font-size: 16px;
-      }
-
-      .ppov::-webkit-scrollbar-thumb {
-        outline: 2px solid #cc946d;
-      }
-    }
-  }
-}
-
-.full {
-  width: 100%;
-}
-</style>

pc场景/src/views/gui/compomemt/hotspot.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="hotspot" :class="{ full: smBtn }">
-    <div class="top">热点列表</div>
+  <div class="hotspot">
+    <div class="top">
+      <h3>{{ Mylangue ? "Hotspot list" : "热点列表" }}</h3>
+      <!-- 关闭按钮 -->
+
+      <div class="close" @click="(hotInd = null), $emit('close')"></div>
+    </div>
     <div class="main">
-      <div class="txtNone" v-if="data.length === 0">暂无热点</div>
+      <div class="txtNone" v-if="data.length === 0">
+        {{ Mylangue ? "No Information" : "暂无热点" }}
+      </div>
       <div class="txt" v-else>
         <span
           :class="{ active: hotInd === index }"
@@ -12,8 +19,6 @@
           >{{ item.info.title ? item.info.title : "热点" }}</span
         >
       </div>
-      <!-- 关闭按钮 -->
-      <div class="close" @click="$emit('close')"></div>
     </div>
   </div>
 </template>
@@ -21,12 +26,7 @@
 <script>
 export default {
   name: "hotspot",
-  props: {
-    smBtn: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  props: {},
   components: {},
   data() {
     //这里存放数据
@@ -51,11 +51,17 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    this.data = window.myHotList;
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    let time = -1;
+    time = setInterval(() => {
+      if (window.myHotList) {
+        this.data = window.myHotList;
+        clearInterval(time);
+      }
+    }, 500);
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -67,76 +73,68 @@ export default {
 </script>
 <style lang='less' scoped>
 .hotspot {
-  width: 340px;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  right: 0;
-  transition: all 0.3s;
-  transform: translateX(-200px);
-  z-index: 998;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 600px;
+  height: 700px;
+  transform: translate(-50%, -50%);
+  border-top: 10px solid #00a0e6;
+  padding: 40px 30px 20px;
+  background-color: rgba(21, 52, 115, 0.8);
   .top {
-    width: 100%;
-    height: 100px;
-    line-height: 100px;
-    background-color: #cc946d;
-    color: #fff6d2;
-    font-size: 16px;
-    text-align: center;
+    display: flex;
+    height: 40px;
+    justify-content: space-between;
     align-items: center;
+    & > h3 {
+      color: #fec600;
+      font-size: 22px;
+    }
+    .close {
+      cursor: pointer;
+      height: 40px;
+      width: 40px;
+      background: url("../../../assets/img/close.png") no-repeat center;
+      background-size: 31px 31px;
+    }
   }
   .main {
     width: 100%;
-    height: calc(100% - 100px);
-    background-color: rgba(255, 246, 210, 1);
+    height: calc(100% - 50px);
+    overflow-y: auto;
     .txtNone {
       height: 90%;
-      color: #7e522f;
+      color: #00a0e6;
       font-size: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
     }
     .txt {
-      padding: 20px;
-      height: 90%;
-      overflow-y: auto;
-      color: #7e522f;
+      color: #fff;
       font-size: 16px;
       & > span {
-        margin-top: 20px;
+        padding: 15px 0;
         cursor: pointer;
         display: block;
-        width: 100%;
-        text-align: center;
+        width: 96%;
+        text-align: left;
+        border-bottom: 1px solid #fff;
       }
       :hover {
-        color: #d4a781;
+        color: #00a0e6;
       }
     }
     .active {
-      color: #d4a781;
+      color: #00a0e6;
     }
-    .txt::-webkit-scrollbar-thumb {
-      outline: 2px solid #cc946d;
+    &::-webkit-scrollbar-thumb {
+      outline: 2px solid #fec600;
     }
-    .txt::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       width: 4px;
     }
-    .close {
-      cursor: pointer;
-      width: 100%;
-      height: 10%;
-      background: url("../../../assets/img/closeT.png") no-repeat center center;
-      background-size: 44px 44px;
-      &:hover {
-        background: url("../../../assets/img/close.png") no-repeat center center;
-        background-size: 44px 44px;
-      }
-    }
   }
 }
-.full {
-  transform: translateX(0);
-}
 </style>

pc场景/src/views/gui/compomemt/mapNav.vue

@@ -1,233 +0,0 @@
-<template>
-  <div class="mapNav" :class="{ full: smBtn }">
-    <!-- 毛玻璃 -->
-    <div class="meanPageMBL"></div>
-
-    <div class="main">
-      <div
-        class="row"
-        :class="{ noneAc: refer.includes(item.url) }"
-        v-for="item in data"
-        :key="item.id"
-      >
-        <div class="rowtxt">
-          <div class="one">{{ item.name }}</div>
-          <div class="tow" v-if="item.num">{{ item.num }}</div>
-          <div class="three" v-html="item.txt" v-if="item.txt"></div>
-        </div>
-        <img :src="require(`@/assets/img/${item.url}.jpg`)" alt="" />
-        <p class="bs">·</p>
-        <p>{{item.name+(item.num?item.num:'')}}</p>
-        <!-- 背景遮造 -->
-        <div class="smak" @click="cutScene(item.url)">
-          <div>点击<br />浏览</div>
-        </div>
-      </div>
-    </div>
-    <!-- 关闭按钮 -->
-    <div class="close el-icon-close" @click="$emit('close')"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "mapNav",
-  props: {
-    smBtn: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      data: [
-        { name: "序厅", url: "1185" },
-        {
-          name: "吴忠溯源",
-          num: "（一）",
-          txt: "远古印记<br/>魏晋南北朝时期",
-          url: "1186",
-        },
-        {
-          name: "吴忠溯源",
-          num: "（二）",
-          txt: "隋唐时期<br/>元明清时期",
-          url: "1187",
-        },
-        {
-          name: "红色吴忠展厅",
-          txt:'革命战争时期',
-          url: "1188",
-        },
-      ],
-      refer: "",
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    // 点击切换场景
-    cutScene(url) {
-      window.location.href =
-        window.location.origin + window.location.pathname + `#/?m=${url}`;
-      location.reload(true);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取当前地址栏参数
-    this.refer = window.location.hash;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.mapNav {
-  transition: width 0.3s;
-  color: #fff6d2;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 998;
-  width: calc(100% - 200px);
-  height: 100%;
-  // m毛玻璃
-  .meanPageMBL {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(161, 101, 59, 0.8);
-    backdrop-filter: blur(4px);
-    z-index: -1;
-  }
-  .main {
-    border-radius: 10px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1400px;
-    height: 660px;
-    display: flex;
-    justify-content: space-between;
-    .row {
-      position: relative;
-      cursor: pointer;
-      width: 230px;
-      height: 620px;
-      .rowtxt {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        color: #774926;
-        position: absolute;
-        top: 55px;
-        left: 50%;
-        transform: translateX(-50%);
-        .one {
-          font-size: 22px;
-          font-weight: 700;
-          letter-spacing: 4px;
-          writing-mode: vertical-lr;
-        }
-        .tow{
-          font-weight: 700;
-          font-size: 18px;
-        }
-        .three{
-          margin-top: 25px;
-          font-size: 16px;
-          letter-spacing: 4px;
-          writing-mode: vertical-lr;
-        }
-      }
-      &:nth-of-type(1) .rowtxt {
-        top: 150px;
-        .one {
-          font-size: 24px;
-          letter-spacing: 40px;
-        }
-      }
-
-      & > img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-      .bs {
-        font-size: 80px;
-        margin: 10px 0;
-      }
-      & > p {
-        text-align: center;
-        line-height: 30px;
-        font-size: 16px;
-        color: #fff6d2;
-      }
-      .smak {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        transition: opacity 1s;
-        background: url("../../../assets/img/mapAc.png") rgba(116, 72, 38, 0.9);
-        background-size: 100% 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        & > div {
-          padding-top: 22px;
-          text-align: center;
-          color: #fff6d2;
-          font-size: 20px;
-          width: 100px;
-          height: 100px;
-          background: url("../../../assets/img/mapBS.png");
-          background-size: 100% 100%;
-        }
-      }
-      &:hover {
-        & > p {
-          color: #3f1e05;
-        }
-        .smak {
-          opacity: 1;
-        }
-      }
-    }
-    .noneAc {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-  }
-  .close {
-    cursor: pointer;
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    font-size: 40px;
-    color: #fff;
-  }
-}
-.full {
-  width: 100%;
-}
-</style>

pc场景/src/views/gui/compomemt/mapSvg.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="mapSvg">
+    <div class="svgImg">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    mapShow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      activeInd: null,
+      data: [],
+    };
+  },
+  computed: {},
+  watch: {
+    mapShow() {
+      this.activeInd = null;
+    },
+  },
+  methods: {},
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.mapSvg {
+  width: 100%;
+  height: 100%;
+  .svgImg {
+    width: 510px;
+    height: 511px;
+    margin: 50px auto;
+  }
+}
+</style>

pc场景/src/views/gui/compomemt/mapSvgEn.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="mapSvgEn">
+    <div class="svgImg">
+ 
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    mapShow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      activeInd: null,
+      data: [],
+    };
+  },
+  computed: {},
+  watch: {
+    mapShow() {
+      this.activeInd = null;
+    },
+  },
+  methods: {},
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.mapSvgEn {
+  width: 100%;
+  height: 100%;
+  .svgImg {
+    width: 510px;
+    height: 511px;
+    margin: 50px auto;
+  }
+}
+</style>

pc场景/src/views/gui/compomemt/share.vue

@@ -1,157 +0,0 @@
-<template>
-  <div class="share" :class="{ full: smBtn }">
-    <div class="main">
-      <h3>分享页面</h3>
-      <div class="code">
-        <img :src="require(`@/assets/img/code${urlNum}.png`)" alt="" />
-        <p>保存二维码，或点击复制链接</p>
-      </div>
-      <div class="btnn" @click="copyPcTxt">复制分享链接</div>
-      <!-- 关闭按钮 -->
-      <div class="close" @click="$emit('close')"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "share",
-  props: {
-    smBtn: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      urlNum: "1185",
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    //点击复制链接
-    copyPcTxt() {
-      // 存储传递过来的数据
-      let OrderNumber = window.location.href;
-      // 创建一个input 元素
-      // createElement() 方法通过指定名称创建一个元素
-      let newInput = document.createElement("input");
-      // 讲存储的数据赋值给input的value值
-      newInput.value = OrderNumber;
-      // appendChild() 方法向节点添加最后一个子节点。
-      document.body.appendChild(newInput);
-      // 选中input元素中的文本
-      // select() 方法用于选择该元素中的文本。
-      newInput.select();
-      // 执行浏览器复制命令
-      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
-      document.execCommand("Copy");
-      // 清空输入框
-      newInput.remove();
-      // 下面是element的弹窗 不需要的自行删除就好
-      alert("复制成功");
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    let temp = window.location.hash;
-    if (temp.includes("1186")) this.urlNum = "1186";
-    else if (temp.includes("1187")) this.urlNum = "1187";
-    else if (temp.includes("1188")) this.urlNum = "1188";
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.share {
-  transition: width 0.3s;
-  color: #fff6d2;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 998;
-  width: calc(100% - 200px);
-  height: 100%;
-  &::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    backdrop-filter: blur(10px);
-    z-index: -1;
-  }
-  .main {
-    border-radius: 10px;
-    padding-top: 50px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 400px;
-    height: 550px;
-    background-color: rgba(161, 101, 59, 0.8);
-    & > h3 {
-      font-size: 30px;
-      text-align: center;
-    }
-    .code {
-      padding-top: 15px;
-      background-color: #fff6d2;
-      border-radius: 5px;
-      width: 260px;
-      height: 300px;
-      margin: 30px auto;
-      text-align: center;
-      & > img {
-        width: 240px;
-      }
-      & > p {
-        color: #774926;
-        margin-top: 15px;
-        font-size: 12px;
-      }
-    }
-    .btnn {
-      cursor: pointer;
-      margin: 0 auto;
-      width: 260px;
-      height: 60px;
-      border-radius: 30px;
-      border: 2px solid #fff6d2;
-      font-size: 20px;
-      color: #fff6d2;
-      text-align: center;
-      line-height: 56px;
-    }
-    .close {
-      cursor: pointer;
-      position: absolute;
-      right: -18px;
-      top: -18px;
-      width: 44px;
-      height: 44px;
-      background: url("../../../assets/img/close.png");
-      background-size: 100% 100%;
-    }
-  }
-}
-.full {
-  width: 100%;
-}
-</style>

pc场景/src/views/gui/hotspotlist.vue

@@ -11,7 +11,7 @@
           </ul>
       </div>
       <div id="hotListBottom">
-          <img id="hotListClose" src="@/assets/img/close.png" alt="">
+          <!-- <img id="hotListClose" src="@/assets/img/close.png" alt=""> -->
       </div>
   </div>
 </template>

pc场景/src/views/gui/menu.vue

@@ -14,7 +14,7 @@
             title="场景导览"
           >
             <div class="incoTxt ui-icon" :class="{ incoTxtAc: !isGuide }">
-              {{ Mylangue ? "xx" : "场景列表" }}
+              {{ Mylangue ? "MACHINE LIST" : "场景列表" }}
             </div>
 
             <img
@@ -50,7 +50,9 @@
             rel="tooltip"
             data-original-title="播放"
           >
-            <div class="incoTxt">{{ Mylangue ? "xx" : "沉浸游览" }}</div>
+            <div class="incoTxt">
+              {{ Mylangue ? "IMMERSIVE VIEW" : "沉浸游览" }}
+            </div>
             <a>
               <img
                 :src="require('@/assets/images/icon/play.png')"
@@ -61,7 +63,7 @@
           </div>
           <div id="pause" class="ui-icon" style="display: none">
             <div class="incoTxt incoTxtAc">
-              {{ Mylangue ? "xx" : "沉浸游览" }}
+              {{ Mylangue ? "IMMERSIVE VIEW" : "沉浸游览" }}
             </div>
 
             <a>
@@ -79,7 +81,7 @@
           <!-- 热点列表 -->
           <div id="hosInco" @click="hosShow = !hosShow">
             <div class="incoTxt ui-icon" :class="{ incoTxtAc: hosShow }">
-              {{ Mylangue ? "xx" : "热点列表" }}
+              {{ Mylangue ? "HOT SPOT LIST" : "热点列表" }}
             </div>
             <a>
               <img :src="require('@/assets/images/icon/hotInco.png')" alt="" />
@@ -121,7 +123,9 @@
               id="gui-modes-dollhouse"
               rel="tooltip"
             >
-              <div class="incoTxt">{{ Mylangue ? "xx" : "立体视图" }}</div>
+              <div class="incoTxt">
+                {{ Mylangue ? "STEREO VIEW" : "立体视图" }}
+              </div>
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/dollhouse.png')"
@@ -137,7 +141,9 @@
               rel="tooltip"
               title="顶部俯视"
             >
-              <div class="incoTxt">{{ Mylangue ? "xx" : "俯视视图" }}</div>
+              <div class="incoTxt">
+                {{ Mylangue ? "BIRD'S-EYE VIEW" : "俯视视图" }}
+              </div>
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/floor.png')"
@@ -204,7 +210,9 @@
         <!-- 音乐 -->
         <div id="volume" class="ui-icon bgandshare wide">
           <div id="openMusic" style="display: block">
-            <div class="incoTxt">{{ Mylangue ? "xx" : "打开音乐" }}</div>
+            <div class="incoTxt">
+              {{ Mylangue ? "TURN ON MUSIC" : "打开音乐" }}
+            </div>
             <img
               @click="switchBGM(true)"
               src="../../assets/img/musicAc.png"
@@ -213,7 +221,9 @@
             />
           </div>
           <div id="closeMusic" style="display: none">
-            <div class="incoTxt">{{ Mylangue ? "xx" : "关闭音乐" }}</div>
+            <div class="incoTxt">
+              {{ Mylangue ? "TURN OFF MUSIC" : "关闭音乐" }}
+            </div>
             <img
               @click="switchBGM(false)"
               src="../../assets/img/music.png"
@@ -248,21 +258,43 @@
     </div>
 
     <!-- 热点列表组件 -->
-    <Hotspot v-if="hosShow" @close="hosShow = false" />
+    <div class="hotMainBox" :class="{ hotMainBoxAc: hosShow }">
+      <Hotspot @close="hosShow = false" />
+    </div>
+
+    <!-- 右上角的地图覆盖点击事件 -->
+    <div class="rightTopMap" @click="mapShow = true">
+      <div>
+        <img src="../../assets/img/rightMap.png" alt="" />
+      </div>
+    </div>
+
+    <!-- 地图导览页面 -->
+    <div class="rightMapBox" :class="{ rightMapBoxAc: mapShow }">
+      <MapSvgEn :mapShow="mapShow" v-if="Mylangue" />
+      <MapSvg :mapShow="mapShow" v-else />
+      <!-- 收起按钮 -->
+      <div class="closeMap" @click="mapShow = false">
+        <img src="../../assets/img/closeMap.png" alt="" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 //引入组件
-import Hotspot from "./compomemt/hotspot";
+import Hotspot from "./compomemt/hotspot.vue";
+import MapSvg from "./compomemt/mapSvg.vue";
+import MapSvgEn from "./compomemt/mapSvgEn.vue";
 export default {
-  components: { Hotspot },
+  components: { Hotspot, MapSvg, MapSvgEn },
   data() {
     return {
       isGuide: true,
       // 热点列表的数据
       hosShow: false,
-      // 右侧菜单数据
+      // 地图导览
+      mapShow: true,
     };
   },
   watch: {
@@ -402,7 +434,7 @@ export default {
 .viewContainer {
   .incoTxt {
     position: absolute;
-    bottom: -15px;
+    top: 46px;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
@@ -417,11 +449,15 @@ export default {
 // 单独打开自动导览
 #gui #drawer.playing,
 #gui .pinBottom.playing {
-  bottom: 30px;
+  bottom: 40px;
+}
+// 单独打开导览列表
+#gui .pinBottom.open.noScroll {
+  bottom: 157px;
 }
 // 打开自动导览和 导览列表的位置
 #gui .pinBottom.open.noScroll.playing {
-  bottom: 175px;
+  bottom: 185px;
 }
 
 //立体试图的选中
@@ -452,16 +488,16 @@ export default {
 
 // 右边的音乐
 .pinBottom.right {
-  bottom: 38px;
+  bottom: 40px;
 }
 #gui .pinBottom.right.playing {
-  bottom: 40px;
+  bottom: 50px;
 }
 #gui .pinBottom.right.open {
-  bottom: 158px;
+  bottom: 166px;
 }
 #gui .pinBottom.right.open.playing {
-  bottom: 186px;
+  bottom: 194px;
 }
 #volume {
   position: relative;
@@ -476,7 +512,7 @@ export default {
     .incoTxt {
       padding-left: 2px;
       position: absolute;
-      bottom: -15px;
+      top: 46px;
       left: 50%;
       transform: translateX(-50%);
       width: 100%;
@@ -486,4 +522,67 @@ export default {
     }
   }
 }
+
+// 热点列表盒子
+.hotMainBox {
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s;
+  backdrop-filter: blur(4px);
+  position: fixed;
+  z-index: 9993;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.hotMainBoxAc {
+  opacity: 1;
+  pointer-events: auto;
+}
+.rightMapBox {
+  opacity: 0;
+  transition: all 0.3s;
+  position: fixed;
+  top: 0;
+  right: -1000px;
+  z-index: 9992;
+  width: 960px;
+  height: 100%;
+  backdrop-filter: blur(4px);
+  background-color: rgba(21, 52, 115, 0.8);
+  .closeMap {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    left: -25px;
+    transform: translateY(-50%);
+  }
+}
+.rightMapBoxAc {
+  opacity: 1;
+  right: 0px;
+}
+
+// 右上角的地图
+.rightTopMap {
+  cursor: pointer;
+  position: fixed;
+  z-index: 9991;
+  right: 30px;
+  top: 30px;
+  width: 200px;
+  height: 200px;
+  & > div {
+    width: 40px;
+    height: 40px;
+    top: -16px;
+    right: -16px;
+    position: absolute;
+    & > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>

pc场景/src/views/gui/title.vue

@@ -102,6 +102,10 @@ export default {};
 <style lang='less' scoped>
 #model-title {
   background-color: #182e60;
+  padding: 0 30px;
+  #gui-name {
+    font-size: 14px;
+  }
 }
 #meta-info-wrapper {
   #meta-info {