專案名稱
疫網打盡——最可信的防疫平台
專案簡介
「疫網打盡」是一個專為疫情防控設計的前端網站平台，結合資訊整合、物資購買捐贈、疫情數據可視化、互動Q&A機制等多功能於一身。設計靈感來自真實世界疫情經驗，強調資訊正確性與社會參與，並展示軟體設計團隊的協作與技術整合能力。
專案網址:
https://109btc.blogspot.com/#banner
技術架構
核心框架：Vue 3
UI 元件庫：Element Plus、Bootstrap 4.6
資料視覺化：Echarts
輔助套件：jQuery、Popper.js
CSS預處理：自定義 CSS 和 Bootstrap 格式化
前端特效：Loading 動畫、響應式設計、Carousel 輪播、Popover彈窗
主要功能模組說明
首頁（Banner）
輪播大圖（vertical carousel），動態展示四則防疫主題標語及背景圖片。
強調資訊可信與防疫重點。
關於我們
團隊介紹、網站宗旨、成立原因（Element Plus Accordion協同顯示）。
右側圖片走馬燈展示活動或團隊氣氛照片。
疫情數據（數據疫情）
三種Echarts統計視覺化：
疫情發展趨勢（折線圖：確診/管制/死亡數）
各國死亡人數（圓餅圖）
各國死亡率（圓餅圖）
新聞推播
水平輪播排列，展示疫情動態新聞，含圖文摘要、來源、點擊放大細節（Dialog）。
RWD響應式自動調整顯示張數。
物資捐贈
物資捐助說明及合作夥伴logo展示。
按鈕觸發彈窗，提示用戶網路連線或募資狀況。
物資購買與購物車系統
商品列表（卡片式設計含圖片、價錢、說明）。
點選加入購物車，可於Popover彈窗選數量。
購物車Modal：顯示已選商品、數量、金額、小型訂單填寫表單（收件人/電話/地址），提交後重置。
表單驗證、資料儲存localStorage（購物車持久化）。
Q&A 互動問答
常見疫情問題（Accordion 展開），內建自動化問答 ChatBot（Element Plus Popover聊天室）支援。
使用者可自由填寫新問題，通知回饋。
聯絡我們
地址、電話、Email 列表（含icon圖示），搭配圖片說明。
聯絡表單（姓名、Email、內容）回饋，交互通知效果。
側邊快捷浮動欄
快捷購物車、ChatBot 聊天、快速返回頂部按鈕。
隨視窗滾動與使用習慣自動顯示/隱藏。
界面設計重點
全站響應式：針對桌機、平板、手機各尺寸自適應。
現代化UI/UX：大圖banner、卡片化產品、深色/強色背景區隔分明。
互動性強：各模組配合彈窗、互動特效，提升用戶參與感。
程式設計與工程亮點
物件導向Vue組件設計：
資料統一集中於
data內管理，分模組設計，便於維護及擴充。多處運用雙向繫結v-model，實現表單與UI的即時互動。
資料本地持久化：
購物車商品內容存於localStorage，頁面重載恢復狀態，提升用戶體驗。
自訂動畫與特效：
頁面初始loading動畫（CSS keyframes）。
切換特效（Transition/Fade）、按鈕動態特效。
彈性化RWD與參數調整：
輪播頁數、商品卡片寬高自適應，配合視窗寬度即時排版。
元件間動作聯動：
表單與表單驗證交互。
新聞點擊展開大圖、商品加入購物車聯動計算總價、限制購買數量等。
適合展示重點
複雜前端UI/UX 設計實踐案例：呈現從數據大屏（echarts）、RWD、商品卡片、購物流程、聊天室等全方位技術整合。
模組化設計能力：可獨立拆分為各種現代化Web應用模組復用。
團隊協作與大型專案管理功力：團隊信息、合作組織、跨部門協同整合能力說明。
真實世界主題應用：疫情防控、醫衛資訊，加強社會責任感與正確資訊傳遞。
