微信小程序流程进度样式实现

主要通过flex布局结合切图来弄.

效果图:

wsss:

.steps{
  display:flex;
  flex-flow: row warp;
  margin-top: 20rpx;
  margin-left: 50rpx;
  margin-right: 50rpx
  /* justify-content:space-around */
}

.step{
   display:flex;
 /* border: 1rpx solid black; */
 
   flex-flow: column nowrap
}

.stepText{
  align-items: center;
  justify-content:space-around;
  font-family: 'HiraginoSansGB-W3';
  font-size: 23rpx
}

.step .img{
  width: 90rpx;
  height: 90rpx;
}

wsml: