自制横向时间线

效果图

1、节点获取

 <!-- 时间线 -->
      <div class="timeLines">
        <div class="ul_box">
            <ul class="timeline" ref="timeline">
                <li class="timeline_item" v-for="(item,index) in timeLineList" :key="index">
                    <!--圈圈节点及切换节点效果-->
                    <div class="iconfont icon-yuandian"  @click="changeActive(index)" :class="{active: index == timeIndex}"></div>
                    <!--线-->
                    <div class="timeline_item_line" :class="{active: index ==timelength-1}"></div>
                    <!--标注-->
                    <div class="timeline_item_content" >{{item.projectType}}<br>{{item.filingDate}}</div>
                </li>
            </ul>
        </div>
      </div>

2、切换方法

//切换时间线
        changeActive(index){
            this.timeIndex = index;
            this.formData=this.timeLineList[this.timeIndex]
        },

3、样式

.timeLines{
        position: relative;
        height: 100px;
        padding: 10px 10px 0 10px;
        text-align: center;
        //时间线
        .ul_box {
        height: 80px;
        float: left;
        padding-left: 50px;
        display: contents;
        .timeline_item {
            display:inline-block;
            width:auto;
            text-align: left;
        }
        .timeline_item_line {
            width:100%;
            margin: -8px 0 0px 8px;
            border-top: 2px solid #5485e7;
        }
        .timeline_item_line.active{
            border:none;
            margin: -6px 0 0px 8px;
        }
        .timeline_item_content {
            font-size:12px;
            width:auto;
            margin: 5px 50px 5px -25px;
            text-align: center;
            line-height: 20px;
            color: rgb(97, 97, 100);;
        }
    }

4、设置初始为第一个，可以根据需求动态更改timeIndex的值来设置第一个时间节点，根据获取时间节点的长度，设置timelength隐藏多出来的一节。

timeIndex:0,
timelength:0,