update#129067 - [footer] 前端畫面刻版

Tomas

2021-10-31 c301210f87b0714df2157fb159eacdb684fb1db2

update#129067 - [footer] 前端畫面刻版

 PAMapp/assets/scss/_variable.scss

@@ -18,3 +18,4 @@

$PRIMARY: #ED1B2E;
$SECONDARY: #E87722;
$INFO: #1B365D;

 PAMapp/assets/scss/utilities/_heading.scss

@@ -46,3 +46,7 @@
.text--secondary {
  color: $SECONDARY;
}

.text--info {
  color: $INFO;
}

 PAMapp/assets/scss/utilities/_utilities.scss

@@ -37,6 +37,10 @@
  padding-right: 10px;
}

.pl-10 {
  padding-left: 10px;
}

.pam-paragraph {
  margin: 30px 0;
}

 PAMapp/components/Footer.vue

@@ -1,3 +1,98 @@
<template>
    <div>Footer</div>
    <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>