标签：province uniapp ratio progressBox 进度条 percent number progress

<template>
	 <view class="touristPage">
		 <!-- 来源区域统计 -->
			 <view class="content">
				 <view class="progressBox" ref="progressBox">
					 <view class="progressItem" v-for="(item,index) in progressBox" :key="index">
						 <view>{{item.province}}</view>
						 <progress class="progress"  :percent="item.percent" :activeColor="item.activeColor" active stroke-width="19" backgroundColor="none"/>
						 <view>{{item.ratio}}%</view>
					 </view>
				 </view>
			 </view>
	 </view>
</template>

<script>
	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 = Array.from(this.$refs.progressBox.$el.getElementsByClassName('uni-progress-inner-bar'));
			list.forEach((item,index)=>{
				// 创建新元素节点<span>标签
				let spans = document.createElement('span');
				// 添加样式类名
				spans.classList.add("progressBoxItem");
				// 将元素插入到父级内
				item.appendChild(spans);
				// 输出数据
				spans.innerHTML = this.progressBox[index].number;
			})
		   }
		}
</script>

<style scoped>
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;
}
</style>
  
  

标签：province,uniapp,ratio,progressBox,进度条,percent,number,progress
来源： https://blog.csdn.net/document_write/article/details/110704512

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。