酒店接口对接 bug修改
This commit is contained in:
duanliang
@@ -16,6 +16,14 @@ export function getVideoListApi(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
// 获取区域摄像头
|
||||
export function getRegionsListApi(data){
|
||||
return request({
|
||||
url: '/fjtcc-api/api/largeScreen/video/regions/page',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取视频播放地址
|
||||
export function getPreviewUrlApi(data) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="select">
|
||||
<el-select v-model="modelValue" clearable :placeholder="label" @change="onChange">
|
||||
<el-select size="mini" v-model="modelValue" clearable :placeholder="label" @change="onChange">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.ssname" :value="item.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
@@ -29,7 +29,7 @@
|
||||
:deep(.el-select__wrapper) {
|
||||
min-width: vw(180);
|
||||
padding: vh(4) vw(20);
|
||||
min-height: vh(30) !important;
|
||||
height: vh(30) !important;
|
||||
line-height: vh(30) !important;
|
||||
font-size: vw(14) !important;
|
||||
border-radius: vw(100) !important;
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
legend: {
|
||||
show: true,
|
||||
x: 'center',
|
||||
y: '74%',
|
||||
y: '64%',
|
||||
itemHeight: fitChartSize(12),
|
||||
itemWidth: fitChartSize(12),
|
||||
itemGap: fitChartSize(6),
|
||||
|
||||
@@ -104,9 +104,9 @@
|
||||
import { getWeatherApi } from '@/api/home'
|
||||
import { getSpotListApi } from '@/api/sentiment'
|
||||
import { getHotelListApi } from '@/api/hotel'
|
||||
|
||||
|
||||
import pubSub from 'pubsub-js'
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
let currentDate = ref('')
|
||||
@@ -146,7 +146,9 @@
|
||||
const handleBack = () => {
|
||||
router.push('/home')
|
||||
}
|
||||
|
||||
const handleCommand = (item, type) => {
|
||||
|
||||
current.value = ''
|
||||
if (type === 'hotel') {
|
||||
otherRightLabel.value = '其他场馆'
|
||||
@@ -167,8 +169,10 @@
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 点击导航
|
||||
const handleNav = (item) => {
|
||||
console.log(item,'测试一下 ')
|
||||
if (isSkip.value) {
|
||||
router.push(item.path)
|
||||
} else {
|
||||
@@ -326,6 +330,7 @@
|
||||
navLeft.value = hotelRes.data.slice(0, 3)
|
||||
otherLeftNav.value = hotelRes.data.slice(3, hotelRes.data.length - 1)
|
||||
let venueRes = await getHotelListApi({ hotelStadiumType: 2 })
|
||||
console.log(venueRes,'venueRes')
|
||||
navRight.value = venueRes.data.slice(0, 3)
|
||||
otherRightNav.value = venueRes.data.slice(3, venueRes.data.length - 1)
|
||||
pubSub.publish('hotelChange', hotelRes.data[0])
|
||||
@@ -424,13 +429,13 @@
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-left: vh(-16);
|
||||
width: vw(210);
|
||||
min-width: vw(210);
|
||||
height: vh(56);
|
||||
line-height: vh(46);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
padding: 0 vw(30);
|
||||
padding: 0 vw(50);
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-size: 100% 100%;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistic-box">
|
||||
<div class="statistic-box" v-if="info?.hotelStadiumType==1">
|
||||
<div class="statistic-item">
|
||||
<div class="statistic-item__label">
|
||||
<img src="@/assets/images/dot-primary.svg" alt="" />
|
||||
@@ -161,11 +161,12 @@
|
||||
}
|
||||
.statistic {
|
||||
&-box {
|
||||
height: vh(114);
|
||||
height: vh(94);
|
||||
margin: 0 vw(26);
|
||||
gap: vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top:vh(10);
|
||||
}
|
||||
&-item {
|
||||
flex: 1;
|
||||
@@ -204,10 +205,13 @@
|
||||
}
|
||||
.desc {
|
||||
&-box {
|
||||
margin: 0 vw(20);
|
||||
margin: vh(20) vw(20);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-box-2{
|
||||
|
||||
}
|
||||
&-container {
|
||||
padding: vh(20) vw(20) 0 vw(20);
|
||||
}
|
||||
|
||||
@@ -1,22 +1,347 @@
|
||||
<template>
|
||||
<div class="video-box">
|
||||
<ul class="videos">
|
||||
<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)"
|
||||
>
|
||||
<div class="video-item__inner">
|
||||
<div
|
||||
v-if="item.isCollect == 1"
|
||||
class="video-item__follow"
|
||||
@click.stop="handleCollect(item.id, item.isCollect, index)"
|
||||
>取消关注
|
||||
</div>
|
||||
<div
|
||||
v-if="item.isCollect == 0"
|
||||
class="video-item__unfollow"
|
||||
@click.stop="handleCollect(item.id, 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.scenicAreaId }}
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
</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)"
|
||||
>
|
||||
<div>
|
||||
<p class="item-title--primary">
|
||||
{{ item.cameraName || item.scenicAreaId }}
|
||||
</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>
|
||||
|
||||
<!-- <ul class="videos">
|
||||
<li class="video-item" v-for="item in 8" :key="item">
|
||||
<img src="@/assets/images/sxzd.png" alt="" />
|
||||
<p>
|
||||
<span>核心路段：这是一条信息说明</span>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pagination-box">
|
||||
</ul> -->
|
||||
<!-- <div class="pagination-box">
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
|
||||
import {
|
||||
getVideoTypeApi,
|
||||
getVideoRegionsApi,
|
||||
postVideoRemainApi,
|
||||
postVideoControlApi,
|
||||
postVideoCollectApi
|
||||
} from '@/api/monitor'
|
||||
import pubSub from 'pubsub-js'
|
||||
import Hls from 'hls.js'
|
||||
const Z00M_IN = 'ZOOM_IN' // 焦距变大
|
||||
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
|
||||
const UP = 'UP' // 上转
|
||||
const DOWN = 'DOWN' // 下转
|
||||
const LEFT = 'LEFT' // 左转
|
||||
const RIGHT = 'RIGHT' // 右转
|
||||
const STOP = 'STOP' // 停止操作
|
||||
let ACTION = '0'
|
||||
let hlsRefs = []
|
||||
let hlsRef = null
|
||||
let timer = null
|
||||
let videoLog = ref(1)
|
||||
let videoList = ref([])
|
||||
let cameraIndexCode = ref('')
|
||||
let videoRef = ref()
|
||||
let monitorChange = null
|
||||
let total = ref(0)
|
||||
let loading = ref(false)
|
||||
let command = ref('')
|
||||
let params = reactive({
|
||||
businessScenicArea: "",
|
||||
cameraName: "",
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
})
|
||||
const onMonitorChange = () => {
|
||||
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
params.pageNum = 1
|
||||
videoList.value = []
|
||||
total.value = 0
|
||||
getRegionsList()
|
||||
})
|
||||
}
|
||||
// 关注
|
||||
const handleCollect = async (id, status, index) => {
|
||||
await postVideoCollectApi({
|
||||
id,
|
||||
isCollect: status == 0 ? 1 : 0
|
||||
})
|
||||
if (status == 0) {
|
||||
videoList.value[index].isCollect = 1
|
||||
} else {
|
||||
videoList.value[index].isCollect = 0
|
||||
}
|
||||
pubSub.publish('videoCollect', id)
|
||||
}
|
||||
// 采集
|
||||
const handleAction = async (e) => {
|
||||
if (e == STOP) {
|
||||
ACTION = '1'
|
||||
} else {
|
||||
ACTION = '0'
|
||||
command.value = e
|
||||
}
|
||||
await postVideoControlApi({
|
||||
action: ACTION,
|
||||
command: command.value,
|
||||
cameraIndexCode: cameraIndexCode.value
|
||||
})
|
||||
if (e == STOP) {
|
||||
command.value = ''
|
||||
}
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
// 返回列表
|
||||
const handleBack = () => {
|
||||
videoLog.value = 1
|
||||
hlsRef.destroy()
|
||||
initVideo()
|
||||
}
|
||||
//清除 hls
|
||||
const clearHlsRefs = () => {
|
||||
if (hlsRefs.length > 0) {
|
||||
hlsRefs.map((item) => {
|
||||
item.destroy()
|
||||
})
|
||||
hlsRefs = []
|
||||
}
|
||||
}
|
||||
// 分页
|
||||
const currentChange = (e) => {
|
||||
clearHlsRefs()
|
||||
videoList.value = []
|
||||
getRegionsList()
|
||||
}
|
||||
//获取酒店视频列表
|
||||
const getRegionsList = async()=>{
|
||||
videoLog.value = 1
|
||||
try {
|
||||
if (loading.value) return
|
||||
let res = await getRegionsListApi({...params})
|
||||
if (res.data.length > 0) {
|
||||
videoList.value = res.data
|
||||
total.value = res.total
|
||||
console.log(videoList.value,'酒店视频列表')
|
||||
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()
|
||||
})
|
||||
hlsRefs.push(hls)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
if (timer) clearInterval(timer)
|
||||
}
|
||||
loading.value = false
|
||||
}catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
}
|
||||
const handleItemVideo = (url, type, code) => {
|
||||
videoLog.value = 2
|
||||
cameraIndexCode.value = code
|
||||
setTimeout(() => {
|
||||
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 initVideo = () => {
|
||||
clearHlsRefs()
|
||||
nextTick(() => {
|
||||
videoList.value.forEach(async (item, index) => {
|
||||
const video = document.getElementById(`monitorVideo${index}`)
|
||||
const hls = new Hls({
|
||||
maxBufferLength: 10, // 最大缓冲长度（秒）
|
||||
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
||||
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
|
||||
})
|
||||
hls.loadSource(item.hlsUrl)
|
||||
hls.attachMedia(video)
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
video.play()
|
||||
})
|
||||
hlsRefs.push(hls)
|
||||
})
|
||||
})
|
||||
}
|
||||
// 更新视频
|
||||
const postVideoRemain = async () => {
|
||||
timer = setInterval(() => {
|
||||
postVideoRemainApi({
|
||||
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
onMounted(()=>{
|
||||
onMonitorChange()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearHlsRefs()
|
||||
if (timer) clearInterval(timer)
|
||||
pubSub.unsubscribe(monitorChange)
|
||||
})
|
||||
</script>
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
.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: vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
.pause {
|
||||
margin: 0 vw(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
.video-box {
|
||||
flex: 1;
|
||||
height: vh(950);
|
||||
@@ -65,4 +390,300 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.video {
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: vh(40);
|
||||
margin-left: vw(10);
|
||||
// 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(20);
|
||||
}
|
||||
}
|
||||
&-list {
|
||||
gap: vw(8);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
width: vw(810);
|
||||
height: vh(380);
|
||||
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: 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(10) vw(10);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
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;
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-item__video {
|
||||
width: 100%;
|
||||
height: vh(366);
|
||||
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(2060);
|
||||
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: 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(780);
|
||||
object-fit: contain;
|
||||
background-color: #000;
|
||||
}
|
||||
&-right {
|
||||
margin-left: vw(8);
|
||||
width: vw(440);
|
||||
height: vh(890);
|
||||
background: #082f5a;
|
||||
.back-box {
|
||||
cursor: pointer;
|
||||
padding-right: vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: vw(30);
|
||||
height: auto;
|
||||
margin-right: vw(10);
|
||||
}
|
||||
& > span {
|
||||
font-weight: bold;
|
||||
font-size: vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: vh(870);
|
||||
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: 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;
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: vh(164);
|
||||
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: 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user