mes_mobile/components/progressBar.vue

<template>
	<view>
		<view class="line-total" :style="'width: ' + (val / total * 100) + '%'">
			<text class="line-data">
				{{val}}%
			</text>
		</view>
		<view style="position: relative;bottom: 13px;">			
			<view class="line-base"></view>
			<view class="line-blue" :style="'width: ' + (val / total * 100) + '%'"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'progressBar',
	data() {
		return {
		}
	},
	props: {
	    // 标题
	    title: {
	        type: [String, Number],
	        default: ''
	    },
	    total: {
			type: [Number],
			default: 0
		},
		val: {
			type: [Number],
			default: 0
		}
	},
	computed: {
		
	},
	methods: {
		
	}
}
</script>

<style scoped lang="scss">
.line-total {
	color: #67C23A;
	text-align: right;
	font-size: 25rpx;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	position: relative;
	z-index: 99;

}
.line-data{
	color: $uni-text-color-inverse;
	padding: 1px 5px;
	border-radius: 9px;
	border: 1px solid $uni-text-color-inverse;
	background: var(--color-warning, #67C23A);
	width: 30px;
	display: inline-block;
	text-align: center;
	font-size: 11px;
}
.line-base {
	position: absolute;
	width: 100%;
	height: 6px;
	border-radius: 8px;
	background: rgba(128, 136, 142, 0.40);
}
.line-blue {
	position: absolute;
	width: 50%;
	height: 6px;
	border-radius: 10px;
	background: #67C23A;
}
.line-val {
	display: flex;
	justify-content: space-between;
	color: #7e7e7e;
	font-size: 25rpx;
	font-weight: 50px;
	margin-top: 12rpx;
}
</style>