| | |
| | | <template> |
| | | <el-config-provider :locale="locale"> |
| | | <el-container class="el-container"> |
| | | <el-aside class="el-aside" |
| | | ><SiderMenu |
| | | :collapse="isCollapsed" |
| | | @collapsed-sider="collapsedSider" |
| | | @nav-page="navPage" |
| | | ></SiderMenu |
| | | ></el-aside> |
| | | <el-container> |
| | | <el-header class="el-header" |
| | | ><Header |
| | | :navTitles="navTitles" |
| | | :collapse="isCollapsed" |
| | | @collapsed-sider="collapsedSider" |
| | | ></Header |
| | | ></el-header> |
| | | <el-main class="el-main"> |
| | | <el-scrollbar> |
| | | <div class="el-main__content"> |
| | | <Content></Content> |
| | | <el-backtop |
| | | target=".el-main .el-scrollbar__wrap" |
| | | :right="40" |
| | | :bottom="100" |
| | | style="width: 120px" |
| | | > |
| | | <div class="back-top"> |
| | | <el-icon><ArrowUpBold /></el-icon> |
| | | <span style="">返回顶部</span> |
| | | </div> |
| | | </el-backtop> |
| | | </div> |
| | | </el-scrollbar> |
| | | </el-main> |
| | | </el-container> |
| | | </el-container> |
| | | <router-view></router-view> |
| | | </el-config-provider> |
| | | </template> |
| | | |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | isCollapsed: false, |
| | | navTitles: [], |
| | | locale: zhCn, |
| | | locale: zhCn |
| | | }; |
| | | }, |
| | | methods: { |
| | | collapsedSider(b) { |
| | | this.isCollapsed = b; |
| | | }, |
| | | navPage(titles) { |
| | | this.navTitles = titles; |
| | | }, |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .el-aside { |
| | | width: initial; |
| | | } |
| | | |
| | | .el-header { |
| | | /* background-color: rgb(216, 201, 201); */ |
| | | border-bottom: 1px solid var(--el-color-info-light-7); |
| | | } |
| | | |
| | | .el-main { |
| | | position: relative; |
| | | /* background-color: bisque; */ |
| | | padding: initial; |
| | | /* max-height: calc(100vh - 60px); */ |
| | | /* overflow: hidden; */ |
| | | } |
| | | |
| | | .el-main__content { |
| | | padding: var(--el-main-padding); |
| | | max-height: calc(100vh - 60px - var(--el-main-padding) * 2); |
| | | /* overflow: auto; */ |
| | | } |
| | | .back-top { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-around; |
| | | height: 100%; |
| | | width: 100%; |
| | | background-color: var(--el-bg-color-overlay); |
| | | box-shadow: var(--el-box-shadow-lighter); |
| | | text-align: center; |
| | | /* line-height: 40px; */ |
| | | color: var(--el-color-info); |
| | | border: var(--el-border); |
| | | font-size: var(--el-font-size-medium); |
| | | border-radius: var(--el-border-radius-base); |
| | | } |
| | | </style> |