Ci2Order.vue/App/components/z-timeline-item/z-timeline-item.vue

<template>
	<view>
		<view class="z-time-item flex-n ml-10" :class="align=='center'?'fac':''">
			<view class="dot" :style="{background:bgColor,border: '5rpx solid '+borderColor}"></view>
			<view class="content ml-40 flex-1">
				<view class="timestamp" v-if="timestamp">{{timestamp}}</view>
				<slot></slot>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'z-timeline',
		props: {
			bgColor: {
				type: String,
				default: '#2C8BFF'
			},
			borderColor: {
				type: String,
				default: '#D5E8FF'
			},
			timestamp: String
		},
		data() {
			return {
				align: 'center'
			}
		},
		mounted() {
			uni.$on('timeline_align', (data) => {
				this.align = data;
			})

		}
	}
</script>

<style scoped lang="scss">
	.z-time-item {
		position: relative;
		width: 100%;
		.dot {
			position: absolute;
			z-index: 100;
			width: 13rpx;
			height: 13rpx;
			border-radius: 50%;
		}

		.content {
			.timestamp {
				color: #888888;
				font-size: 24rpx;
			}
		}
	}
</style>