2025.9.18 数据产品（待完成）

riku

2025-09-18 c1d2051abc8ca88cd07f0d7c56c0dbf8165d5c33

 src/components/core/BaseContentLayout.vue

@@ -4,12 +4,12 @@
      <slot name="header"></slot>
    </el-header>
    <el-container>
      <el-aside class="el-aside" :style="'height: ' + mainHeight">
        <el-scrollbar>
      <el-aside class="el-aside" :style="{ height: mainHeight + 'px' }">
        <el-scrollbar :noresize="false">
          <slot name="aside"></slot>
        </el-scrollbar>
      </el-aside>
      <el-main class="el-main" :style="'height: ' + mainHeight">
      <el-main class="el-main" :style="{ height: mainHeight + 'px' }">
        <slot name="main"></slot>
      </el-main>
    </el-container>
@@ -18,10 +18,11 @@

<script>
export default {
  inject: ['contentMaxHeight'],
  // 右侧操作界面基础布局
  data() {
    return {
      mainHeight: 'calc(100vh - 60px * 2 - var(--el-main-padding) * 2)'
      mainHeight: this.contentMaxHeight.value
    };
  },
  methods: {
@@ -30,9 +31,10 @@
      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)`;
        return this.contentMaxHeight.value - h;
        // return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2 + 6px)`;
      } else {
        return `calc(100vh - 60px * 2 - var(--el-main-padding) * 2)`;
        return this.contentMaxHeight.value;
      }
    }
  },
@@ -47,19 +49,21 @@
<style scoped>
.el-aside {
  /* width: initial; */
  /* overflow-x: auto; */
  position: relative;
  /* 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 {
  height: initial;
  padding: 0 0 0px 0;
  padding: 0 0 4px 0;
  /* background-color: rgb(216, 201, 201); */
  /* border-bottom: 1px solid var(--el-color-info-light-7); */
  margin-bottom: 4px;
  /* margin-bottom: 4px; */
}

.el-main {
@@ -67,7 +71,7 @@
  /* background-color: whitesmoke; */
  /* height: calc(100vh - 60px * 2 - 20px * 2); */
  padding: initial;
  padding-left: 20px;
  padding-left: 10px;
  /* overflow: hidden; */
}
</style>