Yaxin
/
Web-Traffic-Police
27
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 页面样式开发

Browse Source
master
JINGYJ 2 days ago
parent 348133a600
commit c4e6d34e90
7 changed files with 343 additions and 71 deletions
Show Stats Download Patch File Download Diff File

53
pnpm-lock.yaml
Unescape Escape View File

@ -8,9 +8,6 @@ importers:
.:
dependencies:
'@types/three':
specifier: ^0.175.0
version: 0.175.0
axios:
specifier: ^1.8.3
version: 1.8.3
@ -35,9 +32,6 @@ importers:
swiper:
specifier: ^11.2.5
version: 11.2.5
three:
specifier: ^0.175.0
version: 0.175.0
unplugin-auto-import:
specifier: ^19.1.1
version: 19.1.1(@vueuse/core@9.13.0(vue@3.5.13(typescript@5.7.3)))
@ -726,9 +720,6 @@ packages:
'@tailwindcss/postcss@4.0.10':
resolution: {integrity: sha512-3NEomQtd/JrNAaSkuklBLGQkyCpxZjOW8rf64x4lx+Umo7gh0kzwe83QmUF/GrVNgO6TdrCyHf4+41GZGR3EIg==}
'@tweenjs/tween.js@23.1.3':
resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
'@types/echarts@5.0.0':
resolution: {integrity: sha512-5uc/16BlYpzH8kU/u8aeRRgY2FV6yRY7RjPnYfUFPowl0F3kvNgfaz09PmeVdLkqdAtMft3XkCfqiJPJjG2DNQ==}
deprecated: This is a stub types definition. echarts provides its own type definitions, so you do not need this installed.
@ -745,18 +736,9 @@ packages:
'@types/node@14.18.63':
resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==}
'@types/stats.js@0.17.3':
resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
'@types/three@0.175.0':
resolution: {integrity: sha512-ldMSBgtZOZ3g9kJ3kOZSEtZIEITmJOzu8eKVpkhf036GuNkM4mt0NXecrjCn5tMm1OblOF7dZehlaDypBfNokw==}
'@types/web-bluetooth@0.0.16':
resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
'@types/webxr@0.5.22':
resolution: {integrity: sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==}
'@videojs/http-streaming@3.17.0':
resolution: {integrity: sha512-Ch1P3tvvIEezeZXyK11UfWgp4cWKX4vIhZ30baN/lRinqdbakZ5hiAI3pGjRy3d+q/Epyc8Csz5xMdKNNGYpcw==}
engines: {node: '>=8', npm: '>=5'}
@ -881,9 +863,6 @@ packages:
'@vueuse/shared@9.13.0':
resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
'@webgpu/types@0.1.60':
resolution: {integrity: sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==}
'@xmldom/xmldom@0.8.10':
resolution: {integrity: sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==}
engines: {node: '>=10.0.0'}
@ -1265,9 +1244,6 @@ packages:
picomatch:
optional: true
fflate@0.8.2:
resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
fill-range@7.1.1:
resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
engines: {node: '>=8'}
@ -1628,9 +1604,6 @@ packages:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
engines: {node: '>= 8'}
meshoptimizer@0.18.1:
resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
micromatch@4.0.8:
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
engines: {node: '>=8.6'}
@ -2044,9 +2017,6 @@ packages:
thenify@3.3.1:
resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
three@0.175.0:
resolution: {integrity: sha512-nNE3pnTHxXN/Phw768u0Grr7W4+rumGg/H6PgeseNJojkJtmeHJfZWi41Gp2mpXl1pg1pf1zjwR4McM1jTqkpg==}
tinyglobby@0.2.12:
resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
engines: {node: '>=12.0.0'}
@ -2774,8 +2744,6 @@ snapshots:
postcss: 8.5.3
tailwindcss: 4.0.10
'@tweenjs/tween.js@23.1.3': {}
'@types/echarts@5.0.0':
dependencies:
echarts: 5.6.0
@ -2790,21 +2758,8 @@ snapshots:
'@types/node@14.18.63': {}
'@types/stats.js@0.17.3': {}
'@types/three@0.175.0':
dependencies:
'@tweenjs/tween.js': 23.1.3
'@types/stats.js': 0.17.3
'@types/webxr': 0.5.22
'@webgpu/types': 0.1.60
fflate: 0.8.2
meshoptimizer: 0.18.1
'@types/web-bluetooth@0.0.16': {}
'@types/webxr@0.5.22': {}
'@videojs/http-streaming@3.17.0(video.js@8.22.0)':
dependencies:
'@babel/runtime': 7.26.10
@ -2999,8 +2954,6 @@ snapshots:
- '@vue/composition-api'
- vue
'@webgpu/types@0.1.60': {}
'@xmldom/xmldom@0.8.10': {}
acorn@8.14.1: {}
@ -3420,8 +3373,6 @@ snapshots:
optionalDependencies:
picomatch: 4.0.2
fflate@0.8.2: {}
fill-range@7.1.1:
dependencies:
to-regex-range: 5.0.1
@ -3730,8 +3681,6 @@ snapshots:
merge2@1.4.1: {}
meshoptimizer@0.18.1: {}
micromatch@4.0.8:
dependencies:
braces: 3.0.3
@ -4150,8 +4099,6 @@ snapshots:
dependencies:
any-promise: 1.3.0
three@0.175.0: {}
tinyglobby@0.2.12:
dependencies:
fdir: 6.4.3(picomatch@4.0.2)

6
src/styles/element-plus.scss
Unescape Escape View File

@ -6,7 +6,7 @@
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
"base": #2de6ff,
"base": #154DDD,
),
),
$select-dropdown: (
@ -29,8 +29,8 @@
}
.el-button:hover {
// color: white;
background-color: transparent;
color: white;
background-color: #154DDD;
outline: none;
}

6
src/views/dataView/DataOverview.vue
Unescape Escape View File

@ -85,10 +85,10 @@ onUnmounted(() => {
</div>
<ul class="content-list-box">
<li class="content-detail-box">
<Type1ObjectDetect typeKey="目标检测" :info="detailInfo" />
<Type2LicensePlateRecog typeKey="车牌识别" :info="detailInfo" />
<Type1ObjectDetect typeKey="目标检测" :info="detailInfo" v-if="false" />
<Type2LicensePlateRecog typeKey="车牌识别" :info="detailInfo" v-if="false" />
<Type4AudioDetection typeKey="音频检测" :info="detailInfo" v-if="false" />
<Type3CigaretteOffer typeKey="递烟" :info="detailInfo" />
<Type4AudioDetection typeKey="音频检测" :info="detailInfo" />
</li>
</ul>
</div>

73
src/views/dataView/components/Type1ObjectDetect.vue
Unescape Escape View File

@ -7,7 +7,74 @@
* @Description: 目标检测
-->
<template>
<div>
1
<div class="type-first">
<div class="type-first-top">
<span>←</span> <span>递烟</span>
</div>
<div class="type-first-mid">
<div class="type-first-mid-box" v-for="(item, index) in 8">
<div class="type-first-mid-box-video">
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
</div>
<div class="type-first-mid-box-text">
123123
</div>
</div>
</div>
<div class="type-first-bottom"></div>
</div>
</template>
</template>
<script setup>
defineOptions({
name: "Type1ObjectDetectWarp"
});
</script>
<style lang="scss" scoped>
.type-first {
.type-first-top {
cursor: pointer;
margin-bottom: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 20px;
color: #1D2129;
}
.type-first-mid {
display: flex;
justify-self: start;
justify-content: space-between;
align-content: space-between;
flex-direction: row;
flex-wrap: wrap;
height: 744px;
.type-first-mid-box {
box-sizing: border-box;
width: 348px;
height: 360px;
background: #fff;
border-radius: 4px;
.type-first-mid-box-video {
box-sizing: border-box;
width: 100%;
height: 198px;
img {
border-radius: 4px 4px 0 0;
}
}
.type-first-mid-box-text {
box-sizing: border-box;
width: 100%;
height: 162px;
padding: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 14px;
color: #1D2129;
}
}
}
}
</style>

91
src/views/dataView/components/Type2LicensePlateRecog.vue
Unescape Escape View File

@ -7,7 +7,92 @@
* @Description: 车牌识别
-->
<template>
<div>
<div class="type-second">
<div class="type-second-top">
<span>←</span> <span>车牌识别</span>
</div>
<div class="type-second-mid">
<div class="type-second-mid-video">
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
</div>
<div class="type-second-mid-box">
<div class="type-second-mid-crad" v-for="(item, index) in 8">
<div class="type-second-mid-crad-image">
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
</div>
<div class="type-second-mid-crad-text">
123123
</div>
</div>
</div>
</div>
<div class="type-second-bottom"></div>
</div>
</template>
</template>
<script setup>
defineOptions({
name: "Type2LicensePlateRecogWarp"
});
</script>
<style lang="scss" scoped>
.type-second {
.type-second-top {
cursor: pointer;
margin-bottom: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 20px;
color: #1D2129;
}
.type-second-mid {
.type-second-mid-video {
box-sizing: border-box;
margin-bottom: 24px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 324px;
border-radius: 4px;
img {
width: 720px;
height: 100%;
border-radius: 4px;
}
}
.type-second-mid-box {
display: flex;
justify-content: space-between;
align-content: space-between;
flex-direction: row;
flex-wrap: wrap;
height: 480px;
.type-second-mid-crad {
box-sizing: border-box;
width: 348px;
height: 232px;
background: #fff;
border-radius: 4px;
.type-second-mid-crad-image {
box-sizing: border-box;
width: 100%;
height: 148px;
img {
border-radius: 4px 4px 0 0;
}
}
.type-second-mid-crad-text {
box-sizing: border-box;
width: 100%;
height: 84px;
padding: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 14px;
color: #1D2129;
}
}
}
}
}
</style>

103
src/views/dataView/components/Type3CigaretteOffer.vue
Unescape Escape View File

@ -7,7 +7,104 @@
* @Description: 递烟
-->
<template>
<div>
<div class="type-fourth">
<div class="type-fourth-top">
<span>←</span> <span>车牌识别</span>
</div>
<div class="type-fourth-mid">
<div class="type-fourth-mid-video">
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
</div>
<div class="type-fourth-mid-tab">
<el-button class="w-[76px] h-[32px!important]">全部</el-button>
<el-button class="w-[76px] h-[32px!important]">人员</el-button>
<el-button class="w-[76px] h-[32px!important]">车辆</el-button>
<el-button class="w-[76px] h-[32px!important]">路灯</el-button>
</div>
<div class="type-fourth-mid-box">
<div class="type-fourth-mid-crad" v-for="(item, index) in 8">
<div class="type-fourth-mid-crad-image">
<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" class="w-[100%] h-[100%]"/>
</div>
<div class="type-fourth-mid-crad-text">
123123
</div>
</div>
</div>
</div>
<div class="type-fourth-bottom"></div>
</div>
</template>
</template>
<script setup>
defineOptions({
name: "Type3CigaretteOfferWarp"
});
</script>
<style lang="scss" scoped>
.type-fourth {
.type-fourth-top {
cursor: pointer;
margin-bottom: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 20px;
color: #1D2129;
}
.type-fourth-mid {
.type-fourth-mid-video {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 324px;
border-radius: 4px;
img {
width: 720px;
height: 100%;
border-radius: 4px;
}
}
.type-fourth-mid-tab {
box-sizing: border-box;
margin-top: 24px;
margin-bottom: 16px;
width: 100%;
height: 32px;
}
.type-fourth-mid-box {
display: flex;
justify-content: space-between;
align-content: space-between;
flex-direction: row;
flex-wrap: wrap;
height: 420px;
.type-fourth-mid-crad {
box-sizing: border-box;
width: 348px;
height: 202px;
background: #fff;
border-radius: 4px;
.type-fourth-mid-crad-image {
box-sizing: border-box;
width: 100%;
height: 148px;
img {
border-radius: 4px 4px 0 0;
}
}
.type-fourth-mid-crad-text {
box-sizing: border-box;
width: 100%;
height: 54px;
padding: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 14px;
color: #1D2129;
}
}
}
}
}
</style>

82
src/views/dataView/components/Type4AudioDetection.vue
Unescape Escape View File

@ -7,7 +7,83 @@
* @Description: 音频检测
-->
<template>
<div>
<div class="type-third">
<div class="type-third-top">
<span>←</span> <span>音频检测</span>
</div>
<div class="type-third-mid">
<BaseTable class="bg-transparent" :total="pagination.total" :pageSize="pagination.pageSize"
:dataSource="listData" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage">
</BaseTable>
</div>
<div class="type-third-bottom"></div>
</div>
</template>
</template>
<script setup>
import { BaseTable } from "@/components/CustomTable";
defineOptions({
name: "Type4AudioDetectionWarp"
});
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
const listData = ref([]); // 列表数据
const columns = [
{
label: "视频",
property: "station",
},
{
label: "告知执法依据",
property: "train_number",
},
{
label: "告知民警身份",
property: "train_model",
},
{
label: "告知申辩权利",
property: "train_carriage_number",
},
{
label: "告知复议诉讼等救济途径",
property: "alarm_type",
width: 190,
},
{
label: "告知执法全程被记录",
property: "fault_type",
width: 160,
},
{
label: "核实当事人身份信息",
property: "level",
width: 160,
},
{
label: "告知违法事实",
property: "created_at",
},
{
label: "语速(字/分钟)",
property: "created_at",
}
]
</script>
<style lang="scss" scoped>
.type-third {
.type-third-top {
cursor: pointer;
margin-bottom: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 20px;
color: #1D2129;
}
.type-third-mid {
width: 100%;
height: 812px;
background: #fff;
}
}
</style>
Write Preview
Loading…
Cancel
Save