<template>
	<div style="overflow-y: auto">
		<a-layout>
			<Header @onChangeCurrent="onChangeCurrent" />
			<a-layout-content class="main-content-wrapper">
				<div class="flc">
					<router-view v-slot="{ Component }" :key="route.fullPath" style="width: 1200px"></router-view>
				</div>
			</a-layout-content>
		</a-layout>
		<Footer />
	</div>
</template>

<script setup>
	import Header from './components/Header.vue'
	import Footer from './components/Footer.vue'
	import { useRouter, useRoute } from 'vue-router'
	const route = useRoute()
	const router = useRouter()
	const ResourceDetailsRef = ref(null)
	const onChangeCurrent = (current) => {
		router.push({
			path: '/' + current
		})
	}
</script>

<style scoped>
	.flc {
		display: flex;
		justify-content: center;
	}
	.main-content-wrapper {
		min-height: calc(100vh - 130px);
	}
</style>
