时间线

<template>
    <div class="timeLine">
       <div class="title">时间线</div>
          <ul class="list">
             <li class="item" v-for="(item,index) in list" :key="index">
                 <div class="date">
                      <span>{{item.date}}
                      </span>
                 </div>
                <i class="icon circle"></i>
                <div class="content">
                    <div class="left">
                       <div class="title">{{item.title}}
                       </div>
                    <div class="source">
                       <div class="resource">{{item.resource}}</div>
                       <div class="date">{{item.date}}</div>
                   </div>
                </div>
            </div>
         </li>
    </ul>
</div>
</template>

测试数据：
list: [
    {
        title:'中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网',
        date: '05-01',
        resource: '中国新闻网'
    },
    {
        title:'中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网2',
        date: '05-02',
        resource: '中国新闻网'
    },
    {
        title:'中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网3',
        date: '05-03',
        resource: '中国新闻网'
    },
    {
       title:'中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网中国新闻网4',
       date: '05-04',
       resource: '中国新闻网'
    }
]
 


css样式：

<style lang='scss'>ul,li {  margin: 0;  padding: 0;  list-style: none;}.timeLine {  .list {    padding-left: 30%;    padding-top: 20px;    .item:not(:last-child):before {      content: '';      position: absolute;      top: 0;      border-left: 1px dotted rgba(0, 0, 0, 0.4);      height: 100%;    }    .item {      position: relative;      padding-bottom: 20px;      margin-top: -8px;      .date {        position: relative;        font-size: 16px;        span {          position: absolute;          left: -60px;          top: 4px;        }      }      .icon {        font-family: icon !important;        font-size: 16px;        font-style: normal;        position: absolute;        left: -3px;        top: 0;        z-index: 10;        width: 20px;        height: 20px;        line-height: 20px;        background-color: #fff;        color: #5fb878;        border-radius: 50%;        text-align: center;        cursor: pointer;      }      .circle {        width: 6px;        height: 6px;        border-radius: 50%;        border: 1px solid rgba(0, 0, 0, 0.4);      }      .content {        padding-left: 25px;        line-height: 22px;        font-size: 14px;        color: #666;        top: -10px;        display: flex;        flex-direction: row;        .left {          .title {            margin: 0;            padding: 0;            font-size: 16px;            line-height: 21px;            color: rgb(34, 34, 34);            display: -webkit-box;            -webkit-box-orient: vertical;            -webkit-line-clamp: 2;            overflow: hidden;          }          .source {            display: flex;            flex-direction: row;            color: rgb(130, 140, 155);            margin-top: 8px;            .date {              margin-left: 8px;            }          }        }      }    }  }}</style>

                                     效果图