1925 lines
37 KiB
CSS
1925 lines
37 KiB
CSS
body,button, input, select, textarea,h1 ,h2, h3, h4, h5, h6 {
|
||
/*font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;*/
|
||
font-family:'Microsoft Yahei';
|
||
}
|
||
|
||
i{
|
||
font-style: normal;
|
||
}
|
||
|
||
/*html,body{min-height:100%;_height:100%;}*/
|
||
|
||
.menuText
|
||
{
|
||
font-size: 16px;
|
||
|
||
}
|
||
.nav > li > a:hover{
|
||
/*background-color: #21272B;*/
|
||
background-color: rgba(2, 46, 141, 0.6);
|
||
background-size: auto 58px;
|
||
cursor:pointer;
|
||
}
|
||
.nav > .open > a:focus{
|
||
/*background-color: #171A21;*/
|
||
background-color: rgba(2, 46, 141, 0.6);
|
||
background-size: auto 58px;
|
||
}
|
||
|
||
|
||
#diagramControl{
|
||
width: 100%;
|
||
}
|
||
|
||
.alarmLevel0
|
||
{
|
||
color: #5cb85c;
|
||
|
||
}
|
||
|
||
.alarmLevel1
|
||
{
|
||
color: #31b0d5;
|
||
}
|
||
|
||
.alarmLevel2
|
||
{
|
||
color: #ec971f;
|
||
}
|
||
|
||
.alarmLevel3
|
||
{
|
||
color: #c9302c;
|
||
}
|
||
|
||
.alarmLevel9
|
||
{
|
||
color: #7f8cab;
|
||
}
|
||
|
||
|
||
.fullscreen{
|
||
float: left;
|
||
width: 30px;
|
||
position: fixed;
|
||
margin:0px 20px 20px 0px;
|
||
right:0px;
|
||
bottom: 0px;
|
||
}
|
||
|
||
.fullscreen>a{
|
||
cursor: pointer;
|
||
display: block;
|
||
width: 26px;
|
||
height: 26px;
|
||
background-color: #0084D7;
|
||
border-radius:10px;
|
||
|
||
-webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);
|
||
-moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);
|
||
box-shadow:0 0 10px rgba(0, 204, 204, .5);
|
||
|
||
}
|
||
.fullscreen>a>i{
|
||
color:#fff;
|
||
padding: 5px;
|
||
}
|
||
|
||
.grahico{
|
||
color: #f4f4f4 !important;
|
||
cursor:pointer;
|
||
text-decoration: none;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
|
||
#pop{background:#232A30;width:328px;border:1px solid #e0e0e0;font-size:12px;position: fixed; z-index: 999; right:10px;bottom:10px; color:#fff;}
|
||
#popHead{line-height:45px;background:#12161c; height:45px; border-bottom:1px solid #12161c;position:relative;font-size:12px; padding-left:10px;}
|
||
#popHead h2{font-size:14px;color:#fff;line-height:45px;height:45px; padding: 0px; margin: 0px;}
|
||
#popHead #popClose{position:absolute;right:10px;top:1px;}
|
||
#popHead a#popClose:hover{color:#f00;cursor:pointer;}
|
||
#popContent{padding:5px 10px;}
|
||
#popContent dl{margin-top:7px; background:#2A3645; padding:5px; }
|
||
#popIntro a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#fff ;font-weight:bold;text-decoration:none;}
|
||
#popIntro a:hover{color:#f60;}
|
||
#popTime{text-indent:24px; text-align:right; line-height:160%;margin:5px 0;color:#fff;}
|
||
#popMore{text-align:right;line-height:24px;margin:8px 0 0 0;}
|
||
#popMore a{color:#f60;}
|
||
#popMore a:hover{color:#f00;}
|
||
|
||
/* 3d part */
|
||
#left,#right{position:absolute; top:50px;height:calc(100vh - 50px);background-color:#f0f0f0;}
|
||
#left{left:200px; width:70px;}
|
||
#right{right:0; width:200px;}
|
||
#main{margin:0px 185px 0px 70px; background-color: #c0c0c0; height:100%;}
|
||
|
||
.section{
|
||
height: 100%;
|
||
background-color:#202325;
|
||
}
|
||
.section input,select{
|
||
border:none;
|
||
}
|
||
|
||
.sectionHeader{
|
||
background-color:#111;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
font-size: 16px;
|
||
padding: 7px;
|
||
height: 40px;
|
||
}
|
||
|
||
.sectionBody{
|
||
background-color:#1D2027;
|
||
text-align: center;
|
||
}
|
||
|
||
.toolbar{
|
||
height: 41px;
|
||
background-color:#d5d5d5;
|
||
vertical-align: middle;
|
||
border: 1px solid #ddd;
|
||
padding: 4.5px;
|
||
}
|
||
|
||
.btn-group-pad{
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
}
|
||
|
||
.symbol{
|
||
margin: 5px;
|
||
text-align: center;
|
||
}
|
||
|
||
.symbolActive,
|
||
.symbol:hover,
|
||
.symbol:focus {
|
||
border: 3px solid #0086b3;
|
||
font-weight: bold;
|
||
filter: alpha(opacity=90);
|
||
outline: 0;
|
||
opacity: .9;
|
||
cursor: pointer;
|
||
padding: 2px;
|
||
}
|
||
|
||
.symbol .icon{
|
||
height: 40px;
|
||
width: 40px;
|
||
margin: 2px;
|
||
}
|
||
|
||
.graphCanvas{
|
||
/*margin: 1px;*/
|
||
padding-top: 4px;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* class for svg items */
|
||
|
||
.pointIndicator{
|
||
r: 30;
|
||
fill: #F5B041;
|
||
stroke: #B9770E;
|
||
fill-opacity: 0.7;
|
||
}
|
||
|
||
.rulerPath{
|
||
stroke: #ec5779;
|
||
stroke-width:40;
|
||
stroke-linecap: round;
|
||
pointer-events:all;
|
||
}
|
||
|
||
.modal-backdrop.am-fade {
|
||
opacity: .5;
|
||
}
|
||
|
||
.viewport3D {
|
||
width: 100%;
|
||
padding: 0px;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cabinet {
|
||
padding: 2px;
|
||
margin: 1px;
|
||
color:white;
|
||
}
|
||
|
||
/** MDC Alarm */
|
||
#AlarmRoot{
|
||
width: 100%;
|
||
height: calc(100% - 70px);
|
||
margin: 0px auto;
|
||
padding: 5px;
|
||
position: relative;
|
||
}
|
||
#AlarmRoot .root-cheek{
|
||
/*width: 100%;
|
||
height: 100%;
|
||
border: 30px solid #39445A;*/
|
||
}
|
||
.root-cheek .alarm-chart{
|
||
width: 3vw;
|
||
height: 3vw;
|
||
position: absolute;
|
||
bottom: 8vh;
|
||
left: 5vw;
|
||
cursor: pointer;
|
||
z-index: 3;
|
||
}
|
||
.root-cheek .filer_body{
|
||
width: 8vw;
|
||
height: 3vw;
|
||
position: absolute;
|
||
bottom: 8vh;
|
||
right: 15vh;
|
||
z-index: 3;
|
||
line-height: 3vh;
|
||
}
|
||
.root-cheek .filer_font{
|
||
font-size: 20px;
|
||
display: inline-block;
|
||
height: 3vw;
|
||
line-height: 3vw;
|
||
float: left;
|
||
margin-right: 10px;
|
||
}
|
||
.root-cheek .filtering{
|
||
width: 4vw;
|
||
height: 3vw;
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
float: left;
|
||
}
|
||
.water{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
}
|
||
.water .button{
|
||
cursor: pointer;
|
||
}
|
||
.water .position1{
|
||
width: 100%;
|
||
height: 2vh;
|
||
position: absolute;
|
||
top: 10px;
|
||
}
|
||
.water .position2{
|
||
width: 100%;
|
||
height: 2vh;
|
||
position: absolute;
|
||
bottom: 10px;
|
||
}
|
||
/** 水浸 */
|
||
.water .normal{
|
||
background:url('../img/mdc/WaterMonitorNormal.gif') no-repeat center;
|
||
}
|
||
.water .alarm{
|
||
background:url('../img/mdc/WaterMonitorAlarm.gif') no-repeat center;
|
||
}
|
||
#MdcCabinet{
|
||
width: 94%;
|
||
margin-top: 13.4vh;
|
||
margin-left: 2vw;
|
||
}
|
||
#MdcCabinet .cabinet-box .cabinet > table{
|
||
width: 100%;
|
||
}
|
||
#MdcCabinet .cabinet-box .cabinet > table tr td{
|
||
position: relative;
|
||
}
|
||
.cabinet .cabinet-title{
|
||
width: 90%;
|
||
position: absolute;
|
||
left: 5%;
|
||
font-size: 1.8vh;
|
||
font-weight: 600;
|
||
line-height: 3vh;
|
||
text-align: center;
|
||
display:table-cell;
|
||
vertical-align:bottom;
|
||
background-color: rgba(8, 9, 13, 0.89);
|
||
border-radius:5px;
|
||
}
|
||
.cabinet .top{
|
||
bottom: 13.5vh;
|
||
}
|
||
.cabinet .bottom{
|
||
top: 13.5vh;
|
||
}
|
||
.cabinet .cabinet-body{
|
||
width: 4vw;
|
||
height: 11vh;
|
||
margin: 0px auto;
|
||
border-radius:5px;
|
||
background-repeat:no-repeat;
|
||
background-position:center center;
|
||
}
|
||
.device .normal{
|
||
border:#5E687F 3px solid;
|
||
box-shadow: 0 0 8px rgba(127, 140, 171, 1);
|
||
-webkit-box-shadow: 0 0 8px rgba(127, 140, 171,1);
|
||
-moz-box-shadow: 0 0 8px rgba(127, 140, 171,1);
|
||
}
|
||
.device .alarmUrgent{
|
||
border:#B93564 3px solid;
|
||
box-shadow: 0 0 8px rgba(219, 63, 118,1);
|
||
-webkit-box-shadow: 0 0 8px rgba(219, 63, 118,1);
|
||
-moz-box-shadow: 0 0 8px rgba(219, 63, 118,1);
|
||
}
|
||
.device .alarmImportant{
|
||
border:#DDBE10 3px solid;
|
||
box-shadow: 0 0 8px rgba(243, 220, 86,1);
|
||
-webkit-box-shadow: 0 0 8px rgba(243, 220, 86,1);
|
||
-moz-box-shadow: 0 0 8px rgba(243, 220, 86,1);
|
||
}
|
||
.device .alarmCommon{
|
||
border:#2289FC 3px solid;
|
||
box-shadow: 0 0 8px rgba(100, 172, 253,1);
|
||
-webkit-box-shadow: 0 0 8px rgba(100, 172, 253,1);
|
||
-moz-box-shadow: 0 0 8px rgba(100, 172, 253,1);
|
||
}
|
||
.device .alarmTip{
|
||
border:#17C06B 3px solid;
|
||
box-shadow: 0 0 8px rgba(24, 212, 121,1);
|
||
-webkit-box-shadow: 0 0 8px rgba(24, 212, 121,1);
|
||
-moz-box-shadow: 0 0 8px rgba(24, 212, 121,1);
|
||
}
|
||
.device .disable{
|
||
border:#5E687F 3px solid;
|
||
box-shadow: 0 0 8px rgba(127, 140, 171, 1);
|
||
-webkit-box-shadow: 0 0 8px rgba(127, 140, 171,1);
|
||
-moz-box-shadow: 0 0 8px rgba(127, 140, 171,1);
|
||
}
|
||
/** 门 */
|
||
.door .door1,.door .door2{
|
||
width: 0.7vw;
|
||
height: 35vh;
|
||
}
|
||
.door .normal{
|
||
cursor: pointer;
|
||
background: url('../img/mdc/DoorNormal.png') no-repeat center;
|
||
background-size: 0.7vw 35vh;
|
||
}
|
||
.door .alarm
|
||
{
|
||
cursor: pointer;
|
||
background: url('../img/mdc/DoorAlarm.png') no-repeat center;
|
||
background-size: 24px 320px;
|
||
}
|
||
.cabinet .button .cabinet-body{
|
||
cursor: pointer;
|
||
}
|
||
/*UPS*/
|
||
.UPS{
|
||
background:url('../img/mdc/ups.png');
|
||
}
|
||
/*服务器*/
|
||
.RACK{
|
||
background:url('../img/mdc/rack.png');
|
||
}
|
||
/*空调*/
|
||
.AC{
|
||
background:url('../img/mdc/ac.png');
|
||
}
|
||
/*布线柜*/
|
||
.UNUSE{
|
||
background:url('../img/mdc/unuse.png');
|
||
}
|
||
/*电池柜*/
|
||
.CELL{
|
||
background:url('../img/mdc/cell.png');
|
||
}
|
||
/*配电柜*/
|
||
.RECTIFIER{
|
||
background:url('../img/mdc/rectifier.png');
|
||
}
|
||
/*高压直流柜*/
|
||
.HVDC{
|
||
background:url('../img/mdc/hvdc.png');
|
||
}
|
||
|
||
.cabinet .corridor{
|
||
width: 100%;
|
||
height: 18vh;
|
||
position: relative;
|
||
}
|
||
.corridor .camera , .corridor .smoke , .corridor .infrared{
|
||
/*position: absolute;*/
|
||
width: 5vh;
|
||
height: 5vh;
|
||
cursor: pointer;
|
||
}
|
||
.corridor .camera{
|
||
width: 4vw;
|
||
height: 4vw;
|
||
background: url('../img/mdc/CameraBall.png') no-repeat center;
|
||
background-size: 3vw 3vw;
|
||
}
|
||
|
||
.camera_left.cameraNormal{
|
||
width: 4vw;
|
||
height: 4vw;
|
||
background: url('../img/mdc/CameraBall_L_Normal.png') no-repeat center;
|
||
background-size: 3vw 3vw;
|
||
}
|
||
.camera_right.cameraNormal{
|
||
width: 4vw;
|
||
height: 4vw;
|
||
background: url('../img/mdc/CameraBall_R_Normal.png') no-repeat center;
|
||
background-size: 3vw 3vw;
|
||
}
|
||
.camera_left.cameraDisconnect{
|
||
width: 4vw;
|
||
height: 4vw;
|
||
background: url('../img/mdc/CameraBall_L.png') no-repeat center;
|
||
background-size: 3vw 3vw;
|
||
}
|
||
.camera_right.cameraDisconnect{
|
||
width: 4vw;
|
||
height: 4vw;
|
||
background: url('../img/mdc/CameraBall_R.png') no-repeat center;
|
||
background-size: 3vw 3vw;
|
||
}
|
||
|
||
|
||
|
||
/*.corridor .camera1{
|
||
top: 6vh;
|
||
left: 1vw;
|
||
background: url('../img/mdc/CameraStand1.png') no-repeat center;
|
||
background-size: 4vw 4vh;
|
||
}
|
||
.corridor .camera2{
|
||
top: 6vh;
|
||
right: 1vw;
|
||
background: url('../img/mdc/CameraStand2.png') no-repeat center;
|
||
background-size: 4vw 4vh;
|
||
}*/
|
||
/*.corridor .camera3{
|
||
top: 3vh;
|
||
right:25vw;
|
||
}
|
||
.corridor .camera4{
|
||
bottom: 3vh;
|
||
left:25vw;
|
||
}*/
|
||
.corridor .infrared1{
|
||
top: 7vh;
|
||
left:18vw;
|
||
}
|
||
.corridor .infrared2{
|
||
top: 7vh;
|
||
right:18vw;
|
||
}
|
||
.infrared.normal{
|
||
background: url('../img/mdc/InfraredNormal.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
.infrared.alarm{
|
||
background: url('../img/mdc/InfraredAlarm.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
.corridor .smoke1{
|
||
top: 7vh;
|
||
left:21vw;
|
||
}
|
||
.corridor .smoke2{
|
||
top: 7vh;
|
||
right:21vw;
|
||
}
|
||
.smoke.normal{
|
||
background: url('../img/mdc/SmokeNormal.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
.smoke.alarm{
|
||
background: url('../img/mdc/SmokeAlarm.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
/** 天窗 */
|
||
#skyFalling.normal{
|
||
margin: 0.5vh 0px;
|
||
background: url(../img/mdc/AisleNormal.png) no-repeat;
|
||
background-size: 100% 18vh;
|
||
}
|
||
#skyFalling.alarm{
|
||
margin: 0.5vh 0px;
|
||
background: url(../img/mdc/AisleAlarm.png) no-repeat;
|
||
background-size: 100% 18vh;
|
||
}
|
||
.device > td > div.cabinet-title{
|
||
opacity: 0;
|
||
padding: 0px 10px;
|
||
transition: 2s;
|
||
-webkit-transition: 2s;
|
||
-moz-transition: 2s;
|
||
-ms-transition: 2s;
|
||
-o-transition: 2s;
|
||
}
|
||
|
||
.device:hover > td > div.cabinet-title{
|
||
opacity: 1;
|
||
}
|
||
|
||
.corridor .skyFalling{
|
||
width: 5vw;
|
||
height: 5vh;
|
||
cursor: pointer;
|
||
}
|
||
.skyFalling.normal{
|
||
background: url('../img/mdc/SkyFallingNormal.png') no-repeat center;
|
||
background-size: 4.2vw 4.2vh;
|
||
}
|
||
.skyFalling.alarm{
|
||
background: url('../img/mdc/SkyFallingAlarm.png') no-repeat center;
|
||
background-size: 4.2vw 4.2vh;
|
||
}
|
||
.cabinet_body{
|
||
border: 1px solid rgba(255, 255, 255, 0);
|
||
position: relative;
|
||
/* top: 5.4vh;*/
|
||
height: 66vh;
|
||
background: url(../img/mdc/MDC.png);
|
||
}
|
||
|
||
#MdcCabinet .device .cabinet-body > div{
|
||
height:100%;
|
||
}
|
||
#MdcCabinet .device .cabinet-body > div.img{
|
||
position: absolute;
|
||
top: 0px;
|
||
|
||
}
|
||
/** 告警表格 */
|
||
.mdcAlarm{
|
||
width: 65vw;
|
||
}
|
||
.mdcBelow{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
background-color: #033085;
|
||
padding: 0 42px;
|
||
}
|
||
#mdcAlarmTable.normal{
|
||
background: url('../img/mdc/TableNormal.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
#mdcAlarmTable.alarm{
|
||
background: url('../img/mdc/TableAlarm.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
#mdcAlarmTable > div{
|
||
padding: 5px;
|
||
color: #ffffff;
|
||
font-size: 20px;
|
||
font-weight: 900;
|
||
line-height: 25px;
|
||
text-align:center;
|
||
position: absolute;
|
||
left: 50px;
|
||
top: -10px;
|
||
}
|
||
.tableTop{
|
||
width: 35px;
|
||
height: 35px;
|
||
background-color: #BA3463;
|
||
-webkit-border-radius: 50%;
|
||
border-radius: 50%
|
||
}
|
||
/** 帅选 */
|
||
.filteringShow{
|
||
background: url('../img/mdc/show.png') no-repeat center;
|
||
background-size: 4vw 2vw;
|
||
}
|
||
.filteringHide{
|
||
background: url('../img/mdc/hide.png') no-repeat center;
|
||
background-size: 4vw 2vw;
|
||
}
|
||
/*********************************/
|
||
#mdc {
|
||
color:white;
|
||
position: absolute;
|
||
left: 320px;
|
||
top: 350px;
|
||
width: 1000px;
|
||
height: 1000px;
|
||
}
|
||
|
||
#door-left {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 101px;
|
||
width: 10px;
|
||
height: 100px;
|
||
background-color: blue;
|
||
}
|
||
|
||
#door-right {
|
||
position: absolute;
|
||
left: 610px;
|
||
top: 101px;
|
||
width: 10px;
|
||
height: 100px;
|
||
background-color: blue;
|
||
}
|
||
|
||
#cam1 {
|
||
position: absolute;
|
||
left: 290px;
|
||
top: 131px;
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: transparent;
|
||
}
|
||
|
||
#mdcalarmtable {
|
||
position: absolute;
|
||
left: 1190px;
|
||
top: 150px;
|
||
width: 700px;
|
||
height: 800px;
|
||
}
|
||
|
||
#mdcPower .Power-Cabinet{
|
||
border: 20px solid #2B3346;
|
||
width: 85vw;
|
||
height: 54vh;
|
||
vertical-align: middle;
|
||
background-color: #20293A;
|
||
padding: 7vh;
|
||
}
|
||
#mdcPower .Power-Cabinet .cabinet-title{
|
||
position: absolute;
|
||
left: 0.3vw;
|
||
font-size: 1.8vh;
|
||
font-weight: 600;
|
||
line-height: 3vh;
|
||
text-align: center;
|
||
display:table-cell;
|
||
vertical-align:bottom;
|
||
width: 90%;
|
||
background-color: rgba(8, 9, 13, 0.89);
|
||
border-radius:5px;
|
||
}
|
||
.Power-Cabinet .top{
|
||
bottom: 125px;
|
||
}
|
||
.Power-Cabinet .bottom{
|
||
top: 125px;
|
||
}
|
||
#mdcPower{
|
||
width: 85vw;
|
||
height: 80vh;
|
||
}
|
||
#mdcPower .Power-Cabinet > table{
|
||
width: 75vw;
|
||
}
|
||
#mdcPower .Power-Cabinet > table tr td{
|
||
position: relative;
|
||
}
|
||
.Power-Cabinet table tr td{
|
||
margin: 2px;
|
||
}
|
||
.Power-Cabinet .cabinet-body{
|
||
margin: 0px auto;
|
||
border-radius:5px;
|
||
height: 12vh;
|
||
width: 4vw;
|
||
margin: 0px auto;
|
||
border-bottom-left-radius:5px;
|
||
border-bottom-right-radius:5px;
|
||
background-color: #272F42;
|
||
}
|
||
.Power-Cabinet .cabinet-body > img{
|
||
position: absolute;
|
||
top: 3.2vh;
|
||
/*left: 0.7vw;*/
|
||
margin: 0px 13px;
|
||
}
|
||
/** 渐变背景色 */
|
||
.Power-Cabinet .gradient{
|
||
background-image: -webkit-linear-gradient(top, #D22787, #2870D1);
|
||
background-image: -moz-linear-gradient(top, #D22787, #2870D1);
|
||
background-image: -o-linear-gradient(top, #D22787, #2870D1);
|
||
background-image: -ms-linear-gradient(top, #D22787, #2870D1);
|
||
background-image: linear-gradient(top, #D22787, #2870D1);
|
||
border-radius:8px;
|
||
}
|
||
/** 遮蔽层 */
|
||
.Power-Cabinet .cabinet-body > div{
|
||
width: 3.7vw;
|
||
text-align: center;
|
||
background-color: #272F42;
|
||
border-top-left-radius: 5px;
|
||
border-top-right-radius: 5px;
|
||
}
|
||
.Power-Cabinet .cabinet-body .logoImg{
|
||
width: 2.3vw;
|
||
height: 6vh;
|
||
}
|
||
.right{
|
||
float: right;
|
||
}
|
||
.left{
|
||
float: left;
|
||
}
|
||
.Power-Charts{
|
||
width: 100%;
|
||
height: 25vh;
|
||
margin-top: 1vh;
|
||
}
|
||
.Power-Charts > div{
|
||
float: left;
|
||
width: 32%;
|
||
height: 25vh;
|
||
background-color: #1F2A3C;
|
||
}
|
||
.Power-Charts .itLoad{
|
||
margin: 0px 1.7vw;
|
||
}
|
||
.mPue .title,.itLoad .title,.totalPower .title{
|
||
height: 5vh;
|
||
font-size: 3vh;
|
||
color: #037BC8;
|
||
line-height: 5vh;
|
||
padding-left: 5vh;
|
||
background-color: #182132;
|
||
}
|
||
.mPue .title > span,.itLoad .title > span,.totalPower .title > span{
|
||
line-height: 50px;
|
||
float: right;
|
||
color: #ffffff;
|
||
padding-right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.Power-Charts #mPue,.Power-Charts #itLoad,.Power-Charts #totalPower{
|
||
height: 20vh;
|
||
}
|
||
.mPue,.itLoad,.totalPower{
|
||
position: relative;
|
||
}
|
||
.mPue .body{
|
||
width: 5vw;
|
||
height: 20vh;
|
||
font-size: 5vh;
|
||
text-align: center;
|
||
line-height: 20vh;
|
||
position: absolute;
|
||
}
|
||
.itLoad .body-left{
|
||
width: 10vw;
|
||
height: 9vh;
|
||
font-size: 2vh;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
color: #126DC6;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
}
|
||
.itLoad .body-right{
|
||
width: 10vw;
|
||
height: 9vh;
|
||
font-size: 2vh;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
color: #9D22CA;
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 7vh;
|
||
}
|
||
.totalPower .body{
|
||
width: 10vw;
|
||
height: 20vh;
|
||
text-align: center;
|
||
font-size: 2.2vh;
|
||
padding-top: 3vh;
|
||
position: absolute;
|
||
}
|
||
.totalPower .body > p{
|
||
line-height: 3vh;
|
||
}
|
||
.totalPower .body > input{
|
||
background-color: #172029;
|
||
text-align: center;
|
||
width: 5vw;
|
||
border-width: 0px;
|
||
margin: 1vw 0px;
|
||
}
|
||
.door-alarm
|
||
{
|
||
cursor: pointer;
|
||
width: 24px;
|
||
height: 280px;
|
||
background-image: url('../img/mdc/DoorAlarm.png');
|
||
background-size: 24px 230px;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
.door-normal{
|
||
cursor: pointer;
|
||
width: 24px;
|
||
height: 280px;
|
||
background-image: url('../img/mdc/DoorNormal.png');
|
||
background-size: 24px 230px;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
.camera1{
|
||
width: 80px;
|
||
height: 40px;
|
||
float: left;
|
||
cursor: pointer;
|
||
}
|
||
.camera-centre{
|
||
width: 700px;
|
||
height: 100px;
|
||
float: left;
|
||
}
|
||
.camera2{
|
||
width: 40px;
|
||
height: 40px;
|
||
cursor: pointer;
|
||
}
|
||
.camera3{
|
||
width: 40px;
|
||
height: 40px;
|
||
cursor: pointer;
|
||
}
|
||
.camera4{
|
||
width: 80px;
|
||
height: 40px;
|
||
float: right;
|
||
cursor: pointer;
|
||
}
|
||
.mdc-power .camera-centre{
|
||
width: 1200px;
|
||
}
|
||
|
||
.btn-circle-lg {
|
||
width: 64px;
|
||
height: 64px;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
padding: 13px 0;
|
||
font-size: 26px;
|
||
line-height: 1.55;
|
||
border-radius: 43px;
|
||
filter: alpha(opacity=80);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
|
||
.menubtn{
|
||
background: #004d4d;
|
||
border-color: #005580;
|
||
color: #99ffff;
|
||
}
|
||
.menubtn:hover {
|
||
color: #ffffff;
|
||
border-color: #b3ffff;
|
||
background-color: #009999;
|
||
}
|
||
|
||
.menuactive{
|
||
color: #ffffff;
|
||
border-color: #b3ffff;
|
||
background-color: #009999;
|
||
}
|
||
|
||
.rackDevice{
|
||
border:thin solid #66ccff;
|
||
background-color:#0099e6;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.rackDevice:hover {
|
||
color: #ffffff;
|
||
border-color: #b3ffff;
|
||
font-weight: bold;
|
||
background-color: #009999;
|
||
}
|
||
|
||
.rackDevice-selected {
|
||
background-color: #009999;
|
||
}
|
||
|
||
.rackDevice-out {
|
||
background-color: #e04d46;
|
||
}
|
||
|
||
/* 智能温湿度 */
|
||
#TempRoot #tempRight{
|
||
border: 15px solid #39445A;
|
||
background-color: #272F42;
|
||
overflow-y:auto;
|
||
padding: 15px;
|
||
height: 82vh;
|
||
font-size: 18px;
|
||
}
|
||
#tempRight .tempTable{
|
||
width:100%;
|
||
}
|
||
.tempTable{
|
||
border: 3px solid #3A4352;
|
||
}
|
||
.tempTable th{
|
||
line-height: 35px;
|
||
background-color: #0F1821;
|
||
}
|
||
.tempTable th,.tempTable td{
|
||
padding-left: 10px;
|
||
}
|
||
.tempTable .tempTbody{
|
||
border-bottom: 3px solid #3e495d;
|
||
}
|
||
#TempRoot #tempLeft{
|
||
width: 25%;
|
||
height: 82vh;
|
||
float: left;
|
||
padding-top: 20vh;
|
||
}
|
||
#tempLeft img{
|
||
width: 20vw;
|
||
height: 35vh;
|
||
}
|
||
/* 3D logo */
|
||
#mdc-3d-logo .mdc-a-input{
|
||
position: absolute;
|
||
clip: rect(0, 0, 0, 0);
|
||
pointer-events: none;
|
||
}
|
||
/** 温度 */
|
||
#MdcTemperture{
|
||
width: 85vw;
|
||
height: 80vh;
|
||
border: 10px solid #606F8D;
|
||
}
|
||
#MdcTemperture .cabinet-box .cabinet > table{
|
||
width: 80vw;
|
||
height: 100%;
|
||
}
|
||
#MdcTemperture .cabinet-box .cabinet > table tr td{
|
||
position: relative;
|
||
}
|
||
#MdcTemperture .device .cabinet-body > div{
|
||
height:100%;
|
||
}
|
||
#MdcTemperture .cabinet .cabinet-body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0px auto;
|
||
border-radius: 5px;
|
||
border: #5E687F 3px solid;
|
||
box-shadow: 0 0 8px rgba(127, 140, 171, 1);
|
||
-webkit-box-shadow: 0 0 8px rgba(127, 140, 171,1);
|
||
-moz-box-shadow: 0 0 8px rgba(127, 140, 171,1);
|
||
}
|
||
#MdcTemperture .cabinet-box{
|
||
height: 100%;
|
||
border: 2vh solid #39445A;
|
||
background-color: #272F42;
|
||
}
|
||
#MdcTemperture .cabinet {
|
||
width: 100%;
|
||
height: 60vh;
|
||
color: white;
|
||
margin-top: 6vh;
|
||
}
|
||
#MdcTemperture .device .temp1,#MdcTemperture .device .temp2,#MdcTemperture .device .temp3{
|
||
width: 100%;
|
||
height: 5vh;
|
||
font-size: 2vh;
|
||
line-height: 5vh;
|
||
text-align:center;
|
||
}
|
||
#MdcTemperture .device .temp1{
|
||
position: absolute;
|
||
top: 3vh;
|
||
}
|
||
#MdcTemperture .device .temp2{
|
||
position: absolute;
|
||
top: 11vh;
|
||
}
|
||
#MdcTemperture .device .temp3{
|
||
position: absolute;
|
||
top: 19vh;
|
||
}
|
||
|
||
/** servertime style */
|
||
.dropdown-toggle.servertime{
|
||
width: 250px;
|
||
}
|
||
|
||
/** */
|
||
.over-y{
|
||
height: 750px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.bouncyMenu {
|
||
position:absolute;
|
||
top:50px;
|
||
left:20px;
|
||
height:auto;
|
||
width:100px;
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
padding:10px;
|
||
}
|
||
@media screen and (max-width: 1600px) {
|
||
.bouncyMenu {
|
||
position:absolute;
|
||
top:50px;
|
||
left:20px;
|
||
height:auto;
|
||
width:800px;
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
padding:10px;
|
||
}
|
||
}
|
||
|
||
.bouncyAlarmPanel {
|
||
height:230px;
|
||
width:1460px;
|
||
}
|
||
@media screen and (max-width: 1600px) {
|
||
.bouncyAlarmPanel {
|
||
height:230px;
|
||
width:920px;
|
||
}
|
||
}
|
||
|
||
.bouncyTextPanel {
|
||
font-size: 50px;
|
||
height:100px;
|
||
padding:20px;
|
||
}
|
||
@media screen and (max-width: 1600px) {
|
||
.bouncyTextPanel {
|
||
font-size: 50px;
|
||
height:60px;
|
||
padding:2px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.bouncyPUETextPanel {
|
||
font-size: 50px;
|
||
left:100px;
|
||
}
|
||
@media screen and (max-width: 1600px) {
|
||
.bouncyPUETextPanel {
|
||
visibility: hidden;
|
||
font-size: 0px;
|
||
}
|
||
}
|
||
|
||
/** TimeGroup style */
|
||
.timeGroupCheck table tr td {padding: 10px;}
|
||
.timeGroupCheck label {
|
||
font-size:15px;
|
||
cursor:pointer;
|
||
margin-bottom: 0px;
|
||
}
|
||
.timeGroupCheck span {
|
||
font-size:15px;
|
||
line-height:15px;
|
||
margin:-3px 3px 1px 0px;
|
||
width:15px;
|
||
height:15px;
|
||
}
|
||
.timeGroupCheck label i {
|
||
font-size: 15px;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 25px;
|
||
height: 25px;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
color: #ffffff;
|
||
vertical-align: middle;
|
||
margin: -3px 3px 1px 0px;
|
||
border: #337AB7 1px solid;
|
||
}
|
||
.timeGroupCheck input[type="checkbox"]{display:none;}
|
||
.timeGroupCheck input[type="checkbox"]:checked + i{background:#337AB7;}
|
||
.timeGroupCheck input[type="checkbox"]:checked:disabled + i{background:#337AB7;}
|
||
|
||
#DoorTGChe table tbody tr:hover{
|
||
background-color: rgba(67, 177, 255, 0.37);
|
||
}
|
||
|
||
#ControlDoor table tbody tr{
|
||
border-bottom: 1px solid #3B4755;
|
||
}
|
||
#ControlDoor table tbody tr td{
|
||
border-right: 1px solid #3B4755;
|
||
}
|
||
#ControlDoor .td1{
|
||
background-color: #011042;
|
||
}
|
||
.tbody-overflow thead,.tbody-overflow tbody{
|
||
display: block;
|
||
}
|
||
.tbody-overflow tbody{
|
||
height: 100px;
|
||
overflow: auto;
|
||
}
|
||
.tbody-overflow .tbody-td1{
|
||
width: 70px;
|
||
min-width: 70px;
|
||
max-height: 70px;
|
||
}
|
||
.tbody-overflow .tbody-td2{
|
||
width: 874px;
|
||
min-width: 874px;
|
||
max-height: 874px;
|
||
}
|
||
.tbody-overflow .tbody-td3{
|
||
width: 53px;
|
||
min-width: 53px;
|
||
max-height: 53px;
|
||
}
|
||
.tbody-overflow .tbody-td4{
|
||
width: 108px;
|
||
min-width: 108px;
|
||
max-height: 108px;
|
||
}
|
||
.tbody-overflow .tbody-td5{
|
||
width: 171px;
|
||
min-width: 171px;
|
||
max-height: 171px;
|
||
}
|
||
.tbody-overflow .tbody-td6{
|
||
width: 86px;
|
||
min-width: 86px;
|
||
max-height: 86px;
|
||
}
|
||
.tbody-overflow .tbody-td7{
|
||
width: 69px;
|
||
min-width: 69px;
|
||
max-height: 69px;
|
||
}
|
||
.tbody-overflow .tbody-td8{
|
||
width: 200px;
|
||
min-width: 200px;
|
||
max-height: 200px;
|
||
}
|
||
.tbody-overflow .tbody-td9{
|
||
width: 200px;
|
||
min-width: 200px;
|
||
max-height: 200px;
|
||
}
|
||
.tbody-overflow .tbody-td10{
|
||
width: 55px;
|
||
min-width: 55px;
|
||
max-height: 55px;
|
||
}
|
||
.tbody-overflow .tbody-td11{
|
||
width: 437px;
|
||
min-width: 437px;
|
||
max-height: 437px;
|
||
}
|
||
.tbody-overflow .tbody-td12{
|
||
width: 446px;
|
||
min-width: 446px;
|
||
max-height: 446px;
|
||
}
|
||
.tbody-overflow .tbody-td13{
|
||
width: 246px;
|
||
min-width: 246px;
|
||
max-height: 246px;
|
||
}
|
||
.tbody-overflow .tbody-td14{
|
||
width: 100px;
|
||
min-width: 100px;
|
||
max-height: 100px;
|
||
}
|
||
.tbody-overflow .tbody-td15{
|
||
width: 610px;
|
||
min-width: 610px;
|
||
max-height: 610px;
|
||
}
|
||
.tbody-overflow .tbody-td5_2{
|
||
width: 20%;
|
||
min-width: 20%;
|
||
max-height: 20%;
|
||
}
|
||
.tbody-overflow .tbody-td5_8{
|
||
width: 80%;
|
||
min-width: 80%;
|
||
max-height: 80%;
|
||
}
|
||
.tbody-overflow .td1{
|
||
width: 4vw;
|
||
}
|
||
.tbody-overflow .td2{
|
||
width: 45.6vw;
|
||
}
|
||
|
||
.labelCenter {
|
||
line-height: 34px;
|
||
}
|
||
|
||
.pointer{
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Expression Symbol */
|
||
.ExpressionSymbol{
|
||
list-style:none;
|
||
padding-right: 10px;
|
||
}
|
||
.ExpressionSymbol li{
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 1px solid #025aff;
|
||
background-color: #3fa5ef;
|
||
text-align:center;
|
||
float:left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.disable{
|
||
pointer-events: none;
|
||
background-color: #b3a7a7;
|
||
border-color: #b5a9b4;
|
||
}
|
||
|
||
.templateDiv{
|
||
position: relative;
|
||
}
|
||
|
||
.templateProperty{
|
||
position: absolute;
|
||
top: 90%;
|
||
left: 0;
|
||
z-index: 1000;
|
||
display: none;
|
||
float: left;
|
||
min-width: 160px;
|
||
padding: 5px 0;
|
||
margin: 2px 0 0;
|
||
font-size: 14px;
|
||
text-align: left;
|
||
list-style: none;
|
||
background-color: #171b21;
|
||
-webkit-background-clip: padding-box;
|
||
background-clip: padding-box;
|
||
border: 1px solid rgba(0, 0, 0, .15);
|
||
border-radius: 0px;
|
||
}
|
||
.templateProperty li input[type="checkbox"]{
|
||
font-size: 15px;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
color: #ffffff;
|
||
vertical-align: middle;
|
||
margin: -3px 3px 1px 0px;
|
||
border: #337AB7 1px solid;
|
||
}
|
||
.templateProperty label,input{
|
||
cursor:pointer;
|
||
}
|
||
|
||
|
||
#alarmCount{
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 60px;
|
||
width: 32px;
|
||
height: 22px;
|
||
background-color: #BA3463;
|
||
color: white;
|
||
text-align: center;
|
||
border-radius: 100px;
|
||
-moz-border-radius: 100px;
|
||
line-height:22px;
|
||
z-index: 3;
|
||
display: none;
|
||
}
|
||
|
||
/************* 组态编辑 *******************/
|
||
|
||
.selectDiv{
|
||
position:absolute;
|
||
border:3px dashed #43b1ff;
|
||
background-color: rgba(67, 177, 255, 0.10);
|
||
width:0px;
|
||
height:0px;
|
||
left:0px;
|
||
top:0px;
|
||
overflow:hidden;
|
||
}
|
||
.seled{
|
||
border: 3px dashed #43b1ff;
|
||
}
|
||
|
||
.editor{
|
||
width: 820px;
|
||
height: 30px;
|
||
margin: 0px auto;
|
||
position: relative;
|
||
z-index: 999;
|
||
}
|
||
.editor button{
|
||
float: left;
|
||
width: 30px;
|
||
height: 30px;
|
||
background-color: rgba(0, 136, 255, 0.2);
|
||
border-color: rgba(0, 132, 215, 0.8);
|
||
border-style: solid;
|
||
margin: 0px 2px;
|
||
padding: 0px;
|
||
}
|
||
.editor button img{
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.is-show-ul li{
|
||
width: 110px;
|
||
}
|
||
|
||
.is-show-div{
|
||
position: absolute;
|
||
width: 20px;
|
||
right: 0px;
|
||
top: 0px;
|
||
cursor: pointer;
|
||
box-shadow: -5px 0 5px #337AB7;
|
||
background-color: rgba(0, 136, 255, 0.2);
|
||
border: 2px solid rgba(0, 132, 215, 0.8);
|
||
}
|
||
|
||
.editor-menu{
|
||
background-color: rgba(0, 136, 255, 0.1);
|
||
border: 2px solid rgba(0, 132, 215, 0.8);
|
||
}
|
||
|
||
/** 2D MDC微模块菜单按钮 *****************/
|
||
.MdcMenu{
|
||
position: absolute;
|
||
left: 37%;
|
||
z-index: 999;
|
||
width: 410px;
|
||
height: 44px;
|
||
border-radius: 25px;
|
||
top: 3.9vh;
|
||
}
|
||
.MdcMenu table{
|
||
width: 100%;
|
||
background-color: #203882;
|
||
border-radius: 25px;
|
||
}
|
||
.MdcMenu tr td{
|
||
height: 44px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
line-height: 44px;
|
||
cursor: pointer;
|
||
/*background-color: #203882;*/
|
||
}
|
||
.MdcMenu tr td:hover{
|
||
background-color: rgba(1, 102, 254, 0.5);
|
||
}
|
||
.MdcMenu tr td.selected{
|
||
background-color: #0166fe;
|
||
}
|
||
.MdcMenu tr td{
|
||
border-radius: 25px;
|
||
}
|
||
/*.MdcMenu tr td:first-child{
|
||
border-top-left-radius: 25px;
|
||
border-bottom-left-radius: 25px;
|
||
}
|
||
.MdcMenu tr td:last-child{
|
||
border-top-right-radius: 25px;
|
||
border-bottom-right-radius: 25px;
|
||
}*/
|
||
|
||
|
||
|
||
.thermalHumidity{
|
||
width: 5vh;
|
||
height: 10vh;
|
||
}
|
||
|
||
|
||
.thermalHumidity div{
|
||
width: 5vh;
|
||
height: 5vh;
|
||
cursor: pointer;
|
||
}
|
||
.thermalHumidity_2 div{
|
||
width: 14vh;
|
||
height: 4vh;
|
||
cursor: pointer;
|
||
font-size: 1.6vh;
|
||
text-align: right;
|
||
line-height: 4.5vh;
|
||
padding: 0px 10px;
|
||
}
|
||
|
||
.thermalHumidity .thermal.normal{
|
||
background:url('../img/mdc/ThermalNormal.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
.thermalHumidity .thermal.alarm{
|
||
background:url('../img/mdc/ThermalAlarm.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
.thermalHumidity_2 .thermal_2.normal{
|
||
background:url('../img/mdc/ThermalNormal_2.png') no-repeat center;
|
||
background-size: 14vh 4vh;
|
||
}
|
||
.thermalHumidity_2 .thermal_2.alarm{
|
||
background:url('../img/mdc/ThermalAlarm_2.png') no-repeat center;
|
||
background-size: 14vh 4vh;
|
||
}
|
||
|
||
|
||
.thermalHumidity .humidity.normal{
|
||
background:url('../img/mdc/HumidityNormal.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
.thermalHumidity .humidity.alarm{
|
||
background:url('../img/mdc/HumidityAlarm.png') no-repeat center;
|
||
background-size: 5vh 5vh;
|
||
}
|
||
.thermalHumidity_2 .humidity_2.normal{
|
||
background:url('../img/mdc/HumidityNormal_2.png') no-repeat center;
|
||
background-size: 14vh 4vh;
|
||
}
|
||
.thermalHumidity_2 .humidity_2.alarm{
|
||
background:url('../img/mdc/HumidityAlarm_2.png') no-repeat center;
|
||
background-size: 14vh 4vh;
|
||
}
|
||
|
||
.thermalHumidity .humidity,
|
||
.thermalHumidity_2 .humidity_2{
|
||
top: 50px;
|
||
}
|
||
|
||
.cabinet-box .cabinet-body .rackDevice{
|
||
background-color: rgba(0, 153, 230, 0.5);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* 冷通道 */
|
||
.cabinet-box .cabinet-aisle-table{
|
||
width: 100%;
|
||
height: 100%;
|
||
min-width: 100%;
|
||
min-height: 100%;
|
||
}
|
||
.cabinet-aisle-table tr td{
|
||
border: 1px solid rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
/* 能耗分布 */
|
||
.cabinet-box .cabinet-body{
|
||
margin: 0px auto;
|
||
border-radius:5px;
|
||
height: 12vh;
|
||
width: 4vw;
|
||
border-bottom-left-radius:5px;
|
||
border-bottom-right-radius:5px;
|
||
background-color: rgba(39, 47, 66, 0.5);;
|
||
}
|
||
.cabinet-box .cabinet-body > img{
|
||
position: absolute;
|
||
top: 3.4vh;
|
||
margin: 0px 13px;
|
||
}
|
||
/** 渐变背景色 */
|
||
.cabinet-box .gradient{
|
||
background-image: -webkit-linear-gradient(top, #D22787, #2870D1);
|
||
background-image: -moz-linear-gradient(top, #D22787, #2870D1);
|
||
background-image: -o-linear-gradient(top, #D22787, #2870D1);
|
||
background-image: -ms-linear-gradient(top, #D22787, #2870D1);
|
||
background-image: linear-gradient(top, #D22787, #2870D1);
|
||
border-radius:8px;
|
||
background-size:4vw 12vh;
|
||
}
|
||
/** 遮蔽层 */
|
||
.cabinet-box .cabinet-body > div{
|
||
width: 3.7vw;
|
||
text-align: center;
|
||
background-color: #152857;
|
||
border-top-left-radius: 5px;
|
||
border-top-right-radius: 5px;
|
||
}
|
||
.cabinet-box .cabinet-body .logoImg{
|
||
/*width: 2.3vw;
|
||
height: 6vh;*/
|
||
}
|
||
|
||
/* 温度分布 */
|
||
.thermal .cabinet-body {
|
||
margin: 0px auto;
|
||
border-radius: 5px;
|
||
border: #5E687F 3px solid;
|
||
box-shadow: 0 0 8px rgba(127, 140, 171, 1);
|
||
-webkit-box-shadow: 0 0 8px rgba(127, 140, 171,1);
|
||
-moz-box-shadow: 0 0 8px rgba(127, 140, 171,1);
|
||
}
|
||
.thermal .temp1,.thermal .temp2,.thermal .temp3{
|
||
width: 3.7vw;
|
||
height: 3vh;
|
||
font-size: 1.5vh;
|
||
line-height: 3vh;
|
||
text-align: center;
|
||
}
|
||
.thermal .temp1{
|
||
position: absolute;
|
||
top: 1vh;
|
||
}
|
||
.thermal .temp2{
|
||
position: absolute;
|
||
top: 4.5vh;
|
||
}
|
||
.thermal .temp3{
|
||
position: absolute;
|
||
top: 8vh;
|
||
}
|
||
|
||
/** is Show Font Chart **/
|
||
.show-font-chart{
|
||
position: absolute;
|
||
z-index: 1;
|
||
background-color: #1b1f27;
|
||
border: 1px solid #24272b;
|
||
cursor: pointer;
|
||
padding: 10px 20px;
|
||
top: 35px;
|
||
left: 110px;
|
||
width: 170px;
|
||
}
|
||
.show-font-chart li{
|
||
list-style-type: none;
|
||
}
|
||
|
||
.device_info_btn{
|
||
border: 2px solid #0084d7;
|
||
background-color: rgba(0, 132, 215, 0.6);
|
||
border-radius: 8px;
|
||
width: 70px;
|
||
height: 25px;
|
||
line-height: 21px;
|
||
text-align: center;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 80px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 优化组态行内样式 */
|
||
.chart-body{
|
||
background-size:100% 100% !important;
|
||
height:calc(100% - 20px);
|
||
}
|
||
|
||
.image-signal-body{
|
||
border-radius: 10px;
|
||
border: solid 1px #0C85D3;
|
||
}
|
||
|
||
.device-status-body{
|
||
height:calc(100% - 19px);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.signal-body{
|
||
background-color: #293646;
|
||
height:calc(100% - 19px);
|
||
}
|
||
|
||
.virtual-signal-body{
|
||
height:calc(100% - 19px);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.table-body{
|
||
background-size:100% 100% !important;
|
||
height:calc(100% - 35px);
|
||
}
|
||
|
||
#picker .colpick.colpick_full{
|
||
margin: 0px auto;
|
||
}
|
||
|
||
.topology-img-div{
|
||
cursor: pointer;
|
||
border: 1px solid;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
height: 39px;
|
||
}
|
||
.topology-img{
|
||
height: 37px;
|
||
}
|
||
.topology-img-div div{
|
||
display: none;
|
||
}
|
||
.topology-img-div:hover div{
|
||
display: block;
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
width: 198px;
|
||
height: auto;
|
||
z-index: 999;
|
||
border: 1px solid #ffffff;
|
||
background-color: #24272b;
|
||
}
|
||
.topology-img-div div img{
|
||
width:100%;
|
||
height:auto;
|
||
}
|
||
|
||
/** 图片预览页面 **/
|
||
.image-preview{
|
||
border: 1px solid #FFF;
|
||
height: 300px;
|
||
overflow-y: scroll;
|
||
}
|
||
.image-div{
|
||
width: 126px;
|
||
height: 126px;
|
||
border: 1px solid #FFF;
|
||
display:inline-block;
|
||
text-align:center;
|
||
vertical-align: middle;
|
||
cursor:pointer;
|
||
margin: 1px;
|
||
}
|
||
.image-div img{
|
||
max-width: 124px;
|
||
max-height: 124px;
|
||
vertical-align: middle;
|
||
}
|
||
.select-image{
|
||
border:1px solid #08c;
|
||
background-color:rgba(0, 136, 204, 0.5);
|
||
}
|
||
|
||
/* 旋转 */
|
||
.rotate_90{
|
||
-webkit-transform: rotate(-90deg);
|
||
-moz-transform: rotate(-90deg);
|
||
}
|
||
.rotate_180{
|
||
-webkit-transform: rotate(-180deg);
|
||
-moz-transform: rotate(-180deg);
|
||
}
|
||
.rotate_270{
|
||
-webkit-transform: rotate(-270deg);
|
||
-moz-transform: rotate(-270deg);
|
||
}
|
||
|
||
/* 复选框文本对齐 */
|
||
.select-all label{
|
||
padding-left: 4px;
|
||
cursor: pointer;
|
||
margin: 0;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.select-all input{
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/** MDC告警弹屏 **/
|
||
.Alarm-Play-Screen{
|
||
width: 50vw;
|
||
height: 16vh;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
left: 20vh;
|
||
}
|
||
.Play-Screen{
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
height: 3.7vh;
|
||
margin: 5px 0px;
|
||
padding: 0px 10px;
|
||
font-size: 16px;
|
||
line-height: 3.7vh;
|
||
border-radius: 35px;
|
||
float: left;
|
||
clear:both;
|
||
display: flex;
|
||
box-shadow: 0px 2px 20px 0px rgba(32, 100, 202, 0.12);
|
||
max-width: 100%;
|
||
-webkit-border-radius: 35px;
|
||
-moz-border-radius: 35px;
|
||
-ms-border-radius: 35px;
|
||
-o-border-radius: 35px;
|
||
}
|
||
.Play-Screen > .Play-Screen-info{
|
||
display: inline-flex;
|
||
width: calc(100% - 215px);
|
||
cursor: pointer;
|
||
}
|
||
.Play-Screen > .Play-Screen-info > .Play-Screen-content{
|
||
width: calc(100% - 25px);
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.Play-Screen > .Play-Screen-time{
|
||
line-height: 4vh;
|
||
width: 150px;
|
||
text-align: center;
|
||
}
|
||
.Play-Screen > .Play-Screen-action{
|
||
display: flex;
|
||
text-align: center;
|
||
font-size: 1.3em;
|
||
line-height: 3.5vh;
|
||
width: 65px;
|
||
justify-content: space-between;
|
||
}
|
||
.Play-Screen span{
|
||
min-width: 25px;
|
||
overflow: hidden;
|
||
}
|
||
.Play-Screen i{
|
||
cursor: pointer;
|
||
}
|
||
|
||
.Play-Screen-Button{
|
||
border-top: 1px solid #5666A5;
|
||
position: relative;
|
||
float: left;
|
||
width: calc(100% + 80px);
|
||
margin-top: 5px;
|
||
}
|
||
.Play-Screen-Button .box{
|
||
cursor: pointer;
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 10px;
|
||
height: 40px;
|
||
width: 40px;
|
||
background: #088cb7;
|
||
-moz-border-radius: 12px;
|
||
-webkit-border-radius: 12px;
|
||
border-radius: 20px;
|
||
font-size: 2vh;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
}
|
||
.Play-Screen-Button .box:before{
|
||
border-radius: 15px;
|
||
position: absolute;
|
||
content: "";
|
||
right: 0px;
|
||
top: 28px;
|
||
border-top: 20px solid #088cb7;
|
||
border-left: 20px solid transparent;
|
||
border-right: 20px solid transparent;
|
||
border-bottom: 0px solid transparent;
|
||
}
|
||
|
||
.table-td tr td,.table-td tr th{
|
||
border: 1px solid #384554;
|
||
}
|
||
|
||
.bg-transparent,.bg-transparent tbody{
|
||
background-color: transparent;
|
||
}
|
||
|
||
.fa-img{
|
||
cursor: pointer;
|
||
}
|
||
.fa-img:hover{
|
||
color: #fcce10;
|
||
}
|
||
.help-notes-body{
|
||
width: 80%;
|
||
margin: 0px auto;
|
||
background-image: url("../img/bg.jpg");
|
||
}
|
||
.help-notes-body img{
|
||
width: 100%;
|
||
cursor: pointer;
|
||
}
|
||
.help-arrows-head{
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 20px;
|
||
font-size: 25px;
|
||
}
|
||
.help-arrows-left{
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 45%;
|
||
left: 3vw;
|
||
font-size: 50px;
|
||
}
|
||
.help-arrows-right{
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 45%;
|
||
right: 3vw;
|
||
font-size: 50px;
|
||
}
|
||
.help-arrows-footer{
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 35px;
|
||
font-size: 20px;
|
||
}
|
||
#rtspVideoDialog{
|
||
top:18%;
|
||
}
|
||
|
||
/* 字体竖排 */
|
||
.font-one {
|
||
margin:0 auto;
|
||
writing-mode:vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
|
||
writing-mode:tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
|
||
}
|
||
|
||
/* 组态 - 3D MDC */
|
||
#renderCanvas {
|
||
width: 100%;
|
||
height: 100%;
|
||
touch-action: none;
|
||
}
|
||
|
||
.modal-top-10{
|
||
margin-top: 10%;
|
||
}
|
||
.modal-top-11{
|
||
margin-top: 11%;
|
||
}
|
||
.modal-top-12{
|
||
margin-top: 12%;
|
||
}
|
||
.modal-top-13{
|
||
margin-top: 13%;
|
||
}
|
||
.modal-top-14{
|
||
margin-top: 14%;
|
||
}
|
||
.modal-top-15{
|
||
margin-top: 15%;
|
||
}
|
||
|
||
.modal-top-40 {
|
||
margin-top: 40%;
|
||
}
|
||
|
||
|
||
|
||
.mdc-controlplane{
|
||
position: absolute;
|
||
right: 5px;
|
||
bottom: 5px;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.mdc-3d-button {
|
||
margin-top: 10px;
|
||
margin-left: 5px;
|
||
width: 48px;
|
||
height: 32px;
|
||
z-index: 100;
|
||
/* opacity: 0.3; */
|
||
color: #fff;
|
||
font-size: 14px;
|
||
background: rgba(255,255,255,0.1);
|
||
border: 0.1px solid #1073e3;
|
||
vertical-align: middle;
|
||
cursor: pointer;
|
||
outline: none;
|
||
}
|
||
|
||
.mdc-3d-button-active {
|
||
background: rgb(15, 124, 248);
|
||
}
|