feats

src/components/Image.vue

@@ -23,6 +23,7 @@
         :key="`info-${inx}`"
         :center="infoCenters[inx]"
         :info="info"
+        :show-gesture="resource.showGesture"
       />
     </template>
   </div>

src/components/NaviMap.vue

@@ -32,7 +32,7 @@ const props = defineProps({
 
 const elRef = ref()
 const width = ref(170)
-const height = ref(70)
+const height = ref(120)
 
 const [image] = useModel("mapImage");
 

src/components/ScenicAudio.vue

@@ -51,7 +51,7 @@
   const gestureStyle = computed(() => {
     if (props.center && props.center.length > 1) {
       return {
-        left: `${props.center[0] - width.value}px`,
+        left: `${props.center[0] - width.value / 1.2}px`,
         top: `${props.center[1] - 12}px`
       }
     } else {

src/components/ScenicDetail.vue

@@ -6,31 +6,78 @@
     @click="onShowInfoBtn"
   />
   <PopUpVue :show="showInfo" :info="info" :onClose="onCloseInfoBtn" />
+  <div v-if="showGesture" class="gesture2" :class="{ hidden: gestureHide }" :style="gestureStyle">
+    <i class="iconfont icon-cc-pointer-right"></i>
+  </div>
 </template>
 
 <script setup>  
-import { computed, ref, watch } from "vue";
+  import { computed, ref, watch } from "vue";
   import CoverBtn from "./CoverBtn.vue";
-import PopUpVue from "./PopUp.vue";
+  import PopUpVue from "./PopUp.vue";
 
-const props = defineProps({
-  center: Array,
-  info: {
-    type: Object,
-    default: () => ({})
-  }
-})
+  const props = defineProps({
+    center: Array,
+    info: {
+      type: Object,
+      default: () => ({})
+    },
+    showGesture: {
+      type: Boolean,
+      default: false,
+    },
+  })
 
-const showInfo = ref(false)
-const width = ref(50);
-const height = ref(120);
+  const showInfo = ref(false)
+  const width = ref(50);
+  const height = ref(120);
+  const gestureHide = ref(false);
 
-// 显示详情介绍
-const onShowInfoBtn = () => {
-  showInfo.value=true
-};
+  const gestureStyle = computed(() => {
+    if (props.center && props.center.length > 1) {
+      return {
+        left: `${props.center[0] - 12}px`,
+        top: `${props.center[1] - height.value / 1.8}px`
+      }
+    } else {
+      return {};
+    }
+  });
+  // 显示详情介绍
+  const onShowInfoBtn = () => {
+    gestureHide.value = true;
+    showInfo.value=true
+  };
 
-const onCloseInfoBtn = () => {
-  showInfo.value=false
-};
+  const onCloseInfoBtn = () => {
+    showInfo.value=false
+  };
 </script>
+
+<style lang="less" scoped>
+
+.gesture2 {
+    position: absolute;
+    z-index: 9;
+    animation: gestureAnimation2 1.6s ease-in-out infinite;
+
+    .iconfont {
+      font-size: 24px;
+    }
+
+    &.hidden {
+      display: none;
+    }
+  }
+
+  @keyframes gestureAnimation2 {
+    from {
+      opacity: 0;
+      transform: translateY(0) rotate(90deg);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(12px) rotate(90deg);
+    }
+  }
+</style>