|
|
@@ -1,286 +1,300 @@
|
|
|
<template>
|
|
|
- <div class="floor-switch" :class="{ disable: flying, showTours: showTours }" v-if="floors.length > 1 && mode != 'panorama'">
|
|
|
- <ul>
|
|
|
- <li v-if="mode != 'floorplan'" :class="{ active: 'all' == floorId }" @click.stop="onGotoFloor('all')">
|
|
|
- <b></b><span>{{ $t('common.all') }}</span>
|
|
|
- </li>
|
|
|
- <li v-for="item in floors" :key="item.id" :class="{ active: item.id == floorId }" @click.stop="onGotoFloor(item.id)">
|
|
|
- <b></b><span>{{ item.name }}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="floor-switch"
|
|
|
+ :class="{ disable: flying, showTours: showTours }"
|
|
|
+ v-if="floors.length > 1 && mode != 'panorama'"
|
|
|
+ >
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-if="mode != 'floorplan'"
|
|
|
+ :class="{ active: 'all' == floorId }"
|
|
|
+ @click.stop="onGotoFloor('all')"
|
|
|
+ >
|
|
|
+ <b></b><span>{{ $t("common.all") }}</span>
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ v-for="item in floors"
|
|
|
+ :key="item.id"
|
|
|
+ :class="{ active: item.id == floorId }"
|
|
|
+ @click.stop="onGotoFloor(item.id)"
|
|
|
+ >
|
|
|
+ <b></b><span>{{ item.name }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { computed } from 'vue'
|
|
|
-import { useStore } from 'vuex'
|
|
|
-import { useApp } from '@/app'
|
|
|
-const store = useStore()
|
|
|
-const mode = computed(() => store.getters.mode)
|
|
|
-const flying = computed(() => store.getters['flying'])
|
|
|
-const floors = computed(() => store.getters['scene/floors'].reverse())
|
|
|
-const floorId = computed(() => store.getters.floorId)
|
|
|
-const showTours = computed(() => store.getters['tour/showTours'])
|
|
|
-const onGotoFloor = id => {
|
|
|
- store.commit('setFloor', id)
|
|
|
-}
|
|
|
-useApp().then(sdk =>
|
|
|
- sdk.Camera.on('mode.beforeChange', ({ toMode, floorIndex }) => {
|
|
|
- store.commit('mode', toMode)
|
|
|
- if (toMode != 'dollhouse') {
|
|
|
- store.commit('setFloorId', floorIndex)
|
|
|
- }
|
|
|
- })
|
|
|
-)
|
|
|
+import { computed } from "vue";
|
|
|
+import { useStore } from "vuex";
|
|
|
+import { useApp } from "@/app";
|
|
|
+const store = useStore();
|
|
|
+const mode = computed(() => store.getters.mode);
|
|
|
+const flying = computed(() => store.getters["flying"]);
|
|
|
+const floors = computed(() => store.getters["scene/floors"].reverse());
|
|
|
+const floorId = computed(() => store.getters.floorId);
|
|
|
+const showTours = computed(() => store.getters["tour/showTours"]);
|
|
|
+const onGotoFloor = (id) => {
|
|
|
+ store.commit("setFloor", id);
|
|
|
+};
|
|
|
+useApp().then((sdk) =>
|
|
|
+ sdk.Camera.on("mode.beforeChange", ({ toMode, floorIndex }) => {
|
|
|
+ console.log("mode.beforeChange,", toMode, floorIndex);
|
|
|
+ // store.commit("mode", toMode);
|
|
|
+ if (toMode !== "dollhouse") {
|
|
|
+ // store.commit("setFloorId", floorIndex);
|
|
|
+ }
|
|
|
+ })
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.floor-switch {
|
|
|
- pointer-events: all;
|
|
|
- position: absolute;
|
|
|
- bottom: calc(100% + 5px);
|
|
|
- left: 20px;
|
|
|
- z-index: 10;
|
|
|
- transition: bottom 0.1s;
|
|
|
- ul,
|
|
|
- li {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- ul {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- li {
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- height: 50px;
|
|
|
- &:first-child {
|
|
|
- b {
|
|
|
- &::before {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- &.active {
|
|
|
- b {
|
|
|
- &::after {
|
|
|
- bottom: -10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- b {
|
|
|
- &::after {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- &.active {
|
|
|
- b {
|
|
|
- &::before {
|
|
|
- top: -10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ pointer-events: all;
|
|
|
+ position: absolute;
|
|
|
+ bottom: calc(100% + 5px);
|
|
|
+ left: 20px;
|
|
|
+ z-index: 10;
|
|
|
+ transition: bottom 0.1s;
|
|
|
+ ul,
|
|
|
+ li {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ height: 50px;
|
|
|
+ &:first-child {
|
|
|
+ b {
|
|
|
+ &::before {
|
|
|
+ display: none;
|
|
|
}
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
b {
|
|
|
- position: relative;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- background-color: #1c1c1c;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 0px 0px 2px 1px #404040;
|
|
|
- cursor: pointer;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: -5px;
|
|
|
- left: 50%;
|
|
|
- margin-left: -3px;
|
|
|
- background: #1c1c1c;
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: -5px;
|
|
|
- left: 50%;
|
|
|
- margin-left: -3px;
|
|
|
- background: #1c1c1c;
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ bottom: -10px;
|
|
|
+ }
|
|
|
}
|
|
|
- span {
|
|
|
- margin-left: 10px;
|
|
|
- font-size: 14px;
|
|
|
- //color: #939393;
|
|
|
- cursor: pointer;
|
|
|
- color: #eeeeee;
|
|
|
- text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ b {
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- &.active {
|
|
|
- b {
|
|
|
- left: -6px;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- border: solid 6px #1c1c1c;
|
|
|
- background-color: #404040;
|
|
|
- box-shadow: 0px 0px 2px 1px #404040;
|
|
|
- &::before {
|
|
|
- top: -10px;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- bottom: -10px;
|
|
|
- }
|
|
|
- }
|
|
|
- span {
|
|
|
- margin-left: 0;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 32px;
|
|
|
- color: rgba(255, 255, 255, 0.88);
|
|
|
- border: solid 4px #1c1c1c;
|
|
|
- background-color: #404040;
|
|
|
- border-radius: 32px;
|
|
|
- box-shadow: 0px 0px 2px 1px #404040;
|
|
|
- padding: 0px 10px;
|
|
|
- text-shadow: none;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: -10px;
|
|
|
- background: #1c1c1c;
|
|
|
- width: 7px;
|
|
|
- height: 4px;
|
|
|
- box-shadow: -2px 0px 2px 1px #404040;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: -16px;
|
|
|
- background: #1c1c1c;
|
|
|
- width: 6px;
|
|
|
- height: 11px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ b {
|
|
|
+ &::before {
|
|
|
+ top: -10px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
+ b {
|
|
|
+ position: relative;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-color: #1c1c1c;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0px 0px 2px 1px #404040;
|
|
|
+ cursor: pointer;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
position: absolute;
|
|
|
- left: 5px;
|
|
|
- top: 20px;
|
|
|
- bottom: 20px;
|
|
|
+ top: -5px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -3px;
|
|
|
+ background: #1c1c1c;
|
|
|
width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: -5px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -3px;
|
|
|
background: #1c1c1c;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ //color: #939393;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #eeeeee;
|
|
|
+ text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ b {
|
|
|
+ left: -6px;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ border: solid 6px #1c1c1c;
|
|
|
+ background-color: #404040;
|
|
|
box-shadow: 0px 0px 2px 1px #404040;
|
|
|
- z-index: 1;
|
|
|
+ &::before {
|
|
|
+ top: -10px;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ bottom: -10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-left: 0;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 32px;
|
|
|
+ color: rgba(255, 255, 255, 0.88);
|
|
|
+ border: solid 4px #1c1c1c;
|
|
|
+ background-color: #404040;
|
|
|
+ border-radius: 32px;
|
|
|
+ box-shadow: 0px 0px 2px 1px #404040;
|
|
|
+ padding: 0px 10px;
|
|
|
+ text-shadow: none;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: -10px;
|
|
|
+ background: #1c1c1c;
|
|
|
+ width: 7px;
|
|
|
+ height: 4px;
|
|
|
+ box-shadow: -2px 0px 2px 1px #404040;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: -16px;
|
|
|
+ background: #1c1c1c;
|
|
|
+ width: 6px;
|
|
|
+ height: 11px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 5px;
|
|
|
+ top: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+ width: 6px;
|
|
|
+ background: #1c1c1c;
|
|
|
+ box-shadow: 0px 0px 2px 1px #404040;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
}
|
|
|
[is-mobile] {
|
|
|
- .floor-switch {
|
|
|
- bottom: 2.5rem;
|
|
|
- &.showTours {
|
|
|
- bottom: 5rem;
|
|
|
- }
|
|
|
- li {
|
|
|
- height: 45px;
|
|
|
- &:first-child {
|
|
|
- &.active {
|
|
|
- b {
|
|
|
- &::after {
|
|
|
- bottom: -6px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- &.active {
|
|
|
- b {
|
|
|
- &::before {
|
|
|
- top: -6px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- b {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- &::before {
|
|
|
- top: -3px;
|
|
|
- left: 50%;
|
|
|
- margin-left: -2px;
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- bottom: -3px;
|
|
|
- left: 50%;
|
|
|
- margin-left: -2px;
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 0.36842rem;
|
|
|
+ .floor-switch {
|
|
|
+ bottom: 2.5rem;
|
|
|
+ &.showTours {
|
|
|
+ bottom: 5rem;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ height: 45px;
|
|
|
+ &:first-child {
|
|
|
+ &.active {
|
|
|
+ b {
|
|
|
+ &::after {
|
|
|
+ bottom: -6px;
|
|
|
}
|
|
|
- &.active {
|
|
|
- b {
|
|
|
- left: -3px;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border: solid 4px #1c1c1c;
|
|
|
- &::before {
|
|
|
- top: -6px;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- bottom: -6px;
|
|
|
- }
|
|
|
- }
|
|
|
- span {
|
|
|
- height: 30px;
|
|
|
- border: solid 3px #1c1c1c;
|
|
|
- border-radius: 30px;
|
|
|
- padding: 0px 10px;
|
|
|
- margin-left: 5px;
|
|
|
- &::before {
|
|
|
- left: -11px;
|
|
|
- width: 10px;
|
|
|
- height: 4px;
|
|
|
- box-shadow: -2px 0px 1px 1px #404040;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- left: -14px;
|
|
|
- width: 3px;
|
|
|
- height: 6px;
|
|
|
- border-radius: 40%;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ &.active {
|
|
|
+ b {
|
|
|
+ &::before {
|
|
|
+ top: -6px;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ b {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ &::before {
|
|
|
+ top: -3px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -2px;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
}
|
|
|
&::after {
|
|
|
- left: 5px;
|
|
|
- top: 20px;
|
|
|
- bottom: 20px;
|
|
|
- width: 4px;
|
|
|
+ bottom: -3px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -2px;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 0.36842rem;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ b {
|
|
|
+ left: -3px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border: solid 4px #1c1c1c;
|
|
|
+ &::before {
|
|
|
+ top: -6px;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ bottom: -6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ height: 30px;
|
|
|
+ border: solid 3px #1c1c1c;
|
|
|
+ border-radius: 30px;
|
|
|
+ padding: 0px 10px;
|
|
|
+ margin-left: 5px;
|
|
|
+ &::before {
|
|
|
+ left: -11px;
|
|
|
+ width: 10px;
|
|
|
+ height: 4px;
|
|
|
+ box-shadow: -2px 0px 1px 1px #404040;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ left: -14px;
|
|
|
+ width: 3px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 40%;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ left: 5px;
|
|
|
+ top: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+ width: 4px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- @media (orientation: landscape) {
|
|
|
- .floor-switch {
|
|
|
- bottom: 1rem;
|
|
|
- li {
|
|
|
- span {
|
|
|
- font-size: 0.25rem;
|
|
|
- }
|
|
|
- }
|
|
|
+ @media (orientation: landscape) {
|
|
|
+ .floor-switch {
|
|
|
+ bottom: 1rem;
|
|
|
+ li {
|
|
|
+ span {
|
|
|
+ font-size: 0.25rem;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
gemercheung