jiangsu_518/src/components/UIGather/mobile/index.vue

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

      <Control />
      <!-- <ControlRight /> -->
    </div>

  </div>

</template>

<script setup>
import Logo from "./logo";
import Tips from "./tips";
import sceneList from "./list";
import Control from "./control_js";
import ControlRight from "./control.right";
import Menu from "./menu";
import { ref, watch, computed, onMounted, nextTick } from "vue";
import { useApp, getApp } from "@/app";

import { useStore } from "vuex";
const store = useStore();
const showUI = ref(false)


const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
const showTours = computed(() => store.getters["fdkk/isShowToursList"]);

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

const onIsShowList = (data) => {
  if (showTours.value) {
    store.commit('fdkk/setShowToursList', false)
  }
  store.commit("functions/setShowScenesList", !isShowScenesList.value);
};

watch(currentScene, () => {
  if (currentScene.value.type == '4dkk' && isShowScenesList.value) {
    let t = setTimeout(() => {
      clearTimeout(t)
      store.commit("functions/setShowScenesList", false);
    }, 1500);
  }
})

useApp().then((app) => {
  app.Scene.on("ready", (data) => {
  if (currentScene && (currentScene.value.type == '4dkk' || currentScene.value.type === 'pano') && !showUI.value) {
      showUI.value = true
    }
  })
  app.Scene.on("ready", () => {
    showUI.value = true
  })
  app.Scene.on("onExitVr", () => {
    store.commit("functions/setVrStatus", false);
  })
})

</script>

<style lang="scss" scoped>
.btn-style {
  display: flex;
  width: 96%;
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 38px;
  z-index: 9;
  .menu-icon {
    width: 36px;
    height: 36px;

    >div {
      width: 100%;
      height: 36px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;

      >img {
      width: 24px;
      height: 24px;

      }
    }
  }
}

@media only screen and (min-width: 1234px){
  .btn-style {
    bottom: 69px;
  }
  .btn-style.needBottomSpace {
    bottom: 180px;
  }
}
</style>