fix: TODO#130846 各內頁加上 navbar (web 跑版)

Mila

2021-11-26 0496faa586224dff0a93ba4abcaeafab6df83aa2

 PAMapp/layouts/default.vue

@@ -1,6 +1,7 @@
<template>
  <div class="pam-background">
    <UiGoToTop></UiGoToTop>
    <NavBar></NavBar>
    <BackActionBar></BackActionBar>
    <div class="pam-banner"
      :class="bannerClassName">
@@ -12,7 +13,10 @@
        </div>
      </div>
    </div>
    <div class="pam-container" :class="containClassName">
    <div
      class="pam-container"
      :class="[containClassName,{'mt-navBar': bannerClassName === 'pam-no-banner'}]"
    >
      <Nuxt class="pam-page-container"></Nuxt>
    </div>
    <Footer></Footer>
@@ -36,17 +40,18 @@
      return this.bannerTextDto[this.route] ? this.bannerTextDto[this.route] : [];
    };

    get route(): string {
      return _.split(this.$route.name, '-')[0];
    get route(): string{
      const routeName = this.$route.name;
      return routeName ? routeName:'';
    };

    get bannerClassName() {
      return this.route ? this.routeFormatBannerClass(this.route) : '';
      return this.routeFormatBannerClass(this.route);
    };

    // format to {page}-banner or pam-no-banner tag
    private routeFormatBannerClass(route: string): string {
      const needBannerTags = ['recommendConsultant', 'quickFilter', 'myConsultantList'];
      const needBannerTags = ['recommendConsultant', 'quickFilter', 'myConsultantList-consultantList', 'myConsultantList-contactedList', 'myAppointmentList-appointmentList', 'myAppointmentList-contactedList'];
      return _.includes(needBannerTags, route) ? route + '-banner' : 'pam-no-banner';
    };

@@ -56,7 +61,7 @@

    // format to {page}-container tag
    private routeFormatContainClass(route: string): string {
      const needContainBgTags = ['recommendConsultant', 'questionnaire'];
      const needContainBgTags = ['recommendConsultant', 'questionnaire-agentNo'];
      return _.includes(needContainBgTags, route) ? route + '-container' : '';
    };
  }
@@ -87,7 +92,24 @@
    margin: 30px 20px;
  }

  .pam-banner {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    @extend .mt-navBar;
  }

  .mt-navBar {
    margin-top: calc($MOB_NAV_BAR * 2);
  }

  @include desktop {
    .mt-navBar {
      margin-top: calc($DESKTOP_NAV_BAR + $MOB_NAV_BAR);
    }
    .pam-page-container {
      width: 700px;
      margin: 30px auto 0px auto;
@@ -99,14 +121,7 @@
    }
  }

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


  .pam-banner__text {
    font-size: 18px;
@@ -160,7 +175,7 @@
    }
  }

  .myConsultantList {
  .myConsultantList-consultantList,.myConsultantList-contactedList {
    &-banner {
      background-image: url('~/assets/images/myConsultantList/banner_mob.svg');
    }
@@ -172,7 +187,7 @@
    }
  }

  .questionnaire {
  .questionnaire-agentNo {
    &-container {
      background-image: url('~/assets/images/recommendConsultant/bg_flower_mob.svg');
      background-size: contain;
@@ -185,4 +200,5 @@
      }
    }
  }

</style>