qwl-wechat-h5/components/mix-timeline/mix-timeline.vue

<template>
	<view class="mix-timeline">
		<view class="cell" v-for="(item, index) in list" :key="index">
			<view class="left column center">
				<text class="time">{{ item.time | date('H:i') }}</text>
				<text class="date">{{ item.time | date('m/d') }}</text>
			</view>
			<view class="cen center">
				<view class="circle center"></view>
			</view>
			<view class="right column">
				<text class="title">{{ item.title }}</text>
				<text v-if="item.tip" class="tip">{{ item.tip }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 时间轴
	 * {
	 *	title: 标题
	 *	tip: 小字
	 *	time: 时间戳
	 *	}  
	 */
	export default {
		data() {
			return {
				
			};
		},
		props: {
			list: {
				type: Array,
				default(){
					return []
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.mix-timeline{
		
	}
	.cell{
		display: flex;
		align-items: flex-start;
		width: 100%;
		padding: 0 30rpx 0;
		
		&:first-child .circle{
			&:before{
				background-color: $base-color;
			}
			&:after{
				content: '';
				position: absolute;
				width: 28rpx;
				height: 28rpx;
				background-color: #f9e0eb;
				border-radius: 100rpx;
			}
		}
		&:last-child .right:before{
			display: none;
		}
	}
	.left{
		
		.time{
			font-size: 26rpx;
			color: #333;
			line-height: 44rpx;
		}
		.date{
			font-size: 20rpx;
			color: #333;
		}
	}
	.cen{
		width: 80rpx;
		height: 44rpx;
		
		.circle{
			width: 16rpx;
			height: 16rpx;
			position: relative;
			z-index: 1;
			
			&:before{
				content: '';
				width: 16rpx;
				height: 16rpx;
				background-color: #ddd;
				border-radius: 100rpx;
				position: relative;
				z-index: 5;
			}
		}
	}
	.right{
		flex: 1;
		padding-bottom: 30rpx;
		position: relative;
		min-height: 96rpx;
		
		&:before{
			content: '';
			width: 2rpx;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			background-color: #ddd;
			transform: translate(-42rpx, 22rpx);
		}
		.title{
			font-size: 28rpx;
			color: #333;
			line-height: 44rpx;
			font-weight: 700;
		}
		.tip{
			margin-top: 6rpx;
			font-size: 24rpx;
			color: #999;
			line-height: 36rpx;
		}
	}
	


</style>