{{}}
{{}}%
export default{
data(){
return{
progressBox:[{province:'山西省',percent:45.09*2,activeColor:"#00A4E0",ratio:'45.09',number:'10080'},
{province:'浙江省',percent:36*2,activeColor:"#05E3E5",ratio:'36',number:'10081'},
{province:'江苏省',percent:20*2,activeColor:"#FFDB39",ratio:'20',number:'10082'},
{province:'内蒙古',percent:30*2,activeColor:"#FF9A78",ratio:'30',number:'10083'},
{province:'陕西省',percent:24*2,activeColor:"#F155B1",ratio:'24',number:'10086'}]
}
},
mounted() {
// 进度条写文字
const list = (this.$.$('uni-progress-inner-bar'));
((item,index)=>{
// 创建新元素节点标签
let spans = ('span');
// 添加样式类名
("progressBoxItem");
// 将元素插入到父级内
(spans);
// 输出数据
= [index].number;
})
}
}
page{
width: 100%;
background: #F6F6F6;
font-family: Microsoft YaHei;
}
.touristPage{
padding:50upx 24upx;
padding-top: 0upx;
}
.content{
width: 100%;
background: #FFFFFF;
box-shadow: 0upx 2upx 9upx 0upx rgba(0, 0, 0, 0.1);
border-radius: 20upx;
}
.progress{
width: 472upx;
height: 38upx;
border-radius: 19upx;
margin:0upx 20upx 0upx 20upx;
}
.progress /deep/ .uni-progress-bar .uni-progress-inner-bar{
border-radius: 19upx;
position: relative;
}
.progressItem{
font-size: 24upx;
font-weight: bold;
color: #0F0F10;
display: flex;
}
.progressItem:not(:last-child){
margin-bottom: 16upx;
}
.progressBox{
padding:24upx 15upx;
}
.progressBox /deep/ .uni-progress-inner-bar{
display: flex;
align-items: center;
justify-content: flex-end;
color: #FFFFFF;
}
.progressBox /deep/ .uni-progress-inner-bar .progressBoxItem{
margin-right: 30upx;
font-size: 22upx;
}
标签：province,uniapp,ratio,progressBox,进度条,percent,number,progress
来源： /document_write/article/details/110704512