bug fix, 主要是小人样式优化

src/components/Interaction.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="interaction animation--hack-browser-bug--stack-too-high" v-show="isShowDialog && current.info.leftInfo[0]">
+  <div class="interaction animation--hack-browser-bug--stack-too-high" v-show="showHotspotPoint && isShowDialog && current.info.leftInfo[0]">
     <SerialFrames
+      class="people"
       :frame-total-num="72"
       :frame-interval="45"
       :image-src-func="getImg"
@@ -9,7 +10,7 @@
     />
     <Transition>
       <div class="dialog">
-        <p v-for="item in current.info.leftInfo" :key="item">{{ item || '暂无' }}</p>
+        <p v-for="item in current.info.leftInfo" :key="item">{{ item }}</p>
       </div>
     </Transition>
   </div>
@@ -17,6 +18,7 @@
 
 <script setup>
 import { computed, ref, watch } from "vue"
+import appStore from "@/store/index";
 
 const roleImg = utils.getImageUrl(`guide-role.png`)
 const props = defineProps({
@@ -27,7 +29,7 @@ const props = defineProps({
 const current = computed(() => props.list[props.currentTimeIdx])
 
 let timer = null
-const isShowDialog = ref(true)
+const isSpeaking = ref(true)
 
 const getImg = (index) => {
   return utils.getImageUrl(`role/active/guide_${(index - 1).toString().padStart(5, '0')}.png`)
@@ -39,9 +41,9 @@ const handleShow = () => {
     clearTimeout(timer)
     timer = null
   }
-  isShowDialog.value = true
+  isSpeaking.value = true
   timer = setTimeout(() => {
-    isShowDialog.value = false
+    isSpeaking.value = false
   }, current.value.info.voiceDuration * 1000);
 }
 
@@ -52,43 +54,53 @@ watch(current, () => {
   handleShow()
 })
 
+const store = appStore();
+const showHotspotPoint = computed(() => {
+  return store.getShowHotspotPoint
+})
+
 </script>
 
 <style lang="scss" scoped>
 .interaction {
   position: absolute;
-  bottom: 1rem;
+  bottom: 2rem;
   left: 3rem;
   display: flex;
   pointer-events: none;
-
+  overflow: hidden;
+  .people {
+    width: 6.25rem;
+    height: 11.1rem;
+    padding-top: 2.92rem;
+  }
   .dialog {
-    max-width: 30rem;
-    background-color: rgba(255, 244, 220, 0.9);
+    align-self: flex-start;
     backdrop-filter: blur(20px);  // 不生效，因为组件根元素通过class animation--hack-browser-bug--stack-too-high施加了动画
+    background-color: rgba(255, 244, 220, 0.9);
     box-shadow: inset 0px 1px 3px 0px #FFF3D1;
-    margin-left: -5rem;
     color: #514C41;
-    padding: 1rem;
     font-size: 0.88rem;
-    align-self: flex-start;
+    max-width: 30rem;
+    margin-left: 1rem;
+    padding: 1rem;
     > p {
       line-height: 1.5;
       text-indent: 1.76rem;
     }
 
     &::before {
-      content: '';
+      backdrop-filter: blur(20px); // 不生效，因为组件根元素通过class animation--hack-browser-bug--stack-too-high施加了动画
+      background-color: rgba(255, 244, 220, 0.9);
+      bottom: -1rem;
       clip-path: polygon(100% 0, 70% 100%, 100% 50%);
+      content: '';
       display: inline-block;
-      width: 4rem;
       height: 2rem;
-      background-color: rgba(255, 244, 220, 0.9);
-      backdrop-filter: blur(20px); // 不生效，因为组件根元素通过class animation--hack-browser-bug--stack-too-high施加了动画
       position: absolute;
       right: 99.9%;
+      width: 4rem;
       z-index: -1;
-      bottom: -1rem;
     }
   }
 }

src/views/LongImage.vue

@@ -6,7 +6,7 @@
     @mouseup="onMouseUp"
     @mouseleave="onMouseLeave"
     @touchstart.passive="onTouchStart"
-    @touchmove.prevent="onTouchMove"
+    @touchmove="onTouchMove"
     @touchend="onTouchEnd"
     @touchcancel="onTouchCancel"
     @wheel.passive="onWheel"
@@ -37,9 +37,6 @@
     </div>
 
     <Interaction 
-      :style="{
-        display: showHotspotPoint ? '' : 'none',
-      }"
       class="interaction" ref="interaction$" :currentTimeIdx="currentTimeIdx" :list="timeList"
     />