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

效果图：

 html代码：

<view class="cardBox mar-top20">
	<view class="head">
		<image class="image" src="/static/images/aShin/navigation.png"></image>
		<view class="title">预约充电说明</view>
	</view>
	<view class="stepBox">
		<view class="step pd-top10">
			<view class="stepLeft">
				<view class="num">1</view>
				<view class="line"></view>
			</view>
			<view class="stepRight">
				<view class="title">预约充电</view>
				<view class="content">按需要选择合适的终端、时间进行预约</view>
			</view>
		</view>
		<view class="step">
			<view class="stepLeft">
				<view class="num">2</view>
				<view class="line"></view>
			</view>
			<view class="stepRight">
				<view class="title">申请降锁、充电</view>
				<view class="content">通过个人预约记录或扫码方式，进入准备充电页面申请降锁停车、启动充电！（仅预约时段可操作）</view>
			</view>
		</view>
		<view class="step">
			<view class="stepLeft">
				<view class="num">3</view>
				<view class="line"></view>
			</view>
			<view class="stepRight">
				<view class="title">充电中</view>
				<view class="content">充电过程中，可通过预约订单查看当前充电进展，并根据需要停止充电！</view>
			</view>
		</view>
		<view class="step">
			<view class="stepLeft">
				<view class="num">4</view>
			</view>
			<view class="stepRight">
				<view class="title">离场</view>
				<view class="content">完成充电后，请在规定时间内离场，超时平台将收取超时占位费！</view>
			</view>
		</view>
	</view>
	<view class="borderLine"></view>
</view>复制

 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;
	}
}复制