- 網站使用深色背景，讓使用者容易聚焦內容本身
- 使用左側欄設計更易於點擊連結，也提升主要內容的視覺體驗
- Vue.js
- Vue Router
- Vuex
- axios
- vee-validate
- CSS
- Bootstrap
- Sass/SCSS
- HTML
- 網站為靜態網頁使用 Github Pages 架設
- 註冊及登入選單中已自動設定預設帳號及密碼，只要手動選擇帳號即可完成註冊及登入流程
- 從前台登入帳號後 透過左上方的齒輪圖案點擊可進入後台管理進行查看
- 後台測試帳號： [email protected]
- 後台測試密碼： GentSkin
src
├── assets
│ ├── images # 所有圖片素材
│ ├── layout
│ │ ├── _b-sidebar.scss # 後台側邊欄
│ │ ├── _f-sidebar.scss # 前台側邊欄
│ │ └── _footer.scss
│ │
│ ├── module
│ │ ├── _alertMassage.scss # 訊息提示
│ │ ├── _button.scss
│ │ ├── _form.scss
│ │ ├── _modal.scss # 自定義 Bootstrap modal
│ │ └── _scrollBtn.scss # 回頂端按鈕
│ │
│ ├── page
│ │ ├── backstage # 後台頁面SCSS
│ │ ├── forestage # 前台頁面SCSS
│ │ ├── _forestage.scss
│ │ └── _backstage.scss
│ │
│ ├── variable # 自定義 Bootstrap 變數
│ └── all.scss
│
├── components
│ ├── backstage # 後台主要組件
│ └── forestage # 前台主要組件
│
├── filters
│ ├── currency.js
│ └── date.js
│
├── store # Vuex
│ ├── cart.js # 購物車組件
│ ├── index.js # 全域組件
│ ├── order.js # 訂單組件
│ ├── products.js # 商品組件
│
└── views
├── backstage # 後台主要頁面
├── forestage # 前台主要頁面
├── Dashboard.vue # 後台版型
├── Index.vue # 前台版型
└── Login.vue # 登入頁面
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent