# 前端考題-台中某公司-2023Apr

1. 建構可以使用vue-cli，或vite，不限定使用vue2或vue3
2. 根據設計稿，切分組件設計，實作範圍正常顯示位置，模糊地方不需實作
1. 首頁頁面，自選，熱門分頁切換選項功能，下方資料可以全部跟自選相同
2. 幣種選項點入，會移動滑入組件頁面，關閉按鈕為滑出移動組件，資料顯示只要上方清楚位置即可(非頁面跳轉，需使用Transition)
3. 幣種頁面，右上角會有彈窗

3. 設計稿中的資料
<br>
顯示用-uri:"https://min-api.cryptocompare.com/data/top/totaltoptiervolfull"
<br>
彈窗用-uri:"https://min-api.cryptocompare.com/data/pricemulti"

4. API使用參數

//顯示參數
params: {
  api_key: API_KEY,
  limit:10,
  tsym:"USD"
},

//彈窗參數
params: {
  api_key: API_KEY,
  tsyms:"USD,EUR,CNY",
  fsyms:"當前幣種"
},

Remark:"API-KEY"，可以免費申請透過google帳號申請，繳交不需要提供

5. 使用欄位

| 畫面的名稱 | API使用的欄位 |
| -------- | -------- |
| 幣種 | CoinInfo.Name |
| 最新價 | RAW USD PRICE |
| 24漲跌幅 | RAW USD CHANGEPCT24HOUR |
| 24h最高 | RAW USD HIGHDAY |
| 24h最低 | RAW USD LOWDAY |
| 24h成交量(USDT) | RAW USD VOLUME24HOUR |

24漲跌幅 RAW USD CHANGEPCT24HOUR
正數設定為漲，負數設定為跌

EX圖片路徑ㄓ:https://www.cryptocompare.com/media/37746251/btc.png

6. 設計稿網址:"https://www.figma.com/file/IG1sWJer9ZaFcT8fr3oRLI/DEMO-Test?node-id=0%3A1&t=0PKrbEoukGYOtWi2-0"

備註重點:模糊區域，不需要實作


7. 繳交資料回傳答案，麻煩壓縮成zip