feat 安全检测
This commit is contained in:
duanliang
BIN
src/assets/images/icon-a-1.png
Normal file
BIN
src/assets/images/icon-a-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
BIN
src/assets/images/log-v-bg.png
Normal file
BIN
src/assets/images/log-v-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
src/assets/images/search-icon-1.png
Normal file
BIN
src/assets/images/search-icon-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 B |
BIN
src/assets/images/t-ico-2.png
Normal file
BIN
src/assets/images/t-ico-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="box-4-content">
|
<div class="box-4-content" >
|
||||||
<div class="top-box">
|
<div class="top-box">
|
||||||
<div class="title">融合通信</div>
|
<div class="title">融合通信</div>
|
||||||
<div class="icon-box flex">
|
<div class="icon-box flex">
|
||||||
@@ -51,11 +51,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup></script>
|
<script setup>
|
||||||
|
import { fitChartSize } from '@/utils/dataUtil'
|
||||||
|
const props = defineProps({
|
||||||
|
width: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 0
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: () => ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box-4-content {
|
.box-4-content {
|
||||||
width: vw(260);
|
width: vw(315);
|
||||||
height: vh(1060);
|
height: vh(1060);
|
||||||
background-image: url('/src/assets/images/rt-bg.png');
|
background-image: url('/src/assets/images/rt-bg.png');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|||||||
@@ -18,7 +18,9 @@
|
|||||||
<span>{{ name }}</span>
|
<span>{{ name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<ul class="nav-right">
|
<ul class="nav-right">
|
||||||
<li class="nav-right-item" v-for="(item, index) in navRight" :key="index">
|
<li class="nav-right-item"
|
||||||
|
@click="handleNav(item, index)"
|
||||||
|
v-for="(item, index) in navRight" :key="index">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
246
src/components/navLeft/index.vue
Normal file
246
src/components/navLeft/index.vue
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
<template>
|
||||||
|
<div class="left-nav">
|
||||||
|
<div class="top-box">
|
||||||
|
<!-- <div class="title">监控切换</div> -->
|
||||||
|
<div class="ul">
|
||||||
|
<div class="li active">异常告警</div>
|
||||||
|
<div class="li">景区入口</div>
|
||||||
|
<div class="li">核心路段</div>
|
||||||
|
<div class="li">公共交通</div>
|
||||||
|
<div class="li">广场</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bom-box">
|
||||||
|
<div class="title">
|
||||||
|
<span>检索</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search-box flex">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="searchValue"
|
||||||
|
clearable>
|
||||||
|
</el-input>
|
||||||
|
<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="tree-box">
|
||||||
|
|
||||||
|
<div class="tree-a">
|
||||||
|
<span class="name-1">核心点位</span>
|
||||||
|
<div class="tree-b">
|
||||||
|
<span class="name-2">摄像头1</span>
|
||||||
|
<span class="name-2 activee">摄像头1</span>
|
||||||
|
<span class="name-2">摄像头1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tree-a">
|
||||||
|
<span class="name-1">核心点位</span>
|
||||||
|
<div class="tree-b" >
|
||||||
|
<span class="name-2">摄像头1</span>
|
||||||
|
<span class="name-2 activee">摄像头1</span>
|
||||||
|
<span class="name-2">摄像头1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tree-a">
|
||||||
|
<span class="name-1">其他</span>
|
||||||
|
<div class="tree-b" v-if="false">
|
||||||
|
<span class="name-2">摄像头1</span>
|
||||||
|
<span class="name-2 activee">摄像头1</span>
|
||||||
|
<span class="name-2">摄像头1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
//背景色设置为透明
|
||||||
|
:deep(.el-input__wrapper){
|
||||||
|
background-color:rgba(0,0,0,0);
|
||||||
|
border:none;
|
||||||
|
box-shadow:none;
|
||||||
|
}
|
||||||
|
//输入框颜色
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
background-color: rgba(0, 0, 0, 0) !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.left-nav{
|
||||||
|
margin-left:vw(10);
|
||||||
|
// margin-top:vh(35);
|
||||||
|
width:vw(250);
|
||||||
|
|
||||||
|
.bom-box{
|
||||||
|
margin-top:vh(20);
|
||||||
|
.search-box{
|
||||||
|
background: rgba(217,217,217,0);
|
||||||
|
border-radius: 2px 2px 2px 2px;
|
||||||
|
border: 1px solid #0096FF;
|
||||||
|
margin:vw(20) auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.search-icon{
|
||||||
|
width:vw(16);
|
||||||
|
height:vh(16);
|
||||||
|
margin:0 vw(20);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-box::before{
|
||||||
|
position:absolute;
|
||||||
|
top:vw(-8);
|
||||||
|
left:vw(-8);
|
||||||
|
content: '';
|
||||||
|
width:vw(12);
|
||||||
|
height:vw(12);
|
||||||
|
background-image: url('/src/assets/images/icon-a-1.png');
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
.tree-box::after{
|
||||||
|
position:absolute;
|
||||||
|
content: '';
|
||||||
|
width:vw(12);
|
||||||
|
height:vw(12);
|
||||||
|
background-image: url('/src/assets/images/icon-a-1.png');
|
||||||
|
background-size:100% 100%;
|
||||||
|
bottom:vw(-4);
|
||||||
|
left:vw(-8);
|
||||||
|
|
||||||
|
}
|
||||||
|
.tree-box{
|
||||||
|
margin-left:vw(10);
|
||||||
|
margin-top:vh(20);
|
||||||
|
position:relative;
|
||||||
|
border-left:vw(3) solid;
|
||||||
|
border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
|
||||||
|
.tree-a{
|
||||||
|
.name-1{
|
||||||
|
padding:0 vw(20);
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(15);
|
||||||
|
color: #FFFFFF;
|
||||||
|
height:vh(30);
|
||||||
|
line-height:vh(30);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.tree-b::before{
|
||||||
|
position:absolute;
|
||||||
|
top:vw(-8);
|
||||||
|
left:vw(-8);
|
||||||
|
content: '';
|
||||||
|
width:vw(12);
|
||||||
|
height:vw(12);
|
||||||
|
background-image: url('/src/assets/images/icon-a-1.png');
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
// .tree-b::after{
|
||||||
|
// position:absolute;
|
||||||
|
// content: '';
|
||||||
|
// width:vw(12);
|
||||||
|
// height:vw(12);
|
||||||
|
// background-image: url('/src/assets/images/icon-a-1.png');
|
||||||
|
// background-size:100% 100%;
|
||||||
|
// bottom:vw(-4);
|
||||||
|
// left:vw(-8);
|
||||||
|
|
||||||
|
// }
|
||||||
|
.tree-b{
|
||||||
|
// margin-top:vh(20);
|
||||||
|
position:relative;
|
||||||
|
border-left:vw(3) solid;
|
||||||
|
border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
|
||||||
|
margin-left:vw(30);
|
||||||
|
margin-top:vh(10);
|
||||||
|
.name-2{
|
||||||
|
padding:0 vw(20);
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(15);
|
||||||
|
color: #FFFFFF;
|
||||||
|
height:vh(30);
|
||||||
|
line-height:vh(30);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tree-box .tree-a:first-child{
|
||||||
|
position:relative;
|
||||||
|
top:vh(-15);
|
||||||
|
}
|
||||||
|
.tree-box .tree-a:last-child{
|
||||||
|
position:relative;
|
||||||
|
bottom:vh(-12);
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
span{
|
||||||
|
margin-left:vw(30);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: vw(15);
|
||||||
|
line-height: vh(26);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-box{
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(18);
|
||||||
|
color: rgba(255,255,255,0.7);
|
||||||
|
line-height: 21px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
.title{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: vw(15);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
height:vh(35);
|
||||||
|
line-height: vh(34);
|
||||||
|
padding-left:vw(20);
|
||||||
|
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
|
||||||
|
}
|
||||||
|
.ul{
|
||||||
|
.li{
|
||||||
|
background: url('/src/assets/images/m-nav-bg-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width:vw(250);
|
||||||
|
height:vh(58);
|
||||||
|
line-height:vh(58);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom:vh(15);
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
background: url('/src/assets/images/m-nav-bg-2.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
// width:vw(178);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -5,6 +5,7 @@ import router from './router'
|
|||||||
import '@/styles/reset.css'
|
import '@/styles/reset.css'
|
||||||
import '@/styles/common.scss'
|
import '@/styles/common.scss'
|
||||||
import vue3videoPlay from 'vue3-video-play' // 引入组件
|
import vue3videoPlay from 'vue3-video-play' // 引入组件
|
||||||
|
// package.json 改个配置 "module": "./dist/index.mjs",
|
||||||
import 'vue3-video-play/dist/style.css' // 引入css
|
import 'vue3-video-play/dist/style.css' // 引入css
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
|
|||||||
@@ -14,10 +14,15 @@ const router = createRouter({
|
|||||||
component: () => import('../views/monitor/index.vue')
|
component: () => import('../views/monitor/index.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/testing',
|
path: '/sceneTesting',
|
||||||
name: 'testing',
|
name: 'sceneTesting',
|
||||||
component: () => import('../views/testing/index.vue')
|
component: () => import('../views/testing/index.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/roadTesting',
|
||||||
|
name: 'roadTesting',
|
||||||
|
component: () => import('../views/testing/road.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/scenic',
|
path: '/scenic',
|
||||||
name: 'scenic',
|
name: 'scenic',
|
||||||
|
|||||||
@@ -1,94 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="box-1">
|
|
||||||
<div class="title">核心景区视频</div>
|
|
||||||
<ul class="list">
|
|
||||||
<li
|
|
||||||
class="item"
|
|
||||||
:style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
|
|
||||||
v-for="(item, index) in 10"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<p class="item-title">三峡之巅-最新异常名称</p>
|
|
||||||
<!-- <img class="item-img" src="@/assets/images/img-1.png" alt="" /> -->
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import item1 from '@/assets/images/item-1.png'
|
|
||||||
import item2 from '@/assets/images/item-2.png'
|
|
||||||
|
|
||||||
console.log(item1, 'item1')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.box-1 {
|
|
||||||
margin: vh(10);
|
|
||||||
width: vw(326);
|
|
||||||
border-radius: vw(2);
|
|
||||||
background-image: url('@/assets/images/bg-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
width: vw(260);
|
|
||||||
height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
line-height: vh(26);
|
|
||||||
margin-left: vw(32.5);
|
|
||||||
font-size: vw(16);
|
|
||||||
font-weight: 800;
|
|
||||||
color: #fff;
|
|
||||||
background-image: url('@/assets/images/title-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
height: vh(1026);
|
|
||||||
padding: vw(8);
|
|
||||||
/* 滚动条整体样式 */
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: vw(0); /* 滚动条的宽度 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滚动条轨道 */
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: #f1f1f1; /* 轨道的背景色 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滚动条滑块 */
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #888; /* 滑块的背景色 */
|
|
||||||
border-radius: 5px; /* 滑块的圆角 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 当鼠标悬停在滚动条上时滑块的样式 */
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #555; /* 滑块的背景色 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
margin-bottom: vh(13);
|
|
||||||
background-size: 100% 100%;
|
|
||||||
&-title {
|
|
||||||
margin-bottom: vh(6);
|
|
||||||
margin-left: vw(45);
|
|
||||||
color: #fff;
|
|
||||||
font-size: vw(16);
|
|
||||||
height: vh(24);
|
|
||||||
line-height: vh(24);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
&-img {
|
|
||||||
width: 100%;
|
|
||||||
height: vh(164);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="box-2">
|
<div class="box-2">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title"> 交通信息 </div>
|
<div class="title"> <span>交通信息</span> </div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex pt-20 p-box">
|
<div class="flex pt-20 p-box">
|
||||||
<div class="item core">
|
<div class="item core">
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title"> 景区信息 </div>
|
<div class="title"> <span>景区信息</span> </div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-four">
|
<div class="flex-four">
|
||||||
<div class="item item1">
|
<div class="item item1">
|
||||||
@@ -60,7 +60,14 @@
|
|||||||
<div class="flex pt-20 p-box">
|
<div class="flex pt-20 p-box">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title-3"><span>异常告警</span></div>
|
<div class="title-3"><span>异常告警</span></div>
|
||||||
<div class="pt-20">
|
<div class="pt-20 chart-p">
|
||||||
|
<div class="check-box">
|
||||||
|
<el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
|
||||||
|
<el-option label="餐厅名" value="1"></el-option>
|
||||||
|
<el-option label="订单号" value="2"></el-option>
|
||||||
|
<el-option label="用户电话" value="3"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,7 +89,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title"> 景区信息 </div>
|
<div class="title"> <span>交通信息</span> </div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-four">
|
<div class="flex-four">
|
||||||
<div class="item item1">
|
<div class="item item1">
|
||||||
@@ -124,8 +131,14 @@
|
|||||||
<div class="flex pt-20 p-box">
|
<div class="flex pt-20 p-box">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title-3"><span>异常告警</span></div>
|
<div class="title-3"><span>异常告警</span></div>
|
||||||
<div class="pt-20">
|
<div class="pt-20 chart-p">
|
||||||
<!-- <Line :width="370" :height="180" id="line" /> -->
|
<div class="check-box">
|
||||||
|
<el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
|
||||||
|
<el-option label="餐厅名" value="1"></el-option>
|
||||||
|
<el-option label="订单号" value="2"></el-option>
|
||||||
|
<el-option label="用户电话" value="3"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -177,6 +190,7 @@
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
provide(THEME_KEY, 'dark');
|
provide(THEME_KEY, 'dark');
|
||||||
|
let selectSpot = ref('')
|
||||||
const option1 = ref({
|
const option1 = ref({
|
||||||
backgroundColor:'transparent',
|
backgroundColor:'transparent',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
@@ -328,6 +342,16 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-select__wrapper){
|
||||||
|
background:linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
|
||||||
|
border:none;
|
||||||
|
box-shadow:none;
|
||||||
|
border-top-left-radius: vh(30);
|
||||||
|
border-bottom-left-radius: vh(30);
|
||||||
|
font-size:vw(14);
|
||||||
|
color:#fff;
|
||||||
|
|
||||||
|
}
|
||||||
.line-chart{
|
.line-chart{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:vh(200);
|
height:vh(200);
|
||||||
@@ -343,6 +367,16 @@
|
|||||||
.p-box{
|
.p-box{
|
||||||
padding-top:vh(10);
|
padding-top:vh(10);
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
.chart-p{
|
||||||
|
position:relative;
|
||||||
|
.check-box{
|
||||||
|
position: absolute;
|
||||||
|
right:vw(30);
|
||||||
|
top:vh(10);
|
||||||
|
width:vw(120);
|
||||||
|
z-index: 19;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.h-flex{
|
.h-flex{
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -476,6 +510,14 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-image: url('@/assets/images/title-4.png');
|
background-image: url('@/assets/images/title-4.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
span{
|
||||||
|
font-weight: 800;
|
||||||
|
color: transparent;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.more {
|
.more {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -1,35 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 视频 -->
|
<!-- 视频 -->
|
||||||
<div class="box-3-content">
|
<div class="box-3-content">
|
||||||
|
<navLeft></navLeft>
|
||||||
|
|
||||||
<div class="left-nav">
|
|
||||||
<div class="top-box">
|
|
||||||
<!-- <div class="title">监控切换</div> -->
|
|
||||||
<div class="ul">
|
|
||||||
<div class="li active">异常告警</div>
|
|
||||||
<div class="li">景区入口</div>
|
|
||||||
<div class="li">核心路段</div>
|
|
||||||
<div class="li">公共交通</div>
|
|
||||||
<div class="li">广场</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bom-box">
|
|
||||||
<div class="title">
|
|
||||||
<span>检索</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 视频 -->
|
<!-- 视频 -->
|
||||||
<div class="video-box">
|
<div class="video-box">
|
||||||
<div v-if="videoLog == 1" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
|
<div class="flex video-one-1" v-if="videoLog == 1">
|
||||||
<block @click="handleItemVideo">
|
<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
|
||||||
<vue3VideoPlay v-bind="options"/>
|
<vue3VideoPlay v-bind="options"/>
|
||||||
</block>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="video-live flex" v-if="videoLog==2">
|
<div class="video-live flex" v-if="videoLog==2">
|
||||||
<div class="video-lt">
|
<div class="video-lt v-error-bg">
|
||||||
|
<div class="desc">核心路段：这是一条信息说明</div>
|
||||||
<vue3VideoPlay v-bind="options"/>
|
<vue3VideoPlay v-bind="options"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-rt">
|
<div class="video-rt">
|
||||||
@@ -38,6 +23,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="rt-v-box">
|
<div class="rt-v-box">
|
||||||
<div class="rt-video v-error-bg" v-for="item in 8">
|
<div class="rt-video v-error-bg" v-for="item in 8">
|
||||||
|
<div class="desc">核心路段：这是一条信息说明</div>
|
||||||
<vue3VideoPlay v-bind="options"/>
|
<vue3VideoPlay v-bind="options"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -51,6 +37,8 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { fitChartSize } from '@/utils/dataUtil'
|
import { fitChartSize } from '@/utils/dataUtil'
|
||||||
|
import navLeft from '@/components/navLeft/index.vue'
|
||||||
|
let searchValue = ref('')
|
||||||
const options = reactive({
|
const options = reactive({
|
||||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||||
type: 'm3u8', //视频类型
|
type: 'm3u8', //视频类型
|
||||||
@@ -86,27 +74,69 @@
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
//背景色设置为透明
|
||||||
|
:deep(.el-input__wrapper){
|
||||||
|
background-color:rgba(0,0,0,0);
|
||||||
|
border:none;
|
||||||
|
box-shadow:none;
|
||||||
|
}
|
||||||
|
//输入框颜色
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
background-color: rgba(0, 0, 0, 0) !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
.box-3-content{
|
.box-3-content{
|
||||||
width:vw(2410);
|
width:vw(2356);
|
||||||
height:vh(965);
|
height:vh(965);
|
||||||
// background-image: url('/src/assets/images/monotir-bg-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-top: vh(120);
|
margin-top: vh(120);
|
||||||
display: flex;
|
display: flex;
|
||||||
.video-box{
|
.video-box{
|
||||||
flex:1;
|
flex:1;
|
||||||
// padding:vh(40) vw(20);
|
|
||||||
display:flex;
|
display:flex;
|
||||||
flex-wrap: wrap;
|
.video-one-1{
|
||||||
padding-top:0;
|
background-image: url('/src/assets/images/log-v-bg.png');
|
||||||
margin-left:vw(20);
|
background-size: 100% 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top:0;
|
||||||
|
padding:vh(30) vw(20);
|
||||||
|
margin-left:vw(20);
|
||||||
|
}
|
||||||
.video-live{
|
.video-live{
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
margin-left:vw(10) ;
|
||||||
.video-lt{
|
.video-lt{
|
||||||
width:vw(1700);
|
width:vw(1666);
|
||||||
height:vh(950);
|
height:vh(950);
|
||||||
background-image: url('/src/assets/images/one-video-bg.png');
|
background-image: url('/src/assets/images/one-video-bg.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
padding:vh(40) vw(50);
|
||||||
|
position:relative;
|
||||||
|
.desc{
|
||||||
|
position:absolute;
|
||||||
|
// width:100%;
|
||||||
|
left:vw(50);
|
||||||
|
right:vw(50);
|
||||||
|
top:40(vh);
|
||||||
|
z-index: 9;
|
||||||
|
background: rgba(4,30,69,0.5);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding:vw(20);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.v-error-bg{
|
||||||
|
// background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
.desc{
|
||||||
|
background: rgba(226,27,27,0.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.video-rt{
|
.video-rt{
|
||||||
width:vw(400);
|
width:vw(400);
|
||||||
@@ -153,15 +183,36 @@
|
|||||||
padding:vw(20);
|
padding:vw(20);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin-bottom:vh(2);
|
margin-bottom:vh(2);
|
||||||
|
position:relative;
|
||||||
|
.desc{
|
||||||
|
position:absolute;
|
||||||
|
width:100%;
|
||||||
|
left:0;
|
||||||
|
bottom:0;
|
||||||
|
z-index: 9;
|
||||||
|
background: rgba(4,30,69,0.5);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding:vw(20);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.v-error-bg{
|
.v-error-bg{
|
||||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
.desc{
|
||||||
|
background: rgba(226,27,27,0.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.v-item{
|
.v-item{
|
||||||
width:vw(420);
|
width:vw(400);
|
||||||
height:vh(300);
|
height:vh(300);
|
||||||
background-image: url('/src/assets/images/v-item-bg.png');
|
background-image: url('/src/assets/images/v-item-bg.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
@@ -174,71 +225,6 @@
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.left-nav{
|
|
||||||
margin-left:vw(10);
|
|
||||||
// margin-top:vh(35);
|
|
||||||
width:vw(250);
|
|
||||||
.bom-box{
|
|
||||||
margin-top:vh(20);
|
|
||||||
.title{
|
|
||||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
span{
|
|
||||||
margin-left:vw(30);
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: vw(15);
|
|
||||||
line-height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.top-box{
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(18);
|
|
||||||
color: rgba(255,255,255,0.7);
|
|
||||||
line-height: 21px;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
.title{
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: vw(15);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
height:vh(35);
|
|
||||||
line-height: vh(34);
|
|
||||||
padding-left:vw(20);
|
|
||||||
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
|
|
||||||
}
|
|
||||||
.ul{
|
|
||||||
.li{
|
|
||||||
background: url('/src/assets/images/m-nav-bg-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
width:vw(250);
|
|
||||||
height:vh(58);
|
|
||||||
line-height:vh(58);
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom:vh(15);
|
|
||||||
}
|
|
||||||
.active{
|
|
||||||
background: url('/src/assets/images/m-nav-bg-2.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
// width:vw(178);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,177 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="box-4-content">
|
|
||||||
<div class="top-box">
|
|
||||||
<div class="title">融合通信</div>
|
|
||||||
<div class="icon-box flex">
|
|
||||||
<div class="icon">
|
|
||||||
<img src="/src/assets/images/r-icon-1.png" alt="" />
|
|
||||||
白帝城
|
|
||||||
</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bom-box">
|
|
||||||
<div class="title">
|
|
||||||
<span>最近联系</span>
|
|
||||||
</div>
|
|
||||||
<table class="table">
|
|
||||||
<tr class="tr-th">
|
|
||||||
<th>人员姓名</th>
|
|
||||||
<th>部门</th>
|
|
||||||
<th>职位</th>
|
|
||||||
<th>时间</th>
|
|
||||||
</tr>
|
|
||||||
<tr class="tr-td">
|
|
||||||
<td>January</td>
|
|
||||||
<td>$100</td>
|
|
||||||
<td>January</td>
|
|
||||||
<td>$100</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="tr-td">
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="tr-td">
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="tr-td">
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.box-4-content{
|
|
||||||
width:vw(317);
|
|
||||||
height:vh(1062);
|
|
||||||
background-image: url('/src/assets/images/rt-bg.png');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-top:vh(10);
|
|
||||||
margin-left:vw(10);
|
|
||||||
position: relative;
|
|
||||||
z-index: 999;
|
|
||||||
.bom-box{
|
|
||||||
.table{
|
|
||||||
width:100%;
|
|
||||||
margin-top:vh(5);
|
|
||||||
.tr-th{
|
|
||||||
background: linear-gradient( 180deg, rgba(0,99,255,0) 0%, #0063FF 100%);
|
|
||||||
border-radius: 0px 0px 0px 0px;
|
|
||||||
// border: 1px solid;
|
|
||||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(12);
|
|
||||||
color: #0096FF;
|
|
||||||
line-height: vh(14);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
th{
|
|
||||||
padding:vw(5);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.tr-td{
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: #F1F7FF;
|
|
||||||
line-height: vh(16);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
td{
|
|
||||||
padding:vh(5) vw(10)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tr-td:nth-child(odd){
|
|
||||||
background: linear-gradient( 90deg, rgba(0,150,255,0) 0%, rgba(0,150,255,0.22) 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
span{
|
|
||||||
margin-left:vw(30);
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: vw(15);
|
|
||||||
line-height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.top-box{
|
|
||||||
width:100%;
|
|
||||||
height:vh(500);
|
|
||||||
.icon-box{
|
|
||||||
justify-content: center;
|
|
||||||
font-family: Inter, Inter;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: #FFFFFF;
|
|
||||||
line-height: vh(16);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.icon{
|
|
||||||
display: block;
|
|
||||||
margin:vh(20) auto;
|
|
||||||
width:vw(86);
|
|
||||||
height:vh(104);
|
|
||||||
img{
|
|
||||||
width:vw(86);
|
|
||||||
height:vh(104);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: vw(16);
|
|
||||||
line-height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,84 +1,120 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
<CoreVideo />
|
<CoreVideo />
|
||||||
<box2 />
|
<box2 />
|
||||||
<box3 />
|
<box3 />
|
||||||
<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
||||||
<Correspondence />
|
<Correspondence />
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import box3 from './components/box-3.vue'
|
import box3 from './components/box-3.vue'
|
||||||
import box2 from './components/box-2.vue'
|
import box2 from './components/box-2.vue'
|
||||||
import box5 from './components/box-5.vue'
|
const navLeft = [{
|
||||||
const navLeft = [{ name: '奉节县' }, { name: '三峡之巅', path: '/scenic' }, { name: '白帝城' },{ name: '龙河桥' }]
|
name: '奉节县',
|
||||||
const navRight = [{ name: '路段' }, { name: '路段' }, { name: '路段' }, { name: '路段' }]
|
path: '/sceneTesting'
|
||||||
onMounted(() => {})
|
},
|
||||||
|
{
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.wrapper {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #0a254b;
|
background-color: #0a254b;
|
||||||
.header {
|
|
||||||
position: absolute;
|
.header {
|
||||||
left: vw(326);
|
position: absolute;
|
||||||
.title {
|
left: vw(326);
|
||||||
width: vw(3133);
|
|
||||||
height: vh(120);
|
.title {
|
||||||
font-size: vw(48);
|
width: vw(3133);
|
||||||
font-weight: 800;
|
height: vh(120);
|
||||||
text-align: center;
|
font-size: vw(48);
|
||||||
padding-top: vh(20);
|
font-weight: 800;
|
||||||
color: #fff;
|
text-align: center;
|
||||||
letter-spacing: vw(10);
|
padding-top: vh(20);
|
||||||
box-sizing: border-box;
|
color: #fff;
|
||||||
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
letter-spacing: vw(10);
|
||||||
background-image: url('@/assets/images/title.png');
|
box-sizing: border-box;
|
||||||
background-size: 100% 100%;
|
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
||||||
}
|
background-image: url('@/assets/images/title.png');
|
||||||
.nav-left {
|
background-size: 100% 100%;
|
||||||
position: absolute;
|
}
|
||||||
left: vw(380);
|
|
||||||
top: vh(34);
|
.nav-left {
|
||||||
display: flex;
|
position: absolute;
|
||||||
&-item {
|
left: vw(380);
|
||||||
cursor: pointer;
|
top: vh(34);
|
||||||
margin-left: vh(-10);
|
display: flex;
|
||||||
width: vw(210);
|
|
||||||
height: vh(56);
|
&-item {
|
||||||
padding-top: vh(10);
|
cursor: pointer;
|
||||||
font-weight: 600;
|
margin-left: vh(-10);
|
||||||
font-size: vw(28);
|
width: vw(210);
|
||||||
text-align: center;
|
height: vh(56);
|
||||||
color: rgba(208, 236, 255, 0.9);
|
padding-top: vh(10);
|
||||||
background-image: url('@/assets/images/title-2.png');
|
font-weight: 600;
|
||||||
background-size: 100% 100%;
|
font-size: vw(28);
|
||||||
}
|
text-align: center;
|
||||||
}
|
color: rgba(208, 236, 255, 0.9);
|
||||||
.nav-right {
|
background-image: url('@/assets/images/title-2.png');
|
||||||
position: absolute;
|
background-size: 100% 100%;
|
||||||
right: vw(424);
|
}
|
||||||
top: vh(34);
|
}
|
||||||
display: flex;
|
|
||||||
&-item {
|
.nav-right {
|
||||||
cursor: pointer;
|
position: absolute;
|
||||||
margin-right: vh(-10);
|
right: vw(424);
|
||||||
width: vw(210);
|
top: vh(34);
|
||||||
height: vh(56);
|
display: flex;
|
||||||
padding-top: vh(10);
|
|
||||||
font-weight: 600;
|
&-item {
|
||||||
font-size: vw(28);
|
cursor: pointer;
|
||||||
text-align: center;
|
margin-right: vh(-10);
|
||||||
color: rgba(208, 236, 255, 0.9);
|
width: vw(210);
|
||||||
background-image: url('@/assets/images/title-3.png');
|
height: vh(56);
|
||||||
background-size: 100% 100%;
|
padding-top: vh(10);
|
||||||
}
|
font-weight: 600;
|
||||||
}
|
font-size: vw(28);
|
||||||
}
|
text-align: center;
|
||||||
}
|
color: rgba(208, 236, 255, 0.9);
|
||||||
</style>
|
background-image: url('@/assets/images/title-3.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="box-1">
|
|
||||||
<div class="title">核心景区视频</div>
|
|
||||||
<ul class="list">
|
|
||||||
<li
|
|
||||||
class="item"
|
|
||||||
:style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
|
|
||||||
v-for="(item, index) in 10"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<p class="item-title">三峡之巅-最新异常名称</p>
|
|
||||||
<!-- <img class="item-img" src="@/assets/images/img-1.png" alt="" /> -->
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import item1 from '@/assets/images/item-1.png'
|
|
||||||
import item2 from '@/assets/images/item-2.png'
|
|
||||||
|
|
||||||
console.log(item1, 'item1')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.box-1 {
|
|
||||||
margin: vh(10);
|
|
||||||
width: vw(326);
|
|
||||||
border-radius: vw(2);
|
|
||||||
background-image: url('@/assets/images/bg-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
width: vw(260);
|
|
||||||
height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
line-height: vh(26);
|
|
||||||
margin-left: vw(32.5);
|
|
||||||
font-size: vw(16);
|
|
||||||
font-weight: 800;
|
|
||||||
color: #fff;
|
|
||||||
background-image: url('@/assets/images/title-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
height: vh(1026);
|
|
||||||
padding: vw(8);
|
|
||||||
/* 滚动条整体样式 */
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: vw(0); /* 滚动条的宽度 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滚动条轨道 */
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: #f1f1f1; /* 轨道的背景色 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滚动条滑块 */
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #888; /* 滑块的背景色 */
|
|
||||||
border-radius: 5px; /* 滑块的圆角 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 当鼠标悬停在滚动条上时滑块的样式 */
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #555; /* 滑块的背景色 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
margin-bottom: vh(13);
|
|
||||||
background-size: 100% 100%;
|
|
||||||
&-title {
|
|
||||||
margin-bottom: vh(6);
|
|
||||||
margin-left: vw(45);
|
|
||||||
color: #fff;
|
|
||||||
font-size: vw(16);
|
|
||||||
height: vh(24);
|
|
||||||
line-height: vh(24);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
&-img {
|
|
||||||
width: 100%;
|
|
||||||
height: vh(164);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,208 +1,120 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="box-2">
|
<!-- 安全检测 -->
|
||||||
<div class="header">
|
<div class="box-detection">
|
||||||
<div class="title"> 交通信息 </div>
|
<!-- 地图 -->
|
||||||
</div>
|
<div class="detection-top">
|
||||||
<div class="flex pt-20 p-box">
|
<Map />
|
||||||
<div class="item core">
|
|
||||||
<span class="title-1">全县景区数</span>
|
|
||||||
<div class="flex align-end color1"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="item queue">
|
|
||||||
<span class="title-1">核心景区数</span>
|
|
||||||
<div class="flex align-end color2"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="item congestion">
|
|
||||||
<span class="title-1">低感景区总数</span>
|
|
||||||
<div class="flex align-end color3"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header">
|
|
||||||
<div class="title"> 景区信息 </div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-four">
|
|
||||||
<div class="item item1">
|
|
||||||
<div class="box1">
|
|
||||||
核心路段监控点位
|
|
||||||
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item item2">
|
<div class="detection-bom flex">
|
||||||
<div class="box1">
|
<!-- 数据 -->
|
||||||
核心景区分析点位
|
<div class="d-left">
|
||||||
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
<div class="t-title">
|
||||||
|
<span>监控点位统计</span>
|
||||||
|
</div>
|
||||||
|
<div class="t-census flex">
|
||||||
|
<img class="t-icon" src="@/assets/images/t-ico-0.png" alt="" />
|
||||||
|
<div class="item">
|
||||||
|
监控点位 <div class="color1"><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
核心点位 <div class="color1"><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
拥堵次数 <div class="color2"><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title-3"><span>异常告警占比</span></div>
|
||||||
|
<div class="pt-20 h-flex">
|
||||||
|
<div class="left">
|
||||||
|
<v-chart class="chart" :option="option1" autoresize />
|
||||||
|
</div>
|
||||||
|
<!-- <div class="right">
|
||||||
|
<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
|
||||||
|
<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="d-right">
|
||||||
</div>
|
<div class="t-title">
|
||||||
<div class="item item3">
|
<span>交通信息</span>
|
||||||
<div class="box1">
|
</div>
|
||||||
异常点位
|
<div class="t-census flex">
|
||||||
<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
|
<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
|
||||||
|
<div class="item">
|
||||||
|
监控点位 <div class="color1 "><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
核心点位 <div class="color1 "><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
拥堵次数 <div class="color1 "><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title-3"><span>异常告警占比</span></div>
|
||||||
|
<div class="pt-20 chart-p">
|
||||||
|
<div class="check-label">
|
||||||
|
<span class="active">平均</span>
|
||||||
|
<span>最大</span>
|
||||||
|
<span>最小</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="check-box">
|
||||||
|
<el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
|
||||||
|
<el-option label="餐厅名" value="1"></el-option>
|
||||||
|
<el-option label="订单号" value="2"></el-option>
|
||||||
|
<el-option label="用户电话" value="3"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div> -->
|
||||||
|
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="item item4">
|
|
||||||
<div class="box1">
|
|
||||||
异常告警
|
|
||||||
<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="item item5">
|
|
||||||
<div class="box1">
|
|
||||||
已处理
|
|
||||||
<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex pt-20 p-box">
|
|
||||||
<div class="box">
|
|
||||||
<div class="title-3"><span>异常告警</span></div>
|
|
||||||
<div class="pt-20">
|
|
||||||
<!-- <Line :width="370" :height="180" id="line" /> -->
|
|
||||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box">
|
|
||||||
<div class="title-3"><span>异常告警占比</span></div>
|
|
||||||
<div class="pt-20 h-flex">
|
|
||||||
<div class="left">
|
|
||||||
<v-chart class="chart" :option="option1" autoresize />
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
|
|
||||||
<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
|
|
||||||
<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
|
|
||||||
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
|
||||||
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
|
||||||
<div class="li"><span class="rk-img" >1</span>核心监控</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header">
|
|
||||||
<div class="title"> 景区信息 </div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-four">
|
|
||||||
<div class="item item1">
|
|
||||||
<div class="box1">
|
|
||||||
核心路段监控点位
|
|
||||||
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="item item2">
|
|
||||||
<div class="box1">
|
|
||||||
核心景区分析点位
|
|
||||||
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="item item3">
|
|
||||||
<div class="box1">
|
|
||||||
异常点位
|
|
||||||
<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="item item4">
|
|
||||||
<div class="box1">
|
|
||||||
异常告警
|
|
||||||
<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="item item5">
|
|
||||||
<div class="box1">
|
|
||||||
已处理
|
|
||||||
<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex pt-20 p-box">
|
|
||||||
<div class="box">
|
|
||||||
<div class="title-3"><span>异常告警</span></div>
|
|
||||||
<div class="pt-20">
|
|
||||||
<!-- <Line :width="370" :height="180" id="line" /> -->
|
|
||||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box">
|
|
||||||
<div class="title-3"><span>异常告警占比</span></div>
|
|
||||||
<div class="pt-20 h-flex">
|
|
||||||
<div class="left">
|
|
||||||
<v-chart class="chart" :option="option1" autoresize />
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
|
|
||||||
<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
|
|
||||||
<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
|
|
||||||
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
|
||||||
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
|
||||||
<div class="li"><span class="rk-img" >1</span>核心监控</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import countup from 'vue-countup-v3'
|
import countup from 'vue-countup-v3'
|
||||||
import { use } from 'echarts/core';
|
|
||||||
import { CanvasRenderer } from 'echarts/renderers';
|
|
||||||
import { GaugeChart } from 'echarts/charts';
|
|
||||||
import { PieChart } from 'echarts/charts';
|
|
||||||
import { LineChart } from 'echarts/charts';
|
|
||||||
import { fitChartSize } from '@/utils/dataUtil'
|
import { fitChartSize } from '@/utils/dataUtil'
|
||||||
import {
|
import Map from '@/components/Map/marker.vue'
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
LegendComponent,
|
|
||||||
} from 'echarts/components';
|
|
||||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||||
import { ref, provide } from 'vue';
|
import { ref, provide } from 'vue';
|
||||||
|
|
||||||
use([
|
|
||||||
LineChart,
|
|
||||||
GaugeChart,
|
|
||||||
CanvasRenderer,
|
|
||||||
PieChart,
|
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
LegendComponent,
|
|
||||||
]);
|
|
||||||
|
|
||||||
provide(THEME_KEY, 'dark');
|
provide(THEME_KEY, 'dark');
|
||||||
const option1 = ref({
|
const option1 = ref({
|
||||||
backgroundColor:'transparent',
|
backgroundColor:'transparent',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'item'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
type: 'scroll',
|
type: 'scroll',
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
right: -10,
|
right: 10,
|
||||||
top: 0,
|
top: 20,
|
||||||
bottom: 20,
|
bottom: 20,
|
||||||
itemWidth:5,
|
itemWidth:5,
|
||||||
itemHeight:5,
|
itemHeight:5,
|
||||||
textStyle:{
|
textStyle:{
|
||||||
fontSize:fitChartSize(12),
|
fontSize:fitChartSize(14),
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'Access From',
|
name: 'Access From',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
left:-25,
|
left:-30,
|
||||||
top:-20,
|
top:-50,
|
||||||
width:fitChartSize(230),
|
width:fitChartSize(350),
|
||||||
height:fitChartSize(230),
|
height:fitChartSize(350),
|
||||||
|
// width:200,
|
||||||
|
// height:200,
|
||||||
radius: ['40%', '50%'],
|
radius: ['40%', '50%'],
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
padAngle: 5,
|
padAngle: 5,
|
||||||
@@ -241,7 +153,7 @@
|
|||||||
backgroundColor:'transparent',
|
backgroundColor:'transparent',
|
||||||
grid:{
|
grid:{
|
||||||
top:'50',
|
top:'50',
|
||||||
bottom:'20',
|
bottom:'50',
|
||||||
left:'4%',
|
left:'4%',
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
@@ -250,7 +162,7 @@
|
|||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize:fitChartSize(10),
|
fontSize:10,
|
||||||
interval: 0, // 显示所有标签
|
interval: 0, // 显示所有标签
|
||||||
rotate: 0, // 旋转标签45度
|
rotate: 0, // 旋转标签45度
|
||||||
},
|
},
|
||||||
@@ -325,25 +237,336 @@
|
|||||||
]
|
]
|
||||||
|
|
||||||
})
|
})
|
||||||
|
const optionBar = ref({
|
||||||
|
backgroundColor:'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// type: 'scroll',
|
||||||
|
// orient: 'vertical',
|
||||||
|
right: 0,
|
||||||
|
top: 0,
|
||||||
|
bottom: 20,
|
||||||
|
itemWidth:5,
|
||||||
|
itemHeight:5,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '20%',
|
||||||
|
containLabel: true,
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
nameLocation: 'middle',
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: true,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize:fitChartSize(10),
|
||||||
|
interval: 0, // 显示所有标签
|
||||||
|
rotate: 0, // 旋转标签45度
|
||||||
|
},
|
||||||
|
minorTisk:{
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||||
|
axisTisk:{
|
||||||
|
alignWithLabel: true,
|
||||||
|
show: false,
|
||||||
|
// 设置刻度长度
|
||||||
|
length: 0,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed' ,// 设置为虚线
|
||||||
|
width:0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
|
||||||
|
type: 'value',
|
||||||
|
min:0,
|
||||||
|
max:45,
|
||||||
|
interval:15,
|
||||||
|
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
|
||||||
|
color: 'rgba(255,255,255,0.9)',
|
||||||
|
offset:10,
|
||||||
|
},
|
||||||
|
splitLine:{
|
||||||
|
show:false,
|
||||||
|
lineStyle:{
|
||||||
|
type:'dashed',
|
||||||
|
color:'#00D0FF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
// 设置柱状图颜色
|
||||||
|
color: '#0D53FF'
|
||||||
|
},
|
||||||
|
name: '三峡之巅',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [10, 0, 16, 10, 22, 11, 9,30],
|
||||||
|
barWidth: '45%', // 设置柱体粗细，可以是百分比或者像素值
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '白帝城',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
// 设置柱状图颜色
|
||||||
|
color: '#05FFB9'
|
||||||
|
},
|
||||||
|
data: [20, 5, 14, 14, 0, 20, 11,2]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '龙河桥',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
// 设置柱状图颜色
|
||||||
|
color: '#FFCB39'
|
||||||
|
},
|
||||||
|
data: [15, 20, 8, 19, 20, 5, 22,13]
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
})
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
<style scoped lang="scss">
|
|
||||||
.line-chart{
|
.line-chart{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:vh(200);
|
height:vh(240);
|
||||||
}
|
}
|
||||||
.box-2 {
|
.chart-p{
|
||||||
margin-top: vh(120);
|
position:relative;
|
||||||
width: vw(800);
|
.check-label{
|
||||||
height: vh(950);
|
position:absolute;
|
||||||
padding: vw(8);
|
right:vw(20);
|
||||||
box-sizing: border-box;
|
top:vh(15);
|
||||||
// background-image: url('@/assets/images/bg-2.png');
|
span{
|
||||||
background-size: 100% 100%;
|
width: vw(55);
|
||||||
.p-box{
|
padding:vw(5);
|
||||||
padding-top:vh(10);
|
background: linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
|
||||||
justify-content: space-between;
|
border-radius: vw(50);
|
||||||
|
// border: 1px solid rgba(0,114,220,0.3);
|
||||||
|
margin-left:vw(5);
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(13);
|
||||||
|
color: #0084FF;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
background: linear-gradient( 270deg, #37D8FC 0%, #0084FF 100%);
|
||||||
|
border-radius: vw(50);
|
||||||
|
border: 1px solid rgba(0,114,220,0.3);
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-detection{
|
||||||
|
margin-top: vh(120);
|
||||||
|
width:vw(820);
|
||||||
|
height:vh(950);
|
||||||
|
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 91%, rgba(5,40,79,0) 100%);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
.detection-top{
|
||||||
|
width:100%;
|
||||||
|
height:vh(580);
|
||||||
|
background-color: #fff;
|
||||||
|
.map-img{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detection-bom{
|
||||||
|
justify-content: space-between;
|
||||||
|
.d-left{
|
||||||
|
width:vw(405);
|
||||||
|
.left{
|
||||||
|
width:100%;
|
||||||
|
height:vh(240);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d-right{
|
||||||
|
width:vw(405);
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
width:100%;
|
||||||
|
padding:vw(5);
|
||||||
|
margin-top:vh(5);
|
||||||
|
background-image: url('@/assets/images/bg-3.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
&:nth-child(1) {
|
||||||
|
margin-right: vw(10);
|
||||||
|
}
|
||||||
|
.title-2 {
|
||||||
|
width: vw(253);
|
||||||
|
height: vh(28);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-image: url('@/assets/images/title-5.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
& > span {
|
||||||
|
padding-left: vw(22);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(15);
|
||||||
|
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||||||
|
color: transparent; /* 兼容其他浏览器 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.statistic {
|
||||||
|
display: flex;
|
||||||
|
margin-top: vh(12);
|
||||||
|
width: 100%;
|
||||||
|
height: vh(88);
|
||||||
|
background-image: url('@/assets/images/bg-4.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
&-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&-title {
|
||||||
|
font-size: vw(14);
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
&-value {
|
||||||
|
margin-top: vh(10);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(24);
|
||||||
|
color: #02f9fa;
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(28);
|
||||||
|
color: #ff4400 !important;
|
||||||
|
}
|
||||||
|
.prefix,
|
||||||
|
.suffix {
|
||||||
|
color: #ff4400;
|
||||||
|
font-size: vw(12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title-3 {
|
||||||
|
position: relative;
|
||||||
|
width: vw(344);
|
||||||
|
height: vh(12);
|
||||||
|
margin-top: vh(20);
|
||||||
|
background-image: url('@/assets/images/title-6.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
position: absolute;
|
||||||
|
bottom: vh(4);
|
||||||
|
left: vw(20);
|
||||||
|
font-size: vw(15);
|
||||||
|
font-weight: bold;
|
||||||
|
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||||||
|
color: transparent; /* 兼容其他浏览器 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.t-title {
|
||||||
|
margin: vh(10) auto;
|
||||||
|
width: 100%;
|
||||||
|
height: vh(32);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: vw(16);
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-image: url('@/assets/images/title-4.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.t-census{
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-image: url('@/assets/images/i-data-bg-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding:vw(10);
|
||||||
|
.t-icon{
|
||||||
|
width:vw(45);
|
||||||
|
height:vh(48);
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
flex:1;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
line-height: vh(16);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
.color1{
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(24);
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.color2{
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(24);
|
||||||
|
color: #F15A25;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.color3{
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(24);
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
color:#A70000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.h-flex{
|
.h-flex{
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -408,222 +631,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.flex-four{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
.item{
|
|
||||||
|
|
||||||
margin:vw(10);
|
|
||||||
width:vw(142);
|
|
||||||
height:vh(106);
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: rgba(255,255,255,0.9);
|
|
||||||
line-height: 16px;
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding:0;
|
|
||||||
margin-top:0;
|
|
||||||
.box1{
|
|
||||||
width:vw(142);
|
|
||||||
}
|
|
||||||
.item-num{
|
|
||||||
margin-top:vh(10);
|
|
||||||
}
|
|
||||||
.color1{
|
|
||||||
color: #02F9FA;
|
|
||||||
}
|
|
||||||
.color2{
|
|
||||||
color: #F15A25;
|
|
||||||
}
|
|
||||||
.color3{
|
|
||||||
color: #E21B1B;
|
|
||||||
}
|
|
||||||
.color4{
|
|
||||||
color: #12B5FD;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.item1,.item2{
|
|
||||||
background-image: url('/src/assets/images/four-t-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.item3{
|
|
||||||
background-image: url('/src/assets/images/four-t-2.png');
|
|
||||||
}
|
|
||||||
.item4{
|
|
||||||
background-image: url('/src/assets/images/four-t-3.png');
|
|
||||||
}
|
|
||||||
.item5{
|
|
||||||
background-image: url('/src/assets/images/four-t-4.png');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
position: relative;
|
|
||||||
.title {
|
|
||||||
margin: vh(5) auto;
|
|
||||||
width: vw(468);
|
|
||||||
height: vh(32);
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: vw(16);
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-image: url('@/assets/images/title-4.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.more {
|
|
||||||
position: absolute;
|
|
||||||
top: vh(0);
|
|
||||||
right: vw(20);
|
|
||||||
cursor: pointer;
|
|
||||||
width: vw(60);
|
|
||||||
height: vh(24);
|
|
||||||
background-image: url('@/assets/images/more.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
padding-left: vw(100);
|
|
||||||
width:vw(230);
|
|
||||||
height: vh(70);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
.align-end{
|
|
||||||
margin-top:vh(10);
|
|
||||||
}
|
|
||||||
.color1{
|
|
||||||
color: #12B5FD;
|
|
||||||
}
|
|
||||||
.color2{
|
|
||||||
color: #02F9FA;
|
|
||||||
}
|
|
||||||
.color3{
|
|
||||||
color: #F15A25;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
</style>
|
||||||
.title-1 {
|
|
||||||
position: absolute;
|
|
||||||
top: vh(10);
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
}
|
|
||||||
.countup-wrap {
|
|
||||||
|
|
||||||
font-size: vw(28);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.unit {
|
|
||||||
color: #02f9fa;
|
|
||||||
font-size: vw(14);
|
|
||||||
margin-bottom: vh(4);
|
|
||||||
}
|
|
||||||
.core {
|
|
||||||
background-image: url('@/assets/images/m-t-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.queue {
|
|
||||||
background-image: url('@/assets/images/m-t-2.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.congestion {
|
|
||||||
background-image: url('@/assets/images/m-t-2.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.box {
|
|
||||||
width: vw(384);
|
|
||||||
// height: vh(360);
|
|
||||||
background-image: url('@/assets/images/bg-3.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
&:nth-child(1) {
|
|
||||||
margin-right: vw(10);
|
|
||||||
}
|
|
||||||
.title-2 {
|
|
||||||
width: vw(253);
|
|
||||||
height: vh(28);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-image: url('@/assets/images/title-5.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
& > span {
|
|
||||||
padding-left: vw(22);
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: vw(15);
|
|
||||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
|
||||||
color: transparent; /* 兼容其他浏览器 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.statistic {
|
|
||||||
display: flex;
|
|
||||||
margin-top: vh(12);
|
|
||||||
width: 100%;
|
|
||||||
height: vh(88);
|
|
||||||
background-image: url('@/assets/images/bg-4.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
&-item {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
&-title {
|
|
||||||
font-size: vw(14);
|
|
||||||
color: rgba(255, 255, 255, 0.9);
|
|
||||||
}
|
|
||||||
&-value {
|
|
||||||
margin-top: vh(10);
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: vw(24);
|
|
||||||
color: #02f9fa;
|
|
||||||
}
|
|
||||||
.count {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: vw(28);
|
|
||||||
color: #ff4400 !important;
|
|
||||||
}
|
|
||||||
.prefix,
|
|
||||||
.suffix {
|
|
||||||
color: #ff4400;
|
|
||||||
font-size: vw(12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.title-3 {
|
|
||||||
position: relative;
|
|
||||||
width: vw(344);
|
|
||||||
height: vh(12);
|
|
||||||
margin-top: vh(20);
|
|
||||||
background-image: url('@/assets/images/title-6.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
& > span {
|
|
||||||
position: absolute;
|
|
||||||
bottom: vh(4);
|
|
||||||
left: vw(20);
|
|
||||||
font-size: vw(15);
|
|
||||||
font-weight: bold;
|
|
||||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
|
||||||
color: transparent; /* 兼容其他浏览器 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,30 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 视频 -->
|
<!-- 视频 -->
|
||||||
<div class="box-3-content">
|
<div class="box-3-content">
|
||||||
|
<navLeft></navLeft>
|
||||||
|
|
||||||
<div class="left-nav">
|
|
||||||
<div class="top-box">
|
|
||||||
<!-- <div class="title">监控切换</div> -->
|
|
||||||
<div class="ul">
|
|
||||||
<div class="li active">异常告警</div>
|
|
||||||
<div class="li">景区入口</div>
|
|
||||||
<div class="li">核心路段</div>
|
|
||||||
<div class="li">公共交通</div>
|
|
||||||
<div class="li">广场</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bom-box">
|
|
||||||
<div class="title">
|
|
||||||
<span>检索</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 视频 -->
|
<!-- 视频 -->
|
||||||
<div class="video-box">
|
<div class="video-box">
|
||||||
<div class="v-item" v-for="item in 15">
|
<div class="flex video-one-1" v-if="videoLog == 1">
|
||||||
<!-- 视频 -->
|
<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
|
||||||
<vue3VideoPlay
|
<vue3VideoPlay v-bind="options"/>
|
||||||
v-bind="options"/>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="video-live flex" v-if="videoLog == 2">
|
||||||
|
<div class="video-lt v-error-bg">
|
||||||
|
<div class="desc">核心路段：这是一条信息说明</div>
|
||||||
|
<vue3VideoPlay v-bind="options"/>
|
||||||
|
</div>
|
||||||
|
<div class="video-rt">
|
||||||
|
<div class="title">
|
||||||
|
<span>最近联系</span>
|
||||||
|
</div>
|
||||||
|
<div class="rt-v-box">
|
||||||
|
<div class="rt-video v-error-bg" v-for="item in 8">
|
||||||
|
<div class="desc">核心路段：这是一条信息说明</div>
|
||||||
|
<vue3VideoPlay v-bind="options"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -32,6 +36,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { fitChartSize } from '@/utils/dataUtil'
|
import { fitChartSize } from '@/utils/dataUtil'
|
||||||
|
import navLeft from '@/components/navLeft/index.vue'
|
||||||
const options = reactive({
|
const options = reactive({
|
||||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||||
type: 'm3u8', //视频类型
|
type: 'm3u8', //视频类型
|
||||||
@@ -59,8 +64,11 @@
|
|||||||
"fullScreen",
|
"fullScreen",
|
||||||
], //显示所有按钮,
|
], //显示所有按钮,
|
||||||
});
|
});
|
||||||
|
const videoLog = ref(1)
|
||||||
// webscoket连接
|
const handleItemVideo = ()=>{
|
||||||
|
console.log('单击视频')
|
||||||
|
videoLog.value = 2
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -77,7 +85,124 @@
|
|||||||
display:flex;
|
display:flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-top:0;
|
padding-top:0;
|
||||||
margin-left:vw(20);
|
// margin-left:vw(20);
|
||||||
|
.video-one-1{
|
||||||
|
background-image: url('/src/assets/images/log-v-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top:0;
|
||||||
|
padding:vh(30) vw(20);
|
||||||
|
margin-left:vw(20);
|
||||||
|
}
|
||||||
|
.video-live{
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left:vw(10) ;
|
||||||
|
.video-lt{
|
||||||
|
width:vw(1666);
|
||||||
|
height:vh(950);
|
||||||
|
background-image: url('/src/assets/images/one-video-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding:vh(40) vw(50);
|
||||||
|
position:relative;
|
||||||
|
.desc{
|
||||||
|
position:absolute;
|
||||||
|
// width:100%;
|
||||||
|
left:vw(50);
|
||||||
|
right:vw(50);
|
||||||
|
top:40(vh);
|
||||||
|
z-index: 9;
|
||||||
|
background: rgba(4,30,69,0.5);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding:vw(20);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.v-error-bg{
|
||||||
|
// background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
.desc{
|
||||||
|
background: rgba(226,27,27,0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-rt{
|
||||||
|
width:vw(400);
|
||||||
|
height:vh(950);
|
||||||
|
background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
border: 1px solid;
|
||||||
|
opacity: 0.4;
|
||||||
|
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
||||||
|
margin-left:vw(10);
|
||||||
|
padding:vw(20);
|
||||||
|
.rt-v-box{
|
||||||
|
overflow-y: auto;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-bottom:vh(10);
|
||||||
|
position:relative;
|
||||||
|
left:vw(-20);
|
||||||
|
span{
|
||||||
|
margin-left:vw(30);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: vw(15);
|
||||||
|
line-height: vh(26);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.rt-video{
|
||||||
|
width:100%;
|
||||||
|
height:vh(300);
|
||||||
|
background-image: url('/src/assets/images/v-item-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding:vw(20);
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom:vh(2);
|
||||||
|
position:relative;
|
||||||
|
.desc{
|
||||||
|
position:absolute;
|
||||||
|
width:100%;
|
||||||
|
left:0;
|
||||||
|
bottom:0;
|
||||||
|
z-index: 9;
|
||||||
|
background: rgba(4,30,69,0.5);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding:vw(20);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.v-error-bg{
|
||||||
|
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.desc{
|
||||||
|
background: rgba(226,27,27,0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.v-item{
|
.v-item{
|
||||||
width:vw(400);
|
width:vw(400);
|
||||||
height:vh(300);
|
height:vh(300);
|
||||||
@@ -88,71 +213,5 @@
|
|||||||
margin-bottom:vh(4);
|
margin-bottom:vh(4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.left-nav{
|
|
||||||
margin-left:vw(20);
|
|
||||||
// margin-top:vh(35);
|
|
||||||
width:vw(250);
|
|
||||||
.bom-box{
|
|
||||||
margin-top:vh(20);
|
|
||||||
.title{
|
|
||||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
span{
|
|
||||||
margin-left:vw(30);
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: vw(15);
|
|
||||||
line-height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.top-box{
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(18);
|
|
||||||
color: rgba(255,255,255,0.7);
|
|
||||||
line-height: 21px;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
.title{
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: vw(15);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
height:vh(35);
|
|
||||||
line-height: vh(34);
|
|
||||||
padding-left:vw(20);
|
|
||||||
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
|
|
||||||
}
|
|
||||||
.ul{
|
|
||||||
.li{
|
|
||||||
background: url('/src/assets/images/m-nav-bg-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
width:vw(250);
|
|
||||||
height:vh(58);
|
|
||||||
line-height:vh(58);
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom:vh(15);
|
|
||||||
}
|
|
||||||
.active{
|
|
||||||
background: url('/src/assets/images/m-nav-bg-2.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
// width:vw(178);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,177 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="box-4-content">
|
|
||||||
<div class="top-box">
|
|
||||||
<div class="title">融合通信</div>
|
|
||||||
<div class="icon-box flex">
|
|
||||||
<div class="icon">
|
|
||||||
<img src="/src/assets/images/r-icon-1.png" alt="" />
|
|
||||||
白帝城
|
|
||||||
</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
|
|
||||||
<div class="icon"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bom-box">
|
|
||||||
<div class="title">
|
|
||||||
<span>最近联系</span>
|
|
||||||
</div>
|
|
||||||
<table class="table">
|
|
||||||
<tr class="tr-th">
|
|
||||||
<th>人员姓名</th>
|
|
||||||
<th>部门</th>
|
|
||||||
<th>职位</th>
|
|
||||||
<th>时间</th>
|
|
||||||
</tr>
|
|
||||||
<tr class="tr-td">
|
|
||||||
<td>January</td>
|
|
||||||
<td>$100</td>
|
|
||||||
<td>January</td>
|
|
||||||
<td>$100</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="tr-td">
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="tr-td">
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="tr-td">
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
<td>February</td>
|
|
||||||
<td>$80</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.box-4-content{
|
|
||||||
width:vw(317);
|
|
||||||
height:vh(1062);
|
|
||||||
background-image: url('/src/assets/images/rt-bg.png');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-top:vh(10);
|
|
||||||
margin-left:vw(10);
|
|
||||||
position: relative;
|
|
||||||
z-index: 999;
|
|
||||||
.bom-box{
|
|
||||||
.table{
|
|
||||||
width:100%;
|
|
||||||
margin-top:vh(5);
|
|
||||||
.tr-th{
|
|
||||||
background: linear-gradient( 180deg, rgba(0,99,255,0) 0%, #0063FF 100%);
|
|
||||||
border-radius: 0px 0px 0px 0px;
|
|
||||||
// border: 1px solid;
|
|
||||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(12);
|
|
||||||
color: #0096FF;
|
|
||||||
line-height: vh(14);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
th{
|
|
||||||
padding:vw(5);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.tr-td{
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: #F1F7FF;
|
|
||||||
line-height: vh(16);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
td{
|
|
||||||
padding:vh(5) vw(10)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tr-td:nth-child(odd){
|
|
||||||
background: linear-gradient( 90deg, rgba(0,150,255,0) 0%, rgba(0,150,255,0.22) 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
span{
|
|
||||||
margin-left:vw(30);
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: vw(15);
|
|
||||||
line-height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.top-box{
|
|
||||||
width:100%;
|
|
||||||
height:vh(500);
|
|
||||||
.icon-box{
|
|
||||||
justify-content: center;
|
|
||||||
font-family: Inter, Inter;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: #FFFFFF;
|
|
||||||
line-height: vh(16);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.icon{
|
|
||||||
display: block;
|
|
||||||
margin:vh(20) auto;
|
|
||||||
width:vw(86);
|
|
||||||
height:vh(104);
|
|
||||||
img{
|
|
||||||
width:vw(86);
|
|
||||||
height:vh(104);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: vw(16);
|
|
||||||
line-height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -3,9 +3,8 @@
|
|||||||
<div class="box-detection">
|
<div class="box-detection">
|
||||||
<!-- 地图 -->
|
<!-- 地图 -->
|
||||||
<div class="detection-top">
|
<div class="detection-top">
|
||||||
<!-- <img class="map-img" src="@/assets/images/map-img-1.jpg" alt="" /> -->
|
<img class="map-img" src="@/assets/images/map-img-1.jpg" alt="" />
|
||||||
|
<!-- <Map /> -->
|
||||||
<Map />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="detection-bom flex">
|
<div class="detection-bom flex">
|
||||||
<!-- 数据 -->
|
<!-- 数据 -->
|
||||||
@@ -41,24 +40,31 @@
|
|||||||
<span>交通信息</span>
|
<span>交通信息</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="t-census flex">
|
<div class="t-census flex">
|
||||||
<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
|
<img class="t-icon" src="@/assets/images/t-ico-2.png" alt="" />
|
||||||
<div class="item">
|
<div class="item">
|
||||||
监控点位 <div class="color1"><countup endVal="895" /></div>
|
监控点位 <div class="color1 color2"><countup endVal="895" /></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
核心点位 <div class="color1"><countup endVal="895" /></div>
|
核心点位 <div class="color1 color2"><countup endVal="895" /></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
拥堵次数 <div class="color1"><countup endVal="895" /></div>
|
拥堵次数 <div class="color1 color3"><countup endVal="895" /></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title-3"><span>异常告警占比</span></div>
|
<div class="title-3"><span>异常告警占比</span></div>
|
||||||
<div class="pt-20 h-flex">
|
<div class="pt-20 h-flex">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
<v-chart class="chart" :option="option1" autoresize />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
|
||||||
|
<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -81,20 +87,25 @@
|
|||||||
trigger: 'item'
|
trigger: 'item'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
type: 'scroll',
|
type: 'scroll',
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
right: 30,
|
right: -10,
|
||||||
top: 30,
|
top: 0,
|
||||||
bottom: 20,
|
bottom: 20,
|
||||||
itemWidth:5,
|
itemWidth:5,
|
||||||
itemHeight:5,
|
itemHeight:5,
|
||||||
|
textStyle:{
|
||||||
|
fontSize:fitChartSize(12),
|
||||||
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'Access From',
|
name: 'Access From',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
left:-100,
|
left:-25,
|
||||||
top:-30,
|
top:0,
|
||||||
|
width:fitChartSize(250),
|
||||||
|
height:fitChartSize(250),
|
||||||
// width:200,
|
// width:200,
|
||||||
// height:200,
|
// height:200,
|
||||||
radius: ['40%', '50%'],
|
radius: ['40%', '50%'],
|
||||||
@@ -507,8 +518,82 @@
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
.color3{
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(24);
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
color:#A70000;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.h-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left{
|
||||||
|
flex:1;
|
||||||
|
width:vw(260);
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
margin-left:vw(20);
|
||||||
|
width:vw(120);
|
||||||
|
.li{
|
||||||
|
position: relative;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
position: relative;
|
||||||
|
padding-left:vw(30);
|
||||||
|
padding:0 vw(10);
|
||||||
|
padding-left:vw(15);
|
||||||
|
background: linear-gradient( 90deg, #1B5EC7 0%, rgba(27,94,199,0) 100%);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
height:vh(24);
|
||||||
|
line-height:vh(24);
|
||||||
|
margin-bottom:vh(8);
|
||||||
|
// opacity: 0.4;
|
||||||
|
.rk-img{
|
||||||
|
position: absolute;
|
||||||
|
width:vw(24);
|
||||||
|
height:vh(24);
|
||||||
|
line-height:vh(24);
|
||||||
|
left:vw(-12);
|
||||||
|
top:50%;
|
||||||
|
display: block;
|
||||||
|
background-image: url('/src/assets/images/rk-4.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.li-1{
|
||||||
|
background: linear-gradient( 90deg, #FFC10B 0%, rgba(255,209,44,0) 100%);
|
||||||
|
.rk-img{
|
||||||
|
background-image: url('/src/assets/images/rk-1.png');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.li-2{
|
||||||
|
background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
|
||||||
|
.rk-img{
|
||||||
|
background-image: url('/src/assets/images/rk-2.png');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.li-3{
|
||||||
|
background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
|
||||||
|
.rk-img{
|
||||||
|
background-image: url('/src/assets/images/rk-3.png');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,33 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
<box1 />
|
<CoreVideo />
|
||||||
<box5/>
|
<box5/>
|
||||||
<box3 />
|
<box3 />
|
||||||
<div class="header">
|
<Header title="三峡之巅-安全检测" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
||||||
<ul class="nav-left">
|
<Correspondence />
|
||||||
<li class="nav-left-item">奉节县</li>
|
|
||||||
<li class="nav-left-item">三峡之巅</li>
|
|
||||||
<li class="nav-left-item">白帝城</li>
|
|
||||||
<li class="nav-left-item">龙河桥</li>
|
|
||||||
</ul>
|
|
||||||
<div class="title">三峡之巅-安全检测</div>
|
|
||||||
<ul class="nav-right">
|
|
||||||
<li class="nav-right-item">路段1</li>
|
|
||||||
<li class="nav-right-item">路段</li>
|
|
||||||
<li class="nav-right-item">路段</li>
|
|
||||||
<li class="nav-right-item">路段</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<box4 />
|
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import box1 from './components/box-1.vue'
|
|
||||||
import box4 from './components/box-4.vue'
|
|
||||||
import box3 from './components/box-3.vue'
|
import box3 from './components/box-3.vue'
|
||||||
import box5 from './components/box-5.vue'
|
import box5 from './components/box-5.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(() => {})
|
onMounted(() => {})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
114
src/views/testing/road.vue
Normal file
114
src/views/testing/road.vue
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
<template>
|
||||||
|
<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'
|
||||||
|
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>
|
||||||
Reference in New Issue
Block a user