更新页面

src/pages/violationAlerts/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="violation-alerts-page">
     <!-- 顶部导航栏 -->
-    <div class="nav-bar">
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <h1 class="nav-title">违规任务</h1>
-      <van-icon name="filter-o" class="nav-filter" />
-    </div>
+    <TopNav title="违规任务" rightIcon="filter-o" :showRight="true"></TopNav>
 
     <!-- 标签栏 -->
     <div class="tabs-bar">
@@ -109,6 +105,7 @@
 </template>
 
 <script setup>
+import TopNav from "@/components/topNav.vue";
 import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { getTrafficEventList } from "@/api/traffic";
@@ -246,11 +243,6 @@ function getStatusClass(status) {
   return map[status] || "status-gray";
 }
 
-// 返回
-function goBack() {
-  router.back();
-}
-
 // 查看详情
 function handleDetail(alert) {
   router.push({
@@ -290,38 +282,10 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .violation-alerts-page {
-  min-height: 100vh;
+  height: 100vh;
   background: #f1f5f9;
-  padding-bottom: 20px;
 }
 
-.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: 24px;
-    color: #333;
-  }
-
-  .nav-title {
-    font-size: 17px;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .nav-filter {
-    font-size: 24px;
-    color: #333;
-  }
-}
 
 .tabs-bar {
   display: flex;
@@ -350,7 +314,12 @@ onMounted(() => {
 }
 
 .alerts-list {
-  padding: 16px;
+  height: calc(100% - 13vw - 60px);
+  padding: 10px 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow-y: auto;
+
 }
 
 .alert-card {