TODO#139886 Banner 2 文案調整

HelenHuang

2022-06-09 8a4ab6ba9525432ccaa314ce0e7e5b06d2f62816

 PAMapp/components/Ui/UiCarousel.vue

@@ -1,18 +1,26 @@
<template>
<div>
    <el-carousel
        :autoplay="true"
        indicator-position="outside"
        arrow="never"
        trigger="click"
        class="pam-home-carousel"
    >
        <el-carousel-item class="banner-img">
        <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>
                <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>
    </el-carousel>
@@ -29,13 +37,19 @@
</script>

<style lang="scss" scoped>
.banner-img {
.banner-img-style {
    width: 100%;
    height: 100%;
    background-image: url('~/assets/images/index_banner_mob.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}
.banner1-img {
    background-image: url('~/assets/images/index_banner_mob.svg');
}

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

.banner-info {
@@ -49,9 +63,13 @@
    }
}

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

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

@@ -68,4 +86,4 @@
    }
}

</style>
</style>