| | |
| | | <template> |
| | | <el-container id="body-wrapper"> |
| | | <!-- 头部 --> |
| | | <Header /> |
| | | <el-container class="my-el-content"> |
| | | <!-- 侧边导航栏 --> |
| | | <Menu /> |
| | | <AsideBar /> |
| | | <el-container class="my-el-container"> |
| | | <!-- 内容区域 --> |
| | | <Main /> |
| | | </el-container> |
| | | <!-- 侧边导航栏 --> |
| | | <Menu /> |
| | | <el-container class="content"> |
| | | <!-- 头部 --> |
| | | <Header /> |
| | | <!-- 内容区域 --> |
| | | <Main /> |
| | | </el-container> |
| | | </el-container> |
| | | </template> |
| | |
| | | import Main from "./components/Main"; |
| | | import Menu from "./components/Menu"; |
| | | import Header from "./components/Header"; |
| | | import AsideBar from "./components/AsideBar" |
| | | export default { |
| | | name: "layout", |
| | | components: { |
| | | Menu, |
| | | Main, |
| | | Header, |
| | | AsideBar |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | margin-top: 60px; |
| | | } |
| | | |
| | | .my-el-container { |
| | | .content{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 100%; |
| | | } |
| | | |
| | | .el-main { |
| | | background-color: #f0f2f5; |
| | | background-color: #fff; |
| | | color: #333; |
| | | text-align: center; |
| | | line-height: 160px; |