此網站需要開啟JavaScript
JavaScript is required

選單

Card

五種卡片都只吃一個 data 物件，差別在排版方向與資訊密度。Basic 系列給一般列表用，Blog 系列多顯示作者。

共用的 data 結構

所有卡片共用同一份資料結構，換版型不用改資料。 缺欄位時該區塊會直接不顯示，不會壞掉。

Props

名稱型別預設值說明
typeString—標籤文字
dateString—日期
titleString—標題
contentString—摘要
linkString—連結網址
img_urlString—圖片路徑
author{ name, img_url }—Blog 系列才會用到

直式卡片

CommonCardBasicCol

components/Common/Card/Basic/Col.vue

最常用的列表卡片，圖片在上、文字在下。

三欄排列

default

2024/07/04

卡片標題 1

這是一段示意用的摘要文字，用來確認多行時的截斷與行高表現是否正常。

default

2024/07/04

卡片標題 2

這是一段示意用的摘要文字，用來確認多行時的截斷與行高表現是否正常。

default

2024/07/04

卡片標題 3

這是一段示意用的摘要文字，用來確認多行時的截斷與行高表現是否正常。

Props

名稱型別預設值說明
data*Object{}卡片內容，欄位見下方說明

* 為必填

橫式卡片

CommonCardBasicRow

components/Common/Card/Basic/Row.vue

圖片在左、文字在右，適合資訊量較多的列表。

兩欄排列

default

2024/07/04

卡片標題 1

default

2024/07/04

卡片標題 2

Props

名稱型別預設值說明
data*Object{}卡片內容，欄位見下方說明

* 為必填

長條卡片

CommonCardBasicBar

components/Common/Card/Basic/Bar.vue

滿版單欄，適合搜尋結果或公告列表。

單欄堆疊

default

卡片標題 1

這是一段示意用的摘要文字，用來確認多行時的截斷與行高表現是否正常。

作者名稱

作者名稱

2024年07月04日

default

卡片標題 2

這是一段示意用的摘要文字，用來確認多行時的截斷與行高表現是否正常。

作者名稱

作者名稱

2024年07月04日

Props

名稱型別預設值說明
data*Object{}卡片內容，欄位見下方說明

* 為必填

部落格直式卡片

CommonCardBlogCol

components/Common/Card/Blog/Col.vue

比 Basic 系列多顯示 author， 資料裡沒有作者時該區塊不會出現。

三欄排列

default

2024/07/04

卡片標題 1

這是一段示意用的摘要文字，用來確認多行時的截斷與行高表現是否正常。

default

2024/07/04

卡片標題 2

這是一段示意用的摘要文字，用來確認多行時的截斷與行高表現是否正常。

default

2024/07/04

卡片標題 3

這是一段示意用的摘要文字，用來確認多行時的截斷與行高表現是否正常。

Props

名稱型別預設值說明
data*Object{}卡片內容，欄位見下方說明

* 為必填

部落格長條卡片

CommonCardBlogBar

components/Common/Card/Blog/Bar.vue

單欄堆疊

default

卡片標題 1

default

卡片標題 2

Props

名稱型別預設值說明
data*Object{}卡片內容，欄位見下方說明

* 為必填