css自定义横向流程图，步骤图

特想吐槽下，上传的图片尽然给拉伸了。图片都展示不好了 （*-*）生气，就先凑合看吧

首先进行中的为绿色，进行中的为橙色，未进行的为灰色，活不多说直接上代码，横向的为自己手写，纵向为elementUI自带的

<ul class="steps">
        <li  v-for="(item,index) in list" :key="item.id" :class="{ 'step_pass':item.zt==1, 'step_active':item.zt==2,'step_edd':list.length==index+1}">
          <div class="step-line"></div>
          <div class="step-content">
            <div class="step-num">{{item.id}}</div>
            <div class="sub_title">{{item.name}}</div>
            <div class="step-sub">
              <el-timeline >
                <el-timeline-item v-for="ele in item.child" :key="ele.id" :timestamp="ele.rq" placement="top">
                  <el-card style="width:100%">
                    <h4>{{ele.name}}</h4>
                    <p
                      style="word-wrap:break-word ;"
                    >{{ele.nr}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </li>
      </ul>

 数据类型

list:[
        {
          id:'1',
          name:"开始",
          zt:1,
          child:[
            { 
              rq:"2018-03-01",
              id:"11",
              nr:'提交',
              nr:"对方的说法的说法是抗老化反馈啦返回来打手将发生了的减肥了的看是否"
            },
            {
              rq:"2018-03-01",
              id:"12",
              nr:'修改',
              nr:"对方的说法的说法是抗老化反馈啦返回来打手将发生了的减肥了的看是否"
            },
            {
              rq:"2018-03-01",
              id:"13",
              nr:'提交',
              nr:"对方的说法的说法是抗老化反馈啦返回来打手将发生了的减肥了的看是否"
            },
          ]        
        },
        {
          id:'2',
          name:"审核",
          zt:2,
          child:[
            {
              rq:"2018-03-01",
              id:"12",
              nr:'修改',
              nr:"对方的说法的说法是抗老化反馈啦返回来打手将发生了的减肥了的看是否"
            },
            {
              rq:"2018-03-01",
              id:"21",
              nr:'提交',
              nr:"对方的说法的说法是抗老化反馈啦返回来打手将发生了的减肥了的看是否"
            }
          ]        
        },
        {
          id:'3',
          name:"完成",
          zt:0,
        },
      ]

<style scoped>
.flow_com {
  width: 100%;
  height: 70%;
  /* overflow: auto; */
}
.steps {
  list-style: none;
  display: flex;
}
.steps li {
  flex: 1;
  position: relative;
  min-width: 120px;
}
.step-num {
  display: inline-block;
  height: 30px;
  width: 30px;
  color: #fff;
  background-color: #b9b9b9;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  border: 2px solid rgba(224, 224, 224, 1);
}
.step_active .step-num {
  background-color: #f3862d;
}
.step_pass .step-num {
  background-color: #1dce05;
}
.step-num:after {
  content: "";
  width: 90%;
  height: 5px;
  background-color: #e0e0e0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 15px;
  margin-left: 4%;
}
.step_edd .step-num:after {
  display: none;
}
.step_pass .step-num:after {
  background-color: #2ad613;
}
.step-sub {
  width: 90%;
  position: absolute;
  left: 50%;
}
</style>