<view class="am-hor-steps {{className}}" a:if="{{direction == 'horizontal'}}">
  <view class="am-hor-step" a:for="{{items}}" style="{{width: 100 / (items.length - 1) + '%'}}">
    <view class="am-hor-step-line {{index < activeIndex - 1 ? 'is-active' : ''}} {{index >= items.length - 1 ? 'is-last' : ''}}">
      <view class="am-hor-step-icon {{index <= activeIndex - 1 ? 'is-active' : ''}}"></view>
    </view>
    <view class="am-hor-step-text">
      <view class="am-hor-step-title">
        <text>{{item.title}}</text>
      </view>
      <view class="am-hor-step-description">
        <text>{{item.description}}</text>
      </view>
    </view>
  </view>
</view>
<view class="am-vertical-steps {{className}}" a:if="{{direction == 'vertical'}}">
  <view class="am-vertical-step" a:for="{{items}}">
    <view class="am-vertical-step-left">
      <view 
        class="am-vertical-step-line am-vertical-step-line-top {{index < activeIndex ? 'is-active' : ''}}"
        a:if="{{index < items.length - 1}}"
      ></view>
      <view 
        class="am-vertical-step-line am-vertical-step-line-bottom {{index < activeIndex - 1 ? 'is-active' : ''}}"
        a:if="{{index < items.length - 1}}"
      ></view>
      <view class="am-vertical-step-icon is-fail" a:if="{{index == failIndex - 1}}">
        <icon type="cancel" size="20"/>
      </view>
      <view class="am-vertical-step-icon is-active" a:elif="{{index <= activeIndex - 1}}">
        <icon type="success" size="20"/>
      </view>
      <view class="am-vertical-step-icon is-normal" a:else></view>
    </view>
    <view class="am-vertical-step-right">
      <view class="am-vertical-step-title {{index <= activeIndex - 1 ? 'is-active' : ''}} {{index == failIndex - 1 ? 'is-fail' : ''}}">
        <text>{{item.title}}</text>
      </view>
      <view class="am-vertical-step-description">
        <text>{{item.description}}</text>
      </view>
    </view>
  </view>
</view>