效果:
<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">2020-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">2020-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">2020-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">2020-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">2020-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">2020-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>