今天比較特別，我沒有要像之前一樣把執行步驟全部寫出來，因為主畫面有太多東西了，要改風格不是一件容易的事，也不可能一次就改好。今天的成果是我和 AI 不斷討論、說明我的需求，再一次次修改程式碼後做出來的。

話不多說，先上圖：

這和之前的頁面對比起來，是不是比較符合這個主題呢？直接來說說我調整了什麼吧！

• 把內頁改成跟首頁一樣的風格：全部換成黑底、金色字跟細框按鈕。
• 整理程式碼內容：把原本重複寫了兩次的 CSS 和其他用不到的程式碼整理清楚。
• 改了瓶子樣式，結果珠子浮在空中：因為改版時瓶子變成垂直置中，珠子沒有沉在瓶底，所以改成靠底排列，並算好寬度，讓它固定 7 顆就換一排。
• 換了版面寬度，字被擠成兩行：按鈕跟空瓶提示因為寬度變動被折成兩行，所以調整字體大小，讓它們回到一排，比較好閱讀。
• 調整文字排版：把「每一道色彩」那句話主動切成上下兩行置中；也順便把時光相簿歪掉的標題回正中間。

還有一個花了很多心力調整的內容：換掉圖片下載套件。

發現原本的工具下載下來的圖片，顏色融合得不好，看起來沒有把漸層好好渲染出來。換了新的套件後，下載的圖片才終於和螢幕上看到的效果比較接近。

原本是使用 html2canvas，但它在處理多層漸層背景時，渲染效果和瀏覽器實際顯示的結果有明顯落差，下載下來會變成邊界很明顯的彩色圓斑。原本也試著在截圖時手動加入濾鏡修正，但怎麼調都有差距，最後乾脆直接換成另一個匯出工具，才終於改善這個問題。

其實這也是我在調整其他東西時，不小心改到原本正常的效果所造成的問題。在 Day 22 做的時候其實是正常的，但當時寫了很多濾鏡相關的程式碼，才讓它能夠顯示出正常的顏色。今天重新整理時，覺得這樣的程式碼太亂也太複雜了，所以乾脆換成 html-to-image。

html-to-image 會把網頁上的 DOM 元素放進 SVG 的 <foreignObject> 中，再利用瀏覽器的原生渲染能力重新產生圖片，因此能比較完整地保留原本的 CSS 效果。

不過它也有一個缺點，就是匯出圖片時需要等待比較久，但我覺得和匯出效果相比，這點等待時間還是可以接受的。

放上對比圖，第一張是使用 html-to-image 下載的圖片，第二張是使用 html2canvas 匯出的結果，最後一張則是瀏覽器原生畫面：

今天光是把畫面風格拉齊、修復排版，就花了不少心力。至於首頁切換到採集瓶的轉場動畫，就讓我留到明天再來好好分享吧！

明日預告

明天（Day 25）會把焦點放在動態體驗上，跟大家分享如何用 Vue 的 <Transition> 打造首頁切換到採集瓶的轉場動畫，以及如何避開讓畫面卡頓的設定，讓進入採集瓶的過程變得自然又有儀式感。我們明天見！