qp_onemap_ui/src/views/Root.vue

<template>
  <div class="main">
    <Header />
    <UserFeek />
    <!-- <Footer></Footer> -->
    <el-scrollbar ref="pagescrollbar" class="el-scrollbar">
      <router-view />
    </el-scrollbar>
    <!-- <Footer></Footer> -->
  </div>
</template>

<script>
import { defineAsyncComponent, toRaw } from "vue";
export default {
  name: "Home",
  data() {
    return {
      todayCall: "857,605",
      totalCall: [],

      serveNum: 456,
      userNum: 17,
      appNum: 43,

      currentTab: "data-governance", // 初始选中项
      tabs: [
        { key: "data-governance", icon: "", title: "数据治理" },
        { key: "business-app", icon: "", title: "业务应用" },
        { key: "comprehensive-decision", icon: "", title: "综合决策" },
      ],
    };
  },
  components: {
    Header: defineAsyncComponent(() => import("@/components/AppVue/Header.vue")),
    Footer: defineAsyncComponent(() => import("@/components/AppVue/Footer.vue")),
    UserFeek: defineAsyncComponent(() => import("@/components/AppVue/UserFeek.vue")),
  },
  watch: {
    $route(to, from) {
      this.$nextTick(() => {
        this.$refs.pagescrollbar.setScrollTop(0);
      });
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  //overflow: hidden;

  .el-scrollbar {
    position: relative;
    width: 100%;
    height: 100%;
    // height: calc(100% - 120px);
    box-sizing: border-box;
    overflow: hidden;
    overflow: auto;
    // padding-bottom: 120px
  }
}
</style>