From 55bd7fb6365909a0cbcf0957333c7876bd791bb9 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 21 十一月 2024 16:35:12 +0800
Subject: [PATCH] 问题整改界面 1. 优化各项状态展示效果 2. 新增左侧关键字筛选功能
---
src/components/core/BaseContentLayout.vue | 35 +++++++++++++++++++++++++++++------
1 files changed, 29 insertions(+), 6 deletions(-)
diff --git a/src/components/core/BaseContentLayout.vue b/src/components/core/BaseContentLayout.vue
index a90aa16..e5f888c 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,14 +19,37 @@
<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);
@@ -43,7 +66,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