🐤 CHT Design System
🛠 Build
- 下載 https://prepros.io
- 資料夾拖上去放開
- 編輯 pug 與 sass，不要編輯 html 與 css
ℹ️ 介紹
- awd: 輸出時兩份檔案，檔名後為 -m 或是 -d，例如 product-m.html 是 awd 手機版。html 結構一樣，css 不同。
- rwd: 輸出時一份檔案
- 手機版請用手機測，桌面版用電腦測
- 手機版拉到桌面版的寬度，或是桌面版縮小到手機版寬度，這兩種狀況遇到的版面問題「不處理」，因為上線後不可能發生。
- 要在本地端預覽，請下載 Prepros https://prepros.io/ ，將資料夾拖到上面放開，再按「地球」按鈕即可
- rwd 使用 rwd.css
- awd mobile 使用 awd-mobile.css
- awd desktop 使用 awd-desktop.css
📁 交付時固定會有的資料夾
js 共用cssimgincludes：常用的元件 / html 有輸出，但最好去看 githublayout：頁面版型 / html 有輸出，但最好去看 github- 根目錄下的
*.html：說明用的檔案。
docs: 元件頁面js- 資料夾都用來放交付頁面
📓 所有頁面列表（以交付日期分區）
8/31
方案詳細頁 / edm / rwd
現行風格 - 行動申購 / rwd
9/8
新辦(無購機) / new-no-phone / rwd
攜碼(無購機) / number-portability-no-phone /rwd
續約(無購機) / contract-extension-no-phone / rwd
續約(購機) / contract-extension /rwd
9/15
- mobile
- desktop
- 產品比較（另開新視窗）
- 產品比較（空狀態）
- 加入產品比較表固定 header 功能後，將比較表獨立為新頁面。理由：原先比較表是在 lightbox 裡的捲動區塊，加上固定 header 後，用戶會需要捲三層 div（卷 lightbox, 捲 lighbox content，捲表格），不好用。改為單頁後只需要捲表格。
訂單查詢 / check-order / awd
合約查詢 / check-plan / awd
光世代列表頁 / cable / awd
企客 / frontpage / awd
WiFi 無限通 / wifi / rwd
儲值卡 / prepaid / awd
觀光卡 / tourist / awd or rwd
9/30
市話 / landline / rwd
MOD 基本/包月五選一 / mod-monthly / awd + rwd
MOD 包月（老客戶）/ mod-returning / rwd
寬頻 / broadband / awd + rwd
優惠廣告
其他
10/30
登入（寬頻）/ login-broadband / rwd （技術限制之後不會用到了）
登入（漫遊）/ login-roaming / rwd
漫遊 / roaming / awd + rwd:
市話 / landline-new / awd + rwd
MOD 裝機 / mod-install:
MOD 包月影片 / mod-monthly-new:
Wifi 無限通 / wifi-new:
寬頻/ broadband-new:
廣告優惠頁元件:
4G 加量包 / 4g:
11 月