From c301210f87b0714df2157fb159eacdb684fb1db2 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期日, 31 十月 2021 19:36:45 +0800
Subject: [PATCH] update#129067 - [footer] 前端畫面刻版
---
PAMapp/components/Footer.vue | 99 ++++++++++++++++++++++++++++++++++++++++++++++++-
PAMapp/assets/scss/utilities/_heading.scss | 4 ++
PAMapp/assets/scss/utilities/_utilities.scss | 4 ++
PAMapp/assets/scss/_variable.scss | 1
4 files changed, 106 insertions(+), 2 deletions(-)
diff --git a/PAMapp/assets/scss/_variable.scss b/PAMapp/assets/scss/_variable.scss
index a616756..7f75819 100644
--- a/PAMapp/assets/scss/_variable.scss
+++ b/PAMapp/assets/scss/_variable.scss
@@ -18,3 +18,4 @@
$PRIMARY: #ED1B2E;
$SECONDARY: #E87722;
+$INFO: #1B365D;
diff --git a/PAMapp/assets/scss/utilities/_heading.scss b/PAMapp/assets/scss/utilities/_heading.scss
index 48235d9..557573e 100644
--- a/PAMapp/assets/scss/utilities/_heading.scss
+++ b/PAMapp/assets/scss/utilities/_heading.scss
@@ -46,3 +46,7 @@
.text--secondary {
color: $SECONDARY;
}
+
+.text--info {
+ color: $INFO;
+}
diff --git a/PAMapp/assets/scss/utilities/_utilities.scss b/PAMapp/assets/scss/utilities/_utilities.scss
index 24d7ddd..ecdc5e0 100644
--- a/PAMapp/assets/scss/utilities/_utilities.scss
+++ b/PAMapp/assets/scss/utilities/_utilities.scss
@@ -37,6 +37,10 @@
padding-right: 10px;
}
+.pl-10 {
+ padding-left: 10px;
+}
+
.pam-paragraph {
margin: 30px 0;
}
diff --git a/PAMapp/components/Footer.vue b/PAMapp/components/Footer.vue
index 1351098..71d09eb 100644
--- a/PAMapp/components/Footer.vue
+++ b/PAMapp/components/Footer.vue
@@ -1,3 +1,98 @@
<template>
- <div>Footer</div>
-</template>
\ No newline at end of file
+ <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>
--
Gitblit v1.8.0