psy_web_share/components/ProgressPlus/ProgressPlus.vue

<template>
	<view class="progress-plus" style="width: 100%">
		<view class="progress-box">
			<view class="gray"></view>
			<view class="colors" :style="setColor()"></view>
			<view class="icon icon1"></view>
			<view class="icon icon2"></view>
			<view class="icon icon3"></view>
			<view class="icon icon4"></view>
		</view>
		<span style="display: inline-block;padding-left: 5px" :style="{color:color}">{{ score }}</span>
	</view>
</template>

<script>
	export default {
		name: 'ProgressPlus',
		props: {
			color: {
				type: String,
				default: 'green'
			},
			percent: {
				type: Number,
				default: 0
			},
			score: {
				type: Number,
				default: 0
			},
			width: {
				type: Number,
				default: 200
			}
		},
		methods: {
			setColor() {
				return {
					'background-color': this.color,
					'left': (this.percent - 100) + '%'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.progress-plus {
		display: flex;
		align-items: center;

		&>span {
			width: 48rpx;
			font-size: 24rpx;
		}

		.progress-box {
			display: inline-block;
			position: relative;
			overflow: hidden;
			flex: 1;
			border-radius: 8rpx;

			&>view {
				width: 100%;
				height: 12rpx;
			}

			.gray {
				background-color: #E4EAF0;
			}

			.colors {
				/*background-color: green;*/
				position: absolute;
				top: 0;
				transition: left 1s;
			}

			.icon {
				position: absolute;
				width: 2px;
				bottom: 0;
				top: 0;
				background-color: #ffffff;

				&.icon1 {
					left: 20%;
				}

				&.icon2 {
					left: 40%;
				}

				&.icon3 {
					left: 60%;
				}

				&.icon4 {
					left: 80%;
				}
			}
		}
	}
</style>