tips:需要引用jQuery的js
需要引用模板js（https://github.com/yanhaijing/template.js）
实现效果如图：
1.html
<div class="wc-step">
<ul class="steps"> </ul>
</div>
2.style样式
.wc-step{
width: 90%;
margin-bottom: 60px;
overflow-x: auto;
}
.steps{
list-style: none;
display: table;
width: 100%;
padding: 0;
margin: 0;
position: relative;
}
.steps > li.active .step, .steps > li.active::before, .steps > li.complete .step, .steps > li.complete::before{
border-color: #5293C4;
}
/* 最后一个步骤长度为50% */
.steps > li:first-child::before {
max-width: 51%;
left: 50%;
}
/*最后一个步骤长度为50% */
.steps > li:last-child::before {
max-width: 50%;
width: 50%;
}
.steps > li::before {
display: block;
content: "";
width: 100%;
height: 1px;
font-size: 0;
overflow: hidden;
border-top: 4px solid #CED1D6;
border-top-color: rgb(206, 209, 214);
position: relative;
top: 21px;
z-index: 1;
}
.steps > li {
display: table-cell;
text-align: center;
width: 1%;
}
.steps > li .step {
border: 5px solid #CED1D6;
border-top-color: rgb(206, 209, 214);
border-right-color: rgb(206, 209, 214);
border-bottom-color: rgb(206, 209, 214);
border-left-color: rgb(206, 209, 214);
color: #546474;
font-size: 15px;
border-radius: 100%;
position: relative;
z-index: 2;
display: inline-block;
width: 40px;
height: 40px;
}
.steps > li .step, .steps > li.complete .step::before {
line-height: 30px;
background-color: #FFF;
text-align: center;
}
.steps > li.active .title, .steps > li.complete .title {
color: #2B3D53;
}
.steps > li .title {
display: block;
margin-top: 4px;
max-width: 100%;
color: #949EA7;
font-size: 14px;
z-index: 104;
text-align: center;
table-layout: fixed;
word-wrap: break-word;
}
3.模板定义
<script id="tableTmp" type="text/html">
{{#
if(d!='' ){
}}
{{#
for (var key in d) {
var key = d[key];
}}
<li class="{{key.finisherStatus =='1' ? 'active' : '' }}" data-step="{{key.nodeCode}}">
<span class="step">{{key.nodeCode}}</span>
<span class="title">{{key.nodeName}}</span>
<span class="title">{{key.planDate}}</span>
<span class="title">{{key.principalName}}</span>
</li>
{{# } }}
</div>
{{# } }}
</script>
4.渲染模板（接收后台返回的数据）
/*tableTmp 对用定义模板的id
.steps对应html中需要渲染步骤条的class
.data 后台返回的数组对象
eg:data=[
{"nodeName":"工艺进度",
"nodeCode":"1",
"planDate":"2022-08-01",
"principalName":"李总",
"finisherStatus":"1",
},
{"nodeName":"工艺进度",
"nodeCode":"2",
"planDate":"2022-08-14",
"principalName":"刘总",
"finisherStatus":"0",
},
{"nodeName":"采购进度",
"nodeCode":"3",
"planDate":"2022-08-28",
"principalName":"测试58",
"finisherStatus":"0",
},
{"nodeName":"裁剪进度",
"nodeCode":"4",
"planDate":"2022-08-28",
"principalName":"测试55",
"finisherStatus":"0",
}
]
*/
var tableTmp = js.template('tableTmp',data)
$('.steps').html(tableTmp)