效果如圖所示：
思路：
使用元素覆蓋的方式實現視覺上虛線的效果
實現代碼：
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，
