更新 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
 └── 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) - 现代化的静态站点生成器
+- **框架**：Astro 5.x（静态站点生成）
-- **样式**：[Tailwind CSS](https://tailwindcss.com) - 实用优先的 CSS 框架
+- **样式**：Tailwind CSS 3.x
-- **包管理器**：[pnpm](https://pnpm.io) - 快速、节省磁盘空间的包管理器
+- **语言**：TypeScript
-
+- **图标**：FontAwesome 4.7.0
-## 项目结构
+- **包管理器**：pnpm
-
+- **图片处理**：Sharp（用于转 WebP）
-```
-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种智能硬件产品展示
-- **本地化定制**：全场景产业数字化定制方案
-- **小程序手册**：企安智控小程序使用指南
 
 ## 快速开始
 
-### 安装依赖
-
 ```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/` 目录。
+`pnpm build` 会先执行 `astro check` 再产出静态文件到 `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）
 
 ## 部署
 
-### 静态部署
+本项目为纯静态站点，可部署到任意静态托管平台（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':
+  '@img/colour@1.0.0': {}
-    optional: true
 
   '@img/sharp-darwin-arm64@0.34.5':
     optionalDependencies:
@@ -2923,8 +2925,7 @@ snapshots:
 
   destr@2.0.5: {}
 
-  detect-libc@2.1.2:
+  detect-libc@2.1.2: {}
-    optional: true
 
   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-4-collab-weak.svg

@@ -1 +0,0 @@
-<svg width="53" height="53" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-488 -507)"><path d="M527.75 515.833 502.354 515.833C499.042 515.833 492.417 518.042 492.417 524.667 492.417 531.292 499.042 533.5 502.354 533.5L526.646 533.5C529.958 533.5 536.583 535.708 536.583 542.333 536.583 548.958 529.958 551.167 526.646 551.167L501.25 551.167" stroke="#4A90E2" stroke-width="2.20833" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M532.167 520.25C534.606 520.25 536.583 518.273 536.583 515.833 536.583 513.394 534.606 511.417 532.167 511.417 529.727 511.417 527.75 513.394 527.75 515.833 527.75 518.273 529.727 520.25 532.167 520.25Z" stroke="#4A90E2" stroke-width="2.20833" stroke-linejoin="round" fill="#4A90E2"/><path d="M496.833 555.583C499.273 555.583 501.25 553.606 501.25 551.167 501.25 548.727 499.273 546.75 496.833 546.75 494.394 546.75 492.417 548.727 492.417 551.167 492.417 553.606 494.394 555.583 496.833 555.583Z" stroke="#4A90E2" stroke-width="2.20833" stroke-linejoin="round" fill="#4A90E2"/></g></svg>

public/img/education/pain-4-process-nonstandard.svg

@@ -1 +0,0 @@
-<svg width="54" height="53" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-869 -507)"><path d="M47.4792 36.4375 47.4792 20.9792 5.52083 20.9792 5.52083 45.2708C5.52083 46.4905 6.50954 47.4792 7.72917 47.4792L26.5 47.4792" stroke="#4A90E2" stroke-width="2.20833" stroke-linecap="round" stroke-linejoin="round" fill="none" transform="matrix(1.01887 0 0 1 869 507)"/><path d="M5.52083 11.0417C5.52083 9.82204 6.50954 8.83333 7.72917 8.83333L45.2708 8.83333C46.4905 8.83333 47.4792 9.82204 47.4792 11.0417L47.4792 20.9792 5.52083 20.9792 5.52083 11.0417Z" stroke="#4A90E2" stroke-width="2.20833" stroke-linejoin="round" fill="none" transform="matrix(1.01887 0 0 1 869 507)"/><path d="M17.6667 5.52083 17.6667 14.3542" stroke="#4A90E2" stroke-width="2.20833" stroke-linecap="round" fill="none" transform="matrix(1.01887 0 0 1 869 507)"/><path d="M35.3333 5.52083 35.3333 14.3542" stroke="#4A90E2" stroke-width="2.20833" stroke-linecap="round" fill="none" transform="matrix(1.01887 0 0 1 869 507)"/><path d="M40.8542 35.3333C40.8542 39.602 37.3937 43.0625 33.125 43.0625 28.8563 43.0625 25.3958 39.602 25.3958 35.3333 25.3958 31.0646 28.8563 27.6042 33.125 27.6042 37.3937 27.6042 40.8542 31.0646 40.8542 35.3333Z" stroke="#4A90E2" stroke-width="2.20833" fill="#4A90E2" transform="matrix(1.01887 0 0 1 869 507)"/><path d="M39.75 40.8542 46.375 46.375" stroke="#4A90E2" stroke-width="2.20833" stroke-linecap="round" stroke-linejoin="round" fill="none" transform="matrix(1.01887 0 0 1 869 507)"/></g></svg>

public/img/education/pain-4-system-missing.svg

@@ -1 +0,0 @@
-<svg width="53" height="53" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-107 -507)"><path d="M112.521 515.833C112.521 514.614 113.51 513.625 114.729 513.625L127.979 513.625 133.5 520.25 152.271 520.25C153.49 520.25 154.479 521.239 154.479 522.458L154.479 551.167C154.479 552.386 153.49 553.375 152.271 553.375L114.729 553.375C113.51 553.375 112.521 552.386 112.521 551.167L112.521 515.833Z" stroke="#4A90E2" stroke-width="2.20833" stroke-linejoin="round" fill="#4A90E2"/><path d="M127.979 531.292 139.021 542.333" stroke="#FFFFFF" stroke-width="2.20833" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M139.021 531.292 127.979 542.333" stroke="#FFFFFF" stroke-width="2.20833" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g></svg>

public/img/education/pain-5-device-complex.svg

@@ -1 +0,0 @@
-<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(-808 -233)"><path d="M866.667 238.333 813.333 238.333 813.333 259.667 866.667 259.667 866.667 238.333Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linejoin="round" fill="#4A90E2"/><path d="M866.667 270.333 813.333 270.333 813.333 291.667 866.667 291.667 866.667 270.333Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linejoin="round" fill="#4A90E2"/><path d="M825.333 246.333 822.667 246.333C821.93 246.333 821.333 246.93 821.333 247.667L821.333 250.333C821.333 251.07 821.93 251.667 822.667 251.667L825.333 251.667C826.07 251.667 826.667 251.07 826.667 250.333L826.667 247.667C826.667 246.93 826.07 246.333 825.333 246.333Z" fill="#FFFFFF"/><path d="M825.333 278.333 822.667 278.333C821.93 278.333 821.333 278.93 821.333 279.667L821.333 282.333C821.333 283.07 821.93 283.667 822.667 283.667L825.333 283.667C826.07 283.667 826.667 283.07 826.667 282.333L826.667 279.667C826.667 278.93 826.07 278.333 825.333 278.333Z" fill="#FFFFFF"/><path d="M836 246.333 833.333 246.333C832.597 246.333 832 246.93 832 247.667L832 250.333C832 251.07 832.597 251.667 833.333 251.667L836 251.667C836.736 251.667 837.333 251.07 837.333 250.333L837.333 247.667C837.333 246.93 836.736 246.333 836 246.333Z" fill="#FFFFFF"/><path d="M836 278.333 833.333 278.333C832.597 278.333 832 278.93 832 279.667L832 282.333C832 283.07 832.597 283.667 833.333 283.667L836 283.667C836.736 283.667 837.333 283.07 837.333 282.333L837.333 279.667C837.333 278.93 836.736 278.333 836 278.333Z" fill="#FFFFFF"/></g></svg>

public/img/education/pain-5-manual-record.svg

@@ -1 +0,0 @@
-<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(-968 -233)"><path d="M990.667 242.333 989.333 242.333 981.333 242.333C979.861 242.333 978.667 243.527 978.667 245L978.667 289C978.667 290.473 979.861 291.667 981.333 291.667L1018.67 291.667C1020.14 291.667 1021.33 290.473 1021.33 289L1021.33 245C1021.33 243.527 1020.14 242.333 1018.67 242.333L1012.07 242.333 1009.33 242.333" stroke="#4A90E2" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M990.667 238.333 1009.33 238.333 1009.33 246.333 990.667 246.333Z" stroke="#4A90E2" stroke-width="2.66667" stroke-linejoin="round" fill="#4A90E2"/></g></svg>

public/img/education/pain-5-missed-inspection.svg

@@ -1 +0,0 @@
-<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(-888 -393)"><path d="M896 405.341 920.011 398.333 944 405.341 944 419.712C944 434.816 934.334 448.226 920.003 453.001 905.669 448.226 896 434.813 896 419.705L896 405.341Z" stroke="#EB5757" stroke-width="2.66667" stroke-linejoin="round" fill="#EB5757"/><path d="M927.333 417.544 912.248 432.629" stroke="#FFFFFF" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M912.249 417.545 927.334 432.63" stroke="#FFFFFF" 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>