增加步骤条组件

components/my-components/my-step.vue

@@ -0,0 +1,90 @@
+<template>
+	<view>
+		<view class="u-flex  u-p-b-28 item" :class="{'active':active==index}" v-for="(item,index) in list" :key="index">
+			<view class="left ">
+				<view class="circle"></view>
+				<view class="left-line" :class="{hide:index==list.length-1}"></view>
+			</view>
+			<view class="u-p-l-12  ">
+				<view class="u-font-20">{{item[titleKey]||''}}</view>
+				<view class="u-font-24 u-m-t-2">{{item[contentKey]||''}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	const props = defineProps({
+		active: {
+			type: [String, Number],
+			default: 0
+		},
+		list: {
+			type: Array,
+			default: () => []
+		},
+		titleKey: {
+			type: String,
+			default: 'title'
+		},
+		contentKey: {
+			type: String,
+			default: 'content'
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	$leftWidth: 12rpx;
+	$circleSize: 12rpx;
+	$lineWidth: 2rpx;
+	$circleLeft:0;
+	$lineLeft: calc($circleSize / 2 - $lineWidth / 2 );
+
+	.item {
+		color: #999;
+		position: relative;
+
+		.left {
+			height: 100%;
+			width: $leftWidth;
+		}
+
+		&.active {
+			color: $my-main-color;
+
+			.circle {
+				background: $my-main-color;
+			}
+
+			.left-line {
+				background-color: $my-main-color;
+			}
+		}
+	}
+
+	.circle {
+		position: absolute;
+		top: 6rpx;
+		left: $circleLeft;
+		width: $circleSize;
+		height: $circleSize;
+		border-radius: 50%;
+		background: #999;
+		margin: auto;
+	}
+
+	.left-line {
+		left: $lineLeft;
+		position: absolute;
+		bottom: 4rpx;
+		top: calc($circleSize + 10rpx);
+		width: $lineWidth;
+		background-color: #999;
+		border-radius: $lineWidth;
+	}
+
+	.hide {
+		opacity: 0;
+	}
+</style>