<template>
|
<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">
|
{{ navItem.label }}<span class="pl-10" 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-copywrite">本網站由保誠人壽與保經代共同合作</section>
|
</footer>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
|
@Component
|
export default class UiCarousel extends Vue {
|
|
footerNavList: FooterNavItem[] = [
|
{ label: '網站綜合聲明', url: '/'},
|
{ label: '金融友善服務專區', url: '/'},
|
{ label: '法令宣導', url: '/'},
|
{ label: '保險委外作業說明', url: '/'},
|
{ label: 'GDPR隱私權告知事項', url: '/'},
|
];
|
|
}
|
|
interface FooterNavItem {
|
label: string;
|
url: string;
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
footer {
|
border-top: 1px solid #CCCCCC;
|
background-color: #fff;
|
.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--info;
|
}
|
}
|
}
|
.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: #68737A;
|
font-size: 12px;
|
text-align: center;
|
line-height: 20px;
|
@extend .text--bold;
|
.phone {
|
color: #222222;
|
font-size: 14px;
|
@extend .text--bold;
|
}
|
}
|
}
|
}
|
.pam-footer-copywrite {
|
background-color: $PRIMARY;
|
display: flex;
|
justify-content: center;
|
color: white;
|
padding: 10px 0;
|
font-size: 12px;
|
font-weight: bold;
|
line-height: 20px;
|
}
|
}
|
</style>
|
