更新 Astro 配置

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.astro/content.d.ts

@@ -194,6 +194,6 @@ declare module 'astro:content' {
 		LiveContentConfig['collections'][C]['loader']
 	>;
 
-	export type ContentConfig = typeof import("./../src/content.config.mjs");
+	export type ContentConfig = typeof import("../src/content.config.mjs");
 	export type LiveContentConfig = never;
 }

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1776058818761
+		"lastUpdateCheck": 1779412568408
 	}
 }

AGENTS.md

@@ -31,15 +31,50 @@ pnpm astro <command>  # Run any astro command directly
 
 ```
 src/
-├── layouts/Layout.astro      # Main layout with navigation
+├── layouts/Layout.astro      # Main layout with desktop/mobile navigation
 ├── pages/                    # Route pages (use .astro files)
 │   ├── index.astro           # Home page
-│   └── [route]/index.astro
+│   ├── qazk/index.astro      # Product center - industrial safety (工贸企业)
+│   ├── property/index.astro  # Product center - smart property (物业楼宇)
+│   ├── elderly/index.astro   # Product center - smart elderly care
+│   ├── construction/index.astro # Product center - smart construction
+│   ├── education/index.astro # Product center - smart campus
+│   ├── kitchen/index.astro   # Product center - smart kitchen
+│   ├── chemical/index.astro  # Product center - hazardous chemicals (危险化学品)
+│   ├── fireworks/index.astro # Product center - fireworks (烟花爆竹)
+│   ├── mining/index.astro    # Product center - non-coal mining (非煤矿山)
+│   ├── customization/index.astro
+│   ├── partnership/index.astro
+│   └── intro/*/index.astro   # Intro/detail pages
 ├── components/
-│   └── sections/            # Reusable section components
+│   └── sections/             # Reusable section components
 └── styles/styles.css        # Global styles
+
+public/
+├── img/
+│   ├── property/             # Smart property page assets (webp)
+│   ├── elderly/              # Smart elderly care page assets (webp preferred)
+│   ├── construction/         # Smart construction page assets (webp preferred)
+│   ├── education/            # Smart campus page assets (webp + svg)
+│   ├── kitchen/              # Smart kitchen page assets (webp)
+│   ├── chemical/             # Hazardous chemicals assets (hero.webp + architecture.webp)
+│   ├── fireworks/            # Fireworks assets (hero.webp + architecture.webp)
+│   ├── mining/               # Non-coal mining assets (hero.webp + architecture.webp)
+│   └── ...
+└── js/script.js
 ```
 
+### High-risk industry modules pattern (chemical / fireworks / mining)
+
+Each follows the same simplified 5-section layout (similar to construction):
+1. `{Industry}Hero.astro` — IOC big-screen screenshot + 4 feature pills + 2 audience boxes (企业 / 监管赋能)
+2. `{Industry}PainPoints.astro` — industry-specific pain points (4–6 items, distinct visual style per module)
+3. `{Industry}Policy.astro` — industry-specific regulations (6–10 items, distinct layout per module)
+4. `{Industry}Architecture.astro` — solution overview + system layer diagram + architecture image
+5. `{Industry}Hardware.astro` — 6 key hardware solutions (text + icons, no images)
+
+Hero images are IOC dashboard screenshots; architecture images are 3D scene illustrations of the facility.
+
 ## Code Style Guidelines
 
 ### Astro Components
@@ -89,7 +124,9 @@ const { title, activeNav = 'home' } = Astro.props;
 ### Layout Pattern
 
 - All pages use `<Layout>` component with `activeNav` prop for navigation highlighting
-- Navigation items defined in Layout.astro: home, qazk, customization, partnership
+- Product center uses dropdown/submenu in `Layout.astro`
+- Current product nav IDs (9 modules in order): `qazk`, `property`, `elderly`, `kitchen`, `education`, `construction`, `chemical`, `fireworks`, `mining`
+- Desktop dropdown renders as a 3×3 grid (`grid grid-cols-3` with fixed `w-[600px]`); mobile dropdown uses `grid-cols-3`
 - Main content wrapped in `<main>` tag
 
 ```astro
@@ -128,6 +165,16 @@ const { title, activeNav = 'home' } = Astro.props;
 - Reference with absolute paths: `/img/image.webp`
 - Use responsive sizing classes: `w-full h-full object-cover`
 
+#### Image optimization with Sharp
+
+- Use Sharp for converting newly added PNG/JPG/JPEG assets to WebP before commit.
+- Keep original design/source assets outside `public/` when possible; only optimized assets should be used by the website.
+- Example (single folder conversion):
+
+```bash
+node --input-type=module -e "import sharp from 'sharp'; import { promises as fs } from 'node:fs'; import path from 'node:path'; const dir='public/img/kitchen'; const files=await fs.readdir(dir); for (const name of files){ const ext=path.extname(name).toLowerCase(); if(!['.png','.jpg','.jpeg'].includes(ext)) continue; const src=path.join(dir,name); const out=path.join(dir,path.basename(name,ext)+'.webp'); await sharp(src).webp({quality:82,effort:6}).toFile(out);}"
+```
+
 ### Color Usage
 
 - Primary actions: `bg-primary` (#165DFF)

README.md

@@ -1,258 +1,153 @@
 # 贝凡官网
 
-浙江贝凡网络科技公司官方网站，提供企业介绍、产品展示、解决方案等信息的现代化网站。
+浙江贝凡网络科技公司官方网站，包含公司介绍、产品中心（工贸企业 / 物业楼宇 / 智慧养老 / 明厨亮灶 / 智慧学校 / 智慧工地 / 危险化学品 / 烟花爆竹 / 非煤矿山）、本地化定制与生态合作等页面。
 
 ## 技术栈
 
-- **框架**：[Astro 5.7.3](https://astro.build) - 现代化的静态站点生成器
-- **样式**：[Tailwind CSS](https://tailwindcss.com) - 实用优先的 CSS 框架
-- **包管理器**：[pnpm](https://pnpm.io) - 快速、节省磁盘空间的包管理器
-
-## 项目结构
-
-```
-beifan.cn/
-├── src/
-│   ├── layouts/
-│   │   └── Layout.astro          # 主布局组件（包含导航栏、页脚等）
-│   ├── pages/
-│   │   ├── index.astro            # 首页（公司介绍）
-│   │   ├── qazk/
-│   │   │   └── index.astro        # 企安智控页面
-│   │   ├── customization/
-│   │   │   └── index.astro        # 本地化定制页面
-│   │   ├── partnership/
-│   │   │   └── index.astro        # 生态合作页面
-│   │   └── intro/                 # 独立产品页面
-│   │       ├── qazk/
-│   │       │   └── index.astro    # 企安智控详情页
-│   │       ├── hardware/
-│   │       │   └── index.astro    # 硬件物联详情页
-│   │       ├── customized-deployment/
-│   │       │   └── index.astro    # 本地化定制详情页
-│   │       └── miniapp-manual/
-│   │           └── index.astro    # 小程序手册页
-│   ├── components/
-│   │   ├── sections/
-│   │   │   ├── Hero.astro         # Hero 区域组件
-│   │   │   ├── CompanyIntro.astro  # 公司介绍组件
-│   │   │   ├── DevelopmentHistory.astro # 发展历程组件
-│   │   │   ├── DataVisualization.astro # 数据可视化组件
-│   │   │   ├── Honors.astro       # 公司荣誉资质组件
-│   │   │   ├── Contact.astro       # 联系方式组件
-│   │   │   ├── SaaS.astro         # SaaS化系统组件
-│   │   │   ├── Policy.astro       # 政策导向组件
-│   │   │   ├── AccidentCases.astro # 事故案例组件
-│   │   │   ├── Hardware.astro      # 硬件物联组件
-│   │   │   ├── AIModel.astro       # AI大模型组件
-│   │   │   ├── Customization.astro # 本地化定制组件
-│   │   │   ├── Partnership.astro   # 生态合作组件
-│   │   │   └── Footer.astro       # 页脚组件
-│   │   └── script.js               # 组件脚本
-│   └── styles/
-│       └── styles.css              # 全局样式
-├── public/                        # 静态资源
-│   ├── img/                        # 图片资源
-│   │   ├── partner-search.webp     # 合作伙伴搜索图片
-│   │   ├── cooperation-process.webp # 合作流程图片
-│   │   └── shake-hands.webp        # 握手合作图片
-│   ├── js/
-│   │   └── script.js               # JavaScript 文件
-│   ├── docs/
-│   │   └── 合作申请表.xlsx         # 文档资源
-│   ├── intro/                      # Intro 页面的静态资源
-│   │   ├── qazk/                   # 企安智控页面资源
-│   │   └── hardware/               # 硬件物联页面资源
-│   ├── favicon.ico                 # 网站图标
-│   ├── robots.txt                  # 爬虫规则
-│   └── sitemap.xml                 # 网站地图
-├── .env                            # 环境变量
-├── .gitignore                      # Git 忽略文件
-├── astro.config.mjs                # Astro 配置文件
-├── tailwind.config.mjs             # Tailwind CSS 配置文件
-└── package.json                    # 项目依赖配置
-```
-
-## 页面结构
-
-### 1. 首页（公司介绍）- `/`
-
-包含以下内容区块：
-- **Hero 区域**：全场景产业数字化转型服务介绍
-- **公司介绍**：公司基本信息和发展理念
-- **发展历程**：浙江贝凡发展历程时间轴
-- **数据可视化**：企业关键数据展示（视觉理解大模型、SLA可用性、合作伙伴、软著专利）
-- **生态合作**：合作伙伴展示
-- **联系我们**：联系方式展示
-- **页脚**：版权信息、ICP备案等
-
-### 2. 企安智控页面 - `/qazk`
-
-包含以下内容区块：
-- **SaaS化系统**：企安智控智能安全管理解决方案
-- **最新政策导向**：安全生产相关政策法规
-- **典型事故案例**：重大事故案例分析
-- **硬件物联**：12个物联网应用场景
-- **AI大模型**：15个AI应用场景
-- **页脚**：版权信息、ICP备案等
-
-### 3. 本地化定制页面 - `/customization`
-
-包含以下内容区块：
-- **本地化定制**：多行业全场景定制服务
-- **页脚**：版权信息、ICP备案等
-
-### 4. 生态合作页面 - `/partnership`
-
-包含以下内容区块：
-- **携手合作，共创未来，共享市场红利**：合作优势卡片（包含8个合作优势）
-- **我们需要找的合作伙伴**：目标招商对象卡片（包含4类合作伙伴）
-- **合作流程**：合作流程卡片（包含4步合作流程）
-- **页脚**：版权信息、ICP备案等
-
-### 4. 独立产品页面（Intro）
-
-这些页面使用独立的导航栏和样式：
-
-- **企安智控**：智能安全管理平台详细介绍
-- **硬件物联**：27种智能硬件产品展示
-- **本地化定制**：全场景产业数字化定制方案
-- **小程序手册**：企安智控小程序使用指南
+- **框架**：Astro 5.x（静态站点生成）
+- **样式**：Tailwind CSS 3.x
+- **语言**：TypeScript
+- **图标**：FontAwesome 4.7.0
+- **包管理器**：pnpm
+- **图片处理**：Sharp（用于转 WebP）
 
 ## 快速开始
 
-### 安装依赖
-
 ```bash
 pnpm install
-```
-
-### 开发模式
-
-启动本地开发服务器：
-
-```bash
 pnpm dev
 ```
 
-访问 http://localhost:4321 查看网站。
+本地访问：`http://localhost:4321`
 
-### 构建生产版本
+## 常用命令
 
-构建静态站点：
+```bash
+# 开发
+pnpm dev
+pnpm start
+
+# 构建与预览
+pnpm build
+pnpm preview
+
+# Astro 原生命令
+pnpm astro <command>
+```
+
+## 项目结构
+
+```text
+beifan.cn/
+├── src/
+│   ├── layouts/
+│   │   └── Layout.astro
+│   ├── pages/
+│   │   ├── index.astro
+│   │   ├── qazk/index.astro
+│   │   ├── property/index.astro
+│   │   ├── elderly/index.astro
+│   │   ├── construction/index.astro
+│   │   ├── kitchen/index.astro
+│   │   ├── education/index.astro
+│   │   ├── chemical/index.astro
+│   │   ├── fireworks/index.astro
+│   │   ├── mining/index.astro
+│   │   ├── customization/index.astro
+│   │   ├── partnership/index.astro
+│   │   └── intro/*/index.astro
+│   ├── components/
+│   │   └── sections/
+│   └── styles/styles.css
+├── public/
+│   ├── img/
+│   │   ├── property/
+│   │   ├── elderly/
+│   │   ├── construction/
+│   │   ├── kitchen/
+│   │   ├── education/
+│   │   ├── chemical/
+│   │   ├── fireworks/
+│   │   ├── mining/
+│   │   └── ...
+│   └── js/script.js
+├── astro.config.mjs
+├── tailwind.config.mjs
+└── package.json
+```
+
+## 主要页面
+
+- `/`：公司介绍首页
+- `/qazk`：工贸企业（企安智控）
+- `/property`：物业楼宇
+- `/elderly`：智慧养老
+- `/kitchen`：明厨亮灶
+- `/education`：智慧学校
+- `/construction`：智慧工地
+- `/chemical`：危险化学品
+- `/fireworks`：烟花爆竹
+- `/mining`：非煤矿山
+- `/customization`：本地化定制
+- `/partnership`：生态合作
+- `/intro/*`：产品/能力介绍子页面
+
+## 导航说明
+
+导航由 `src/layouts/Layout.astro` 统一管理：
+
+- 一级：公司介绍 / 产品中心 / 本地化定制 / 生态合作
+- 产品中心二级（9 项，桌面下拉为 3×3 网格、移动端为 3 列网格）：
+  - 工贸企业（`qazk`）
+  - 物业楼宇（`property`）
+  - 智慧养老（`elderly`）
+  - 明厨亮灶（`kitchen`）
+  - 智慧学校（`education`）
+  - 智慧工地（`construction`）
+  - 危险化学品（`chemical`）
+  - 烟花爆竹（`fireworks`）
+  - 非煤矿山（`mining`）
+- 页面通过 `<Layout activeNav="...">` 控制高亮
+
+## 图片规范与 Sharp 用法
+
+### 图片规范
+
+- 页面图片优先使用 `.webp`
+- 静态资源统一放在 `public/img/<module>/`
+- 代码中使用绝对路径引用，如：`/img/kitchen/hero.webp`
+- 每个行业模块通常包含两类图：
+  - `hero.webp`：大屏 IOC 截图，用作 Hero 头图
+  - `architecture.webp`：系统架构 / 场景示意图
+
+### 使用 Sharp 转 WebP
+
+安装（如未安装）：
+
+```bash
+pnpm add -D sharp
+```
+
+单目录批量转换示例（PNG/JPG/JPEG → WebP）：
+
+```bash
+node --input-type=module -e "import sharp from 'sharp'; import { promises as fs } from 'node:fs'; import path from 'node:path'; const dir='public/img/kitchen'; const files=await fs.readdir(dir); for (const name of files){ const ext=path.extname(name).toLowerCase(); if(!['.png','.jpg','.jpeg'].includes(ext)) continue; const src=path.join(dir,name); const out=path.join(dir,path.basename(name,ext)+'.webp'); await sharp(src).webp({quality:82,effort:6}).toFile(out);}"
+```
+
+建议：设计源文件保留在仓库外或素材目录中，不直接放 `public/img/`，提交前只保留 WebP 成品。
+
+## 质量检查
 
 ```bash
 pnpm build
 ```
 
-构建产物将输出到 `dist/` 目录。
-
-### 预览构建结果
-
-预览生产构建：
-
-```bash
-pnpm preview
-```
-
-## 配置说明
-
-### Astro 配置
-
-项目使用了 Astro 的 Tailwind 集成，在 `astro.config.mjs` 中配置：
-
-```javascript
-import tailwind from '@astrojs/tailwind';
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
-  integrations: [tailwind()],
-});
-```
-
-### Tailwind 配置
-
-在 `tailwind.config.mjs` 中扩展了主题颜色：
-
-```javascript
-export default {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: {
-    extend: {
-      colors: {
-        primary: '#165DFF',
-        secondary: '#36D399',
-        dark: '#1E293B',
-        light: '#F8FAFC'
-      },
-      fontFamily: {
-        inter: ['Inter', 'system-ui', 'sans-serif'],
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-### 导航栏配置
-
-导航栏在 `src/layouts/Layout.astro` 中统一管理，采用**单行紧凑设计**，支持导航高亮：
-
-**桌面端：**
-- 单行布局，三个板块并排显示
-- 胶囊式按钮设计，每个板块包含**图标 + 标题**
-- 当前页面：**蓝色填充背景 + 白色文字**高亮显示
-- 非当前页面：灰色文字，悬停显示淡蓝色背景
-
-**移动端：**
-- 卡片式设计，包含图标容器和标题
-- 当前页面蓝色高亮并显示对勾标记
-
-```astro
----
-const { title = "浙江贝凡网络科技", activeNav = "home" } = Astro.props;
-
-const navItems = [
-  { id: 'home', label: '公司介绍', href: '/', icon: 'fa-building' },
-  { id: 'qazk', { label: '企安智控', href: '/qazk', icon: 'fa-cogs' },
-  { id: 'customization', label: '本地化定制', href: '/customization', icon: 'fa-wrench' },
-  { id: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
-];
----
-```
-
-## 功能特性
-
-- 响应式设计，支持桌面端和移动端
-- 基于 Astro 的静态站点生成，加载速度快
-- Tailwind CSS 提供丰富的实用样式类
-- 模块化组件设计，便于维护和扩展
-- 导航栏自动高亮当前页面
-- 支持类型检查（通过 Astro Check）
+`pnpm build` 会先执行 `astro check` 再产出静态文件到 `dist/`。
 
 ## 部署
 
-### 静态部署
+本项目为纯静态站点，可部署到任意静态托管平台（Vercel、Netlify、Cloudflare Pages、OSS/COS 等）。
 
-项目构建为静态站点，可部署到任何静态托管服务：
+---
 
-- **Vercel**
-- **Netlify**
-- **GitHub Pages**
-- **Cloudflare Pages**
-- **阿里云 OSS**
-- **腾讯云 COS**
-
-部署时只需将 `dist/` 目录的内容上传到静态托管服务即可。
-
-## 许可证
-
-© 2026 浙江贝凡网络科技有限公司. All Rights Reserved.
-
-- ICP 备案：浙ICP备2025170226号-4
-- 公安备案：浙公网安备33011002018371号
-
-## 联系方式
-
-- 电话：400-998-5710
-- 网址：https://beifan.cn
+© 浙江贝凡网络科技有限公司

package.json

@@ -2,7 +2,7 @@
   "name": "贝凡官网",
   "type": "module",
   "version": "1.0.0",
-  "packageManager": "pnpm@10.29.2",
+  "packageManager": "pnpm@11.1.1",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
     "@astrojs/tailwind": "^6.0.2",
+    "sharp": "^0.34.5",
     "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3"
   },

pnpm-lock.yaml

@@ -21,6 +21,9 @@ importers:
       '@astrojs/tailwind':
         specifier: ^6.0.2
         version: 6.0.2(astro@5.17.1(jiti@1.21.7)(rollup@4.57.1)(typescript@5.9.3)(yaml@2.8.2))(tailwindcss@3.4.19)
+      sharp:
+        specifier: ^0.34.5
+        version: 0.34.5
       tailwindcss:
         specifier: ^3.4.19
         version: 3.4.19
@@ -2310,8 +2313,7 @@ snapshots:
   '@esbuild/win32-x64@0.25.12':
     optional: true
 
-  '@img/colour@1.0.0':
-    optional: true
+  '@img/colour@1.0.0': {}
 
   '@img/sharp-darwin-arm64@0.34.5':
     optionalDependencies:
@@ -2923,8 +2925,7 @@ snapshots:
 
   destr@2.0.5: {}
 
-  detect-libc@2.1.2:
-    optional: true
+  detect-libc@2.1.2: {}
 
   deterministic-object-hash@2.0.2:
     dependencies:
@@ -3926,7 +3927,6 @@ snapshots:
       '@img/sharp-win32-arm64': 0.34.5
       '@img/sharp-win32-ia32': 0.34.5
       '@img/sharp-win32-x64': 0.34.5
-    optional: true
 
   shiki@3.22.0:
     dependencies:

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: true
+  sharp: true

public/img/education/pain-1-manual-patrol.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-821 -293)"><path d="M846.333 319.667C851.488 319.667 855.667 315.488 855.667 310.333 855.667 305.179 851.488 301 846.333 301 841.179 301 837 305.179 837 310.333 837 315.488 841.179 319.667 846.333 319.667Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linejoin="round" fill="#4A90E2"/><path d="M857 330.333 846.067 330.333C840.093 330.333 837.106 330.333 834.824 331.496 832.817 332.519 831.185 334.15 830.163 336.157 829 338.439 829 341.426 829 347.4L829 349 857 349" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M874.333 347.667 870.104 343.438" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M871.667 339.667C871.667 341.139 871.07 342.473 870.105 343.438 869.139 344.403 867.806 345 866.333 345 863.388 345 861 342.612 861 339.667 861 336.721 863.388 334.333 866.333 334.333 869.279 334.333 871.667 336.721 871.667 339.667Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="#4A90E2"/></g></svg>

public/img/education/pain-1-post-response.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1008 -293)"><path d="M1016 305.341 1040.01 298.333 1064 305.341 1064 319.712C1064 334.816 1054.33 348.226 1040 353.001 1025.67 348.226 1016 334.813 1016 319.705L1016 305.341Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linejoin="round" fill="#4A90E2"/><path d="M1047.33 317.544 1032.25 332.629" stroke="#FFFFFF" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M1032.25 317.545 1047.33 332.63" stroke="#FFFFFF" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g></svg>

public/img/education/pain-2-fire-security.svg

@@ -0,0 +1 @@
+<svg width="42" height="43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-507 -340)"><path d="M5.25 17.5C5.25 13.634 8.38401 10.5 12.25 10.5 16.116 10.5 19.25 13.634 19.25 17.5L19.25 38.5 5.25 38.5 5.25 17.5Z" stroke="#4A90E2" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" fill="#4A90E2" transform="matrix(1 0 0 1.02381 507 340)"/><path d="M26.25 38.5 36.75 38.5 31.5 22.75 26.25 38.5Z" fill="#4A90E2" transform="matrix(1 0 0 1.02381 507 340)"/><path d="M31.5 22.75 26.25 38.5 36.75 38.5 31.5 22.75ZM31.5 22.75 31.5 21C31.5 14.4003 31.5 11.1005 29.4498 9.05021 27.3995 7 24.0997 7 17.5 7L15.75 7M8.75 7 5.25 7" stroke="#4A90E2" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" fill="none" transform="matrix(1 0 0 1.02381 507 340)"/><path d="M15.75 7C15.75 8.933 14.183 10.5 12.25 10.5 10.317 10.5 8.75 8.933 8.75 7 8.75 5.067 10.317 3.5 12.25 3.5 14.183 3.5 15.75 5.067 15.75 7Z" stroke="#4A90E2" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" fill="#4A90E2" transform="matrix(1 0 0 1.02381 507 340)"/></g></svg>

public/img/education/pain-2-food-safety.svg

@@ -0,0 +1 @@
+<svg width="43" height="43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-160 -340)"><path d="M188.667 347.079C190.01 346.719 191.649 346.818 192.644 347.079 194.885 347.669 196.519 348.681 197.496 350.088 198.627 351.717 198.823 353.795 198.08 356.265 196.558 361.317 190.376 364.453 190.01 364.635" stroke="#4A90E2" stroke-width="1.79167" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M184.409 376.971C184.87 377.059 185.339 377.105 185.808 377.107 187.125 377.107 188.258 376.734 189.174 376.001 190.17 375.208 190.906 374.042 191.204 372.499 191.502 370.957 191.067 369.511 190.595 368.101 190.261 367.099 190.042 365.588 190.01 364.635" stroke="#4A90E2" stroke-width="1.79167" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M171.646 363.74C171.646 363.74 166.441 361.315 164.921 356.265 164.177 353.796 164.373 351.719 165.504 350.089 166.483 348.681 168.114 347.669 170.356 347.079 171.351 346.818 172.303 346.686 173.189 346.686" stroke="#4A90E2" stroke-width="1.79167" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M172.094 364.188C172.542 365.083 172.154 366.693 171.682 368.104 171.209 369.516 170.722 370.973 171.072 372.502 171.422 374.031 172.105 375.21 173.1 376.003 174.018 376.736 174.808 377.177 176.125 377.177 176.594 377.175 177.917 376.729 177.917 376.729" stroke="#4A90E2" stroke-width="1.79167" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M181.052 343.583C185.752 343.583 189.562 345.951 189.562 352.878 189.562 359.805 181.052 368.667 181.052 368.667 181.052 368.667 172.542 359.804 172.542 352.878 172.542 345.951 176.351 343.583 181.052 343.583Z" stroke="#4A90E2" stroke-width="1.79167" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M181.499 377.83C179.699 377.83 178.168 377.237 177.138 376.335 175.948 375.289 175.343 373.803 175.343 371.916 175.343 370.342 176.193 369.03 177.016 367.76 177.599 366.857 178.408 365.081 178.408 365.081 178.408 365.081 178.833 363.615 178.763 362.663 178.633 360.903 176.925 359.578 176.648 358.67 176.311 357.54 176.393 356.853 176.902 356.508 177.059 356.401 177.66 356.365 177.66 356.365 177.66 356.365 177.546 354.711 177.617 354.166 177.702 353.512 178.044 352.579 178.846 352.51 179.402 352.462 179.841 352.546 180.125 353.143 180.217 353.337 180.281 353.571 180.37 353.895 180.64 354.909 181.071 356.095 181.495 357.059 181.921 356.097 182.353 354.911 182.624 353.896 182.713 353.572 182.777 353.337 182.869 353.143 183.154 352.546 183.594 352.463 184.149 352.511 184.826 352.57 185.292 353.513 185.377 354.166 185.448 354.711 185.434 355.437 185.335 356.365L185.377 356.365C185.57 356.365 185.938 356.399 186.095 356.508 186.605 356.852 186.635 357.868 186.35 358.669 185.979 359.708 184.37 360.723 184.188 362.396 184.072 363.45 184.272 364.07 184.592 365.082 184.946 366.206 185.398 366.858 185.983 367.759 186.806 369.03 187.656 370.344 187.656 371.916 187.656 373.802 187.052 375.289 185.861 376.333 184.828 377.236 183.3 377.83 181.499 377.83Z" stroke="#4A90E2" stroke-width="1.79167" stroke-linecap="round" stroke-linejoin="round" fill="#4A90E2"/></g></svg>

public/img/education/pain-2-ops-maintenance.svg

@@ -0,0 +1 @@
+<svg width="43" height="43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-853 -340)"><path d="M869.379 378.674C866.377 377.781 863.705 376.121 861.589 373.923 862.378 372.987 862.854 371.778 862.854 370.458 862.854 367.49 860.448 365.083 857.479 365.083 857.3 365.083 857.122 365.092 856.947 365.109 856.709 363.944 856.583 362.737 856.583 361.5 856.583 359.627 856.871 357.822 857.404 356.125 857.429 356.125 857.454 356.125 857.479 356.125 860.448 356.125 862.854 353.719 862.854 350.75 862.854 349.898 862.656 349.092 862.303 348.376 864.375 346.45 866.904 345.008 869.709 344.231 870.598 345.974 872.41 347.167 874.5 347.167 876.59 347.167 878.402 345.974 879.291 344.231 882.096 345.008 884.625 346.45 886.697 348.376 886.344 349.092 886.146 349.898 886.146 350.75 886.146 353.719 888.552 356.125 891.521 356.125 891.546 356.125 891.571 356.125 891.596 356.125 892.129 357.822 892.417 359.627 892.417 361.5 892.417 362.737 892.291 363.944 892.053 365.109 891.878 365.092 891.7 365.083 891.521 365.083 888.552 365.083 886.146 367.49 886.146 370.458 886.146 371.778 886.622 372.987 887.411 373.923 885.295 376.121 882.623 377.781 879.621 378.674 878.928 376.507 876.897 374.938 874.5 374.938 872.103 374.938 870.072 376.507 869.379 378.674Z" stroke="#4A90E2" stroke-width="1.79167" stroke-linejoin="round" fill="#4A90E2"/><path d="M874.5 367.771C877.963 367.771 880.771 364.963 880.771 361.5 880.771 358.037 877.963 355.229 874.5 355.229 871.037 355.229 868.229 358.037 868.229 361.5 868.229 364.963 871.037 367.771 874.5 367.771Z" stroke="#FFFFFF" stroke-width="1.79167" stroke-linejoin="round" fill="#FFFFFF"/></g></svg>

public/img/education/pain-3-access-control.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-933 -400)"><path d="M945 424 945 456 985 456 985 424 965 408 945 424Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="#4A90E2"/><path d="M965 429.333 965 445.333" stroke="#FFFFFF" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M974.333 434.667 974.333 440" stroke="#FFFFFF" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M955.667 434.667 955.667 440" stroke="#FFFFFF" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g></svg>

public/img/education/pain-3-fire-alarm.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-584 -400)"><path d="M592 426.667C592 420.776 596.776 416 602.667 416 608.558 416 613.333 420.776 613.333 426.667L613.333 458.667 592 458.667 592 426.667Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="#4A90E2"/><path d="M624 458.667 640 458.667 632 434.667 624 458.667Z" fill="#4A90E2"/><path d="M632 434.667 624 458.667 640 458.667 632 434.667ZM632 434.667 632 432C632 421.943 632 416.915 628.876 413.791 625.752 410.667 620.723 410.667 610.667 410.667L608 410.667M597.333 410.667 592 410.667" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M608 410.667C608 413.612 605.612 416 602.667 416 599.721 416 597.333 413.612 597.333 410.667 597.333 407.721 599.721 405.333 602.667 405.333 605.612 405.333 608 407.721 608 410.667Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="#4A90E2"/></g></svg>

public/img/education/pain-3-video-surveillance.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-235 -400)"><path d="M292.333 408 265.667 408 241.667 408" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M265.667 430.667 265.667 408" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M246.233 426.106 288.734 437.495 286.411 441.013 281.074 450.626 278.751 454.145 241.402 444.137 246.233 426.106Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="#4A90E2"/><path d="M286.411 441.013 291.563 442.393 288.802 452.697 281.075 450.626" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g></svg>

src/components/sections/ChemicalArchitecture.astro

@@ -0,0 +1,74 @@
+---
+const features = [
+	{ icon: 'fa-fire', title: '防火防爆', desc: '储罐区/反应釜温度压力液位实时监测，火焰烟雾秒级识别，联动喷淋切断阀。' },
+	{ icon: 'fa-cloud', title: '防毒防泄漏', desc: 'VOCs/H₂S/Cl₂ 吸入式高精度监测，泄漏萌芽即刻预警，自动联动通风疏散。' },
+	{ icon: 'fa-ban', title: '防入侵封闭化', desc: '周界电子围栏 + 危化车辆预约-装卸-出厂全流程管控，违章自动抓拍。' },
+	{ icon: 'fa-id-card', title: '人员准入安全', desc: '人脸 + 防静电 + 酒精测试三重门禁，UWB 定位 + 智能手环 SOS。' }
+];
+
+const layers = [
+	{ name: '应用层', color: 'bg-blue-600', items: ['可视化指挥', '隐患工单', '应急疏散', '合规上报'] },
+	{ name: '平台层', color: 'bg-indigo-600', items: ['AI 视觉大模型', 'SaaS 中台', '危废联单', '工业互联网'] },
+	{ name: '网络层', color: 'bg-cyan-600', items: ['防爆环网', 'LoRa/NB-IoT', '4G/5G', '光纤主干'] },
+	{ name: '感知层', color: 'bg-emerald-600', items: ['防爆摄像头', '气体探测器', '压力液位', '智能手环'] }
+];
+---
+
+<section class="px-4 lg:px-0 py-16 bg-white overflow-hidden">
+	<div class="max-w-7xl mx-auto">
+		<div class="bg-slate-50 rounded-3xl border border-blue-100 p-5 md:p-8 lg:p-10">
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10 items-center">
+				<div>
+					<p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-sm font-bold tracking-wide mb-4">
+						<i class="fa fa-sitemap"></i>
+						<span>解决方案 · 系统架构</span>
+					</p>
+					<h3 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight leading-tight mb-4">
+						AI 视觉 + 五防协同的危化安全闭环
+					</h3>
+					<p class="text-gray-600 leading-relaxed mb-6">
+						围绕<strong>防火、防爆、防毒、防泄漏、防入侵</strong>五大刚需场景，融合 AI 视觉大模型与防爆物联感知，对重大危险源、可燃有毒气体、违规作业实时监控，联动喷淋/切断阀/排烟/广播执行紧急处置，符合《危化品企业安全风险智能化管控平台建设指南》要求。
+					</p>
+					<div class="grid grid-cols-2 gap-3 mb-6">
+						{features.map((f) => (
+							<div class="bg-white border border-blue-100 rounded-xl p-3 flex items-start gap-2.5">
+								<div class="w-8 h-8 rounded-lg bg-blue-600 text-white flex items-center justify-center shrink-0">
+									<i class={`fa ${f.icon} text-base`}></i>
+								</div>
+								<div class="flex-1 min-w-0">
+									<p class="text-base font-black text-gray-900 leading-tight">{f.title}</p>
+									<p class="text-sm text-gray-600 mt-1 leading-relaxed">{f.desc}</p>
+								</div>
+							</div>
+						))}
+					</div>
+					<div class="bg-white border border-blue-100 rounded-2xl p-4">
+						<p class="text-base font-bold text-blue-700 mb-2">价值实现</p>
+						<p class="text-base text-gray-600 leading-relaxed">告警准确率 ≥98%，识别响应 ≤1 秒，三级预警机制 + 自动联锁处置，事故事件全程留痕，满足应急管理部门远程监管与数据合规上报要求。</p>
+					</div>
+				</div>
+
+				<div class="space-y-4">
+					<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
+						<img src="/img/chemical/architecture.webp" alt="危险化学品系统架构图" class="w-full h-auto object-cover" />
+					</div>
+					<div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-4 md:p-5">
+						<p class="text-sm font-black text-gray-400 tracking-[0.18em] mb-3 text-center">SYSTEM ARCHITECTURE</p>
+						<div class="space-y-2">
+							{layers.map((l) => (
+								<div class="flex items-stretch gap-2">
+									<div class={`shrink-0 w-16 ${l.color} text-white rounded-lg flex items-center justify-center font-black text-sm shadow-sm`}>{l.name}</div>
+									<div class="flex-1 grid grid-cols-4 gap-1.5">
+										{l.items.map((it) => (
+											<div class="bg-slate-50 border border-slate-200 rounded-md py-1.5 px-1 text-center text-xs font-bold text-gray-700">{it}</div>
+										))}
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

src/components/sections/ChemicalHardware.astro

@@ -0,0 +1,68 @@
+---
+const hardware = [
+	{
+		label: 'HW · 01',
+		title: '防爆 AI 摄像头',
+		desc: '储罐区、装卸区、甲乙类仓库部署防爆摄像头，火焰 / 烟雾 / 泄漏 / 违章动火秒级 AI 识别。',
+		tags: ['防爆等级', '700+ AI 场景']
+	},
+	{
+		label: 'HW · 02',
+		title: '可燃有毒气体探测',
+		desc: '吸入式高精度传感器布防 VOCs / H₂S / Cl₂ / NH₃，秒级响应，三级预警联动通风疏散。',
+		tags: ['吸入式', '三级预警']
+	},
+	{
+		label: 'HW · 03',
+		title: '储罐温压液位',
+		desc: '虹润智能传感器实时监测重大危险源储罐区温度、压力、液位，超阈值联动喷淋 / 切断阀。',
+		tags: ['重大危险源', '实时监测']
+	},
+	{
+		label: 'HW · 04',
+		title: '智能手环 + 三重门禁',
+		desc: '人脸 + 防静电 + 酒精测试门禁，智能手环 SOS + 心率 + 跌倒 + 气体震动多重保护。',
+		tags: ['SOS 求救', '三重验证']
+	},
+	{
+		label: 'HW · 05',
+		title: '热成像与电气火灾',
+		desc: '储罐区 / 管廊 / 配电柜温度异常监测，漏电过载秒级上报，预防设备过热与电气火灾。',
+		tags: ['非接触测温', '电气安全']
+	},
+	{
+		label: 'HW · 06',
+		title: '危化车辆全流程',
+		desc: '车牌识别 + RFID + 限速电子围栏，预约-审核-装卸-出厂全流程闭环，违章自动抓拍。',
+		tags: ['全流程闭环', '车牌识别']
+	}
+];
+---
+
+<section class="px-4 lg:px-0 py-16 bg-slate-50 overflow-hidden">
+	<div class="max-w-7xl mx-auto">
+		<div class="text-center mb-12">
+			<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight">
+				<span class="text-blue-600">硬件物联</span>方案
+			</h3>
+			<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full"></div>
+			<p class="text-gray-600 mt-6 max-w-2xl mx-auto">围绕防火、防爆、防毒、防泄漏、防入侵五大场景，提供防爆摄像头、气体探测、储罐监测、危化车辆管控等关键硬件。</p>
+		</div>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+			{hardware.map((h) => (
+				<article class="bg-white rounded-2xl p-6 ring-1 ring-slate-200 hover:ring-blue-300 transition-all duration-300 flex flex-col">
+					<p class="text-sm font-mono font-bold text-blue-600 tracking-[0.18em] mb-3">{h.label}</p>
+					<h4 class="text-lg font-extrabold text-gray-900 leading-snug mb-3">{h.title}</h4>
+					<div class="h-px bg-slate-200 mb-4"></div>
+					<p class="text-base text-gray-700 leading-relaxed flex-1 mb-4">{h.desc}</p>
+					<div class="flex flex-wrap gap-2">
+						{h.tags.map((t) => (
+							<span class="text-sm font-bold px-2 py-0.5 rounded-md bg-blue-50 text-blue-700">{t}</span>
+						))}
+					</div>
+				</article>
+			))}
+		</div>
+	</div>
+</section>