非UI插件实现类似物流进度
实现
html部分
<div class="stepsBox">
<div class="track-list">
<ul>
<div v-for="(item,idx) in stepData" :key="idx">
<!-- <li class="first" v-if="idx===0">
<i></i>
<span class="txt">{{item.message}}</span>
</li>
<li v-else>
<i class="node-icon"></i>
<span class="txt">{{item.message}}</span>
</li>-->
<li>
<i class="node-icon"></i>
<span class="txt">{{item.message}}</span>
</li>
</div>
</ul>
</div>
</div>
JS部分
stepData: [
{message: "1.协作" },
{message: "2.打样"},
{message: "3.筹资" },
{message: "4.销售"},
{message: "5.文档下载"}
]
CSS部分
.track-list {
margin: 20px 0;
padding-left: 5px;
position: relative;
ul {
div:last-child {
li {
border-left: 0;
}
}
}
li {
list-style: none;
position: relative;
padding: 0 0 20px 25px;
line-height: 1.3;
border-left: 1px solid #e9e9e9;
color: #999;
i {
position: absolute;
left: -7px;
top: 1%;
width: 14px;
height: 14px;
background-color: #666666;
border-radius: 50%;
}
.node-icon {
background-color: #ddd;
border-radius: 50%;
}
.txt {
font-size: 15px;
color: #333333;
width: 102px;
position: relative;
top: -5px;
display: inline-block;
vertical-align: middle;
padding: 3px 7px;
background: #dddddd;
}
}
li.first {
padding-top: 0;
border-left: 1px solid #e9e9e9;
.txt {
max-width: 600px;
}
}
}
