為了方便複用，在此記錄一下！

效果如圖所示

css核心程式碼：

.active{
    background-color:#fea6a2;
    background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem);   
}  

流程佈局如圖所示：

顏色，圖示，數量，進度條長度可根據自身業務需求變更

程式碼如下：

wxml：

<view class='headBox'>
  <view class='head flex align-items-center justify-content-center'>
    <view>
      <image mode='widthFix' src="{{img_dir}}/mod/coupon/assets/cityjia_img/pindan.png"></image>
    </view>
    <view>
      <image mode='widthFix' src="{{img_dir}}/mod/coupon/assets/cityjia_img/yaoqinghaoyou.png"></image>
    </view>
    <view>
      <image mode='widthFix' src="{{img_dir}}/mod/coupon/assets/cityjia_img/zhongjiang2.png"></image>
    </view>
  </view>
  <view class='progress-grey'></view>
  <view class='head flex align-items-center justify-content-center font-size-10 color-black'>
    <view>
      <text>拼單</text>
    </view>
    <view>
      <text>邀請好友</text>
    </view>
    <view>
      <text>拼單成功</text>
    </view>
  </view>
  <view class='progress'></view>
  <view class='activeBox flex align-items-center justify-content-center'>
    <view>
      <view class='circle circle-active'></view>
    </view>
    <view style='padding-top:16rpx;'>
      <view class='triangle'></view>
    </view>
    <view>
      <view class='circle circle-grey'></view>
    </view>
  </view>
</view>
 

為了提高工作效率，上圖中一些常用class，例如 flex  align-items-center 等都是引用的，大家應該都能從這些class的名字中得到有效程式碼。這裡的css中沒有重複寫出，如果用到，請將這些class根據其名稱轉化為有效的css程式碼

css：

.headBox {
  position: relative;
  background-color: white;
}
.head {
  width: 100%;
  padding: 5rpx 0;
}
.head image {
  width: 45rpx;
}
.head>view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-grey {
  width: 100%;
  height: 5rpx;
  background-color: #ddd;
  border-radius: 10rpx;
  margin:5rpx 0;
}
.progress {
  position: absolute;
  top: 57rpx;
  left: 0;
  width: 50%;
  height: 7rpx;
  background-color:#fea6a2;
  background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem);
  border-radius: 20rpx;
}
.activeBox{
  width: 100%;
  height: 15rpx;
  position: absolute;
  top: 50rpx;
  left: 0rpx;
}
.activeBox>view{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle{
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
}
.circle-grey{
  background-color: #ddd;
}
.circle-active{
  background-color:#fea6a2;
  background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem);
}
.triangle{
  border: 10rpx solid #FE7672;
  border-bottom: 10rpx solid transparent;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
}
 

希望這些冗雜的佈局程式碼能夠節約你們寶貴的開發時間！