490 lines
17 KiB
Vue
490 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<div class="realTimeManage" style="width: 100%;height: 80vh;background-color: #ffffff;box-shadow: 10px 10px 5px #000000;">
|
|||
|
|
<div class="left">
|
|||
|
|
<div class="leftTop">
|
|||
|
|
<div class="title1">
|
|||
|
|
实时监控
|
|||
|
|
</div>
|
|||
|
|
<div class="controlDeck">
|
|||
|
|
<div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div>聚焦</div>
|
|||
|
|
<div>缩放</div>
|
|||
|
|
<div>光圈</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="monitorList" >
|
|||
|
|
<!-- -->
|
|||
|
|
<el-tree :data="monitorList" icon="el-icon-search" node-key="id" :default-expanded-keys="[1]"
|
|||
|
|
@node-click="handleNodeClick" :render-content="renderContent" style="font-size: 14px;"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="rightTop">
|
|||
|
|
<div class="title">
|
|||
|
|
<el-tabs v-model="splitScreenName" class="demo-tabs" @tab-click="splitScreenClick">
|
|||
|
|
<el-tab-pane label="一画面" class="realTimeManage" name="first">
|
|||
|
|
<div style="width: 100%;height: 52vh;">
|
|||
|
|
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
|
|||
|
|
style="height:100%;width:100%;object-fit: fill"></video>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="四画面" class="personManage" name="second">
|
|||
|
|
<<!-- div style="width: 100%;height: 52vh;">
|
|||
|
|
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
|
|||
|
|
style="height:50%;width:50%;object-fit: fill"></video>
|
|||
|
|
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
|
|||
|
|
style="height:50%;width:50%;object-fit: fill"></video>
|
|||
|
|
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
|
|||
|
|
style="height:50%;width:50%;object-fit: fill"></video>
|
|||
|
|
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
|
|||
|
|
style="height:50%;width:50%;object-fit: fill"></video>
|
|||
|
|
</div> -->
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="down">
|
|||
|
|
<div v-for="(item, index) in violationPhoto" :key="item.id">
|
|||
|
|
<div>
|
|||
|
|
<img :src="item.path" style="width: 100%;height: 100%;"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span>{{ item.cameraName }}</span>
|
|||
|
|
<span>{{ item.time }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div>{{ item.content }}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<div>预警信息</div>
|
|||
|
|
<div>
|
|||
|
|
<el-table :data="tableData" style="width: 100%" :show-header="false">
|
|||
|
|
<el-table-column prop="deviceType" label="设备类型"/>
|
|||
|
|
<el-table-column prop="deviceName" label="设备名称"/>
|
|||
|
|
<el-table-column prop="time" label="预警时间" />
|
|||
|
|
<el-table-column prop="warnContent" label="预警内容" />
|
|||
|
|
</el-table>
|
|||
|
|
<el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
|
|||
|
|
:background="true" layout="prev, pager, next, jumper,->,total, sizes" :total="total"
|
|||
|
|
@current-change="getHasRole" @size-change="handler" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { include } from '../../../../utils/video/include.js'
|
|||
|
|
import { video } from '../../../../utils/video/video-7.19.1.min.js'
|
|||
|
|
import { flv } from '../../../../utils/video/flv.js'
|
|||
|
|
import { talk } from '../../../../utils/video/talk.js'
|
|||
|
|
import { h5live } from '../../../../utils/video/h5live-1.0.6.js'
|
|||
|
|
// import { videoPage } from '../../../../utils/video/videoPage';
|
|||
|
|
import { videoQX } from '../../../../utils/video/videoQX';
|
|||
|
|
|
|||
|
|
import $ from 'jquery';
|
|||
|
|
export default {
|
|||
|
|
name: 'realTimeManage',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
//页码
|
|||
|
|
pageNo: 1,
|
|||
|
|
//每页条数
|
|||
|
|
pageSize: 5,
|
|||
|
|
|
|||
|
|
//保存球机数据
|
|||
|
|
monitorList: [
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
label: '工程xxxxxxx',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '张三',
|
|||
|
|
puId: '123123123123'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '工程xxxxxxx',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '张三1',
|
|||
|
|
puId: '798779798779877'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '工程xxxxxxx',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '#张三2',
|
|||
|
|
puId: '565445646464654'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
splitScreenName: 'first',
|
|||
|
|
//保存违章照片
|
|||
|
|
violationPhoto: [{"id": "1", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "2", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "3", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "4", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "5", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "6", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "7", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "8", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "9", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "10", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}]
|
|||
|
|
//保存表格数据
|
|||
|
|
,tableData: [
|
|||
|
|
{
|
|||
|
|
deviceType: '监控设备',
|
|||
|
|
deviceName: 'xxxxx球机',
|
|||
|
|
time: '2024-03-03',
|
|||
|
|
warnContent: '人员未佩戴安全帽阿三大苏打啊飒飒大苏打飒飒打撒打撒'
|
|||
|
|
},{
|
|||
|
|
deviceType: '监控设备',
|
|||
|
|
deviceName: 'xxxxx球机',
|
|||
|
|
time: '2024-03-03',
|
|||
|
|
warnContent: '人员未佩戴安全帽'
|
|||
|
|
},{
|
|||
|
|
deviceType: '监控设备',
|
|||
|
|
deviceName: 'xxxxx球机',
|
|||
|
|
time: '2024-03-03',
|
|||
|
|
warnContent: '人员未佩戴安全帽'
|
|||
|
|
},{
|
|||
|
|
deviceType: '监控设备',
|
|||
|
|
deviceName: 'xxxxx球机',
|
|||
|
|
time: '2024-03-03',
|
|||
|
|
warnContent: '人员未佩戴安全帽'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
deviceType: '监控设备',
|
|||
|
|
deviceName: 'xxxxx球机',
|
|||
|
|
time: '2024-03-03',
|
|||
|
|
warnContent: '人员未佩戴安全帽'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
this.loadExternalScript();
|
|||
|
|
// const queryParams = this.$route.query;
|
|||
|
|
// console.log("queryParams");
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async loadExternalScript() {
|
|||
|
|
try {
|
|||
|
|
// 假设你的JavaScript文件位于'/path/to/your/script.js'
|
|||
|
|
const module = await import('../../../../utils/video/videoPage');
|
|||
|
|
// 如果你需要使用module.export导出的内容，可以在这里进行操作
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Error loading the external script:', e);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
splitScreenClick(pane, event){
|
|||
|
|
console.log("pane:", );
|
|||
|
|
console.log("event:", event);
|
|||
|
|
|
|||
|
|
if(pane.name === 'first'){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if(pane.name === 'second'){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//树组件节点点击
|
|||
|
|
handleNodeClick(data){
|
|||
|
|
console.log(data.puId)
|
|||
|
|
},
|
|||
|
|
//给梳妆街头不同层级设置不同的icon
|
|||
|
|
renderContent(h, { node, data }) {
|
|||
|
|
// 根据层级使用不同的图标
|
|||
|
|
let icon;
|
|||
|
|
if (node.level === 1) {
|
|||
|
|
icon = 'el-icon-coin'; // 第一层使用主页图标
|
|||
|
|
} else if (node.level === 2) {
|
|||
|
|
icon = 'el-icon-s-unfold'; // 第二层使用展开图标
|
|||
|
|
} else {
|
|||
|
|
icon = 'el-icon-user'; // 其他层级使用平台图标
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<span class="custom-tree-node">
|
|||
|
|
<i class={icon}></i>
|
|||
|
|
<span>{node.label}</span>
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
//分页器设置
|
|||
|
|
handler(){
|
|||
|
|
getHasRole()
|
|||
|
|
},
|
|||
|
|
//获取表格数据
|
|||
|
|
getHasRole (page = 1){
|
|||
|
|
//修改当前页码
|
|||
|
|
this.pageNo = page;
|
|||
|
|
/* let request = await reqAllRoleList(pageNo.value, pageSize.value, keyWord.value);
|
|||
|
|
if (request.data.code == 200) {
|
|||
|
|
total.value = request.data.data.total;
|
|||
|
|
roleArr.value = request.data.data.records;
|
|||
|
|
} */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
|
|||
|
|
|
|||
|
|
.realTimeManage>div>div{
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left{
|
|||
|
|
width: 66%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>div{
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop{
|
|||
|
|
width: 23%;
|
|||
|
|
height: 75%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.title1{
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333333;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 8%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
text-indent: 20px;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 42%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 85%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div{
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(1){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 7%;
|
|||
|
|
left: 6.35%;
|
|||
|
|
background-image: url('../../../../assets/images/control1.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(2){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 12.55%;
|
|||
|
|
left: 3.7%;
|
|||
|
|
background-image: url('../../../../assets/images/control2.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(3){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 12.5%;
|
|||
|
|
left: 9%;
|
|||
|
|
background-image: url('../../../../assets/images/control3.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(4){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 18%;
|
|||
|
|
left: 6.35%;
|
|||
|
|
background-image: url('../../../../assets/images/control4.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(5){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 21.9%;
|
|||
|
|
left: 1%;
|
|||
|
|
background-image: url('../../../../assets/images/control5.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(6){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 27%;
|
|||
|
|
left: 1%;
|
|||
|
|
background-image: url('../../../../assets/images/control6.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(7){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 27%;
|
|||
|
|
left: 5.3%;
|
|||
|
|
background-image: url('../../../../assets/images/control7.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(8){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 27%;
|
|||
|
|
left: 7.55%;
|
|||
|
|
background-image: url('../../../../assets/images/control8.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(9){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 21.9%;
|
|||
|
|
left: 11.8%;
|
|||
|
|
background-image: url('../../../../assets/images/control9.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(10){
|
|||
|
|
position: absolute;
|
|||
|
|
top: 27%;
|
|||
|
|
left: 11.8%;
|
|||
|
|
background-image: url('../../../../assets/images/control10.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 15%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div{
|
|||
|
|
color: #06182E;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div:nth-child(1){
|
|||
|
|
margin-left: 9%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div:nth-child(3){
|
|||
|
|
margin-right: 9%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.realTimeManage .left>.leftTop>.monitorList{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 50%;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.realTimeManage .left>.leftTop>.monitorList>div:nth-child(1){
|
|||
|
|
border-top: 0.5px solid #F5F4F4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.realTimeManage .left>.rightTop{
|
|||
|
|
width: 77%;
|
|||
|
|
height: 75%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.down{
|
|||
|
|
margin-top: 1%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 23%;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow-y: hidden;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.down>div{
|
|||
|
|
height: 100%;
|
|||
|
|
width: 17%;
|
|||
|
|
margin-left: 2%;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.down>div>div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 68%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.down>div>div:nth-child(2){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 16%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.down>div>div:nth-child(2)>span{
|
|||
|
|
text-indent: 8px;
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .left>.down>div>div:nth-child(3){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 16%;
|
|||
|
|
text-indent: 8px;
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .right{
|
|||
|
|
margin-left: 1%;
|
|||
|
|
width:32%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .right>div:nth-child(1){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 6%;
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
text-indent: 20px;
|
|||
|
|
}
|
|||
|
|
.realTimeManage .right>div:nth-child(2){
|
|||
|
|
width: 100%;
|
|||
|
|
height: 94%;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
::-webkit-scrollbar {
|
|||
|
|
width: 5px;
|
|||
|
|
height: 5px;
|
|||
|
|
}
|
|||
|
|
/* 滚动槽 */
|
|||
|
|
|
|||
|
|
::-webkit-scrollbar-track {
|
|||
|
|
-webkit-box-shadow: inset 0 0 5px #e8eceb;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 滚动条滑块 */
|
|||
|
|
|
|||
|
|
::-webkit-scrollbar-thumb {
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
-webkit-box-shadow: inset 0 0 6px #cbb7b7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::-webkit-scrollbar-thumb:window-inactive {
|
|||
|
|
background: #e8eceb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::-webkit-scrollbar-corner {
|
|||
|
|
background-color: #e8eceb;
|
|||
|
|
}
|
|||
|
|
</style>
|