vue.js横向（时间轴、步骤图、流程图）模版效果：
<template>
<div class="container">
<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 <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>
</template>
vuejs流程图插件<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{
width: 50px;
border-bottom:1px solid #D84C29;        }
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。