|
|
@@ -8,7 +8,7 @@
|
|
|
<template v-if="dataLoaded">
|
|
|
<Information v-if="!isshoppingguide" />
|
|
|
<Control />
|
|
|
- <teleport v-if="refMiniMap && player.showWidgets" :to="refMiniMap">
|
|
|
+ <!-- <teleport v-if="refMiniMap && player.showWidgets" :to="refMiniMap">
|
|
|
<span :class="{ gudieDisabled: isshoppingguide && role != 'leader' }" class="button-switch" @click.stop="toggleMap">
|
|
|
<ui-icon type="show_map_collect"></ui-icon>
|
|
|
</span>
|
|
|
@@ -17,8 +17,17 @@
|
|
|
<ui-icon type="show_3d_normal"></ui-icon>
|
|
|
3D模型
|
|
|
</p>
|
|
|
- </teleport>
|
|
|
- <template v-if="refMiniMap && player.showWidgets">
|
|
|
+ </teleport> -->
|
|
|
+ <teleport v-if="refMiniMap && player.showWidgets" :to="refMiniMap">
|
|
|
+ <span :class="{ gudieDisabled: isshoppingguide && role != 'leader' }" class="button-switch" @click.stop="toggleMap">
|
|
|
+ <ui-icon type="show_map_collect"></ui-icon>
|
|
|
+ </span>
|
|
|
+ <div v-if="controls.showDollhouse" :class="{ gudieDisabled: isshoppingguide && role != 'leader' }" class="change" @click="changeMode('dollhouse')">
|
|
|
+ <ui-icon type="show_3d_normal"></ui-icon>
|
|
|
+ <span> 3D模型</span>
|
|
|
+ </div>
|
|
|
+ </teleport>
|
|
|
+ <!-- <template v-if="refMiniMap && player.showWidgets">
|
|
|
<div
|
|
|
:class="{ disabled: flying, gudieDisabled: isshoppingguide && role != 'leader' }"
|
|
|
v-show="mode != 'panorama'"
|
|
|
@@ -38,7 +47,26 @@
|
|
|
<div class="background" ref="background"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </template> -->
|
|
|
+
|
|
|
+ <template v-if="refMiniMap && player.showWidgets">
|
|
|
+ <div
|
|
|
+ :class="{ disabled: flying, gudieDisabled: isshoppingguide && role != 'leader' }"
|
|
|
+ v-show="mode != 'panorama'" v-if="controls.showFloorplan && controls.showDollhouse" class="tab-layer">
|
|
|
+ <div class="tabs" v-if="controls.showMap">
|
|
|
+ <span :class="{ active: mode === 'floorplan' }" ref="floorplan_ref" @click="changeMode('floorplan', $event)">
|
|
|
+ <ui-icon :type="mode == 'floorplan' ? 'show_plane_selected' : 'show_plane_normal'"></ui-icon>
|
|
|
+ 二維
|
|
|
+ </span>
|
|
|
+ <span :class="{ active: mode === 'dollhouse' }" ref="dollhouse_ref" @click="changeMode('dollhouse', $event)">
|
|
|
+ <ui-icon :type="mode == 'dollhouse' ? 'show_3d_selected' : 'show_3d_normal'"></ui-icon>
|
|
|
+
|
|
|
+ 三維
|
|
|
+ </span>
|
|
|
+ <div class="background" ref="background"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
<!-- <UiTags /> -->
|
|
|
</div>
|
|
|
@@ -62,6 +90,8 @@ import OpenVideo from "@/components/openVideo/";
|
|
|
import Guide from "@/components/shared/Guide.vue";
|
|
|
import { Dialog } from "@/global_components/";
|
|
|
|
|
|
+
|
|
|
+
|
|
|
import { createApp } from "@/app";
|
|
|
import { ref, onMounted, computed, nextTick, watch } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
@@ -226,23 +256,42 @@ watch(
|
|
|
deep: true,
|
|
|
}
|
|
|
);
|
|
|
-const changeMode = (name, e, focus3d = false) => {
|
|
|
- if (!flying.value) {
|
|
|
- let width, left;
|
|
|
- store.commit("setMode", name);
|
|
|
- nextTick(() => {
|
|
|
- if (focus3d) {
|
|
|
- let $active = document.querySelector(".tabs>span:last-of-type");
|
|
|
- background.value.style.width = $active.getBoundingClientRect().width + "px";
|
|
|
- background.value.style.left = $active.offsetLeft + "px";
|
|
|
- } else {
|
|
|
- background.value.style.width = width || e.srcElement.getBoundingClientRect().width + "px";
|
|
|
- background.value.style.left = left || e.srcElement.offsetLeft + "px";
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- // console.dir(document.querySelector(".tabs>span:last-of-type"));
|
|
|
-};
|
|
|
+
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => mode.value,
|
|
|
+ (val, old) => {
|
|
|
+ console.log(val)
|
|
|
+ let timer = setTimeout(() => {
|
|
|
+ clearTimeout(timer)
|
|
|
+ if (val == 'floorplan') {
|
|
|
+ if (floorplan_ref.value && floorplan_ref.value) {
|
|
|
+ background.value.style.width = floorplan_ref.value.getBoundingClientRect().width + 'px'
|
|
|
+ background.value.style.left = floorplan_ref.value.offsetLeft + 'px'
|
|
|
+ }
|
|
|
+ } else if (val == 'dollhouse') {
|
|
|
+ if (dollhouse_ref.value && dollhouse_ref.value) {
|
|
|
+ background.value.style.width = dollhouse_ref.value.getBoundingClientRect().width + 'px'
|
|
|
+ background.value.style.left = dollhouse_ref.value.offsetLeft + 'px'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 0)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+)
|
|
|
+const floorplan_ref = ref(null)
|
|
|
+const dollhouse_ref = ref(null)
|
|
|
+const changeMode = (name, e) => {
|
|
|
+ if (e) {
|
|
|
+ if (!flying.value) {
|
|
|
+ store.commit('setMode', name)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ store.commit('setMode', name)
|
|
|
+ }
|
|
|
+}
|
|
|
const toggleMap = () => {
|
|
|
isCollapse.value = !isCollapse.value;
|
|
|
let $minmap = document.querySelector("[xui_min_map]");
|
|
|
@@ -563,53 +612,53 @@ onMounted(async () => {
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.tabs {
|
|
|
- pointer-events: auto;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- background: #222222;
|
|
|
- border-radius: 6px;
|
|
|
- padding: 2px;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
- box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
|
|
|
- .background {
|
|
|
- position: absolute;
|
|
|
- left: 2px;
|
|
|
- top: 2px;
|
|
|
- bottom: 2px;
|
|
|
- width: 50%;
|
|
|
- border-radius: 4px;
|
|
|
- background: #444444;
|
|
|
- box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.3);
|
|
|
- z-index: 0;
|
|
|
- transition: left 0.3s;
|
|
|
- }
|
|
|
- span {
|
|
|
- flex: 1;
|
|
|
- color: #fff;
|
|
|
- opacity: 0.5;
|
|
|
- border-radius: 6px;
|
|
|
- height: 0.94737rem;
|
|
|
- font-size: 0.36842rem;
|
|
|
- transition: all 0.3s ease;
|
|
|
+ pointer-events: auto;
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ background: #222222;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 2px;
|
|
|
justify-content: center;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- white-space: nowrap;
|
|
|
- z-index: 1;
|
|
|
- i {
|
|
|
- font-size: 0.47368rem;
|
|
|
- margin-right: 4px;
|
|
|
- pointer-events: none;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
|
|
|
+ .background {
|
|
|
+ position: absolute;
|
|
|
+ left: 2px;
|
|
|
+ top: 2px;
|
|
|
+ bottom: 2px;
|
|
|
+ width: 50%;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #444444;
|
|
|
+ box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.3);
|
|
|
+ z-index: 0;
|
|
|
+ transition: left 0.3s;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ flex: 1;
|
|
|
+ color: #fff;
|
|
|
+ opacity: 0.5;
|
|
|
+ border-radius: 6px;
|
|
|
+ height: 0.94737rem;
|
|
|
+ font-size: 0.36842rem;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ z-index: 1;
|
|
|
+ i {
|
|
|
+ font-size: 0.47368rem;
|
|
|
+ margin-right: 4px;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- span.active {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ span.active {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
[xui_tags_view] {
|
tremble