[组件库]基于AntDesign中a-steps步骤条封装和自定义样式

eg

code

<template>
	<div>
		<a-steps
			progress-dot
			:current="1"
			direction="vertical"
		>
			<a-step v-for="(item, index) in stepData" :key="index" :title="item.datetime">
				<template #description>
					<div class="step-box">
						<span class="name">{{item.name}}</span>
						<span class="job">{{item.job}}</span>
					</div>
				</template>
			</a-step>
		</a-steps>
	</div>
</template>


<script setup>
import { ref } from 'vue'

const stepData = ref([
	{
		datetime: '2023/10/14 12:00:00',
		name: '张三(签收)',
		job: 'xxx'
	},
	{
		datetime: '2023/10/14 12:00:00',
		name: '张三(签收)',
		job: 'xxx'
	},
	{
		datetime: '2023/10/14 12:00:00',
		name: '张三(签收)',
		job: 'xxx'
	},
	{
		datetime: '2023/10/14 12:00:00',
		name: '张三(签收)',
		job: 'xxx'
	},
	{
		datetime: '2023/10/14 12:00:00',
		name: '张三(签收)',
		job: 'xxx'
	},
])
</script>

<style lang="scss" scoped>
.step-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	.name {
		font-family: PingFang SC;
		font-weight: 600;
		font-size: 14px;
		line-height: 22px;
		color: var(--dark-type-900, rgba(255, 255, 255, 1));
	}
	.job {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 12px;
		line-height: 20px;
		color: var(--dark-type-700, rgba(255, 255, 255, 0.5));
	}
}
.ant-steps-icon-dot {
	background-color: #32eef0 !important;
}
.ant-steps-item-title {
	font-family: PingFang SC;
	font-weight: 400 !important;
	font-size: 12px !important;
	line-height: 20px !important;
	color: var(--dark-type-700, rgba(255, 255, 255, 0.5)) !important;
}
.ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-tail::after {
	background-color: #32eef0 !important; /* 修改已完成步骤的连接线颜色 */
}
</style>