| | |
| | | <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> |
| | | </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> |
| | | </div> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | |
| | | </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 { |
| | |
| | | } |
| | | |
| | | @media (min-width: 576px) { |
| | | .banner-img { |
| | | .banner1-img { |
| | | background-image: url('~/assets/images/index_banner_web.svg'); |
| | | } |
| | | |
| | | .banner2-img { |
| | | background-image: url('~/assets/images/index_banner2_web.svg'); |
| | | } |
| | | } |
| | | |
| | | @include desktop { |