<!--前端模板-->
<template>
	<div class="common-layout">
		<el-container>
			<el-header>
			<nav-navigation></nav-navigation>
			</el-header>
			<el-main class="main">
				<div class="container">
					<el-row :gutter="20">
						<el-col :span="6">
							<el-menu
								:default-active="state.activeIndex"
								router
							>
								<el-menu-item  v-for="item in state.userMenu" :index="item.path">
									<span>{{item.name}}</span>
								</el-menu-item>
							</el-menu>
						</el-col>
						<el-col :span="18">
							<router-view></router-view>
						</el-col>
					</el-row>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const  state = reactive({
	activeIndex:'/user',
	userMenu:[
		{name: '个人中心', path: '/user'},
		{name: '预约记录', path: '/order'},
		// {name: '用户文创', path: '/fronttopic'},
	]
})

</script>
<style scoped>
.main{
	width: 100%;
	height: calc(100vh - 60px);
	background-color: #f3f3f4;
}
.container{
	width: 1200px;
	margin: 0 auto;
}

</style>
