qjkankan_v1.1.1/packages/qjkankan-view/src/components/assembly/titieSlide.vue

<template>
  <div v-if="currentScene.type == 'pano'">
    <transition name="fade">
      <div v-if="titleshow" class="titieSlide">
        {{ currentScene.name }}
      </div>
    </transition>
  </div>
</template>


<script setup>
import { ref, onMounted, computed, watch, nextTick } from "vue";
import { useStore } from "vuex";

const store = useStore();
const currentScene = computed(() => store.getters["scene/currentScene"]);
const timer = ref(null)
const titleshow = ref(false)

watch(currentScene, () => {
  if (!currentScene.value) {
    return
  }
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }

  titleshow.value = true
  timer.value = setTimeout(() => {
    titleshow.value = false
  }, 3000);
})
</script>

<style lang="scss" scoped>
.titieSlide {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 24px;
  z-index: 999;
  color: #FFFFFF;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 800px) {
  .titieSlide {
    font-size: 20px;
  }
}
</style>