<view wx:if="{{outerIconList.length > 0 || innerIconList.length > 0}}" class="volc-outer-box">
  <view class="volc-more-button" style="{{item.containerStyle}}" wx:for="{{outerIconList}}" wx:for-item="item" wx:key="key" data-key="{{item.key}}" bindtap="iconClick">
    <view class="volc-more-button-item-badge" wx:if="{{item.key === 'IMAGE_TEXT_LIVE' && countUnreadImageTextLive}}">
      <mp-badge content="{{countUnreadImageTextLive}}"/>
    </view>
    <view class="volc-more-button-icon">
      <image wx:if="{{item.iconUrl || item.src}}" src="{{item.iconUrl || item.src}}" style="{{item.style}}" />
      <mp-icon wx:if="{{item.mpIcon}}" icon="{{item.mpIcon.icon}}" color="{{item.mpIcon.color}}" size="{{item.mpIcon.size}}"></mp-icon>
    </view>
  </view>
  <view wx:if="{{innerIconList.length > 0}}" class="volc-more-button" bindtap="openDrawer">
    <view class="volc-more-button-icon volc-more-button-icon-more">
      <mp-icon icon="more" color="#fff" size="{{25}}" />
    </view>
  </view>
</view>
<Drawer id='volc-more-button-drawer' needCancel="{{true}}">
  <view class="volc-more-button-box">
    <view class="volc-icon-box" style="{{item.containerStyle}}" wx:for="{{innerIconList}}" wx:for-item="item" wx:key="key" data-key="{{item.key}}" bindtap="innerIconClick">
      <view class="volc-icon">
        <view class="volc-icon-inner">
          <image wx:if="{{item.iconUrl || item.src}}" src="{{item.iconUrl || item.src}}" style="{{item.style}}" />
          <mp-icon wx:if="{{item.mpIcon}}" icon="{{item.mpIcon.icon}}" color="{{item.mpIcon.color}}" size="{{item.mpIcon.size}}"></mp-icon>
        </view>
      </view>
      <view class="volc-name">{{item.title || item.name}}</view>
    </view>
  </view>
</Drawer>
