vue-cute-timeline插件使用

效果 （内容覆盖的有些丑，别在意哈，重点是时间线的展示）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;
}