feats

src/components/CustMap.vue

@@ -24,6 +24,7 @@
     <img class="map-border border-left" :src="borders[2]" alt="" :style="borderLRStyle">
     <img class="map-border border-right" :src="borders[3]" alt="" :style="borderLRStyle">
     <ZoomOut class="map-zoom-gesture" v-if="showZoomGesture" />
+    <div class="slide-tip">点击此处 上下滑动</div>
   </div>
 </template>
 
@@ -80,7 +81,6 @@
   });
 
   document.body.addEventListener('click', () => {
-    showZoomGesture.value = false;
     if (playing.value) {
       audioRef.value.toggle();
     }
@@ -112,7 +112,6 @@
   }
 
   const onMapClick = (e) => {
-    showZoomGesture.value = false
     const { lnglat } = e;
 
     // 计算点击位置, 与各景点距离
@@ -148,6 +147,7 @@
       center,
       zooms,
       zoom: zooms[0],
+      // dragEnable: false, // 禁止拖动
     });
 
     // 获取左上角经纬度
@@ -200,27 +200,31 @@
       console.log('--------->', e)
       onMapClick(e)
     })
+
+    map.on('zoomchange', (e) => {
+      console.log('----zoomchange----->', e)
+    })
   }
 
-  // onMounted(() => {
-  //   // 当前地图可见的时候展示放大手势
-  //   // 2秒后自动关闭
-  //   const observer = new IntersectionObserver((entries) => {
-  //     if (entries && entries[0]) {
-  //       if (entries[0].intersectionRatio >= 0.6) {
-  //         showZoomGesture.value = true;
-
-  //         const t = setTimeout(() => {
-  //           clearTimeout(t);
-  //           showZoomGesture.value = false;
-  //           observer.disconnect();
-  //         }, 2000);
-  //       }
-  //     }
-  //   }, { threshold: [0.6] });
-
-  //   observer.observe(elRef.value);
-  // })
+  onMounted(() => {
+    // 当前地图可见的时候展示放大手势
+    // 2秒后自动关闭
+    const observer = new IntersectionObserver((entries) => {
+      if (entries && entries[0]) {
+        if (entries[0].intersectionRatio >= 0.6) {
+          showZoomGesture.value = true;
+
+          const t = setTimeout(() => {
+            clearTimeout(t);
+            showZoomGesture.value = false;
+            observer.disconnect();
+          }, 2000);
+        }
+      }
+    }, { threshold: [0.6] });
+
+    observer.observe(elRef.value);
+  })
 
 </script>
 
@@ -337,6 +341,20 @@
     left: calc(50% - 25px);
     top: calc(50% - 50px);
   }
+
+  .slide-tip {
+    left: auto;
+    top: 160px;
+    right: 2px;
+    width: 1.6em;
+    height: 300px;
+    color: #576147;
+    letter-spacing: 2px;
+    font-weight: bold;
+    writing-mode: vertical-lr;
+    z-index: 200;
+    cursor: pointer;
+  }
 }
 
 </style>

src/components/PopUp.vue

@@ -68,9 +68,14 @@ watch(() => props.show, (val) => {
       line-height: 1.6em;
       padding: 0 20px;
       font-size: 20px;
-      text-indent: 42px;
       margin-top: 30px;
       color: #fff;
+      
+      // text-indent: 2em;
+      line-break: anywhere;
+      word-break: keep-all;
+      word-wrap: break-word;
+      overflow-wrap: anywhere;
     }
   }
   .warp::-webkit-scrollbar {

src/utils/resources.js

@@ -233,7 +233,7 @@ export const resources = [
     desc: `长干里位于南京市秦淮区内秦淮河以南至雨花台以北，是中国古代著名的地名，是江南佛教圣地，素有“佛陀里”之美誉。长干里地势高亢，雨花台陈于前，秦淮河卫其后，大江护其西，又是秦淮河的入江通道，战略地位十分重要。南京城市的雏形——越城就位于此。范蠡之所以选择在此筑越城，就是看到这块地方物产丰富，交通便利，商业繁荣，人中密集，同时，这里有山水卫护，攻守皆宜。秦、汉、六朝时期，长干里是南京最繁华的地方，是著名的商业区和货物集散地。`,
   },
   {
-    name: '报恩寺',
+    name: '大报恩寺遗址景区',
     image: './images/17.jpg',
     thumb1: './infos/17大报恩寺.jpg',
     thumb2: './map/大报恩寺.jpg',