导航功能调整新增遮罩提示

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
+    VanOverlay: typeof import('vant/es')['Overlay']
     VanPopover: typeof import('vant/es')['Popover']
     VanPopup: typeof import('vant/es')['Popup']
     VanRow: typeof import('vant/es')['Row']

 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-08 12:56:40
+ * @LastEditTime: 2024-01-08 15:56:00
  * @FilePath: /map-demo/src/views/activity.vue
  * @Description: 内部地图主体页面
 -->
@@ -50,7 +50,7 @@
         <van-popover v-model:show="showPopover" @select="onSelect" :actions="actions" placement="right-end">
           <template #reference>
             <div class="item">
-              <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.25rem"
+              <van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
                 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
             </div>
           </template>
@@ -133,6 +133,20 @@
     <van-popup v-model:show="show_floor_popup" position="bottom" :overlay="true" :style="{ height: '100%', background: '#F7F8FA' }">
       <Floor @close="onClose"></Floor>
     </van-popup>
+
+    <van-overlay :show="notice_show" @click="onClickNotice" z-index="9999">
+      <div class="notice-wrapper">
+        <div style="position: absolute; bottom: 5.5rem; left: 10px;">
+          <div style="position: relative; text-align: center; font-size: 0.85rem; width: 2rem; height: 2rem; background-color: white; margin-bottom: 1rem; border-radius: 50%; padding: 2.5px; line-height: 2rem;">
+            <van-icon name="https://cdn.ipadbiz.cn/xys/map/C5C4D820-25A0-4740-892A-6C4FFB24BF34.png" size="1.25rem"
+              style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
+          </div>
+        </div>
+        <div class="notice-block">
+          点击显示活动路径
+        </div>
+      </div>
+    </van-overlay>
   </div>
 </template>
 
@@ -298,6 +312,7 @@ export default {
       current_activity_route: [],
       route_activity_marker: [],
       show_activity_route: false,
+      notice_show: false,
     }
   },
   async mounted() {
@@ -326,6 +341,12 @@ export default {
     });
     // 设置贴片地图
     this.setTitleLayer();
+    // 导航提醒
+    if (localStorage.getItem('first_in') !== '1') {
+      this.notice_show = true;
+    } else {
+      this.notice_show = false;
+    }
   },
   watch: {
     // show_popup(val) {
@@ -1514,7 +1535,11 @@ export default {
       this.map.remove([...this.current_activity_route]); // 删除地图折线
       this.map.remove(this.route_activity_marker); // 删除起始点标记
     },
+    onClickNotice () {
+      this.notice_show = false;
+      localStorage.setItem('first_in', '1');
     }
+  },
 }
 </script>
 
@@ -1730,4 +1755,23 @@ export default {
   transform: scaleY(.5);
 }
 
+.notice-wrapper {
+  position: relative;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+  height: 100%;
+}
+
+.notice-block {
+  background-color: #fff;
+  position: absolute;
+  bottom: 6.5rem;
+  left: 55px;
+  color: #965f13;
+  padding: 0.3rem 0.5rem;
+  border-radius: 5px;
+  font-size: 0.9rem;
+}
+
 </style>