移动端CSS实现小程序竖向步骤条

效果图：

 html代码：

	
		
		预约充电说明
	
	
		
			
				1
				
			
			
				预约充电
				按需要选择合适的终端、时间进行预约
			
		
		
			
				2
				
			
			
				申请降锁、充电
				通过个人预约记录或扫码方式，进入准备充电页面申请降锁停车、启动充电！（仅预约时段可操作）
			
		
		
			
				3
				
			
			
				充电中
				充电过程中，可通过预约订单查看当前充电进展，并根据需要停止充电！
			
		
		
			
				4
			
			
				离场
				完成充电后，请在规定时间内离场，超时平台将收取超时占位费！
			
		
	
	

 scss代码：

.mar-top20{
    margin-top: 20px !important;
}

.pd-top10{
	padding-top: 10px;
}

.cardBox{
	width: 710rpx;
	min-height: 75px;
	margin: 0 auto;
	color: #000000;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	position: relative;
	.head{
		width: 290rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		z-index: 5;
		background-color: #FFFFFF;
		.image{
			height: 50rpx;
			width: 50rpx;
		}
		.title{
			font-size: 14px;
			margin-left: 5px;
		}
	}
	.stepBox{
		width: 90%;
		height: 100%;
		margin: 0 auto;
		font-size: 12px;
		.step{
			display: flex;
			height: 100%;
			.stepLeft{
				// height: 100%;
				position: relative;
				.num{
					height: 55rpx;
					width: 55rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					color: #1890FF;
					background-color: #D0E8FF;
				}
				.line{
					height: 100%;
					background-color: #bfbfbf;
					width: 1px;
					z-index: -1;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 50%;
					transform: translate(0%, 0%);
				}
			}
			.stepRight{
				height: 100%;
				margin-left: 20rpx;
				.title{
					width: fit-content;
					padding: 3px 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #1890FF;
					background-color: #D0E8FF;
					border-radius: 5px;
				}
				.content{
					font-size: 11px;
					height: 100%;
					color: #666666;
				}
			}
		}
	}
	.borderLine{
		position: absolute;
		top: 20rpx;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 5px;
		border: 1px solid #309AFE;
		box-shadow:2px 2px 5px #d0c9c9;
	}
}