專案名稱

疫網打盡——最可信的防疫平台

專案簡介

「疫網打盡」是一個專為疫情防控設計的前端網站平台，結合資訊整合、物資購買捐贈、疫情數據可視化、互動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與參數調整：

    • 輪播頁數、商品卡片寬高自適應，配合視窗寬度即時排版。

  • 元件間動作聯動：

    • 表單與表單驗證交互。

    • 新聞點擊展開大圖、商品加入購物車聯動計算總價、限制購買數量等。

適合展示重點

  1. 複雜前端UI/UX 設計實踐案例：呈現從數據大屏（echarts）、RWD、商品卡片、購物流程、聊天室等全方位技術整合。

  2. 模組化設計能力：可獨立拆分為各種現代化Web應用模組復用。

  3. 團隊協作與大型專案管理功力：團隊信息、合作組織、跨部門協同整合能力說明。

  4. 真實世界主題應用：疫情防控、醫衛資訊，加強社會責任感與正確資訊傳遞。