You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.4 KiB
67 lines
1.4 KiB
<template> |
|
<view :style="{ backgroundSize:height?`100% ${height}`:' ',backgroundImage:`url(${backgroundImage})`,minHeight:height}" class="header" > |
|
<view class="top" :style="{height:styles.top?styles.top:''}"></view> |
|
<uni-nav-bar :border="false" :height="styles.height" style="font-size: 34rpx;" @clickLeft='backFn' color='white' backgroundColor="rgba(0,0,0,0)" :left-icon="leftIcon" :title="title" /> |
|
<view> |
|
<slot name="coment"/> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name:'topBar', |
|
props:{ |
|
leftIcon:{ |
|
type: String, |
|
default: "back" |
|
}, |
|
title:{ |
|
type: String, |
|
default: "标题" |
|
}, |
|
height:{ |
|
type: String, |
|
default: "403rpx" |
|
}, |
|
backgroundImage:{ |
|
type: String, |
|
default: "https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png" |
|
}, |
|
}, |
|
data() { |
|
return { |
|
styles:{ |
|
top:' ' |
|
} |
|
} |
|
}, |
|
mounted() { |
|
this.styles = uni.getMenuButtonBoundingClientRect() |
|
Object.keys(this.styles).forEach(key=>{ |
|
this.styles[key] = this.styles[key] + 'px' |
|
}) |
|
console.log(this.styles,'*-*-*') |
|
}, |
|
methods: { |
|
backFn(){ |
|
uni.navigateBack() |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.uni-nav-bar-text{ |
|
font-size: 34rpx !important; |
|
} |
|
.header { |
|
color: white; |
|
background-size: 100% 100%; |
|
position: relative; |
|
background-repeat:no-repeat |
|
} |
|
.uni-navbar__header-btns-right { |
|
padding: 0 !important; |
|
} |
|
</style>
|
|
|