效果：
<template><div class="container"><div style="display:flex; position: absolute;bottom: 40px;"><div class="item-wrap"><div class="item"></div><div class="dot"></div><div class="item"></div><div class="tp">-12-12 <br/>10:52:23 </div><div class="bt">手术申请</div></div><div class="item-wrap" ><div class="item"></div><div class="dot"></div><div class="item"></div><div class="tp">-12-12 <br/>10:52:23 </div><div class="bt">手术申请</div></div><div class="item-wrap" ><div class="item"></div><div class="dot"></div><div class="item"></div><div class="tp">-12-12 12:30:30</div><div class="bt">手术申请</div></div><div class="item-wrap" ><div class="item"></div><div class="dot"></div><div class="item"></div><div class="tp">-12-12 12:30:30</div><div class="bt">手术放弃</div></div><div class="item-wrap" ><div class="item"></div><div class="dot"></div><div class="item"></div><div class="tp">-12-12</div><div class="bt">手术安排</div></div><div class="item-wrap" ><div class="item"></div><div class="dot"></div><div class="item"></div><div class="tp">-12-12 12:30:30</div><div class="bt">手术结束</div></div></div></div></template><script>export default {name: 'timeLine',data() {return {}},methods: {}}</script><style lang="scss" scoped >.container{max-height: 150px;min-height: 110px;overflow-x: auto;position: relative;background: #fff;.item-wrap{font-size: 13px;position: relative;flex:1;display:flex;.tp{position: absolute;width: 100%;bottom: 20px;text-align: center;}.bt{position: absolute;width: 100%;top: 20px;text-align: center;}}.dot{border:2px solid #07c160;width: 5px;height: 5px;border-radius: 5px;background:#07c160; //white;margin: auto;margin-bottom: -4px;position: relative;}.dotsx{ background:#07c160;}.item{//flex:1;width: 50px;border-bottom:1px solid #D84C29;}}</style>
