时间轴

时间轴UI 提供与WeLink规范一致的视图

<div class="page" style="background-color: #fff;">
    <div class="page__hd">
        <h1 class="page__title">Timeline</h1>
        <p class="page__desc">时间轴</p>
    </div>
    <div class="page__bd">
        <ul class="weui-timeline">
            <li class="weui-timeline__item">
                <div class="weui-flex">
                    <div class="weui-timeline__time">18-01-05</div>
                    <div class="weui-flex__item weui-timeline__content">                           
                        <span class="weui-timeline-circle__current"></span>
                        <div class="weui-timeline__line"></div>
                        <div>
                            <span class="weui-timeline__title">筛选中</span>
                            <span class="weui-timeline__cycle">周期：2天</span>
                        </div>
                        <div>
                            <span class="weui-timeline__currentby" >lijingliu 00321321</span>
                            <span class="weui-timeline__status">已超期 1 天</span>
                        </div>
                    </div>
                </div>
                <div class="weui-timeline__item__line"></div>
            </li>
            <li class="weui-timeline__item">
                <div class="weui-flex">
                    <div class="weui-timeline__time">18-01-05</div>
                    <div class="weui-flex__item weui-timeline__content">
                        <span class="weui-timeline-circle__success"></span>
                        <div class="weui-timeline__line"></div>
                        <div>
                            <span class="weui-timeline__title">筛选中</span>
                            <span class="weui-timeline__cycle">周期：2天</span>
                        </div>
                        <div>
                            <span class="weui-timeline__currentby" >lijingliu 00321321</span>
                            <span class="weui-timeline__status">已超期 1 天</span>
                        </div>
                    </div>
                </div>
                <div class="weui-timeline__item__line"></div>
            </li>
            <li class="weui-timeline__item">
                <div class="weui-flex">
                    <div class="weui-timeline__time">18-01-05</div>
                    <div class="weui-flex__item weui-timeline__content">
                        <span class="weui-timeline-circle__fail"></span>
                        <div class="weui-timeline__line"></div>
                        <div>
                            <span class="weui-timeline__title">筛选中</span>
                            <span class="weui-timeline__cycle">周期：2天</span>
                        </div>
                        <div>
                            <span class="weui-timeline__currentby">lijingliu 00321321</span>
                            <span class="weui-timeline__status">已超期 1 天</span>
                        </div>
                    </div>
                </div>
                <div class="weui-timeline__item__line"></div>
            </li>
            <li class="weui-timeline__item">
                <div class="weui-flex weui-timeline__item_complete">
                    <div class="weui-timeline__time">18-01-05</div>
                    <div class="weui-flex__item weui-timeline__content">
                        <span class="weui-timeline-circle__complete"></span>
                        <div class="weui-timeline__line"></div>
                        <div>
                            <span class="weui-timeline__title">筛选中</span>
                            <span>周期：2天</span>
                        </div>
                    </div>
                </div>
                <div class="weui-timeline__item__line"></div>
            </li>
        </ul>
    </div>
</div>