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

Mila

2021-11-08 885e128b9275c2faf45c3dce3fcd5e0bbb789f0f

 PAMapp/layouts/default.vue

@@ -2,6 +2,7 @@
    <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>
@@ -14,9 +15,21 @@
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();
      this.handleResize();
  }

  handleResize(): void {
@@ -28,6 +41,7 @@
      this.pageHieght = (window.innerHeight - footer.$el.clientHeight - pageAlignPadding - deviceExtraHeight) + 'px';
    }
  }

}
</script>

@@ -48,4 +62,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>