update: banner圖檔 (快速篩選、嚴選配對、顧問清單)

Mila

2021-11-08 885e128b9275c2faf45c3dce3fcd5e0bbb789f0f

 PAMapp/layouts/default.vue

@@ -1,5 +1,104 @@
<template>
    <div>
        <Nuxt></Nuxt>
    <div class="pam-background">
        <UiGoToTop></UiGoToTop>
        <BackActionBar></BackActionBar>
        <div class="banner" :class="bannerClassName"></div>
        <Nuxt class="page-container" :style="{ height: pageHieght}" ref="pageContainer"></Nuxt>
        <Footer ref="defaultLayoutFooter"></Footer>
    </div>
</template>
</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('communication') || 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;
  }

  .page-container {
    padding: 30px 40px;
  }

  @include desktop {
    .page-container{
      width: 700px;
      margin: 0 auto;
      overflow-x: hidden;
    }
  }

  .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>