From c7bd6db3190ff5c4b55d004db0b9fa944604925f Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 18 十月 2024 11:09:15 +0800
Subject: [PATCH] Merge branch 'lsf-topTask'
---
src/components/core/BaseContentLayout.vue | 37 ++++++++++++++++++++++++++++++-------
1 files changed, 30 insertions(+), 7 deletions(-)
diff --git a/src/components/core/BaseContentLayout.vue b/src/components/core/BaseContentLayout.vue
index 90354d9..46135f0 100644
--- a/src/components/core/BaseContentLayout.vue
+++ b/src/components/core/BaseContentLayout.vue
@@ -1,15 +1,15 @@
<template>
<el-container>
- <el-header class="el-header">
+ <el-header ref="headerRef" class="el-header">
<slot name="header"></slot>
</el-header>
<el-container>
- <el-aside class="el-aside">
+ <el-aside class="el-aside" :style="'height: ' + mainHeight">
<el-scrollbar>
<slot name="aside"></slot>
</el-scrollbar>
</el-aside>
- <el-main class="el-main">
+ <el-main class="el-main" :style="'height: ' + mainHeight">
<slot name="main"></slot>
</el-main>
</el-container>
@@ -19,6 +19,28 @@
<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>
@@ -26,23 +48,24 @@
.el-aside {
/* width: initial; */
position: relative;
- height: calc(100vh - 60px * 2 - 20px * 2);
+ /* height: calc(100vh - 60px * 2 - 20px * 2); */
/* background-color: aqua; */
/* overflow-y: auto; */
border-right: 1px solid var(--el-color-info-light-7);
}
.el-header {
- /* height: initial; */
- padding: 0;
+ 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);
+ /* height: calc(100vh - 60px * 2 - 20px * 2); */
padding: initial;
padding-left: 20px;
/* overflow: hidden; */
--
Gitblit v1.9.3