<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>
|
</el-config-provider>
|
</template>
|
|
<script>
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
|
|
export default {
|
data() {
|
return {
|
isCollapsed: false,
|
navTitles: [],
|
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>
|
