各按钮外观

src/views/gui/menu.vue

@@ -27,28 +27,24 @@
               />
             </a>
           </div> -->
-          <div
+          <!-- <div
             id="play"
             class="ui-icon"
             rel="tooltip"
             data-original-title="播放"
           >
-            <!-- 鼠标移入的显示 -->
-            <!-- <div class="hoverTit">自动导览</div> -->
             <a>
               <img
                 :src="require('@/assets/images/auto-roaming-paused.png')"
                 draggable="false"
               >
             </a>
-          </div>
-          <div
+          </div> -->
+          <!-- <div
             id="pause"
             class="ui-icon"
             style="display: none"
           >
-            <!-- 鼠标移入的显示 -->
-            <!-- <div class="hoverTit">自动导览</div> -->
             <a>
               <img
                 rel="tooltip"
@@ -58,7 +54,7 @@
                 draggable="false"
               >
             </a>
-          </div>
+          </div> -->
           <!-- <div
             id="next"
             class="next desktop-only ui-icon wide"
@@ -74,114 +70,93 @@
               ></i>
             </a>
           </div> -->
+
           <div
-            id="gui-modes-map"
-            class="ui-icon double active"
+            id="gui-modes-inside"
+            data-original-title="全景漫游"
+            rel="tooltip"
           >
-            <div
-              id="pullTab"
-              data-original-title="导览"
-              rel="tooltip"
-              title="场景导览"
+            <img
+              draggable="false"
+              class="icon icon-inside active"
+              :src="require('@/assets/images/inside.png')"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">导览列表</div> -->
-              <img
-                v-if="isGuide"
-                draggable="false"
-                title=""
-                class="icon icon-inside"
-                src="@/assets/images/scenes-guide.png"
-              >
-              <img
-                v-if="!isGuide"
-                draggable="false"
-                title=""
-                class="icon icon-inside"
-                src="@/assets/images/scenes-guide-paused.png"
-              >
-            </div>
-
-            <div
-              id="gui-modes-inside"
-              data-original-title="全景漫游"
-              rel="tooltip"
+            <img
+              draggable="false"
+              class="icon icon-inside inactive"
+              :src="require('@/assets/images/inside-inactive.png')"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">自由漫游</div> -->
-              <img
-                draggable="false"
-                class="icon icon-inside active"
-                :src="require('@/assets/images/inside.png')"
-              >
-              <img
-                draggable="false"
-                class="icon icon-inside inactive"
-                :src="require('@/assets/images/inside-inactive.png')"
-              >
-            </div>
-            <div
-              id="gui-modes-dollhouse"
-              title="迷你模型"
-              data-original-title="迷你模型"
-              rel="tooltip"
+          </div>
+          <div
+            id="pullTab"
+            data-original-title="导览"
+            rel="tooltip"
+            title="场景导览"
+          >
+            <img
+              v-if="isGuide"
+              draggable="false"
+              title=""
+              class="icon icon-inside active"
+              src="@/assets/images/scenes-guide.png"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">三维视觉</div> -->
-              <img
-                draggable="false"
-                class="icon icon-inside active"
-                :src="require('@/assets/images/dollhouse.png')"
-              >
-              <img
-                draggable="false"
-                class="icon icon-inside inactive"
-                :src="require('@/assets/images/dollhouse-inactive.png')"
-              >
-            </div>
-            <div
-              id="gui-modes-floorplan"
-              data-original-title="俯视图"
-              rel="tooltip"
-              title="顶部俯视"
+            <img
+              v-if="!isGuide"
+              draggable="false"
+              title=""
+              class="icon icon-inside inactive"
+              src="@/assets/images/scenes-guide-paused.png"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">平面视觉</div> -->
-              <img
-                draggable="false"
-                class="icon icon-inside active"
-                :src="require('@/assets/images/floor.png')"
-              >
-              <img
-                draggable="false"
-                class="icon icon-inside inactive"
-                :src="require('@/assets/images/floor-inactive.png')"
-              >
-            </div>
-            <div
-              v-if="isMobile"
-              id="volume"
-              class="ui-icon wide"
-              title="音乐"
+          </div>
+          <div
+            id="hotList"
+            data-original-title="热点列表"
+            rel="tooltip"
+            title=""
+          >
+            <img
+              draggable="false"
+              class="icon icon-inside"
+              :src="require('@/assets/images/hotlist.png')"
             >
-              <img
-                id="openMusic"
-                style="display: block"
-                src="../../assets/images/music-muted.png"
-                alt=""
-                title="打开音乐"
-                @click="switchBGM(true)"
-              >
-              <img
-                id="closeMusic"
-                style="display: none"
-                src="../../assets/images/music.png"
-                alt=""
-                title="关闭音乐"
-                @click="switchBGM(false)"
-              >
-            </div>
-            <!-- <div
+          </div>
+          <div
+            id="gui-modes-dollhouse"
+            title="迷你模型"
+            data-original-title="迷你模型"
+            rel="tooltip"
+          >
+            <!-- 鼠标移入的显示 -->
+            <img
+              draggable="false"
+              class="icon icon-inside active"
+              :src="require('@/assets/images/dollhouse.png')"
+            >
+            <img
+              draggable="false"
+              class="icon icon-inside inactive"
+              :src="require('@/assets/images/dollhouse-inactive.png')"
+            >
+          </div>
+          <div
+            id="gui-modes-floorplan"
+            data-original-title="俯视图"
+            rel="tooltip"
+            title="顶部俯视"
+          >
+            <!-- 鼠标移入的显示 -->
+            <img
+              draggable="false"
+              class="icon icon-inside active"
+              :src="require('@/assets/images/floor.png')"
+            >
+            <img
+              draggable="false"
+              class="icon icon-inside inactive"
+              :src="require('@/assets/images/floor-inactive.png')"
+            >
+          </div>
+          <!-- <div
               data-original-title="VR"
               id="vr"
               rel="tooltip"
@@ -194,21 +169,7 @@
                 :src="require('@/assets/images/VR.png')"
               />
             </div> -->
-            <!-- 没有这个元素会导致报错 -->
-            <!-- <div
-              id="hotList"
-              style="display: none;"
-              data-original-title="热点列表"
-              rel="tooltip"
-              title=""
-            >
-              <img
-                draggable="false"
-                class="icon icon-inside"
-                :src="require('@/assets/images/hotlist.png')"
-              >
-            </div> -->
-            <!-- <div
+          <!-- <div
               data-original-title="消除外壳"
               id="gui-remove-face"
               rel="tooltip"
@@ -221,131 +182,14 @@
                 :src="require('@/assets/images/face.jpg')"
               />
             </div> -->
-          </div>
         </div>
       </div>
     </div>
 
     <div class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
-        <!-- <div
-          v-if="!isMobile"
-          class="ui-icon my-floor"
-          :class="{
-            active: currentSceneCode === '1265'
-          }"
-          @click="ChangeFloor('1265')"
-        >
-          <a>
-            <img
-              src="@/assets/images/floor-1.png"
-              alt=""
-              draggable="false"
-            >
-          </a>
-        </div>
-        <div
-          v-if="!isMobile"
-          class="ui-icon my-floor"
-          :class="{
-            active: currentSceneCode === '1263'
-          }"
-          @click="ChangeFloor('1263')"
-        >
-          <a>
-            <img
-              src="@/assets/images/floor-2.png"
-              alt=""
-              draggable="false"
-            >
-          </a>
-        </div>
-        <div
-          v-if="!isMobile"
-          class="ui-icon my-floor"
-          :class="{
-            active: currentSceneCode === '1264'
-          }"
-          @click="ChangeFloor('1264')"
-        >
-          <a>
-            <img
-              src="@/assets/images/floor-3.png"
-              alt=""
-              draggable="false"
-            >
-          </a>
-        </div> -->
-
-        <!-- <div
-          v-if="isMobile"
-          class="floor-selector-wrap"
-          :class="{
-            expanded: isSelectingFloor,
-          }"
-        >
-          <div
-            class="ui-icon floor-mobile"
-            :style="{
-              opacity: (currentSceneCode === '1265' || isSelectingFloor) ? '1' : '0',
-              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? '0' : 'calc(44px + 12px)',
-            }"
-            @click="onClickFloorBtnMobile('1265')"
-          >
-            <a>
-              <img
-                :class="{
-                  active: currentSceneCode === '1265'
-                }"
-                src="@/assets/images/floor-1.png"
-                alt=""
-                draggable="false"
-              >
-            </a>
-          </div>
-          <div
-            class="ui-icon floor-mobile"
-            :style="{
-              opacity: (currentSceneCode === '1263' || isSelectingFloor) ? '1' : '0',
-              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? 'calc(44px + 12px)' : currentSceneCode === '1263' ? '0' : 'calc(44px * 2 + 12px * 2)',
-            }"
-            @click="onClickFloorBtnMobile('1263')"
-          >
-            <a>
-              <img
-                :class="{
-                  active: currentSceneCode === '1263'
-                }"
-                src="@/assets/images/floor-2.png"
-                alt=""
-                draggable="false"
-              >
-            </a>
-          </div>
-          <div
-            class="ui-icon floor-mobile"
-            :style="{
-              opacity: (currentSceneCode === '1264' || isSelectingFloor) ? '1' : '0',
-              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? 'calc(44px * 2 + 12px * 2)' : currentSceneCode === '1263' ? 'calc(44px * 2 + 12px * 2)' : '0',
-            }"
-            @click="onClickFloorBtnMobile('1264')"
-          >
-            <a>
-              <img
-                :class="{
-                  active: currentSceneCode === '1264'
-                }"
-                src="@/assets/images/floor-3.png"
-                alt=""
-                draggable="false"
-              >
-            </a>
-          </div>
-        </div> -->
-
         <!-- 音乐 -->
         <div
-          v-if="!isMobile"
           id="volume"
           class="ui-icon wide"
           title="音乐"
@@ -371,8 +215,7 @@
         </div>
 
         <!-- 全屏 -->
-        <div
-          v-show="!isMobile"
+        <!-- <div
           id="gui-fullscreen"
           class="ui-icon wide"
           data-placement="top"
@@ -386,10 +229,10 @@
               draggable="false"
             >
           </a>
-        </div>
+        </div> -->
 
         <!-- 取消全屏 -->
-        <div
+        <!-- <div
           id="gui-fullscreen-exit"
           class="ui-icon wide"
           data-placement="top"
@@ -404,7 +247,7 @@
               draggable="false"
             >
           </a>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -416,8 +259,6 @@ export default {
   data() {
     return {
       isGuide: false,
-      isSelectingFloor: false,
-      floorBtnCollapseTimeoutId: null,
       mutationObserver: null,
     }
   },
@@ -427,16 +268,6 @@ export default {
     }
   },
   watch: {
-    isSelectingFloor: {
-      handler(vNew) {
-        clearTimeout(this.floorBtnCollapseTimeoutId)
-        if (vNew) {
-          this.floorBtnCollapseTimeoutId = setTimeout(() => {
-            this.isSelectingFloor = false
-          }, 2000)
-        }
-      }
-    }
   },
   mounted() {
     // 创建一个观察器实例并传入回调函数
@@ -472,22 +303,6 @@ export default {
         document.querySelector("#closeMusic").style.display = "none"
       }
     },
-    ChangeFloor(sceneCode) {
-      if (this.currentSceneCode !== sceneCode) {
-        const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
-        locationQuerySection.set('m', sceneCode)
-        const newLocation = location.href.split('?')[0] + '?' + locationQuerySection.toString()
-        location.assign(newLocation)
-        location.reload(true)
-      }
-    },
-    onClickFloorBtnMobile(floorCode) {
-      if (!this.isSelectingFloor) {
-      } else {
-        this.ChangeFloor(floorCode)
-      }
-      this.isSelectingFloor = !this.isSelectingFloor
-    },
   },
 }
 </script>
@@ -504,50 +319,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相关--------------
-
 @button-size: 47px;
 @margin-right: 15px;
 // ----------左下方菜单--------------
@@ -578,69 +349,74 @@ export default {
           width: 100%;
         }
       }
-      #gui-modes-map {
-        > div {
-          margin-right: @margin-right;
-          width: @button-size;
-          height: @button-size;
-          padding: 0;
-          > img {
-            height: 100%;
-            width: 100%;
-          }
+      > div {
+        margin-right: @margin-right;
+        width: @button-size;
+        height: @button-size;
+        padding: 0;
+        > img {
+          height: 100%;
+          width: 100%;
         }
-        > #pullTab {
-          > img {
-            display: block !important;
-          }
+      }
+      > #pullTab {
+        > img.inactive {
+          display: block !important;
+          opacity: 0.6;
         }
-        > #gui-modes-inside {
-          > img.active {
-            display: none;
-          }
-          > img.inactive {
-            display: block;
-          }
+        > img.active {
+          display: block !important;
         }
-        > #gui-modes-dollhouse {
-          > img.active {
-            display: none;
-          }
-          > img.inactive {
-            display: block;
-          }
+      }
+      > #gui-modes-inside {
+        > img.active {
+          display: none;
         }
-        > #gui-modes-floorplan {
-          > img.active {
-            display: none;
-          }
-          > img.inactive {
-            display: block;
-          }
+        > img.inactive {
+          display: block;
+          opacity: 0.6;
         }
-        > #gui-modes-inside.active {
-          > img.active {
-            display: block;
-          }
-          > img.inactive {
-            display: none;
-          }
+      }
+      > #gui-modes-dollhouse {
+        > img.active {
+          display: none;
         }
-        > #gui-modes-dollhouse.active {
-          > img.active {
-            display: block;
-          }
-          > img.inactive {
-            display: none;
-          }
+        > img.inactive {
+          display: block;
+          opacity: 0.6;
         }
-        > #gui-modes-floorplan.active {
-          > img.active {
-            display: block;
-          }
-          > img.inactive {
-            display: none;
-          }
+      }
+      > #gui-modes-floorplan {
+        > img.active {
+          display: none;
+        }
+        > img.inactive {
+          display: block;
+          opacity: 0.6;
+        }
+      }
+      > #gui-modes-inside.active {
+        > img.active {
+          display: block;
+        }
+        > img.inactive {
+          display: none;
+        }
+      }
+      > #gui-modes-dollhouse.active {
+        > img.active {
+          display: block;
+        }
+        > img.inactive {
+          display: none;
+        }
+      }
+      > #gui-modes-floorplan.active {
+        > img.active {
+          display: block;
+        }
+        > img.inactive {
+          display: none;
         }
       }
     }
@@ -680,12 +456,6 @@ export default {
         }
       }
     }
-    .ui-icon.my-floor {
-      opacity: 0.7;
-    }
-    .ui-icon.my-floor.active {
-      opacity: 1;
-    }
   }
 }
 // ----------end of 右下方菜单---------------
@@ -707,30 +477,28 @@ export default {
     > div {
       > .viewContainer {
         flex-direction: column;
-        margin-left: 14px;
-        margin-bottom: 34px;
+        margin-left: 3.6vw;
+        margin-bottom: 8.8vw;
+        padding: 1.3vw;
+        background: rgba(255,255,255,0.3);
+        border-radius: 0.9vw;
         #play,
         #pause,
-        #volume {
-          margin-top: 11px;
+        #gui-modes-inside,
+        #pullTab,
+        #hotList,
+        #gui-modes-dollhouse,
+        #gui-modes-floorplan {
+          margin-bottom: 5.3vw;
           margin-right: 0;
-          width: 40px;
-          height: 40px;
+          width: 8vw;
+          height: 8vw;
           img {
           }
         }
-        #gui-modes-map {
-          > div {
-            margin-top: 11px;
-            margin-right: 0;
-            width: 40px;
-            height: 40px;
-            > img {
-            }
-            &.active {
-              > img {
-              }
-            }
+        #gui-modes-floorplan {
+          margin-bottom: initial;
+          img {
           }
         }
       }
@@ -738,40 +506,38 @@ export default {
   }
 
   .pinBottom.right {
-    position: fixed;
-    top: 130px;
-    bottom: initial;
+    right: 0;
+    bottom: 0;
+    &.playing {
+      bottom: 20px !important;
+    }
+    &.open {
+      bottom: 137px !important;
+    }
+    &.open.playing {
+      bottom: 157px !important
+    }
     .rightViewContainer {
-      margin-right: 14px;
-      padding-bottom: 0;
+      margin-right: 3.6vw;
+      margin-bottom: 8.8vw;
+      padding: 1.3vw;
       flex-direction: column;
       align-items: flex-end !important;
-      > .floor-selector-wrap {
-        height: 44px;
-        width: 44px;
-        position: relative;
-        margin-bottom: 10.5px;
-        > .floor-mobile {
-          position: absolute;
-          top: 0;
-          right: 0;
-          opacity: 0;
-          transition: all 0.5s;
-        }
-        &.expanded {
-          width: calc(44px * 3 + 12px * 2);
-        }
-      }
+      background: rgba(255,255,255,0.3);
+      border-radius: 0.9vw;
       .ui-icon {
-        width: 44px;
-        height: 44px;
-        margin-bottom: 10.5px;
+        width: 8vw;
+        height: 8vw;
+        margin-bottom: 5.3vw;
         margin-left: initial;
         > a {
           > img {
           }
         }
       }
+      .ui-icon:last-of-type {
+        margin-bottom: 0;
+      }
     }
   }
 }