<view class="am-tips-dialog am-tips-dialog-{{type}} {{className}}" 
  a:if="{{show}}">
  <view class="am-tips-dialog-wrap">
    <image a:if="{{iconUrl}}" 
      size="{{iconSize}}" 
      style="{{`width: ${iconSize}px; height: ${iconSize}px`}}" 
      class="am-tips-dialog-icon" 
      src="{{iconUrl}}" />
    <view class="am-tips-dialog-content">
      <slot name="content" />
    </view>
    <view style="margin-left: 12px; display: inherit">
      <slot name="operation" />
    </view>
    <view style="display: inline" 
      class="am-tips-dialog-close" 
      onTap="onCloseTap">
      <am-icon type="close" 
        color="rgba(255, 255, 255, 0.6)" 
        size="{{iconSizeClose}}" />
    </view>
    <view class="am-tips-dialog-arrow {{`am-tips-dialog-arrow-${arrowPosition}`}}" 
      style= "background-image: {{`url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2215px%22%20height%3D%228px%22%20viewBox%3D%220%200%2030%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2058%20(84663)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ERectangle%2015%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22%E7%BB%84%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.746394159%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20L30%2C0%20L18.0728851%2C14.3125379%20C16.6586288%2C16.0096454%2014.13637%2C16.2389417%2012.4392624%2C14.8246854%20C12.2534101%2C14.6698085%2012.0819918%2C14.4983901%2011.9271149%2C14.3125379%20L0%2C0%20L0%2C0%20Z%22%20id%3D%22Rectangle-15%22%20fill%3D%22%23${arrowColor}%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');`}}" />
  </view>
</view>