vue实现横向时间轴

最近项目需求一个横向的时间轴看了看elmentUi只有一个纵向的，干脆自己手撸一个

效果图如下：

  <div class="Timeline">
            <h2>操作数据</h2>
            <div class="timeaxis">
              <div v-for="(item,i) in list" :key="i">
                <div class="timeaxis-box">
                  <div class="timeaxis-topText" :class="{'bd-empty':i==list.length-1}">
                    <div class="text">{{item.warnname}}</div>
                    <div class="tiem">2017-03-10</div>
                  </div>
                  <div class="circular"></div>
                  <div class="timeaxis-bootomText">
                    <div class="text">{{item.standard}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

list: [
        {
          warnname: "提交广告",
        },
        {
          warnname: "审核通过",
          standard: '操作人:jack',
        },
        {
          warnname: "投放",
          standard: '操作人:jack',
        }, {
          warnname: "结束投放",
          standard: '操作人:jack',
        },
      ]

  .Timeline {
      margin-top: 40px;
      .timeaxis {
        height: 50px;
        margin-top: 80px;
        margin-left: 4em;
        display: flex;
        .timeaxis-box {
          width: 180px;
          .circular {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: #165dff;
            margin-bottom: -4px;
            position: relative;
            top: -4px;
            box-shadow: 0px 0px 5px 5px #fff;
          }
          .timeaxis-topText {
            border-bottom: 1px solid #c9cdd4;
            position: relative;
            .text {
              position: absolute;
              top: -60px;
            }
            .tiem {
              position: absolute;
              top: -35px;
              font-size: 14px;
              color: #9ba3ad;
            }
          }
          .bd-empty {
            border: 0;
          }
          .timeaxis-bootomText {
            position: relative;
            .text {
              position: absolute;
              top: 10px;
              font-size: 14px;
            }
          }
        }
      }
    }