|
|
@@ -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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
任一存
