步骤条

  <div class="process-box">
        <div class="first-line">
          <div class="left-icon">
            <span class="icon-ball first-ball"></span>
            <i class="icon-line"></i>
          </div>
          <div class="right-time">12-01</div>
        </div>
        <div class="second-line">
          <div class="left-icon">
            <span class="icon-ball"></span>
            <i class="icon-line"></i>
          </div>
          <div class="right-card">
            <el-card class="card-content">
              <div class="first-content">
                <i class="el-icon-user content-icon"></i>
                <span class="content-name">章晗</span>
                <i class="el-icon-time content-time"></i>
                <span class="content-time">2022-12-01 12:00</span>

              </div>
              <div class="second-content">
                <span class="result-text">提交申请</span>
                <span class="result-remark"></span>
              </div>
            </el-card>
          </div>
        </div>
      </div>

 .process-box {
      margin-top: 20px;
      .first-line {
        display: flex;
        height: 48px;

        .right-time {
          width: 70px;
          height: 28px;
          background: url("../../../../assets/images/applyTime.png");
          font-weight: 400;
          text-align: center;
          line-height: 28px;
          font-size: 14px;
          color: #fff;
        }
      }

      .second-line {
        display: flex;

        .right-card {
          flex: 1;
          .card-content {
            .first-content {
              display: flex;
              align-items: center;
              i {
                margin-right: 10px;
              }

              .content-icon {
                color: #3886ff;
              }
              .content-name {
                flex: 1;
                font-weight: 700;
                font-size: 16px;
                text-align: left;
                color: #303133 100%;
              }
              .content-time {
                color: #909399;
                font-weight: 400;
                font-size: 14px;
              }
            }

            .second-content {
              display: flex;
              margin-top: 15px;
              .result-text,
              .result-remark {
                font-weight: 400;
                font-size: 14px;
                text-align: left;
                color: #606266 100%;
                margin-right: 20px;
              }

              .refuse {
                color: #ee3e3e;
              }
              .agree {
                color: #13ce66;
              }
            }
          }
        }
      }
      .left-icon {
        display: flex;
        flex-direction: column;
        margin-right: 20px;
        align-items: center;

        .icon-ball {
          width: 14px;
          height: 14px;
          border: 2px solid #3886ff;
          border-radius: 50%;
        }
        .first-ball {
          margin-top: 6px;
          background: #3886ff;
        }
        .icon-line {
          width: 2px;
          flex: 1;
          background: #e8e6ef;
        }
      }
    }