<template>
|
<el-container class="el-container">
|
<el-aside class="el-aside">
|
<SiderMenu :collapse="isCollapsed" @nav-page="navPage"></SiderMenu>
|
</el-aside>
|
<el-container>
|
<el-header ref="headerRef" 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"
|
:style="{
|
maxHeight: contentMaxHeight + 'px',
|
padding: mainPadding + 'px'
|
}"
|
>
|
<Content></Content>
|
<!-- <el-backtop
|
target=".el-main .el-scrollbar__wrap"
|
:right="10"
|
:bottom="100"
|
style="z-index: 1000;"
|
>
|
<div class="back-top">
|
<el-icon><ArrowUpBold /></el-icon>
|
<span style="">返回顶部</span>
|
</div>
|
</el-backtop> -->
|
</div>
|
</el-scrollbar>
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
import { computed } from 'vue';
|
|
export default {
|
data() {
|
return {
|
isCollapsed: false,
|
navTitles: [],
|
headerHeight: 60,
|
mainPadding: 10,
|
contentMaxHeight: NaN
|
};
|
},
|
methods: {
|
collapsedSider(b) {
|
this.isCollapsed = b;
|
},
|
navPage(titles) {
|
this.navTitles = titles;
|
}
|
},
|
mounted() {
|
this.headerHeight = this.$refs.headerRef.$el.offsetHeight;
|
this.contentMaxHeight =
|
window.innerHeight - this.headerHeight - this.mainPadding * 2;
|
},
|
provide() {
|
return {
|
headerHeight: computed(() => this.headerHeight),
|
mainPadding: computed(() => this.mainPadding),
|
contentMaxHeight: computed(() => this.contentMaxHeight)
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
.el-container {
|
/* min-height: 820px; */
|
}
|
.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 {
|
/* --main-padding: 10px; */
|
/* padding: var(--main-padding) calc(var(--main-padding) / 2); */
|
/* padding: var(--main-padding); */
|
/* max-height: calc(100vh - 60px - var(--main-padding) * 2); */
|
/* background-color: aqua; */
|
/* 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>
|
