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

Tomas

2021-11-12 6e27ae8c429549cc568ed0bc4e0bd22c8d3e0611

 PAMapp/layouts/default.vue

@@ -2,13 +2,43 @@
    <div class="pam-background">
        <UiGoToTop></UiGoToTop>
        <BackActionBar></BackActionBar>
        <div class="banner" :class="bannerClassName"></div>
        <Nuxt class="page-container"></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 = '';

  get bannerClassName() {
    if (this.$route.name) {
      return this.noBanner(this.$route.name) ? 'noBanner' : this.$route.name.split('-')[0]
    } else {
      return '';
    }
  }

  noBanner(routerName : string) {
    return routerName.match('questionnaire') || routerName.match('agentInfo');
  }

}
</script>

<style lang="scss" scoped>
  .pam-background {
    background-color: #F8F9FA;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    .page-container {
      flex: 1;
    }
  }

  .page-container {
@@ -23,4 +53,43 @@
    }
  }

  .banner {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .noBanner {
    display: none;
  }

  .quickFilter {
    background-image: url('~/assets/images/quickFilter/banner_mob.svg');
  }

  .recommendConsultant {
    background-image: url('~/assets/images/recommendConsultant/banner_mob.svg');
  }

  .myConsultantList {
    background-image: url('~/assets/images/myConsultantList/banner_mob.svg');
  }

  @media (min-width: 768px) {

    .quickFilter {
      background-image: url('~/assets/images/quickFilter/banner_web.svg');
    }

    .recommendConsultant {
      background-image: url('~/assets/images/recommendConsultant/banner_web.svg');
    }

    .myConsultantList {
      background-image: url('~/assets/images/myConsultantList/banner_web.svg');
    }
  }

</style>