保誠-保戶業務員媒合平台
PAMapp/components/Footer.vue
@@ -1,12 +1,12 @@
<template>
    <footer>
    <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">
            {{ navItem.label }}<span class="pl-10" v-if="index !== footerNavList.length - 1"> | </span>
            class="pam-footer-nav__item">{{ navItem.label }}<span class="pl-10 pam-footer-nav__item-pipe"
              v-if="index !== footerNavList.length - 1"> | </span>
          </li>
        </ul>
      </nav>
@@ -43,9 +43,9 @@
</script>
<style lang="scss" scoped>
footer {
.pam-footer {
  border-top: 1px solid #CCCCCC;
  background-color: #fff;
  background-color: $PRIMARY_WHITE;
  .pam-footer-nav {
    padding: 10px 20px;
    .pam-footer-nav__list {
@@ -57,7 +57,16 @@
        padding: 10px 0 10px 10px;
        @extend .xsTxt;
        @extend .text--bold;
        @extend .text--info;
        @extend .text--dark-blue;
        @extend .cursor--pointer;
        &:nth-of-type(3) {
          .pam-footer-nav__item-pipe {
            display: none;
            @include desktop() {
              display: inline;
            }
          }
        }
      }
    }
  }
@@ -71,13 +80,13 @@
      flex-wrap: wrap;
      justify-content: center;
      .pam-footer-contact__item {
        color: #68737A;
        color: $PRUDENTIAL_GREY;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        @extend .text--bold;
        .phone {
          color: #222222;
          color: $PRIMARY_BLACK;
          font-size: 14px;
          @extend .text--bold;
        }
@@ -85,10 +94,10 @@
    }
  }
  .pam-footer-copywrite {
    background-color: $PRIMARY;
    background-color: $PRIMARY_RED;
    display: flex;
    justify-content: center;
    color: white;
    color: $PRIMARY_WHITE;
    padding: 10px 0;
    font-size: 12px;
    font-weight: bold;