---
# System prepended metadata

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

---

# 前端考題-台中某公司-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使用參數

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

```javascript
//彈窗參數
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"

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

![](https://i.imgur.com/VPghTL1.png)


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