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;
+}
+
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 }}