更新页面

src/pages/keyDetection/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="key-detection-page">
     <!-- 顶部导航栏 -->
-    <div class="nav-bar">
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <h1 class="nav-title">重点检测推送</h1>
-      <div class="nav-placeholder"></div>
-    </div>
-
+    <TopNav title="重点检测推送"></TopNav>
     <!-- 标签筛选 -->
     <div class="filter-tabs">
       <div
@@ -54,6 +49,7 @@
 </template>
 
 <script setup>
+import TopNav from "@/components/topNav.vue";
 import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
 import BottomTabs from "@/components/bottomTabs.vue";
@@ -115,13 +111,9 @@ function handleTabChange(value) {
   activeTab.value = value;
 }
 
-function goBack() {
-  router.back();
-}
-
 function goToDetail(item) {
   router.push({
-    path: "/key-detection-detail",
+    path: "/keyDetection/detail",
     query: { id: item.id }
   });
 }
@@ -129,36 +121,7 @@ function goToDetail(item) {
 
 <style lang="scss" scoped>
 .key-detection-page {
-  min-height: 100vh;
   background: #f5f5f5;
-  padding-bottom: 70px;
-}
-
-.nav-bar {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: white;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 12px 16px;
-
-  .nav-back {
-    font-size: 20px;
-    color: #333;
-  }
-
-  .nav-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .nav-placeholder {
-    width: 20px;
-  }
 }
 
 .filter-tabs {
@@ -181,9 +144,12 @@ function goToDetail(item) {
     }
   }
 }
-
 .detection-list {
-  padding: 0 16px;
+  height: calc(100vh - 13vw - 60px - 67px);
+  padding: 10px 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow-y: auto;
 }
 
 .detection-card {