移动端 模式切换菜单

src/assets/style/public.less

@@ -92,7 +92,7 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
   }
 }
 
-.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'] {
+.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'], .mobile[view-mode='transitioning'] {
   .cad {
     display: none;
   }

src/pages/Home.vue

@@ -35,6 +35,11 @@
           安徽省纪录小康工程数据库云展馆
         </h1>
 
+        <ModeSelectorMobile
+          v-if="isMobile"
+          class="mode-selector-mobile"
+        />
+
         <!-- 底部菜单 -->
         <v-menu />
 
@@ -93,7 +98,8 @@ import guimsg from "@/views/gui/guimsg";
 import vError from "@/views/gui/error";
 import vrCon from "@/views/gui/vrcon";
 import vOther from "@/views/gui/other";
-import MiniMapDecorator from "@/components/MiniMapDecorator.vue";
+import MiniMapDecorator from "@/views/gui/MiniMapDecorator.vue";
+import ModeSelectorMobile from "@/views/gui/ModeSelectorMobile.vue";
 
 export default {
   name: "Home",
@@ -110,6 +116,7 @@ export default {
     vrCon,
     vOther,
     MiniMapDecorator,
+    ModeSelectorMobile,
   },
 
   data() {
@@ -171,6 +178,13 @@ export default {
         color: #FFFFFF;
         padding: 9px 29px;
       }
+      > .mode-selector-mobile {
+        position: absolute;
+        z-index: 1;
+        top: 17px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
     }
   }
 }
@@ -179,9 +193,14 @@ export default {
   transition: all 0.3s;
 }
 
-.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'] {
+.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'], .mobile[view-mode='transitioning'] {
   .mini-map-decorator {
     display: none;
   }
 }
+.mobile[view-mode='panorama'], .mobile[view-mode='outside'] {
+  .mode-selector-mobile {
+    display: none;
+  }
+}
 </style>

src/views/gui/ModeSelectorMobile.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="mode-selector-mobile">
+    <button
+      @click="onClickQuanjingmanyou"
+    >
+      <img
+        class="manyou"
+        src="@/assets/images/quanjingmanyou-sub.png"
+        alt=""
+        draggable="false"
+      >
+      <span>漫游</span>
+    </button>
+    <button
+      @click="onClickDingbufushi"
+    >
+      <img
+        class="pingmian"
+        src="@/assets/images/dingbufushi-mobile.png"
+        alt=""
+        draggable="false"
+      >
+      <span>平面</span>
+    </button>
+    <button
+      @click="onClickMinimoxing"
+    >
+      <img
+        class="sanwei"
+        src="@/assets/images/minimoxing-mobile.png"
+        alt=""
+        draggable="false"
+      >
+      <span>三维</span>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    onClickQuanjingmanyou(e) {
+      document.onMousedownInside(e)
+    },
+    onClickMinimoxing(e) {
+      document.onClickDollHouse(e)
+    },
+    onClickDingbufushi(e) {
+      document.onClickFloorPlain(e)
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.mode-selector-mobile {
+  padding: 3px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 5px 5px 5px 5px;
+  display: flex;
+  align-items: center;
+  > button {
+    width: 75px;
+    height: 37px;
+    // background: rgba(161,14,12,0.7);
+    border-radius: 2px 2px 2px 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    > img.manyou {
+      width: 8px;
+      height: 20px;
+      margin-right: 6px;
+    }
+    > img.pingmian {
+      width: 19px;
+      height: 19px;
+      margin-right: 4px;
+    }
+    > img.sanwei {
+      width: 23px;
+      height: 22px;
+      margin-right: 4px;
+    }
+    > span {
+      font-size: 14px;
+      color: #FFF1BD;
+    }
+  }
+}
+
+.mobile[view-mode='panorama'] {
+  .mode-selector-mobile {
+    > button:nth-of-type(1) {
+      background: rgba(161,14,12,0.7);
+    }
+  }
+}
+.mobile[view-mode='floor-plain'] {
+  .mode-selector-mobile {
+    > button:nth-of-type(2) {
+      background: rgba(161,14,12,0.7);
+    }
+  }
+}
+.mobile[view-mode='doll-house'] {
+  .mode-selector-mobile {
+    > button:nth-of-type(3) {
+      background: rgba(161,14,12,0.7);
+    }
+  }
+}
+</style>