改兼容性bug，主要是显示层级问题

src/App.vue

@@ -63,6 +63,21 @@ input, textarea {
   }
 }
 
+.animation--hack-browser-bug--stack-too-high {
+  animation: hack-dynamic-opacity-bug-in-safari 100s infinite;
+}
+@keyframes hack-dynamic-opacity-bug-in-safari {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.99;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 i {
   font-style: italic;
 }

src/components/Hotspot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hotspot">
+  <div class="hotspot animation--hack-browser-bug--stack-too-high" >
     <div class="content">
       <img class="bg" :src="popImg" alt="">
       <div class="info">
@@ -43,8 +43,8 @@ const tempImg = utils.getImageUrl(`zhanwei.jpg`)
   right: 0;
   width: 100%;
   height: 100%;
-  backdrop-filter: blur(70px);
-
+  backdrop-filter: blur(20px);
+  background-color: rgba(236, 222, 193, 0.9);
   .content {
     position: absolute;
     left: 50%;

src/components/Interaction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="interaction" v-show="isShowDialog && current.info.leftInfo[0]">
+  <div class="interaction animation--hack-browser-bug--stack-too-high" v-show="isShowDialog && current.info.leftInfo[0]">
     <SerialFrames
       :frame-total-num="72"
       :frame-interval="45"
@@ -61,6 +61,7 @@ watch(current, () => {
   left: 3rem;
   display: flex;
   pointer-events: none;
+
   .dialog {
     max-width: 30rem;
     background-color: rgba(255, 244, 220, 0.6);
@@ -70,9 +71,8 @@ watch(current, () => {
     color: #514C41;
     padding: 1rem;
     font-size: 0.88rem;
-    pointer-events: none;
     align-self: flex-start;
-    >p{
+    > p {
       line-height: 1.5;
       text-indent: 1.76rem;
     }
@@ -92,4 +92,4 @@ watch(current, () => {
     }
   }
 }
-</style>
+</style>

src/components/SerialFrames.vue

@@ -321,5 +321,9 @@ export default {
   >img {
     height: 100%;
   }
+
+  > audio {
+    display: none;
+  }
 }
 </style>

src/components/menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bottom-menu">
+  <div class="bottom-menu animation--hack-browser-bug--stack-too-high">
     <ul class="b-ul">
       <li :class="['b-li',`${idx==currentTimeIdx?'active':''}`]" @click="emit('onClickTimeItem', idx)" v-for="(timeItem, idx) in list" :key="timeItem.id">
         <div></div>

src/views/LongImage.vue

@@ -20,7 +20,7 @@
       @pause="bgAudioStatus = false"
     />
 
-    <div ref="longref$">
+    <div ref="longref$" class="time-item-wrapper">
       <component
         class="time-item"
         v-for="(timeItem, index) in timeList"
@@ -36,10 +36,11 @@
       />
     </div>
 
-    <Interaction ref="interaction$" :currentTimeIdx="currentTimeIdx" :list="timeList" />
+    <Interaction class="interaction" ref="interaction$" :currentTimeIdx="currentTimeIdx" :list="timeList" />
 
 
     <Vmenu
+      class="bottom-menu"
       :currentTimeIdx="currentTimeIdx"
       @onClickMenuItem="onClickMenuItem"
       @onClickTimeItem="onClickTimeItem"
@@ -144,7 +145,7 @@ const currentTimeIdx = ref(0);
 const instance = getCurrentInstance()
 const globalProperties = instance.appContext.app.config.globalProperties
 
-const itemW = computed(() => 285)
+const itemW = computed(() => 295)
 
 const isShowDir = ref(false)
 const isShowGuide = ref(false)
@@ -379,14 +380,23 @@ onMounted(() => {
   position: relative;
   overflow: hidden;
 
-  .time-item {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    text-align: center;
-    justify-content: flex-start;
-    display: flex;
-    align-items: center;
+  > .time-item-wrapper {
+    .time-item {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      text-align: center;
+      justify-content: flex-start;
+      display: flex;
+      align-items: center;
+      z-index: 0;
+    }
+  }
+  > .interaction {
+    z-index: 1;
+  }
+  > .bottom-menu {
+    z-index: 2;
   }
 }
 
@@ -436,12 +446,18 @@ onMounted(() => {
 
 
 .fade-in-video-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
   .skip-button {
     position: absolute;
     top: 1.21rem;
     right: 1.46rem;
     height: 1.75rem;
-    z-index: 10000;
+    z-index: 1;
 
     img {
       height: 100%;
@@ -453,7 +469,7 @@ onMounted(() => {
     left: 50%;
     bottom: 30%;
     transform: translateX(-50%);
-    z-index: 10000;
+    z-index: 1;
     width: 6rem;
 
     img {
@@ -469,6 +485,7 @@ onMounted(() => {
     height: 100%;
     background: #1f0f05;
     object-fit: cover;
+    z-index: -1;
   }
 }
 </style>