达成率/负荷率页面效果实现
2019-01-03 本文已影响0人
懿小诺
根据一个数值展示对应的高度及负荷率
<div class="diapatch-machine-load sjds-div-hm-vb" ng-bind="value.LoadRate+'%'" style="height:{{value.LoadRate}}%;flex:1"
ng-class="{'machine-status-green':value.LoadRate<=90,'machine-status-yellow':value.LoadRate>90&&value.LoadRate<=100,'machine-status-red':value.LoadRate>100}"> </div>
----css----
.machine-status-green{
color: #3f873d;
background: -webkit-linear-gradient(top, #c1e8c0, #fff);
}
效果
