<template>
	<common-layout>
		<view class="mobile-sub-layout" :style="{ 'padding-top': appStore.headerStyle.height + 'px' }">
			<MobileHeader
				:title="title"
				:lineHeight="lineHeight"
			>
				<template #right>
					<view>
						<slot name="header-right"></slot>
					</view>
				</template>
			</MobileHeader>
			<slot></slot>
		</view>
	</common-layout>
</template>

<script setup>
	import MobileHeader from '@/components/header/MobileHeader'
	import { useAppStore } from '@/store/useAppStore'
	
	const appStore = useAppStore()
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		lineHeight: {
			type: Number,
			default: 0
		}
	})
</script>

<style lang="scss" scoped>
	.mobile-sub-layout {
		position: relative;
	}
</style>