update: [default_layout] 調整自適應 page 高度的方式

Tomas

2021-11-12 6e27ae8c429549cc568ed0bc4e0bd22c8d3e0611

update: [default_layout] 調整自適應 page 高度的方式

 PAMapp/layouts/default.vue

@@ -3,7 +3,7 @@
        <UiGoToTop></UiGoToTop>
        <BackActionBar></BackActionBar>
        <div class="banner" :class="bannerClassName"></div>
        <Nuxt class="page-container" :style="{ height: pageHieght}" ref="pageContainer"></Nuxt>
        <Nuxt class="page-container"></Nuxt>
        <Footer ref="defaultLayoutFooter"></Footer>
    </div>
</template>
@@ -27,27 +27,18 @@
    return routerName.match('questionnaire') || routerName.match('agentInfo');
  }

  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;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    .page-container {
      flex: 1;
    }
  }

  .page-container {