文章區塊

案例內頁用的區塊元件。實務上是把這些依序堆起來組成一篇文章，每一塊自帶上下外距，不用另外加間距。

標題區

CommonArticleTitleBox

components/Common/Article/TitleBox.vue

文章開頭的大標與副資訊。title 與 info 也可以改用 slot 放自訂結構。

為品牌留下專屬印象和定位

年份： 2026

客戶：案例客戶名稱

類別：

2026/07/04

Props

名稱	型別	預設值	說明
`title`	String	''	主標題
`info`	{ year, customer, date }	見元件	副資訊物件，年份、客戶、日期

Slots

Slot	Slot props	說明
`title`	—	取代 title prop
`info`	—	取代 info prop

標語

CommonArticleSlogan

components/Common/Article/Slogan.vue

置中的大字標語，用來分隔章節。

透過「品牌五感」為品牌留下專屬印象和定位，並在腦海中產生強烈的記憶連結。這段文字用來確認多行時的行高與斷行表現。

Slots

Slot	Slot props	說明
`default`	—	標語文字

圖片格狀排列

CommonArticleImagesGrid

components/Common/Article/ImagesGrid.vue

多張圖並排，每張可以帶圖說。

Props

名稱	型別	預設值	說明
`imgList`*	Array<{ url, text }>	[]	text 是圖說

* 為必填

滿版圖片

CommonArticleImagesFull

components/Common/Article/ImagesFull.vue

單張滿版圖，通常用來做章節之間的視覺分隔。

Props

名稱	型別	預設值	說明
`img`*	{ url, text }	{}

* 為必填

文章影片

CommonArticleVideo

components/Common/Article/Video.vue

包了外距的影片區塊。同一頁多支影片時 id 要給不同值。

Props

名稱	型別	預設值	說明
`id`*	String	''
`videoSrc`	String	''	YouTube 傳影片 ID
`isYtVideo`	Boolean	false
`coverImage`	String	''
`autoplay`	Boolean	false
`muted`	Boolean	false

* 為必填

文章輪播

CommonArticleSlider

components/Common/Article/Slider.vue

id 與 paginationId 都要給，且同頁不能重複。

Props

名稱	型別	預設值	說明
`id`*	String	''
`sliderData`*	Array<{ title, img_url }>	[]
`paginationId`	String	''	分頁指示器容器 id
`spaceBetween`	Number	0
`loop`	Boolean	false
`autoplay`	Boolean	false

* 為必填

雙欄內容

CommonArticleContentTypeTwo

components/Common/Article/ContentTypeTwo.vue

左標題右內文的雙欄排版，可再加一顆按鈕。

品牌五感

透過「品牌五感」為品牌留下專屬印象和定位，並在腦海中產生強烈的記憶連結。這段文字用來確認多行時的行高與斷行表現。

連結

Props

名稱	型別	預設值	說明
`title`	String	''
`content`	String	''	支援 \n 換行
`link`	String	''

Slots

Slot	Slot props	說明
`title`	—	取代 title prop
`content`	—	取代 content prop
`button`	—	自訂按鈕

文章結尾

CommonArticleFooter

components/Common/Article/Footer.vue

文章最後的總結與標籤。

品牌五感

透過「品牌五感」為品牌留下專屬印象和定位，並在腦海中產生強烈的記憶連結。這段文字用來確認多行時的行高與斷行表現。

Props

名稱	型別	預設值	說明
`title`	String	''
`content`	String	''
`tagList`	Array<String>	[]	標籤文字

自訂內容區

CommonArticleCustomBox / CustomText / CustomList

components/Common/Article/Custom{Box,Text,List}.vue

CustomBox 是容器，負責左右留白；裡面放 CustomText（小標 + 內文）與 CustomList（條列）。

小節標題

透過「品牌五感」為品牌留下專屬印象和定位，並在腦海中產生強烈的記憶連結。這段文字用來確認多行時的行高與斷行表現。

1 Computerized Forms
2 Yume - Helios