feats

src/components/CustMap.vue

@@ -23,16 +23,18 @@
     <img class="map-border border-bottom" :src="borders[1]" alt=""  @load="onBorderBottomLoad">
     <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>
 </template>
 
 <script setup>
-  import { computed, ref, watch } from "vue";
-  import AudioVue from './Audio.vue';
+  import { computed, onMounted, ref, watch } from "vue";
   import { useModel } from "@zjxpcyc/vue-tiny-store";
   import { newMarker } from '@/utils/amap';
   import { resources, borders } from '@/utils/resources';
-  import wxsdk from "../utils/wx";
+  import wxsdk from "@/utils/wx";
+  import AudioVue from './Audio.vue';
+  import ZoomOut from './ZoomOut.vue';
 
   const props = defineProps({
     image: {
@@ -57,6 +59,7 @@
   const playing = ref(false);
   const borderTopSize = ref();
   const borderBottomSize = ref();
+  const showZoomGesture = ref(true);
 
   const isReady = computed(() => imgRef.value && mapIsReady.value);
   const borderLRStyle = computed(() => {
@@ -77,6 +80,7 @@
   });
 
   document.body.addEventListener('click', () => {
+    showZoomGesture.value = false;
     if (playing.value) {
       audioRef.value.toggle();
     }
@@ -108,6 +112,7 @@
   }
 
   const onMapClick = (e) => {
+    showZoomGesture.value = false
     const { lnglat } = e;
 
     // 计算点击位置, 与各景点距离
@@ -197,6 +202,26 @@
     })
   }
 
+  // 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>
 
 <style lang="less" scoped>
@@ -305,6 +330,13 @@
   .border-right {
     right: 0;
   }
+  
+  .map-zoom-gesture {
+    width: 100px;
+    height: 100px;
+    left: calc(50% - 25px);
+    top: calc(50% - 50px);
+  }
 }
 
 </style>

src/components/ZoomOut.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="room-out-box">
+    <i class="iconfont icon-arrow-right"></i>
+    <i class="iconfont icon-arrow-right"></i>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.room-out-box {
+  transform: rotate(-45deg);
+
+  .iconfont {
+    font-size: 50px;
+    color: #333;
+    display: inline-block;
+    position: absolute;
+    
+    &:first-child {
+      top: 0;
+      right: 0;
+      animation: toright 1.2s ease-in-out infinite;
+    }
+
+    &:last-child {
+      top: -2px;  // 微调
+      left: 0;
+      animation: toleft 1.2s ease-in-out infinite;
+    }
+  }
+
+  @keyframes toleft {
+    from {
+      transform: rotate(180deg) translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: rotate(180deg) translateX(20px);
+      opacity: 0;
+    }
+  }
+
+  @keyframes toright {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(20px);
+      opacity: 0;
+    }
+  }
+}
+</style>