uniapp自定义头部

<template>
	<view class="box">
		<view class="custom-title-box">
			<view class="status-bar-height-box" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="title-box" :style="{height: titleHeight + 'px'}">
				<uni-icons type="back" class="left" size="30" color="#fff" @click="back()"></uni-icons>
				标题
			</view>
		</view>
		<view class="empty-box" :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		
	</view>
</template>
<script>


	export default {
		components: {
		    uParse
		  },
		data() {
			return {
				statusBarHeight: 0,  // 状态栏高度
				titleHeight: 0,  // 标题栏高度
				
			}
		},
		onLoad() {
		
				this.getlist()
		},
		onReady() {
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
			const btnInfo = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = (btnInfo.top - this.statusBarHeight) *2 + btnInfo.height
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			
		},
	}
</script>
<style lang="scss">

.custom-title-box{
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #1678FF;
		.title-box{
			// background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #FFFFFF;
			>image{
				width: 346rpx;
				height: 96rpx;
			}
			.left{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: 24rpx;
				bottom: 10rpx;
			}
		}
	}
	.box{
		width: 750rpx;
		// height: 1624rpx;
		background-color: #F8F8F8;
		position: relative;
	}
	.top{
		position: fixed;
		width: 750rpx;
		height: 30rpx;
		background-color: #1678FF;
		z-index: 991;
	}
	.list{
		width: 702rpx;
		margin:  20rpx auto;
	}
</style>