uniAPP·顶部导航安全区设计head（封装成组件）

<template>
	<view class="head" :style="'color:'+fontColor">
		<view class="head_1"
			:style="'height:'+ head_bottom +'px;background-color:'+ backgroundColor +';overflow: hidden;'">
			<view class="head_div_Applet" :style="'height:'+ head_top +'px;max-height:'+head_top +'px;'"></view>
			<!-- <view><slot name="slot"></slot></view> -->
		</view>
		<view class="head_2"
			:style="'height:'+ head_bottom +'px;background-color:'+ backgroundColor +';overflow: hidden;'">
			<view class="head_div_Applet" :style="'height:'+ head_top +'px;max-height:'+head_top +'px;'"></view>
			<!-- 导航标题 -->
			<view class="head_2_text">
				导航标题
	
			</view>
		</view>
	</view>
</template>

data() {
			return {
				// ====================== 顶部导航 =======================
				fontColor: '#000000', //字体颜色
				backgroundColor: '#66ccff', //背景颜色
				// #ifdef H5
				head_top: 5,
				head_bottom: 36, //H5默认值
				head_width: 0,
				head_height: 36, //APP
				// #endif 
				// #ifndef H5
				head_top: 3,
				head_bottom: 68, //H5默认值
				head_width: 0,
				head_height: 36, //APP
				// #endif 
				// #ifdef MP-WEIXIN || MP-QQ
				head_top: uni.getMenuButtonBoundingClientRect().top,
				head_bottom: uni.getMenuButtonBoundingClientRect().bottom,
				head_width: uni.getMenuButtonBoundingClientRect().width,
				head_height: uni.getMenuButtonBoundingClientRect().height,
				// #endif 
				// ======================== end ========================
				
			}
		},

.head {
		/* 顶部导航 */
		/* 文字阴影 */
		text-shadow: 0 .15rem .2rem rgba(0, 0, 0, .2);
	}

	.head_1 {
		/* 内容隔离区 */
		width: 100%;
		float: left;
		padding-bottom: 5px;
		background-color: transparent;
	}

	.head_2 {
		/* 浮动置顶区 */
		width: 100%;
		float: left;
		padding-bottom: 5px;
		background-color: transparent;
		position: fixed;
		z-index: 9999;
		/* 边框阴影 [右偏] [下偏] [模糊度] [边框宽度] [颜色]*/
		box-shadow: 0px 0px 1px 1px #c1c1ff;
	}

	.head_div_Applet {
		/* 小程序安全区 */
		width: 100%;
		min-height: var(--status-bar-height);
		/* 状态栏目安全区 */
		max-height: env(safe-area-inset-bottom);
		/* iphome刘海安全区 */
		float: left;
	}

	.head_2_text {
		/* 标题区 */
		width: 100%;
		height: 36px;
		overflow: hidden;
		font-size: 16px;
		padding-left: 10px;
		/* 居中 */
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	.head_2_text image {
		width: 34px;
		height: 32px;
		float: right;
	}