<view class="custom-class capsule-bar-container" style="{{ capsuleBarStyle }}">
  <!-- 填充区域 -->
  <view
    wx:if="{{ fixed && placeholder }}"
    class="capsule-bar-placeholder"
    style="visibility: hidden"
  />

  <!--胶囊导航栏-->
  <view class="capsule-class capsule-bar-area capsule-bar-{{ fixed ? 'fixed' : 'static'  }}">
    <!-- 前景色 -->
    <view
      class="capsule-bar-bg"
      style="background:{{ background }};opacity:{{ bufferBackground ? opacity : 1 }}"
    ></view>

    <view class="capsule-bar-row">
      <!-- 背景色 -->
      <view
        class="capsule-bar-bg"
        wx:if="{{ bufferBackground }}"
        style="background:{{ bufferBackground }};opacity:{{ 1 - opacity }}"
      ></view>
      <!-- 图标胶囊  -->
      <view
        wx:if="{{ !hiddenIcon }}"
        class="icons-class capsule-bar-icon {{ hiddenBack || hiddenHome ?  'capsule-bar-icon--single': '' }}"
      >
        <iconfont
          wx:if="{{ !hiddenBack }}"
          class="icon"
          name="back"
          size="30"
          bind:tap="onClickBack"
        />
        <slot wx:else name="left-icon" />

        <iconfont
          wx:if="{{ !hiddenHome }}"
          class="icon"
          name="home"
          size="30"
          bind:tap="onClickHome"
        />
        <slot wx:else name="right-icon" />
      </view>
      <slot name="left" />

      <!-- 标题栏 -->
      <view wx:if="{{ title }}" class="capsule-bar-content">
        <view class="title-class capsule-bar-title capsule-bar-title--{{ titlePosition }}"
          >{{ title }}
        </view>
      </view>
      <slot wx:else name="title" />
    </view>

    <slot></slot>
  </view>
</view>
