小程序写一个自适应内容的步骤条（极简代码）

先上一个效果图，本文主要是提供一个思路，具体的样式还是要根据自己的项目调整

思路：核心是需要用到CSS的伪类，before - 画那条线，after - 画小方块。每个item相对定位，用padding-left把左边距空出来，伪类用绝对定位。

下面直接上代码了

HTML部分

<view class="card-list process">
 <block wx:for="list" wx:key="id">
    <view wx:if="{{index==0}}" class="card-container process-item active">
      <view class="card-wrap scale-btn column" catchtap="goCardDetail" data-item="{{item}}">
        <view class="marker SUCCESS"></view>
        <view class="top-wrap">
          <view class="title">第{{index+1}}次购买</view>
          <view class="divider"></view>
          <view class="content">
            <view class="money">支付金额：185元</view>
            <view class="time">下单时间：21-08-15</view>
          </view>
        </view>
        <view class="detail-btn flex-center">查看订单详情 ></view>
      </view>
    </view>
    <view wx:else class="card-container process-item">
      <view class="card-wrap row" data-item="{{item}}">
        <view class="marker FALSE"></view>
        <view class="left-wrap">
          <text class="discount">6</text>折
        </view>
        <view class="top-wrap">
          <view class="title">第{{index+1}}次购买</view>
          <view class="divider"></view>
          <view class="content">
            <view class="money">支付金额：150元/135元</view>
            <view class="time">距离优惠结束：30天15时25分</view>
          </view>
        </view>
      </view>
    </view>
  </block>
</view>

CSS部分（我使用的less哈）

// 列表
.card-list {
  .card-container {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .card-wrap {
    position: relative;
    width: 652rpx;
    min-height: 180rpx;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);

    &.column {
      flex-direction: column;
    }

    &.row {
      flex-direction: row;
      align-items: center;
      background-color: #f2f2f3;
    }

    .marker {
      position: absolute;
      width: 132rpx;
      height: 26rpx;
      top: 18rpx;
      right: -37rpx;
      font-size: 20rpx;
      transform: rotate(45deg);

      // 已完成
      &.SUCCESS::before {
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: #b60a0a;
        color: #faf0f0;
        content: "已完成";
        text-align: center;
        line-height: 26rpx;
      }

      // 已失效
      &.FALSE::before {
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: #e2e2e2;
        color: #9d9d9d;
        content: "已失效";
        text-align: center;
        line-height: 26rpx;
      }
    }

    .left-wrap {
      padding-left: 32rpx;
      height: max-content;
      color: #9d9d9d;
      font-size: 30rpx;

      .discount {
        font-size: 70rpx;
      }
    }

    .top-wrap {
      flex: 1;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 0 32rpx;
    }

    .title {
      color: #000000;
      font-size: 34rpx;
    }

    .content {
      .money {
        font-size: 22rpx;
        color: #000000;
        margin-bottom: 10rpx;
      }

      .time {
        color: #a3a3a3;
        font-size: 20rpx;
      }
    }

    .divider {
      background-color: #cbcbcb;
      height: 1rpx;
      margin: 10rpx 0;
    }

    .detail-btn {
      height: 32rpx;
      background-color: #f7f7f7;
      font-size: 20rpx;
      color: #090909;
    }
  }
}

// 步骤条
.process {
  @processPannelWidth: 38rpx; // 步骤条和内容的左间距
  @processOffsetBottom: 30rpx; // 内容底部外边距
  @processBlockWidth: 12rpx; // 小方块宽度
  @processBlockHeight: 32rpx; // 小方块高度
  @processBlockColor: #e1e1e1; // 小方块背景色
  @processBlockHighlightColor: #000000; // 小方块高亮背景色
  @processLineWidth: 1rpx; // 线宽度
  @processLineColor: #d2d2d2; // 线背景色

  .process-item {
    position: relative;
    padding-left: @processPannelWidth;

    &::before {
      content: " ";
      display: block;
      position: absolute;
      left: @processBlockWidth * 0.5;
      top: 0;
      bottom: -@processOffsetBottom;
      width: @processLineWidth;
      background-color: @processLineColor;
      transform: translate3d(-50%, 0, 0);
    }

    &::after {
      content: " ";
      display: block;
      position: absolute;
      left: 0;
      top: 50%;
      width: @processBlockWidth;
      height: @processBlockHeight;
      background-color: @processBlockColor;
      transform: translate3d(0, -50%, 0);
    }

    &.active::after {
      background-color: @processBlockHighlightColor;
    }

    &:last-child::before {
      bottom: 0;
    }
  }
}