feat：完善功能
This commit is contained in:
zjc
@@ -50,7 +50,6 @@
|
||||
let res = await getVideoListApi({
|
||||
businessVideoDisplayPosition: ''
|
||||
})
|
||||
console.log(res, '============')
|
||||
list.value = res.data
|
||||
nextTick(() => {
|
||||
list.value.forEach(async (item, index) => {
|
||||
|
||||
@@ -50,8 +50,8 @@
|
||||
<span>风速：{{ weatherData?.windSpeed }}</span>
|
||||
<span class="line">|</span>
|
||||
<span>空气质量：{{ weatherData?.airQuality }}</span>
|
||||
<span class="ml-20">{{ currentDate }}</span>
|
||||
</div>
|
||||
<p class="date">{{ currentDate }}</p>
|
||||
<div v-if="isBack" class="back" @click="handleBack">
|
||||
<img class="icon" src="@/assets/images/back.png" alt="" /> 返回
|
||||
</div>
|
||||
@@ -206,6 +206,46 @@
|
||||
]
|
||||
isBack.value = true
|
||||
break
|
||||
case '/sceneTesting':
|
||||
title.value = '三峡之巅-安全检测'
|
||||
navLeft.value = [
|
||||
{
|
||||
name: '奉节县',
|
||||
path: '/sceneTesting'
|
||||
},
|
||||
{
|
||||
name: '三峡之巅',
|
||||
path: '/sceneTesting'
|
||||
},
|
||||
{
|
||||
name: '白帝城',
|
||||
path: '/sceneTesting'
|
||||
},
|
||||
{
|
||||
name: '龙河桥',
|
||||
path: '/sceneTesting'
|
||||
}
|
||||
]
|
||||
navRight.value = [
|
||||
{
|
||||
name: '路段',
|
||||
path: '/roadTesting'
|
||||
},
|
||||
{
|
||||
name: '路段',
|
||||
path: '/roadTesting'
|
||||
},
|
||||
{
|
||||
name: '路段',
|
||||
path: '/roadTesting'
|
||||
},
|
||||
{
|
||||
name: '路段',
|
||||
path: '/roadTesting'
|
||||
}
|
||||
]
|
||||
isBack.value = true
|
||||
break
|
||||
}
|
||||
}
|
||||
watch(
|
||||
@@ -230,7 +270,7 @@
|
||||
left: vw(326);
|
||||
.weather {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: vh(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
@@ -239,6 +279,14 @@
|
||||
margin: 0 vw(10);
|
||||
}
|
||||
}
|
||||
.date {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: vh(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
color: #ffffff;
|
||||
}
|
||||
.back {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@@ -140,7 +140,7 @@
|
||||
},
|
||||
series: []
|
||||
}
|
||||
const updateOption = () => {
|
||||
const init = () => {
|
||||
if (params) {
|
||||
props.data.map((item, index) => {
|
||||
params.series[index].data = item.data
|
||||
@@ -167,7 +167,7 @@
|
||||
(val) => {
|
||||
if (val[0].length > 0 && val[1].length > 0) {
|
||||
setTimeout(() => {
|
||||
updateOption()
|
||||
init()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
|
||||
243
src/components/Nav/index.vue
Normal file
243
src/components/Nav/index.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="left-nav">
|
||||
<div v-if="showNav" class="top-box">
|
||||
<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="true">
|
||||
<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>
|
||||
let searchValue = ref('')
|
||||
|
||||
let props = defineProps({
|
||||
showNav: {
|
||||
type: Boolean,
|
||||
default: () => true
|
||||
}
|
||||
})
|
||||
</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>
|
||||
@@ -32,13 +32,17 @@
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
}
|
||||
})
|
||||
|
||||
const { id, chart, setOption, initChart } = useEchart()
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
||||
|
||||
@@ -46,14 +50,14 @@
|
||||
color: colorList,
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
bottom: 'center',
|
||||
left: '70%',
|
||||
itemWidth: fitChartSize(20),
|
||||
itemHeight: fitChartSize(20),
|
||||
itemGap: fitChartSize(20),
|
||||
x: '64%',
|
||||
y: 'center',
|
||||
itemWidth: fitChartSize(12),
|
||||
itemHeight: fitChartSize(12),
|
||||
itemGap: fitChartSize(10),
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: fitChartSize(20)
|
||||
fontSize: fitChartSize(14)
|
||||
}
|
||||
},
|
||||
series: [
|
||||
@@ -69,8 +73,8 @@
|
||||
show: true,
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (o) {
|
||||
return `{value|123456}` + '\n' + `{name|舆情总数 }`
|
||||
formatter: () => {
|
||||
return `{value|${props.total}}` + '\n' + `{name|${props.label} }`
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
|
||||
@@ -1,217 +1,221 @@
|
||||
<template>
|
||||
<div class="video-box">
|
||||
<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 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 class="video-box">
|
||||
<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 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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
const options = reactive({
|
||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
width:"100%",
|
||||
height:"100%",
|
||||
color: "#409eff", //主题色
|
||||
title: "", //视频名称
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// "audioTrack",
|
||||
// "quality",
|
||||
// "speedRate",
|
||||
// "volume",
|
||||
"setting",
|
||||
"pip",
|
||||
"pageFullScreen",
|
||||
"fullScreen",
|
||||
], //显示所有按钮,
|
||||
});
|
||||
const videoLog = ref(1)
|
||||
const handleItemVideo = ()=>{
|
||||
console.log('单击视频')
|
||||
videoLog.value = 2
|
||||
}
|
||||
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
const options = reactive({
|
||||
src: 'http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8', //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// "audioTrack",
|
||||
// "quality",
|
||||
// "speedRate",
|
||||
// "volume",
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen'
|
||||
] //显示所有按钮,
|
||||
})
|
||||
const videoLog = ref(1)
|
||||
const handleItemVideo = () => {
|
||||
console.log('单击视频')
|
||||
videoLog.value = 2
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-box{
|
||||
flex:1;
|
||||
display:flex;
|
||||
.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;
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
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{
|
||||
width:vw(400);
|
||||
height:vh(300);
|
||||
background-image: url('/src/assets/images/v-item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
padding:vw(20);
|
||||
margin-right:vw(4);
|
||||
margin-bottom:vh(4);
|
||||
}
|
||||
.v-error-bg{
|
||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.video-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.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;
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
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 {
|
||||
width: vw(400);
|
||||
height: vh(300);
|
||||
background-image: url('/src/assets/images/v-item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
padding: vw(20);
|
||||
margin-right: vw(4);
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
.v-error-bg {
|
||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,246 +0,0 @@
|
||||
<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="true">
|
||||
<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>
|
||||
let searchValue = ref('')
|
||||
</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>
|
||||
Reference in New Issue
Block a user