<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>
