大地图按钮位置和外观更新

src/pages/Home.vue

@@ -13,17 +13,7 @@
     <div id="player" />
 
     <MiniMapDecorator class="mini-map-decorator" />
-    <button
-      class="big-map"
-      @click="isShowBigMap = true"
-    >
-      <img
-        class=""
-        src="@/assets/images/floor.png"
-        alt=""
-        draggable="false"
-      >
-    </button>
+
     <BigMap
       v-show="isShowBigMap"
       @close="isShowBigMap = false"
@@ -63,7 +53,7 @@
         />
 
         <!-- 底部菜单 -->
-        <v-menu />
+        <v-menu @showBigMap="isShowBigMap = true" />
 
         <!-- 导览 -->
         <v-guide />
@@ -183,18 +173,6 @@ export default {
 <style lang="less" scoped>
 .mini-map-decorator {
 }
-button.big-map {
-  position: absolute;
-  top: 190px;
-  right: 30px;
-  z-index: 9998;
-  width: 50px;
-  height: 50px;
-}
-.mobile {
-  button.big-map {
-  }
-}
 
 .parent-body {
   position: relative;

src/views/gui/BigMap.vue

@@ -73,6 +73,7 @@ export default {
       const currentSceneCode = currentLocationQuerySection.get('m')
 
       if (currentSceneCode === '1300' && targetSceneCode === '1302') {
+        this.$emit('close')
         const iframeElem = document.createElement('iframe')
         iframeElem.style.position = 'absolute'
         iframeElem.style.top = '50%'

src/views/gui/menu.vue

@@ -6,38 +6,22 @@
     }"
   >
     <div class="pinBottom center">
-      <div id="view-controllers"></div>
+      <div id="view-controllers" />
     </div>
-    
+
     <div class="pinBottom left">
       <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')"
-                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/play.png')"
-              />
+              >
             </a>
           </div>
           <div
@@ -45,8 +29,6 @@
             class="ui-icon"
             style="display: none"
           >
-            <!-- 鼠标移入的显示 -->
-            <!-- <div class="hoverTit">自动导览</div> -->
             <a>
               <img
                 rel="tooltip"
@@ -54,33 +36,20 @@
                 :src="require('@/assets/images/pause.png')"
                 data-original-title="暂停"
                 :style="{opacity: '1',}"
-              />
+              >
             </a>
           </div>
-          <!-- <div
-            id="next"
-            class="next desktop-only ui-icon wide"
-            style="display: none"
+          <div
+            id="gui-modes-map"
+            class="ui-icon double active"
           >
-            <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"
+              data-original-title="导览"
               rel="tooltip"
               title="场景导览"
+              @click="isGuide = !isGuide"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">导览列表</div> -->
               <img
                 title=""
                 class="icon icon-inside"
@@ -88,87 +57,68 @@
                 :style="{
                   opacity: isGuide ? '1' : '',
                 }"
-              />
+              >
             </div>
 
             <div
               v-show="!isMobile"
-              data-original-title="全景漫游"
               id="gui-modes-inside"
+              data-original-title="全景漫游"
               rel="tooltip"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">自由漫游</div> -->
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/inside.png')"
-              />
+              >
             </div>
             <div
               v-show="!isMobile"
+              id="gui-modes-dollhouse"
               title="迷你模型"
               data-original-title="迷你模型"
-              id="gui-modes-dollhouse"
               rel="tooltip"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">三维视觉</div> -->
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/dollhouse.png')"
-              />
+              >
             </div>
             <div
               v-show="!isMobile"
-              data-original-title="俯视图"
               id="gui-modes-floorplan"
+              data-original-title="俯视图"
               rel="tooltip"
               title="顶部俯视"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">平面视觉</div> -->
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/floor.png')"
-              />
+              >
             </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
+              id="hotList"
               style="display: none;"
               data-original-title="热点列表"
-              id="hotList"
               rel="tooltip"
               title=""
             >
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/hotlist.png')"
-              />
+              >
             </div>
-            <!-- <div
-              data-original-title="消除外壳"
-              id="gui-remove-face"
-              rel="tooltip"
-              title=""
-              style="display: none; float: left"
+            <div
+              class="big-map"
+              @click="$emit('showBigMap')"
             >
               <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/face.jpg')"
-              />
-            </div> -->
+                class="icon icon-big-map"
+                src="@/assets/images/icon-big-map.png"
+                alt=""
+                draggable="false"
+              >
+            </div>
           </div>
         </div>
       </div>
@@ -186,22 +136,22 @@
             <img
               id="openMusic"
               style="display: block"
-              @click="switchBGM(true)"
               src="../../assets/images/music-muted.png"
               alt=""
               title="打开音乐"
-            />
+              @click="switchBGM(true)"
+            >
             <img
               id="closeMusic"
               style="display: none"
-              @click="switchBGM(false)"
               :style="{
                 opacity: '1',
               }"
               src="../../assets/images/music.png"
               alt=""
               title="关闭音乐"
-            />
+              @click="switchBGM(false)"
+            >
           </a>
         </div>
 
@@ -214,7 +164,10 @@
           title="全屏"
         >
           <a>
-            <img title="全屏" :src="require('@/assets/images/full.png')" />
+            <img
+              title="全屏"
+              :src="require('@/assets/images/full.png')"
+            >
           </a>
         </div>
 
@@ -231,13 +184,11 @@
             <img
               title="关闭全屏"
               :src="require('@/assets/images/fullAc.png')"
-            />
+            >
           </a>
         </div>
-        
       </div>
     </div>
-
   </div>
 </template>
 
@@ -247,27 +198,27 @@ export default {
   data() {
     return {
       isGuide: false,
-    };
+    }
   },
+  computed: {},
   watch: {
   },
-  computed: {},
   mounted() {
   },
   methods: {
     switchBGM(flag) {
       if (flag) {
-        window.manage.switchBgmState(true);
-        document.querySelector("#openMusic").style.display = "none";
-        document.querySelector("#closeMusic").style.display = "block";
+        window.manage.switchBgmState(true)
+        document.querySelector("#openMusic").style.display = "none"
+        document.querySelector("#closeMusic").style.display = "block"
       } else {
-        window.manage.switchBgmState(false);
-        document.querySelector("#openMusic").style.display = "block";
-        document.querySelector("#closeMusic").style.display = "none";
+        window.manage.switchBgmState(false)
+        document.querySelector("#openMusic").style.display = "block"
+        document.querySelector("#closeMusic").style.display = "none"
       }
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -282,50 +233,6 @@ export default {
   outline: none;
 }
 
-// ------tooltip相关--------------
-// #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: #fff6d2;
-// }
-// #play:hover {
-//   .hoverTit {
-//     opacity: 1;
-//   }
-// }
-// #pause:hover {
-//   .hoverTit {
-//     opacity: 1;
-//   }
-// }
-// #gui-modes-map > div:hover {
-//   .hoverTit {
-//     opacity: 1;
-//   }
-// }
-// -------end of tooltip相关--------------
-
 @wh: 50px;
 // ----------左下方菜单--------------
 .pinBottom.left {
@@ -350,10 +257,12 @@ export default {
       }
       #gui-modes-map {
         > div {
+          display: inline-block;
           margin-right: 30px;
           width: @wh;
           height: @wh;
           padding: 0;
+          cursor: pointer;
           > img {
             height: 100%;
             width: 100%;
@@ -402,7 +311,7 @@ export default {
 // ----------end of 右下方菜单---------------
 
 // -------------移动端特殊样式---------------
-@button-margin: calc((100vw - 50px * 4) / 5);
+@button-margin: calc((100vw - 50px * 5) / 6);
 .mobile {
   .pinBottom.left {
     > div {