效果 (内容覆盖的有些丑,别在意哈,重点是时间线的展示)element也有类似的时间线,但是不能使用类似这样的图片 所以就采用了vue-cute-timeline插件
使用方法(可自行百度)
安装:npm install vue-cute-timeline --save
引入
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline';
// import 'vue-cute-timeline/dist/index.css';
但是我这里引入他默认的样式后,样式展示错误,所以我没有引用默认样式 自己调整了下,也达到了自己想要的效果
上样式代码
.timeline{
position:relative;
list-style:none;
font-family:PingFangSC-light,Avenir,Helvetica,Arial,Hiragino Sans GB,Microsoft YaHei,sans-serif;
-webkit-font-smoothing:antialiased;
margin:10px 20px
}
.timeline:after{
position: absolute;
content: '';
left: 23px;
top: 16px;
width: 2px;
z-index: 0;
height: 100%;
background-color: #094986;
}
/deep/ .timeline-others{
position: relative;
}
.time-icon{
position: absolute;
left: -26px;
z-index: 1;
top: 5px;
}
.timeline-title{
height: 30px;
line-height: 30px;
color: #6afec3 !important;
}
.timeline-item{
height: 240px;
line-height: initial;
}