## Schedule
1. 横向进度(五个)

![](http://res.winbaoxian.com/autoUpload/common/schedule1_9830c3ca59de3fb.png)
```html
<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>
```
2. 横向进度(圆点)

![](http://res.winbaoxian.com/autoUpload/common/schedule2_5d6933e1e5305b1.png)
```html
<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>
```
3. 横向进度,带状态

![](http://res.winbaoxian.com/autoUpload/common/schedule3_f3b150494d5b725.png)
```html
<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>
```
4. 横向进度,圆点带状态

![](http://res.winbaoxian.com/autoUpload/common/schedule4_471f92a6f02da98.png)
```html
<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>
```
5. 纵向进度

![](http://res.winbaoxian.com/autoUpload/common/schedule5_0dbd5289a5cd740.png)
```html
<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>
```
6. 纵向进度圆点

![](http://res.winbaoxian.com/autoUpload/common/schedule6_c7ef729d1372bcf.png)
```html
<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>
```
7. 纵向进度带状态

![](http://res.winbaoxian.com/autoUpload/common/schedule7_8059a1e1ea949c0.png)
```html
 <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>
```
8. 纵向进度圆点带状态

![](http://res.winbaoxian.com/autoUpload/common/schedule8_4d828338135dcac.png)
```html
<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>
```