From 9b9005a66eecd0772d3a0b10bf5d8faae6eeba6a Mon Sep 17 00:00:00 2001
From: Esacpe <1113279529@qq.com>
Date: Mon, 27 Apr 2026 19:05:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/topNav.vue            |  23 +-
 src/pages/alertHandle/index.vue      | 122 +++++------
 src/pages/dataReport/index.vue       |  46 +---
 src/pages/keyDetection/detail.vue    | 174 +++++++--------
 src/pages/keyDetection/index.vue     |  50 +----
 src/pages/sspReport/index.vue        | 302 ++++++++++++---------------
 src/pages/trafficAlerts/detail.vue   | 282 +++++++++++--------------
 src/pages/trafficAlerts/index.vue    |  49 +----
 src/pages/violationAlerts/detail.vue | 295 ++++++++++++--------------
 src/pages/violationAlerts/index.vue  |  49 +----
 src/utils/watermark.js               |   2 +-
 11 files changed, 583 insertions(+), 811 deletions(-)

diff --git a/src/components/topNav.vue b/src/components/topNav.vue
index 65e5614..44b82b6 100644
--- a/src/components/topNav.vue
+++ b/src/components/topNav.vue
@@ -1,11 +1,11 @@
 <template>
   <van-config-provider :theme-vars="themeVars">
-    <div class="headBlue">
+    <div class="headBlue" :style="{ backgroundColor: props.bgColor }">
       <span class="fh" @click="onCLickFh" v-if="showLeft">
-        <van-icon name="arrow-left" color="#fff" size="18px" />
+        <van-icon name="arrow-left" :color="props.fontColor" size="24px" />
       </span>
-      <span>{{ title }}</span>
-      <van-icon :name="rightIcon" color="#fff" size="25px" @click.stop="onClickRight" v-if="showRight" />
+      <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>
@@ -20,6 +20,14 @@ const props = defineProps({
   title: String, //标题
   showRight: Boolean, //是否显示右侧菜单图标
   rightTitle: String, //右侧内容
+  fontColor: {
+    type: String,
+    default: '#333',
+  }, //背景颜色
+  bgColor: {
+    type: String,
+    default: '#fff',
+  }, //背景颜色
   showLeft: {
     type: Boolean,
     default: true,
@@ -54,9 +62,7 @@ function onClickRight() {
 @import "../assets/styles/mixin.scss";
 
 .headBlue {
-  position: fixed;
   width: 100%;
-  top: 0;
   height: 13vw;
   text-align: center;
   line-height: 13vw;
@@ -64,8 +70,11 @@ function onClickRight() {
   z-index: 999;
   @include font_size($font_large_s);
   @include top-color-title($top-color-title-theme);
+  border-bottom: 1px solid #e5e5e5;
+}
+.navtitle{
+  font-weight: 600;
 }
-
 ::v-deep .van-popover__wrapper {
   position: absolute;
   right: 4vw;
diff --git a/src/pages/alertHandle/index.vue b/src/pages/alertHandle/index.vue
index 7934a96..1f34861 100644
--- a/src/pages/alertHandle/index.vue
+++ b/src/pages/alertHandle/index.vue
@@ -1,70 +1,69 @@
 <template>
   <div class="alert-handle-page">
     <!-- 顶部导航栏 -->
-    <div class="nav-bar">
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <div class="nav-title">{{ pageTitle }}</div>
-      <div class="nav-placeholder"></div>
-    </div>
+    <TopNav :title="pageTitle"></TopNav>
 
-    <!-- 现场情况 -->
-    <div class="section-card">
-      <div class="section-title">现场情况</div>
-
-      <!-- 拍照和录视频按钮 -->
-      <div class="action-buttons">
-        <div class="action-btn" @click="handleTakePhoto">
-          <van-icon name="photograph" class="action-icon" />
-          <span>拍照</span>
+    <div class="alert-handle-page-cnt">
+      <!-- 现场情况 -->
+      <div class="section-card">
+        <div class="section-title">现场情况</div>
+  
+        <!-- 拍照和录视频按钮 -->
+        <div class="action-buttons">
+          <div class="action-btn" @click="handleTakePhoto">
+            <van-icon name="photograph" class="action-icon" />
+            <span>拍照</span>
+          </div>
+          <div class="action-btn" @click="handleTakeVideo">
+            <van-icon name="video-o" class="action-icon" />
+            <span>录视频</span>
+          </div>
         </div>
-        <div class="action-btn" @click="handleTakeVideo">
-          <van-icon name="video-o" class="action-icon" />
-          <span>录视频</span>
+  
+        <!-- 照片预览 -->
+        <div v-if="photos.length > 0" class="preview-section">
+          <div class="preview-label">已拍照片：</div>
+          <div class="photo-grid">
+            <div v-for="(photo, index) in photos" :key="index" class="photo-item">
+              <van-image :src="photo.base64" fit="cover" class="photo-img">
+                <template v-slot:loading>
+                  <van-loading type="spinner" size="20" />
+                </template>
+              </van-image>
+              <van-icon name="close" class="photo-delete" @click="deletePhoto(index)" />
+            </div>
+          </div>
         </div>
-      </div>
-
-      <!-- 照片预览 -->
-      <div v-if="photos.length > 0" class="preview-section">
-        <div class="preview-label">已拍照片：</div>
-        <div class="photo-grid">
-          <div v-for="(photo, index) in photos" :key="index" class="photo-item">
-            <van-image :src="photo.base64" fit="cover" class="photo-img">
-              <template v-slot:loading>
-                <van-loading type="spinner" size="20" />
-              </template>
-            </van-image>
-            <van-icon name="close" class="photo-delete" @click="deletePhoto(index)" />
+  
+        <!-- 视频预览 -->
+        <div v-if="videos.length > 0" class="preview-section">
+          <div class="preview-label">已录视频：</div>
+          <div class="video-list">
+            <div v-for="(video, index) in videos" :key="index" class="video-item">
+              <van-icon name="video-o" class="video-icon" />
+              <span class="video-name">视频 {{ index + 1 }}</span>
+              <span class="video-delete" @click="deleteVideo(index)">删除</span>
+            </div>
           </div>
         </div>
       </div>
-
-      <!-- 视频预览 -->
-      <div v-if="videos.length > 0" class="preview-section">
-        <div class="preview-label">已录视频：</div>
-        <div class="video-list">
-          <div v-for="(video, index) in videos" :key="index" class="video-item">
-            <van-icon name="video-o" class="video-icon" />
-            <span class="video-name">视频 {{ index + 1 }}</span>
-            <span class="video-delete" @click="deleteVideo(index)">删除</span>
-          </div>
-        </div>
+  
+      <!-- 反馈内容 -->
+      <div class="section-card">
+        <div class="section-title">反馈内容</div>
+        <van-field
+          v-model="feedbackText"
+          type="textarea"
+          placeholder="请输入现场处理情况和反馈内容..."
+          rows="5"
+          autosize
+          maxlength="500"
+          show-word-limit
+          class="feedback-input"
+        />
       </div>
     </div>
 
-    <!-- 反馈内容 -->
-    <div class="section-card">
-      <div class="section-title">反馈内容</div>
-      <van-field
-        v-model="feedbackText"
-        type="textarea"
-        placeholder="请输入现场处理情况和反馈内容..."
-        rows="5"
-        autosize
-        maxlength="500"
-        show-word-limit
-        class="feedback-input"
-      />
-    </div>
 
     <!-- 底部保存按钮 -->
     <div class="submit-bar">
@@ -76,6 +75,7 @@
 </template>
 
 <script setup>
+import TopNav from "@/components/topNav.vue";
 import { ref, computed, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { Toast } from "vant";
@@ -101,10 +101,6 @@ const photos = ref(['http://220.166.58.28:172/profile/upload/2026/04/15/bb_total
 const videos = ref([]);
 const isSubmitting = ref(false);
 
-// 返回
-function goBack() {
-  router.back();
-}
 
 // 拍照
 function handleTakePhoto() {
@@ -224,9 +220,13 @@ $text-dark: #1e293b;
 $bg-gray: #f1f5f9;
 
 .alert-handle-page {
-  min-height: 100vh;
+  height: 100vh;
   background: $bg-gray;
-  padding-bottom: 80px;
+  .alert-handle-page-cnt {
+    height: calc(100% - 13vw - 76px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
 }
 
 .nav-bar {
diff --git a/src/pages/dataReport/index.vue b/src/pages/dataReport/index.vue
index fad8bb0..f4b08f7 100644
--- a/src/pages/dataReport/index.vue
+++ b/src/pages/dataReport/index.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="data-report-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="page-content">
       <!-- 车辆抓拍 -->
@@ -168,6 +163,7 @@
 </template>
 
 <script setup>
+import TopNav from "@/components/topNav.vue";
 import { ref, computed, nextTick } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { Toast } from "vant";
@@ -354,48 +350,20 @@ function handleSave() {
   router.back();
 }
 
-// 返回
-function goBack() {
-  router.back();
-}
 </script>
 
 <style lang="scss" scoped>
 .data-report-page {
-  min-height: 100vh;
+  height: 100vh;
   background: #f1f5f9;
-  padding-bottom: 100px;
-}
-
-.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-placeholder {
-    width: 24px;
-  }
 }
 
 .page-content {
   padding: 16px;
+  box-sizing: border-box;
+  height: calc(100% - 13vw - 4px);
+  overflow: hidden;
+  overflow-y: auto;
 }
 
 .section-card {
diff --git a/src/pages/keyDetection/detail.vue b/src/pages/keyDetection/detail.vue
index 1f4c41c..7ac187f 100644
--- a/src/pages/keyDetection/detail.vue
+++ b/src/pages/keyDetection/detail.vue
@@ -1,57 +1,55 @@
 <template>
+  
   <div class="detail-page">
-    <!-- 顶部导航栏 -->
-    <div class="nav-bar">
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <div class="nav-title">重点检测详情</div>
-      <div class="nav-placeholder"></div>
-    </div>
+    <TopNav title="重点检测详情"></TopNav>
 
-    <!-- 检测信息卡片 -->
-    <div class="detail-card">
-      <div class="card-header">
-        <div class="detail-type" :class="detail.typeClass">
-          {{ detail.typeText }}
+    <div class="detail-page-cont">
+      <!-- 检测信息卡片 -->
+      <div class="detail-card">
+        <div class="card-header">
+          <div class="detail-type" :class="detail.typeClass">
+            {{ detail.typeText }}
+          </div>
+          <div class="detail-status" :class="detail.statusClass">
+            {{ detail.statusText }}
+          </div>
         </div>
-        <div class="detail-status" :class="detail.statusClass">
-          {{ detail.statusText }}
+  
+        <div class="card-body">
+          <div class="info-row">
+            <span class="label">检测对象：</span>
+            <span class="value">{{ detail.objectInfo }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">发布时间：</span>
+            <span class="value">{{ detail.issueTime }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">发布人：</span>
+            <span class="value">{{ detail.issuer }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">联系方式：</span>
+            <span class="value link">{{ detail.contact }}</span>
+          </div>
+        </div>
+  
+        <div class="card-desc">
+          <div class="desc-title">详细描述</div>
+          <div class="desc-content">{{ detail.description }}</div>
         </div>
       </div>
-
-      <div class="card-body">
-        <div class="info-row">
-          <span class="label">检测对象：</span>
-          <span class="value">{{ detail.objectInfo }}</span>
-        </div>
-        <div class="info-row">
-          <span class="label">发布时间：</span>
-          <span class="value">{{ detail.issueTime }}</span>
-        </div>
-        <div class="info-row">
-          <span class="label">发布人：</span>
-          <span class="value">{{ detail.issuer }}</span>
-        </div>
-        <div class="info-row">
-          <span class="label">联系方式：</span>
-          <span class="value link">{{ detail.contact }}</span>
-        </div>
-      </div>
-
-      <div class="card-desc">
-        <div class="desc-title">详细描述</div>
-        <div class="desc-content">{{ detail.description }}</div>
-      </div>
-    </div>
-
-    <!-- 处理记录 -->
-    <div class="record-card" v-if="detail.records && detail.records.length > 0">
-      <div class="card-title">处理记录</div>
-      <div class="record-list">
-        <div v-for="(record, index) in detail.records" :key="index" class="record-item">
-          <div class="record-dot"></div>
-          <div class="record-content">
-            <div class="record-time">{{ record.time }}</div>
-            <div class="record-text">{{ record.content }}</div>
+  
+      <!-- 处理记录 -->
+      <div class="record-card" v-if="detail.records && detail.records.length > 0">
+        <div class="card-title">处理记录</div>
+        <div class="record-list">
+          <div v-for="(record, index) in detail.records" :key="index" class="record-item">
+            <div class="record-dot"></div>
+            <div class="record-content">
+              <div class="record-time">{{ record.time }}</div>
+              <div class="record-text">{{ record.content }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -67,34 +65,42 @@
 </template>
 
 <script setup>
+import TopNav from "@/components/topNav.vue";
 import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { Toast } from "vant";
 
 const router = useRouter();
 const route = useRoute();
 
 // 检测详情数据
-const detail = ref({
-  id: "",
-  type: "vehicle",
-  typeText: "重点车辆监控",
-  typeClass: "type-vehicle",
-  status: "unread",
-  statusText: "未读",
-  statusClass: "status-unread",
-  objectInfo: "鄂A88888号车辆为重点监控对象",
-  issueTime: "2026/03/27 10:30",
-  issuer: "指挥中心",
-  contact: "027-88888888",
-  description: "该车辆为重点监控对象，发现请立即上报处理。近期有多次违章记录，需重点关注。",
-  records: []
-});
+const detail = ref(
+  {
+    id: "",
+    type: "vehicle",
+    typeText: "重点车辆监控",
+    typeClass: "type-vehicle",
+    status: "unread",
+    statusText: "未读",
+    statusClass: "status-unread",
+    objectInfo: "鄂A88888号车辆为重点监控对象",
+    issueTime: "2026/03/27 10:30",
+    issuer: "指挥中心",
+    contact: "027-88888888",
+    description: "该车辆为重点监控对象，发现请立即上报处理。近期有多次违章记录，需重点关注。",
+    records: [
+      {
+        time: "2026/03/27 11:00",
+        content: "张三上报已接警，正在处理。",
+      },
+      {
+        time: "2026/03/27 12:30",
+        content: "李四上报已到达现场，正在核实情况。",
+      },
+    ]
+  },
+
+);
 
-// 返回
-function goBack() {
-  router.back();
-}
 
 // 上报处理结果
 function handleReport() {
@@ -111,35 +117,11 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .detail-page {
-  min-height: 100vh;
   background: #f5f5f5;
-  padding-bottom: 100px;
-}
-
-.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;
+  .detail-page-cont{
+    height: calc(100vh - 13vw - 70px);
+    overflow: hidden;
+    overflow-y: auto;
   }
 }
 
diff --git a/src/pages/keyDetection/index.vue b/src/pages/keyDetection/index.vue
index 6fbe6d1..e1cf287 100644
--- a/src/pages/keyDetection/index.vue
+++ b/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 {
diff --git a/src/pages/sspReport/index.vue b/src/pages/sspReport/index.vue
index 1b387c8..87b01aa 100644
--- a/src/pages/sspReport/index.vue
+++ b/src/pages/sspReport/index.vue
@@ -1,141 +1,138 @@
 <template>
   <div class="ssp-report-page">
     <!-- 顶部导航 -->
-    <div class="top-nav">
-      <div class="nav-left" @click="goBack">
-        <van-icon name="arrow-left" />
-      </div>
-      <div class="nav-title">随手拍</div>
-      <div class="nav-right"></div>
+    <TopNav title="随手拍" fontColor="#fff" bgColor="#2563eb"></TopNav>
+    <div class="form-cnt">
+      <!-- 表单内容 -->
+      <van-form @submit="handleSubmit" class="form">
+        <div class="form-content">
+  
+          <!-- 设备信息 -->
+          <div class="section-card">
+            <div class="section-header" @click="toggleSection('device')">
+              <div class="section-title-box">
+                <span class="section-icon">▶</span>
+                <span class="section-title">设备信息</span>
+              </div>
+              <van-icon :name="openSections.device ? 'arrow-up' : 'arrow-down'" />
+            </div>
+            <div class="section-body" v-show="openSections.device">
+              <van-cell-group :border="false">
+                <van-field v-model="formData.sbbhMc" @click="openPicker('设备编号', 'sbbh')" is-link readonly name="设备编号" label="设备编号" placeholder="请选择"  required :rules="[{ required: true, message: '请选择设备编号' }]"/>
+                <van-field v-model="formData.zqmjMc" @click="openPicker('执法民警', 'zqmj')" is-link readonly name="执法民警" label="执法民警" placeholder="请选择" required :rules="[{ required: true, message: '请选择执法民警' }]"/>
+              </van-cell-group>
+            </div>
+          </div>
+  
+          <!-- 车辆信息 -->
+          <div class="section-card">
+            <div class="section-header" @click="toggleSection('vehicle')">
+              <div class="section-title-box">
+                <span class="section-icon">▶</span>
+                <span class="section-title">车辆信息</span>
+              </div>
+              <van-icon :name="openSections.vehicle ? 'arrow-up' : 'arrow-down'" />
+            </div>
+            <div class="section-body" v-show="openSections.vehicle">
+              <van-cell-group :border="false">
+                <van-field v-model="formData.clflMc" @click="openPicker('车辆分类', 'clfl')" is-link readonly name="车辆分类" label="车辆分类" placeholder="请选择"/>
+                <van-field v-model="formData.hpzlMc" @click="openPicker('号牌种类', 'hpzl')" is-link readonly name="号牌种类" label="号牌种类" placeholder="请选择"/>
+                <van-field v-model="formData.hphm" name="号牌牌号" label="号牌牌号" placeholder="请输入" maxlength="10" />
+              </van-cell-group>
+            </div>
+          </div>
+  
+          <!-- 违法信息 -->
+          <div class="section-card">
+            <div class="section-header" @click="toggleSection('violation')">
+              <div class="section-title-box">
+                <span class="section-icon">▶</span>
+                <span class="section-title">违法信息</span>
+              </div>
+              <van-icon :name="openSections.violation ? 'arrow-up' : 'arrow-down'" />
+            </div>
+            <div class="section-body" v-show="openSections.violation">
+              <van-cell-group :border="false">
+                <van-field v-model="formData.xzqhMc" @click="openPicker('非法行政区划', 'xzqh')" is-link readonly name="非法行政区划" label="非法行政区划" placeholder="请输入非法行政区划" />
+                <van-field v-model="formData.wgddMc" name="违法地点" label="违法地点" placeholder="请输入违法地点" required :rules="[{ required: true, message: '请输入违法地点' }]" />
+                <van-field v-model="formData.lddmMc" name="路段码公里数" label="路段码公里数" placeholder="请输入路段码公里数" />
+                <van-field v-model="formData.ddmsMc" name="地点米数" label="地点米数" placeholder="请输入地点米数" />
+                <van-field v-model="formData.wfdzMc" name="违法地址" label="违法地址" placeholder="请输入违法地址" />
+                <van-field v-model="formData.wfsj" @click="openPicker('违法发生时间', 'wfsj')" is-link readonly name="违法发生时间" label="违法发生时间" placeholder="请选择违法发生时间"/>
+                <van-field v-model="formData.wfsj1" @click="openPicker('违法时间', 'wfsj1')" is-link readonly name="违法时间" label="违法时间" placeholder="请选择违法时间" />
+                <van-field v-model="formData.scz" name="实测值" label="实测值" placeholder="请输入实测值" />
+                <van-field v-model="formData.bzz" name="标准值" label="标准值" placeholder="请输入标准值" />
+                <van-field v-model="formData.fxjg" name="违法发现机关" label="违法发现机关" placeholder="请输入违法发现机关" />
+              </van-cell-group>
+            </div>
+          </div>
+  
+          <!-- 照片信息 -->
+          <div class="section-card">
+            <div class="section-header" @click="toggleSection('photo')">
+              <div class="section-title-box">
+                <span class="section-icon">▶</span>
+                <span class="section-title">照片信息</span>
+              </div>
+              <van-icon :name="openSections.photo ? 'arrow-up' : 'arrow-down'" />
+            </div>
+            <div class="section-body" v-show="openSections.photo">
+              <!-- 照片上传卡片 -->
+              <div class="photo-upload-list">
+                <div class="photo-upload-item" v-for="(photo, index) in photoList" :key="index">
+                  <div style="text-align: left;">照片{{ index + 1 }}</div>
+                  <FileUploader
+                    v-model="photo.url"
+                    :preview-size="200"
+                    placeholder="点击拍照/上传"
+                    @success="(url) => onPhotoUploaded(url, index)"
+                    @delete="onPhotoDelete(index)"
+                  />
+                  <van-field v-model="photo.url" label="图片链接" placeholder="请输入图片链接" class="photo-link-field" />
+                </div>
+              </div>
+              <!-- 照片基本信息 -->
+              <van-cell-group :border="false">
+                <van-field v-model="formData.zpsl" name="照片数量" label="照片数量" readonly type="number" placeholder="请输入照片数量" required :rules="[{ required: true, message: '请输入照片数量' }]" />
+                <van-field v-model="formData.zpxm" name="图片文件名" label="图片文件名" placeholder="请输入图片文件名" />
+                <van-field v-model="formData.tpfsMc" @click="openPicker('图片方式', 'tpfs')" is-link readonly name="图片方式" label="图片方式" placeholder="请选择图片方式"/>
+                <van-field v-model="formData.wfspdz" name="违法视频地址" label="违法视频地址" placeholder="请输入违法视频地址" />
+              </van-cell-group>
+            </div>
+          </div>
+  
+          <!-- 其他信息 -->
+          <div class="section-card">
+            <div class="section-header" @click="toggleSection('other')">
+              <div class="section-title-box">
+                <span class="section-icon">▶</span>
+                <span class="section-title">其他信息</span>
+              </div>
+              <van-icon :name="openSections.other ? 'arrow-up' : 'arrow-down'" />
+            </div>
+            <div class="section-body" v-show="openSections.other">
+              <van-cell-group :border="false">
+                <van-field v-model="formData.tzsh" name="通知书号" label="通知书号" placeholder="请输入通知书号"/>
+                <van-field v-model="formData.tzrq" @click="openPicker('通知日期', 'tzrq')" is-link readonly name="通知日期" label="通知日期" placeholder="请输入通知日期" />
+              </van-cell-group>
+            </div>
+          </div>
+        </div>
+        <!-- 底部提交按钮 -->
+        <div class="bottom-action">
+          <van-button type="primary" :loading="isLoading" block round color="#2563eb" native-type="submit">
+            提交
+          </van-button>
+        </div>
+      </van-form>
     </div>
 
-    <!-- 表单内容 -->
-    <van-form @submit="handleSubmit" class="form">
-      <div class="form-content">
-
-        <!-- 设备信息 -->
-        <div class="section-card">
-          <div class="section-header" @click="toggleSection('device')">
-            <div class="section-title-box">
-              <span class="section-icon">▶</span>
-              <span class="section-title">设备信息</span>
-            </div>
-            <van-icon :name="openSections.device ? 'arrow-up' : 'arrow-down'" />
-          </div>
-          <div class="section-body" v-show="openSections.device">
-            <van-cell-group :border="false">
-              <van-field v-model="formData.sbbhMc" @click="openPicker('设备编号', 'sbbh')" is-link readonly name="设备编号" label="设备编号" placeholder="请选择"  required :rules="[{ required: true, message: '请选择设备编号' }]"/>
-              <van-field v-model="formData.zqmjMc" @click="openPicker('执法民警', 'zqmj')" is-link readonly name="执法民警" label="执法民警" placeholder="请选择" required :rules="[{ required: true, message: '请选择执法民警' }]"/>
-            </van-cell-group>
-          </div>
-        </div>
-
-        <!-- 车辆信息 -->
-        <div class="section-card">
-          <div class="section-header" @click="toggleSection('vehicle')">
-            <div class="section-title-box">
-              <span class="section-icon">▶</span>
-              <span class="section-title">车辆信息</span>
-            </div>
-            <van-icon :name="openSections.vehicle ? 'arrow-up' : 'arrow-down'" />
-          </div>
-          <div class="section-body" v-show="openSections.vehicle">
-            <van-cell-group :border="false">
-              <van-field v-model="formData.clflMc" @click="openPicker('车辆分类', 'clfl')" is-link readonly name="车辆分类" label="车辆分类" placeholder="请选择"/>
-              <van-field v-model="formData.hpzlMc" @click="openPicker('号牌种类', 'hpzl')" is-link readonly name="号牌种类" label="号牌种类" placeholder="请选择"/>
-              <van-field v-model="formData.hphm" name="号牌牌号" label="号牌牌号" placeholder="请输入" maxlength="10" />
-            </van-cell-group>
-          </div>
-        </div>
-
-        <!-- 违法信息 -->
-        <div class="section-card">
-          <div class="section-header" @click="toggleSection('violation')">
-            <div class="section-title-box">
-              <span class="section-icon">▶</span>
-              <span class="section-title">违法信息</span>
-            </div>
-            <van-icon :name="openSections.violation ? 'arrow-up' : 'arrow-down'" />
-          </div>
-          <div class="section-body" v-show="openSections.violation">
-            <van-cell-group :border="false">
-              <van-field v-model="formData.xzqhMc" @click="openPicker('非法行政区划', 'xzqh')" is-link readonly name="非法行政区划" label="非法行政区划" placeholder="请输入非法行政区划" />
-              <van-field v-model="formData.wgddMc" name="违法地点" label="违法地点" placeholder="请输入违法地点" required :rules="[{ required: true, message: '请输入违法地点' }]" />
-              <van-field v-model="formData.lddmMc" name="路段码公里数" label="路段码公里数" placeholder="请输入路段码公里数" />
-              <van-field v-model="formData.ddmsMc" name="地点米数" label="地点米数" placeholder="请输入地点米数" />
-              <van-field v-model="formData.wfdzMc" name="违法地址" label="违法地址" placeholder="请输入违法地址" />
-              <van-field v-model="formData.wfsj" @click="openPicker('违法发生时间', 'wfsj')" is-link readonly name="违法发生时间" label="违法发生时间" placeholder="请选择违法发生时间"/>
-              <van-field v-model="formData.wfsj1" @click="openPicker('违法时间', 'wfsj1')" is-link readonly name="违法时间" label="违法时间" placeholder="请选择违法时间" />
-              <van-field v-model="formData.scz" name="实测值" label="实测值" placeholder="请输入实测值" />
-              <van-field v-model="formData.bzz" name="标准值" label="标准值" placeholder="请输入标准值" />
-              <van-field v-model="formData.fxjg" name="违法发现机关" label="违法发现机关" placeholder="请输入违法发现机关" />
-            </van-cell-group>
-          </div>
-        </div>
-
-        <!-- 照片信息 -->
-        <div class="section-card">
-          <div class="section-header" @click="toggleSection('photo')">
-            <div class="section-title-box">
-              <span class="section-icon">▶</span>
-              <span class="section-title">照片信息</span>
-            </div>
-            <van-icon :name="openSections.photo ? 'arrow-up' : 'arrow-down'" />
-          </div>
-          <div class="section-body" v-show="openSections.photo">
-            <!-- 照片上传卡片 -->
-            <div class="photo-upload-list">
-              <div class="photo-upload-item" v-for="(photo, index) in photoList" :key="index">
-                <div style="text-align: left;">照片{{ index + 1 }}</div>
-                <FileUploader
-                  v-model="photo.url"
-                  :preview-size="200"
-                  placeholder="点击拍照/上传"
-                  @success="(url) => onPhotoUploaded(url, index)"
-                  @delete="onPhotoDelete(index)"
-                />
-                <van-field v-model="photo.url" label="图片链接" placeholder="请输入图片链接" class="photo-link-field" />
-              </div>
-            </div>
-            <!-- 照片基本信息 -->
-            <van-cell-group :border="false">
-              <van-field v-model="formData.zpsl" name="照片数量" label="照片数量" readonly type="number" placeholder="请输入照片数量" required :rules="[{ required: true, message: '请输入照片数量' }]" />
-              <van-field v-model="formData.zpxm" name="图片文件名" label="图片文件名" placeholder="请输入图片文件名" />
-              <van-field v-model="formData.tpfsMc" @click="openPicker('图片方式', 'tpfs')" is-link readonly name="图片方式" label="图片方式" placeholder="请选择图片方式"/>
-              <van-field v-model="formData.wfspdz" name="违法视频地址" label="违法视频地址" placeholder="请输入违法视频地址" />
-            </van-cell-group>
-          </div>
-        </div>
-
-        <!-- 其他信息 -->
-        <div class="section-card">
-          <div class="section-header" @click="toggleSection('other')">
-            <div class="section-title-box">
-              <span class="section-icon">▶</span>
-              <span class="section-title">其他信息</span>
-            </div>
-            <van-icon :name="openSections.other ? 'arrow-up' : 'arrow-down'" />
-          </div>
-          <div class="section-body" v-show="openSections.other">
-            <van-cell-group :border="false">
-              <van-field v-model="formData.tzsh" name="通知书号" label="通知书号" placeholder="请输入通知书号"/>
-              <van-field v-model="formData.tzrq" @click="openPicker('通知日期', 'tzrq')" is-link readonly name="通知日期" label="通知日期" placeholder="请输入通知日期" />
-            </van-cell-group>
-          </div>
-        </div>
-      </div>
-      <!-- 底部提交按钮 -->
-      <div class="bottom-action">
-        <van-button type="primary" :loading="isLoading" block round color="#2563eb" native-type="submit">
-          提交
-        </van-button>
-      </div>
-    </van-form>
   </div>
   <PopupView v-model:show="pop.show" :title="pop.title" :type="pop.type" :listData="pop.listData" @select="chooseDate"></PopupView>
 </template>
 
 <script setup>
+import TopNav from "@/components/topNav.vue";
 import PopupView from '@/components/popupView.vue'
 import FileUploader from '@/components/FileUploader.vue'
 import { ref, reactive, onMounted } from "vue";
@@ -299,10 +296,6 @@ function onPhotoDelete(index) {
   formData.zpsl = uploadedCount.toString()
 }
 
-// 返回上一页
-function goBack() {
-  router.back();
-}
 
 // 提交表单
 function handleSubmit() {
@@ -337,46 +330,17 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .ssp-report-page {
-  min-height: 100vh;
+  height: 100vh;
   background: #f5f5f5;
-  padding-bottom: 80px;
-}
-
-.top-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 44px;
-  background: #2563eb;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  z-index: 100;
-
-  .nav-left {
-    color: white;
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-
-  .nav-title {
-    color: white;
-    font-size: 17px;
-    font-weight: 600;
-  }
-
-  .nav-right {
-    color: white;
-    font-size: 15px;
+  .form-cnt{
+    height: calc(100% - 13vw - 4px);
+    overflow: hidden;
+    overflow-y: auto;
   }
 }
-
-.form-content {
-  padding-top: 44px;
-  padding: 44px 12px 16px;
+.form-content{
+  padding-bottom: 60px;
+  box-sizing: border-box;
 }
 
 .section-card {
diff --git a/src/pages/trafficAlerts/detail.vue b/src/pages/trafficAlerts/detail.vue
index a75ad33..bbc52da 100644
--- a/src/pages/trafficAlerts/detail.vue
+++ b/src/pages/trafficAlerts/detail.vue
@@ -1,138 +1,136 @@
 <template>
   <div class="alert-detail-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>
-
-    <!-- 预警信息卡片 -->
-    <div class="detail-card">
-      <!-- 头部信息 -->
-      <div class="card-header">
-        <div class="header-left">
-          <span class="level-tag" :class="getLevelClass(alertDetail.eventLevel)">
-            {{ levelMap[alertDetail.eventLevel] }}
+    <TopNav title="路况任务详情"></TopNav>
+   
+    <div class="contant-box">
+      <!-- 预警信息卡片 -->
+      <div class="detail-card">
+        <!-- 头部信息 -->
+        <div class="card-header">
+          <div class="header-left">
+            <span class="level-tag" :class="getLevelClass(alertDetail.eventLevel)">
+              {{ levelMap[alertDetail.eventLevel] }}
+            </span>
+            <span class="alert-title">{{ alertDetail.eventType }}</span>
+          </div>
+          <span class="status-tag" :class="getStatusClass(allDetail.taskStatus)">
+            {{ statusMap[allDetail.taskStatus] }}
           </span>
-          <span class="alert-title">{{ alertDetail.eventType }}</span>
         </div>
-        <span class="status-tag" :class="getStatusClass(allDetail.taskStatus)">
-          {{ statusMap[allDetail.taskStatus] }}
-        </span>
-      </div>
-
-      <!-- 图片 -->
-      <div class="card-image">
-        <van-image :src="alertDetail.imgUrls" fit="cover" class="alert-img" />
-      </div>
-
-      <!-- 详细信息 -->
-      <div class="card-details">
-        <div class="detail-item">
-          <van-icon name="clock" class="detail-icon" />
-          <span class="label">检测时间：</span>
-          <span class="value">{{ alertDetail.eventTime }}</span>
+  
+        <!-- 图片 -->
+        <div class="card-image">
+          <van-image :src="alertDetail.imgUrls" fit="cover" class="alert-img" />
         </div>
-        <div class="detail-item">
-          <van-icon name="location" class="detail-icon" />
-          <span class="label">检测地点：</span>
-          <span class="value">{{ alertDetail.siteName }}</span>
-        </div>
-        <div class="detail-item" v-if="alertDetail.tasksVo">
-          <van-icon name="phone-o" class="detail-icon" />
-          <span class="label">联系电话：</span>
-          <span class="value">{{ alertDetail.phoneNumber }}</span>
-        </div>
-
-        <!-- 视频展示按钮 -->
-        <div class="video-btn-wrapper" v-if="alertDetail.videoUrls && alertDetail.videoUrls.length > 0">
-          <van-button block round color="#2a7efe" class="video-btn" @click="openVideo(alertDetail.videoUrls[0])">
-            <van-icon name="video-o" class="video-icon" />
-            视频展示
-          </van-button>
+  
+        <!-- 详细信息 -->
+        <div class="card-details">
+          <div class="detail-item">
+            <van-icon name="clock" class="detail-icon" />
+            <span class="label">检测时间：</span>
+            <span class="value">{{ alertDetail.eventTime }}</span>
+          </div>
+          <div class="detail-item">
+            <van-icon name="location" class="detail-icon" />
+            <span class="label">检测地点：</span>
+            <span class="value">{{ alertDetail.siteName }}</span>
+          </div>
+          <div class="detail-item" v-if="alertDetail.tasksVo">
+            <van-icon name="phone-o" class="detail-icon" />
+            <span class="label">联系电话：</span>
+            <span class="value">{{ alertDetail.phoneNumber }}</span>
+          </div>
+  
+          <!-- 视频展示按钮 -->
+          <div class="video-btn-wrapper" v-if="alertDetail.videoUrls">
+            <van-button block round color="#2a7efe" class="video-btn" @click="openVideo(alertDetail.videoUrls)">
+              <van-icon name="video-o" class="video-icon" />
+              视频展示
+            </van-button>
+          </div>
         </div>
       </div>
-    </div>
-
-    <!-- 执行记录卡片 -->
-    <div class="record-card">
-      <div class="card-title">执行记录</div>
-
-      <!-- 蓝色边框卡片 -->
-      <div class="execution-box">
-        <!-- 绿色边框内层卡片 -->
-        <div class="info-box">
-          <div class="info-row">
-            <span class="info-label">要求任务完成时间：</span>
-            <span class="info-value">{{ taskDetail.eventTime }}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-text">{{ taskDetail.deptName }}</span>
-            <span class="info-divider" v-if="taskDetail.deptName">|</span>
-            <span class="info-text">联系电话：{{ taskDetail.phoneNumber }}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">任务地点：</span>
-            <span class="info-value">{{ taskDetail.clickAddress }}</span>
-          </div>
-          
-        </div>
-
-        <!-- 任务描述 -->
-        <div class="task-desc">
-          {{ taskDetail.taskContent }}
-        </div>
-
-        <!-- 打卡情况 -->
-        <div v-if="checkinRecords.length > 0" class="checkin-box">
-          <div v-for="(record, index) in checkinRecords" :key="index" class="checkin-row-wrapper">
-            <div class="checkin-row">
-              <span class="checkin-time">{{ record.date }}</span>
-              <span class="checkin-type">{{ record.type }}</span>
+  
+      <!-- 执行记录卡片 -->
+      <div class="record-card">
+        <div class="card-title">执行记录</div>
+  
+        <!-- 蓝色边框卡片 -->
+        <div class="execution-box">
+          <!-- 绿色边框内层卡片 -->
+          <div class="info-box">
+            <div class="info-row">
+              <span class="info-label">要求任务完成时间：</span>
+              <span class="info-value">{{ taskDetail.eventTime }}</span>
             </div>
-            <div class="checkin-row">
-              <span class="checkin-label">打卡账号：</span>
-              <span class="checkin-value">{{ record.account }}</span>
+            <div class="info-row">
+              <span class="info-text">{{ taskDetail.deptName }}</span>
+              <span class="info-divider" v-if="taskDetail.deptName">|</span>
+              <span class="info-text">联系电话：{{ taskDetail.phoneNumber }}</span>
             </div>
-            <div class="checkin-row checkin-location" v-if="record.location">
-              <van-icon name="location" class="location-icon" />
-              <span>{{ record.location }}</span>
+            <div class="info-row">
+              <span class="info-label">任务地点：</span>
+              <span class="info-value">{{ taskDetail.clickAddress }}</span>
+            </div>
+            
+          </div>
+  
+          <!-- 任务描述 -->
+          <div class="task-desc">
+            {{ taskDetail.taskContent }}
+          </div>
+  
+          <!-- 打卡情况 -->
+          <div v-if="checkinRecords.length > 0" class="checkin-box">
+            <div v-for="(record, index) in checkinRecords" :key="index" class="checkin-row-wrapper">
+              <div class="checkin-row">
+                <span class="checkin-time">{{ record.date }}</span>
+                <span class="checkin-type">{{ record.type }}</span>
+              </div>
+              <div class="checkin-row">
+                <span class="checkin-label">打卡账号：</span>
+                <span class="checkin-value">{{ record.account }}</span>
+              </div>
+              <div class="checkin-row checkin-location" v-if="record.location">
+                <van-icon name="location" class="location-icon" />
+                <span>{{ record.location }}</span>
+              </div>
             </div>
           </div>
-        </div>
-
-        <!-- 待派发状态 - 显示定位打卡按钮 -->
-        <div v-if="showCheckInBtn" class="action-buttons">
-          <van-button block round type="primary" class="action-btn" @click="handleCheckIn">
-            定位打卡
-          </van-button>
-        </div>
-
-        <!-- 执行中/已完成状态 - 显示反馈按钮 -->
-        <div v-if="showFeedbackBtns" class="feedback-buttons">
-          <van-button
-            v-for="(feedback, index) in allDetail.feebacks"
-            :key="index"
-            block
-            round
-            color="#00c84f"
-            class="feedback-btn success"
-            @click="showFeedback(index + 1)"
-          >
-            第{{ index+1 }}次反馈结果
-          </van-button>
-          <van-button
-            v-if="allDetail.taskStatus == '1'"
-            block
-            round
-            color="#2a7efe"
-            type="primary"
-            class="action-btn"
-            @click="handleFeedback"
-          >
-            立即反馈
-          </van-button>
+  
+          <!-- 待派发状态 - 显示定位打卡按钮 -->
+          <div v-if="showCheckInBtn" class="action-buttons">
+            <van-button block round type="primary" class="action-btn" @click="handleCheckIn">
+              定位打卡
+            </van-button>
+          </div>
+  
+          <!-- 执行中/已完成状态 - 显示反馈按钮 -->
+          <div v-if="showFeedbackBtns" class="feedback-buttons">
+            <van-button
+              v-for="(feedback, index) in allDetail.feebacks"
+              :key="index"
+              block
+              round
+              color="#00c84f"
+              class="feedback-btn success"
+              @click="showFeedback(index + 1)"
+            >
+              第{{ index+1 }}次反馈结果
+            </van-button>
+            <van-button
+              v-if="allDetail.taskStatus == '1'"
+              block
+              round
+              color="#2a7efe"
+              type="primary"
+              class="action-btn"
+              @click="handleFeedback"
+            >
+              立即反馈
+            </van-button>
+          </div>
         </div>
       </div>
     </div>
@@ -203,6 +201,7 @@
 </template>
 
 <script setup>
+import TopNav from "@/components/topNav.vue";
 import { ref, computed, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { getTrafficEventDetail } from "@/api/traffic";
@@ -317,10 +316,6 @@ const fetchDetail = async () => {
   }
 };
 
-// 返回
-function goBack() {
-  router.back();
-}
 
 // 定位打卡
 function handleCheckIn() {
@@ -383,35 +378,12 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .alert-detail-page {
-  min-height: 100vh;
+  height: 100vh;
   background: #f1f5f9;
-  padding-bottom: 100px;
-}
-
-.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-placeholder {
-    width: 24px;
+  .contant-box{
+    height: calc(100% - 13vw - 4px);
+    overflow: hidden;
+    overflow-y: auto;
   }
 }
 
diff --git a/src/pages/trafficAlerts/index.vue b/src/pages/trafficAlerts/index.vue
index d15ead4..69d1e3f 100644
--- a/src/pages/trafficAlerts/index.vue
+++ b/src/pages/trafficAlerts/index.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="traffic-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">
@@ -82,7 +78,8 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from "vue";
+import TopNav from "@/components/topNav.vue";
+import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { getTrafficEventList } from "@/api/traffic";
 
@@ -211,10 +208,7 @@ function getStatusClass(status) {
   return map[status] || "status-gray";
 }
 
-// 返回
-function goBack() {
-  router.back();
-}
+
 
 // 查看详情
 function handleDetail(alert) {
@@ -246,37 +240,8 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .traffic-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 {
@@ -307,6 +272,10 @@ onMounted(() => {
 
 .alerts-list {
   padding: 16px;
+  box-sizing: border-box;
+  height: calc(100vh - 13vw - 56px); /* 顶部导航和标签栏高度 */
+  overflow: hidden;
+  overflow-y: auto;
 }
 
 .alert-card {
diff --git a/src/pages/violationAlerts/detail.vue b/src/pages/violationAlerts/detail.vue
index 9c1afda..7b430f5 100644
--- a/src/pages/violationAlerts/detail.vue
+++ b/src/pages/violationAlerts/detail.vue
@@ -1,139 +1,138 @@
 <template>
   <div class="violation-detail-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>
-    <!-- 违章信息卡片 -->
-    <div class="detail-card">
-      <!-- 车牌号和状态 -->
-      <div class="card-header">
-        <div class="vehicle-info">
-          <van-icon name="cart" class="vehicle-icon" />
-          <span class="plate-number">{{ violationDetail.plateNo }}</span>
-          <span class="plate-color">{{ violationDetail.plateColor }}</span>
-          <span class="separator">|</span>
-          <span class="vehicle-type">{{ violationDetail.vehicleType }}</span>
-        </div>
-        <span class="status-tag" :class="getStatusClass(allDetail.taskStatus)"> {{ statusMap[allDetail.taskStatus] }} </span>
-      </div>
+    <TopNav title="违规任务详情"></TopNav>
 
-      <!-- 等级和标题 -->
-      <div class="title-row">
-        <span class="level-tag" :class="getLevelClass(violationDetail.eventLevel)">
-          {{ levelMap[violationDetail.eventLevel] }}
-        </span>
-        <span class="alert-title">{{ violationDetail.eventContent }}</span>
-      </div>
-
-      <!-- 图片 -->
-      <div class="card-image">
-        <van-image :src="violationDetail.imgUrls" fit="cover" class="alert-img" />
-      </div>
-
-      <!-- 检测信息 -->
-      <div class="card-details">
-        <div class="detail-item">
-          <van-icon name="location" class="detail-icon" />
-          <span class="label">检测点位：</span>
-          <span class="value">{{ violationDetail.siteName }}</span>
-        </div>
-        <div class="detail-item">
-          <van-icon name="clock" class="detail-icon" />
-          <span class="label">检测时间：</span>
-          <span class="value">{{ violationDetail.eventTime }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- 卡口预警折叠面板 -->
-    <van-collapse v-model="activeNames" :border="false" class="alert-collapse">
-      <van-collapse-item name="1" :border="false">
-        <template #title><div class="collapse-title">卡口预警</div></template>
-        <van-list :finished="true" finished-text="没有更多了" >
-          <div class="alert-list">
-            <div v-for="(item, index) in checkinAlerts" :key="item.id" class="alert-item">
-              <!-- 顶部序号和基本信息 -->
-              <div class="item-header">
-                <div class="item-index">{{ index + 1 }}</div>
-                <div class="item-info">
-                  <div class="info-row">
-                    <van-icon name="location-o" class="info-icon" />
-                    <span class="label">检测点位：</span>
-                    <span class="value">{{ item.siteName }}</span>
-                  </div>
-                  <div class="info-row">
-                    <van-icon name="clock-o" class="info-icon" />
-                    <span class="label">检测时间：</span>
-                    <span class="value">{{ item.passTime }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 抓拍图片区域 -->
-              <div class="capture-section">
-                <div class="section-title">抓拍图片：</div>
-                <van-image :src="item.imgUrl" fit="cover" class="capture-img" radius="12" />
-              </div>
-
-              <!-- 详细网格信息 -->
-              <div class="detail-grid">
-                <div class="grid-item">
-                  <span class="label">速度：</span>
-                  <span class="value">{{ item.speed }}</span>
-                </div>
-                <div class="grid-item">
-                  <span class="label">车道号：</span>
-                  <span class="value">{{ item.laneNo }}</span>
-                </div>
-                <div class="grid-item">
-                  <span class="label">方向：</span>
-                  <span class="value">{{ item.direction }}</span>
-                </div>
-                <div class="grid-item">
-                  <van-icon name="user-o" class="grid-icon" />
-                  <span class="label">执法人员：</span>
-                  <span class="value">{{ item.userName }}</span>
-                </div>
-                <div class="grid-item">
-                  <span class="label">工号：</span>
-                  <span class="value">{{ item.workNo }}</span>
-                </div>
-              </div>
-              <!-- 分割线 -->
-              <div v-if="index < checkinAlerts.length - 1" class="item-divider"></div>
-            </div>
+    <div class="constBox">
+      <!-- 违章信息卡片 -->
+      <div class="detail-card">
+        <!-- 车牌号和状态 -->
+        <div class="card-header">
+          <div class="vehicle-info">
+            <van-icon name="cart" class="vehicle-icon" />
+            <span class="plate-number">{{ violationDetail.plateNo }}</span>
+            <span class="plate-color">{{ violationDetail.plateColor }}</span>
+            <span class="separator">|</span>
+            <span class="vehicle-type">{{ violationDetail.vehicleType }}</span>
           </div>
-        </van-list>
-      </van-collapse-item>
-    </van-collapse>
-
-     <!-- 打卡情况 - 执行中和已完成状态显示 -->
-    <div v-if="allDetail.taskStatus == '1' || allDetail.taskStatus == '2'" class="checkin-card">
-      <div class="checkin-time-row">
-        <span class="checkin-date">{{allDetail.clickTime}}</span>
-        <span class="checkin-type">【定位打卡】</span>
+          <span class="status-tag" :class="getStatusClass(allDetail.taskStatus)"> {{ statusMap[allDetail.taskStatus] }} </span>
+        </div>
+  
+        <!-- 等级和标题 -->
+        <div class="title-row">
+          <span class="level-tag" :class="getLevelClass(violationDetail.eventLevel)">
+            {{ levelMap[violationDetail.eventLevel] }}
+          </span>
+          <span class="alert-title">{{ violationDetail.eventContent }}</span>
+        </div>
+  
+        <!-- 图片 -->
+        <div class="card-image">
+          <van-image :src="violationDetail.imgUrls" fit="cover" class="alert-img" />
+        </div>
+  
+        <!-- 检测信息 -->
+        <div class="card-details">
+          <div class="detail-item">
+            <van-icon name="location" class="detail-icon" />
+            <span class="label">检测点位：</span>
+            <span class="value">{{ violationDetail.siteName }}</span>
+          </div>
+          <div class="detail-item">
+            <van-icon name="clock" class="detail-icon" />
+            <span class="label">检测时间：</span>
+            <span class="value">{{ violationDetail.eventTime }}</span>
+          </div>
+        </div>
       </div>
-
-      <div class="checkin-row">
-        <span class="checkin-label">打卡账号：</span>
-        <span class="checkin-value">21515800</span>
-      </div>
-
-      <div class="checkin-row checkin-location">
-        <van-icon name="location" class="location-icon" />
-        <span>{{allDetail.clickAddress}}</span>
-      </div>
-
-      <!-- 未拦截成功标识 -->
-      <div v-if="violationId !== '1' && violationId !== '3' && allDetail.taskStatus == '1'" class="intercept-status">
-        <span v-if="violationId === '6'" class="result-btn" @click="goToResult">处罚结果</span>
-        <span v-else class="fail-tag">未拦截成功</span>
+  
+      <!-- 卡口预警折叠面板 -->
+      <van-collapse v-model="activeNames" :border="false" class="alert-collapse">
+        <van-collapse-item name="1" :border="false">
+          <template #title><div class="collapse-title">卡口预警</div></template>
+          <van-list :finished="true" finished-text="没有更多了" >
+            <div class="alert-list">
+              <div v-for="(item, index) in checkinAlerts" :key="item.id" class="alert-item">
+                <!-- 顶部序号和基本信息 -->
+                <div class="item-header">
+                  <div class="item-index">{{ index + 1 }}</div>
+                  <div class="item-info">
+                    <div class="info-row">
+                      <van-icon name="location-o" class="info-icon" />
+                      <span class="label">检测点位：</span>
+                      <span class="value">{{ item.siteName }}</span>
+                    </div>
+                    <div class="info-row">
+                      <van-icon name="clock-o" class="info-icon" />
+                      <span class="label">检测时间：</span>
+                      <span class="value">{{ item.passTime }}</span>
+                    </div>
+                  </div>
+                </div>
+  
+                <!-- 抓拍图片区域 -->
+                <div class="capture-section">
+                  <div class="section-title">抓拍图片：</div>
+                  <van-image :src="item.imgUrl" fit="cover" class="capture-img" radius="12" />
+                </div>
+  
+                <!-- 详细网格信息 -->
+                <div class="detail-grid">
+                  <div class="grid-item">
+                    <span class="label">速度：</span>
+                    <span class="value">{{ item.speed }}</span>
+                  </div>
+                  <div class="grid-item">
+                    <span class="label">车道号：</span>
+                    <span class="value">{{ item.laneNo }}</span>
+                  </div>
+                  <div class="grid-item">
+                    <span class="label">方向：</span>
+                    <span class="value">{{ item.direction }}</span>
+                  </div>
+                  <div class="grid-item">
+                    <van-icon name="user-o" class="grid-icon" />
+                    <span class="label">执法人员：</span>
+                    <span class="value">{{ item.userName }}</span>
+                  </div>
+                  <div class="grid-item">
+                    <span class="label">工号：</span>
+                    <span class="value">{{ item.workNo }}</span>
+                  </div>
+                </div>
+                <!-- 分割线 -->
+                <div v-if="index < checkinAlerts.length - 1" class="item-divider"></div>
+              </div>
+            </div>
+          </van-list>
+        </van-collapse-item>
+      </van-collapse>
+  
+       <!-- 打卡情况 - 执行中和已完成状态显示 -->
+      <div v-if="allDetail.taskStatus == '1' || allDetail.taskStatus == '2'" class="checkin-card">
+        <div class="checkin-time-row">
+          <span class="checkin-date">{{allDetail.clickTime}}</span>
+          <span class="checkin-type">【定位打卡】</span>
+        </div>
+  
+        <div class="checkin-row">
+          <span class="checkin-label">打卡账号：</span>
+          <span class="checkin-value">21515800</span>
+        </div>
+  
+        <div class="checkin-row checkin-location">
+          <van-icon name="location" class="location-icon" />
+          <span>{{allDetail.clickAddress}}</span>
+        </div>
+  
+        <!-- 未拦截成功标识 -->
+        <div v-if="violationId !== '1' && violationId !== '3' && allDetail.taskStatus == '1'" class="intercept-status">
+          <span v-if="violationId === '6'" class="result-btn" @click="goToResult">处罚结果</span>
+          <span v-else class="fail-tag">未拦截成功</span>
+        </div>
       </div>
     </div>
 
+
     <!-- 底部按钮 - 未执行状态 -->
     <div v-if="allDetail.taskStatus == '0'" class="action-bar">
       <van-button block round type="primary" class="action-btn" @click="handleCheckIn">定位打卡</van-button>
@@ -164,6 +163,7 @@
 </template>
 
 <script setup>
+import TopNav from "@/components/topNav.vue";
 import { ref, computed, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { getTrafficEventDetail, interceptNotSuccess } from "@/api/traffic";
@@ -249,10 +249,6 @@ function getStatusClass(status) {
   return map[status] || "status-gray";
 }
 
-// 返回
-function goBack() {
-  router.back();
-}
 
 // 定位打卡
 function handleCheckIn() {
@@ -298,38 +294,15 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .violation-detail-page {
-  min-height: 100vh;
+  height: 100vh;
   background: #f1f5f9;
-  padding-bottom: 100px;
+  .constBox{
+    height: calc(100% - 13vw - 74px - env(safe-area-inset-bottom));
+    overflow: hidden;
+    overflow-y: auto;
+  }
 }
 
-.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-placeholder {
-    width: 24px;
-  }
-
-}
 
 .detail-card {
   margin: 16px;
diff --git a/src/pages/violationAlerts/index.vue b/src/pages/violationAlerts/index.vue
index 9a5d3ed..fd11bfe 100644
--- a/src/pages/violationAlerts/index.vue
+++ b/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 {
diff --git a/src/utils/watermark.js b/src/utils/watermark.js
index 57ddaf0..7529088 100644
--- a/src/utils/watermark.js
+++ b/src/utils/watermark.js
@@ -28,7 +28,7 @@ let setWatermark = (str1, str2) => {
   div.id = id
   div.style.pointerEvents = 'none'
   div.style.top = '0vw'
-  div.style.left = '-10%'
+  // div.style.left = '-10%'
   div.style.opacity = '0.15'
   div.style.position = 'fixed'
   div.style.zIndex = '100000'