timeAxis

功能描述

时间轴UI,可用于物流显示,用例见 index.html。

效果图

timeAxis - 图1

依赖的模块

./libs/index.css

快速使用

  1. <div class="list">
  2. <div class="item-inner flex-box-x active">
  3. <div class="item-date">
  4. <div class="date">05-26</div>
  5. <div class="time">04:00</div>
  6. </div>
  7. <div class="dot"><i></i></div>
  8. <div class="item-main col-xs-x">
  9. <div class="item-type">已签收</div>
  10. <div class="item-content">[代收点] 您的快递已签收,期待再次为您服务。</div>
  11. </div>
  12. </div>
  13. <div class="item-inner flex-box-x">
  14. <div class="item-date">
  15. <div class="date">05-25</div>
  16. <div class="time">15:42</div>
  17. </div>
  18. <div class="dot"><i></i></div>
  19. <div class="item-main col-xs-x">
  20. <div class="item-type">待取件</div>
  21. <div class="item-content">[代收点] 您的快递已经暂存至厦门代收点,请及时查收。</div>
  22. </div>
  23. </div>
  24. ......
  25. </div>

特别说明

样式修改,见用例 index.html。