From e38ea524ec4107ed7f8b1d7491a4177632dd3402 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 15 十月 2024 11:26:26 +0800
Subject: [PATCH] 部分代码修正
---
src/components/core/BaseContentLayout.vue | 35 ++++++++++++++++++++++++++++-------
1 files changed, 28 insertions(+), 7 deletions(-)
diff --git a/src/components/core/BaseContentLayout.vue b/src/components/core/BaseContentLayout.vue
index 90354d9..ce92424 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,26 @@
<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)`;
+ } else {
+ return `calc(100vh - 60px * 2 - var(--el-main-padding) * 2)`;
+ }
+ }
+ },
+ mounted() {
+ this.mainHeight = this.calHeight();
+ }
};
</script>
@@ -26,23 +46,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