lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 安全检测

Browse Source
This commit is contained in:
duanliang
2024-12-18 17:00:46 +08:00
parent 4a12039789
commit 8114a56034
21 changed files with 1338 additions and 1270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/views/monitor/index.vue
View File

@@ -1,84 +1,120 @@
<template>
<main class="wrapper">
<CoreVideo />
<box2 />
<box3 />
<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
<Correspondence />
</main>
<main class="wrapper">
<CoreVideo />
<box2 />
<box3 />
<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
<Correspondence />
</main>
</template>
<script setup>
import box3 from './components/box-3.vue'
import box2 from './components/box-2.vue'
import box5 from './components/box-5.vue'
const navLeft = [{ name: '奉节县' }, { name: '三峡之巅', path: '/scenic' }, { name: '白帝城' },{ name: '龙河桥' }]
const navRight = [{ name: '路段' }, { name: '路段' }, { name: '路段' }, { name: '路段' }]
onMounted(() => {})
import box3 from './components/box-3.vue'
import box2 from './components/box-2.vue'
const navLeft = [{
name: '奉节县',
path: '/sceneTesting'
},
{
name: '三峡之巅',
path: '/sceneTesting'
},
{
name: '白帝城',
path: '/sceneTesting'
}, {
name: '龙河桥',
path: '/sceneTesting'
}
]
const navRight = [{
name: '路段',
path: '/roadTesting'
},
{
name: '路段',
path: '/roadTesting'
},
{
name: '路段',
path: '/roadTesting'
},
{
name: '路段',
path: '/roadTesting'
}
]
onMounted(() => {})
</script>
<style lang="scss" scoped>
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #0a254b;
.header {
position: absolute;
left: vw(326);
.title {
width: vw(3133);
height: vh(120);
font-size: vw(48);
font-weight: 800;
text-align: center;
padding-top: vh(20);
color: #fff;
letter-spacing: vw(10);
box-sizing: border-box;
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
background-image: url('@/assets/images/title.png');
background-size: 100% 100%;
}
.nav-left {
position: absolute;
left: vw(380);
top: vh(34);
display: flex;
&-item {
cursor: pointer;
margin-left: vh(-10);
width: vw(210);
height: vh(56);
padding-top: vh(10);
font-weight: 600;
font-size: vw(28);
text-align: center;
color: rgba(208, 236, 255, 0.9);
background-image: url('@/assets/images/title-2.png');
background-size: 100% 100%;
}
}
.nav-right {
position: absolute;
right: vw(424);
top: vh(34);
display: flex;
&-item {
cursor: pointer;
margin-right: vh(-10);
width: vw(210);
height: vh(56);
padding-top: vh(10);
font-weight: 600;
font-size: vw(28);
text-align: center;
color: rgba(208, 236, 255, 0.9);
background-image: url('@/assets/images/title-3.png');
background-size: 100% 100%;
}
}
}
}
</style>
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #0a254b;
.header {
position: absolute;
left: vw(326);
.title {
width: vw(3133);
height: vh(120);
font-size: vw(48);
font-weight: 800;
text-align: center;
padding-top: vh(20);
color: #fff;
letter-spacing: vw(10);
box-sizing: border-box;
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
background-image: url('@/assets/images/title.png');
background-size: 100% 100%;
}
.nav-left {
position: absolute;
left: vw(380);
top: vh(34);
display: flex;
&-item {
cursor: pointer;
margin-left: vh(-10);
width: vw(210);
height: vh(56);
padding-top: vh(10);
font-weight: 600;
font-size: vw(28);
text-align: center;
color: rgba(208, 236, 255, 0.9);
background-image: url('@/assets/images/title-2.png');
background-size: 100% 100%;
}
}
.nav-right {
position: absolute;
right: vw(424);
top: vh(34);
display: flex;
&-item {
cursor: pointer;
margin-right: vh(-10);
width: vw(210);
height: vh(56);
padding-top: vh(10);
font-weight: 600;
font-size: vw(28);
text-align: center;
color: rgba(208, 236, 255, 0.9);
background-image: url('@/assets/images/title-3.png');
background-size: 100% 100%;
}
}
}
}
</style>