eep_page/src/layouts/default/index.vue

<template>
  <div class="app">
    <LayoutHeader />
    <LayoutBreadcrumb :is-show-breadcrumb.sync="isShowBreadcrumb" />
    <div class="app-container" :style="{ height: `calc(100vh - 64px ${isShowBreadcrumb ? '- 56px' : ''})` }">
      <router-view />
    </div>
  </div>
</template>

<script>
import LayoutHeader from './header/index.vue';
import LayoutBreadcrumb from './breadcrumb/index.vue';

export default {
  name: 'LayoutDefault',
  components: {
    LayoutHeader,
    LayoutBreadcrumb,
  },
  data() {
    return {
      isShowBreadcrumb: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.app {
  display: flex;
  flex-direction: column;

  &-container {
    overflow: auto;
  }
}
</style>