xunjian_app/components/c-yuan/index.vue

<template>
	<view class="content">
		<view class="circleprogress">
			<view class="progresstext">{{progresstext}}%</view>
			<view class="wrapper left">
				<view class="leftprogress" :style="{ transform: leftprogress}"></view>
			</view>
			<view class="wrapper right">
				<view class="rightprogress" :style="{ transform: rightprogress}"></view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			percent: {
				type: Number,
				default: 50
			}
		},
		data() {
			return {
				leftprogress: 'rotate(-45deg)',
				rightprogress: 'rotate(45deg)',
				progresstext: 30
			}
		},
		created() {
			let percent = Math.round(this.percent * 100)
			this.sliderchange(percent)
		},
		methods: {
			sliderchange(event) {
				var val = event
				this.progresstext = val;
				var deg = val / 100 * 360;
				if (deg <= 180) {
					this.rightprogress = 'rotate(' + (45 + deg) + 'deg)'
					this.leftprogress = 'rotate(' + (-45) + 'deg)'
				} else {
					this.rightprogress = 'rotate(' + (45 + 180) + 'deg)'
					this.leftprogress = 'rotate(' + (-45 + (deg - 180)) + 'deg)'
				}
			}
		}
	}
</script>

<style scoped>
	.circleprogress {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;


	}

	.content {
		box-sizing: content-box !important;
	}

	.progresstext {
		position: absolute;
		font-size: 40rpx;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		color: #4A8BFF;
	}

	.wrapper {
		width: 100rpx;
		height: 200rpx;
		overflow: hidden;
	}

	.leftprogress,
	.rightprogress {
		width: 160rpx;
		height: 160rpx;
		border: 20rpx solid #E6E6E6;
		border-bottom: 20rpx solid #4A8BFF;
		border-radius: 50%;

	}

	.leftprogress {
		border-right: 20rpx solid #4A8BFF;
		box-sizing: initial;
	}

	.rightprogress {
		border-left: 20rpx solid #4A8BFF;
		margin-left: -100rpx;
		box-sizing: initial;
	}

	.section {
		width: 80%;
		margin-top: 50rpx;
	}
</style>