时间轴

<view class="process">

  <view class="line">

    <view class="line-inner" style="width:2%"></view>

    <view class="active circle"></view>

    <view class="circle"></view>

    <view class="circle"></view>

    <view class="circle"></view>

    <view class="circle"></view>

    <view class="circle"></view>

    <view class="circle"></view>

    <view class="circle"></view>

    <view class="circle"></view>

  </view>

  <view class="line-txt">

    <view class="active item">开工</view>

    <view class="item">准备</view>

    <view class="item">打拆</view>

    <view class="item">水电</view>

    <view class="item">防水</view>

    <view class="item">泥木</view>

    <view class="item">油漆</view>

    <view class="item">竣工</view>

    <view class="item">入住</view>

  </view>

</view>

css:

/* pages/test01/index.wxss */

.process {

  padding: 24rpx;

}

.process .line {

  width: 702rpx;

  height: 6rpx;

  border-radius: 3rpx;

  background: #eee;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.process .line .line-inner {

  height: 6rpx;

  border-radius: 3rpx;

  background: #e34a2b;

  position: absolute;

}

.process .line .circle {

  width: 24rpx;

  height: 24rpx;

  border-radius: 50%;

  background: #eee;

}

.process .line .active {

  background: #e34a2b;

}

.process .line-txt {

  width: 702rpx;

  display: flex;

  margin-top: 20rpx;

  justify-content: space-between;

}

.process .line-txt .item {

  color: #666;

}

.process .line-txt .active {

  color: #e34a2b;

}