1.0

scene/package.json

@@ -21,7 +21,8 @@
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-click-outside": "^1.1.0",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

scene/public/static/js/Hot.js

@@ -60,7 +60,7 @@ window.initHot = function(model){
         var r = link.substring(link.indexOf("html") + 4),
             o = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : ""; 
         -1 == r.indexOf("?") ? src = link + "?time=" + randomTime().getTime() + "&id=" + window.number + o : src = link + "&time=" + randomTime().getTime() + "&id=" + window.number + o
-        return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'hot')
+        return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://192.168.0.12:8081')
         // return src //打包   
        
     }

scene/src/assets/style/myBase.css

@@ -84,7 +84,7 @@
   overflow: hidden;
 }
 #cad path {
-  stroke-width: 2;
+  stroke-width: 0.5;
   fill: rgba(200, 185, 146, 0.8);
   stroke: #d1b198;
 }
@@ -150,11 +150,10 @@
 
 #ele1 circle {
   fill: rgba(200, 185, 146, 0.8);
-  stroke-width: 3;
-  r: 5.5;
+  /* stroke-width: 3; */
+  r: 1;
 }
 #ele1 path {
-
 }
 #share-modal {
   display: none !important;
@@ -176,7 +175,7 @@
     left: 17px;
     width: 36px;
     height: 36px;
-    background: url(../image/icon_left.png)no-repeat;
+    background: url(../image/icon_left.png) no-repeat;
     background-size: 100% 100%;
   }
 }

scene/src/main.js

@@ -1,30 +1,30 @@
-import Vue from 'vue'
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-import App from './App.vue'
-import '@/mixins'
-import router from './router'
-import 'viewerjs/dist/viewer.css'
-import Viewer from 'v-viewer'
-
+import Vue from "vue";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+import App from "./App.vue";
+import "@/mixins";
+import router from "./router";
+import store from "./store";
+import "viewerjs/dist/viewer.css";
+import Viewer from "v-viewer";
 // 重置场景样式
-import './assets/style/myBase.css'
+import "./assets/style/myBase.css";
 
-Vue.use(Viewer,{
+Vue.use(Viewer, {
   defaultOptions: {
-    navbar:false,
-    button:false,
-    maxZoomRatio:2,
-    zIndex:99999,
-    title: false
-  }
-})
-
+    navbar: false,
+    button: false,
+    maxZoomRatio: 2,
+    zIndex: 99999,
+    title: false,
+  },
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 Vue.use(ElementUI);
 
 new Vue({
+  store,
   router,
-  render: h => h(App)
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount("#app");

scene/src/store/index.js

@@ -0,0 +1,25 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  state: {
+    points: null,
+  },
+  getters: {
+    points(state) {
+      return state.points;
+    },
+  },
+  mutations: {
+    setData(state, payload) {
+      for (let key in payload) {
+        state[key] = payload[key];
+      }
+    },
+  },
+  actions: {},
+  modules: {},
+});
+export default store;

scene/src/views/gui/components/hotList.vue

@@ -58,7 +58,6 @@ export default {
       }
     },
     handleClickOutside() {
-      console.log("handleClickOutside");
       this.$emit("close");
     },
   },
@@ -88,13 +87,14 @@ export default {
   height: 100vh;
   background: url(../../../assets/image/list-bg.png) no-repeat;
   background-size: 100% 100%;
+  z-index: 100;
   .close-btn {
     width: 36px;
     height: 36px;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
-    background: url(../../../assets/image/icon_right.png) no-repeat;
+    background: url(../../../assets/image/icon/new-icon/icon_right.png) no-repeat;
     background-size: 100% 100%;
     position: absolute;
     z-index: 100;
@@ -251,8 +251,8 @@ export default {
       margin-top: 10px;
       padding: 10px 15px 0 33px;
       height: calc(100% - 266px);
-      .txtNone{
-      font-size: 14px;
+      .txtNone {
+        font-size: 14px;
       }
       .txt {
         font-size: 14px;

scene/src/views/gui/components/tourList.vue

@@ -0,0 +1,154 @@
+<!--  -->
+<template>
+  <div class="tour-list" v-click-outside="handleClickOutside">
+    <div class="tour-controls" @click="handleClickOutside">
+      <span>重点展位</span>
+      <i></i>
+    </div>
+    <div class="swcon" v-swiper:mySwiper="swiperOption">
+      <ul class="swiper-wrapper swiper-wrapper-n">
+        <div class="swiper-slide" v-for="(i, index) in tourList">
+          <img :src="i.heroLocations[0].thumbUrl" alt="" />
+          <div class="sl-item">
+            <span>{{ i.heroLocations[0].name }}</span>
+          </div>
+        </div>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ClickOutside from "vue-click-outside";
+import { directive } from "vue-awesome-swiper";
+import "swiper/css/swiper.css";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  directives: { ClickOutside, swiper: directive },
+  props: ["tourList"],
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {
+    swiperOption() {
+      let that = this;
+      return {
+        slidesPerView: "auto",
+        autoplay: false,
+        mousewheel: true,
+        // centeredSlides: true,
+        // watchSlidesProgress: true,
+        freeMode: true,
+        // loop: this.hotspot.images.length > 1,
+        // pagination: {
+        //   el: ".swiper-pagination",
+        // },
+        on: {
+          slideChangeTransitionEnd: function () {
+            // that.mbactive = this.realIndex;
+          },
+        },
+      };
+    },
+  },
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    handleClickOutside() {
+      this.$emit("close");
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+//@import url(); 引入公共css类
+
+.tour-list {
+  width: 95%;
+
+  height: 153px;
+  background: rgba(55, 54, 53, 0.6);
+  position: absolute;
+  bottom: 116px;
+  left: 50%;
+  margin-left: -47.5%;
+  // transform: translateX(-50%);
+  padding: 22px 15px;
+  .tour-controls {
+    width: 178px;
+    height: 43px;
+    background: url(../../../assets/image/icon/new-icon/tab2.png) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: -43px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    cursor: pointer;
+    span {
+      font-size: 20px;
+      color: #fff;
+    }
+    i {
+      width: 18px;
+      height: 18px;
+      background: url(../../../assets/image/icon/new-icon/icon_down.png) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .swcon {
+    height: 100%;
+  }
+  .swiper-wrapper {
+    height: 100%;
+    .swiper-slide {
+      display: inline-block;
+      width: 156px;
+      height: 100%;
+      border-radius: 10px;
+      cursor: pointer;
+      overflow: hidden;
+      position: relative;
+      margin-left: 16px;
+      img {
+        width: 100%;
+      }
+      .sl-item {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding-bottom: 13px;
+        font-size: 16px;
+        color: #fff;
+      }
+      &.active {
+        .sl-item {
+          background: rgba(0, 0, 0, 0.4);
+        }
+      }
+    }
+  }
+}
+</style>

scene/src/views/gui/menu copy.vue

@@ -4,10 +4,10 @@
       <div id="view-controllers"></div>
     </div>
     <div class="pinBottom left">
-      <div v-if="isMobile" id="myClickBox" style="">
+      <!-- <div v-if="isMobile" id="myClickBox" style="">
         <div id="go" />
         <div id="back" />
-      </div>
+      </div> -->
 
       <div>
         <div class="viewContainer">
@@ -18,17 +18,17 @@
           </div>
           <div id="play" class="ui-icon" rel="tooltip" data-original-title="播放">
             <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">自动导览</div>
+            <div class="hoverTit">自动漫游</div>
             <a>
-              <img :src="require('@/assets/images/icon/play.png')" width="24" height="24" />
+              <img :src="require('@/assets/image/icon/tour-play.png')" width="24" height="24" />
             </a>
           </div>
-          <div id="pause" class="ui-icon" style="display: none">
+          <div id="pause" class="ui-icon" v-show="false">
             <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">自动导览</div>
+            <div class="hoverTit">自动漫游</div>
 
             <a>
-              <img rel="tooltip" title="" :src="require('@/assets/images/icon/pause.png')" width="24" height="24" data-original-title="暂停" />
+              <img rel="tooltip" title="" :src="require('@/assets/image/icon/tour-pause.png')" width="24" height="24" data-original-title="暂停" />
             </a>
           </div>
           <div id="next" class="next desktop-only ui-icon wide" style="display: none">
@@ -39,43 +39,34 @@
           <div id="gui-modes-map" class="ui-icon double active">
             <div data-original-title="导览" @click="isGuide = !isGuide" id="pullTab" rel="tooltip" title="场景导览">
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">导览列表</div>
+              <div class="hoverTit">重点展位</div>
 
-              <img title="" class="icon icon-inside" :src="require(`@/assets/images/icon/auto${!isGuide ? '_active' : ''}.png`)" />
+              <img title="" class="icon icon-inside" :src="require(`@/assets/image/icon/icon_point${!isGuide ? '_active' : '_normal'}.png`)" />
             </div>
 
-            <div data-original-title="全景漫游" id="gui-modes-inside" rel="tooltip">
+            <!-- 热点列表 -->
+            <div v-show="!hideTools" id="myHotList" @click="openTags">
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">全景漫游</div>
-
-              <img class="icon icon-inside" :src="require('@/assets/images/icon/inside.png')" />
-              <img class="icon icon-inside active" :src="require('@/assets/images/icon/inside_active.png')" />
+              <div class="hoverTit">热点列表</div>
+              <img :src="require(`@/assets/image/icon/icon_detail${openInd == 1 ? '_active' : '_normal'}.png`)" alt="" />
             </div>
             <div title="迷你漫游" data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip">
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">三维视觉</div>
-              <img class="icon icon-inside" :src="require('@/assets/images/icon/dollhouse.png')" />
-              <img class="icon icon-inside active" :src="require('@/assets/images/icon/dollhouse_active.png')" />
+              <div class="hoverTit">三维模型</div>
+              <img class="icon icon-inside" :src="require('@/assets/image/icon/icon_dollhouse_normal.png')" />
+              <img class="icon icon-inside active" :src="require('@/assets/image/icon/icon_dollhouse_active.png')" />
             </div>
             <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="顶部俯视">
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">平面视觉</div>
-              <img class="icon icon-inside" :src="require('@/assets/images/icon/floor.png')" />
-              <img class="active icon icon-inside active" :src="require('@/assets/images/icon/floor_active.png')" />
+              <div class="hoverTit">俯视平面</div>
+              <img class="icon icon-inside" :src="require('@/assets/image/icon/icon_floor_normal.png')" />
+              <img class="active icon icon-inside active" :src="require('@/assets/image/icon/icon_floor_active.png')" />
             </div>
-
-            <!-- 热点列表 -->
-            <div v-show="!hideTools" id="myHotList" @click="openInd = 1">
+            <div @click="onFullScreen" v-if="!isMobile" rel="tooltip" title="顶部俯视" id="gui-modes-floorplan" data-original-title="俯视图">
               <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">热点列表</div>
-              <img src="../../assets/img/hot.png" alt="" />
-            </div>
-
-            <div data-original-title="VR" id="vr" rel="tooltip" title="" style="display: none">
-              <img class="icon icon-inside" :src="require('@/assets/images/VR.png')" />
-            </div>
-            <div data-original-title="消除外壳" id="gui-remove-face" rel="tooltip" title="" style="display: none; float: left">
-              <img class="icon icon-inside" :src="require('@/assets/images/face.jpg')" />
+              <div class="hoverTit" v-if="!isFullscreen">全屏</div>
+              <div class="hoverTit" v-else>退出全屏</div>
+              <img class="icon icon-inside" :src="require(`@/assets/image/icon/icon_screen${isFullscreen ? '_active' : '_normal'}.png`)" />
             </div>
           </div>
         </div>
@@ -107,14 +98,14 @@
         </div>
 
         <!-- 回到pc页面（首页） -->
-        <div class="toHomeBox" @click="toHomeFu">
+        <div v-show="false" class="toHomeBox" @click="toHomeFu">
           <!-- 鼠标移入的显示 -->
           <div class="hoverTit">回到首页</div>
           <img src="../../assets/img/toHome.png" alt="" />
         </div>
 
         <!-- vr -->
-        <div class="toHomeBox" @click="openVR">
+        <div v-show="false" class="toHomeBox" @click="openVR">
           <!-- 鼠标移入的显示 -->
           <div class="hoverTit">VR</div>
           <img src="../../assets/img/openVR.png" alt="" />
@@ -130,7 +121,7 @@
           </div>
         </div>
         <!-- 分享 -->
-        <div class="toHomeBox" @click="openInd = 2">
+        <div v-show="false" class="toHomeBox" @click="openInd = 2">
           <!-- 鼠标移入的显示 -->
           <div class="hoverTit">分享</div>
           <img src="../../assets/img/share.png" alt="" />
@@ -138,11 +129,15 @@
       </div>
     </div>
 
-    <div class="openBox" :class="{ openBoxAc: openInd }">
+    <!-- <div class="openBox" :class="{ openBoxAc: openInd }">
       <HotList v-if="openInd === 1" @close="openInd = 0" />
       <Share v-show="openInd === 2" @close="openInd = 0" :openInd="openInd" />
-    </div>
+    </div> -->
     <!-- 手动触发导览 -->
+
+    <transition name="slide" appear>
+      <HotList v-if="openInd === 1" @close="openInd = 0" />
+    </transition>
   </div>
 </template>
 
@@ -161,12 +156,52 @@ export default {
       musicState: false,
       // vr---热点列表---分享
       openInd: 0,
+      isFullscreen: false,
     };
   },
   watch: {},
   computed: {},
-  mounted() {},
+  mounted() {
+    let events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
+    events.forEach((item, index) => {
+      window.addEventListener(item, () => {
+        this.isFullscreen = !this.isFullscreen;
+      });
+    });
+  },
   methods: {
+    openTags() {
+      if (this.openInd) {
+        this.openInd = 0;
+      } else {
+        this.openInd = 1;
+      }
+    },
+    onFullScreen() {
+      let element = document.documentElement;
+      if (this.isFullscreen) {
+        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) {
+          element.msRequestFullscreen();
+        }
+      }
+      // 改变当前全屏状态
+    },
     switchBGM(flag) {
       this.musicState = flag;
       if (flag) {
@@ -228,7 +263,7 @@ export default {
   height: 37px;
   line-height: 30px;
   text-align: center;
-  background: url("../../assets/img/hoverTit.png");
+  background: url("../../assets/image/img_tip.png");
   background-size: 100% 100%;
   font-size: 14px;
   color: #fff;
@@ -266,8 +301,8 @@ export default {
 }
 
 // 右侧菜单栏
-@wh: 44px;
-@margin: 0px;
+@wh: 72px;
+@margin: 21px;
 #play,
 #pause {
   margin-right: @margin;
@@ -279,6 +314,7 @@ export default {
 .rightViewContainer {
   display: flex !important;
   align-items: center !important;
+  padding-right: 30px;
 }
 #gui-modes-map {
   > div {
@@ -371,17 +407,20 @@ export default {
     pointer-events: auto;
   }
 }
-
+.viewContainer {
+  padding: 10px 20px 0 34px;
+}
 // 移动端
 @media screen and (max-width: 1000px) {
   .hoverTit {
     opacity: 0 !important;
   }
   .viewContainer {
+    padding: 10px 20px 10px 10px;
     & > div {
       img {
-        width: 33px !important;
-        height: 33px !important;
+        width: 40px !important;
+        height: 40px !important;
       }
     }
   }
@@ -402,10 +441,15 @@ export default {
           width: 50px !important;
           text-align: right;
           margin-right: 0;
-          margin-bottom: 10px;
+          // margin-bottom: 10px;
           & > div {
-            display: flex;
-            justify-content: flex-end;
+            // display: flex;
+            // justify-content: flex-end;
+          }
+          .container{
+            right: auto;
+            left: 50% !important;
+            top: -68px;
           }
           img {
             width: 33px;
@@ -436,4 +480,18 @@ export default {
 .pinBottom.open #myClickBox {
   bottom: calc(118px + 20px);
 }
+/* 进入的起点、离开的终点 */
+.slide-enter,
+.slide-leave-to {
+  transform: translateX(100%);
+}
+.slide-enter-active,
+.slide-leave-active {
+  transition: 0.5s linear;
+}
+/* 进入的终点、离开的起点 */
+.hello-enter-to,
+.slide-leave {
+  transform: translateX(0);
+}
 </style>

scene/src/views/gui/menu old.vue

@@ -0,0 +1,439 @@
+<template>
+  <div class="pinBottom-container" @touchstart.stop @keydown.stop>
+    <div class="pinBottom center">
+      <div id="view-controllers"></div>
+    </div>
+    <div class="pinBottom left">
+      <div v-if="isMobile" id="myClickBox" style="">
+        <div id="go" />
+        <div id="back" />
+      </div>
+
+      <div>
+        <div class="viewContainer">
+          <div id="previous" class="previous desktop-only ui-icon" style="display: none">
+            <a>
+              <img rel="tooltip" title="" :src="require('@/assets/images/play.png')" width="24" height="24" data-original-title="播放" />
+            </a>
+          </div>
+          <div id="play" class="ui-icon" rel="tooltip" data-original-title="播放">
+            <!-- 鼠标移入的显示 -->
+            <div class="hoverTit">自动导览</div>
+            <a>
+              <img :src="require('@/assets/images/icon/play.png')" width="24" height="24" />
+            </a>
+          </div>
+          <div id="pause" class="ui-icon" style="display: none">
+            <!-- 鼠标移入的显示 -->
+            <div class="hoverTit">自动导览</div>
+
+            <a>
+              <img rel="tooltip" title="" :src="require('@/assets/images/icon/pause.png')" width="24" height="24" data-original-title="暂停" />
+            </a>
+          </div>
+          <div id="next" class="next desktop-only ui-icon wide" style="display: none">
+            <a>
+              <i rel="tooltip" title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
+            </a>
+          </div>
+          <div id="gui-modes-map" class="ui-icon double active">
+            <div data-original-title="导览" @click="isGuide = !isGuide" id="pullTab" rel="tooltip" title="场景导览">
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">导览列表</div>
+
+              <img title="" class="icon icon-inside" :src="require(`@/assets/images/icon/auto${!isGuide ? '_active' : ''}.png`)" />
+            </div>
+
+            <div data-original-title="全景漫游" id="gui-modes-inside" rel="tooltip">
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">全景漫游</div>
+
+              <img class="icon icon-inside" :src="require('@/assets/images/icon/inside.png')" />
+              <img class="icon icon-inside active" :src="require('@/assets/images/icon/inside_active.png')" />
+            </div>
+            <div title="迷你漫游" data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip">
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">三维视觉</div>
+              <img class="icon icon-inside" :src="require('@/assets/images/icon/dollhouse.png')" />
+              <img class="icon icon-inside active" :src="require('@/assets/images/icon/dollhouse_active.png')" />
+            </div>
+            <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="顶部俯视">
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">平面视觉</div>
+              <img class="icon icon-inside" :src="require('@/assets/images/icon/floor.png')" />
+              <img class="active icon icon-inside active" :src="require('@/assets/images/icon/floor_active.png')" />
+            </div>
+
+            <!-- 热点列表 -->
+            <div v-show="!hideTools" id="myHotList" @click="openInd = 1">
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">热点列表</div>
+              <img src="../../assets/img/hot.png" alt="" />
+            </div>
+
+            <div data-original-title="VR" id="vr" rel="tooltip" title="" style="display: none">
+              <img class="icon icon-inside" :src="require('@/assets/images/VR.png')" />
+            </div>
+            <div data-original-title="消除外壳" id="gui-remove-face" rel="tooltip" title="" style="display: none; float: left">
+              <img class="icon icon-inside" :src="require('@/assets/images/face.jpg')" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-show="!hideTools" class="pinBottom right hideTarget">
+      <div class="rightViewContainer clearfix">
+        <div class="gui-floor">
+          <div class="gui-floor-title"></div>
+          <div class="gui-floor-icon">
+            <span class="gui-floor-number"></span>
+          </div>
+          <div class="container"></div>
+        </div>
+
+        <div id="vr" class="ui-icon wide hidden" style="display: none">
+          <a>
+            <i rel="tooltip" title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
+          </a>
+        </div>
+        <div id="sharing" class="ui-icon wide hidden" style="display: none">
+          <a>
+            <i rel="tooltip" title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
+          </a>
+        </div>
+        <div class="pull-right terms terms2">
+          <a>{[{ TERMS }]}</a>
+        </div>
+
+        <!-- 回到pc页面（首页） -->
+        <div class="toHomeBox" @click="toHomeFu">
+          <!-- 鼠标移入的显示 -->
+          <div class="hoverTit">回到首页</div>
+          <img src="../../assets/img/toHome.png" alt="" />
+        </div>
+
+        <!-- vr -->
+        <div class="toHomeBox" @click="openVR">
+          <!-- 鼠标移入的显示 -->
+          <div class="hoverTit">VR</div>
+          <img src="../../assets/img/openVR.png" alt="" />
+        </div>
+
+        <!-- 音乐 -->
+        <div id="volume" class="ui-icon bgandshare wide">
+          <!-- 鼠标移入的显示 -->
+          <div class="hoverTit">{{ musicState ? "关闭" : "打开" }}音乐</div>
+          <div>
+            <img id="openMusic" style="display: block" @click="switchBGM(true)" src="../../assets/img/musicAc.png" alt="" />
+            <img id="closeMusic" style="display: none" @click="switchBGM(false)" src="../../assets/img/music.png" alt="" />
+          </div>
+        </div>
+        <!-- 分享 -->
+        <div class="toHomeBox" @click="openInd = 2">
+          <!-- 鼠标移入的显示 -->
+          <div class="hoverTit">分享</div>
+          <img src="../../assets/img/share.png" alt="" />
+        </div>
+      </div>
+    </div>
+
+    <div class="openBox" :class="{ openBoxAc: openInd }">
+      <HotList v-if="openInd === 1" @close="openInd = 0" />
+      <Share v-show="openInd === 2" @close="openInd = 0" :openInd="openInd" />
+    </div>
+    <!-- 手动触发导览 -->
+  </div>
+</template>
+
+<script>
+import HotList from "./components/hotList.vue";
+import Share from "./components/share.vue";
+
+export default {
+  components: { HotList, Share },
+  props: {
+    hideTools: Boolean,
+  },
+  data() {
+    return {
+      isGuide: true,
+      musicState: false,
+      // vr---热点列表---分享
+      openInd: 0,
+    };
+  },
+  watch: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    switchBGM(flag) {
+      this.musicState = flag;
+      if (flag) {
+        window.manage.switchBgmState(true);
+        document.querySelector("#openMusic").style.display = "none";
+        document.querySelector("#closeMusic").style.display = "block";
+
+        // 手动停止自动导览
+        window.player.director.stopTour();
+      } else {
+        window.manage.switchBgmState(false);
+        document.querySelector("#openMusic").style.display = "block";
+        document.querySelector("#closeMusic").style.display = "none";
+      }
+    },
+    // 点击vr
+    openVR() {
+      window.open("https://www.720yun.com/t/acvkiwdegqb?scene_id=34882556");
+    },
+    // 点击回到首页
+    toHomeFu() {
+      this.switchBGM(false);
+      this.$emit("toHome");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+::-webkit-scrollbar {
+  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+}
+::-webkit-scrollbar-thumb {
+  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #edd3b0;
+  border-color: #edd3b0;
+  color: #edd3b0;
+  outline: none;
+}
+// 鼠标移入显示的文字和图片
+#gui-modes-inside {
+  position: relative;
+}
+#gui-modes-dollhouse {
+  position: relative;
+}
+#gui-modes-floorplan {
+  position: relative;
+}
+.hoverTit {
+  pointer-events: none;
+  transition: all 0.5s;
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -40px;
+  width: 80px;
+  height: 37px;
+  line-height: 30px;
+  text-align: center;
+  background: url("../../assets/img/hoverTit.png");
+  background-size: 100% 100%;
+  font-size: 14px;
+  color: #fff;
+}
+#play:hover {
+  .hoverTit {
+    opacity: 1;
+  }
+}
+#pause:hover {
+  .hoverTit {
+    opacity: 1;
+  }
+}
+#gui-modes-map > div:hover {
+  .hoverTit {
+    opacity: 1;
+  }
+}
+#volume {
+  margin-right: 16px;
+}
+#volume,
+#gui-fullscreen,
+#gui-fullscreen-exit {
+  position: relative;
+  .hoverTit {
+    width: 70px;
+  }
+  &:hover {
+    .hoverTit {
+      opacity: 1;
+    }
+  }
+}
+
+// 右侧菜单栏
+@wh: 44px;
+@margin: 0px;
+#play,
+#pause {
+  margin-right: @margin;
+  img {
+    width: @wh;
+    height: @wh;
+  }
+}
+.rightViewContainer {
+  display: flex !important;
+  align-items: center !important;
+}
+#gui-modes-map {
+  > div {
+    margin-right: @margin;
+    > img {
+      width: @wh;
+      height: @wh;
+      display: block !important;
+    }
+    .active {
+      display: none !important;
+    }
+  }
+  .active {
+    > img {
+      display: none !important;
+    }
+    .active {
+      display: block !important;
+    }
+  }
+}
+
+.pinBottom.right .ui-icon {
+  background: none;
+}
+
+#gui-fullscreen img {
+  width: 44px;
+}
+#volume {
+  width: 44px;
+}
+
+#gui-fullscreen-exit img {
+  width: 44px !important;
+}
+.bgandshare {
+  background: none !important;
+  // margin-right: 20px!important;
+  > div {
+    width: 100%;
+    cursor: pointer;
+    img {
+      width: 100%;
+    }
+  }
+}
+
+.toHomeBox {
+  margin-right: 20px;
+  cursor: pointer;
+  position: relative;
+  width: 44px;
+  img {
+    width: 44px;
+  }
+  &:hover {
+    .hoverTit {
+      opacity: 1;
+    }
+  }
+}
+
+.pinBottom-container {
+  #myHotList {
+    position: relative;
+    float: left;
+    width: 70px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .openBox {
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // background-color: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(10px);
+  }
+  .openBoxAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+// 移动端
+@media screen and (max-width: 1000px) {
+  .hoverTit {
+    opacity: 0 !important;
+  }
+  .viewContainer {
+    & > div {
+      img {
+        width: 33px !important;
+        height: 33px !important;
+      }
+    }
+  }
+  .pinBottom-container #myHotList {
+    width: 50px;
+    margin-bottom: 15px;
+  }
+
+  .pinBottom-container {
+    .pinBottom.right.hideTarget {
+      position: fixed;
+      top: 200px;
+      right: 10px;
+      .rightViewContainer {
+        flex-direction: column;
+        & > div,
+        #volume {
+          width: 50px !important;
+          text-align: right;
+          margin-right: 0;
+          margin-bottom: 10px;
+          & > div {
+            display: flex;
+            justify-content: flex-end;
+          }
+          img {
+            width: 33px;
+            height: 33px;
+          }
+        }
+      }
+    }
+  }
+}
+#myClickBox {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  z-index: 999;
+  left: 50%;
+  bottom: 38px;
+  width: 146px;
+  height: 146px;
+  transform: translateX(-50%);
+  background: url("../../assets/img/m_btn.png") no-repeat center / contain;
+  transition: 0.2s bottom linear;
+
+  > div {
+    flex: 1;
+  }
+}
+.pinBottom.open #myClickBox {
+  bottom: calc(118px + 20px);
+}
+</style>

scene/src/views/gui/menu.vue

@@ -8,9 +8,8 @@
         <div id="go" />
         <div id="back" />
       </div> -->
-
       <div>
-        <div class="viewContainer">
+        <div class="viewContainer" style="display: none !important">
           <div id="previous" class="previous desktop-only ui-icon" style="display: none">
             <a>
               <img rel="tooltip" title="" :src="require('@/assets/images/play.png')" width="24" height="24" data-original-title="播放" />
@@ -43,19 +42,19 @@
 
               <img title="" class="icon icon-inside" :src="require(`@/assets/image/icon/icon_point${!isGuide ? '_active' : '_normal'}.png`)" />
             </div>
-
-            <!-- 热点列表 -->
-            <div v-show="!hideTools" id="myHotList" @click="openTags">
-              <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">热点列表</div>
-              <img :src="require(`@/assets/image/icon/icon_detail${openInd == 1 ? '_active' : '_normal'}.png`)" alt="" />
-            </div>
             <div title="迷你漫游" data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip">
               <!-- 鼠标移入的显示 -->
               <div class="hoverTit">三维模型</div>
               <img class="icon icon-inside" :src="require('@/assets/image/icon/icon_dollhouse_normal.png')" />
               <img class="icon icon-inside active" :src="require('@/assets/image/icon/icon_dollhouse_active.png')" />
             </div>
+            <!-- 热点列表 -->
+            <div v-show="!hideTools" id="myHotList" @click="openTags">
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">热点列表</div>
+              <img :src="require(`@/assets/image/icon/icon_detail${openInd == 1 ? '_active' : '_normal'}.png`)" alt="" />
+            </div>
+
             <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="顶部俯视">
               <!-- 鼠标移入的显示 -->
               <div class="hoverTit">俯视平面</div>
@@ -75,7 +74,8 @@
 
     <div v-show="!hideTools" class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
-        <div class="gui-floor">
+        <!-- 楼层，内外 -->
+        <div class="gui-floor" v-show="false">
           <div class="gui-floor-title"></div>
           <div class="gui-floor-icon">
             <span class="gui-floor-number"></span>
@@ -136,27 +136,117 @@
     <!-- 手动触发导览 -->
 
     <transition name="slide" appear>
-      <HotList v-if="openInd === 1" @close="openInd = 0" />
+      <HotList v-if="openType === 'hots'" @close="openType = null" />
+    </transition>
+
+    <!-- 小地图控制按钮 -->
+    <div class="minimap-controls" :class="{ open: !miniMapStatus }" @click="toggleMiniMap"></div>
+    <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
+      <div v-show="openType != 'immersive'" class="new-btn">
+        <div class="button-item" :class="getActive(i.type)" v-for="(i, index) in leftButtons" @click.stop="hanlderButtons(i, i.type)">
+          <img class="normal" :src="i.normalIcon" alt="" />
+          <img class="active" :src="i.activeIcon" alt="" />
+          <div class="tip-box">{{ i.name }}</div>
+        </div>
+      </div>
+    </transition>
+    <div class="kanzhan-btns">
+      <transition name="preScene">
+        <div v-show="openType == 'immersive'" class="button-item">
+          <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_pre.png')" alt="" />
+        </div>
+      </transition>
+      <transition name="activeScene">
+        <div v-show="openType == 'immersive'" class="button-item" @click="openType = null">
+          <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_mod_active.png')" alt="" />
+        </div>
+      </transition>
+      <transition name="nextScene">
+        <div v-show="openType == 'immersive'" class="button-item">
+          <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_next.png')" alt="" />
+        </div>
+      </transition>
+    </div>
+    <transition name="tour">
+      <TourList :tourList="tourList" v-if="openType == 'tour'" @close="openType = null"> </TourList>
+    </transition>
+    <transition name="fade" enter-active-class="animate__animated animate__fadeIn animate__faster" leave-active-class="animate__animated animate__fadeOut animate__faster">
+      <LayerMap v-if="openType == 'map'" @close="openType = null"> </LayerMap>
     </transition>
   </div>
 </template>
 
 <script>
 import HotList from "./components/hotList.vue";
+import TourList from "./components/tourList.vue";
+import LayerMap from "./components/layerMap.vue";
 import Share from "./components/share.vue";
-
+import { directive } from "vue-awesome-swiper";
+import "swiper/css/swiper.css";
 export default {
-  components: { HotList, Share },
+  components: { HotList, TourList, LayerMap, Share },
+  directives: {
+    swiper: directive,
+  },
   props: {
     hideTools: Boolean,
   },
   data() {
     return {
+      miniMapStatus: true,
+      isRoute: true,
+
+      tourList: [],
+      openType: null,
       isGuide: true,
       musicState: false,
       // vr---热点列表---分享
       openInd: 0,
       isFullscreen: false,
+      leftButtons: [
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_dollhouse.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_dollhouse_active.png"),
+          name: "3d模型",
+          type: "model",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_map.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_map_active.png"),
+          name: "导航地图",
+          type: "map",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_point.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_point_active.png"),
+          name: "重点展位",
+          type: "tour",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_detail.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_detail_active.png"),
+          name: "热点列表",
+          type: "hots",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_line.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_line_active.png"),
+          name: "展览路线",
+          type: "route",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_screen.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_screen_active.png"),
+          name: "全屏",
+          type: "fullScreen",
+        },
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_mod.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_mod_active.png"),
+          name: "沉浸看展",
+          type: "immersive",
+        },
+      ],
     };
   },
   watch: {},
@@ -168,8 +258,78 @@ export default {
         this.isFullscreen = !this.isFullscreen;
       });
     });
+
+    // this.tourList = window.player ? player?.model?.heroLocations : [];
   },
   methods: {
+    toggleMiniMap() {
+      this.miniMapStatus = !this.miniMapStatus;
+      if (this.miniMapStatus) {
+        $(".cad").addClass("scale-open");
+        $(".cad").removeClass("scale-close");
+      } else {
+        $(".cad").addClass("scale-close");
+        $(".cad").removeClass("scale-open");
+      }
+    },
+
+    hanlderButtons(item, type) {
+      if (!["route", "fullScreen"].includes(type)) {
+        if (this.openType != type) {
+          this.openType = type;
+        } else {
+          this.openType = null;
+        }
+      }
+
+      switch (item.type) {
+        case "map":
+          break;
+        case "tour":
+          if (!this.tourList.length) {
+            this.tourList = window.player ? player?.model?.heroLocations : [];
+          }
+          break;
+        case "route":
+          this.isRoute = !this.isRoute;
+          break;
+        case "fullScreen":
+          this.onFullScreen();
+          break;
+      }
+    },
+    getActive(item) {
+      switch (item) {
+        case "model":
+          // return "active";
+          break;
+
+        case "map":
+          if (this.openType == "map") {
+            return "active";
+          }
+          break;
+        case "tour":
+          if (this.openType == "tour") {
+            return "active";
+          }
+          break;
+        case "route":
+          if (this.isRoute) {
+            return "active";
+          }
+          break;
+        case "hots":
+          if (this.openType == "hots") {
+            return "active";
+          }
+        case "fullScreen":
+          if (this.isFullscreen) {
+            return "active";
+          }
+          break;
+      }
+    },
     openTags() {
       if (this.openInd) {
         this.openInd = 0;
@@ -410,6 +570,102 @@ export default {
 .viewContainer {
   padding: 10px 20px 0 34px;
 }
+@iconW: 56px;
+@icomarginRight: 25px;
+.minimap-controls {
+  width: 30px;
+  height: 30px;
+  background: url(../../assets/image/icon/new-icon/icon_mini.png) no-repeat;
+  background-size: 100%;
+  border-radius: 0px 0px 0px 0px;
+  position: fixed;
+  top: 25px;
+  right: 25px;
+  cursor: pointer;
+  &.open {
+    background: url(../../assets/image/icon/new-icon/icon_scale.png) no-repeat;
+    background-size: 100%;
+  }
+}
+
+.new-btn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: absolute;
+  left: 44px;
+  bottom: 40px;
+  .button-item {
+    width: @iconW;
+    height: @iconW;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: @icomarginRight;
+    cursor: pointer;
+    position: relative;
+    .tip-box {
+      display: none;
+      position: absolute;
+      top: -38px;
+      left: 50%;
+      transform: translateX(-50%);
+      white-space: nowrap;
+      height: 29px;
+      color: #fff;
+      text-align: center;
+      line-height: 29px;
+      background: rgba(55, 54, 53, 0.6);
+      border: 1px solid #fff;
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      padding: 0 8px;
+    }
+    .active {
+      display: none;
+    }
+    &:hover {
+      .normal {
+        display: none;
+      }
+      .active {
+        display: block;
+      }
+      .tip-box {
+        display: block;
+      }
+    }
+    &.active {
+      .normal {
+        display: none;
+      }
+      .active {
+        display: block;
+      }
+    }
+  }
+}
+.kanzhan-btns {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: absolute;
+  left: 450px;
+  bottom: 40px;
+  .button-item {
+    width: @iconW;
+    height: @iconW;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 25px;
+    cursor: pointer;
+    position: relative;
+  }
+}
+
 // 移动端
 @media screen and (max-width: 1000px) {
   .hoverTit {
@@ -446,7 +702,7 @@ export default {
             // display: flex;
             // justify-content: flex-end;
           }
-          .container{
+          .container {
             right: auto;
             left: 50% !important;
             top: -68px;
@@ -494,4 +750,78 @@ export default {
 .slide-leave {
   transform: translateX(0);
 }
+
+/* 进入的起点、离开的终点 */
+.preScene-enter,
+.preScene-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+.preScene-enter-active,
+.preScene-leave-active {
+  transition: 0.3s linear;
+}
+/* 进入的终点、离开的起点 */
+.preScene-enter-to,
+.preScene-leave {
+  transform: translateX(0);
+  opacity: 1;
+}
+.nextScene-enter,
+.nextScene-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.nextScene-enter-active,
+.nextScene-leave-active {
+  transition: 0.3s linear;
+}
+/* 进入的终点、离开的起点 */
+.nextScene-enter-to,
+.nextScene-leave {
+  transform: translateX(0);
+  opacity: 1;
+}
+.activeScene-enter,
+.activeScene-leave-to {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+.activeScene-enter-active,
+.activeScene-leave-active {
+  transition: 0.3s linear;
+}
+/* 进入的终点、离开的起点 */
+.activeScene-enter-to,
+.activeScene-leave {
+  transform: translateX(0);
+  opacity: 1;
+}
+.tour-enter,
+.tour-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+.tour-enter-active,
+.tour-leave-active {
+  transition: 0.3s linear;
+}
+/* 进入的终点、离开的起点 */
+.tour-enter-to,
+.tour-leave {
+  transform: translateX(0);
+  opacity: 1;
+}
+</style>
+<style>
+.scale-close {
+  transition: transform 0.3s;
+  transform: scale(0);
+  transform-origin: 90% 10%;
+}
+.scale-open {
+  transition: transform 0.3s;
+  transform: scale(1);
+  transform-origin: 80% 20%;
+}
 </style>