From 3de3c487e0e9d672693bb773f7524c50735e63a4 Mon Sep 17 00:00:00 2001
From: Bestian Tang <bestian@gmail.com>
Date: Wed, 16 Oct 2024 09:01:42 +0800
Subject: [PATCH] close #6

---
 src/App.vue        |  9 ++++++++-
 src/views/Book.vue | 45 +++++++++++++++++++++++++++++++++++++--------
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f1cb009..ddfb093 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,10 +36,13 @@
     router-link.item(to="/core")
       i.suitcase.icon
       | 精華
+    router-link(class="item" to="/book")
+      i.book.icon
+      | 相關書籍
     router-link(class="item" to="/faq")
       i.info.icon
       | 常見問題
-    router-link(class="item" to="/statues")
+    // router-link(class="item" to="/statues")
       i.users.icon
       | 流動塑像
   .ui.sidebar.vertical.menu#side-menu(:class="{'hidden': !sidebarVisible}")
@@ -177,4 +180,8 @@ p {
   transform: translateX(-100%); /* 隱藏時向左滑動 */
 }
 
+.filler {
+  flex: 1;
+}
+
 </style>
diff --git a/src/views/Book.vue b/src/views/Book.vue
index f9b907f..985246b 100644
--- a/src/views/Book.vue
+++ b/src/views/Book.vue
@@ -2,24 +2,44 @@
 .faq
   .ui.segment.container
     h2.ui.header 相關書籍
-    a(href="https://www.psy.com.tw/ec99/ushop20128/goodsdescr.asp?category_id=72&parent_id=87&prod_id=41505",
-      target="_blank", rel="noopener noreferrer")
-      img(src="https://www.psy.com.tw/ecmas0128/Store/bImages/41505.jpg")
-      p 即興真實人生-一人一故事劇場中的個人故事
-
+    .ui.two.column.grid
+      .column(v-for="book in books" :key="book.id")
+        a(:href="book.url" target="_blank" rel="noopener noreferrer")
+          img(:src="book.imageUrl")
+        .filler
+        p
+          a(:href="book.url" target="_blank" rel="noopener noreferrer") {{ book.title }}
 </template>
 
 <script>
-
 export default {
-  name: 'Faq',
+  name: 'Book',
+  data() {
+    return {
+      books: [
+        {
+          id: 1,
+          url: "https://www.psy.com.tw/ec99/ushop20128/goodsdescr.asp?category_id=72&parent_id=87&prod_id=41505",
+          imageUrl: "https://www.psy.com.tw/ecmas0128/Store/bImages/41505.jpg",
+          title: "即興真實人生-一人一故事劇場中的個人故事"
+        },
+        {
+          id: 2,
+          url: "https://webpac.tphcc.gov.tw/webpac/content.cfm?mid=217151&m=ss&k0=%E8%96%A9%E6%8F%90%E7%88%BE%20((satir%2C%20virginia))&t0=k&c0=and&list_num=10&current_page=1&mt=&at=&sj=&py=&pr=&it=&lr=&lg=&si=1&view=d",
+          imageUrl: "https://toread3.tphcc.gov.tw/toread/covers.svc?h=260&t=m&w=194&rid=217151",
+          title: "薩提爾的家族治療模式"
+        }
+      ]
+    }
+  }
 }
 </script>
 
 <style scoped>
 
   img {
-    max-width: 88%;  
+    max-width: 160px;  
+    margin-top: 10px;
   }
   p {
     font-size: 18px;
@@ -28,4 +48,13 @@ export default {
     margin: .6em auto;
     color: rgb(64, 3, 206);
   }
+
+  .column {
+    padding: 10px;
+    height: 360px;
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 </style>