|
@@ -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 {
|