今日專案進度

A. 用grid方式將專案重新排版（透過tailwind css）

B. 使用vue-router建立新的分頁

C. 卡片擴展效果（codepen）

A. 透過tailwind css排版首頁

原本

修改後

Demo Link｜Git Commit

心得

1. 在vue檔案內管理CSS：SCSS與tailwind css各有優勢。
2. 以Home.vue來說，透過tailwind css能夠很方便做到RWD的設計，因為都直接寫在html tag裡，按著xs md lg來觀察就能夠知道RWD的變化。
3. 在眾卡片尚未透過迴圈動態載入前，仍需要用scss寫一個語意化的選擇器名稱（eg. card）。才不會讓tailwind css的屬性重複太多。
4. 除了將語意化的屬性寫在裡面，另一個作法放在tailwind css的@layer utilities當中（見index.css檔），好處是能夠配合RWD屬性來應用。如果是自定義在的CSS選擇器，就不能配合tailwind css的RWD屬性來使用。
5. 承1.，tailwind css很方便，但目前還無法完全取代SCSS，比如說Tailwind css無法寫出比grid areas更直覺的排版。若因應專案考得兩者並用時，得先確立好一些使用原則，方便後續維護。（還在摸索中...）

B. 使用vue-router導至其他分頁

心得

1. 目前還沒有遇到太大問題，之後分頁一多時，會需要考慮檔案結構。目前是把所有頁面放在views資料夾當中，元件類的統一放components集中管理。
2. 今天有嘗試將昨日完成的圖片模糊載入效果用Vue來實現，還在研究中。

C. 卡片擴展效果

codepen: https://codepen.io/zyrxdkoz/pen/qBjaNRv

實作邏輯

1. 先完成切版，讓每張卡片平均對齊，此時的flex屬性的值為0.5，意思是flex-grow為0.5，表示剩下的空間，每個都可以平均分到0.5份。
   

2. 設定每個卡片的active狀態：flex-grow的值為5，左下角文字的顏色飽和度也從0變為1。再加上transition ease-in。讓active狀態平滑展示。

3. 相關DOM掛載監聽器，被點擊的卡片加上active狀態，其他則移除。

明日任務

1. 挑戰比較困難的Covid 19 Tracker
2. Q&A欄位展示效果