vue发展历程时间轴动画_Vue之时间轴组件
实现思路及步骤：
页⾯分为四个部分
1、左侧时间
2、中间圆点
3、右侧内容
4、虚线部分
最外层div,relative布局,⽅便⼦元素计算尺⼨
左侧时间固定宽度，显⽰时间(本demo:100px)，之后absolute绝对定位(left:0)
中间圆点absolute绝对定位，因为左侧宽度已经定为100px，圆点left值只需要⼤于100px肯定就会显⽰在时间右侧(具体值可以根据需求修改)
最右侧的内容展⽰区域同理也是ab定位，值⼤于左侧时间left值+圆点时间left值就可以(具体值可以根据需求修改)
最后只剩下虚线部分就可以得出结论，虚线的left值 = 圆点距离左侧时间-圆点宽度的⼀半
此时，虚线正好压在圆点中间部分，调整⼀下圆点和虚线的z-index值，即可
HTML代码：
{{item.time}}
{{}}
JS代码：
mounted() {
this.$refs.dotted.style.left = this.$refs.circular[0].offsetLeft - 12 + 'px'
}
Css代码：
.time h2{
color:#FF6600;
margin: 20px auto 30px auto;
}
.time-line{
position: relative;
width:300px;
margin:0 auto;
}
.time-line-div{
position:relative;
min-height:85px;
}
.time-line-div>p:nth-child(1){
position: absolute;
left:0;
width:100px;
}
.time-line-div>p:nth-child(2){
position:absolute;
left: 100px;
width:15px;
css布局左边固定右边自适应height:15px;
top:10px;
background:#5CB85C;
border-radius: 50%;
z-index: 10
}
.time-line-div>p:nth-child(3){
position:absolute;
left: 130px;
padding: 10px;
background: #317EF3;
font-size:.8rem;
color:#fff;
border-radius: 10px;
}
.img-dotted{
position:absolute;
width:20px;
height:100%;
top:0;
z-index: 1;
background:url('/static/images/vue/dotted.png'); }

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