效果如图所示:
思路:
使用元素覆盖的方式实现视觉上虚线的效果
实现代码:
html布局
<ul class="details-cont">
<li class="details-li" v-for="item in 3" :key="item">
<div class="li-status">{{ item }}</div>
<div class="li-flow-box">
<div class="flow-circle"></div>
<div class="flow-line"></div>
<div class="flow-line-other"></div>
</div>
<div class="li-details">
<div class="details-top">文字</div>
<div class="details-channel">文字文字文字</div>
<div class="details-stream">文字文字文字文字</div>
</div>
</li>
</ul>
css样式
.details-cont{
padding: 0 rem(24);
.details-li{
display: flex;
padding-bottom: rem(20);
.li-flow-box{
position: relative;
padding: rem(5) 0 0;
.flow-circle{
width: rem(8);
height: rem(8);
border-radius: 50%;
margin: 0 rem(7) 0 rem(5);
background: #D7D7D7;
}
.flow-line{
position: absolute;
left: rem(9);
top: rem(13);
bottom: rem(-23);
width: 1px;
border-left: 1px dashed #D7D7D7;
}
}
.li-details{
flex: 1;
font-size: rem(12);
color: #999999;
line-height: 18px;
.details-channel,.details-stream{
padding: rem(6) 0 0;
}
}
}
.details-li:last-child{
.li-flow-box{
.flow-line-other{
position: absolute;
left: rem(9);
top: rem(13);
bottom: rem(-23);
width: 1px;
border-left: 1px dashed #fff;
}
.flow-line{
border-image: linear-gradient(180deg, rgba(215, 215, 215, 1), rgba(237, 237, 237, 0.49), rgba(215, 215, 215, 0)) 1 1
}
}
}
}
PS:因为在移动端使用,单位代码使用统一的方法对rem进行了处理,此处rem(1),就相当于1px,