Schedule
- 横向进度(五个)
<div class="bx-schedule">
<div class="bx-schedule-step">
<div class="bx-schedule-label">1</div>
<div class="bx-schedule-title">方案一</div>
</div>
<div class="bx-schedule-step">
<div class="bx-schedule-label">2</div>
<div class="bx-schedule-title">方案二</div>
</div>
<div class="bx-schedule-step">
<div class="bx-schedule-label">3</div>
<div class="bx-schedule-title">方案三</div>
</div>
<div class="bx-schedule-step">
<div class="bx-schedule-label">4</div>
<div class="bx-schedule-title">方案四</div>
</div>
<div class="bx-schedule-step bx-schedule--final">
<div class="bx-schedule-label"><i class="bx-icon"></i></div>
<div class="bx-schedule-title">已完成</div>
</div>
</div>
- 横向进度(圆点)
<div class="bx-schedule">
<div class="bx-schedule-step bx-schedule--dot">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">方案A</div>
</div>
<div class="bx-schedule-step bx-schedule--dot">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">方案B</div>
</div>
<div class="bx-schedule-step bx-schedule--dot">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">方案C</div>
</div>
<div class="bx-schedule-step bx-schedule--dot">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">方案S</div>
</div>
<div class="bx-schedule-step bx-schedule--dot">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">已完成</div>
</div>
</div>
- 横向进度,带状态
<div class="bx-schedule">
<div class="bx-schedule-step bx-schedule--done">
<div class="bx-schedule-label">1</div>
<div class="bx-schedule-title">方案A</div>
</div>
<div class="bx-schedule-step bx-schedule--done">
<div class="bx-schedule-label">2</div>
<div class="bx-schedule-title">方案B</div>
</div>
<div class="bx-schedule-step bx-schedule--warning">
<div class="bx-schedule-label"><i class="bx-icon"></i></div>
<div class="bx-schedule-title">方案C</div>
</div>
<div class="bx-schedule-step bx-schedule--doing">
<div class="bx-schedule-label">4</div>
<div class="bx-schedule-title">方案S</div>
</div>
<div class="bx-schedule-step bx-schedule--final bx-schedule--done">
<div class="bx-schedule-label bx-icon"><i class="bx-icon"></i></div>
<div class="bx-schedule-title">已完成</div>
</div>
</div>
- 横向进度,圆点带状态
<div class="bx-schedule">
<div class="bx-schedule-step bx-schedule--dot bx-schedule--done">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">方案一</div>
</div>
<div class="bx-schedule-step bx-schedule--dot bx-schedule--done">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">方案B</div>
</div>
<div class="bx-schedule-step bx-schedule--dot bx-schedule--warning">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">方案B</div>
</div>
<div class="bx-schedule-step bx-schedule--dot bx-schedule--doing">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">方案B</div>
</div>
<div class="bx-schedule-step bx-schedule--dot">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-title">已完成</div>
</div>
</div>
- 纵向进度
<div class="bx-schedule-vertical">
<div class="bx-schedule-step">
<div class="bx-schedule-label">1</div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案一</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step">
<div class="bx-schedule-label">2</div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案二</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step">
<div class="bx-schedule-label">3</div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案三</div>
<p>这里是说明文案</p>
</div>
</div>
</div>
- 纵向进度圆点
<div class="bx-schedule-vertical">
<div class="bx-schedule-step bx-schedule--dot">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案一</div>
<p>这里是说明文案,这里是说明文案,这里是说明文案,这里是说明文案,这里是说明文案,这里是说明文案,这里是说明文案,这里是说明文案,这里是说明文案,这里是说明文案,这里是说明文案,这里是说明文案。</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--dot">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案二</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--dot">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案三</div>
<p>这里是说明文案</p>
</div>
</div>
</div>
- 纵向进度带状态
<div class="bx-schedule-vertical">
<div class="bx-schedule-step bx-schedule--done">
<div class="bx-schedule-label">1</div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案一</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--done">
<div class="bx-schedule-label">2</div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案二</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--warning">
<div class="bx-schedule-label"><i class="bx-icon"></i></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案三</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--doing">
<div class="bx-schedule-label">4</div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案四</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--final bx-schedule--done">
<div class="bx-schedule-label"><i class="bx-icon"></i></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案三</div>
<p>这里是说明文案</p>
</div>
</div>
</div>
- 纵向进度圆点带状态
<div class="bx-schedule-vertical">
<div class="bx-schedule-step bx-schedule--dot bx-schedule--done">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案一</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--dot bx-schedule--done">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案二</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--dot bx-schedule--warning">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案三</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--dot bx-schedule--doing">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案四</div>
<p>这里是说明文案</p>
</div>
</div>
<div class="bx-schedule-step bx-schedule--dot bx-schedule--done">
<div class="bx-schedule-label"></div>
<div class="bx-schedule-content">
<div class="bx-schedule-title">方案三</div>
<p>这里是说明文案</p>
</div>
</div>
</div>