小程序和h5垂直时间轴

<template>
    <view class="steps">
		<view class="list" v-for="(item,index) in  listArr":key="index">
			<view class="left-time">
				<text class="data-da">
					12-12
				</text>
				<view class="weeks">
					12:03
				</view>
				<view class="round"></view>
				<view class="line-line"></view>
			</view>

			<view class="right">
				<view class="zheng-result">
					<image class="linit-wh" v-if="item.imageBz"  :src="item.imageBz"></image>
				</view>
				<view class="cont-modeule">
					<view class="top-box">
						<txet  class="name-name">{{item.userName}}</txet>
						<text  class="name-leave-finsh">
						  完成
						</text>
					</view>
					<view class="class-hygiene">
						<view class="contentText">
							{{item.fullMessage }}
						</view>
					</view>
				</view>

			</view>
		</view>
    </view>
</template>

<script>
export default {
	data(){
		return{
			listArr:[
				{
					fullMessage: "啊倒萨说的阿松大阿松大阿阿松大暗时",
					imageBz: "https://img01.yzcdn.cn/vant/cat.jpeg",
					userName: "老师",
				},
				{	

					fullMessage: '啊倒萨说的阿松大阿松大1',
					imageBz: "https://img01.yzcdn.cn/vant/cat.jpeg",
					taskDefName: "家长",
					userId: "577275925884964864",
					userName: "教导主任",
				},
				{
					fullMessage: '啊倒萨说的阿松大阿',
					imageBz: "https://img01.yzcdn.cn/vant/cat.jpeg",
					taskDefName: "班主任",
					userId: "598488801660243968",
					userName: "校长",
				}
			]
	    }
	}
}
</script>
<style  lang="scss">
	page{
		height: 100%;
		background-color: #F7F7F7;
		padding-top: 50rpx;
	}
    .list{
    	display: flex;
    	.left-time{
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		width:156rpx;
    		padding-top: 24rpx;
    		position: relative;
    			.data-da{
    				font-size: 28rpx;
    				font-family: PingFang SC, PingFang SC-Regular;
    				font-weight: 400;
    				color:#909399;
    			}
    			.weeks{
    				font-size: 28rpx;
    				font-family: PingFang SC, PingFang SC-Regular;
    				font-weight: 400;
    				color: #909399;
    			}
    			.round{
    				width: 28rpx;
    				height: 28rpx;
    				background-color: #4A80F6;
    				position: absolute;
    				top: 60rpx;
    				right: -14rpx;
    				border: 4rpx solid #4A80F6;
    				border-radius: 50%;
    				z-index: 10;
    			}
    			.line-line{
    				position: absolute;
    				top: 60rpx;
    				right: 3rpx;
    				height: 100%;
    				width: 1rpx;
    				border: 1rpx solid #4A80F6;
    			}
    	}
    	// 右边的部分哈
    	.right{
    		width: 518rpx;
    		background: #fff;
    		border-radius: 16rpx;
    		box-sizing: border-box;
    		margin-left: 32rpx;
    		margin-bottom: 32rpx;
    		display: flex;
    		padding: 33rpx 24rpx 31rpx;
    		.zheng-result{
    			width: 56rpx;
    			height: 56rpx;
    			margin-right: 25rpx;
    			.linit-wh{
    				width: 56rpx;
    				height: 56rpx;
    				border-radius: 50%;
    			}
    		}
    		.cont-modeule{
				// 换行显示
    			word-break:break-all;
    			word-wrap:break-word;
    			.top-box{
    				.name-name{
    					font-size: 28rpx;
    					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    					font-weight: 500;
    					color: #303133;
    					margin-right: 10rpx;
    				}
    				.name-leave-finsh{
    					font-size: 28rpx;
    					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    					font-weight: 500;
    					color: #909399;
    				}
    			}
				.class-hygiene{
					.contentText{
						font-size: 24rpx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #909399;
					}
				}
    		}
    	}
		&:last-child .line-line{
			border: none !important;
		}
    }

</style>