NexaCore 成果

构建一个名为 `PrecisionSection` 的单一 React + TypeScript + Tailwind CSS v3 组件。不使用外部图标库——所有图标均为内联 SVG 或 `<img>` 标签。无 `useState`、无 animations、无 hover 状态。采用两套独立布局：桌面端阶梯布局（绝对定位的支柱）和移动端交替流式布局。使用 `sm:` breakpoint 控制两者的可见性。

---

## 全局字体

在 `index.css` 中注册 **"Mazzard H"** 并全局应用：

```css
@font-face {
  font-family: 'Mazzard H';
  font-weight: 400;
  font-style: normal;
  src: url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff') format('woff'),
       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.ttf') format('truetype');
}
@font-face {
  font-family: 'Mazzard H';
  font-weight: 500;
  font-style: normal;
  src: url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff') format('woff'),
       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.ttf') format('truetype');
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body, * { font-family: 'Mazzard H', sans-serif; }
}
```

---

## 文件：`src/components/PrecisionSection.tsx`

### 常量（位于文件顶部、组件之前）

```ts
const LOGO_ICON =
  'https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/6870f623cf3df417ce45df05_icon%20logo%20eternacloud.png';

const LINE_GRADIENT =
  'linear-gradient(rgb(28, 78, 255), rgb(254, 136, 27) 0%, rgb(172, 36, 255) 25%, rgb(247, 159, 255) 50%, rgb(255, 214, 0) 66%, rgb(254, 136, 27) 84%, rgba(254, 136, 27, 0) 102%)';

const PILLARS = [
  { label: '界定范围', items: ['条件', '容量', '规格', '时间线'], leftVw: 2.8,  bottomVw: 7     },
  { label: '整合', items: ['土木', '机械', '电气', '控制'], leftVw: 22.4, bottomVw: 9.08  },
  { label: '认证', items: ['冗余', '测试', '合规', '签批'], leftVw: 41.2, bottomVw: 11.16 },
  { label: '启用', items: ['切换', '运行手册', '交接', 'SLAs'], leftVw: 61.1, bottomVw: 13.24 },
];
```

---

### Section 元素

仅使用内联样式（`<section>` 本身不使用 Tailwind）：

```
background-image: url("https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260418_125638_553b96dc-a1fd-4b2b-81a9-ed7daa80006e.png&w=1280&q=85")
background-size: cover
background-position: center
background-repeat: no-repeat
width: 100%
display: flex
flex-direction: column
align-items: center
text-align: center
padding: clamp(48px, 8vw, 120px) clamp(16px, 4vw, 60px) clamp(48px, 5.56vw, 80px)
gap: clamp(32px, 4vw, 56px)
```

---

### 区块 1 — 页头

外层 `<div>` — 内联：`display: flex`、`flex-direction: column`、`align-items: center`、`gap: 36px`

#### 徽章胶囊 `<div>`

内联：
```
background-color: rgb(249, 249, 249)
display: flex
align-items: center
gap: 8px
font-size: clamp(14px, 1.1vw, 18px)
font-weight: 500
border-radius: 36px
padding: clamp(8px, 0.9vw, 14px) clamp(12px, 1.25vw, 20px)
color: rgb(26, 11, 84)
white-space: nowrap
```

包含以下内联 SVG（`width: 19`、`height: 18`、`flex-shrink: 0`、`viewBox="0 0 17 16"`、`fill="none"`）：

```xml
<g clipPath="url(#prec-clip)">
  <circle cx="8.5" cy="8" r="7" stroke="#c86fff" fill="none" />
  <path d="M9.5 11.5V10.5H7.5V11.5H9.5ZM7.5 14.5C7.5 15.0523 7.94772 15.5 8.5 15.5C9.05228 15.5 9.5 15.0523 9.5 14.5H7.5ZM8.5 11.5H7.5V14.5H8.5H9.5V11.5H8.5Z" fill="rgb(200, 111, 255)" />
  <path d="M12 7H11V9H12V7ZM15 9C15.5523 9 16 8.55228 16 8C16 7.44772 15.5523 7 15 7V9ZM12 8V9H15V8V7L12 7V8Z" fill="rgb(200, 111, 255)" />
  <path d="M5 9H6V7H5V9ZM2 7C1.44772 7 1 7.44772 1 8C1 8.55228 1.44772 9 2 9V7ZM5 8V7H2V8V9H5V8Z" fill="rgb(200, 111, 255)" />
  <path d="M7.5 4.5V5.5H9.5V4.5H7.5ZM9.5 1.5C9.5 0.947715 9.05228 0.5 8.5 0.5C7.94772 0.5 7.5 0.947715 7.5 1.5H9.5ZM8.5 4.5H9.5V1.5H8.5H7.5V4.5H8.5Z" fill="rgb(200, 111, 255)" />
</g>
<defs>
  <clipPath id="prec-clip">
    <rect width="16" height="16" fill="white" transform="translate(0.5)" />
  </clipPath>
</defs>
```

SVG 后是纯文本 **"结构化交付"**

#### 标题 + 副文案 `<div>`

内联：`display: flex`、`flex-direction: column`、`align-items: center`、`max-width: clamp(700px, 60vw, 900px)`、`gap: 22px`

`<h2>` — 内联：`font-size: clamp(28px, 4vw, 56px)`、`font-weight: 500`、`color: rgb(26, 11, 84)`、`line-height: 1.15`、`margin: 0`

`<h2>` 内包含两个 `<span>` 元素：

**Span 1** — Tailwind class `sm:whitespace-nowrap`，内联 `display: block`：
> **一个端到端的集成系统。**

**Span 2** — 仅使用内联样式：
```
background-image: linear-gradient(90deg, rgb(43, 167, 255), rgb(202, 69, 255) 50%, rgb(254, 136, 27))
-webkit-background-clip: text
background-clip: text
-webkit-text-fill-color: transparent
color: transparent
padding-bottom: 0.3vw
display: block
```
> **持续复利的运营价值。**

标题下方的 `<p>` — 内联：`font-size: clamp(15px, 1.2vw, 20px)`、`color: rgb(169, 151, 206)`、`margin: 0`
> **"NexaCore 团队精准捕捉、协调、验证并交付确保您的项目按计划推进所需的一切。"**

---

### 区块 2 — 支柱容器 `<div>`

内联：`width: 100%`、`max-width: 82.292vw`、`margin: 0 auto`

包含两个子元素：

---

#### 桌面端支柱 — `hidden sm:block`（Tailwind）

内联：
```
position: relative
width: 82.292vw
height: 31.94vw
color: rgb(26, 11, 84)
```

遍历 `PILLARS`。每个支柱外层 `<div>`：
```
position: absolute
bottom: `${pillar.bottomVw}vw`
left: `${pillar.leftVw}vw`
display: flex
flex-direction: column
align-items: center
justify-content: flex-start
```

**标签块 `<div>`：**
```
display: flex
align-items: center
justify-content: center
background-image: linear-gradient(135deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.6))
font-size: 18px
font-weight: 500
border-radius: 20px
padding-top: 0.972vw
padding-bottom: 0.972vw
padding-left: 1.736vw
padding-right: 1.736vw
white-space: nowrap
gap: 8px
```

标签块内容：
1. `<img src={LOGO_ICON} alt="" style={{ width: '1.111vw', height: 'auto', display: 'inline-block' }} />`
2. `{pillar.label}`

**线条 + 项目外层 `<div>`**（紧接在标签块下方）：
```
position: relative
display: flex
flex-direction: column
align-items: center
justify-content: flex-end
```

**项目容器**（绝对定位，覆盖在线条上）：
```
position: absolute
top: 0.56vw
left: 1.94vw
display: flex
flex-direction: column
gap: 4px
font-size: 16px
align-items: flex-start
justify-content: space-between
```

每个项目 `<div>`：
```
padding-top: 0.69vw
padding-bottom: 0.69vw
padding-left: 1.04vw
padding-right: 1.04vw
display: flex
align-items: flex-start
```
文本：项目字符串。

**垂直渐变线 `<div>`**（项目容器的同级元素，渲染在其后）：
```
background-image: LINE_GRADIENT  （见上方常量）
width: 1px
height: 14.24vw
```

---

#### 移动端支柱 — Tailwind：`flex flex-col sm:hidden w-full`

内联：`color: rgb(26, 11, 84)`、`gap: 0`

遍历带 index 的 `PILLARS`。`isRight = index % 2 !== 0`（index 1 和 3 右对齐）。

**支柱外层 `<div>`：**
```
display: flex
flex-direction: column
align-items: isRight ? 'flex-end' : 'flex-start'
width: 100%
padding-bottom: 8px
```

**标签块 `<div>`：**
```
display: inline-flex
align-items: center
background-image: linear-gradient(135deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.6))
font-size: 15px
font-weight: 500
border-radius: 20px
padding: 10px 18px
white-space: nowrap
gap: 7px
```

标签块内容：
1. `<img src={LOGO_ICON} alt="" style={{ width: 16, height: 'auto' }} />`
2. `{pillar.label}`

**线条 + 项目行 `<div>`：**
```
display: flex
flex-direction: isRight ? 'row-reverse' : 'row'
align-items: stretch
width: 100%
```

**垂直线 `<div>`：**
```
width: 1px
flex-shrink: 0
background-image: LINE_GRADIENT
margin-left: isRight ? 0 : 22px
margin-right: isRight ? 22px : 0
min-height: 120px
```

**项目 `<div>`：**
```
display: flex
flex-direction: column
gap: 0
padding-left: isRight ? 0 : 20px
padding-right: isRight ? 20px : 0
padding-top: 8px
padding-bottom: 8px
align-items: isRight ? 'flex-end' : 'flex-start'
```

每个项目 `<div>`：
```
font-size: 14px
color: rgb(100, 80, 160)
padding: 8px 0
```
文本：项目字符串。

---

## 支柱数据参考

| 标签 | 项目 | 桌面端 left | 桌面端 bottom |
|---|---|---|---|
| 界定范围 | 条件、容量、规格、时间线 | 2.8vw | 7vw |
| 整合 | 土木、机械、电气、控制 | 22.4vw | 9.08vw |
| 认证 | 冗余、测试、合规、签批 | 41.2vw | 11.16vw |
| 启用 | 切换、运行手册、交接、SLAs | 61.1vw | 13.24vw |

---

**无 animations。无 hover 状态。无 scroll 效果。无 JavaScript 逻辑。仅静态渲染。桌面端：通过 `position: absolute` 以及采用 `vw` 单位的 `bottom` 和 `left`，将 4 个支柱排列成逐级上升的阶梯。移动端：单列布局，偶数 index 的支柱左对齐，奇数 index 的支柱右对齐，每个支柱的项目列表旁均有一条垂直渐变线。**