<view class="am-notice {{className}} {{type ==='normal'?'':'am-notice-'+type}}" a:if="{{show && capsule !== true}}" onTap="onNoticeTap">
  <view class="am-notice-thumb" a:if="{{showIcon}}">
    <am-icon class="am-notice-thumb-icon" a:if="{{type === 'error'}}" type="help"></am-icon>
    <am-icon class="am-notice-thumb-icon" a:else type="voice"></am-icon>
  </view>
  <view class="am-notice-content am-notice-content-{{$id}}">
    <block a:if="{{showShadow}}">
      <view a:if="{{enableMarquee}}" class="am-notice-scroll-left am-notice-{{type === 'normal'?'':type}}-scroll-left"></view>
      <view a:if="{{enableMarquee}}" class="am-notice-scroll-right am-notice-{{type === 'normal'?'':type}}-scroll-right"></view>
    </block>
    <view
      a:if="{{canIUseTransitionEnd}}"
      class="am-notice-marquee am-notice-marquee-{{$id}}"
      style="{{marqueeStyle}} display: {{enableMarquee ? 'inline-block' : 'block'}}"
      onTransitionEnd="onTransitionEnd"
    >
      <slot></slot>
    </view>
    <view
      a:else
      class="am-notice-marquee am-notice-marquee-{{$id}}"
      style="right: {{animatedWidth}}px; display: {{enableMarquee ? 'inline-block' : 'block'}}"
    >
      <slot></slot>
    </view>
  </view>
  <view a:if="{{mode || action !== ''}}" class="am-notice-operation">
    <!-- 左边的操作区域 -->
    <view a:if="{{actionLeft !==''}}" class="am-notice-operation-text am-notice-operation-left" onTap="onActionLeftTap" hover-class="am-notice-operation-text__hover" hover-start-time="0" hover-stay-time="0">{{actionLeft?actionLeft:'查看详情'}}</view>
    <!-- 右边的操作区域 -->
    <view a:if="{{action !==''}}" class="am-notice-operation-text" onTap="onOperationTap" hover-class="am-notice-operation-text__hover" hover-start-time="0" hover-stay-time="0">{{action?action:'查看详情'}}</view>
    <view a:elif="{{mode=='closable'}}" onTap="onOperationTap" hover-class="am-notice-operation-text__hover" hover-start-time="0" hover-stay-time="0">
      <am-icon type="close" class="am-notice-operation-icon"></am-icon>
    </view>
    <view a:elif="{{mode=='link' && actionLeft ==''}}" hover-class="am-notice-operation-text__hover" hover-start-time="0" hover-stay-time="0">
      <am-icon type="right" class="am-notice-operation-icon"></am-icon>
    </view>
    <view a:elif="{{mode=='link' && actionLeft !==''}}" onTap="onOperationTap" hover-class="am-notice-operation-text__hover" hover-start-time="0" hover-stay-time="0">
      <am-icon type="right" class="am-notice-operation-icon"></am-icon>
    </view>
  </view>
  <view class="{{transparent?'am-notice-transparent-bg':'am-notice-' + type + '-bg'}}"></view>
</view>
<view class="am-notice-capsule-wrap" a:elif="{{show && capsule}}" onTap="onNoticeTap">
  <view class="am-notice am-notice-capsule {{className}}">
    <view class="am-notice-capsule-item" a:if="{{capsuleItem.length > 0}}">
      <block a:for="{{capsuleItem}}">
        <image a:if="{{index <= 2}}" src="{{item}}" class="am-notice-capsule-img" />
      </block>
    </view>
    <view class="am-notice-capsule-content am-notice-content-{{$id}}" hover-class="am-notice-capsule-content__hover" hover-start-time="0" hover-stay-time="0">
      <slot></slot>
    </view>
    <view class="am-notice-capsule-bg"></view>
  </view>
</view>