PunchSettle-MiniProgram/components/main-layout/main-layout.vue

<template>
	<view class="layout-container">
		<!-- 顶部填充区 -->
		<view class="top-fill" :style="{height: safeAreaStore.statusBarHeight+'px'}"></view>
		
		<!-- 顶部胶囊区 -->
		<view class="capsule-container" 
		:style="{
			height: safeAreaStore.capsuleBarHeight+'px',
			width: safeAreaStore.capsuleBarLeft+'px',
			'padding-top': safeAreaStore.capsuleBarMarginTop+'px', 
			'padding-bottom': safeAreaStore.capsuleBarMarginBottom+'px'}">
			<slot name="capsule"></slot>
		</view>
		
		<!-- 内容区 -->
		<view class="content-container">
			<slot></slot>
		</view>
		
		<!-- 底部填充区 -->
		<view class="bottom-fill" :style="{height: safeAreaStore.bottomHeight+'px'}"></view>

	</view>
</template>

<script setup>
	import { useSafeAreaStore } from '@/stores/safeArea.js';
	const safeAreaStore = useSafeAreaStore();
</script>

<style lang="scss" scoped>
	// 不知道到为啥这里不写点东西全局就会失效，所以随便写点
	.tmp {}
</style>