<!--为什么没有设置一个cover-image用来承载背景图？因为CapsuleBar在不同机型上大小是动态变化的-->
<!--cover-image又不能设置填充方式，所以将此部分开放给用户处理是最佳的选择-->
<view class="container" style="padding-top: {{hasPadding?titleBarHeight+statusBarHeight:'0'}}rpx">
  <!--胶囊栏-->
  <cover-view class="capsule-bar" style="background-color: {{bgColor}};">
    <!--状态栏-->
    <!--这里加4是因为不加4的时候statusBar和titleBar之间容易出现一条白线，所以加上4让两部分重叠，消除白线-->
    <cover-view
      class="status-bar"
      style="height: {{statusBarHeight+4}}rpx;background-color: {{statusBarColor}};"
    ></cover-view>

    <!--标题栏-->
    <cover-view
      class="title-bar"
      style="height: {{titleBarHeight}}rpx;background-color: {{titleBarColor}};"
    >
      <cover-view wx:if="{{!hiddenTitle}}" class="title l-title-class" style="color: {{titleColor}};">{{title}}</cover-view>
      <slot name="title"/>
    </cover-view>

    <!--胶囊按钮-->
    <cover-view
      wx:if="{{!hiddenCapsule}}"
      class="capsule-button"
      style="border-color: rgba({{capsuleColor==='black'?'0,0,0,0.1':'255,255,255,0.25'}});background-color: rgba({{capsuleColor==='black'?'255,255,255,0.6':'0,0,0,0.15'}});width: {{capsuleButtonInfo.width}}px;height: {{capsuleButtonInfo.height}}px;left: {{capsuleButtonInfo.left}}px;top: {{capsuleButtonInfo.top}}px;"
    >
      <!--左侧按钮-->
      <cover-view mut-bind:tap="onTapLeftButton"
                  catch:longpress="onLongPressLeftButton"
                  hover-class="icon-wrapper-hover-{{capsuleColor}}"
                  class="icon-wrapper"
                  style="width: {{capsuleButtonInfo.width/2}}px;height: {{capsuleButtonInfo.height}}px;">
        <cover-image
          class="icon-left"
          style="width:{{capsuleLeftIconWidth?capsuleLeftIconWidth+'rpx':''}};height:{{capsuleLeftIconHeight?capsuleLeftIconHeight+'rpx':''}};"
          src="{{capsuleLeftIconPath?capsuleLeftIconPath:'icons/capsule-left-'+capsuleColor+'.png'}}"></cover-image>
      </cover-view>

      <!--分割线-->
      <cover-view class="line"></cover-view>

      <!--右侧按钮-->
      <cover-view mut-bind:tap="onTapRightButton"
                  catch:longpress="onLongPressRightButton"
                  hover-class="icon-wrapper-hover-{{capsuleColor}}"
                  class="icon-wrapper"
                  style="width: {{capsuleButtonInfo.width/2}}px;height: {{capsuleButtonInfo.height}}px;">
        <cover-image
          class="icon-right"
          style="width：{{capsuleRightIconWidth?capsuleRightIconWidth+'rpx':''}};height:{{capsuleRightIconHeight?capsuleRightIconHeight+'rpx':''}}"
          src="{{capsuleRightIconPath?capsuleRightIconPath:'icons/capsule-right-'+capsuleColor+'.png'}}"></cover-image>
      </cover-view>
    </cover-view>
  </cover-view>

  <view class="content-container">
    <slot></slot>
  </view>
</view>
