<template>
	<view class="content">
		<view class="status-bar-box">
			<view class="status-bar"></view>
		</view>
		<view class="navigation-box">
			<view class="navigation" :class="props.postion ?'':'navigation-center'">
				<text>{{props.title}}</text>
			</view>
		</view>
	</view>

</template>

<script setup>
const props = defineProps({
	title: String,
	postion:{type:Boolean,default:true}
});
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		z-index: 99;
		.status-bar-box {
			height: var(--status-bar-height);
			width: 100%;
			.status-bar {
				position: fixed;
				top: 0;
				width: 100% !important;
				height: var(--status-bar-height);
				background: #F5F6FC !important;
				z-index: 90;
			}
		}

		.navigation-box {
			height: 88rpx !important;
			.navigation {
				position: fixed;
				left: var(--window-left);
				right: var(--window-right);
				height: 88rpx;
				line-height: 88rpx;
				display: flex;
				justify-content: space-between;
				// justify-content: center;
				box-sizing: border-box;
				padding: 0 36rpx;
				background-color: #F5F6FC;
				z-index: 90;
				text {
					font-size: 33rpx;
					font-weight: 700;
				}
			}
			.navigation-center {
				position: fixed;
				left: var(--window-left);
				right: var(--window-right);
				height: 88rpx;
				line-height: 88rpx;
				display: flex;
				//justify-content: space-between;
				justify-content: center;
				box-sizing: border-box;
				padding: 0 36rpx;
				background-color: #F5F6FC;
				z-index: 90;
				text {
					font-size: 33rpx;
					font-weight: 700;
				}
			}
		}
	}
</style>
