agmp_wpr_vue/src/layout/CommonLayout.vue

<template>
  <div class="common-page">
    <div class="common-page__header">
      <slot name="header"></slot>
    </div>
    <div class="common-page__body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.common-page {
  display: flex;
  padding: 16px;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f1f3f4;
  height: 100%;
  &__header {
    flex: 0 0 auto;
    margin-bottom: 16px;
  }

  &__body {
    height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  ::v-deep .el-card {
    height: 100%;
  }
}
</style>