简易实现一个移动端步骤条

1.线条长度由内容撑开 2.未进行节点置灰，已完成蓝色，进行中蓝色带阴影

<div class="node-box">
  <div class="node-item" :class="{
    'underway': item.status === 1,
    'finish': item.status === 2,
    'timeout': item.status === 1 && isOvertime      }" v-for="(item, index) in props.nodeList" :key="index">
    <!-- 节点内容 -->
  </div>
</div>

type StatusMap = 0 | 1 | 2 // 0：未开始 1：进行中 2： 已完成

.node-item {
  position: relative;
  padding-left: 15px;
  width: 100%;
  box-sizing: border-box;

  &:not(&:nth-last-of-type(1)) {
    padding-bottom: 24px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      height: 100%;
      border-left: 1px solid #c0c0c0;
    }
  }

  &::after {
    content: '';
    position: absolute;
    top: 2px;
    left: -4px;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    background-color: #c0c0c0;
    border-radius: 50%;
    box-shadow: 0 0 0px 4px #fff;
    // border: 4px solid #FFFFFF;
  }
}

.node-item.underway {
  &::after {
    background-color: #1890FF;
    border: 3px solid rgb(205, 227, 252);
  }
}

.node-item.timeout {
  &::after {
    background-color: #1890FF;
    border: 3px solid rgb(205, 227, 252);
  }
}

.node-item.finish {
  &::before {
    border-left: 1px solid #1890FF;
  }

  &::after {
    background-color: #1890FF;
  }
}