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

<template>
  <div v-if="show" class="user-tips-overlay">
    <img :src="metadata.workOpeningTip.pcIcon || require('@/assets/images/default/show/img_tipspc_default.png')" alt="" />
  </div>
</template>
<script setup>
import { onMounted, watch, computed, ref, nextTick, unref } from "vue";
import { useApp } from "@/app";
import { useStore } from "vuex";
const store = useStore();
const metadata = computed(() => store.getters["scene/metadata"]);
const currentScene = computed(() => store.getters["scene/currentScene"]);
const show = ref(false);
const isPano = computed(() => currentScene.value.type === "pano");

useApp().then((app) => {
  app.Scene.on("sceneReady", () => {
    let locoR = "localRemind" + metadata.value.work.id;

    if (metadata.value.workOpeningTip.isRemind && isPano.value) {
      show.value = localStorage.getItem(locoR) == 1 ? false : !!metadata.value.workOpeningTip.remindTime;
      localStorage.setItem(locoR, 1);
    } else {
      if (metadata.value.workOpeningTip.remindTime && isPano.value) {
        show.value = true;
      }
      localStorage.setItem(locoR, 0);
    }

    if (show.value) {
      setTimeout(() => {
        show.value = false;
      }, (metadata.value.workOpeningTip.remindTime || 3) * 1000);
    }
  });
});
</script>

<style lang="scss" scoped>
.user-tips-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: display 0.3s ease;
  > img {
    max-width: 150px;
  }
}
</style>