竖向步骤条--vant官网的例子
<van-steps direction="vertical">
<van-step v-for="item in list" :key="item.id">
<h3>姓名：{{item.name}}</h3>
<p>城市：{{item.city}}</p>
<p>电话{{item.telphone}}</p>
</van-step>
</van-steps>
竖向步骤条--自定义的icon
<van-steps direction="vertical">
<van-step v-for="item in list" :key="item.id">
<template v-slot:inactive-icon>
<van-icon :name="item.icon" :class="item.classActive" />
</template>
<template v-slot:active-icon>
<van-icon :name="item.icon" :class="item.classActive" />
</template>
<h3 style="color:#323233;">姓名：{{item.name}}</h3>
<p style="color:#323233;">城市：{{item.city}}</p>
<p :class="item.classActive">电话{{item.telphone}}</p>
</van-step>
</van-steps>
样式
.successClass {
color: #07c160;
}
.errorClass {
color: #ee0a24;
}
.warningClass {
color: #e6a23c;
}