效果:
<ul class="timeline-list">
<li class="timeline-item" v-for="(i, index) in tt" :key="index">
<div class="tail"></div>
<div class="node"></div>
<div class="wrapper">
<div class="times">{{ i.time }}</div>
<div class="cont">{{ i.cont }}</div>
</div>
</li>
</ul>
.timeline-list {
margin: 0;
padding: 16px;
font-size: 12px;
list-style: none;
.timeline-item:last-child .tail {
display: none;
}
.timeline-item {
position: relative;
padding-bottom: 14px;
}
.tail {
position: absolute;
left: 0;
height: 100%;
border-left: 1px dotted #d7d8db;
}
.node {
position: absolute;
background: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
left: -2px;
width: 6px;
height: 6px;
background: #0a7fef;
}
.wrapper {
position: relative;
top: -6px;
left: 8px;
}
.times {
margin-bottom: 2px;
padding-top: 0px;
line-height: 17px;
color: #373d4a;
font-size: 12px;
}
.cont {
line-height: 17px;
color: #8b8b8b;
font-size: 12px;
}
}