Просмотр исходного кода

移动端mode不是全景漫游时,显示一个小菜单

任一存 2 лет назад
Родитель
Сommit
0a1f5f742b
2 измененных файлов с 89 добавлено и 2 удалено
  1. BIN
      src/assets/images/swkk/quanjingmanyou-sub.png
  2. 89 2
      src/views/SwkkView.vue

BIN
src/assets/images/swkk/quanjingmanyou-sub.png


+ 89 - 2
src/views/SwkkView.vue

@@ -12,6 +12,7 @@
 
     <menu
       v-show="!($isMobile && mode !== 2)"
+      class="main-menu"
       :style="{
         bottom: isShowTourGuide ? 'calc(183px + 30px)' : '',
       }"
@@ -107,6 +108,48 @@
       </button> -->
     </menu>
 
+    <menu
+      v-show="$isMobile && mode !== 2"
+      class="mobile-sub-menu"
+    >
+      <button
+        :class="{active: mode === 2}"
+        @click="onClickQuanjingmanyou"
+      >
+        <img
+          class="manyou"
+          src="@/assets/images/swkk/quanjingmanyou-sub.png"
+          alt=""
+          draggable="false"
+        >
+        <span>漫游</span>
+      </button>
+      <button
+        :class="{active: mode === 3}"
+        @click="onClickDingbufushi"
+      >
+        <img
+          class="pingmian"
+          src="@/assets/images/swkk/dingbufushi-mobile.png"
+          alt=""
+          draggable="false"
+        >
+        <span>平面</span>
+      </button>
+      <button
+        :class="{active: mode === 4}"
+        @click="onClickMinimoxing"
+      >
+        <img
+          class="sanwei"
+          src="@/assets/images/swkk/minimoxing-mobile.png"
+          alt=""
+          draggable="false"
+        >
+        <span>三维</span>
+      </button>
+    </menu>
+
     <!-- 右上地图 -->
     <div
       v-show="!isLoading && mode === 2"
@@ -643,7 +686,7 @@ export default {
     padding: 9px 29px;
   }
 
-  > menu {
+  > menu.main-menu {
     position: absolute;
     z-index: 1;
     bottom: 30px;
@@ -677,6 +720,50 @@ export default {
     }
   }
 
+  > menu.mobile-sub-menu {
+    position: absolute;
+    z-index: 1;
+    top: 17px;
+    left: 50%;
+    transform: translateX(-50%);
+    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;
+      &.active {
+        background: rgba(161,14,12,0.7);
+      }
+      > 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;
+      }
+    }
+  }
+
   /deep/[xui_min_map] {
     top: 28px;
     right: 20px;
@@ -789,7 +876,7 @@ export default {
 
 .mobile {
   .skww-view {
-    > menu {
+    > menu.main-menu {
       width: 50%;
       justify-content: space-around;
       > button {