<template>
	<div class="home">
		<div class="left-nav"></div>
		<div class="right-main">
			<div class="top-nav"></div>
			<div class="bottom-view"><router-view></router-view></div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import { useGlobalStore } from '@/stores'
	const globalStore = useGlobalStore()
	const loading = computed(() => globalStore.state.loading)
</script>

<style lang="less" scoped>
	.home {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		> .left-nav {
			width: 29.5rem;
			height: 100%;
			background-color: #a12828;
		}
		> .right-main {
			flex: 1;
			display: flex;
			flex-direction: column;
			> .top-nav {
				height: 8rem;
				background-color: #ea5050;
			}
			> .bottom-view {
				flex: 1;
				background-color: #fff;
				overflow: hidden;
				display: flex;
			}
		}
	}
</style>
