<!-- 横向 -->
<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="{{item.size || size || 24}}"/>
      </view>
      <view class="am-vertical-step-icon is-active" a:elif="{{index <= activeIndex - 1}}">
        <image mode="widthFix" class="am-vertical-step-active-image" a:if="{{item.activeIcon}}" src="{{item.activeIcon}}" style="width: {{item.size || size || 24}}px;"/>
        <icon a:else type="success" size="{{item.size || size || 24}}"/>
      </view>
      <view a:else>
        <image mode="widthFix" class="am-vertical-step-icon am-vertical-step-image" a:if="{{item.icon}}" src="{{item.icon}}" style="width: {{item.size || size || 24}}px;"/>
        <view class="am-vertical-step-icon is-normal" a:else style="width: {{item.size || size || 10}}px; height: {{item.size || size || 10}}px;"></view>
      </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>