From 202f69ff07a2840a9746cda72361f0f67a20a85a Mon Sep 17 00:00:00 2001 From: wayne <wayne8692wayne8692@gmail.com> Date: 星期二, 30 十一月 2021 19:47:10 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- PAMapp/components/Footer.vue | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 114 insertions(+), 2 deletions(-) diff --git a/PAMapp/components/Footer.vue b/PAMapp/components/Footer.vue index 1351098..10aa643 100644 --- a/PAMapp/components/Footer.vue +++ b/PAMapp/components/Footer.vue @@ -1,3 +1,115 @@ <template> - <div>Footer</div> -</template> \ No newline at end of file + <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">摰X�������<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: '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-copywrite { + 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> -- Gitblit v1.8.0