2025.9.20 数据产品（待完成）

riku

2025-09-20 0796eebe3520fafb0ac5d36ee584af81506d7e9c

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