<script setup lang="ts">
|
import { ref } from 'vue';
|
import Header from './layout/Header.vue';
|
import TreeMenu from './components/TreeMenu.vue';
|
|
const menuItem = ref('/')
|
|
const handMenu = (key: string) => {
|
menuItem.value = key;
|
};
|
|
</script>
|
|
<template>
|
<div class="common-layout">
|
<el-container>
|
<el-header height="60px">
|
<Header @selectMenu="handMenu"/>
|
</el-header>
|
<el-container>
|
<el-aside width="240px">
|
<TreeMenu :menuItem="menuItem"/>
|
</el-aside>
|
<el-main>
|
<RouterView />
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<style lang="less">
|
.common-layout {
|
height: 100vh;
|
.el-container {
|
height: 100%;
|
}
|
.el-header {
|
background-color: #fff;
|
color: #333;
|
line-height: 60px;
|
border-bottom: 1px solid #eee;
|
}
|
.el-aside {
|
background-color: #fff;
|
border-right: 1px solid #eee;
|
}
|
.el-main {
|
background-color: #f5f7fa;
|
}
|
}
|
</style>
|
