Day 10的網站風格大改造，希望能讓小專案更有質感，昨天（Day 9），我把單頁應用升級成了多頁網站，終於有了「首頁」和「使用說明」兩個分頁場景。今天（Day 10）的目標不只是加新功能，而是替這個小網站「換上漂亮的衣服」，把外觀設計成一個有一致感的小產品，不再是素素的 demo。換句話說，昨天是「蓋好房子，分出房間」，今天則是「刷上油漆，擺放家具」。雖然這只是第一次的風格設計，還有很多很多我覺得可以更好的地方，不過我希望藉由這一次的練習，可以先嘗試一些新東西，讓之後的我要是有更多的想法，就能因為多幾次的練習，從而做出更接近於我想像中最終作品的樣子！
今日過程：
1.建立全域設計系統
我先在 style.css 設定了網站的「主題變數」：背景、卡片陰影、主色（藍色/綠色）、按鈕樣式。這樣不管在哪個頁面，都能維持一致的風格。
2.美化 App.vue
在 Header 中，網站標題下加了一行副標，導覽列做了「首頁｜使用說明」的分隔符，並讓當前頁面有高亮效果。這就像加上了清楚的路標。
3.任務清單改版
完成任務的項目會變成淡綠色背景，文字加上刪除線；滑鼠移上去會有輕微的浮起陰影，整體質感提升不少。
4.About 頁變身小手冊
使用說明頁不再只是幾行文字，而是設計成「小卡片」：有提示框、步驟教學、FAQ 展開/收合。看起來更像一份簡單的使用手冊。
成果驗收：
a.首頁可以正常新增、勾選、刪除任務，並且會自動保存到 localStorage。
b.刷新後資料還在，不會消失。
c.導覽列能在「首頁｜使用說明」之間切換，當前頁有高亮。
d.About 頁面結構清晰，就像一份小冊子。
最終樣子長這樣：