移动端 小地图

src/components/BottomBar.vue

@@ -172,6 +172,7 @@ export default {
   position: fixed;
   right: 0;
   bottom: 30px;
+  pointer-events: none;
   .normal-bar-wrap {
     &.collapsed {
       transform: translateY(calc(100% - 3.5rem));
@@ -198,6 +199,7 @@ export default {
     }
     > menu {
       > button {
+        pointer-events: initial;
         width: 50px;
         height: 50px;
         position: relative;
@@ -233,7 +235,26 @@ export default {
   }
 }
 
-
+.mobile {
+  .bottom-bar {
+    width: 50%;
+    .normal-bar-wrap {
+      > menu {
+        display: flex;
+        justify-content: space-around;
+        > button {
+          margin-right: initial;
+          &:hover {
+            opacity: 0.7;
+          }
+          &:active {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
 
 
 

src/main.js

@@ -27,7 +27,6 @@ console.log('user agent: ', uaInfo)
 Vue.prototype.$uaInfo = uaInfo
 if (uaInfo.device.type === 'mobile') {
   Vue.prototype.$isMobile = true
-  document.getElementById('app').classList.add('mobile')
 } else {
   Vue.prototype.$isMobile = false
 }
@@ -87,3 +86,8 @@ new Vue({
   store,
   render: h => h(App)
 }).$mount('#app')
+
+// 必须在vue根组件挂载之后执行
+if (Vue.prototype.$isMobile) {
+  document.getElementById('app').classList.add('mobile')
+}

src/views/SwkkView.vue

@@ -37,7 +37,7 @@
       <button
         id="tour-guide"
         :class="{active: isShowTourGuide}"
-        @click="onClickCjdl"
+        @click="onClickChangjingdaolan"
       >
         <img
           src="@/assets\images\swkk\changjingdaolan.png"
@@ -47,9 +47,10 @@
         <!-- <div>场景导览</div> -->
       </button>
       <button
+        v-if="!$isMobile"
         id="qjmy"
         :class="{active: mode === 2}"
-        @click="onClickQjmy"
+        @click="onClickQuanjingmanyou"
       >
         <img
           src="@/assets\images\swkk\quanjingmanyou.png"
@@ -59,9 +60,10 @@
         <!-- <div>全景漫游</div> -->
       </button>
       <button
+        v-if="!$isMobile"
         id="overlook"
         :class="{active: mode === 3}"
-        @click="onClickDbfs"
+        @click="onClickDingbufushi"
       >
         <img
           src="@/assets\images\swkk\dingbufushi.png"
@@ -71,9 +73,10 @@
         <!-- <div>顶部俯视</div> -->
       </button>
       <button
+        v-if="!$isMobile"
         id="mini-model"
         :class="{active: mode === 4}"
-        @click="onClickMnmx"
+        @click="onClickMinimoxing"
       >
         <img
           src="@/assets\images\swkk\minimoxing.png"
@@ -115,6 +118,37 @@
         alt=""
         draggable="false"
       >
+      <div class="selector">
+        <div
+          v-if="$isMobile"
+          class="bottom-bar"
+        >
+          <button
+            class="plain"
+            @click="onClickDingbufushi"
+          >
+            <img
+              class=""
+              src="@/assets/images/swkk/dingbufushi-mobile.png"
+              alt=""
+              draggable="false"
+            >
+            <span>平面</span>
+          </button>
+          <button
+            class="model"
+            @click="onClickMinimoxing"
+          >
+            <img
+              class=""
+              src="@/assets/images/swkk/minimoxing-mobile.png"
+              alt=""
+              draggable="false"
+            >
+            <span>三维</span>
+          </button>
+        </div>
+      </div>
     </div>
 
     <!-- 导览栏 -->
@@ -502,17 +536,17 @@ export default {
       let player = await this.kankan.TourManager.player
       player.pause()
     },
-    onClickCjdl() {
+    onClickChangjingdaolan() {
       this.isShowTourGuide = !this.isShowTourGuide
     },
-    onClickQjmy() {
+    onClickQuanjingmanyou() {
       this.kankan.Camera.panorama()
     },
-    onClickMnmx() {
+    onClickMinimoxing() {
       this.stopAutoMoving()
       this.kankan.Camera.dollhouse()
     },
-    onClickDbfs() {
+    onClickDingbufushi() {
       this.stopAutoMoving()
       this.kankan.Camera.floorplan()
     },
@@ -563,7 +597,6 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 0;
   }
 
   > h1 {
@@ -577,17 +610,17 @@ export default {
     font-size: 16px;
     color: #FFFFFF;
     padding: 9px 29px;
-
   }
 
   > menu {
     position: absolute;
     z-index: 1;
-    left: 30px;
     bottom: 30px;
     display: flex;
     align-items: center;
+    pointer-events: none;
     > button {
+      pointer-events: initial;
       margin-left: 30px;
       opacity: 0.7;
       &:hover {
@@ -630,6 +663,13 @@ export default {
     top: 10px;
     width: 254px;
     height: 18px;
+    > img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .tour-guide-wrap {
@@ -715,4 +755,88 @@ export default {
     height: 100%;
   }
 }
+
+.mobile {
+  .skww-view {
+    > menu {
+      width: 50%;
+      justify-content: space-around;
+      > button {
+        margin-left: initial;
+        &:hover {
+          opacity: 0.7;
+        }
+        &:active {
+          opacity: 1;
+        }
+      }
+    }
+
+    /deep/[xui_min_map] {
+      top: 25px;
+      right: 10px;
+      width: 160px;
+      height: 137px;
+      backdrop-filter: initial;
+      background: initial;
+    }
+    .mini-map {
+      position: absolute;
+      z-index: 9;
+      right: 5px;
+      top: 12px;
+      width: 170px;
+      height: calc(12px + 137px + 44px);
+      background: transparent;
+      > img {
+        height: 12px;
+      }
+      > .selector {
+        position: absolute;
+        left: 50%;
+        top: 12px;
+        transform: translateX(-50%);
+        width: 160px;
+        height: calc(137px + 44px);
+        background: rgba(86, 86, 86, 0.2);
+        backdrop-filter: blur(10px);
+        > .bottom-bar {
+          position: absolute;
+          left: 0;
+          bottom: 12px;
+          width: 100%;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          > button.plain {
+            display: flex;
+            align-items: center;
+            > img {
+              width: 19px;
+              height: 19px;
+              margin-right: 4px;
+            }
+            > span {
+              font-size: 16px;
+              color: #FFF0BD;
+            }
+          }
+          > button.model {
+            display: flex;
+            align-items: center;
+            > img {
+              width: 23px;
+              height: 22px;
+              margin-right: 4px;
+            }
+            > span {
+              font-size: 16px;
+              color: #FFF0BD;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>