参考 Ant Design Vue 步骤条思路，只输入一个步骤参数即可实现
参考地址：https://www.antdv.com/components/steps-cn/
思路：循环步骤数组，当输入的步骤是3，小于3的是绿色（通过），等于3是红色（停止）
简约图：
代码：
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<link rel="stylesheet" href="css/common.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, userscalable:no">
<meta charset="utf-8">
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.circle {
width: 20px;
height: 20px;
}
.line {
display: inline-block;
width: 80px;
height: 2px;
margin-bottom: 5px;
}
.mt60 {
margin-top: 60px;
}
i.red-bg {
background-color: red;
}
.fs8 {
font-size: 8px;
}
</style>
</head>
<body>
<div id="app">
<ul class="mt60">
<li v-for="(item, keys) in statusArr" :key="keys" class="inline-block mr5">
<i :class="{'green-bg': item.id < status, 'red-bg': item.id === status}" class="circle inline-block grey-bg"></i>
<span :class="{'green-bg': item.id < status}" class="line grey-bg"></span>
<div>
{{ item.text }}
<p v-if="item.id === status" class="fs8 red">
点击这里处理异常！
</p>
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data() {
return {
statusArr: [
{
id: 1, text: "下单成功"
},
{
id: 2, text: "发货成功"
},
{
id: 3, text: "收货成功"
},
{
id: 4, text: "订单完成"
}
],
status: 3
}
}
});
</script>
</html>