<template>
|
<el-container>
|
<el-header ref="headerRef" class="el-header">
|
<slot name="header"></slot>
|
</el-header>
|
<el-container>
|
<el-aside class="el-aside" :style="'height: ' + mainHeight">
|
<el-scrollbar :noresize="true" style="position: relative;">
|
<slot name="aside"></slot>
|
</el-scrollbar>
|
</el-aside>
|
<el-main class="el-main" :style="'height: ' + mainHeight">
|
<slot name="main"></slot>
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
export default {
|
// 右侧操作界面基础布局
|
data() {
|
return {
|
mainHeight: 'calc(100vh - 60px * 2 - var(--el-main-padding) * 2)'
|
};
|
},
|
methods: {
|
// 内容高度
|
calHeight() {
|
if (this.$refs.headerRef) {
|
const h1 = this.$refs.headerRef.$el.offsetHeight;
|
const h = h1;
|
return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2 + 6px)`;
|
} else {
|
return `calc(100vh - 60px * 2 - var(--el-main-padding) * 2)`;
|
}
|
}
|
},
|
mounted() {
|
setTimeout(() => {
|
this.mainHeight = this.calHeight();
|
}, 150);
|
}
|
};
|
</script>
|
|
<style scoped>
|
.el-aside {
|
/* width: initial; */
|
/* overflow-x: auto; */
|
position: relative;
|
/* height: calc(100vh - 60px * 2 - 20px * 2); */
|
/* background-color: aqua; */
|
/* overflow-y: auto; */
|
border-right: 1px solid var(--el-color-info-light-7);
|
/* box-shadow: -10px 0px 4px rgba(0, 0, 0, 0.12) inset; */
|
}
|
|
.el-header {
|
height: initial;
|
padding: 0 0 0px 0;
|
/* background-color: rgb(216, 201, 201); */
|
/* border-bottom: 1px solid var(--el-color-info-light-7); */
|
margin-bottom: 4px;
|
}
|
|
.el-main {
|
position: relative;
|
/* background-color: whitesmoke; */
|
/* height: calc(100vh - 60px * 2 - 20px * 2); */
|
padding: initial;
|
padding-left: 20px;
|
/* overflow: hidden; */
|
}
|
</style>
|
