<template>
	<!-- 主容器：使用 el-container 布局结构 -->
	<el-container>
		<!-- 引入顶部导航组件 -->
		<index-header></index-header>
		<!-- 内层容器 -->
		<el-container>
			<!-- 引入左侧菜单栏组件（静态） -->
			<index-aside></index-aside>
			<!-- 引入主内容区域组件 -->
			<index-main></index-main>
		</el-container>
	</el-container>
</template>

<script>
	// 导入顶部导航组件
	import IndexHeader from '@/components/index/IndexHeader'
	// 导入左侧菜单栏组件（静态）
	import IndexAside from '@/components/index/IndexAsideStatic'
	// 导入主内容区域组件
	import IndexMain from '@/components/index/IndexMain'

	export default {
		// 注册组件，使其可以在模板中使用
		components: {
			IndexHeader, // 顶部导航组件
			IndexAside,  // 左侧菜单栏组件
			IndexMain    // 主内容区域组件
		}
	}
</script>

<style lang="scss" scoped>
	// 铺满全屏样式
	.el-container {
		position: absolute;   /* 绝对定位 */
		width: 100%;          /* 宽度占满整个视口 */
		top: 0;               /* 距离顶部为0 */
		left: 0;              /* 距离左侧为0 */
		bottom: 0;            /* 距离底部为0，实现高度自适应 */
	}
</style>
