新增危险化学品、烟花爆竹、非煤矿山模块

2026-05-14 10:37:03 +08:00
parent 8b6f9f56b2
commit 7abfc36ae3
30 changed files with 1189 additions and 17 deletions
@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.17.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.17.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4322,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}"]
@@ -34,11 +34,15 @@ src/
 ├── layouts/Layout.astro      # Main layout with desktop/mobile navigation
 ├── pages/                    # Route pages (use .astro files)
 │   ├── index.astro           # Home page
-│   ├── qazk/index.astro      # Product center - industrial safety
+│   ├── 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
@@ -48,14 +52,29 @@ src/

 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
@@ -106,7 +125,8 @@ const { title, activeNav = 'home' } = Astro.props;

 - All pages use `<Layout>` component with `activeNav` prop for navigation highlighting
 - Product center uses dropdown/submenu in `Layout.astro`
- Current product nav IDs: `qazk`, `elderly`, `construction`, `kitchen`, `education`
+- 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
@@ -1,6 +1,6 @@
 # 贝凡官网

-浙江贝凡网络科技公司官方网站，包含公司介绍、产品中心（工贸企业/智慧养老/智慧工地/明厨亮灶/智慧学校）、本地化定制与生态合作等页面。
+浙江贝凡网络科技公司官方网站，包含公司介绍、产品中心（工贸企业 / 物业楼宇 / 智慧养老 / 明厨亮灶 / 智慧学校 / 智慧工地 / 危险化学品 / 烟花爆竹 / 非煤矿山）、本地化定制与生态合作等页面。

 ## 技术栈

@@ -45,10 +45,14 @@ beifan.cn/
 │   ├── 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
@@ -57,10 +61,14 @@ beifan.cn/
 │   └── styles/styles.css
 ├── public/
 │   ├── img/
+│   │   ├── property/
 │   │   ├── elderly/
 │   │   ├── construction/
 │   │   ├── kitchen/
 │   │   ├── education/
+│   │   ├── chemical/
+│   │   ├── fireworks/
+│   │   ├── mining/
 │   │   └── ...
 │   └── js/script.js
 ├── astro.config.mjs
@@ -72,10 +80,14 @@ beifan.cn/

 - `/`：公司介绍首页
 - `/qazk`：工贸企业（企安智控）
+- `/property`：物业楼宇
 - `/elderly`：智慧养老
- `/construction`：智慧工地
 - `/kitchen`：明厨亮灶
 - `/education`：智慧学校
+- `/construction`：智慧工地
+- `/chemical`：危险化学品
+- `/fireworks`：烟花爆竹
+- `/mining`：非煤矿山
 - `/customization`：本地化定制
 - `/partnership`：生态合作
 - `/intro/*`：产品/能力介绍子页面
@@ -85,7 +97,16 @@ beifan.cn/
 导航由 `src/layouts/Layout.astro` 统一管理：

 - 一级：公司介绍 / 产品中心 / 本地化定制 / 生态合作
- 产品中心二级：`qazk`、`elderly`、`construction`、`kitchen`、`education`
+- 产品中心二级（9 项，桌面下拉为 3×3 网格、移动端为 3 列网格）：
+  - 工贸企业（`qazk`）
+  - 物业楼宇（`property`）
+  - 智慧养老（`elderly`）
+  - 明厨亮灶（`kitchen`）
+  - 智慧学校（`education`）
+  - 智慧工地（`construction`）
+  - 危险化学品（`chemical`）
+  - 烟花爆竹（`fireworks`）
+  - 非煤矿山（`mining`）
 - 页面通过 `<Layout activeNav="...">` 控制高亮

 ## 图片规范与 Sharp 用法
@@ -95,6 +116,9 @@ beifan.cn/
 - 页面图片优先使用 `.webp`
 - 静态资源统一放在 `public/img/<module>/`
 - 代码中使用绝对路径引用，如：`/img/kitchen/hero.webp`
+- 每个行业模块通常包含两类图：
+  - `hero.webp`：大屏 IOC 截图，用作 Hero 头图
+  - `architecture.webp`：系统架构 / 场景示意图

 ### 使用 Sharp 转 WebP

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: true
+  sharp: true
@@ -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>
@@ -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>
@@ -0,0 +1,44 @@
+<section class="bg-slate-50 overflow-hidden">
+	<div class="max-w-7xl mx-auto px-4 lg:px-0 pt-4 md:pt-8">
+		<div class="bg-white rounded-3xl border border-blue-100 shadow-xl p-5 md:p-10">
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+				<div class="space-y-5">
+					<div class="inline-flex items-center gap-2 bg-blue-50 text-blue-700 px-3 py-1.5 rounded-full text-sm font-bold tracking-wide">
+						<i class="fa fa-flask"></i>
+						<span>危险化学品厂区企安智控系统</span>
+					</div>
+					<h1 class="text-3xl md:text-5xl font-black tracking-tight leading-tight">
+						<span class="text-blue-600">危险化学品</span>
+					</h1>
+					<p class="text-gray-700 text-lg md:text-lg leading-relaxed">
+						面向危化品企业打造，覆盖<strong>防火、防爆、防毒、防泄漏、防入侵</strong>五大刚需场景，融合 AI 视觉大模型与防爆物联感知，构建"安全风险管控、隐患排查治理、应急处置"三道防线。
+					</p>
+					<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">五防覆盖</div>
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">秒级预警</div>
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">智能联锁</div>
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">合规上报</div>
+					</div>
+				</div>
+
+				<div class="relative">
+					<div class="absolute -inset-4 bg-blue-200/40 blur-3xl rounded-full -z-10"></div>
+					<div class="overflow-hidden rounded-3xl border border-slate-100 shadow-lg">
+						<img src="/img/chemical/hero.webp" alt="危险化学品企安智控系统" class="w-full h-auto object-cover">
+					</div>
+				</div>
+			</div>
+
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
+				<div class="bg-blue-50 border border-blue-100 rounded-2xl p-5">
+					<p class="text-blue-900 font-bold text-lg mb-3">为危化企业赋能</p>
+					<p class="text-gray-700 leading-relaxed text-base md:text-lg">覆盖储罐区、反应釜、甲乙类仓库、装卸区、管廊等关键场景，AI 多场景、多方联动、秒级预警、硬件物联，构建全流程数字化管控能力。</p>
+				</div>
+				<div class="bg-red-50 border border-red-100 rounded-2xl p-5">
+					<p class="text-red-900 font-bold text-lg mb-3">为监管部门赋能</p>
+					<p class="text-gray-700 leading-relaxed text-base md:text-lg">符合 GB/T 33000-2025、GB/T 46884.1-2025、《危险化学品企业安全风险智能化管控平台建设指南》等标准，支持远程监管、事前预警、事中干预、事后溯源。</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
@@ -0,0 +1,88 @@
+---
+const featured = {
+	icon: 'fa-fire',
+	title: '防火防爆 · 重大风险源',
+	subtitle: '储罐区 / 反应釜 / 甲乙类仓库 风险集中',
+	desc: '一次火灾爆炸可能导致重大人员伤亡与亿元级财产损失，且事故扩散速度极快、链式反应严重，传统人工巡检无法做到全时段、全方位监控，电气火灾、违规动火与隐蔽热源是事故重灾区。',
+	points: ['储罐温度 / 压力 / 液位实时压力大', '电气火灾隐蔽难发现', '违规动火监管难落实', '一旦失控易引发链式爆炸']
+};
+
+const painPoints = [
+	{
+		icon: 'fa-cloud',
+		title: '防毒防泄漏挑战',
+		subtitle: '有毒气体扩散难溯源',
+		points: ['VOCs / H₂S / Cl₂ 泄漏隐患', '跑冒滴漏靠人工巡检', '扩散路径难追踪']
+	},
+	{
+		icon: 'fa-ban',
+		title: '封闭化与防入侵',
+		subtitle: '周界 / 车辆管控薄弱',
+		points: ['电子围栏覆盖不足', '危化车辆难全程追踪', '非法闯入引发恶性事件']
+	},
+	{
+		icon: 'fa-recycle',
+		title: '环保与危废合规',
+		subtitle: '排放 / 危废全链路监管',
+		points: ['废水废气在线监测要求严', '危废联单与转移合规压力', '超期暂存 / 违规处置风险']
+	},
+	{
+		icon: 'fa-balance-scale',
+		title: '监管标准日趋严格',
+		subtitle: '智能化合规压力大',
+		points: ['企业标准化建设难落地', '监管平台数据对接复杂', '事故倒查、应急演练繁重']
+	}
+];
+---
+
+<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>
+		</div>
+
+		<article class="bg-gradient-to-br from-blue-600 to-blue-800 text-white rounded-3xl p-6 md:p-10 mb-5 overflow-hidden relative">
+			<div class="absolute -right-16 -top-16 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
+			<div class="relative grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
+				<div class="md:col-span-2">
+					<div class="flex items-center gap-3 mb-3">
+						<i class={`fa ${featured.icon} text-3xl text-blue-200`}></i>
+						<span class="text-sm font-black px-2.5 py-1 rounded-md bg-white/15 backdrop-blur border border-white/20 tracking-[0.18em]">头号风险</span>
+					</div>
+					<h4 class="text-2xl md:text-3xl font-black leading-tight mb-2">{featured.title}</h4>
+					<p class="text-base font-semibold text-blue-100 mb-4">{featured.subtitle}</p>
+					<p class="text-base md:text-lg text-blue-50 leading-relaxed">{featured.desc}</p>
+				</div>
+				<ul class="space-y-2.5 bg-white/10 backdrop-blur rounded-2xl p-5 border border-white/15">
+					{featured.points.map((p) => (
+						<li class="flex items-start gap-2 text-base">
+							<i class="fa fa-exclamation-triangle text-blue-200 mt-0.5 shrink-0"></i>
+							<span class="leading-relaxed">{p}</span>
+						</li>
+					))}
+				</ul>
+			</div>
+		</article>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+			{painPoints.map((item) => (
+				<article class="bg-white rounded-2xl border border-slate-200 p-5 hover:shadow-md hover:border-blue-200 transition-all duration-300 flex flex-col">
+					<i class={`fa ${item.icon} text-blue-600 text-2xl mb-3`}></i>
+					<h4 class="text-lg font-extrabold text-gray-900 leading-snug">{item.title}</h4>
+					<p class="text-sm font-semibold text-gray-500 mt-1 mb-3">{item.subtitle}</p>
+					<ul class="space-y-1.5 flex-1 text-sm text-gray-700">
+						{item.points.map((p) => (
+							<li class="flex items-start gap-1.5">
+								<span class="w-1 h-1 rounded-full bg-blue-500 mt-1.5 shrink-0"></span>
+								<span class="leading-relaxed">{p}</span>
+							</li>
+						))}
+					</ul>
+				</article>
+			))}
+		</div>
+	</div>
+</section>
@@ -0,0 +1,97 @@
+---
+const featured = {
+	title: '危险化学品企业安全风险智能化管控平台建设指南',
+	meta: '应急管理部 2022',
+	desc: '推动危化企业部署智能化管控平台，覆盖重大危险源监控、可燃有毒气体监测、动火作业管理、人员定位、视频联动、应急处置等核心场景，构建感知-传输-平台-应用的数字化体系，实现安全风险智能预警与监管平台数据对接。',
+	keywords: ['重大危险源', '气体监测', '动火管理', '人员定位', '视频联动', '应急处置', '数据上报']
+};
+
+const policies = [
+	{
+		title: '危险化学品安全管理条例',
+		meta: '国务院令 第591号',
+		desc: '生产、储存、使用、经营、运输全链路安全主体责任与监管要求。'
+	},
+	{
+		title: '危险化学品重大危险源监督管理暂行规定',
+		meta: '应急部令 第40号',
+		desc: '重大危险源单位强制安装气体检测、视频监控、紧急切断装置并联网。'
+	},
+	{
+		title: '"工业互联网+危化安全生产"试点方案',
+		meta: '应急部 2020',
+		desc: '推动行业工业互联网应用，构建感知-传输-平台-应用数字化体系。'
+	},
+	{
+		title: '化工和危险化学品重大事故隐患判定标准',
+		meta: '应急部 2022',
+		desc: '细化 20 类重大事故隐患情形，覆盖"两重点一重大"高风险场景。'
+	},
+	{
+		title: '危险化学品重大危险源辨识',
+		meta: 'GB 18218-2018',
+		desc: '强制性国家标准，规范重大危险源临界量、辨识方法与分级标准。'
+	},
+	{
+		title: '化学品生产单位特殊作业安全规范',
+		meta: 'GB 30871-2022',
+		desc: '动火、受限空间、高处、临时用电等八大特殊作业的安全管理强制标准。'
+	},
+	{
+		title: '化工过程安全管理导则',
+		meta: 'AQ/T 3034-2022',
+		desc: '化工过程安全管理 14 要素体系，落实工艺安全与变更管理。'
+	},
+	{
+		title: '关于全面加强危险化学品安全生产工作的意见',
+		meta: '国办发〔2021〕33号',
+		desc: '明确"打非治违""遏制重特大事故"任务，强化数字化监管与企业主体责任。'
+	},
+	{
+		title: '危险化学品输送管道安全管理规定',
+		meta: '应急部令 第43号',
+		desc: '强制管道企业建立完整性管理体系，部署泄漏监测与应急切断装置。'
+	}
+];
+---
+
+<section class="px-4 lg:px-0 py-16 bg-white 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-red-600">政策牵引</span>落地，危化智能化管控有据可依
+			</h3>
+			<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full"></div>
+		</div>
+
+		<article class="relative bg-gradient-to-br from-red-600 to-red-700 rounded-3xl p-6 md:p-10 text-white mb-6 overflow-hidden">
+			<div class="absolute -right-12 -top-12 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
+			<div class="relative">
+				<div class="flex items-center gap-2 mb-4">
+					<span class="inline-flex items-center px-2.5 py-1 rounded-md bg-white/15 backdrop-blur text-sm font-black tracking-[0.18em]">核心政策</span>
+					<span class="text-sm font-bold text-red-100">{featured.meta}</span>
+				</div>
+				<h4 class="text-2xl md:text-3xl font-black leading-tight mb-3 max-w-3xl">{featured.title}</h4>
+				<p class="text-base md:text-lg text-red-50 leading-relaxed max-w-3xl mb-5">{featured.desc}</p>
+				<div class="flex flex-wrap gap-2">
+					{featured.keywords.map((k) => (
+						<span class="text-sm font-bold px-2.5 py-1 rounded-md bg-white/15 backdrop-blur text-white border border-white/20">{k}</span>
+					))}
+				</div>
+			</div>
+		</article>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+			{policies.map((item, idx) => (
+				<article class="bg-slate-50 rounded-2xl p-5 ring-1 ring-slate-200 hover:ring-red-200 hover:bg-white transition-all duration-300 flex flex-col">
+					<div class="flex items-center justify-between mb-2">
+						<span class="text-xs font-mono font-bold text-red-600 tracking-[0.18em]">{String(idx + 2).padStart(2, '0')}</span>
+						<span class="text-sm font-bold text-red-600 tracking-wide">{item.meta}</span>
+					</div>
+					<h4 class="text-lg font-extrabold text-gray-900 leading-snug mb-2">{item.title}</h4>
+					<p class="text-base text-gray-600 leading-relaxed flex-1">{item.desc}</p>
+				</article>
+			))}
+		</div>
+	</div>
+</section>
@@ -0,0 +1,74 @@
+---
+const features = [
+	{ icon: 'fa-fire', title: '防爆视觉识别', desc: 'Ex d IIC T6 Gb 级防爆摄像头 + 烟火/火花/超员秒级 AI 识别，告警准确率≥98%。' },
+	{ icon: 'fa-bolt', title: '静电与温度', desc: '人体/设备静电监测 + 热成像非接触测温，超阈值联动静电消除与断电。' },
+	{ icon: 'fa-trash', title: '余废药清零', desc: '当日销毁审批、AI 监控销毁作业规范，全程视频留痕，杜绝积压风险。' },
+	{ icon: 'fa-archive', title: '物料溯源', desc: '烟火药/引火线/成品一物一码，采购入库到回收销毁全程扫码追踪。' }
+];
+
+const layers = [
+	{ name: '应用层', color: 'bg-blue-600', items: ['驾驶舱大屏', '隐患工单', '应急联锁', '监管上报'] },
+	{ name: '平台层', color: 'bg-indigo-600', items: ['AI 视觉大模型', 'SaaS 中台', '物料溯源', '工艺联动'] },
+	{ name: '网络层', color: 'bg-cyan-600', items: ['防爆环网', 'LoRa 无线', '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>1.1 级高危工房、混药/装药/筑药车间、危险品仓库与销毁场</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">满足 GB 50161 工厂设计规范与 GB 11652 安全管理规程要求，存量防爆摄像头利旧 + AI 算法赋能，企业安全标准化评定关键能力一次性达标。</p>
+					</div>
+				</div>
+
+				<div class="space-y-4">
+					<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
+						<img src="/img/fireworks/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>
@@ -0,0 +1,69 @@
+---
+const hardware = [
+	{
+		icon: 'fa-video-camera',
+		title: '防爆 AI 摄像头',
+		desc: '1.1 级高危工房、混药装药车间、销毁场部署 Ex d IIC T6 Gb 防爆摄像头，烟火秒级识别。',
+		tags: ['Ex d IIC T6 Gb', 'AI 视觉']
+	},
+	{
+		icon: 'fa-bolt',
+		title: '静电与电气监测',
+		desc: '防爆静电监测仪 + 配电柜漏电过载监测，联动静电消除装置和断电闭锁。',
+		tags: ['静电消除', '电气火灾']
+	},
+	{
+		icon: 'fa-fire',
+		title: '热成像与可燃气体',
+		desc: '生产工房、药料存储区热成像非接触测温，可燃气体浓度超标自动切断作业电源。',
+		tags: ['非接触测温', '自动断电']
+	},
+	{
+		icon: 'fa-id-card',
+		title: '防爆人脸 + UWB 定位',
+		desc: '工房、危险品仓库防爆人脸 / 虹膜门禁，UWB / 北斗双模定位 + 电子围栏防超员闯入。',
+		tags: ['双重验证', '超员预警']
+	},
+	{
+		icon: 'fa-barcode',
+		title: '物料一物一码',
+		desc: '烟火药、引火线、成品扫码全程留痕，采购入库到回收销毁全链路溯源。',
+		tags: ['一物一码', '全程留痕']
+	},
+	{
+		icon: 'fa-plane',
+		title: '无人机 / 机器人巡检',
+		desc: '厂区、仓库、销毁场无人机扫描，1.1 级工房与混药车间机器人替代人工 7×24h 监测。',
+		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 border border-slate-200 hover:shadow-md hover:border-blue-200 transition-all duration-300 flex flex-col">
+					<header class="px-6 pt-6 pb-4 flex items-baseline gap-2.5">
+						<i class={`fa ${h.icon} text-blue-600`}></i>
+						<h4 class="text-lg font-extrabold text-gray-900 leading-tight flex-1">{h.title}</h4>
+					</header>
+					<p class="px-6 pb-4 text-base text-gray-700 leading-relaxed flex-1 border-t border-slate-100 pt-4">{h.desc}</p>
+					<div class="px-6 pb-6 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>
@@ -0,0 +1,49 @@
+<section class="bg-slate-50 overflow-hidden">
+	<div class="max-w-7xl mx-auto px-4 lg:px-0 pt-4 md:pt-8">
+		<div class="bg-white rounded-3xl border border-blue-100 shadow-xl p-5 md:p-10">
+			<div class="grid grid-cols-1 lg:grid-cols-5 gap-8 lg:gap-12 items-center">
+				<div class="lg:col-span-2 order-2 lg:order-1 relative">
+					<div class="absolute -inset-4 bg-blue-200/40 blur-3xl rounded-full -z-10"></div>
+					<div class="overflow-hidden rounded-3xl border border-slate-100 shadow-lg">
+						<img src="/img/fireworks/hero.webp" alt="烟花爆竹企安智控系统" class="w-full h-auto object-cover">
+					</div>
+					<div class="grid grid-cols-2 gap-3 mt-5">
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">防爆专属</div>
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">静电监测</div>
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">余废药清零</div>
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">物料溯源</div>
+					</div>
+				</div>
+
+				<div class="lg:col-span-3 order-1 lg:order-2 space-y-5">
+					<div class="inline-flex items-center gap-2 bg-blue-50 text-blue-700 px-3 py-1.5 rounded-full text-sm font-bold tracking-wide">
+						<i class="fa fa-asterisk"></i>
+						<span>烟花爆竹厂企安智控系统</span>
+					</div>
+					<h1 class="text-3xl md:text-5xl font-black tracking-tight leading-tight">
+						<span class="text-blue-600">烟花爆竹</span>
+					</h1>
+					<p class="text-gray-700 text-lg md:text-lg leading-relaxed">
+						专为烟花爆竹等高风险行业打造，基于 AI 视觉大模型与 Ex d IIC T6 Gb 级防爆物联，覆盖 1.1 级高危工房、混药/装药/筑药车间、危险品仓库与销毁场，全流程防控火药敏感、易燃易爆作业风险。
+					</p>
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
+						<div class="bg-blue-50 border border-blue-100 rounded-2xl p-5">
+							<p class="text-blue-900 font-bold text-lg mb-2 flex items-center gap-2">
+								<i class="fa fa-industry"></i>
+								<span>为烟花爆竹企业赋能</span>
+							</p>
+							<p class="text-gray-700 leading-relaxed text-base">覆盖高危工房、混药装药车间、危险品仓库、销毁场全场景，存量防爆摄像头利旧 + AI 算法赋能，烟火/火花/超员秒级识别，告警准确率 ≥98%。</p>
+						</div>
+						<div class="bg-red-50 border border-red-100 rounded-2xl p-5">
+							<p class="text-red-900 font-bold text-lg mb-2 flex items-center gap-2">
+								<i class="fa fa-balance-scale"></i>
+								<span>为监管部门赋能</span>
+							</p>
+							<p class="text-gray-700 leading-relaxed text-base">符合 GB/T 33000-2025、GB/T 46884.1-2025 标准，对接地方安全监管平台，自动上传视频、监测、隐患、应急数据，实现事前预警、事中干预、事后溯源。</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
@@ -0,0 +1,72 @@
+---
+const painPoints = [
+	{
+		icon: 'fa-fire',
+		title: '火药敏感易燃易爆',
+		subtitle: '1.1 级高危工房风险极高',
+		points: ['混药 / 装药 / 筑药作业高敏感', '明火、摩擦火花即可引爆', '事故后果严重、难以逆转']
+	},
+	{
+		icon: 'fa-bolt',
+		title: '静电与电气火灾',
+		subtitle: '微小火花即可引爆',
+		points: ['设备 / 人体静电隐蔽难察觉', '电气线路老化引发起火', '消静电措施落实不到位']
+	},
+	{
+		icon: 'fa-trash',
+		title: '余废药销毁难度高',
+		subtitle: '当日清零制度落实难',
+		points: ['余废药、废引线易积压', '违规处置流向不明', '销毁审批与过程留痕缺失']
+	},
+	{
+		icon: 'fa-archive',
+		title: '仓储溯源管控复杂',
+		subtitle: '一物一码全流程要求',
+		points: ['烟火药、引火线流向难追踪', '库存与环境联动管控难', '报废销毁流程不规范']
+	},
+	{
+		icon: 'fa-users',
+		title: '三违现象与超员',
+		subtitle: '工房人员与作业管控难',
+		points: ['吸烟、违规动火屡禁不止', '工房超员、脱岗睡岗', '特种作业无证操作风险高']
+	},
+	{
+		icon: 'fa-shield',
+		title: '监管考核日趋严格',
+		subtitle: '行业安全标准化要求',
+		points: ['标准化建设难落地', '隐患整改闭环压力大', '监管平台数据对接复杂']
+	}
+];
+---
+
+<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>
+		</div>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+			{painPoints.map((item, idx) => (
+				<article class="bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-300 flex flex-col">
+					<div class="flex items-center justify-between mb-4">
+						<span class="font-mono text-3xl font-black text-blue-600/80 leading-none">{String(idx + 1).padStart(2, '0')}</span>
+						<i class={`fa ${item.icon} text-blue-500 text-2xl`}></i>
+					</div>
+					<h4 class="text-lg font-extrabold text-gray-900 leading-snug">{item.title}</h4>
+					<p class="text-sm font-semibold text-gray-500 mt-1 mb-4 pb-3 border-b border-slate-100">{item.subtitle}</p>
+					<ul class="space-y-2 flex-1 text-base text-gray-700">
+						{item.points.map((p) => (
+							<li class="flex items-start gap-2">
+								<i class="fa fa-check text-blue-500 mt-1 text-sm shrink-0"></i>
+								<span class="leading-relaxed">{p}</span>
+							</li>
+						))}
+					</ul>
+				</article>
+			))}
+		</div>
+	</div>
+</section>
@@ -0,0 +1,69 @@
+---
+const policies = [
+	{
+		title: '烟花爆竹安全管理条例',
+		meta: '国务院令 第455号',
+		year: '2006',
+		desc: '烟花爆竹生产、经营、运输、燃放全链路安全监管的基础法规，明确生产企业主体责任与禁止行为。'
+	},
+	{
+		title: '烟花爆竹生产经营企业安全风险监测预警系统建设规范',
+		meta: '应急管理部',
+		year: '2022',
+		desc: '强制要求企业部署视频监控、超员预警、违规作业识别等智能监测系统，并对接地方监管平台。'
+	},
+	{
+		title: '烟花爆竹工厂设计安全规范',
+		meta: 'GB 50161',
+		year: '2022 修订',
+		desc: '工厂总平面布置、工房建筑、防火防爆电气等设计的强制性国家标准，新建/改扩建合规底线。'
+	},
+	{
+		title: '烟花爆竹工厂安全管理规程',
+		meta: 'GB 11652',
+		year: '2012',
+		desc: '强制规范工房安全距离、人员定员、药量限额、静电消除、防雷防爆等关键安全管理要求。'
+	},
+	{
+		title: '烟花爆竹安全与质量',
+		meta: 'GB 10631',
+		year: '2013',
+		desc: '产品的安全质量强制标准，覆盖结构、引燃时间、燃放性能与禁限用药物等指标。'
+	},
+	{
+		title: '烟花爆竹生产企业安全生产标准化评定标准',
+		meta: '应急部',
+		year: '2022',
+		desc: '细化标准化评定要素，重点考核风险分级管控、隐患排查治理、视频监控覆盖、余废药管理等数字化能力。'
+	}
+];
+---
+
+<section class="px-4 lg:px-0 py-16 bg-white 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-red-600">政策牵引</span>落地，烟花爆竹防爆体系标准化
+			</h3>
+			<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full"></div>
+		</div>
+
+		<div class="max-w-5xl mx-auto">
+			<ol class="relative border-l-2 border-red-100 ml-4 md:ml-6">
+				{policies.map((item, idx) => (
+					<li class="relative pl-6 md:pl-10 pb-6 last:pb-0">
+						<span class="absolute -left-[17px] top-0 flex items-center justify-center w-8 h-8 rounded-full bg-red-600 text-white text-sm font-black shadow-md ring-4 ring-white">{String(idx + 1).padStart(2, '0')}</span>
+						<article class="bg-slate-50 rounded-2xl p-5 md:p-6 hover:bg-white hover:ring-1 hover:ring-red-200 hover:shadow-md transition-all duration-300">
+							<div class="flex flex-wrap items-baseline gap-2 mb-2">
+								<h4 class="text-lg md:text-xl font-extrabold text-gray-900 leading-snug">{item.title}</h4>
+								<span class="text-sm font-bold text-red-600 tracking-wide">· {item.meta}</span>
+								<span class="ml-auto text-sm font-mono font-bold text-gray-400 tracking-[0.12em]">{item.year}</span>
+							</div>
+							<p class="text-base text-gray-600 leading-relaxed">{item.desc}</p>
+						</article>
+					</li>
+				))}
+			</ol>
+		</div>
+	</div>
+</section>
@@ -0,0 +1,74 @@
+---
+const features = [
+	{ icon: 'fa-video-camera', title: '矿用视频 AI', desc: '井下/露天防爆摄像头 + 700+ 场景算法，吸烟、超员、闯入禁区秒级识别。' },
+	{ icon: 'fa-thermometer-three-quarters', title: '环境物联感知', desc: '瓦斯、CO、风速、粉尘、温湿度 24h 监测，超标自动联动通风/断电。' },
+	{ icon: 'fa-id-card', title: '人员定位管控', desc: 'UWB/北斗双模厘米级定位，结合人脸/虹膜分级准入与电子围栏管控。' },
+	{ icon: 'fa-warning', title: '灾害预警与应急', desc: '尾矿库/边坡/采空区在线监测，一键报警联动应急广播与避灾路径。' }
+];
+
+const layers = [
+	{ name: '应用层', color: 'bg-blue-600', items: ['驾驶舱大屏', '隐患工单', '应急指挥', '监管上报'] },
+	{ name: '平台层', color: 'bg-indigo-600', items: ['AI 视觉大模型', 'SaaS 中台', '数据治理', '工艺联动'] },
+	{ name: '网络层', color: 'bg-cyan-600', items: ['矿用环网', '本安无线', '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">
+						依托矿山行业专属 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">事前预警、事中干预、事后溯源——满足《金属非金属矿山安全规程》与国家矿山安全监察局监管平台对接要求，存量摄像头利旧升级，70%+ 硬件成本下降。</p>
+					</div>
+				</div>
+
+				<div class="space-y-4">
+					<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
+						<img src="/img/mining/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>
@@ -0,0 +1,69 @@
+---
+const hardware = [
+	{
+		icon: 'fa-video-camera',
+		title: '矿用防爆摄像头',
+		desc: '井下 Ex d I Mb / 露天 IP67 防爆等级，红外夜视、AI 行为识别，存量设备支持利旧。',
+		tags: ['防爆 Ex d I Mb', 'AI 视觉']
+	},
+	{
+		icon: 'fa-cloud',
+		title: '瓦斯与有毒气体监测',
+		desc: '采掘工作面、回风巷、采空区部署多气体监测仪，超标自动触发通风联动与撤离广播。',
+		tags: ['多参数监测', '联动通风']
+	},
+	{
+		icon: 'fa-id-card',
+		title: 'UWB/北斗双模定位',
+		desc: '矿用本安型标签 + 基站，井下厘米级定位，结合电子围栏管控采空区与爆破警戒区。',
+		tags: ['厘米级定位', '本安型']
+	},
+	{
+		icon: 'fa-fire',
+		title: '热成像非接触测温',
+		desc: '针对变电硐室、电缆接头、易燃物料，在可见火光产生前探测隐蔽热源，预防自燃。',
+		tags: ['全天候', '隐蔽热源']
+	},
+	{
+		icon: 'fa-warning',
+		title: '尾矿库与边坡监测',
+		desc: 'GNSS + 测斜仪 + 浸润线 + 雨量计协同布防，结合 AI 视频识别边坡滑移征兆。',
+		tags: ['坝体位移', '在线监测']
+	},
+	{
+		icon: 'fa-plane',
+		title: '无人机 / 机器人巡检',
+		desc: '露天采场、排土场无人机扫描，井下盲巷与高瓦斯区机器人替代人工，7×24h 监测异动。',
+		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 border border-slate-200 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-300 flex flex-col">
+					<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center mb-4">
+						<i class={`fa ${h.icon} text-xl`}></i>
+					</div>
+					<h4 class="text-lg font-extrabold text-gray-900 leading-snug mb-3">{h.title}</h4>
+					<p class="text-base text-gray-600 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>
@@ -0,0 +1,44 @@
+<section class="bg-slate-50 overflow-hidden">
+	<div class="max-w-7xl mx-auto px-4 lg:px-0 pt-4 md:pt-8">
+		<div class="bg-white rounded-3xl border border-blue-100 shadow-xl p-5 md:p-10">
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+				<div class="space-y-5">
+					<div class="inline-flex items-center gap-2 bg-blue-50 text-blue-700 px-3 py-1.5 rounded-full text-sm font-bold tracking-wide">
+						<i class="fa fa-cubes"></i>
+						<span>非煤矿山企安智控系统</span>
+					</div>
+					<h1 class="text-3xl md:text-5xl font-black tracking-tight leading-tight">
+						<span class="text-blue-600">非煤矿山</span>
+					</h1>
+					<p class="text-gray-700 text-lg md:text-lg leading-relaxed">
+						专为金属非金属矿山、尾矿库等高风险行业打造，融合 AI 视觉大模型、矿用防爆物联与工业互联网，构建“事前预警、事中干预、事后溯源”的全流程安全管理体系，覆盖井下与露天高危场景。
+					</p>
+					<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">防爆物联</div>
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">井下定位</div>
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">灾害预警</div>
+						<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-base">监管对接</div>
+					</div>
+				</div>
+
+				<div class="relative">
+					<div class="absolute -inset-4 bg-blue-200/40 blur-3xl rounded-full -z-10"></div>
+					<div class="overflow-hidden rounded-3xl border border-slate-100 shadow-lg">
+						<img src="/img/mining/hero.webp" alt="非煤矿山企安智控系统" class="w-full h-auto object-cover">
+					</div>
+				</div>
+			</div>
+
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
+				<div class="bg-blue-50 border border-blue-100 rounded-2xl p-5">
+					<p class="text-blue-900 font-bold text-lg mb-3">为矿山企业赋能</p>
+					<p class="text-gray-700 leading-relaxed text-base md:text-lg">覆盖采掘、提升、运输、储装、尾矿库全流程，存量摄像头利旧升级 + AI 算法赋能，节省 70%+ 硬件成本，数日内完成部署，落实安全生产标准化要求。</p>
+				</div>
+				<div class="bg-red-50 border border-red-100 rounded-2xl p-5">
+					<p class="text-red-900 font-bold text-lg mb-3">为监管部门赋能</p>
+					<p class="text-gray-700 leading-relaxed text-base md:text-lg">标准化对接国家矿山安全监察局监管平台与地方应急管理平台，自动上传人员定位、气体监测、灾害预警等数据，实现政企数据互联互通、远程可视化监管。</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
@@ -0,0 +1,75 @@
+---
+const painPoints = [
+	{
+		icon: 'fa-bolt',
+		title: '井下高危环境',
+		subtitle: '瓦斯 / 透水 / 顶板风险叠加',
+		points: ['有毒有害气体浓度突变', '顶板冒落、片帮风险', '突水、淹井威胁人员安全']
+	},
+	{
+		icon: 'fa-warning',
+		title: '尾矿库与边坡风险',
+		subtitle: '一旦溃坝后果严重',
+		points: ['坝体位移、浸润线异常', '高陡边坡滑移、塌方', '排土场失稳易引发次生灾害']
+	},
+	{
+		icon: 'fa-cloud',
+		title: '粉尘与职业健康',
+		subtitle: '高粉尘 / 强振动作业环境',
+		points: ['凿岩、破碎、转载粉尘高发', '粉尘爆炸与尘肺职业危害', '降尘措施落实不到位']
+	},
+	{
+		icon: 'fa-users',
+		title: '人员管理盲区',
+		subtitle: '井下定位与三违管控难',
+		points: ['超员入井、脱岗睡岗', '违规搭乘、擅闯采空区', '特种作业无证操作时有发生']
+	},
+	{
+		icon: 'fa-lock',
+		title: '民爆物品流向风险',
+		subtitle: '管控链路长、易流失',
+		points: ['领用、爆破、剩余回库环节多', '违规爆破操作难以监控', '账实不符引发安全与合规风险']
+	},
+	{
+		icon: 'fa-shield',
+		title: '监管标准日趋严格',
+		subtitle: '数据上报与标准化压力大',
+		points: ['监管平台对接要求高', '安全标准化考核难落实', '事故倒查、责任追溯困难']
+	}
+];
+---
+
+<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>
+		</div>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+			{painPoints.map((item) => (
+				<article class="bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-300 flex flex-col">
+					<div class="flex items-start gap-4 mb-4">
+						<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white flex items-center justify-center shadow-md shadow-blue-200/60 shrink-0">
+							<i class={`fa ${item.icon} text-xl`}></i>
+						</div>
+						<div class="flex-1 min-w-0">
+							<h4 class="text-lg font-black text-gray-900 leading-snug">{item.title}</h4>
+							<p class="text-sm font-semibold text-blue-600 mt-1">{item.subtitle}</p>
+						</div>
+					</div>
+					<ul class="space-y-2 flex-1 text-base text-gray-700">
+						{item.points.map((p) => (
+							<li class="flex items-start gap-2">
+								<i class="fa fa-angle-right text-blue-500 mt-1 text-sm shrink-0"></i>
+								<span class="leading-relaxed">{p}</span>
+							</li>
+						))}
+					</ul>
+				</article>
+			))}
+		</div>
+	</div>
+</section>
@@ -0,0 +1,96 @@
+---
+const categories = [
+	{
+		label: '国家政策导向',
+		items: [
+			{
+				title: '关于推动非煤矿山智能化建设的指导意见',
+				meta: '应急〔2022〕3号',
+				desc: '推动井下感知、人员定位、视频监控、隐患排查全流程数字化管控落地。'
+			},
+			{
+				title: '"十四五"矿山安全生产规划',
+				meta: '应急部 2022',
+				desc: '到 2025 年大中型矿山基本实现智能化，明确监测预警与监管平台建设要求。'
+			},
+			{
+				title: '全国非煤矿山安全专项整治三年行动',
+				meta: '国务院安委办',
+				desc: '聚焦尾矿库、地下矿山、采空区，强化重大风险源专项整治与监管对接。'
+			}
+		]
+	},
+	{
+		label: '强制标准与技术规范',
+		items: [
+			{
+				title: '金属非金属矿山安全规程',
+				meta: 'GB 16423-2020',
+				desc: '矿山设计、采掘、通风、提升、运输等环节的强制性安全底线。'
+			},
+			{
+				title: '尾矿库安全规程',
+				meta: 'GB 39496-2020',
+				desc: '强制要求尾矿库在线监测坝体位移、浸润线、库水位、降雨量。'
+			},
+			{
+				title: '金属非金属地下矿山通风技术规范',
+				meta: 'AQ 2013',
+				desc: '井下通风系统、风量风压、风速监测要求，是瓦斯防治的技术支撑。'
+			}
+		]
+	},
+	{
+		label: '监管要求与专项治理',
+		items: [
+			{
+				title: '地下矿山在用人员定位系统安全检测检验规范',
+				meta: 'AQ 2031',
+				desc: '矿用人员定位本安型设备的检测要求，支撑实时位置监控与紧急救援。'
+			},
+			{
+				title: '深入推进尾矿库安全生产专项整治实施方案',
+				meta: '应急部 2022',
+				desc: '明确"头顶库"、上游法尾矿库等重大风险源专项整治要求。'
+			},
+			{
+				title: '关于加强金属非金属矿山安全风险分级管控的指导意见',
+				meta: '应急部',
+				desc: '推动红橙黄蓝四色风险分级管控落地，强化重大风险源数据上报。'
+			}
+		]
+	}
+];
+---
+
+<section class="px-4 lg:px-0 py-16 bg-white 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-red-600">政策牵引</span>落地，矿山数字化方向更清晰
+			</h3>
+			<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full"></div>
+		</div>
+
+		<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+			{categories.map((cat) => (
+				<div>
+					<div class="flex items-center gap-2 mb-4">
+						<span class="w-2 h-2 rounded-full bg-red-600"></span>
+						<p class="text-sm font-black text-red-700 tracking-[0.18em]">{cat.label}</p>
+						<span class="text-sm text-gray-400">· {cat.items.length} 项</span>
+					</div>
+					<div class="space-y-3">
+						{cat.items.map((item) => (
+							<article class="bg-slate-50 rounded-2xl border border-red-100 p-5 hover:shadow-md transition-all duration-300">
+								<p class="text-sm font-bold text-red-600 mb-2 tracking-wide">{item.meta}</p>
+								<h4 class="text-lg font-extrabold text-gray-900 leading-snug mb-2">{item.title}</h4>
+								<p class="text-base text-gray-600 leading-relaxed">{item.desc}</p>
+							</article>
+						))}
+					</div>
+				</div>
+			))}
+		</div>
+	</div>
+</section>
@@ -30,6 +30,9 @@ const navItems: NavItem[] = [
 			{ id: 'kitchen', label: '明厨亮灶', href: '/kitchen', icon: 'fa-cutlery' },
 			{ id: 'education', label: '智慧学校', href: '/education', icon: 'fa-graduation-cap' },
 			{ id: 'construction', label: '智慧工地', href: '/construction', icon: 'fa-industry' },
+			{ id: 'chemical', label: '危险化学品', href: '/chemical', icon: 'fa-flask' },
+			{ id: 'fireworks', label: '烟花爆竹', href: '/fireworks', icon: 'fa-asterisk' },
+			{ id: 'mining', label: '非煤矿山', href: '/mining', icon: 'fa-cubes' },
 		]
 	},
 	{ id: 'customization', label: '本地化定制', href: '/customization', icon: 'fa-wrench' },
@@ -84,17 +87,23 @@ function getMobileNavLinkClass(item: NavItem) {
 						</button>
 						<div class="absolute top-full left-1/2 -translate-x-1/2 pt-2 opacity-0 invisible transition-all duration-200 z-50"
 							 data-dropdown-panel role="menu">
-							<div class="bg-white rounded-xl shadow-xl border border-gray-100 p-3">
-								<div class="flex gap-2">
+							<div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-3 w-[600px]">
+								<div class="grid grid-cols-3 gap-2">
 									{item.children.map(child => (
 										<a href={child.href} role="menuitem"
-										   class={`flex flex-col items-center gap-2 px-5 py-3 rounded-lg transition-all min-w-[120px] ${
+										   class={`group flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all ${
 											 child.id === activeNav
 											   ? 'bg-primary text-white'
 											   : 'text-gray-700 hover:bg-primary/10 hover:text-primary'
 										   }`}>
-											<i class={`fa ${child.icon} text-xl`}></i>
-											<span class="text-sm font-medium whitespace-nowrap">{child.label}</span>
+											<span class={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${
+												child.id === activeNav
+													? 'bg-white/20 text-white'
+													: 'bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white'
+											}`}>
+												<i class={`fa ${child.icon} text-base`}></i>
+											</span>
+											<span class="text-sm font-semibold whitespace-nowrap">{child.label}</span>
 										</a>
 									))}
 								</div>
@@ -154,16 +163,16 @@ function getMobileNavLinkClass(item: NavItem) {
 <div id="mobile-product-panel"
 	 class="lg:hidden fixed left-0 right-0 z-30 bg-white shadow-xl border-b border-gray-200 transform -translate-y-full opacity-0 pointer-events-none transition-all duration-300"
 	 style="top: 108px;" role="menu">
-	<div class="max-w-md mx-auto px-2 py-3 grid grid-cols-3 gap-1">
+	<div class="max-w-md mx-auto px-3 py-3 grid grid-cols-3 gap-2">
 		{navItems.find(item => item.children)?.children?.map(child => (
 			<a href={child.href} role="menuitem"
-			   class={`flex flex-col items-center gap-1 py-2 px-1 rounded-lg transition-colors ${
+			   class={`flex flex-col items-center gap-1.5 py-2.5 px-1 rounded-xl transition-colors ${
 				 child.id === activeNav
-				   ? 'bg-primary/10 text-primary'
-				   : 'hover:bg-primary/10'
+				   ? 'bg-primary text-white'
+				   : 'bg-primary/5 text-gray-700 hover:bg-primary/10'
 			   }`}>
-				<i class={`fa ${child.icon} text-lg ${child.id === activeNav ? 'text-primary' : 'text-primary'}`}></i>
-				<span class={`text-[10px] font-medium leading-tight text-center ${child.id === activeNav ? 'text-primary' : 'text-gray-700'}`}>{child.label}</span>
+				<i class={`fa ${child.icon} text-lg ${child.id === activeNav ? 'text-white' : 'text-primary'}`}></i>
+				<span class={`text-[11px] font-semibold leading-tight text-center whitespace-nowrap ${child.id === activeNav ? 'text-white' : 'text-gray-700'}`}>{child.label}</span>
 			</a>
 		))}
 	</div>
@@ -0,0 +1,18 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import ChemicalHero from '../../components/sections/ChemicalHero.astro';
+import ChemicalPainPoints from '../../components/sections/ChemicalPainPoints.astro';
+import ChemicalPolicy from '../../components/sections/ChemicalPolicy.astro';
+import ChemicalArchitecture from '../../components/sections/ChemicalArchitecture.astro';
+import ChemicalHardware from '../../components/sections/ChemicalHardware.astro';
+---
+
+<Layout title="危险化学品 - 浙江贝凡网络科技" activeNav="chemical">
+	<main class="pt-20">
+		<ChemicalHero />
+		<ChemicalPainPoints />
+		<ChemicalPolicy />
+		<ChemicalArchitecture />
+		<ChemicalHardware />
+	</main>
+</Layout>
@@ -0,0 +1,18 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import FireworksHero from '../../components/sections/FireworksHero.astro';
+import FireworksPainPoints from '../../components/sections/FireworksPainPoints.astro';
+import FireworksPolicy from '../../components/sections/FireworksPolicy.astro';
+import FireworksArchitecture from '../../components/sections/FireworksArchitecture.astro';
+import FireworksHardware from '../../components/sections/FireworksHardware.astro';
+---
+
+<Layout title="烟花爆竹 - 浙江贝凡网络科技" activeNav="fireworks">
+	<main class="pt-20">
+		<FireworksHero />
+		<FireworksPainPoints />
+		<FireworksPolicy />
+		<FireworksArchitecture />
+		<FireworksHardware />
+	</main>
+</Layout>
@@ -0,0 +1,18 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import MiningHero from '../../components/sections/MiningHero.astro';
+import MiningPainPoints from '../../components/sections/MiningPainPoints.astro';
+import MiningPolicy from '../../components/sections/MiningPolicy.astro';
+import MiningArchitecture from '../../components/sections/MiningArchitecture.astro';
+import MiningHardware from '../../components/sections/MiningHardware.astro';
+---
+
+<Layout title="非煤矿山 - 浙江贝凡网络科技" activeNav="mining">
+	<main class="pt-20">
+		<MiningHero />
+		<MiningPainPoints />
+		<MiningPolicy />
+		<MiningArchitecture />
+		<MiningHardware />
+	</main>
+</Layout>