From 58c0f11fe2f23a1be2dec768f9ac02107301a634 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 19 九月 2025 17:30:36 +0800
Subject: [PATCH] 2025.9.19 数据产品（待完成）
---
src/views/HomePage.vue | 43 ++++++++++++++++++++++++++++++++++---------
1 files changed, 34 insertions(+), 9 deletions(-)
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 83ce519..65add8b 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,11 +1,11 @@
<template>
<el-container class="el-container">
- <el-aside class="el-aside"
- ><SiderMenu :collapse="isCollapsed" @nav-page="navPage"></SiderMenu
- ></el-aside>
+ <el-aside class="el-aside">
+ <SiderMenu :collapse="isCollapsed" @nav-page="navPage"></SiderMenu>
+ </el-aside>
<el-container>
- <el-header class="el-header"
- ><Header
+ <el-header ref="headerRef" class="el-header">
+ <Header
:navTitles="navTitles"
:collapse="isCollapsed"
@collapsed-sider="collapsedSider"
@@ -13,7 +13,13 @@
></el-header>
<el-main class="el-main">
<el-scrollbar>
- <div class="el-main__content">
+ <div
+ class="el-main__content"
+ :style="{
+ maxHeight: contentMaxHeight + 'px',
+ padding: mainPadding + 'px'
+ }"
+ >
<Content></Content>
<!-- <el-backtop
target=".el-main .el-scrollbar__wrap"
@@ -34,11 +40,16 @@
</template>
<script>
+import { computed } from 'vue';
+
export default {
data() {
return {
isCollapsed: false,
- navTitles: []
+ navTitles: [],
+ headerHeight: 60,
+ mainPadding: 10,
+ contentMaxHeight: NaN
};
},
methods: {
@@ -48,6 +59,18 @@
navPage(titles) {
this.navTitles = titles;
}
+ },
+ mounted() {
+ this.headerHeight = this.$refs.headerRef.$el.offsetHeight;
+ this.contentMaxHeight =
+ window.innerHeight - this.headerHeight - this.mainPadding * 2;
+ },
+ provide() {
+ return {
+ headerHeight: computed(() => this.headerHeight),
+ mainPadding: computed(() => this.mainPadding),
+ contentMaxHeight: computed(() => this.contentMaxHeight)
+ };
}
};
</script>
@@ -74,8 +97,10 @@
}
.el-main__content {
- padding: var(--el-main-padding) calc(var(--el-main-padding) / 2);
- max-height: calc(100vh - 60px - var(--el-main-padding) * 2);
+ /* --main-padding: 10px; */
+ /* padding: var(--main-padding) calc(var(--main-padding) / 2); */
+ /* padding: var(--main-padding); */
+ /* max-height: calc(100vh - 60px - var(--main-padding) * 2); */
/* background-color: aqua; */
/* overflow: auto; */
}
--
Gitblit v1.9.3