Merge branch 'master' of ssh://192.168.0.10:29418/pcalife/PAM

Tomas

2021-11-08 cfbe5da3b1bb53e0211eeabb4d0499a7781401ea

 PAMapp/components/Ui/UiCarousel.vue

@@ -1,17 +1,19 @@
<template>
<div>
    <el-carousel
        height="260px"
        :autoplay="true"
        indicator-position="outside"
        arrow="never"
        trigger="click"
        class="pam-home-carousel"
    >
        <el-carousel-item
            v-for="(item, index) in 3"
            :key="index"
        >
            <h3>{{ item }}</h3>
        <el-carousel-item class="banner-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>
</div>
@@ -27,7 +29,43 @@
</script>

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

.banner-info {
    .banner-title {
        @extend .title;
    }

    .banner-txt {
        @extend .smTxt_bold;
        line-height: 21px;
    }
}

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

@include desktop {
    .banner-info {
        .banner-title {
            font-size: 40px;
        }

        .banner-txt {
            font-size: 18px;
            line-height: 24px;
        }
    }
}

</style>