FiDA_Front/src/views/home/index.vue

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

<script setup lang="ts">
	import { computed } from 'vue'
	import LeftNav from './left-nav.vue'
	import TopNav from './top-nav.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;
		user-select: none;
		> .right-main {
			flex: 1;
			display: flex;
			flex-direction: column;
			> .bottom-view {
				flex: 1;
				overflow: hidden;
				// background-color: #fff;
				// display: flex;
			}
		}
	}
</style>