1201 lines
32 KiB
Vue
1201 lines
32 KiB
Vue
<template>
|
|
<div class="box-2">
|
|
<div class="left-nav">
|
|
<div v-if="showNav" >
|
|
<div class="ul">
|
|
<div
|
|
class="li"
|
|
:class="{ active: current == index }"
|
|
v-for="(item, index) in navList"
|
|
:key="index"
|
|
@click="handleNav(index)"
|
|
>
|
|
<span>
|
|
{{ item }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
:class="{ active: current == navList.length }"
|
|
@click="handleNav(navList.length)" class="li">
|
|
<span>收藏夹</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bom-box">
|
|
<Title2 title="检索" />
|
|
<div class="search-box">
|
|
<el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
|
|
<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
|
|
</div>
|
|
|
|
<div class="tree-box">
|
|
<div class="tree-item" v-for="(item, i) in regionList" :key="i">
|
|
<div class="tree-item__node" @click.stop="handleRegions(i)">
|
|
<img
|
|
class="tree-item__icon"
|
|
:class="{ 'tree-item__icon-up': item.show }"
|
|
src="@/assets/images/arrow-down.png"
|
|
alt=""
|
|
/>
|
|
<span class="tree-item__name">{{ item.regions }}</span>
|
|
</div>
|
|
<div v-if="item.show" class="tree-item__child">
|
|
<div class="tree-item__child-item" v-for="(resource, x) in item.resourcesList">
|
|
<div class="new-title" @click.stop="handleRegList(resource,i,x)">
|
|
<img
|
|
class="tree-item__icon"
|
|
:class="{ 'tree-item__icon-up': resource.show }"
|
|
src="@/assets/images/arrow-down.png"
|
|
alt=""
|
|
/>
|
|
{{resource.regions}}
|
|
|
|
</div>
|
|
<div v-if="resource.show">
|
|
<div
|
|
class="tree-item__child-item"
|
|
v-for="(res, x) in resource.videoResources"
|
|
:key="x"
|
|
@click.stop="handleCamera(res.cameraIndexCode,res)"
|
|
>
|
|
{{ res.cameraName || res.cameraIndexCode }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="videoLog == 1" class="video-wrapper">
|
|
<div class="video-list">
|
|
<div
|
|
class="video-item"
|
|
v-for="(item, index) in videoList"
|
|
:key="index"
|
|
@click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode,item)"
|
|
>
|
|
<div class="video-item__inner">
|
|
<div
|
|
v-if="item.isCollect == 1"
|
|
class="video-item__follow"
|
|
@click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
|
|
>取消关注
|
|
</div>
|
|
<div
|
|
v-if="item.isCollect == 0"
|
|
class="video-item__unfollow"
|
|
@click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
|
|
>关注
|
|
</div>
|
|
<video
|
|
class="video-item__video"
|
|
:id="'monitorVideo' + index"
|
|
preload="auto"
|
|
muted
|
|
autoplay
|
|
:controls="false"
|
|
>
|
|
<source type="application/x-mpegURL" />
|
|
</video>
|
|
<p class="video-item__title--primary">
|
|
{{ item.cameraName || item.cameraIndexCode }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
v-model:current-page="params.pageNum"
|
|
:page-size="params.pageSize"
|
|
:total="total"
|
|
background
|
|
layout="prev, pager, next"
|
|
@current-change="currentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="videoLog == 2" class="video-detail" style="flex:1;">
|
|
<div class="video-detail__wrapper">
|
|
<video class="video-detail__video" ref="videoRef" muted autoplay controls>
|
|
<source type="application/x-mpegURL" />
|
|
</video>
|
|
<div class="action-box">
|
|
<div class="action-item">
|
|
<span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-if="thisVideo.isCollect==0">关注</span>
|
|
<span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-else="thisVideo.isCollect==1">取消关注</span>
|
|
</div>
|
|
<div class="action-item">
|
|
<img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
|
|
<span>聚焦</span>
|
|
<img src="@/assets/images/minus.png" title="焦距变小" @click="handleAction(Z00M_OUT)" />
|
|
</div>
|
|
<div class="action-item">
|
|
<img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" />
|
|
<img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" />
|
|
<img
|
|
class="pause"
|
|
src="@/assets/images/pause.png"
|
|
title="停止操作"
|
|
@click="handleAction(STOP)"
|
|
/>
|
|
<img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
|
|
<img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
|
|
</div>
|
|
<div class="action-item">
|
|
<span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-if="thisVideo.isDiy==0">收藏</span>
|
|
<span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-else="thisVideo.isDiy==1">取消收藏</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="video-right">
|
|
<div class="flex justify-between">
|
|
<!-- <Title2 title="异常告警" />-->
|
|
<div class="back-box" @click="handleBack">
|
|
<img class="icon" src="@/assets/images/back.png" />
|
|
<span>返回</span>
|
|
</div>
|
|
</div>
|
|
<ul class="list">
|
|
<li
|
|
class="item"
|
|
v-for="(item, index) in videoList"
|
|
:key="index"
|
|
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
|
|
>
|
|
<div>
|
|
<p class="item-title--primary">
|
|
{{ item.cameraName }}
|
|
</p>
|
|
<video
|
|
class="item-img"
|
|
:id="'monitorVideo' + index"
|
|
muted
|
|
autoplay
|
|
:controls="false"
|
|
style="object-fit: cover"
|
|
>
|
|
<source src="" type="application/x-mpegURL" />
|
|
</video>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy" :isCollect="isCollect" :src="videoSrc" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getVideoListApi, getPreviewUrlApi,getColletListApi,getColletDiyListApi,getColletDiyApi} from '@/api/home'
|
|
import {
|
|
getVideoTypeApi,
|
|
getVideoRegionsApi,
|
|
postVideoRemainApi,
|
|
postVideoControlApi,
|
|
postVideoCollectApi
|
|
} from '@/api/monitor'
|
|
import mpegtsjs from 'mpegts.js'
|
|
|
|
import { debounce } from 'lodash'
|
|
import pubSub from 'pubsub-js'
|
|
import Hls from 'hls.js'
|
|
|
|
const Z00M_IN = 'zoomin' // 焦距变大
|
|
const Z00M_OUT = 'zoomout' // 焦距变小
|
|
const UP = 'up' // 上转
|
|
const DOWN = 'down' // 下转
|
|
const LEFT = 'left' // 左转
|
|
const RIGHT = 'right' // 右转
|
|
const STOP = 'stop' // 停止操作
|
|
let ACTION = '0'
|
|
|
|
const props = {
|
|
value: 'id',
|
|
label: 'label',
|
|
children: 'children'
|
|
}
|
|
let isCollect = ref(0)
|
|
let isDiy = ref(0)
|
|
let command = ref('')
|
|
let videoList = ref([])
|
|
let navList = ref([])
|
|
let current = ref(0)
|
|
let showNav = ref(true)
|
|
let videoLog = ref(1)
|
|
let videoRef = ref()
|
|
let regionList = ref()
|
|
let monitorChange = null
|
|
let videoSrc = ref('')
|
|
let show = ref(false)
|
|
let loading = ref(false)
|
|
let total = ref(0)
|
|
let cameraName = ref('')
|
|
let cameraIndexCode = ref('')
|
|
let params = reactive({
|
|
pageNum: 1,
|
|
pageSize: 6,
|
|
businessScenicArea: '',
|
|
businessVideoDisplayPosition: ''
|
|
})
|
|
let hlsRefs = []
|
|
let hlsRef = null
|
|
let timer = null
|
|
|
|
const postVideoRemain = async () => {
|
|
// if(!videoList.value.length) return false;
|
|
// timer = setInterval(() => {
|
|
// postVideoRemainApi({
|
|
// cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
|
|
// })
|
|
// }, 2000)
|
|
}
|
|
const createPlayer = (cameraIndexCode,videoElement) => {
|
|
getPreviewUrlApi({
|
|
type: 'hls',
|
|
cameraIndexCode: cameraIndexCode
|
|
}).then(res=>{
|
|
const url = res.data.url;
|
|
if(url.startsWith('ws')){
|
|
const player = mpegtsjs.createPlayer({
|
|
url: url,
|
|
type: 'flv',
|
|
isLive: true,
|
|
hasAudio: false
|
|
})
|
|
player.attachMediaElement(videoElement)
|
|
player.load()
|
|
player.play()
|
|
// 错误处理和重连机制
|
|
player.on(mpegtsjs.Events.ERROR, (err) => {
|
|
console.error('播放器错误【'+cameraIndexCode+'】:', err)
|
|
player.unload();
|
|
player.destroy();
|
|
// 3 秒后尝试重新加载
|
|
setTimeout(() => {
|
|
console.error('重新加载【'+cameraIndexCode+'】' )
|
|
createPlayer(cameraIndexCode,videoElement);
|
|
}, 3000)
|
|
|
|
})
|
|
player.on(mpegtsjs.Events.LOADING_COMPLETE, (err) => {
|
|
console.error('加载完成:', err)
|
|
})
|
|
hlsRefs.push(player)
|
|
}
|
|
else{
|
|
const player = new Hls({
|
|
maxBufferLength: 10, // 最大缓冲长度（秒）
|
|
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
|
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
|
|
})
|
|
player.loadSource(url)
|
|
player.attachMedia(videoElement)
|
|
player.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
videoElement.play()
|
|
})
|
|
player.on(Hls.Events.ERROR, (event, data) => {
|
|
// 根据错误类型进行处理
|
|
if (data.fatal) {
|
|
switch (data.type) {
|
|
case Hls.ErrorTypes.NETWORK_ERROR:
|
|
console.log('网络错误，尝试重新加载');
|
|
player.startLoad();
|
|
break;
|
|
case Hls.ErrorTypes.MEDIA_ERROR:
|
|
console.log('媒体错误，尝试修复');
|
|
player.recoverMediaError();
|
|
break;
|
|
default:
|
|
console.log('无法恢复的错误，销毁播放器');
|
|
// hls.destroy();
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
hlsRefs.push(player)
|
|
}
|
|
})
|
|
}
|
|
const initVideo = () => {
|
|
clearHlsRefs()
|
|
nextTick(() => {
|
|
videoList.value.forEach(async (item, index) => {
|
|
const videoElement = document.getElementById(`monitorVideo${index}`)
|
|
createPlayer(item.cameraIndexCode,videoElement);
|
|
})
|
|
})
|
|
}
|
|
const onInput = debounce((e) => {
|
|
|
|
if(e){
|
|
getVideoRegions('search')
|
|
}else{
|
|
getVideoRegions()
|
|
}
|
|
|
|
}, 500)
|
|
const clearHlsRefs = () => {
|
|
if (hlsRefs.length > 0) {
|
|
hlsRefs.map((item) => {
|
|
item.destroy()
|
|
})
|
|
hlsRefs = []
|
|
}
|
|
}
|
|
const currentChange = (e) => {
|
|
if(navList.value.length==current.value){
|
|
clearHlsRefs()
|
|
videoList.value = []
|
|
getColletList()
|
|
}else{
|
|
clearHlsRefs()
|
|
videoList.value = []
|
|
getVideoList()
|
|
}
|
|
|
|
}
|
|
const getColletList = async () => {
|
|
clearHlsRefs()
|
|
params.businessVideoDisplayPosition = ''
|
|
let res = await getColletDiyListApi(params)
|
|
videoList.value = res.data
|
|
// postVideoRemain()
|
|
total.value = res.total
|
|
nextTick(() => {
|
|
initVideo()
|
|
})
|
|
}
|
|
const handleNav = (e) => {
|
|
clearInterval(timer)
|
|
if (current.value == e) return
|
|
clearHlsRefs()
|
|
videoLog.value = 1
|
|
params.pageNum = 1
|
|
videoList.value = []
|
|
total.value = 0
|
|
current.value = e
|
|
if(e==navList.value.length){
|
|
getColletList()
|
|
}else{
|
|
getVideoList()
|
|
}
|
|
|
|
}
|
|
const handleBack = () => {
|
|
videoLog.value = 1
|
|
hlsRef.destroy()
|
|
initVideo()
|
|
}
|
|
let thisVideo = ref(null)
|
|
const handleItemVideo = async (url, type, code, item) => {
|
|
let res = await getPreviewUrlApi({
|
|
cameraIndexCode: code,
|
|
type: 'hls'
|
|
})
|
|
url = res.data.url
|
|
thisVideo.value = item
|
|
videoLog.value = 2
|
|
cameraIndexCode.value = code
|
|
setTimeout(() => {
|
|
if (url.startsWith('ws')) {
|
|
hlsRef = mpegtsjs.createPlayer({
|
|
url: url,
|
|
type: 'flv',
|
|
isLive: true,
|
|
hasAudio: false
|
|
})
|
|
hlsRef.attachMediaElement(videoRef.value)
|
|
hlsRef.load()
|
|
hlsRef.play()
|
|
// 错误处理和重连机制
|
|
hlsRef.on('error', (err) => {
|
|
console.error('播放器错误:', err)
|
|
// 3 秒后尝试重新加载
|
|
hlsRef.unload()
|
|
hlsRef.destroy()
|
|
// 3 秒后尝试重新加载
|
|
setTimeout(() => {
|
|
console.error('重新加载【' + cameraIndexCode + '】')
|
|
handleItemVideo(url, 101, code, item);
|
|
}, 3000)
|
|
})
|
|
} else {
|
|
hlsRef = new Hls({
|
|
maxBufferLength: 10, // 最大缓冲长度（秒）
|
|
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
|
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
|
|
})
|
|
hlsRef.loadSource(url)
|
|
hlsRef.attachMedia(videoRef.value)
|
|
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
videoRef.value.play()
|
|
})
|
|
}
|
|
|
|
if (type == 100) initVideo()
|
|
}, 1000)
|
|
}
|
|
const handleAction = async (e) => {
|
|
command.value = e
|
|
if (e == STOP) {
|
|
ACTION = '1'
|
|
} else {
|
|
ACTION = '0'
|
|
}
|
|
await postVideoControlApi({
|
|
action: ACTION,
|
|
command: command.value,
|
|
cameraIndexCode: cameraIndexCode.value
|
|
})
|
|
if (e == STOP) {
|
|
command.value = ''
|
|
}
|
|
ElMessage({
|
|
message: '操作成功',
|
|
type: 'success'
|
|
})
|
|
}
|
|
const handleRegions = (e) => {
|
|
regionList.value[e].show = !regionList.value[e].show
|
|
}
|
|
const handleRegList = (item,i,x)=>{
|
|
regionList.value[i].resourcesList[x].show = !regionList.value[i].resourcesList[x].show
|
|
|
|
}
|
|
const handleCamera = async (itemCode,resource) => {
|
|
show.value = true
|
|
let res = await getPreviewUrlApi({
|
|
type: 'hls',
|
|
cameraIndexCode: itemCode
|
|
})
|
|
cameraIndexCode.value = itemCode;
|
|
isCollect.value = resource.isCollect
|
|
isDiy.value = resource.isDiy
|
|
videoSrc.value = res.data.url
|
|
}
|
|
const handleCollect = async (id, status, index) => {
|
|
await postVideoCollectApi({
|
|
cameraIndexCode:id,
|
|
isCollect: status == 0 ? 1 : 0
|
|
})
|
|
if (status == 0) {
|
|
thisVideo.value.isCollect=1
|
|
videoList.value[index].isCollect = 1
|
|
} else {
|
|
thisVideo.value.isCollect=0
|
|
videoList.value[index].isCollect = 0
|
|
}
|
|
pubSub.publish('videoCollect', id)
|
|
}
|
|
const handleCollectAdd = async (id, status, index) => {
|
|
await getColletDiyApi({
|
|
cameraIndexCode:id,
|
|
isDiy: thisVideo.value.isDiy == 0 ? 1 : 0
|
|
})
|
|
if(thisVideo.value.isDiy==1){
|
|
thisVideo.value.isDiy=0
|
|
// videoList.value.forEach((item,index)=>{
|
|
// if(item.cameraIndexCode==thisVideo.value.cameraIndexCode){
|
|
// videoList.value.splice(index, 1);
|
|
// }
|
|
// })
|
|
}else{
|
|
thisVideo.value.isDiy=1
|
|
}
|
|
if(current.value==navList.value.length){
|
|
getColletList()
|
|
}
|
|
}
|
|
watch(
|
|
() => videoList.value,
|
|
(val) => {
|
|
if (val.length) {
|
|
// console.log(val,'数据更新 内容')
|
|
postVideoRemain()
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
const getVideoList = async (val) => {
|
|
try {
|
|
if (loading.value) return
|
|
loading.value = true
|
|
if(val==3){
|
|
params.businessVideoDisplayPosition = ''
|
|
}else{
|
|
params.businessVideoDisplayPosition = navList.value[current.value].dictValue
|
|
}
|
|
|
|
let res = await getVideoListApi(params)
|
|
total.value = res.total
|
|
if (res.data.length > 0) {
|
|
|
|
videoList.value = res.data
|
|
// console.log(videoList.value,'1111111111111111111111')
|
|
// postVideoRemain()
|
|
nextTick(() => {
|
|
videoList.value.forEach(async (x, index) => {
|
|
const video = document.getElementById(`monitorVideo${index}`)
|
|
const hls = new Hls({
|
|
maxBufferLength: 10, // 最大缓冲长度（秒）
|
|
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
|
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
|
|
})
|
|
hls.loadSource(x.hlsUrl)
|
|
hls.attachMedia(video)
|
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
video.play()
|
|
})
|
|
hls.on(Hls.Events.ERROR, (event, data) => {
|
|
// console.error('HLS 播放器遇到错误:', data);
|
|
// hls.startLoad();
|
|
// initVideo()
|
|
// 根据错误类型进行处理
|
|
if (data.fatal) {
|
|
switch (data.type) {
|
|
case Hls.ErrorTypes.NETWORK_ERROR:
|
|
console.log('网络错误，尝试重新加载');
|
|
hls.startLoad();
|
|
break;
|
|
case Hls.ErrorTypes.MEDIA_ERROR:
|
|
console.log('媒体错误，尝试修复');
|
|
hls.recoverMediaError();
|
|
break;
|
|
default:
|
|
console.log('无法恢复的错误，销毁播放器');
|
|
|
|
// hls.destroy();
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
|
|
hlsRefs.push(hls)
|
|
})
|
|
})
|
|
} else {
|
|
if (timer) clearInterval(timer)
|
|
}
|
|
loading.value = false
|
|
} catch (error) {
|
|
loading.value = false
|
|
}
|
|
}
|
|
const getVideoType = async (id) => {
|
|
let res = await getVideoTypeApi({
|
|
businessScenicArea: params.businessScenicArea
|
|
})
|
|
if (res.data.length > 0) {
|
|
navList.value = res.data
|
|
getVideoList(id)
|
|
} else {
|
|
videoList.value = []
|
|
initVideo()
|
|
}
|
|
}
|
|
const getVideoRegions = async (search) => {
|
|
let res = await getVideoRegionsApi({
|
|
cameraName: cameraName.value,
|
|
businessScenicArea: params.businessScenicArea
|
|
})
|
|
|
|
regionList.value = res.data
|
|
regionList.value.videoResources = res.data.videoResources
|
|
// regionList.value[0].show = true
|
|
// regionList.value[0].resourcesList[0].show = true
|
|
// 初始化 false
|
|
regionList.value.forEach((item,index)=>{
|
|
// item.show = true
|
|
item.resourcesList.forEach((r,i)=>{
|
|
r.show = false
|
|
})
|
|
})
|
|
|
|
if(search=='search'){
|
|
regionList.value.forEach((item,index)=>{
|
|
item.show = true
|
|
item.resourcesList.forEach((r,i)=>{
|
|
r.show = true
|
|
})
|
|
})
|
|
}
|
|
|
|
console.log(regionList.value, ' regionList.value')
|
|
}
|
|
const onMonitorChange = () => {
|
|
monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
|
|
cameraName.value = ''
|
|
current.value = 0
|
|
params.businessScenicArea = data.scenicSpotId
|
|
params.pageNum = 1
|
|
videoList.value = []
|
|
regionList.value = []
|
|
total.value = 0
|
|
setTimeout(()=>{
|
|
getVideoType()
|
|
getVideoRegions()
|
|
},1500)
|
|
|
|
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
getVideoType()
|
|
getVideoRegions()
|
|
onMonitorChange()
|
|
pubSub.subscribe('videoIsDiy', (msg, data) => {
|
|
console.log(data,'收藏 ++++++++++++++')
|
|
if(data.isDiy){
|
|
if(current.value==navList.value.length){
|
|
getColletList()
|
|
}
|
|
}else{
|
|
videoList.value.forEach((item,index)=>{
|
|
if(item.cameraIndexCode==data.cameraIndexCode){
|
|
videoList.value.splice(index,1)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
onUnmounted(() => {
|
|
clearHlsRefs()
|
|
if (timer) clearInterval(timer)
|
|
pubSub.unsubscribe(monitorChange)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.new-title{
|
|
margin-bottom:vh(20);
|
|
color:#fff;
|
|
position:relative;
|
|
// left:vw(-15);
|
|
}
|
|
.tree-item__child-item{
|
|
.new-title:last-child{
|
|
margin:0;
|
|
}
|
|
}
|
|
.action {
|
|
&-box {
|
|
margin-top: vh(16);
|
|
gap: vw(20);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
&-item {
|
|
padding: vw(16);
|
|
display: flex;
|
|
align-items: center;
|
|
background: #0a4190;
|
|
border-radius: vw(8);
|
|
> img {
|
|
cursor: pointer;
|
|
width: vw(34);
|
|
height: auto;
|
|
}
|
|
> span {
|
|
margin: 0 vw(16);
|
|
font-weight: 400;
|
|
font-size: font-vw(16);
|
|
color: #ffffff;
|
|
}
|
|
.pause {
|
|
margin: 0 vw(10);
|
|
}
|
|
.item-sc{
|
|
padding:vw(10);
|
|
}
|
|
}
|
|
}
|
|
//背景色设置为透明
|
|
: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;
|
|
font-size: font-vw(22) !important;
|
|
}
|
|
|
|
.box-2 {
|
|
margin-top: vh(120);
|
|
// height: vh(950);
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
:deep(.el-input__inner) {
|
|
height: vh(36);
|
|
font-size: font-vw(16);
|
|
color: #ffffff;
|
|
}
|
|
.left-nav {
|
|
margin: 0 vw(8);
|
|
width: vw(350);
|
|
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
|
|
.bom-box {
|
|
margin-top: vh(20);
|
|
.search-box {
|
|
border-radius: vw(2);
|
|
height: vh(70);
|
|
border: 1px solid #0096ff;
|
|
margin: vh(10) auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.search-icon {
|
|
width: vw(20);
|
|
height: vw(20);
|
|
margin-right: vw(10);
|
|
}
|
|
}
|
|
|
|
.tree-box {
|
|
position: relative;
|
|
// height: vh(490);
|
|
padding: 0 vw(20);
|
|
padding-right:0;
|
|
padding-bottom:vw(10);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin-top:vh(30);
|
|
/* 滚动条整体样式 */
|
|
&::-webkit-scrollbar {
|
|
width: vw(4); /* 滚动条的宽度 */
|
|
}
|
|
/* 滚动条轨道 */
|
|
&::-webkit-scrollbar-track {
|
|
background: 'transparent'; /* 轨道的背景色 */
|
|
}
|
|
/* 滚动条滑块 */
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
|
border-radius: 5px; /* 滑块的圆角 */
|
|
}
|
|
.tree-item {
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding-top: vh(30);
|
|
|
|
// border-left: vw(2) solid #37d8fc;
|
|
&:nth-child(1) {
|
|
padding-top: 0;
|
|
}
|
|
&__node {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
&__icon {
|
|
margin-left: vw(-8);
|
|
width: vw(16);
|
|
height: auto;
|
|
}
|
|
&__icon-up {
|
|
@extend .tree-item__icon;
|
|
transform: rotate(180deg);
|
|
}
|
|
&__name {
|
|
padding: 0 vw(5);
|
|
display: block;
|
|
font-weight: 400;
|
|
font-size: font-vw(20);
|
|
color: #ffffff;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
&__child {
|
|
position: relative;
|
|
margin-top: vh(20);
|
|
// margin-left: vw(20);
|
|
// border-left: vw(2) solid #37d8fc;
|
|
}
|
|
&-top__icon {
|
|
position: absolute;
|
|
left: vw(-8);
|
|
top: vh(0);
|
|
width: vw(16);
|
|
height: vw(16);
|
|
}
|
|
&-bottom__icon {
|
|
position: absolute;
|
|
left: vw(-8);
|
|
bottom: vh(0);
|
|
width: vw(16);
|
|
height: vw(16);
|
|
}
|
|
&__child-item {
|
|
padding: vh(0) vw(20) vh(20) vw(10);
|
|
cursor: pointer;
|
|
color: rgb(192,216,254);
|
|
font-weight: 400;
|
|
font-size: font-vw(18);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
// display: flex;
|
|
align-items: flex-start;
|
|
padding-right:0;
|
|
&:nth-last-of-type(1) {
|
|
// padding: vh(0) vw(20);
|
|
// padding-right:0;
|
|
padding-bottom:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ul {
|
|
font-weight: 400;
|
|
font-size: font-vw(18);
|
|
color: #fff;
|
|
height: vh(740);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
/* 滚动条整体样式 */
|
|
|
|
&::-webkit-scrollbar {
|
|
width: vw(4); /* 滚动条的宽度 */
|
|
}
|
|
/* 滚动条轨道 */
|
|
&::-webkit-scrollbar-track {
|
|
background: 'transparent'; /* 轨道的背景色 */
|
|
}
|
|
/* 滚动条滑块 */
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
|
border-radius: 5px; /* 滑块的圆角 */
|
|
}
|
|
.li {
|
|
cursor: pointer;
|
|
// width: vw(250);
|
|
height: vh(120);
|
|
line-height: vh(120);
|
|
text-align: center;
|
|
margin-bottom: vh(25);
|
|
background: url('/src/assets/images/m-nav-bg-1.png');
|
|
background-size: 100% 100%;
|
|
font-size: font-vw(22);
|
|
}
|
|
.active {
|
|
background: url('/src/assets/images/m-nav-bg-2.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.video {
|
|
&-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
// height: vh(960);
|
|
padding: vh(30) vw(20);
|
|
box-sizing: border-box;
|
|
background-image: url('/src/assets/images/log-v-bg.png');
|
|
background-size: 100% 100%;
|
|
.pagination {
|
|
padding: vh(10) vw(30);
|
|
position: absolute;
|
|
right: vw(30);
|
|
bottom: vh(50);
|
|
}
|
|
}
|
|
&-list {
|
|
gap: vw(8);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
}
|
|
&-item {
|
|
position: relative;
|
|
// width: vw(686);
|
|
width: 33%;
|
|
height: vh(920);
|
|
padding: vh(10) vw(10);
|
|
background-image: url('/src/assets/images/item-primary.png');
|
|
background-size: 100% 100%;
|
|
&:hover {
|
|
.video-item__follow {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
&-item__follow {
|
|
cursor: pointer;
|
|
display: none;
|
|
position: absolute;
|
|
right: vw(8);
|
|
top: vw(8);
|
|
z-index: 9999;
|
|
padding: 0 vw(20);
|
|
height: vh(24);
|
|
text-align: center;
|
|
line-height: vh(24);
|
|
font-weight: 400;
|
|
font-size: font-vw(16);
|
|
color: #ffffff;
|
|
background-image: url('@/assets/images/unfollow.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
&-item__unfollow {
|
|
@extend .video-item__follow;
|
|
background-image: url('@/assets/images/unfollow.png');
|
|
}
|
|
|
|
&-item__inner {
|
|
position: relative;
|
|
}
|
|
&-item__title {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: vh(20) vw(20);
|
|
color: #fff;
|
|
font-size: font-vw(20);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
z-index: 999;
|
|
}
|
|
&-item__title--error {
|
|
@extend .video-item__title;
|
|
background-color: rgba(226, 27, 27, 0.72);
|
|
}
|
|
&-item__title--primary {
|
|
@extend .video-item__title;
|
|
font-size: font-vw(20);
|
|
background-color: rgba(4, 30, 69, 0.72);
|
|
}
|
|
&-item__video {
|
|
width: 100%;
|
|
height: vh(900);
|
|
object-fit: cover;
|
|
}
|
|
&-detail {
|
|
margin-left: vw(10);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
&-detail__wrapper {
|
|
position: relative;
|
|
padding: vh(40) vw(50);
|
|
// width: vw(1660);
|
|
flex:1;
|
|
// height: vh(960);
|
|
background-image: url('/src/assets/images/one-video-bg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
&-detail__title {
|
|
position: absolute;
|
|
left: vw(50);
|
|
right: vw(50);
|
|
top: 40 (vh);
|
|
z-index: 9;
|
|
font-weight: 400;
|
|
font-size: font-vw(14);
|
|
color: #ffffff;
|
|
padding: vw(20);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: rgba(4, 30, 69, 0.5);
|
|
}
|
|
&-detail__video {
|
|
width: 100%;
|
|
height: vh(1820);
|
|
object-fit: contain;
|
|
background-color: #000;
|
|
}
|
|
&-right {
|
|
margin-left: vw(8);
|
|
width: vw(440);
|
|
// height: vh(956);
|
|
background: #082f5a;
|
|
.back-box {
|
|
cursor: pointer;
|
|
padding-right: vw(20);
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom:vh(10);
|
|
.icon {
|
|
width: vw(30);
|
|
height: auto;
|
|
margin-right: vw(10);
|
|
}
|
|
& > span {
|
|
font-weight: bold;
|
|
font-size: font-vw(20);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.list {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: vh(1920);
|
|
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(10);
|
|
padding: vw(10);
|
|
background-image: url('@/assets/images/item-primary.png');
|
|
background-size: 100% 100%;
|
|
& > div {
|
|
position: relative;
|
|
}
|
|
&-title {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: vw(10);
|
|
color: #fff;
|
|
font-size: font-vw(14);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
z-index: 999;
|
|
}
|
|
&-title--error {
|
|
@extend .item-title;
|
|
background-color: rgba(226, 27, 27, 0.72);
|
|
}
|
|
&-title--primary {
|
|
@extend .item-title;
|
|
font-size: font-vw(20);
|
|
padding:vw(10);
|
|
background-color: rgba(4, 30, 69, 0.72);
|
|
}
|
|
&-img {
|
|
width: 100%;
|
|
height: vh(264);
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
.video-live {
|
|
.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: font-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: font-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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|