纯CSS实现纵向Steps步骤条

css部分
.step_item {

position:relative;

  display:flex;

  align-items:flex-start;

  margin-top:24upx;

}

.step_dot {

width:24upx;

  height:24upx;

  border-radius:50%;

  background-color:#258f6f;

  margin-right:16upx;

  flex-shrink:0;

  align-self:flex-start;

}

.tick {

width:24upx;

  height:24upx;

}

.step_content {

display:flex;

  flex-direction:column;

}

.step_title {

font-weight:400;

  font-size:24upx;

  color:#333333;

}

.step_desc {

padding-top:8upx;

  font-weight:400;

  font-size:28upx;

  color:#333333;

}

.step_line {

position:absolute;

  top:20upx;

  left:8upx;

  bottom: -20upx;

  width:1px;

  background-color:#E5E5E5;

}

.step_item:last-child .step_line {

display:none;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容