qjkankan_v1.1.1/packages/qjkankan-view/src/components/UIGather/index.vue

<template>
      <Logo />
      <Tips />
      <div v-show="showUI">
            <Control />
            <Menu v-if="fdkkCurrentVersion == 'v4'" />
            <div @click="onIsShowList" v-else
                  v-show="!((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)"
                  class="v3daolan" :class="{ active: isShowScenesList }">
                  <img :src="require(`@/assets/images/icon/${isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'}`)"
                        alt="" />
            </div>

            <sceneList />
            <div class="btnmask"></div>
      </div>
</template>
  
<script setup>
import Logo from "./logo";
import Tips from "./tips";
import sceneList from "./list";
import Control from "./control";
import Menu from "./menu";
import { ref, onMounted, computed, watch, nextTick } from "vue";
import { useStore } from "vuex";
import { useApp, getApp } from "@/app";

const store = useStore();

const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
const currentScene = computed(() => store.getters["scene/currentScene"]);
const metadata = computed(() => store.getters["scene/metadata"]);
const scenes = computed(() => store.getters["scene/list"]);
const secondaryList = computed(() => store.getters["scene/secondaryList"]);

const showUI = ref(false)


const onIsShowList = (data) => {
      store.commit("functions/setShowScenesList", !isShowScenesList.value);
};


useApp().then((app) => {
      app.Scene.on("ready", () => {
            if (currentScene && currentScene.value.type == '4dkk' && !showUI.value) {
                  showUI.value = true
            }
      })
      app.Scene.on("sceneReady", () => {
            showUI.value = true
      })
})


</script>
  
<style lang="scss" scoped>
.v3daolan {
      background: rgba(0, 0, 0, .3);
      border: 1px solid hsla(0, 0%, 100%, .2);
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
      pointer-events: auto;
      width: 36px;
      height: 36px;
      line-height: 36px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &.active {
            background: rgba(0, 0, 0, 0.5);
      }

      >img {
            width: 26px;
            height: 26px;
      }
}

.btnmask {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      pointer-events: none;
      opacity: 0.3;
      height: 50px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 52%, #000000 100%);
}
</style>