From 0906c54770971020cf2d243d06d57a2f6fbbc18c Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 18 十月 2024 13:05:48 +0800
Subject: [PATCH] 1. 添加数据产品目录
---
src/components/core/BaseContentLayout.vue | 32 +++++++++++++++++++++++++++-----
1 files changed, 27 insertions(+), 5 deletions(-)
diff --git a/src/components/core/BaseContentLayout.vue b/src/components/core/BaseContentLayout.vue
index a90aa16..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,7 +48,7 @@
.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);
@@ -43,7 +65,7 @@
.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