230 lines
5.7 KiB
Vue
230 lines
5.7 KiB
Vue
<template>
|
||
<!-- 视频 -->
|
||
<div class="box-3-content">
|
||
<navLeft></navLeft>
|
||
|
||
<!-- 视频 -->
|
||
<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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { fitChartSize } from '@/utils/dataUtil'
|
||
import navLeft from '@/components/navLeft/index.vue'
|
||
let searchValue = ref('')
|
||
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>
|
||
//背景色设置为透明
|
||
: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{
|
||
width:vw(2356);
|
||
height:vh(965);
|
||
|
||
margin-top: vh(120);
|
||
display: flex;
|
||
.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;
|
||
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> |