|
@@ -12,24 +12,48 @@
|
|
|
<ui-icon type="show_map_collect"></ui-icon>
|
|
|
</span>
|
|
|
|
|
|
- <p class="change" v-if="controls.showDollhouse" @click="changeMode('dollhouse')">
|
|
|
+ <p
|
|
|
+ class="change"
|
|
|
+ v-if="controls.showDollhouse"
|
|
|
+ @click="changeMode('dollhouse')"
|
|
|
+ >
|
|
|
<ui-icon type="show_3d_normal"></ui-icon>
|
|
|
- {{$t('mode.dollhouseModel')}}
|
|
|
+ {{ $t("mode.dollhouseModel") }}
|
|
|
</p>
|
|
|
</teleport>
|
|
|
<template v-if="refMiniMap">
|
|
|
- <div :class="{ disabled: flying }" v-show="mode != 'panorama'"
|
|
|
- v-if="controls.showFloorplan && controls.showDollhouse" class="tab-layer">
|
|
|
+ <div
|
|
|
+ :class="{ disabled: flying }"
|
|
|
+ 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>
|
|
|
- {{$t('mode.floorplan')}}
|
|
|
+ <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>
|
|
|
+ {{ $t("mode.floorplan") }}
|
|
|
</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>
|
|
|
- {{$t('mode.dollhouse')}}
|
|
|
+ <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>
|
|
|
+ {{ $t("mode.dollhouse") }}
|
|
|
</span>
|
|
|
<div class="background" ref="background"></div>
|
|
|
</div>
|
|
@@ -39,13 +63,12 @@
|
|
|
<UiTags />
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
|
|
|
+<script setup>
|
|
|
import UiTags from "@/components/Tags";
|
|
|
|
|
|
-import { listenMessage } from '@/utils/messageHandler'
|
|
|
-import {Dialog} from '@/global_components'
|
|
|
+import { listenMessage } from "@/utils/messageHandler";
|
|
|
+import { Dialog } from "@/global_components";
|
|
|
|
|
|
import Information from "@/components/Information";
|
|
|
import Control from "@/components/Controls/Control.Mobile.vue";
|
|
@@ -59,33 +82,33 @@ import { ref, onMounted, computed, nextTick, watch } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
import browser from "@/utils/browser";
|
|
|
import { useApp, getApp } from "@/app";
|
|
|
-import { useI18n, getLocale } from '@/i18n'
|
|
|
+import { useI18n, getLocale } from "@/i18n";
|
|
|
import { useAppHeight } from "@/utils/globalViewHeight";
|
|
|
-const { t } = useI18n({ useScope: 'global' })
|
|
|
+const { t } = useI18n({ useScope: "global" });
|
|
|
useAppHeight();
|
|
|
let app = null;
|
|
|
|
|
|
-const autoPlayMedia = player => {
|
|
|
- function onclick() {
|
|
|
- window.parent.postMessage(
|
|
|
- {
|
|
|
- source: "qjkankan",
|
|
|
- event: "autoPlayBgm",
|
|
|
- params: {
|
|
|
- status: true,
|
|
|
- },
|
|
|
- },
|
|
|
- "*"
|
|
|
- );
|
|
|
- $player.removeEventListener('click', onclick)
|
|
|
- $player.removeEventListener('touchstart', onclick)
|
|
|
- }
|
|
|
- const $player = document.querySelector('.player')
|
|
|
- $player.addEventListener('click', onclick)
|
|
|
- $player.addEventListener('touchstart', onclick)
|
|
|
-}
|
|
|
+const autoPlayMedia = (player) => {
|
|
|
+ function onclick() {
|
|
|
+ window.parent.postMessage(
|
|
|
+ {
|
|
|
+ source: "qjkankan",
|
|
|
+ event: "autoPlayBgm",
|
|
|
+ params: {
|
|
|
+ status: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+ $player.removeEventListener("click", onclick);
|
|
|
+ $player.removeEventListener("touchstart", onclick);
|
|
|
+ }
|
|
|
+ const $player = document.querySelector(".player");
|
|
|
+ $player.addEventListener("click", onclick);
|
|
|
+ $player.addEventListener("touchstart", onclick);
|
|
|
+};
|
|
|
|
|
|
-listenMessage()
|
|
|
+listenMessage();
|
|
|
|
|
|
const closetagtype = () => {
|
|
|
store.commit("tag/setTagClickType", {
|
|
@@ -113,10 +136,14 @@ const refMiniMap = ref(null);
|
|
|
const isCollapse = ref(false);
|
|
|
const background = ref(null);
|
|
|
const resize = () => {
|
|
|
- if (this.$refs.background && (this.mode == "floorplan" || this.mode == "dollhouse")) {
|
|
|
+ if (
|
|
|
+ this.$refs.background &&
|
|
|
+ (this.mode == "floorplan" || this.mode == "dollhouse")
|
|
|
+ ) {
|
|
|
this.$nextTick(() => {
|
|
|
let $active = $(this.$el).find(".tabs .active");
|
|
|
- background.value.style.width = $active[0].getBoundingClientRect().width + "px";
|
|
|
+ background.value.style.width =
|
|
|
+ $active[0].getBoundingClientRect().width + "px";
|
|
|
background.value.style.left = $active.position().left + "px";
|
|
|
});
|
|
|
}
|
|
@@ -165,12 +192,14 @@ watch(
|
|
|
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.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.width =
|
|
|
+ dollhouse_ref.value.getBoundingClientRect().width + "px";
|
|
|
background.value.style.left = dollhouse_ref.value.offsetLeft + "px";
|
|
|
}
|
|
|
}
|
|
@@ -247,16 +276,17 @@ onMounted(() => {
|
|
|
window.location.replace(`/5034.html?m=` + browser.getURLParam("m"));
|
|
|
break;
|
|
|
case 5005:
|
|
|
- Dialog.toast({
|
|
|
- content: t('guide.no_scene'),
|
|
|
- type: 'error',
|
|
|
- })
|
|
|
+ // Dialog.toast({
|
|
|
+ // content: t('guide.no_scene'),
|
|
|
+ // type: 'error',
|
|
|
+ // })
|
|
|
+ window.location.replace(`/5033.html?m=` + browser.getURLParam("m"));
|
|
|
break;
|
|
|
}
|
|
|
});
|
|
|
app.Scene.on("loaded", (pano) => {
|
|
|
refMiniMap.value = "[xui_min_map]";
|
|
|
- let music = store.getters['scene/musicURL']
|
|
|
+ let music = store.getters["scene/musicURL"];
|
|
|
|
|
|
window.parent.postMessage(
|
|
|
{
|
|
@@ -268,7 +298,7 @@ onMounted(() => {
|
|
|
},
|
|
|
"*"
|
|
|
);
|
|
|
- autoPlayMedia()
|
|
|
+ autoPlayMedia();
|
|
|
});
|
|
|
app.Scene.on("panorama.videorenderer.resumerender", () => {
|
|
|
window.parent.postMessage(
|
|
@@ -346,19 +376,19 @@ onMounted(() => {
|
|
|
store.commit("setFlying", false);
|
|
|
store.commit("setPanoId", targetPano.id);
|
|
|
});
|
|
|
- app.TourManager.on('loaded', async (tour) => {
|
|
|
+ app.TourManager.on("loaded", async (tour) => {
|
|
|
let tours = JSON.parse(
|
|
|
JSON.stringify(app.TourManager.tours, (key, val) => {
|
|
|
- if (key === 'audio') {
|
|
|
- return null
|
|
|
+ if (key === "audio") {
|
|
|
+ return null;
|
|
|
} else {
|
|
|
- return val
|
|
|
+ return val;
|
|
|
}
|
|
|
})
|
|
|
- )
|
|
|
- store.commit('tour/setData', {
|
|
|
+ );
|
|
|
+ store.commit("tour/setData", {
|
|
|
tours: tours,
|
|
|
- })
|
|
|
+ });
|
|
|
|
|
|
window.parent.postMessage(
|
|
|
{
|
|
@@ -383,12 +413,16 @@ onMounted(() => {
|
|
|
),
|
|
|
});
|
|
|
});
|
|
|
- app.store.on("floorcad", (floor) => store.commit("scene/loadFloorData", floor));
|
|
|
- app.store.on('flooruser', floor => store.commit('scene/loadFloorData', floor)) //4.7以后新楼层方式
|
|
|
+ app.store.on("floorcad", (floor) =>
|
|
|
+ store.commit("scene/loadFloorData", floor)
|
|
|
+ );
|
|
|
+ app.store.on("flooruser", (floor) =>
|
|
|
+ store.commit("scene/loadFloorData", floor)
|
|
|
+ ); //4.7以后新楼层方式
|
|
|
app.render();
|
|
|
});
|
|
|
</script>
|
|
|
-
|
|
|
+
|
|
|
<style lang="scss">
|
|
|
.tab-layer {
|
|
|
width: 100%;
|
|
@@ -485,7 +519,11 @@ onMounted(() => {
|
|
|
width: 2px;
|
|
|
height: 28px;
|
|
|
bottom: -30px;
|
|
|
- background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
|
|
|
+ background: linear-gradient(
|
|
|
+ 145deg,
|
|
|
+ rgba(255, 255, 255, 0.8),
|
|
|
+ rgba(255, 255, 255, 0)
|
|
|
+ );
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
@@ -503,7 +541,7 @@ onMounted(() => {
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
- >p {
|
|
|
+ > p {
|
|
|
color: #131d34;
|
|
|
font-size: 16px;
|
|
|
pointer-events: none;
|
|
@@ -582,7 +620,7 @@ onMounted(() => {
|
|
|
.tabs {
|
|
|
height: 0.7rem;
|
|
|
|
|
|
- >span {
|
|
|
+ > span {
|
|
|
height: 0.7rem;
|
|
|
font-size: 0.25rem;
|
|
|
}
|
|
@@ -590,4 +628,3 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
-
|