<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false">
			<view class="slot-wrap">
				<div class="header">
					<div></div>
				</div>
			</view>
		</u-navbar>
		<view class="index-container" >
			<view class="content" :style="[bodyHeight]">
				1
			</view>
		</view>
	</view>
</template>

<script>
	// import tabbar from '../../component/tabbar.vue'
	export default {
		// components:{
		// 	tabbar
		// },
		data() {
			return {
				 statusBarHeight: 0, //状态栏高度，单位：px
				  titleBarHeight: 0, //标题栏高度，单位：px
				  headerHeight:0 , //页面头部高度，单位：px
				  bodyHeight:{}
			}
		},
		onLoad() {
			console.log( this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight)
		},
		onReady() {
			 this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +
			     uni.getMenuButtonBoundingClientRect().height;
			   //3.计算 页面头部高度，单位：px，计算公式：导航栏高度 + 状态栏高度
			   this.headerHeight = this.statusBarHeight + this.titleBarHeight;
			   console.log('kkkkkkkkkkk')
			   console.log(this.headerHeight)
			   this.bodyHeight = {
				   height: `calc(100vh - ${this.headerHeight}px)`
			   }
		},
		onShow() {},
		computed: {
			counts() {
				return this.$store.state.count
			}
		},
		methods: {
			getStore() {
				console.log(this.$store.state)
				this.count = this.$store.state.count
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .status_bar {
	// 	height: var(--status-bar-height);
	// 	width: 100%;
	// }
	.header{
		height: 100%;
		width: 100%;
		>div{
			width: 40rpx;
			height: 40rpx;
			background: url('../../static/home.png');
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			margin-left: 46rpx;
		}
	}
	.content{
		border: 1rpx solid red;
		box-sizing: border-box;
	}
</style>