Update: [推廣影片] sandbox attribute add allow-presentation

Tomas

2023-08-21 ba5f9f95bb8191c73c1a6fe5d1810cdfce217502

 PAMapp/components/Footer.vue

@@ -1,12 +1,16 @@
<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>
            <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>
@@ -16,7 +20,7 @@
          <li class="pam-footer-contact__item">(專員接聽時間：週一 ~ 週五 08:00~20:00 及週六、日及例假日09:00~17:30)</li>
        </ul>
      </section>
      <section class="pam-footer-copywrite">本網站由保誠人壽與保經代共同合作</section>
      <section class="pam-footer-copywriting">本網站由保誠人壽建置，並由大誠保險經紀人提供顧問諮詢服務。</section>
    </footer>
</template>

@@ -27,11 +31,11 @@
export default class UiCarousel extends Vue {

  footerNavList: FooterNavItem[] = [
    { label: '網站綜合聲明', url: '/'},
    { label: '金融友善服務專區', url: '/'},
    { label: '法令宣導', url: '/'},
    { label: '保險委外作業說明', url: '/'},
    { label: 'GDPR隱私權告知事項', url: '/'},
    { 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/'},
  ];

}
@@ -40,18 +44,19 @@
  label: string;
  url: string;
}

</script>

<style lang="scss" scoped>
footer {
  border-top: 1px solid #CCCCCC;
.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;
      display        : flex;
      list-style     : none;
      flex-wrap      : wrap;
      justify-content: center;
      .pam-footer-nav__item {
        padding: 10px 0 10px 10px;
@@ -59,41 +64,53 @@
        @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;
    padding       : 10px 20px;
    display       : flex;
    flex-direction: column;
    .pam-footer-contact__list {
      display: flex;
      list-style: none;
      flex-wrap: wrap;
      display        : flex;
      list-style     : none;
      flex-wrap      : wrap;
      justify-content: center;
      .pam-footer-contact__item {
        color: $PRUDENTIAL_GREY;
        font-size: 12px;
        text-align: center;
        color      : $PRUDENTIAL_GREY;
        font-size  : 12px;
        text-align : center;
        line-height: 20px;
        @extend .text--bold;
        .phone {
          color: $PRIMARY_BLACK;
          color    : $PRIMARY_BLACK;
          font-size: 14px;
          @extend .text--bold;
        }
      }
    }
  }
  .pam-footer-copywrite {
  .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;
    display         : flex;
    justify-content : center;
    color           : $PRIMARY_WHITE;
    padding         : 10px 0;
    font-size       : 12px;
    font-weight     : bold;
    line-height     : 20px;
  }
}
</style>