写一个流程，前面的圆点和线，第一个圆上面没有线，最后一个圆下面没有线
上图
最近写类似于这种的还挺多的，记录一下css方法
遍历列表之后
<div class="item" v-for="(item,index) in recordList">
加这样一个盒子
<div class="timeline">
<div class="line1" v-if="index != 0"></div>
<div class="circle"></div>
<div class="line2" v-if="index != recordList.length - 1"></div>
</div>
圆点自己写换图片啥的都行，我写的最简单的样式
.timeline {
position: relative;
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.circle {
width: 10px;
height: 10px;
background-color: #188AFF;
border-radius: 50%;
position: relative;
top: 20%;
transform: translateY(-50%);
}
.line1 {
height: 20%;
width: 2px;
background-color: #188AFF;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.line2 {
height: 80%;
width: 2px;
background-color: #188AFF;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
其中圆点定位什么的，从哪里开始哪里结束，调节数值就行