<!-- /**
* zzx
* 2020.07.10
* 作业节点查询
*/ -->
<style>
  .el-title {
    height: 40px;
    line-height: 40px;
    display: flex;
    font-size: 20px;
  }

  .el-title__time {
    width: 200px;
    padding-right: 10px;
    text-align: right;
  }

  .el-title__main {
    width: 600px;
    padding-left: 34px;
    text-align: left;
  }

  /* 步骤条 */
  .el-steps {
    height: calc(100% - 50px);
    display: flex;
    flex-flow: column;
    overflow-y: auto;
  }

  .el-step {
    /* position: relative; */
    /* flex-shrink: 1; */
    /* flex-basis: 50%; */
    height: 90px;
  }

  .el-step {
    display: flex;
  }

  .el-step .el-step__head {
    flex-grow: 0;
    width: 24px;
    position: relative;
  }

  .el-step__line {
    position: absolute;
    border-color: inherit;
    background-color: #c0c4cc;
  }

  .el-step .el-step__line {
    width: 2px;
    top: 0;
    bottom: 0;
    left: 11px;
  }

  .el-step__icon {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #fff;

    border-radius: 50%;
    border: 2px solid;
    border-color: inherit;
  }

  .el-step__icon-inner {
    display: inline-block;
    user-select: none;
    text-align: center;
    font-weight: 700;
    line-height: 1;
    color: inherit;
  }

  .step__description {
    padding-right: 10%;
    margin-top: -5px;
    font-size: 12px;
    line-height: 20px;
  }

  .el-step:last-of-type .el-step__line {
    display: none;
  }

  .el-step__time {
    width: 200px;
    padding-right: 10px;
    text-align: right;
  }

  .el-step__main {
    width: 600px;
    padding-left: 10px;
    text-align: left;
  }

  .el-step.is-finished {
    color: red;
  }

  .first_step {
    color: orange;
  }
</style>
<div id="jobNodeQuery" class="layui-carousel">
  <div carousel-item>
    <div id="jobNodeQuery_main" class="doubleGrid_vertical">
      <div id="jobNodeQuery_master" class="firstGrid_vertical"></div>
      <div id="jobNodeQuery_details" class="secondGrid_vertical"></div>
    </div>
    <div id="jobNodeQuery_view" class="grid-container-full">
      <div class="tc-title">
        <a href="#" id="jobNodeQuery_view_return" class="back-link"><i class="layui-icon layui-icon-return"></i></a>
        <span id="jobNodeQuery_view_title">操作记录</span>
      </div>
      <div class="tc-panel" style="height: calc(100% - 47.5px);">
        <div class="el-title">
          <div class="el-title__time">时 间</div>
          <div class="el-title__main">地点和跟踪进度</div>
        </div>
        <div class="el-steps" id="jobNodeQuery_view_steps"></div>
      </div>
    </div>
  </div>
</div>
