fuse-code/src/layout/model-list/floor-tab.vue

<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>