Update: 依據來源 url parameters 切換 banner (FILM1: education, FILM2: Health)

Tomas

2023-07-18 435fa4eca47eab9b41f254dd55dc6572244b96a4

 PAMapp/components/Ui/UiCarousel.vue

@@ -6,6 +6,11 @@
        trigger="click"
        class="pam-home-carousel"
    >

      <template v-if="fromAccess === AccessFroms.FILM_1">
        <el-carousel-item class="banner-img-style2 banner-film1">
        </el-carousel-item>

        <el-carousel-item class="banner-img-style banner1-img">
            <div class="text--center mt-30 banner-info">
                <h1 class="banner-title mb-10">專屬你的保險顧問在這裡</h1>
@@ -18,19 +23,71 @@
        <el-carousel-item class="banner-img-style banner2-img">
            <div class="text--center mt-30 banner-info">
                <h1 class="banner-title mb-10">多元媒合方式</h1>
                <p class="banner-txt text--PRIMARY_WHITE">輕鬆滑出理想顧問</p>
                <p class="banner-txt text--PRIMARY_WHITE">找到最懂你的保險顧問</p>
                <p class="banner-txt text--PRIMARY_WHITE">依個人需求量身篩選</p>
                <p class="banner-txt text--PRIMARY_WHITE">媒合成功顧問主動聯繫</p>
            </div>
        </el-carousel-item>
      </template>
      <template v-else-if="fromAccess === AccessFroms.FILM_2">
        <el-carousel-item class="banner-img-style2 banner-film2">
        </el-carousel-item>

        <el-carousel-item class="banner-img-style banner1-img">
          <div class="text--center mt-30 banner-info">
            <h1 class="banner-title mb-10">專屬你的保險顧問在這裡</h1>
            <p class="banner-txt text--PRIMARY_WHITE">有保險需求卻不知從何下手?</p>
            <p class="banner-txt text--PRIMARY_WHITE">輸入條件、快速篩選、無壓力媒合</p>
            <p class="banner-txt text--PRIMARY_WHITE">簡單三步驟，立即預約幸福人生!</p>
          </div>
        </el-carousel-item>

        <el-carousel-item class="banner-img-style banner2-img">
          <div class="text--center mt-30 banner-info">
            <h1 class="banner-title mb-10">多元媒合方式</h1>
            <p class="banner-txt text--PRIMARY_WHITE">找到最懂你的保險顧問</p>
            <p class="banner-txt text--PRIMARY_WHITE">依個人需求量身篩選</p>
            <p class="banner-txt text--PRIMARY_WHITE">媒合成功顧問主動聯繫</p>
          </div>
        </el-carousel-item>

      </template>
      <template v-else>
        <el-carousel-item class="banner-img-style banner1-img">
          <div class="text--center mt-30 banner-info">
            <h1 class="banner-title mb-10">專屬你的保險顧問在這裡</h1>
            <p class="banner-txt text--PRIMARY_WHITE">有保險需求卻不知從何下手?</p>
            <p class="banner-txt text--PRIMARY_WHITE">輸入條件、快速篩選、無壓力媒合</p>
            <p class="banner-txt text--PRIMARY_WHITE">簡單三步驟，立即預約幸福人生!</p>
          </div>
        </el-carousel-item>

        <el-carousel-item class="banner-img-style banner2-img">
          <div class="text--center mt-30 banner-info">
            <h1 class="banner-title mb-10">多元媒合方式</h1>
            <p class="banner-txt text--PRIMARY_WHITE">找到最懂你的保險顧問</p>
            <p class="banner-txt text--PRIMARY_WHITE">依個人需求量身篩選</p>
            <p class="banner-txt text--PRIMARY_WHITE">媒合成功顧問主動聯繫</p>
          </div>
        </el-carousel-item>
      </template>

    </el-carousel>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import {Getter} from "nuxt-property-decorator";
import {AccessFroms} from "~/shared/services/utils.service";

@Component
export default class UiCarousel extends Vue {

  @Getter
  fromAccess!: AccessFroms;

  protected AccessFroms = AccessFroms;

}
</script>
@@ -43,6 +100,14 @@
    background-size: cover;
    background-position: bottom;
}
.banner-img-style2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.banner1-img {
    background-image: url('~/assets/images/index_banner_mob.svg');
}
@@ -50,6 +115,20 @@
.banner2-img {
    background-image: url('~/assets/images/index_banner2_mob.svg');
}

.banner3-img {
    background-image: url('~/assets/images/index_banner3_mob.svg');
    background-color: #e08885;
}

.banner-film1 {
  background-image: url('~/assets/images/education_mob.svg');
}

.banner-film2 {
  background-image: url('~/assets/images/health_mob.svg');
}


.banner-info {
    .banner-title {
@@ -64,12 +143,26 @@

@media (min-width: 576px) {
    .banner1-img {
        background-image: url('~/assets/images/index_banner_web.svg');
      background-image: url('~/assets/images/index_banner_web.svg');
    }

    .banner2-img {
        background-image: url('~/assets/images/index_banner2_web.svg');
    }

    .banner3-img {
        background-image: url('~/assets/images/index_banner3_web1.svg');
    }
    .banner-film1 {
      background-image: url('~/assets/images/education.svg');
      background-color: #8DB9CA;
    }

    .banner-film2 {
      background-image: url('~/assets/images/health.svg');
      background-color: #EFF0F1;
    }

}

@include desktop {
@@ -83,6 +176,15 @@
            line-height: 24px;
        }
    }
.banner-img-style2 {
    width:100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: block;
    margin: auto;
}
}

</style>