<template>
|
<div>
|
<el-carousel
|
indicator-position="outside"
|
arrow="never"
|
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>
|
<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-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>
|
|
<style lang="scss" scoped>
|
.banner-img-style {
|
width: 100%;
|
height: 100%;
|
background-repeat: no-repeat;
|
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');
|
}
|
|
.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 {
|
@extend .title;
|
}
|
|
.banner-txt {
|
@extend .smTxt_bold;
|
line-height: 21px;
|
}
|
}
|
|
@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');
|
}
|
|
.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 {
|
.banner-info {
|
.banner-title {
|
font-size: 40px;
|
}
|
|
.banner-txt {
|
font-size: 18px;
|
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>
|
