基於 Vue.js 建立的口罩地圖網站,以 Vuex 管理狀態,地圖採用 Leaflet.js。UI 皆以 SCSS 手刻而成,並支援 RWD。
- 藥局列表
- 可以看到目前所在位置距離 5 公里的所有藥局(依遠近順序排列)
- 可以輸入地址或區域搜尋藥局
- 輸入關鍵字時可以看見符合關鍵字的推薦選項
- 可以以上下鍵及 Enter 操作查看及選擇推薦選項
- 點擊推薦選項可以將該選項帶入搜尋框
- 點擊「搜尋」可以篩選出符合搜尋條件的藥局
- 可以重整藥局列表
- 可以查看購買規則
- 可以查看藥局詳細資訊,例如該藥局口罩剩餘量(成人、兒童)、店名、距離、營業狀態、地址、電話、備註
- 藥局口罩剩餘量可以依據數量顯示不同狀態顏色(充足、低庫存、無庫存)
- 可以點擊「於地圖查看」,跳轉地圖至該藥局,並顯示藥局詳細內容跳窗
- 可以點擊「撥打電話」撥打藥局電話
- 可以點擊「查看更多」載入更多符合條件的藥局
- 可以點擊定位按鈕,跳轉地圖至使用者所在位置
- 地圖
- 若無法取得使用者位置,可以自動定位至預設地點
- 可以顯示藥局的地圖圖標
- 地圖圖標可以依據該藥局營業狀態顯示不同顏色
- 點擊地圖圖標可以顯示藥局詳細內容跳窗,顯示藥局口罩剩餘量(成人、兒童)、店名、距離、營業狀態
- 導航列
- 可以點擊「口罩怎麼買」查看相關規定及連結
- Vue.js / Vuex
- Javascript (ES6+)
- Leaflet.js
- SCSS
- ESLint (Airbnb)
- 介接 API 來自 The F2E 2nd
- UI 設計圖稿來自 The F2E 2nd(設計師:PY)
- 本作品內圖片、內容等,純粹為個人練習使用,不做任何商業用途