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.
68 lines
1.4 KiB
68 lines
1.4 KiB
2 years ago
|
<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>
|