|
@@ -0,0 +1,69 @@
|
|
|
+<template>
|
|
|
+ <div class="floor-btn">
|
|
|
+ <div v-for="item in floorList" :key="item.key" :class="['quisk-item', item.key == nowSelect ? 'active' : '']" @click="floor(item.key)">
|
|
|
+ <span>{{ item.text }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { custom } from "@/env";
|
|
|
+import { getSupperPanoModel } from "@/sdk/association";
|
|
|
+import { currentModel, fuseModel } from "@/model";
|
|
|
+import { flyModel } from "@/hook/use-fly";
|
|
|
+import { ref } from "vue";
|
|
|
+import { SDK, sdk as _sdk } from "@/sdk";
|
|
|
+
|
|
|
+const nowSelect = ref('all');
|
|
|
+const floorList = [{
|
|
|
+ key: "all",
|
|
|
+ text: "全部"
|
|
|
+},{
|
|
|
+ key: 0,
|
|
|
+ text: "1楼"
|
|
|
+},{
|
|
|
+ key: 1,
|
|
|
+ text: "2楼"
|
|
|
+},{
|
|
|
+ key: 2,
|
|
|
+ text: "3楼"
|
|
|
+}] as any[];
|
|
|
+
|
|
|
+const floor = (num: any) => {
|
|
|
+ sdk.goFloor(num);
|
|
|
+ nowSelect.value = num;
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.floor-btn{
|
|
|
+ position: absolute;
|
|
|
+ bottom : calc(var(--editor-menu-bottom, 0px) + 10px);
|
|
|
+ left : calc(var(--left-pano-left) + var(--left-pano-width));
|
|
|
+ margin-left : 24px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ z-index:100;
|
|
|
+ width: 60px;
|
|
|
+ height: 176px;
|
|
|
+ background: rgba(27, 27, 28, 0.8);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 8px;
|
|
|
+ transition : all .3s ease;
|
|
|
+ .active{
|
|
|
+ background: #00c8af;
|
|
|
+ }
|
|
|
+ .quisk-item{
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|