From 4aa86b1ec441c4e358e1cc488d8f021fb80f1355 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 17 九月 2025 17:34:35 +0800
Subject: [PATCH] 2025.9.17 数据产品（待完成）
---
src/components/core/BaseContentLayout.vue | 36 ++++++++++++++++++++++++++++++------
1 files changed, 30 insertions(+), 6 deletions(-)
diff --git a/src/components/core/BaseContentLayout.vue b/src/components/core/BaseContentLayout.vue
index a90aa16..3889435 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-scrollbar>
+ <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">
+ <el-main class="el-main" :style="'height: ' + mainHeight">
<slot name="main"></slot>
</el-main>
</el-container>
@@ -19,17 +19,41 @@
<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);
+ /* 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 {
@@ -43,7 +67,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