calc计算进度条时出现的错误
如下图的写法第一句的时候报错了,第二句的时候可以显示出需要的效果
calc里面的内容是计算出来的,precent2,precent分别是进度条的当前值和总值。
效果如下图
代码如下HTML
<div class="zhenProgress">
<div class="bar"
:style="`--precent2: ${item.grade};--precent: ${maxBusiness}`"></div>
</div>
.zhenProgress {
width: 200px;
.bar {
width: 90%;
background-color: rgba(232, 237, 250, 0.9);
}
.bar::before {
display: block;
counter-reset: progress var(--precent2);
content: counter(progress);
// width: calc(100% * var(--precent2) / var(--precent));
width: ~"calc(100% * var(--precent2) / var(--precent))";
color: #fff;
background-color: rgba(0, 193, 255, 1);
text-align: center;
white-space: nowrap;
}
}
查找资料得知在less中计算操作不一样,资料来源calc的~