<template>
	<div class="main-page">
		<div class="main-logo">
			<div class="logo"></div>
		</div>

		<!--头部份-->
		<index-header class="main-header" />

		<!--面包屑-->
		<!--		<index-breadcrumb class="main-breadcrumb"/>-->

		<!--左侧菜单-->
		<index-menu class="main-aside" />

		<div class="main-content">
			<router-view :key="$route.fullPath" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import IndexHeader from '../views/index/components/IndexHeader.vue'
import IndexMenu from '../views/index/components/IndexMenu.vue'
</script>

<script lang="ts">
export default {
	name: 'Index'
}
</script>

<style lang="scss">
.page {
	padding: 20px;
	border-radius: 10px;
	background-color: white;
	box-shadow: 0 5px 15px 3px rgba(4, 32, 24, 0.15);
}
</style>

<style lang="less" scoped>
@import '@/assets/scss/theme';

.main-page {
	height: 100vh;
	background: #f0f2f5;
	/* 网格布局 */
	display: grid;
	/* 设置行宽 */
	grid-template-columns: auto 1fr;
	/* 设置列高 */
	grid-template-rows: auto 1fr;
	/* 设置区域 */
	grid-template-areas:
		'logo header'
		//"aside content"
		'aside content';

	.main-logo {
		grid-area: logo;
		height: 64px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: @primary-color;

		.logo {
			width: @menu-header-logo-width;
			height: @menu-header-logo-height;
			background: @menu-header-logo-url;
			background-size: 100% 100%;
		}
	}

	.main-header {
		/* 头部区域 */
		grid-area: header;
	}

	// 导航区域
	.main-breadcrumb {
		grid-area: breadcrumb;
	}

	.main-aside {
		/* 菜单区域 */
		grid-area: aside;
	}

	.main-content {
		/* 内容部分 */
		grid-area: content;
		padding: 30px;
		box-sizing: border-box;
		scrollbar-width: none; /* firefox */
		-ms-overflow-style: none; /* IE 10+ */
		overflow: hidden;
		user-select: auto;
		background-color: white;

		&::-webkit-scrollbar {
			display: none; /* Chrome Safari */
		}
	}
}
</style>
