add#129851 - [default layout] 自適應調整 page 高度

Tomas

2021-11-06 24768447eb96cc820b9ee69a0024836465b7128b

add#129851 - [default layout] 自適應調整 page 高度

 PAMapp/layouts/default.vue

@@ -2,10 +2,35 @@
    <div class="pam-background">
        <UiGoToTop></UiGoToTop>
        <BackActionBar></BackActionBar>
        <Nuxt class="page-container"></Nuxt>
        <Nuxt class="page-container" :style="{ height: pageHieght}" ref="pageContainer"></Nuxt>
        <Footer ref="defaultLayoutFooter"></Footer>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class DefaultLayout extends Vue {
  pageHieght = '';

  mounted() {
      window.addEventListener('resize', this.handleResize);
        this.handleResize();
  }

  handleResize(): void {
    const pageContainer: any = this.$refs.pageContainer;
    const footer: any = this.$refs.defaultLayoutFooter;
    const pageAlignPadding = 80;
    const deviceExtraHeight = 36;
    if ((pageContainer.$el.clientHeight + footer.$el.clientHeight) <  window.innerHeight) {
      this.pageHieght = (window.innerHeight - footer.$el.clientHeight - pageAlignPadding - deviceExtraHeight) + 'px';
    }
  }
}
</script>

<style lang="scss" scoped>
  .pam-background {
    background-color: #F8F9FA;