问题整改界面 1. 优化各项状态展示效果 2. 新增左侧关键字筛选功能

riku

2024-11-21 55bd7fb6365909a0cbcf0957333c7876bd791bb9

 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; */