583 lines
10 KiB
CSS
583 lines
10 KiB
CSS
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #fff;
|
|
font-family: 'Alibaba PuHuiTi R';
|
|
letter-spacing: 1px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.layout {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.layout::before {
|
|
/* content: "大大的水印"; */
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 9999999999999999;
|
|
color: rgba(0, 0, 0, 0.1);
|
|
font-size: 3rem;
|
|
text-align: center;
|
|
line-height: 100vh;
|
|
transform: rotate(-30deg);
|
|
filter: brightness(0.1);
|
|
}
|
|
|
|
|
|
#main-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
|
|
/* 左侧样式 start */
|
|
#left-box,
|
|
#right-box {
|
|
width: 21.3%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding-top: 0.85%;
|
|
}
|
|
|
|
#left-top {
|
|
width: 100%;
|
|
height: 39%;
|
|
background: url("../../img/video/ytkz.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
#left-top p {
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#left-top-one {
|
|
width: 100%;
|
|
height: 70%;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
#one-child,
|
|
#three-child {
|
|
width: 20%;
|
|
height: 100%;
|
|
}
|
|
|
|
#two-child {
|
|
width: 52%;
|
|
height: 100%;
|
|
padding-top: 10%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#yclx,
|
|
#bdlx,
|
|
#yczp,
|
|
#bdzp {
|
|
width: 100%;
|
|
height: 50%;
|
|
flex-direction: column;
|
|
padding-top: 50%;
|
|
box-sizing: border-box;
|
|
display: none;
|
|
}
|
|
|
|
/* 远程录像 */
|
|
#yclx button {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../img/video/ptz_nocheck/yclx_nocheck.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
/* 本地录像 */
|
|
#bdlx button {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../img/video/ptz_nocheck/bdlx_nocheck.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
/* 远程抓拍 */
|
|
#yczp button {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../img/video/ptz_nocheck/bdzp_nocheck.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 本地抓拍 */
|
|
#bdzp button {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: url("../../img/video/ptz_nocheck/bdzp_nocheck.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#yt {
|
|
width: 204px;
|
|
height: 204px;
|
|
background: url("../../img/video/ptz_nocheck/yt_nocheck.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
border: none;
|
|
}
|
|
|
|
#yt-left,
|
|
#yt-center,
|
|
#yt-right {
|
|
width: 30%;
|
|
height: 100%;
|
|
}
|
|
|
|
#yt-center {
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
#yt button,
|
|
#left-top-two button {
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
#yt-center button:nth-child(1) {
|
|
margin-top: -31%;
|
|
}
|
|
|
|
#yt-center button:nth-child(2) {
|
|
margin-bottom: -31%;
|
|
}
|
|
|
|
#left-top-two {
|
|
width: 92%;
|
|
height: 26%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#jj-box,
|
|
#sf-box,
|
|
#gq-box {
|
|
width: 30%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#jj {
|
|
width: 98px;
|
|
height: 48px;
|
|
background: url("../../img/video/ptz_nocheck/jj_nocheck.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
#sf {
|
|
width: 98px;
|
|
height: 48px;
|
|
background: url("../../img/video/ptz_nocheck/sf_nocheck.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
#gq {
|
|
width: 98px;
|
|
height: 48px;
|
|
background: url("../../img/video/ptz_nocheck/gq_nocheck.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
#left-bottom {
|
|
width: 100%;
|
|
height: 57.8%;
|
|
background: url("../../img/video/ball_list.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
#search-box {
|
|
width: 100%;
|
|
height: 50px;
|
|
margin-top: 12%;
|
|
}
|
|
|
|
.layui-form .layui-input {
|
|
width: 80%;
|
|
margin: 0 10% 0 10%;
|
|
}
|
|
|
|
#search-img {
|
|
position: relative;
|
|
left: -17%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#device-online-box {
|
|
margin-top: 12%;
|
|
width: 100%;
|
|
height: 32px;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
#device-online-box .device-status {
|
|
width: 25%;
|
|
height: 100%;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
line-height: 19px;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
#device-online-box .device-status:nth-child(1) {
|
|
background: rgba(217, 217, 217, 0.01);
|
|
box-shadow: inset 2px 2px 4px 0px rgba(121, 255, 255, 0.5);
|
|
border-radius: 2px 2px 2px 2px;
|
|
border: 1px solid #79FFFF;
|
|
color: #79FFFF;
|
|
}
|
|
|
|
#device-online-box .device-status:nth-child(2) {
|
|
background: rgba(217, 217, 217, 0.01);
|
|
box-shadow: inset 2px 2px 4px 0px rgba(121, 255, 255, 0.5);
|
|
border-radius: 2px 2px 2px 2px;
|
|
border: 1px solid #79FFFF;
|
|
color: #79FFFF;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#device-online-box .device-status:nth-child(3) {
|
|
background: rgba(217, 217, 217, 0.01);
|
|
box-shadow: inset 2px 2px 4px 0px rgba(255, 84, 61, 0.5);
|
|
border-radius: 2px 2px 2px 2px;
|
|
border: 1px solid #FF543D;
|
|
opacity: 0.6;
|
|
color: #FF543DFF;
|
|
}
|
|
|
|
#device-tree {
|
|
width: 100%;
|
|
height: calc(88% - 82px);
|
|
}
|
|
|
|
/* 左侧样式 end */
|
|
|
|
/* 中侧样式 start */
|
|
#center-box {
|
|
/*width: (54 +21.3)%;*/
|
|
width: 54%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 0.85%;
|
|
}
|
|
|
|
#video-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("../../img/video/spjk.png") no-repeat 0 0 / 100% 100%;
|
|
background-position: center center !important;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.toggle-btn {
|
|
width: 100%;
|
|
height: 45px;
|
|
/* justify-content: center; */
|
|
}
|
|
|
|
.toggle-btn button {
|
|
width: 50px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
color: #000;
|
|
font-size: 15px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.toggle-btn button:hover {
|
|
border: 1px solid #00fff4;
|
|
background-color: #00fff4 !important;
|
|
}
|
|
|
|
.nocheckBtn {
|
|
background-color: #d2d2d2;
|
|
border: 1px solid #d2d2d2;
|
|
}
|
|
|
|
.checkBtn {
|
|
border: 1px solid #00fff4;
|
|
background-color: #00fff4 !important;
|
|
}
|
|
|
|
/*海康视频样式 start*/
|
|
.video-window {
|
|
width: 96%;
|
|
margin: 0 2%;
|
|
height: calc(100vh - 130px);
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.plugin {
|
|
width: 100vm;
|
|
height: 86vh;
|
|
margin-top: 15%;
|
|
|
|
}
|
|
|
|
.vpopmenu {
|
|
position: absolute;
|
|
width: 150px;
|
|
border-radius: 5px;
|
|
background-color: #d6edfa;
|
|
border: #d6edfa;
|
|
z-index: 9999999999999;
|
|
padding: 2px;
|
|
display: none;
|
|
}
|
|
|
|
.vpopmenu>div {
|
|
padding: 2px 2px 2px 30px;
|
|
height: 24px;
|
|
}
|
|
|
|
.vpopmenu>div:hover {
|
|
cursor: pointer;
|
|
background-color: rgba(245, 239, 89, 0.30);
|
|
}
|
|
|
|
#left-top button {
|
|
margin: 0 5px 0 5px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
/*海康视频样式 end*/
|
|
|
|
|
|
/* 右侧样式 start */
|
|
|
|
#voi-photo-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("../../img/video/no_work_plan_warn.png") no-repeat 0 0 / 100% 100%;
|
|
}
|
|
|
|
#voi-null {
|
|
width: 100%;
|
|
height: 5%;
|
|
}
|
|
|
|
#voi-photo {
|
|
width: 100%;
|
|
height: 95%;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.voi-item {
|
|
width: 100%;
|
|
height: 250px;
|
|
margin-bottom: 10px;
|
|
box-sizing: border-box;
|
|
padding: 3%;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.voi-item>img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 80%;
|
|
|
|
}
|
|
|
|
.voi-item .voi-info {
|
|
width: 100%;
|
|
height: 20%;
|
|
}
|
|
|
|
.voi-time,
|
|
.voi-content {
|
|
width: 50%;
|
|
height: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.voi-content {
|
|
justify-content: end;
|
|
}
|
|
|
|
/* 右侧样式 start */
|
|
|
|
/* dtree 样式 start */
|
|
.dtree-nav-item {
|
|
background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(35, 161, 161, 0.5) 49%, rgba(153, 255, 255, 0) 100%);
|
|
border-radius: 0px 0px 0px 0px;
|
|
margin: 10px 0 10px 0;
|
|
}
|
|
|
|
.dtree-laySimple-item:hover {
|
|
background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(50, 251, 251, 0.6) 49%, rgba(153, 255, 255, 0) 100%) !important;
|
|
border-radius: 0px 0px 0px 0px;
|
|
}
|
|
|
|
.dtree-laySimple-item-this {
|
|
background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(50, 251, 251, 0.6) 49%, rgba(153, 255, 255, 0) 100%) !important;
|
|
border-radius: 0px 0px 0px 0px;
|
|
color: rgba(50, 251, 251, 0.6) !important;
|
|
}
|
|
|
|
.dtree-laySimple-item cite {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.dtree-laySimple-item:hover cite {
|
|
color: rgba(50, 251, 251, 0.6) !important;
|
|
}
|
|
|
|
.dtree-laySimple-ficon {
|
|
font-size: 14px !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/* dtree 样式 start */
|
|
|
|
.nocheckBtn {
|
|
background-color: #d2d2d2;
|
|
border: 1px solid #d2d2d2;
|
|
}
|
|
|
|
.checkBtn {
|
|
border: 1px solid #2eccbd;
|
|
background-color: #2eccbd !important;
|
|
}
|
|
|
|
.toggle-btn button {
|
|
width: 40px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
color: #000;
|
|
font-size: 15px;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
#videoBox {
|
|
width: 100%;
|
|
height: 92%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#img-title {
|
|
width: 100%;
|
|
height: 50px;
|
|
justify-content: end;
|
|
align-items: start;
|
|
}
|
|
|
|
#img-title a {
|
|
color: #00fff4;
|
|
font-size: 18px;
|
|
padding: 5px 26px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#img-box {
|
|
width: 100%;
|
|
height: calc(100% - 50px);
|
|
}
|
|
|
|
.layui-flow-more {
|
|
width: 100%;
|
|
}
|
|
|
|
#ID-flow-demo {
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: start;
|
|
align-items: start;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.img-info {
|
|
width: 100%;
|
|
height: 280px;
|
|
margin: 1% 2.3%;
|
|
border: 1px solid #33b9aa;
|
|
}
|
|
|
|
.imgData img {
|
|
width: 96%;
|
|
height: 90%;
|
|
margin: 5% 2%;
|
|
}
|
|
|
|
.imgData {
|
|
width: 100%;
|
|
height: 70%;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
.imgData2,
|
|
.imgData3,
|
|
.imgData4 {
|
|
width: 100%;
|
|
height: 10%;
|
|
justify-content: start;
|
|
}
|
|
|
|
.imgData2 {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.imgData2>p,
|
|
.imgData3>p,
|
|
.imgData4>p {
|
|
margin: 0 10px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.img-color0 {
|
|
color: #FF312A;
|
|
}
|
|
|
|
.img-color1 {
|
|
color: #2BEEC0;
|
|
}
|
|
|
|
.img-color2 {
|
|
color: #edfeb6;
|
|
}
|
|
|
|
body .my-skin.child-skin {
|
|
background: url("../../img/video/child-back.png") no-repeat 0 0/100% 100% transparent;
|
|
}
|
|
|
|
|
|
.layui-layer-dialog .layui-layer-padding {
|
|
color: #000 !important;
|
|
} |