470 lines
8.5 KiB
CSS
470 lines
8.5 KiB
CSS
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
float: left;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.left{
|
|
float: left;
|
|
height: 99.6%;
|
|
width: 24.9%;
|
|
}
|
|
.center{
|
|
float: left;
|
|
height: 99.6%;
|
|
width: 46.2%;
|
|
}
|
|
.right{
|
|
float: left;
|
|
height: 99.6%;
|
|
width: 24.9%;
|
|
}
|
|
.video{
|
|
height: 32%;
|
|
}
|
|
.video>.title{
|
|
width: 100%;
|
|
height: 15%;
|
|
background-image: url(../../img/moduleTitle.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
}
|
|
.video>.title>span{
|
|
align-self: center;
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
text-indent: 45px;
|
|
}
|
|
|
|
|
|
.wisdom{
|
|
margin-top: 4%;
|
|
height: 65.4%;
|
|
}
|
|
.wisdom>.title{
|
|
width: 100%;
|
|
height: 7.4%;
|
|
background-image: url(../../img/moduleTitle.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
}
|
|
.wisdom>.title>span{
|
|
align-self: center;
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
text-indent: 45px;
|
|
}
|
|
.wisdom>#chart{
|
|
width: 100%;
|
|
height: 38.2%;
|
|
}
|
|
.wisdom>.table{
|
|
margin-top: 4%;
|
|
width: 100%;
|
|
height: 50.2%;
|
|
}
|
|
.wisdom>.table>div:nth-child(n + 2){
|
|
width: 100%;
|
|
margin-top: 1%;
|
|
background: url("../../img/index/standardColumn.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 12.3%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.wisdom>.table>div:nth-child(n + 2):hover{
|
|
background: url("../../img/index/standardColumnHover.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.wisdom>.table>div:nth-child(n + 2)>span{
|
|
color: rgba(255,255,255,0.8);
|
|
align-self: center;
|
|
width: 33.3%;
|
|
text-align: center;
|
|
}
|
|
|
|
.wisdom>.table>.tableList{
|
|
width: 100%;
|
|
background: url("../../img/index/title.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto; /* 设置左右外边距为自动 */
|
|
height: 15%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.wisdom>.table>.tableList>span{
|
|
color: rgba(255,255,255,0.8);
|
|
align-self: center;
|
|
width: 33.3%;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
#map{
|
|
width: 100%;
|
|
height: 65%;
|
|
overflow: hidden;
|
|
}
|
|
#earlyWarn{
|
|
width: 100%;
|
|
height: 34.5%;
|
|
}
|
|
#earlyWarn>.title{
|
|
width: 100%;
|
|
height: 14.4%;
|
|
background-image: url(../../img/moduleTitle.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 56% 100%;
|
|
display: flex;
|
|
}
|
|
#earlyWarn>.title>span{
|
|
align-self: center;
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
text-indent: 45px;
|
|
}
|
|
#earlyWarnContent{
|
|
width: 100%;
|
|
height: 85%;
|
|
}
|
|
|
|
.interfaceState{
|
|
width: 100%;
|
|
height: 10%;
|
|
}
|
|
.right>.interfaceState{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.right>.interfaceState>div{
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
.right>.interfaceState>div>span{
|
|
align-self: center;
|
|
}
|
|
.right>.interfaceState>div>span:nth-child(1){
|
|
color: white;
|
|
}
|
|
.right>.interfaceState>.title{
|
|
background-image: url(../../img/index/interfaceState.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 16%;
|
|
cursor: pointer;
|
|
}
|
|
.request{
|
|
width: 30%;
|
|
}
|
|
.success{
|
|
width: 18%;
|
|
}
|
|
.error{
|
|
width: 18%;
|
|
}
|
|
|
|
.airQuality{
|
|
width: 100%;
|
|
height: 25.5%;
|
|
}
|
|
.airQuality>.title{
|
|
width: 100%;
|
|
height: 19%;
|
|
background-image: url(../../img/moduleTitle.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
}
|
|
.airQuality>.title>span{
|
|
align-self: center;
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
text-indent: 45px;
|
|
}
|
|
|
|
.airQuality>.content{
|
|
width: 100%;
|
|
height: 81%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.airQuality>.content>.total{
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.airQuality>.content>.warn{
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.warn-top{
|
|
margin-top: 3%;
|
|
color: #FFFFFF;
|
|
font-size: 9px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.warn-top-commonality{
|
|
display: flex;
|
|
width: 19%;
|
|
border: 1px solid #6ab0da;
|
|
border-radius: 7px;
|
|
justify-content: space-around;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fireAlarm{
|
|
width: 100%;
|
|
height: 20.5%;
|
|
}
|
|
.fireAlarm>.title{
|
|
width: 100%;
|
|
height: 23%;
|
|
background-image: url(../../img/moduleTitle.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
}
|
|
.fireAlarm>.title>span{
|
|
align-self: center;
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
text-indent: 45px;
|
|
}
|
|
|
|
.fireAlarm>.content{
|
|
width: 100%;
|
|
height: 75%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.fireAlarm>.content>.total{
|
|
width: 26%;
|
|
background-image: url(../../img/index/total.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 85%;
|
|
background-position: 0 100%;
|
|
}
|
|
.fireAlarm>.content>.open{
|
|
width: 20%;
|
|
background-image: url(../../img/index/open.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 60%;
|
|
background-position: 0 100%;
|
|
display: flex;
|
|
}
|
|
.fireAlarm>.content>.close{
|
|
width: 20%;
|
|
background-image: url(../../img/index/close.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 60%;
|
|
background-position: 0 100%;
|
|
display: flex;
|
|
}
|
|
.fireAlarm>.content>.warn{
|
|
width: 20%;
|
|
background-image: url(../../img/index/warn.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 60%;
|
|
background-position: 0 100%;
|
|
display: flex;
|
|
}
|
|
.fireAlarm>.content div{
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
.fireAlarm>.content .totalNum{
|
|
margin-top: 18%;
|
|
}
|
|
.fireAlarm>.content .openNum{
|
|
width: 100%;
|
|
text-align: center;
|
|
align-self: center;
|
|
}
|
|
.fireAlarm>.content .closeNum{
|
|
width: 100%;
|
|
text-align: center;
|
|
align-self: center;
|
|
}
|
|
.fireAlarm>.content .warnNum{
|
|
width: 100%;
|
|
text-align: center;
|
|
align-self: center;
|
|
}
|
|
|
|
|
|
|
|
.safeguard{
|
|
width: 100%;
|
|
height: 20.5%;
|
|
margin-top: 4%;
|
|
}
|
|
.safeguard>.title{
|
|
width: 100%;
|
|
height: 23%;
|
|
background-image: url(../../img/moduleTitle.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
}
|
|
.safeguard>.title>span{
|
|
align-self: center;
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
text-indent: 45px;
|
|
}
|
|
|
|
.safeguard>.content{
|
|
width: 100%;
|
|
height: 75%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.safeguard>.content>.total{
|
|
width: 26%;
|
|
background-image: url(../../img/index/total.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 85%;
|
|
background-position: 0 100%;
|
|
}
|
|
.safeguard>.content>.open{
|
|
width: 20%;
|
|
background-image: url(../../img/index/open.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 60%;
|
|
background-position: 0 100%;
|
|
display: flex;
|
|
}
|
|
.safeguard>.content>.close{
|
|
width: 20%;
|
|
background-image: url(../../img/index/close.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 60%;
|
|
background-position: 0 100%;
|
|
display: flex;
|
|
}
|
|
.safeguard>.content>.warn{
|
|
width: 20%;
|
|
background-image: url(../../img/index/warn.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 60%;
|
|
background-position: 0 100%;
|
|
display: flex;
|
|
}
|
|
.safeguard>.content div{
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
.safeguard>.content .totalNum{
|
|
margin-top: 18%;
|
|
}
|
|
.safeguard>.content .openNum{
|
|
width: 100%;
|
|
text-align: center;
|
|
align-self: center;
|
|
}
|
|
.safeguard>.content .closeNum{
|
|
width: 100%;
|
|
text-align: center;
|
|
align-self: center;
|
|
}
|
|
.safeguard>.content .warnNum{
|
|
width: 100%;
|
|
text-align: center;
|
|
align-self: center;
|
|
}
|
|
|
|
.barrierGate{
|
|
width: 99.5%;
|
|
height: 23%;
|
|
margin-top: 4%;
|
|
}
|
|
.barrierGate>.title{
|
|
width: 100%;
|
|
height: 21.5%;
|
|
background-image: url(../../img/moduleTitle.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
}
|
|
.barrierGate>.title>span{
|
|
align-self: center;
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
text-indent: 45px;
|
|
}
|
|
.barrierGate>.title>div{
|
|
background-image: url(../../img/details.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 85% 100%;
|
|
width: 5%;
|
|
height: 58%;
|
|
margin-left: 1%;
|
|
margin-top: 2%;
|
|
cursor: pointer;
|
|
}
|
|
.barrierGate>#chart{
|
|
width: 100%;
|
|
height: 38.2%;
|
|
}
|
|
.barrierGate>.table{
|
|
margin-top: 2%;
|
|
width: 100%;
|
|
height: 93%;
|
|
overflow: auto;
|
|
}
|
|
.barrierGate>.table>div:nth-child(n + 2){
|
|
width: 100%;
|
|
margin-top: 1%;
|
|
background: url("../../img/index/standardColumn.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 23.5%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.barrierGate>.table>div:nth-child(n + 2):hover{
|
|
background: url("../../img/index/standardColumnHover.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.barrierGate>.table>div:nth-child(n + 2)>span{
|
|
color: rgba(255,255,255,0.8);
|
|
align-self: center;
|
|
width: 33.3%;
|
|
text-align: center;
|
|
}
|
|
|
|
.barrierGate>.table>.tableList{
|
|
width: 100%;
|
|
background: url("../../img/index/title.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto; /* 设置左右外边距为自动 */
|
|
height: 21.5%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.barrierGate>.table>.tableList>span{
|
|
color: rgba(255,255,255,0.8);
|
|
align-self: center;
|
|
width: 33.3%;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
/*对垂直流动条有效*/
|
|
height: 10px;
|
|
/*对水平流动条有效*/
|
|
} |