# 服務資訊

以屬性驅動區塊（num、top、bottom、bg-col、col）並由原生 JS 套用樣式的商務／主機代管形象頁，含 JS 產生的 SVG 弧形分隔。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-03-01 |
| 分類 | 商業網站範例 |
| HTML 檔案 | `index.html` |
| 原始碼 | [target/20230301](https://github.com/pardnio/demo-web/tree/main/target/20230301) |

## 即時預覽

<iframe src="/target/20230301/" title="服務資訊" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/target/20230301/)

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 導覽列（nav[num=1]） | 品牌「PARDN CHIU」、附箭頭的 ITEM 按鈕、「My Page」連結與漢堡鈕；捲動後加上 scroll class（nav-001-show 動畫）。 |
| 頁首（section[header=1]） | 紅到紫 .linear-bg-1 漸層主視覺，含標題、內文、Code / GitHub 按鈕與 Freepik 插圖（image/header.png）。 |
| 服務（num=1） | .r4 四張圖示卡（Apple / 桌機 / 資料庫 / 伺服器），上緣為 arc-down 弧形分隔。 |
| 圖片與資訊列表（num=2） | #F2F6FC 背景，陰影圖片搭配標題、內文與 4 個附 MORE 連結的子項目。 |
| VPS 方案（num=3） | 租用VPS / 網站代管：基本 888／進階 1688（強調）／高階 3360 三方案，.r3 排列含勾選規格列表。 |
| 步驟與行動呼籲（num=4） | 深色 #212831 色帶，.r2 排列 4 個編號項目（fa-1..fa-4）與附 MORE 按鈕的文字區。 |
| 人物卡（num=5） | 3 張卡片，含圖片、粗體名稱與內文。 |
| 特色亮點（num=6） | 兩張陰影卡附漸層圖示徽章，以 top: -4rem 上移。 |
| 行動列（num=8） | 標題與內文搭配靠右 MORE 按鈕。 |
| 頁尾（footer[num=1]） | 網站名稱、署名與社群圖示；ABOUT / PRODUCTS / TECHNICAL / LEGAL 連結欄；版權列含 Privacy Policy / Contact。 |

## 互動行為

- js/index.js：document.body.onscroll 於 scrollTop &gt; 48 時切換 &lt;nav&gt; 的 scroll class。
- 屬性樣式處理：具 top / bottom / bg-col / col / bg-img 的元素被寫入 inline padding、背景色、文字色或背景圖；-- 開頭的值轉為 var(--...)。
- span[mask=arc / arc-up / arc-down / slash-left / slash-right / wave] 依視窗寬度替換為 inline SVG 分隔，填色取父層背景色。
- [unhover="1"] 元素於 mouseleave 時加上 unhover class 500ms。
- 漢堡鈕沒有作用中的事件（js/index.js 內切換程式碼已被註解）。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| PDRenderKit (loaded, active page code does not use it) | 1.0.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| Google Analytics gtag | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js (local) | - | js/index.js |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `nav/_001.scss`, `nav/_002.scss`, `nav/_body.scss`, `header/_001.scss`, `header/_002.scss`, `header/_003.scss`, `section/_000.scss ... _022.scss (incl. _015-top / _015-center / _015-bottom, _rm-1st-top)`, `footer/_001.scss`, `comp/_div-info.scss`, `comp/_innerText.scss`, `comp/_li-r2.scss`, `comp/_li-r3.scss`, `comp/_li-r4.scss`, `comp/_ul-button.scss`, `comp/_w-h-rate.scss`, `component/_info.scss` |

入口定義 --size-* / --h-* 字級變數、reset、.shadow / .border 工具類，並引入編號模組庫：nav 001-002、header 001-003、section 000-022、footer 001（以 section[num=N] / header=N 選取）。comp partial（r2 / r3 / r4 列表、按鈕、info）於各 section 內引入。本頁僅用部分模組。

```bash
cd target/20230301
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## 使用技巧

- 以屬性選取編號區塊模組（section[num="N"]、section[header="1"]、footer[num="1"]）。
- 執行期產生 inline SVG（二次曲線弧、斜切、三層波浪）作為區塊分隔。
- inline &lt;style&gt; :root 變數：--col-nav #212831、--col-system #00BB95、--col-border、--max-width 1100px；.linear-bg-1 漸層工具類。
- 混用 min-width / max-width 斷點（413 / 479 / 639 / 799 / 1023 / 1139px 與 480 / 640 / 768 / 1024 / 1040px）。
- a::before content: attr(freepik) 作為圖片來源標示浮水印。

## 外部資源

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- https://www.freepik.com/free-vector/programmer-working-with-css_5480318.htm (illustration link)
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20230301.jpg`
- image/header.png (relative, written as src=" image/header.png" with a leading space; included in folder)

## 相關頁面

- [專案結構](/zh/project-structure)
- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)