61 lines
3.0 KiB
Plaintext
61 lines
3.0 KiB
Plaintext
<!--为什么没有设置一个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>
|