.step-warp {
  padding-bottom: 40rpx;
  .steps {
    display: flex;
    .step-item {
      position: relative;
      text-align: center;
      height: 45rpx;
      flex: auto;
      .step-icon {
        display: inline-table;
        width: 45rpx;
        height: 45rpx;
        border: 2rpx solid #c7c7c7;
        line-height: 41rpx;
        border-radius: 100%;
        color: #c7c7c7;
        font-size: 24rpx;
      }
      .step-line {
        &::after {
          content: " ";
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(50%, -50%);
          width: calc(100% - 45rpx);
          height: 1px;
          background-color: #c7c7c7;
        }
      }
      &:last-child {
        .step-line {
          &::after {
            display: none;
          }
        }
      }
      .step-content {
        position: absolute;
        bottom: -18rpx;
        left: 50%;
        transform: translate(-50%, 100%);
        width: 100%;
        height: 26rpx;
        font-size: 26rpx;
        color: #c7c7c7;
        line-height: 1;
      }
    }
    .active {
      .step-icon {
        border: 2rpx solid #69a9f8;
        color: #69a9f8;
      }
      .step-content {
        color: #69a9f8;
      }
    }
    .finished {
      .step-icon {
        background: #69a9f8;
        color: #fff;
      }
      .step-line {
        &::after {
          background-color: #69a9f8;
        }
      }
    }
  }
}
