228 lines
3.3 KiB
SCSS
228 lines
3.3 KiB
SCSS
|
*{
|
||
|
padding:0px;
|
||
|
margin:0px;
|
||
|
}
|
||
|
|
||
|
body{
|
||
|
background:#170025;
|
||
|
overflow:hidden;
|
||
|
}
|
||
|
.header{
|
||
|
font-size:2rem;
|
||
|
padding:0px 2rem;
|
||
|
background:linear-gradient(#588ac8,#305396);
|
||
|
color:#fff;
|
||
|
height:5rem;
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
align-items: center;
|
||
|
.close-btn{
|
||
|
font-size: 16px;
|
||
|
border: 2px solid #548ac6;
|
||
|
padding: 8px;
|
||
|
cursor: pointer;
|
||
|
color: #ddd;
|
||
|
border-radius: 3px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.table-header{
|
||
|
display:flex;
|
||
|
padding:0px 2rem;
|
||
|
background:#548ac6;
|
||
|
font-size:1.6rem;
|
||
|
color:#fff;
|
||
|
height:4rem;
|
||
|
line-height:4rem
|
||
|
}
|
||
|
|
||
|
.warning-item{
|
||
|
padding:0 2rem;
|
||
|
box-sizing: border-box;
|
||
|
display:flex;
|
||
|
color:#fff;
|
||
|
font-size:1.4rem;
|
||
|
/*background:#525b79;*/
|
||
|
border-bottom:1px solid #030b23;
|
||
|
align-items: center;
|
||
|
box-sizing: border-box;
|
||
|
|
||
|
}
|
||
|
|
||
|
.unhanle {
|
||
|
color:rgb(255,0,0);
|
||
|
}
|
||
|
|
||
|
.handling{
|
||
|
color:rgba(255, 186, 0, 0.8);
|
||
|
}
|
||
|
|
||
|
|
||
|
.search{
|
||
|
position: absolute;
|
||
|
z-index: 100;
|
||
|
background: rgba(255,255,255,1);
|
||
|
color: black;
|
||
|
font-size: 0.8rem;
|
||
|
width:250px;
|
||
|
padding: 5px;
|
||
|
line-height: 1rem;
|
||
|
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.search .search-header{
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
height: 1.5rem;
|
||
|
align-items: center;
|
||
|
border-bottom: 1px solid #ccc;
|
||
|
}
|
||
|
|
||
|
.search .search-header i{
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.search .search-body{
|
||
|
padding: 5px;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.search .search-body .key{
|
||
|
width: 100%;
|
||
|
padding: 5px;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
.search .search-body .pr-container{
|
||
|
margin: 10px 0px;
|
||
|
min-height: 100px;
|
||
|
max-height: 300px;
|
||
|
font-size: 0.8rem;
|
||
|
overflow-y: scroll;
|
||
|
width: 265px;
|
||
|
overflow-x: hidden;
|
||
|
box-sizing: content-box;
|
||
|
}
|
||
|
|
||
|
.pr{
|
||
|
white-space: nowrap;
|
||
|
text-overflow: ellipsis;
|
||
|
overflow: hidden;
|
||
|
height: 1.2rem;
|
||
|
cursor: pointer;
|
||
|
color: #333;
|
||
|
}
|
||
|
|
||
|
.all-alarm-btn{
|
||
|
font-size: 0.8rem;
|
||
|
color: #444;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
@keyframes newWarningBackground {
|
||
|
0% {background: #525b79}
|
||
|
50% {background: orange}
|
||
|
100% {background: #525b79}
|
||
|
}
|
||
|
|
||
|
.new-warning-item{
|
||
|
animation:newWarningBackground 1s 5;
|
||
|
-webkit-animation:newWarningBackground 1s 5; /* Safari and Chrome */
|
||
|
|
||
|
animation-direction:alternate;
|
||
|
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
|
||
|
}
|
||
|
.always-warning-item {
|
||
|
animation:newWarningBackground 1s 5;
|
||
|
animation-direction:alternate;
|
||
|
animation-iteration-count: infinite;
|
||
|
}
|
||
|
|
||
|
.table-body{
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
#warning-container{
|
||
|
width:100%;
|
||
|
}
|
||
|
|
||
|
.power-room-name{
|
||
|
width:15%;
|
||
|
}
|
||
|
|
||
|
.DDH{
|
||
|
width: 8%;
|
||
|
}
|
||
|
|
||
|
.alarm-desc{
|
||
|
width:40%;
|
||
|
}
|
||
|
|
||
|
.alarm-value{
|
||
|
width: 10%;
|
||
|
}
|
||
|
|
||
|
.alarm-time{
|
||
|
width:12%;
|
||
|
}
|
||
|
|
||
|
.alarm-type{
|
||
|
width:5%;
|
||
|
}
|
||
|
|
||
|
.handle-state{
|
||
|
width:10%;
|
||
|
}
|
||
|
.audio-privilege-selector, .cancel-audio-confirm{
|
||
|
top:0px;
|
||
|
left:0px;
|
||
|
position: fixed;
|
||
|
z-index:100;
|
||
|
width:100%;
|
||
|
height:100%;
|
||
|
background: rgba(0, 0, 0, 0.6);
|
||
|
overflow: auto;
|
||
|
.content{
|
||
|
width:200px;
|
||
|
margin: 0% auto;
|
||
|
background: white;
|
||
|
text-align: center;
|
||
|
border-radius: 5px;
|
||
|
p {
|
||
|
padding: 20px 5px;
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
}
|
||
|
.btn{
|
||
|
display: inline-block;
|
||
|
height: 40px;
|
||
|
padding: 10px;
|
||
|
border-top: 1px solid #ddd;
|
||
|
width: 100%;
|
||
|
box-sizing: border-box;
|
||
|
font-size: 14px;
|
||
|
color: #e9be2b;
|
||
|
}
|
||
|
button{
|
||
|
width:100px;
|
||
|
height:32px;
|
||
|
border: none;
|
||
|
outline: none;
|
||
|
background: #e9be2b;
|
||
|
color: white;
|
||
|
cursor: pointer;
|
||
|
|
||
|
&.cancel{
|
||
|
background: #ccc;
|
||
|
color:black;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.cancel-audio-confirm {
|
||
|
display: none;
|
||
|
box-sizing: border-box;
|
||
|
|
||
|
|
||
|
}
|