因为一些傻逼浏览器里闪烁的热点层级过高，所以在很多情况下要隐藏热点

src/components/times/timecommon.vue

@@ -49,6 +49,7 @@
       :style="{
         left: item.x + ($isRotate ? 'vw' : 'vh'),
         top: item.y + ($isRotate ? 'vw' : 'vh'),
+        display: showHotspotPoint ? '' : 'none',
       }"
       draggable="false"
       src="@/assets/images/hotspot_icon.png"
@@ -58,9 +59,8 @@
 
 <script setup>
 import SquareWord from "@/components/SquareWord.vue";
-import { getCurrentInstance, ref } from 'vue'
+import { getCurrentInstance, ref, computed } from 'vue'
 import appStore from "@/store/index";
-
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
 
@@ -69,8 +69,6 @@ const store = appStore();
 const getImgUrl = utils.getImageUrl
 const getAudioUrl = utils.getAudioUrl
 
-
-
 const instance = getCurrentInstance()
 const globalProperties = instance.appContext.app.config.globalProperties
 
@@ -91,6 +89,10 @@ const onSlideChange = () => {
   console.log('slide change');
 };
 
+const showHotspotPoint = computed(() => {
+  return store.getShowHotspotPoint
+})
+
 
 const onClickItem = item => {
   console.log('result:', item);

src/store/index.js

@@ -2,21 +2,21 @@ import { defineStore } from 'pinia';
 
 const appStore = defineStore('app', {
   state: () => ({
-    isNeedStartupVideo: true,
-    isNeedLongImageVideo: true,
-    usingChinese: true,
     canMoveCamera: true,
-    canMoveCameraInTreasureAppr: true,
     canPlayLongImageBgAudio: false,
     longImageTranslateLengthRecord: null,
-    isNeedLongImageGuide: true,
-    isNeedTreasureApprGuide: true,
-    isNeedTreasureApprDetailGuide: true,
-    currentHotspot:''
+    currentHotspot:'',
+    showHotspotPoint: false, // 因为傻逼safari微信里闪烁的热点层级贼高
   }),
-  getters: {},
+  getters: {
+    getShowHotspotPoint(state) {
+      return state.showHotspotPoint
+    }
+  },
   actions: {
-   
+    setShowHotspotPoint(value) {
+      this.showHotspotPoint = value
+    }
   },
 });
 

src/views/LongImage.vue

@@ -30,7 +30,7 @@
         :style="{
           left: `calc(${itemW}${$isMobile ? 'vw' : 'vh'} * ${index} - ${translateLength}px)`,
           width: `${itemW}${$isMobile ? 'vw' : 'vh'}`,
-          maxWidth: `${itemW}${isMobile ? 'vw' : 'vh'}`,
+          maxWidth: `${itemW}${$isMobile ? 'vw' : 'vh'}`,
         }"
         @onClickTimeItem="onClickTimeItem"
       />
@@ -111,7 +111,6 @@
 </template>
 
 <script setup>
-
 import { ref, getCurrentInstance, watch, computed, onMounted } from "vue"
 import appStore from "@/store/index";
 import timeList from "@/data/index";
@@ -124,7 +123,6 @@ import { useRouter } from "vue-router"
 const router = useRouter()
 const store = appStore();
 
-
 const isMouseDown = ref(false);
 const lastMoveEventTimeStamp = ref(0);
 const moveSpeed = ref(0);
@@ -141,6 +139,26 @@ const longref$ = ref(null)
 const video$ = ref(null)
 const interaction$ = ref(null)
 
+const currentTimeIdx = ref(0);
+
+const instance = getCurrentInstance()
+const globalProperties = instance.appContext.app.config.globalProperties
+
+const itemW = computed(() => 285)
+
+const isShowDir = ref(false)
+const isShowGuide = ref(false)
+
+let firstIn = true
+const onCloseGuide = () => {
+  isShowGuide.value = false
+  if (firstIn) {
+    firstIn = false
+    interaction$.value.handleShow()
+    store.canPlayLongImageBgAudio = true
+  }
+}
+
 // 背景音乐相关
 const bgAudio = utils.getAudioUrl('bg.mp3')
 const bgAudio$ = ref(null)
@@ -180,6 +198,18 @@ function onFadeInVideoEnd() {
   }, 100);
 }
 
+// 热点显隐相关
+const showHotspotPoint = computed(() => {
+  if (isShowGuide.value || isShowDir.value || isLongImageVideo.value || store.currentHotspot) {
+    return false
+  } else {
+    return true
+  }
+})
+watch(showHotspotPoint, (vNew) => {
+  store.setShowHotspotPoint(vNew)
+})
+
 // 动画帧相关
 const lastAnimationTimeStamp = ref(0);
 const animationFrameId = ref(0);
@@ -187,26 +217,6 @@ const animationFrameId = ref(0);
 // 镜头平移相关
 const translateLength = ref(0);
 
-const currentTimeIdx = ref(0);
-
-const instance = getCurrentInstance()
-const globalProperties = instance.appContext.app.config.globalProperties
-
-const itemW = computed(() => 285)
-
-const isShowDir = ref(false)
-const isShowGuide = ref(false)
-
-let firstIn = true
-const onCloseGuide = () => {
-  isShowGuide.value = false
-  if (firstIn) {
-    firstIn = false
-    interaction$.value.handleShow()
-    store.canPlayLongImageBgAudio = true
-  }
-}
-
 const animationFrameTask = () => {
   const timeStamp = Date.now()
   const timeElapsed = timeStamp - lastAnimationTimeStamp.value