更新页面

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>
+      <span :style="{color:fontColor}" class="navtitle">{{ title }}</span>
-      <van-icon :name="rightIcon" color="#fff" size="25px" @click.stop="onClickRight" v-if="showRight" />
+      <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;

src/pages/alertHandle/index.vue

@@ -1,12 +1,9 @@
 <template>
   <div class="alert-handle-page">
     <!-- 顶部导航栏 -->
-    <div class="nav-bar">
+    <TopNav :title="pageTitle"></TopNav>
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <div class="nav-title">{{ pageTitle }}</div>
-      <div class="nav-placeholder"></div>
-    </div>
 
+    <div class="alert-handle-page-cnt">
       <!-- 现场情况 -->
       <div class="section-card">
         <div class="section-title">现场情况</div>
@@ -65,6 +62,8 @@
           class="feedback-input"
         />
       </div>
+    </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 {

src/pages/dataReport/index.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="data-report-page">
-    <!-- 顶部导航栏 -->
+    <TopNav title="处罚结果"></TopNav>
-    <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="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 {

src/pages/keyDetection/detail.vue

@@ -1,12 +1,9 @@
 <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>
   
+  <div class="detail-page">
+    <TopNav title="重点检测详情"></TopNav>
+
+    <div class="detail-page-cont">
       <!-- 检测信息卡片 -->
       <div class="detail-card">
         <div class="card-header">
@@ -56,6 +53,7 @@
           </div>
         </div>
       </div>
+    </div>
 
     <!-- 底部操作按钮 -->
     <div class="action-bar">
@@ -67,15 +65,16 @@
 </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({
+const detail = ref(
+  {
     id: "",
     type: "vehicle",
     typeText: "重点车辆监控",
@@ -88,13 +87,20 @@ const detail = ref({
     issuer: "指挥中心",
     contact: "027-88888888",
     description: "该车辆为重点监控对象，发现请立即上报处理。近期有多次违章记录，需重点关注。",
-  records: []
+    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;
+  .detail-page-cont{
-}
+    height: calc(100vh - 13vw - 70px);
-
+    overflow: hidden;
-.nav-bar {
+    overflow-y: auto;
-  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;
   }
 }
 

src/pages/keyDetection/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="key-detection-page">
     <!-- 顶部导航栏 -->
-    <div class="nav-bar">
+    <TopNav title="重点检测推送"></TopNav>
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <h1 class="nav-title">重点检测推送</h1>
-      <div class="nav-placeholder"></div>
-    </div>
-
     <!-- 标签筛选 -->
     <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 {

src/pages/sspReport/index.vue

@@ -1,14 +1,8 @@
 <template>
   <div class="ssp-report-page">
     <!-- 顶部导航 -->
-    <div class="top-nav">
+    <TopNav title="随手拍" fontColor="#fff" bgColor="#2563eb"></TopNav>
-      <div class="nav-left" @click="goBack">
+    <div class="form-cnt">
-        <van-icon name="arrow-left" />
-      </div>
-      <div class="nav-title">随手拍</div>
-      <div class="nav-right"></div>
-    </div>
-
       <!-- 表单内容 -->
       <van-form @submit="handleSubmit" class="form">
         <div class="form-content">
@@ -132,10 +126,13 @@
         </div>
       </van-form>
     </div>
+
+  </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;
+  .form-cnt{
-}
+    height: calc(100% - 13vw - 4px);
-
+    overflow: hidden;
-.top-nav {
+    overflow-y: auto;
-  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-content{
-  padding-top: 44px;
+  padding-bottom: 60px;
-  padding: 44px 12px 16px;
+  box-sizing: border-box;
 }
 
 .section-card {

src/pages/trafficAlerts/detail.vue

@@ -1,12 +1,9 @@
 <template>
   <div class="alert-detail-page">
     <!-- 顶部导航栏 -->
-    <div class="nav-bar">
+    <TopNav title="路况任务详情"></TopNav>
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <h1 class="nav-title">路况任务详情</h1>
-      <div class="nav-placeholder"></div>
-    </div>
    
+    <div class="contant-box">
       <!-- 预警信息卡片 -->
       <div class="detail-card">
         <!-- 头部信息 -->
@@ -46,8 +43,8 @@
           </div>
   
           <!-- 视频展示按钮 -->
-        <div class="video-btn-wrapper" v-if="alertDetail.videoUrls && alertDetail.videoUrls.length > 0">
+          <div class="video-btn-wrapper" v-if="alertDetail.videoUrls">
-          <van-button block round color="#2a7efe" class="video-btn" @click="openVideo(alertDetail.videoUrls[0])">
+            <van-button block round color="#2a7efe" class="video-btn" @click="openVideo(alertDetail.videoUrls)">
               <van-icon name="video-o" class="video-icon" />
               视频展示
             </van-button>
@@ -136,6 +133,7 @@
           </div>
         </div>
       </div>
+    </div>
 
     <!-- 反馈结果弹窗 -->
     <van-popup v-model:show="showResultDialog" round position="center" class="feedback-popup">
@@ -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;
+  .contant-box{
-}
+    height: calc(100% - 13vw - 4px);
-
+    overflow: hidden;
-.nav-bar {
+    overflow-y: auto;
-  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;
   }
 }
 

src/pages/trafficAlerts/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="traffic-alerts-page">
     <!-- 顶部导航栏 -->
-    <div class="nav-bar">
+    <TopNav title="违规任务" rightIcon="filter-o" :showRight="true"></TopNav>
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <h1 class="nav-title">路况任务</h1>
-      <van-icon name="filter-o" class="nav-filter" />
-    </div>
 
     <!-- 标签栏 -->
     <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 {

src/pages/violationAlerts/detail.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="violation-detail-page">
-    <!-- 顶部导航栏 -->
+    <TopNav title="违规任务详情"></TopNav>
-    <div class="nav-bar">
+
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
+    <div class="constBox">
-      <h1 class="nav-title">违规任务详情</h1>
-      <div class="nav-placeholder"></div>
-    </div>
       <!-- 违章信息卡片 -->
       <div class="detail-card">
         <!-- 车牌号和状态 -->
@@ -133,6 +130,8 @@
           <span v-else class="fail-tag">未拦截成功</span>
         </div>
       </div>
+    </div>
+
 
     <!-- 底部按钮 - 未执行状态 -->
     <div v-if="allDetail.taskStatus == '0'" class="action-bar">
@@ -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;

src/pages/violationAlerts/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="violation-alerts-page">
     <!-- 顶部导航栏 -->
-    <div class="nav-bar">
+    <TopNav title="违规任务" rightIcon="filter-o" :showRight="true"></TopNav>
-      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
-      <h1 class="nav-title">违规任务</h1>
-      <van-icon name="filter-o" class="nav-filter" />
-    </div>
 
     <!-- 标签栏 -->
     <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 {

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'