front-end/ghsApp/src/components/app-step.vue

<template>
	<div class="app-step">
		<div class="step-list" :class="{'active' : index == i || index > i}" v-for="(item, i) in data" :key="i">
			<div class="step-num">{{ i + 1 }}</div>
			<div class="step-text">{{ item.text }}</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'app-step',
	props: {
		data: {
			type: Array,
			default: () => {
				return [
					{
						text: '创建头像'
					},
					{
						text: '生成手机号'
					},
					{
						text: '关注公众号'
					}
				]
			}
		},
		// 当前步骤
		index: {
			type: Number,
			default: 0
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-step {
		@include disFlex(center, space-between);
		width: 100%;
		.step-list {
			position: relative;
			flex: 1;
			&.active {
				.step-num {
					color: #fff;
					background-color: $mainColor;
				}
				.step-text {
					color: $mainColor;
				}
			}
			.step-num {
				width: 32upx;
				height: 32upx;
				line-height: 30upx;
				text-align: center;
				border-radius: 50%;
				color: $fontColor3;
				background-color: #eeeeec;
				margin: 0 auto 14upx;
			}
			.step-text {
                color: $fontColor3;
                text-align: center;
			}
			&::before {
				position: absolute;
				left: calc(50% + 16upx);
				top: 16upx;
				display: inline-block;
				content: '';
				width: 100%;
				height: 2upx;
				background-color: #eeeeec;
			}
		    &:last-child::before {
                width: 0;
		    }
		}
	}
</style>