自适应动画的步骤条CSS3

<template>
	<view class="step_box">
		<view class="top" style="margin-bottom: 20rpx">
			<text class="item" v-for="(item,index) in list" :key="index">{{item.label}}</text>
		</view>
		<view class="progress">
			<view class="dot_box" :class="{active: handleIndex(index)}" v-for="(item,index) in list" :key="index">
				<view class="dot" :class="{active: current >= index}">

				</view>
			</view>

		</view>
		<view class="top">
			<text class="item" v-for="(item,index) in list" :key="index">{{item.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "steps",
		props: {
			current: {

				type: Number | String,
				default: 0

			}
		},
		data() {
			return {
				list: [{
					text: '打开空仓',
					label: '第一步'
				}, {
					text: '归还旧电池',
					label: '第二步'
				}, {
					text: '更新新电池',
					label: '第三步'
				}, {
					text: '完成换电',
					label: '第四步'
				}]
			};
		},
		methods: {
			handleIndex(i) {

				let cur = this.current
				return cur === 0 ? false : cur - 1 >= i;

			}
		}
	}
</script>

<style lang="scss" scoped>
	.step_box {
		width: 100%;
		padding: 40rpx 0;

		.progress {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;

			.dot_box {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;


			&:not(:last-child)::after {
				content: '';
				width: 100%;
				height: 16rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: calc(50% - 15rpx);
				background-color: #D8D8D8;
				z-index: 0;
			}
			
			&:first-child::after {
				content: '';
				width: 100%;
				height: 16rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: calc(50% - 15rpx);
				background-color: #D8D8D8;
			}
				
				&:not(:last-child)::before {
					content: '';
					width: 0%;
					height: 16rpx;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: calc(50% - 15rpx);
					// background-color: #D8D8D8;
					z-index: 1;
					transition: .5s;
				}
				
				

				
			
				&.active {
					&::before {
            width:100%;
						background-color: #37AA4A;
					}
					
				}
				
				

				.dot {
					width: 38rpx;
					height: 38rpx;
					border-radius: 92px;
					background: #D8D8D8;
					position: relative;
					z-index: 4;




					&.active {
						transition-delay: 0.5s;
						background: #37AA4A;
					}
				}
			}

		}

		.top {

			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-weight: bold;
				line-height: normal;
				letter-spacing: 0em;

				font-feature-settings: "kern" on;
				color: #3D3D3D;
			}
		}
	}
</style>