时间轴

html

<div class="layui-tab-item">
    <div class="wrap-deptModify col-item-2">
        <div class="title">日志信息</div>
            <div class="timeline-box">
                <div class="line"></div>
                <ul>
                    <li>
                        <div class="wrap-date fl">
                            <p class="">2017-06-23</p>
                            <p class="datetime">08:10:45</p>
                        </div>
                        <div class="content fl">
                            <p>王星@CG分公司风控</p>
                            <b>有条件通过</b>
                        </div>
                    </li>
                    ...
                </ul>
            </div>
    </div>
</div>

css

.timeline-box {
    margin: 20px;
    position: relative;overflow: hidden;z-index: 1;
}
.timeline-box ul li {
    background: url(../images/icon-dot.png) no-repeat 85px 0;
    overflow: hidden;
    margin-bottom: 30px;
}
.timeline-box ul li:last-child{margin-bottom: 0;}
.timeline-box .line{
    position: absolute;
    left: 94px;
    top: 20px;
    height: 100%;
    width: 1px;
    background:#E2E2E2 ;z-index: -1;
}
.timeline-box .content {
    padding-left: 53px;
    font-size: 16px;
    width: 84%;
}
.content b {
    color: #6c7174;
    margin-top:4px;
}
.wrap-date {
    font-size: 14px;
    width: 80px;
}
.wrap-date p, .content p {
    color: #54ade8;
    margin-bottom: 4px;
}
.wrap-date .datetime {
    color: #ccc;
    text-align:center;
}

js

//因为用的layui的tab切换,切换会重新加载时间轴
layui.use('element', function(){
      var element = layui.element();
      element.on('tab(tab)', function(){
        $(".timeline-box ul").each(function(i,dom){
            var $lastH=$(this).find("li:last-child").height();
            var h=$(this).height();
            $(this).siblings(".line").height(h-$lastH);
        });
  });
});

html结构同上

css

.timeline-box ul {
   background: url(../images/icon-line.png) repeat-y 95px 0;
}