zhuoxin-user-uniapp/components/fxyk-progress/fxyk-progress.vue

<template>
	<view class="progress" :style="bgColor">
		<view v-if="wcDay" class="progress-item" :style="itemWidth">{{ wcDay }}天</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 项目情况 1 已完成 2 进行中 3已终止
			status: {
				type: Number,
				default: 1
			},
			// 已完成工作天数
			wcDay: {
				type: Number,
				default: 0
			},
			// 额定项目天数
			edDay: {
				type: Number,
				default: 30
			}
		},
		computed: {
			bgColor() {
				if ( this.status === 2  ){
					return {'background-color': '#D4D4D4'}
				} else if ( this.status === 3 ) {
					return {'background-color': '#FF0014'}
				}
			},
			itemWidth() {
				return {'width': this.wcDay/this.edDay*100+'%' }
			}
		} 
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
	}
	.progress {
		height: 48rpx;
		border-radius: 21rpx;
		background-color: #D4D4D4;
		.progress-item {
			background: #007aff;
			height: 48rpx;
			border-radius: 21rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			text-align: center;
			line-height: 48rpx;
			color: #FDFCFC;
		}
	}
</style>