fs-uni-template/components/fs-timeline/fs-timeline.vue

<template>
	<view class="fs-timeline">
		<view class="fs-timeline-item" v-for="(item, index) in options" :key="index">
			<view class="fs-dot-box">
				<slot name="dot" :item="item" :index="index">
					<view
						class="fs-dot"
						:class="index === 0 ? 'bg-' + activeColorType : ''"
						:style="{ backgroundColor: index === 0 ? activeColor : color }"
					></view>
				</slot>
			</view>
			<view class="fs-timeline-line"></view>
			<view class="content"><slot :item="item" :index="index"></slot></view>
		</view>
	</view>
</template>

<script>
/**
 * 时间轴组件
 * @description 时间轴组件
 * @property {Array} options 选项列表
 * @property {String} color 颜色
 * @property {String} activeColor 高亮颜色
 * @property {String} activeColorType = [primary | danger | warning | info | success] 高亮颜色类型
 */
export default {
	name: 'fs-timeline'
}
</script>

<script setup>
const props = defineProps({
	options: Array,
	color: {
		type: String,
		default: '#969799'
	},
	activeColor: String,
	activeColorType: {
		type: String,
		default: 'primary',
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
		}
	}
})
</script>

<style lang="scss" scoped>
.fs-timeline {
	padding-left: 40rpx;

	&-line {
		position: absolute;
		top: 0;
		left: -20rpx;
		width: 2rpx;
		height: 100%;
		background-color: #ebedf0;
	}

	&-item {
		position: relative;

		&:last-child {
			.timeline-line {
				display: none;
			}
		}
	}
}
.fs-dot-box {
	position: absolute;
	left: -20rpx;
	top: 30rpx;
	background-color: #fff;
	z-index: 10;
	transform: translateX(-50%);
}
.fs-dot {
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	// background-color: #969799;
}
.content {
	padding: var(--gutter) 0;
}
</style>