* {
|
margin: 0 auto;
|
padding: 0;
|
list-style-type: none;
|
font-family: "微软雅黑";
|
}
|
|
.model-backcolor {
|
background: rgb(144, 238, 144);
|
}
|
|
.nav-header {
|
margin-left: 60px;
|
width: 500px;
|
height: 50px;
|
line-height: 50px;
|
text-align: left;
|
color: white;
|
font-size: 18px;
|
font-weight: bold;
|
letter-spacing: 2px;
|
/*font-style:italic;斜体*/
|
}
|
|
.navbar-fixed-top {
|
left: -17px !important;
|
right: 17px !important;
|
top: 6px !important;
|
}
|
|
#logo {
|
width: 60px;
|
height: 60px;
|
margin-top: -8px;
|
}
|
|
#page > li {
|
cursor: pointer;
|
}
|
|
.content {
|
padding-top: 50px;
|
height: 100%;
|
width: 100%;
|
min-width: 1000px;
|
}
|
.content-top {
|
padding-top: 10px;
|
height: 75%;
|
width: 100%;
|
min-width: 1000px;
|
}
|
|
.content-left{
|
/*border:1px solid red;*/
|
/*height:100%;*/
|
float: left;
|
/*overflow: auto;*/
|
overflow-x: auto;
|
overflow-y: auto;
|
}
|
.content-right {
|
/*border:1px solid red;*/
|
/*height:100%;*/
|
float: left;
|
/*overflow: auto;*/
|
overflow-x: auto;
|
overflow-y: auto;
|
}
|
|
.content-left {
|
width: 39.2%;
|
height: 100%;
|
/*width: 80%;
|
height: 40%;*/
|
min-width: 382px;
|
}
|
.content-right {
|
width: 100%;
|
height: 100%;
|
/*width: 80%;
|
height: 40%;*/
|
min-width: 800px;
|
}
|
|
|
.content-down {
|
height: 100%;
|
width: 100%;
|
/*height: 60%;*/
|
min-width: 382px;
|
/*position: absolute;
|
top: 735px;
|
right: 8%;*/
|
}
|
.down-right {
|
width: 57%;
|
position: absolute;
|
left: 800px;
|
}
|
/*图例*/
|
.legend {
|
width: 100%;
|
min-width: 300px;
|
height: 50px;
|
/*border:1px solid black;*/
|
}
|
|
.legend > ul {
|
float: right;
|
height: 50px;
|
/*border: 1px solid gray;*/
|
}
|
|
.legend > ul > li {
|
border: 1px solid skyblue;
|
float: left;
|
width: 120px;
|
height: 30px;
|
text-align: center;
|
border-radius: 5px;
|
line-height: 30px;
|
margin-right: 250px;
|
margin-top: 15px;
|
}
|
|
.monitoring-area .devices {
|
border: 0px solid skyblue;
|
background: white;
|
}
|
|
.monitoring-area {
|
margin-top: -70px;
|
padding-top: 90px;
|
padding-left: 10%;
|
width: 1850px;
|
height: 100%;
|
/*border: 1px solid blue;*/
|
min-width:1080px;
|
}
|
.monitoring-area .alart {
|
background:white;
|
}
|
.monitoring-area-left {
|
margin-top: -70px;
|
padding-top: 263px;
|
padding-left: 5%;
|
width: 100%;
|
height: 100%;
|
/*border: 1px solid blue;*/
|
}
|
.area-left {
|
float: right;
|
}
|
|
.monitoring-area table tr td {
|
text-align: center;
|
}
|
|
.panel table tr td {
|
text-align: center;
|
}
|
|
.roadway {
|
width: 100%;
|
}
|
|
.roadway > li {
|
width: 36px;
|
height: 35px;
|
border: 1px solid skyblue;
|
float: left;
|
margin-top:1px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
/*background: #DADADA;*/
|
}
|
.monitoring-area .wire {
|
width: 36px;
|
height: 25px;
|
float: left;
|
margin-top: 5px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
text-align: center;
|
border: 1px solid #f3f9f1;
|
background: #DADADA;
|
}
|
.monitoring-area .inshelves {
|
width: 25px;
|
height: 30px;
|
border: 1px solid #f3f9f1;
|
/* border-radius: 3px; */
|
margin-bottom: 4px;
|
margin-left: 2px;
|
margin-top: 5px;
|
text-align: center;
|
line-height: 46px;
|
background: #DADADA;
|
float: left;
|
}
|
|
.monitoring-area .hides {
|
border: 0px solid #f3f9f1;
|
background: white;
|
}
|
.monitoring-area .boxs {
|
width: 36px;
|
height: 35px;
|
border: 1px solid skyblue;
|
float: left;
|
margin-top: 1px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
background: white;
|
}
|
/*.roadway1 {
|
width: 830px;
|
}
|
|
.roadway1 > li {
|
width: 36px;
|
height: 35px;
|
float: left;
|
margin-top: 5px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
text-align:center;
|
}*/
|
/*.roadway2 {
|
width: 830px;
|
}
|
|
.roadway2 > li {
|
width: 100%;
|
height: 100%;
|
float: left;
|
margin-top: 5px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
text-align: center;
|
}*/
|
.monitoring-area .injacking {
|
background: #bfeab1;
|
|
}
|
|
.roadway3 {
|
width: 100%;
|
}
|
.roadway3 > li {
|
width: 36px;
|
height: 25px;
|
float: left;
|
margin-top: 5px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
text-align: center;
|
border: 1px solid #f3f9f1;
|
background: #DADADA;
|
}
|
.roadway4 {
|
width: 100%;
|
}
|
|
.roadway4 > li {
|
width: 36px;
|
height: 35px;
|
border: 1px solid skyblue;
|
float: left;
|
margin-top: 1px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
}
|
.leftway1 {
|
width: 100%;
|
}
|
.leftway1 > li {
|
width: 36px;
|
height: 25px;
|
border: 1px solid #f3f9f1;
|
background: #DADADA;
|
float: right;
|
margin-top: 1px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
}
|
|
.leftway2 {
|
float: left;
|
}
|
.leftway2 > li {
|
width: 36px;
|
height: 25px;
|
border: 1px solid #f3f9f1;
|
background: #DADADA;
|
margin-top: 1px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
}
|
|
.leftway3 > li {
|
width: 36px;
|
height: 25px;
|
border: 1px solid #f3f9f1;
|
background: #DADADA;
|
margin-top: 1px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
position: fixed;
|
left: 632px;
|
top: 232px;
|
}
|
.leftway4 > li {
|
width: 36px;
|
height: 25px;
|
border: 1px solid #f3f9f1;
|
background: #DADADA;
|
float: right;
|
margin-top: 1px;
|
margin-right: 76px;
|
margin-bottom: 4px;
|
}
|
.roadway_div {
|
/* position: absolute;
|
top: 275px;
|
left: 10%;*/
|
margin-left:5%;
|
float:left;
|
}
|
.img1 {
|
width: 45px;
|
}
|
.stacker {
|
/* position: absolute;
|
top: -1px; */
|
width: 100%;
|
}
|
|
.stacker > li {
|
width: 36px;
|
height: 25px;
|
border: 1px solid #f3f9f1;
|
/* border-radius: 3px; */
|
margin-bottom: 4px;
|
margin-left: 2px;
|
margin-top: 5px;
|
text-align: center;
|
line-height: 46px;
|
background: #DADADA;
|
float: left;
|
}
|
.monitoring-area .devices {
|
border: 0px solid skyblue;
|
background: white;
|
}
|
|
.tr1 > td {
|
padding: 5px
|
}
|
|
#stacker_1 {
|
left: 50px;
|
}
|
|
#stacker_2 {
|
right: 50px;
|
}
|
|
#conveyerline_L {
|
position: absolute;
|
bottom: -50px;
|
left: -10px;
|
height: 46px;
|
width: 200px;
|
}
|
|
#conveyerline_R {
|
position: absolute;
|
bottom: -50px;
|
left: -1px;
|
height: 46px;
|
width: 46px;
|
}
|
|
#conveyerline_L2 {
|
position: absolute;
|
bottom: -100px;
|
left: -18px;
|
height: 46px;
|
width: 160px;
|
}
|
|
#conveyerline_L > li, #conveyerline_L2 > li, #conveyerline_R > li {
|
border: 1px solid blue;
|
float: right;
|
width: 46px;
|
height: 46px;
|
margin-left: 2px;
|
margin-bottom: 4px;
|
line-height: 46px;
|
text-align: center;
|
background: #DADADA;
|
}
|
|
#img-man {
|
position: absolute;
|
top: 100px;
|
width: 100px;
|
height: 100px;
|
left: -35px;
|
}
|
|
#start-system {
|
transition: border .2s,color .4s;
|
}
|
|
#start-system:hover {
|
border: 1px solid pink;
|
color: red;
|
}
|
/*弹出框*/
|
.popover {
|
width: auto;
|
max-width: 800px;
|
}
|
/*光栅*/
|
.grating {
|
width: 5px;
|
height: 0%;
|
background: red;
|
transition: height 1s;
|
}
|
|
#grating_1001_1, #grating_1002_1, #grating_1010_1, #grating_1013_1 {
|
float: left;
|
}
|
|
#grating_1001_2, #grating_1002_2, #grating_1013_2 {
|
float: right;
|
}
|
|
#grating_1010_2 {
|
width: 1%;
|
height: 5px;
|
background: red;
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
transition: width 1s;
|
}
|
/*#conveyerline_1001:hover .grating {
|
height:100%;
|
}
|
#conveyerline_1002:hover .grating {
|
height:100%;
|
}
|
#conveyerline_1008:hover .grating {
|
height:100%;
|
}
|
#conveyerline_1010:hover #grating_1010_2 {
|
width:100%;
|
}*/
|
|
#alarm {
|
cursor: pointer;
|
}
|
|
/*未登录禁用按钮*/
|
.mask-box {
|
position: relative;
|
float: left;
|
margin-right: 5px;
|
}
|
|
.btn-mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 9999;
|
width: 100%;
|
height: 100%;
|
background: rgba(0,152,50,0.2);
|
}
|
|
/*调用changeColor*/
|
.device-warning {
|
animation: changeColor .5s linear infinite;
|
}
|
/*呼吸灯闪烁效果*/
|
@keyframes changeColor {
|
0% {
|
background: #FF0033;
|
box-shadow: 2px 2px 0px #FF0033;
|
}
|
|
20% {
|
background: #FF0033;
|
box-shadow: 2px 2px 20px #FF0033;
|
}
|
|
40% {
|
background: #FF0000;
|
box-shadow: 2px 2px 40px #FF0000;
|
}
|
|
60% {
|
background: #CC0000;
|
box-shadow: 2px 2px 60px #CC0000;
|
}
|
|
80% {
|
background: #FF0000;
|
box-shadow: 2px 2px 40px #FF0000;
|
}
|
|
100% {
|
background: #FF0033;
|
box-shadow: 2px 2px 20px #FF0033;
|
}
|
}
|
/*安全门*/
|
#safe_door_G1001 {
|
position: absolute;
|
top: -12px;
|
left: 0;
|
}
|
|
#safe_door_G1010 {
|
position: absolute;
|
left: -10px;
|
bottom: -32px;
|
}
|
|
.safe-door {
|
width: 120px;
|
height: 5px;
|
}
|
|
.door-left1001, .door-left1010, .door-right1001, .door-right1010 {
|
float: left;
|
width: 60px;
|
height: 100%;
|
}
|
|
.door-l, .door-r {
|
float: left;
|
width: 30px;
|
height: 100%;
|
}
|
|
.door-r {
|
background: black;
|
}
|
|
.safe-door-open1 {
|
animation: action ease-in .5s;
|
animation-fill-mode: forwards;
|
}
|
|
.safe-door-open2 {
|
animation: action2 ease-in .5s;
|
animation-fill-mode: forwards;
|
}
|
/*安全门开门效果*/
|
@keyframes action {
|
from {
|
transform: rotateZ(0deg);
|
}
|
|
to {
|
transform: rotateZ(-90deg);
|
}
|
}
|
|
@keyframes action2 {
|
from {
|
transform: rotateZ(0deg);
|
}
|
|
to {
|
transform: rotateZ(90deg);
|
}
|
}
|
/*安全门*/
|
/*光栅*/
|
.gs-warning {
|
animation: changeWidth ease-in .5s,changeColor .5s linear infinite;
|
animation-fill-mode: forwards;
|
}
|
|
.gs-warning-forhei {
|
animation: changeHeight ease-in .5s,changeColor .5s linear infinite;
|
animation-fill-mode: forwards;
|
}
|
|
@keyframes changeWidth {
|
from {
|
width: 0%;
|
}
|
|
to {
|
width: 100%;
|
}
|
}
|
|
@keyframes changeHeight {
|
from {
|
height: 0%;
|
}
|
|
to {
|
height: 100%;
|
}
|
}
|
/*光栅*/
|
/*报警心跳区域*/
|
#alarm-signs {
|
position: absolute;
|
width: 623px;
|
height: 200px;
|
left: 65px;
|
}
|
|
.heartbeat-tb tr td {
|
font-size: 8px;
|
width: 115px;
|
height: 50px;
|
/*border:1px solid black;*/
|
}
|
|
.sign-box {
|
border: 1px solid skyblue;
|
width: 20px;
|
height: 10px;
|
margin-top: -20px;
|
background: #DADADA;
|
}
|
/*报警心跳区域*/
|
/*日期*/
|
.demo {
|
position: relative;
|
width: 56%;
|
margin-left: 10px;
|
}
|
|
.demo i {
|
position: absolute;
|
bottom: 10px;
|
right: 24px;
|
top: auto;
|
cursor: pointer;
|
}
|
