需求:1. 当前温度显示绿色 ,温度数值居中显示
2.当前温度大于设定温度显示橙色 ,温度数值居中显示
<div class="progress" >
<div class="progress-bar" [style.background-color]="progress.temp1>100 ? '#ff8c00' : '#25cd6b'" role="progressbar" aria-valuenow="37"
aria-valuemin="0" aria-valuemax="37" [ngStyle]="{'width':progress.temp1+'%'}">
//[ngStyle]、 [style.background-color]、[style.margin-left] 使用的是Angular框架组件 如果你使用的不是Angular 可以灵活替换其它框架组件
<div [style.margin-left]="progress.temp1>100 ? 0 : progress.temp1/10+'%'" > {{selectedSetting.cntemp}}℃</div>
</div>
</div>
//定义一个变量progress.temp1赋值温度计算 的百分比
this.progress.temp1 = this.tempPercent(this.selectedSetting.cntemp,this.meTemp );
//计算温度百分比方法体 val当前温度值 total 设定温度值
tempPercent(val,total){
//计算val是total的百分比多少
let c = Math.round(val / total * 10000) / 100;
return c>100?101:c
}
.progress{
background-color:#253139;
height:20px;
line-height:20px;
border-radius: 10px;
border: 0 !important;
margin-bottom:5px;
width:250px
}
.progress-bar{
background-color: #25cd6b;/* 设置默认背景绿色*/
height:20px;
line-height:20px;
border-radius: 10px;
color:#fff;
}