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

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

	</view>
</template>

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

<style lang="scss" scoped>
	.layout-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: linear-gradient(180deg, #B9D3FF 0%, #F2F7FF 22.23%);
		
		.capsule-box {
			padding-left: 24rpx;
			padding-right: 24rpx;
		}
		
		.content-box {
			/* 内容区域占满剩余空间 */
			flex-grow: 1;
			padding: 0 24rpx 16rpx 24rpx;
		}
	}
</style>