Timeline 时间轴

以时间为主逻辑展示连续性信息。

适用：

• 带时间属性的场景
• 信息是连续性的，且与时间紧密挂钩

不适用：

• 跟时间无关的信息的展示

通用原则

• 随时间推移，时间结点数逐渐增多，直至流程全部结束。
• 准确地给用户传递时间维度
• 用户能清楚的获取时间信息，并了解当且进程状态：进行中，还是已完成
• 时间轴可正序可倒序，一般为倒序，即最新时间在最前

类型

构成

1. 时间线
   1. 结点
      1. 可以为 icon 或图片
      2. 允许带状态，表单当前时间轴是进行中/已完结
   2. 连接线
2. 标题
   1. 纯文本
3. 时间
   1. 完整格式为 2019-04-22 22:59:21（具体可参考「文案与语气」）
   2. 可根据实际业务需要调整时间展示相对时间，比如：当天/本周

      <div  class="approve-detail-block">
      <div ng-repeat="node in step.nodes" class="node-step-normal" ng-class="{'node-step-line':$index != step.nodes.length-1}">
      <div>
      <span ng-if="!node.isFinished && $index < (step.total - step.finished - 1)" class="node-circle node-cirecle-waiting"></span>
      <span ng-if="!node.isFinished && $index == (step.total - step.finished - 1)" class="node-circle node-cirecle-active"></span>
      <span ng-if="node.isFinished" class="node-circle node-cirecle-finished"></span>
      <span class="node-name">{{node.taskName}}</span>
      </div>
      <div class="font12px text-muted node-date"  ng-if="!node.isFinished">待审批</div>
      <div class="font12px text-muted node-date"  ng-if="node.isFinished">{{node.endTime | date:'yyyy-MM-dd HH:mm:ss'}}</div>
      </div>
      </div>

      API