更新

src/components/topNav.vue

@@ -6,9 +6,7 @@
       </span>
       <span :style="{color:fontColor}" class="navtitle">{{ title }}</span>
       <van-icon :name="rightIcon" :color="props.fontColor" size="25px" @click.stop="onClickRight" v-if="showRight" />
-      <span class="rightTitle" @click="onClickRight" v-if="rightTitle">{{
-        rightTitle
-      }}</span>
+      <span class="rightTitle" @click="onClickRight" v-if="rightTitle">{{ rightTitle }}</span>
     </div>
   </van-config-provider>
 </template>

src/pages/map/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="map-page">
     <!-- 顶部导航栏 -->
-    <div class="nav-bar">
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <h1 class="nav-title">预警地图</h1>
-      <van-icon name="filter" class="nav-filter" @click="showFilter = !showFilter" />
-    </div>
-
+    <TopNav title="预警地图" rightIcon="filter-o" :showRight="true" @click-right="showFilter = !showFilter"></TopNav>
     <!-- 预警类型切换按钮 -->
     <div class="type-tabs">
       <button class="type-tab" :class="{ active: activeAlertType === 'road' }" @click="activeAlertType = 'road'">路况预警</button>
@@ -82,6 +77,7 @@
 </template>
 
 <script setup>
+import TopNav from "@/components/topNav.vue";
 import { ref, onMounted, watch, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import BottomTabs from "@/components/bottomTabs.vue";
@@ -204,11 +200,6 @@ onMounted(() => {
   fetchUnfinishedEvents();
 });
 
-// 返回
-function goBack() {
-  router.back();
-}
-
 // 定位点击
 function handleLocationClick() {
   console.log("定位到当前位置");
@@ -242,32 +233,6 @@ function resetFilter() {
   background: #f3f4f6;
 }
 
-.nav-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: white;
-  padding: 12px 16px;
-  border-bottom: 1px solid #e5e7eb;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  .nav-back {
-    font-size: 24px;
-    color: #333;
-  }
-
-  .nav-title {
-    font-size: 17px;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .nav-filter {
-    font-size: 24px;
-    color: #333;
-  }
-}
-
 .type-tabs {
   display: flex;
   gap: 12px;