vue实现横向时间轴 vue实现横向时间轴

本文实例为大家分享了vue实现横向时间轴的具体代码，供大家参考，具体内容如下
1、效果图
【vue实现横向时间轴】
文章图片

2、代码实现
html

css样式

.timeaxis{width: 800px; height: 200px; }.box{float: left; width: 180px; }.circular{border: 2px solid #67c23a; width: 10px; height: 10px; border-radius: 10px; background: white; margin: auto; margin-bottom: -4px; position: relative; top: -8px; left: 85px; }.item{border-bottom: 1px solid #409eff; position: relative; .left{position: absolute; left: 55px; top: -25px; }.center{position: absolute; left: 165px; top: -26px; }}.item2 {position: relative; .bottom{position: absolute; left: 75px; top: 0px; }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。