| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- @import "@/assets/styles/common.scss";
- .host-analysis{
- margin: -10px;
- .top-right-btn{
- position: absolute;
- z-index: 111;
- right:15px;
- top:14px;
- }
- .tab-content{
- @include flexBetween();
- width: 100%;
- flex-wrap: wrap;
- .t-c-row{
- width: 48%;
- margin-bottom: 20px;
- .top-title{
- font-weight: bolder;
- margin-bottom:10px;
- padding:10px ;
- color:#666;
- font-size: 14px;
- }
- }
- }
- .sub-tip{
- text-align: center;
- font-size: 12px;
- color:#888;
- @include flexCenter;
- .tip-alarm{
- width: 20px;
- height:10px;
- background: #409EFF;
- display: inline-block;
- margin:0 5px;
- border-radius: 5px;
- }
- .tip-title{
- @extend .tip-alarm;
- background: #e6a23c;
- }
- }
- .top-style{
- margin:10px 0;
- @include flexStart();
- cursor: pointer;
- &:last-child{
- margin-bottom:0;
- }
- .index{
- width: 20px;
- font-size: 12px;
- text-align: center;
- line-height: 18px;
- display: inline-block;
- background: #A1B3D2;
- border-radius: 100%;
- color:white;
- margin-right:10px;
- }
- .progress-row{
- width: 100%;
- color: #6f7988;
- font-size: 12px;
- .progress-bg{
- background: #A1B3D280;
- height:12px;
- width: 100%;
- border-radius: 6px;
- margin-top:5px;
- @include flexStart;
- font-size: 12px;
- .progress-bar{
- height:12px;
- border-radius: 6px;
- background: #A1B3D2;
- margin-right:5px;
- transition: all .3s;
- }
- }
- .row-flex{
- @include flexStart;
- margin-top:5px;
- }
- .progress-alarm{
- width: 48%;
- .alarms{
- background: #409EFF;
- line-height:12px;
- font-size: 12px;
- color:white;
- border-radius: 6px;
- transition: all .3s;
- @include flexCenter;
- }
- .time{
- background: #e6a23c;
- @extend .alarms;
- }
- }
- }
- }
- }
|