2025.9.17 数据产品（待完成）

riku

2025-09-17 4aa86b1ec441c4e358e1cc488d8f021fb80f1355

 src/App.vue

@@ -1,40 +1,6 @@
<template>
  <el-config-provider :locale="locale">
    <el-container class="el-container">
      <el-aside class="el-aside"
        ><SiderMenu
          :collapse="isCollapsed"
          @nav-page="navPage"
        ></SiderMenu
      ></el-aside>
      <el-container>
        <el-header class="el-header"
          ><Header
            :navTitles="navTitles"
            :collapse="isCollapsed"
            @collapsed-sider="collapsedSider"
          ></Header
        ></el-header>
        <el-main class="el-main">
          <el-scrollbar>
            <div class="el-main__content">
              <Content></Content>
              <el-backtop
                target=".el-main .el-scrollbar__wrap"
                :right="40"
                :bottom="100"
                style="width: 120px"
              >
                <div class="back-top">
                  <el-icon><ArrowUpBold /></el-icon>
                  <span style="">返回顶部</span>
                </div>
              </el-backtop>
            </div>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
    <router-view></router-view>
  </el-config-provider>
</template>

@@ -44,62 +10,8 @@
export default {
  data() {
    return {
      isCollapsed: false,
      navTitles: [],
      locale: zhCn,
      locale: zhCn
    };
  },
  methods: {
    collapsedSider(b) {
      this.isCollapsed = b;
    },
    navPage(titles) {
      this.navTitles = titles;
    },
  },
  }
};
</script>

<style scoped>
.el-container{
  /* min-height: 820px; */
}
.el-aside {
  width: initial;
}

.el-header {
  /* background-color: rgb(216, 201, 201); */
  border-bottom: 1px solid var(--el-color-info-light-7);
}

.el-main {
  position: relative;
  /* background-color: bisque; */
  padding: initial;
  /* max-height: calc(100vh - 60px); */
  /* overflow: hidden; */
}

.el-main__content {
  padding: var(--el-main-padding) calc(var(--el-main-padding) / 2);
  max-height: calc(100vh - 60px - var(--el-main-padding) * 2);
  /* background-color: aqua; */
  /* overflow: auto; */
}
.back-top {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  width: 100%;
  background-color: var(--el-bg-color-overlay);
  box-shadow: var(--el-box-shadow-lighter);
  text-align: center;
  /* line-height: 40px; */
  color: var(--el-color-info);
  border: var(--el-border);
  font-size: var(--el-font-size-medium);
  border-radius: var(--el-border-radius-base);
}
</style>