更新页面
This commit is contained in:
@ -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;
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
<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="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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -1,14 +1,8 @@
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<TopNav title="随手拍" fontColor="#fff" bgColor="#2563eb"></TopNav>
|
||||
<div class="form-cnt">
|
||||
<!-- 表单内容 -->
|
||||
<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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
<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>
|
||||
<TopNav title="路况任务详情"></TopNav>
|
||||
|
||||
<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">
|
||||
<van-button block round color="#2a7efe" class="video-btn" @click="openVideo(alertDetail.videoUrls[0])">
|
||||
<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>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
<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>
|
||||
<TopNav title="违规任务详情"></TopNav>
|
||||
|
||||
<div class="constBox">
|
||||
<!-- 违章信息卡片 -->
|
||||
<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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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'
|
||||
|
||||
Reference in New Issue
Block a user