1,progress标签的样式设置比较不好找:
饿了么的mintUI的mt-progress不能设置max,坑不坑。
<progress class="progressClass" :value="item.pointTotal" :max="buildMax"></progress>
.preventCons progress{
width: 51%;
border-radius: 43px;
/*color:#5E72E4;*/据说是ie兼容
/*background: #5E72E4;*/据说是个什么兼容
}
/* 表示总长度背景色 */
.preventCons progress::-webkit-progress-bar{
background-color: #ffffff;
height: 26px;
border-radius: 43px;
}
/* 表示已完成进度背景色 */
.preventCons progress::-webkit-progress-value{
height: 10px;
background: #5E72E4;
border-radius: 43px;
padding-top: 6px;
}
/* 表示已完成进度背景色 */
.preventCons progress::-moz-progress-bar{
height: 10px;
background: #5E72E4;
border-radius: 43px;
}
2,实现progress后紧跟数字长度样式:
数字部分相对进度条长度偏移left,父元素div为relative。数字部分为absolute,progress长度为100%,确保定位以div起始位置为标准偏移。