eats

src/components/CustMap.vue

@@ -16,9 +16,9 @@
           </div>
         </div>
         <div class="body">{{ scenicSpots.desc }}</div>
-        <AudioVue :audio="scenicSpots.audio" ref="audioRef" @play="playing = true" @stop="playing = false" />
       </div>
     </div>
+    <AudioVue :audio="scenicSpots.audio" ref="audioRef" @play="playing = true" @stop="playing = false" />
     <img class="map-border border-top" :src="borders[0]" alt="" @load="onBorderTopLoad">
     <img class="map-border border-bottom" :src="borders[1]" alt=""  @load="onBorderBottomLoad">
     <img class="map-border border-left" :src="borders[2]" alt="" :style="borderLRStyle">
@@ -80,12 +80,12 @@
     }
   });
 
-  document.body.addEventListener('click', () => {
+  const stopAudio = () => {
     if (playing.value) {
       audioRef.value.toggle();
+      playing.value = false;
     }
-    show.value = false;
-  });
+  }
   
   const onLoad = e => (imgRef.value = e.target);
   const onClickAudio = () => audioRef.value.toggle();
@@ -130,6 +130,7 @@
     if (last.s < diff) {
       scenicSpots.value = last;
       show.value = true;
+      stopAudio();
     } else {
       show.value = false;
     }

src/utils/resources.js

@@ -16,13 +16,6 @@ export const resources = [
     name: '封面2',
     image: './images/封面2.jpg',
   },
-  {
-    type: 'map',
-    image: './map/map.png',
-    amap: {
-      key: AMAP_KEY,
-    },
-  },
   {
     image: borders[0],
     hidden: true,
@@ -352,6 +345,13 @@ export const resources = [
     audio: './audios/26南京世界文学客厅.mp3',
     desc: `南京世界文学客厅位于南京紫金山入城余脉、古鸡笼山下东南角，由一座3000平方米的院落改造而成。1500多年前，这里是中国历史上第一座文学馆所在地，而今是南京文学空间网络建设的中心和枢纽，承担了南京文学空间城市空间建设引领性的作用，打造“文学之都”的城市客厅、交流展示中心、文学创新活动的试验场，展示南京的文学文脉和作为天下文枢的独特地位，链接全市文学空间与地标，建立数据共享系统，促进文学互动展示体验与文学创作创新。`,
   },
+  {
+    type: 'map',
+    image: './map/map.png',
+    amap: {
+      key: AMAP_KEY,
+    },
+  },
   {
     image: './images/27末尾.jpg',
     links: [