【布局】订单流程图

转载请注明：https://blog.csdn.net/wuli_youhouli/article/details/111446326

<div class="logistics">
    <div class="box">
      <ul class="list">
        <li class="latest">
          <div class="content">您的订单开始处理</div>
          <div class="time">2017-08-17 23:31 周四</div>
        </li>
        <li>
          <div class="content">您的订单开始处理</div>
          <div class="time">2017-08-17 23:31 周四</div>
        </li>
      </ul>
    </div>
</div>

  .logistics {
    height: 100%;
    padding: 20px;
  }

  .box {
    overflow: hidden;
    position: relative;
  }

  .box:before {
    content: ' ';
    background-color: #f3f3f3;
    display: block;
    position: absolute;
    top: -8px;
    left: 20px;
    width: 10px;
    height: 4px;
  }

  .list {
    margin: 0;
    padding: 0;
    padding-left: 8px;
    list-style: none;
    margin-top: -8px;
    margin-top: 0px;
  }

  .list li {
    border-left: 2px solid #d9d9d9;
    text-align: left;
    height: auto;
    display: block;
  }

  .list li:before {
    /* 流程点的样式 */
    content: '';
    border: 3px solid #f3f3f3;
    background-color: #d9d9d9;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin-left: -8px;
    margin-bottom: 10px;
  }
  
  .list li .content {
    text-align: left;
    margin-left: 25px;
    margin-top: -20px;
  }

  .list li  .time {
    text-align: left;
    margin-left: 25px;
    font-size: 10px;
    margin-top: 5px;
  }

  .list li.latest:before {
    background-color: #0dad12;
    border-color: #f8e9e4;
  }

  .list li.latest .time,
  .list li.latest .content {
    color: green;
  }