1.结构
<ul class="stepUl">
<li class="stepLi" v-for="(item, index) in stepList" :key="index">
<div class="top">
<p :class="{active: currentState >= item.key}">{{ item.value }}</p>
<img
v-if="currentState >= item.key"
:src="require(`./../../static/img/icons/iconed${index}.png`)"
/>
<img v-else :src="require(`./../../static/img/icons/icon${index}.png`)" />
</div>
<div v-if="item.value != '工单闭环'">
<img
v-if="currentState >= item.key"
class="arrow"
src="./../../static/img/icons/arrowed.png"
/>
<img
v-else
class="arrow"
src="./../../static/img/icons/arrow.png"
/>
</div>
</li>
</ul>
2.数据
stepList:[
{
"key": "-1",
"value": "撤单"
},
{
"key": "1",
"value": "创建工单"
},
{
"key": "20",
"value": "科室接单"
},
{
"key": "30",
"value": "科员处理"
},
{
"key": "40",
"value": "科室确认"
},
{
"key": "50",
"value": "工单闭环"
}
]
3.样式
.stepUl {
display: grid;
grid-template-columns: repeat(6, 1fr);
text-align: left;
.stepLi {
display: flex;
justify-content: center;
align-items: center;
.top {
p {
width: 72px;
color: #ccc;
margin-bottom: 5px;
margin-left: -5px;
text-align: center;
&.active {
color: #000;
}
}
img {
width: 57px;
}
}
.arrow {
margin-top: 20px;
}
}
}