| | |
| | | <script setup lang="ts"> |
| | | // import { RouterView } from "vue-router"; |
| | | import Header from './layout/Header.vue'; |
| | | import TreeMenu from './components/TreeMenu.vue'; |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="common-layout"> |
| | | <el-container> |
| | | <el-header height="60px"> |
| | | <Header/> |
| | | </el-header> |
| | | <el-container> |
| | | <el-aside width="240px"> |
| | | <TreeMenu /> |
| | | </el-aside> |
| | | <el-main> |
| | | <RouterView /> |
| | | </el-main> |
| | | </el-container> |
| | | </el-container> |
| | | </div> |
| | | <RouterView /> |
| | | </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> |
| | | <script setup lang="ts"> |
| | | |
| | | </script> |
| | | <style></style> |