<template>
|
<footer class="pam-footer">
|
<nav class="pam-footer-nav">
|
<ul class="pam-footer-nav__list">
|
<li
|
v-for="(navItem, index) in footerNavList"
|
:key="index"
|
class="pam-footer-nav__item">
|
<a :href="navItem.url" target="_blank">
|
{{ navItem.label }}
|
</a>
|
<span class="pl-10 pam-footer-nav__item-pipe"
|
v-if="index !== footerNavList.length - 1"> | </span>
|
</li>
|
</ul>
|
</nav>
|
<section class="pam-footer-contact">
|
<ul class="pam-footer-contact__list">
|
<li class="pam-footer-contact__item pb-10">客戶服務專線：<span class="phone">0809-0809-68</span></li>
|
<li class="pam-footer-contact__item">(專員接聽時間：週一 ~ 週五 08:00~20:00 及週六、日及例假日09:00~17:30)</li>
|
</ul>
|
</section>
|
<section class="pam-footer-copywriting">本網站由保誠人壽與保經代共同合作</section>
|
</footer>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
|
@Component
|
export default class UiCarousel extends Vue {
|
|
footerNavList: FooterNavItem[] = [
|
{ label: '網站綜合聲明', url: 'https://www.pcalife.com.tw/zh/disclaimer/'},
|
{ label: '金融友善服務專區', url: 'https://www.pcalife.com.tw/zh/financial-friendly/'},
|
{ label: '法令宣導', url: 'https://www.pcalife.com.tw/zh/law-advocacy/'},
|
{ label: '保險委外作業說明', url: 'https://www.pcalife.com.tw/zh/outsourcing-notice/'},
|
{ label: 'GDPR隱私權告知事項', url: 'https://www.pcalife.com.tw/zh/gdpr-privacy-notice/'},
|
];
|
|
}
|
|
interface FooterNavItem {
|
label: string;
|
url: string;
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-footer {
|
border-top : 1px solid #CCCCCC;
|
background-color: $PRIMARY_WHITE;
|
.pam-footer-nav {
|
padding: 10px 20px;
|
.pam-footer-nav__list {
|
display : flex;
|
list-style : none;
|
flex-wrap : wrap;
|
justify-content: center;
|
.pam-footer-nav__item {
|
padding: 10px 0 10px 10px;
|
@extend .xsTxt;
|
@extend .text--bold;
|
@extend .text--dark-blue;
|
@extend .cursor--pointer;
|
a, a:hover, a:focus, a:active {
|
text-decoration: none;
|
color : inherit;
|
}
|
&:nth-of-type(3) {
|
.pam-footer-nav__item-pipe {
|
display: none;
|
@include desktop() {
|
display: inline;
|
}
|
}
|
}
|
}
|
}
|
}
|
.pam-footer-contact {
|
padding : 10px 20px;
|
display : flex;
|
flex-direction: column;
|
.pam-footer-contact__list {
|
display : flex;
|
list-style : none;
|
flex-wrap : wrap;
|
justify-content: center;
|
.pam-footer-contact__item {
|
color : $PRUDENTIAL_GREY;
|
font-size : 12px;
|
text-align : center;
|
line-height: 20px;
|
@extend .text--bold;
|
.phone {
|
color : $PRIMARY_BLACK;
|
font-size: 14px;
|
@extend .text--bold;
|
}
|
}
|
}
|
}
|
.pam-footer-copywriting {
|
background-color: $PRIMARY_RED;
|
display : flex;
|
justify-content : center;
|
color : $PRIMARY_WHITE;
|
padding : 10px 0;
|
font-size : 12px;
|
font-weight : bold;
|
line-height : 20px;
|
}
|
}
|
</style>
|
