纯css-steps步骤条

里面的左侧icon 用了有赞的图标，可以自行替换，可以细微调整一下

效果图如下：

html代码：

[code]        <!--审批步骤start--><div class=\"detail-step\"><div class=\"detail-step-vertical\"><div class=\"detail-steps-items\"><div class=\"detail-items\"><div class=\"items-title\">主管<van-tag plain class=\"items-tag\">标签</van-tag></div><div class=\"items-desc\"><div class=\"items-row\"><div class=\"items-col name\">张三 <div class=\"tag\">同意</div></div><div class=\"items-col time\">2020.06.19 16:05</div></div><div class=\"items-content\">审核说明：图片上传不正确，请看下图</div></div><div class=\"items-container\"><van-icon name=\"checked\" size=\"16\" color=\"#2BC6BA\"/></div><div class=\"items-step-line\"></div></div><div class=\"detail-items\"><div class=\"items-title\">主管<van-tag plain class=\"items-tag\">标签</van-tag></div><div class=\"items-desc\"><div class=\"items-row\"><div class=\"items-col name\">张三 <div class=\"tag\">同意</div></div><div class=\"items-col time\">2020.06.19 16:05</div></div><div class=\"items-content\">审核说明：图片上传不正确，请看下图</div></div><div class=\"items-container\"><van-icon name=\"clock\" size=\"16\" color=\"#F9A829\"/></div><div class=\"items-step-line\"></div></div><div class=\"detail-items\"><div class=\"items-title\">主管<van-tag plain class=\"items-tag\">标签</van-tag></div><div class=\"items-desc\"><div class=\"items-row\"><div class=\"items-col name\">张三 <div class=\"tag\">同意</div></div><div class=\"items-col time\">2020.06.19 16:05</div></div><div class=\"items-content\">审核说明：图片上传不正确，请看下图</div></div><div class=\"items-container\"><van-icon name=\"clear\" size=\"16\" color=\"#FF584D\"/></div><div class=\"items-step-line\"></div></div></div></div></div><!--审批步骤end-->

css:

[code]  .detail-step{margin: 15px 0;.detail-step-vertical{padding-left: 40px;overflow: hidden;.detail-steps-items{.detail-items{position: relative;display: block;float: none;padding:10px 15px 10px 0;line-height: 0.48rem;&:last-child{.items-step-line{display: none;}}.items-container{position: absolute;top: 20px;left: -0.4rem;z-index: 2;font-size: 0.32rem;line-height: 1;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}.items-step-line{top:24px;left: -15px;width: 0.02667rem;height: 100%;position: absolute;background-color: #ebedf0;}.items-title{font-size: 13px;font-weight: 500;text-align: left;color: #333333;line-height: 19px;.items-tag{margin-left: 5px;}}.items-desc{padding: 13px 10px;box-sizing: border-box;margin-top: 10px;width: 100%;background: #ffffff;border-radius: 5px;.items-row{display: flex;flex-direction: row;.items-col{width: 50%;height: 20px;line-height: 20px;&.name{display: flex;flex-direction: row;font-size: 14px;font-weight: 500;text-align: left;color: #333333;line-height: 19px;.tag{font-size: 12px;margin-left: 10px;}}&.time{font-size: 12px;font-weight: 500;text-align: right;color: #999999;line-height: 19px;}}}.items-content{font-size: 12px;font-weight: 500;text-align: left;color: #666666;line-height: 19px;}}}}}}