feats

src/components/CustMap.vue

@@ -19,6 +19,10 @@
         <AudioVue :audio="scenicSpots.audio" ref="audioRef" @play="playing = true" @stop="playing = false" />
       </div>
     </div>
+    <img class="map-border border-top" src="map/top.png" alt="" @load="onBorderTopLoad">
+    <img class="map-border border-bottom" src="map/bottom.png" alt=""  @load="onBorderBottomLoad">
+    <img class="map-border border-left" src="map/left.png" alt="" :style="borderLRStyle">
+    <img class="map-border border-right" src="map/right.png" alt="" :style="borderLRStyle">
   </div>
 </template>
 
@@ -28,7 +32,7 @@
   import { useModel } from "@zjxpcyc/vue-tiny-store";
   import { newMarker } from '@/utils/amap';
   import { resources } from '@/utils/resources';
-import wxsdk from "../utils/wx";
+  import wxsdk from "../utils/wx";
 
   const props = defineProps({
     image: {
@@ -51,14 +55,33 @@ import wxsdk from "../utils/wx";
   const scenicSpots = ref({});
   const audioRef = ref();
   const playing = ref(false);
+  const borderTopSize = ref();
+  const borderBottomSize = ref();
 
   const isReady = computed(() => imgRef.value && mapIsReady.value);
+  const borderLRStyle = computed(() => {
+    if (borderTopSize.value && borderBottomSize.value) {
+      return {
+        top: `${borderTopSize.value.height}px`,
+        height: `calc(100% - ${borderTopSize.value.height + borderBottomSize.value.height}px)`,
+      }
+    } else {
+      return {};
+    }
+  });
 
   watch(() => isReady.value, (nw, od) => {
     if (nw && !od) {
       mapInit();
     }
   });
+
+  document.body.addEventListener('click', () => {
+    if (audioRef.value) {
+      audioRef.value.toggle();
+      show.value = false;
+    }
+  });
   
   const onLoad = e => (imgRef.value = e.target);
   const onClickAudio = () => audioRef.value.toggle();
@@ -75,6 +98,15 @@ import wxsdk from "../utils/wx";
     }
   }
 
+  const onBorderTopLoad = (e) => {
+    const { width, height } = e.target;
+    borderTopSize.value = { width, height };
+  }
+  const onBorderBottomLoad = (e) => {
+    const { width, height } = e.target;
+    borderBottomSize.value = { width, height };
+  }
+
   const onMapClick = (e) => {
     const { lnglat } = e;
 
@@ -129,7 +161,7 @@ import wxsdk from "../utils/wx";
       bounds,
       zooms,
     });
-    map.setLayers([imageLayer])
+    map.setLayers([imageLayer]);
 
     // 背景层
     const backCovers = [
@@ -150,8 +182,8 @@ import wxsdk from "../utils/wx";
     const polygon = new AMap.Polygon({
         pathL: backCovers,
         strokeWeight: 0,
-        fillColor: '#E2E3D6',
-        fillOpacity: 0.5
+        fillColor: '#FBF8EF',
+        fillOpacity: 1,
     });
     polygon.setPath(backCovers);
     map.add(polygon);
@@ -214,6 +246,7 @@ import wxsdk from "../utils/wx";
       // padding: 1em;
       border: 1em solid #fff;
       border-radius: 8px;
+      box-shadow:2px 2px 3px #aaaaaa;
       box-sizing: border-box;
       background: #fff;
       overflow-y: auto;
@@ -249,6 +282,29 @@ import wxsdk from "../utils/wx";
       }
     }
   }
+
+  .map-border {
+    display: block;
+    position: absolute;
+    z-index: 20;
+  }
+  
+  .border-top {
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
+  .border-bottom {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+  }  
+  .border-left {
+    left: 0;
+  }
+  .border-right {
+    right: 0;
+  }
 }
 
 </style>

src/utils/resources.js

@@ -16,6 +16,22 @@ export const resources = [
       key: AMAP_KEY,
     },
   },
+  {
+    image: './map/top.png',
+    hidden: true,
+  },
+  {
+    image: './map/bottom.png',
+    hidden: true,
+  },
+  {
+    image: './map/left.png',
+    hidden: true,
+  },
+  {
+    image: './map/right.png',
+    hidden: true,
+  },
   {
     name: '文德桥',
     showGesture: true,