# UNITED 官網 說明文件

## 架構

## 規範 OOCSS
### 結構 及 樣式 的分離

.btn {
  display: inline-block;
  padding: .375rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  height: 2.7rem;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: .25rem;
}
.btn-primary {
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}

.btn-accent {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-default {
  color: #373a3c;
  background-color: #fff;
  border-color: #ccc;
}

.btn-outline-primary {
  color: #0275d8;
  background-color: #fff;
  border-color: #0275d8;
}
.btn-bold {
  border-width: 3px;
}

### 內容 與 容器 的分離

.card {
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 3px 3px 3px rgba(black, .16);
  .card-head {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  .card-body ul {
    margin-left: 1em;
    margin-right: 1em;
    list-style: disc;
  }
  .card-body img {
    max-width: 100%;
  }
  .card-footer {
    margin-top: 15px;
    text-align: right;
  }
}

* 結構 : margin、padding、display、vertical-align
* 樣式 :
* 色彩樣式：color、background-color、border-color
* 尺寸樣式：font-size、height

* 容器 : content、card、form
* 內容 : button、input、bar

盡可能保有擴展以及複用性，不要讓元件被限制在特定的容器下

## 命名準則

## 需求總表
### 頁面統計 約 32 頁 (結構雷同頁面不計)
部分為 TAB 切換，有些結構不同需另切
> 首頁 (1p)
- [ ] Homepage
> About us 關於集團 (4p)
- [ ] overview
- [ ] spirit
- [ ] responsibility
- [ ] history
> Brand&Service 品牌服務 (5p)
- [ ] clothing e-commerce
- [ ] micro business
- [ ] fintech
- [ ] panel foundry
- [ ] incubator
> Media center 媒體中心 (3p)
- [ ] latest news
- [ ] group image
- [ ] AD player
> Inventor area 投資關係人專區 (15p)
- [ ] finance (3)
- [ ] shareholders (3)
- [ ] corporate governance (7)
- [ ] stakeholder contact (2)
> Talent&Team recruitment 人才團隊招募 (4p)
- [ ] incubator
- [ ] vacancies
- [ ] terms of service
- [ ] privacy policy

### 頁面特效
- [ ] All : 圓球鼠標、Hover 樣式轉換 [ref 鼠標樣式](https://brandloyal.co/about/)
* 自己寫
- [ ] All : 進、轉場動畫 [ref](https://www.alliancebernstein.com/corporate/en/home.html?r=no)
* unknow
- [ ] Homepage : 全屏滾動 [ref](https://fantasy.co/)
* [fullPage.js](https://alvarotrigo.com/fullPage/)
- [ ] Homepage、About us、Brand&Service : 數據數字跳轉動畫(scrollTop detect)+依序出現+BG parallax
* [CountUp.js](https://inorganik.github.io/countUp.js/) + 自己寫部分
- [ ] Homepage : tab Hover 下底線展開 [ref](https://www.caffeinepost.com/works/)
* 自己寫
- [ ] Homepage : slogan 進場動畫 [ref](https://www.trustme.com.tw/beauty-equipment/)
* unknow
- [ ] About us : 背景色轉換(scrollTop detect) [ref](https://www.hugeinc.com/)
* 自己寫
- [ ] About us : 標題進場 [ref](https://www.tambien.studio/heetch)
* unknow
- [ ] About us : 圖片進場 [ref](https://brandloyal.co/about/)
* [AOS.js](https://michalsnik.github.io/aos/)
- [ ] About us : Horizontal Scroll [ref](https://www.borngroup.com/work/ishopchangi/)
* unknow
- [ ] About us : 中途 fixed
* 自己寫
- [ ] Media Center : 影片彈窗+Hover [ref](https://clab.org.tw/media/)
* 自己寫

### 頁面功能
- [ ] All : 全站關鍵字搜尋 + 結果 breadcrumbs 跟標題顯示及關鍵字 highlight
- [ ] Homepage : 股價即時資訊資料串接
- [ ] Media center : 圖片彈窗 + 下載按鈕

### 不確定點
- [ ] All : 有個亮紅球球的換圖設計是指 ?
- [ ] About us : 集團沿革無後台，由前端上稿是指當前直接寫死 ?
- [ ] Inventor area : PDF 連結是指點擊後開啟新分頁顯示 PDF 檔案內容 ?
- [ ] Inventor area : scroll bar 效果是指 smooth ? [ref](https://basicagency.com/)
- [ ] Inventor area & Brand&Service 都有品牌孵化器 ?