Compare commits
16 Commits
abda1c005e
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 Frudrax Cheng
|
25cb15a2ab
|
||
|
Frudrax Cheng
|
e8d80bfefd
|
||
|
Frudrax Cheng
|
718d5e3b54
|
||
|
Frudrax Cheng
|
40b6c77d51
|
||
|
Frudrax Cheng
|
28093fabae
|
||
|
Frudrax Cheng
|
7abfc36ae3
|
||
|
Frudrax Cheng
|
8b6f9f56b2
|
||
|
Frudrax Cheng
|
92853bd147
|
||
|
Frudrax Cheng
|
d50e11ce74
|
||
|
Frudrax Cheng
|
2f3ced42ac
|
||
|
Frudrax Cheng
|
a3e2da03fa
|
||
|
Frudrax Cheng
|
6a76992403
|
||
|
Frudrax Cheng
|
a64b4fb4b3
|
||
|
Frudrax Cheng
|
882151a6d0
|
||
|
Frudrax Cheng
|
f66a029843
|
||
|
Frudrax Cheng
|
6020fb1849
|
Vendored
+1
-1
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"_variables": {
|
||||
"lastUpdateCheck": 1776058818761
|
||||
"lastUpdateCheck": 1779412568408
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
|
||||
+1
-1
@@ -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",
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
allowBuilds:
|
||||
esbuild: true
|
||||
sharp: true
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 488 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 182 KiB |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 864 B |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 762 B |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 716 B |
Binary file not shown.
|
After Width: | Height: | Size: 432 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 337 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 446 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -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>
|
||||
@@ -21,7 +21,7 @@
|
||||
浙江贝凡 2019 年 2 月成立，总部坐落于美丽的西子湖畔 · 杭州，贝凡二字源于<span class="text-blue-600 font-bold">"赢"</span>字之精髓，<span class="text-blue-600 font-bold">"贝"</span>象征取财有道，坚守商业本质，<span class="text-blue-600 font-bold">"凡"</span>代表匠心守拙，深耕技术创新。
|
||||
</p>
|
||||
<p class="text-gray-600 text-base md:text-lg leading-relaxed">
|
||||
依托自主研发，聚焦<span class="text-blue-600 font-bold">系统研发定制</span>及<span class="text-blue-600 font-bold">自研SaaS系统</span>两大核心板块。依托多模态系统集成、AI视觉大模型等前沿技术，构建智能化、数字化、信息化服务体系；业务覆盖企业数字化转型、政企协同治理、本地化项目交付。
|
||||
依托自主研发，聚焦<span class="text-blue-600 font-bold">系统研发定制</span>及<span class="text-blue-600 font-bold">自研SaaS系统</span>两大核心板块。依托多模态系统集成、AI视觉大模型等前沿技术，专注为全国工贸企业、产业园区、酒店餐饮、物业楼宇、仓储物流、智慧养老、学校教育、明厨亮灶、智慧工地等场景，构建智能化、数字化、信息化服务体系；业务覆盖企业数字化转型、政企协同治理、本地化项目交付。
|
||||
</p>
|
||||
<p class="text-gray-600 text-base md:text-lg leading-relaxed mt-6">
|
||||
公司始终以<span class="text-blue-600 font-bold">"应用为导向，以系统为核心"</span>筑牢技术根基，未来将持续系统迭代与多场景融合，为推动行业数字化转型赋能。
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
<i class="fa fa-industry"></i>
|
||||
<span>智慧工地安全监管平台</span>
|
||||
</div>
|
||||
<h1 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight leading-tight">
|
||||
智慧工地
|
||||
<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-base md:text-lg leading-relaxed">
|
||||
面向施工现场高风险、高流动、多协同场景，平台融合 AI 视觉识别与物联感知能力，打造“实时发现、即时告警、闭环处置、全程追溯”的数字化安全管理体系。
|
||||
|
||||
@@ -29,33 +29,24 @@ const painPoints = [
|
||||
|
||||
<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-10">
|
||||
<div class="text-center mb-10 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-amber-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-amber-100 text-amber-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-exclamation-triangle"></i>
|
||||
<span>传统工地四大管理痛点</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
四类高频风险，一屏快速识别
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-amber-600">传统工地</span>四大管理痛点
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-amber-600 mx-auto mt-8 rounded-full shadow-sm shadow-amber-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
{painPoints.map((item, index) => (
|
||||
{painPoints.map((item) => (
|
||||
<article class="group bg-white border border-slate-200 rounded-2xl p-5 shadow-sm hover:shadow-lg transition-all duration-300">
|
||||
<div class="rounded-xl overflow-hidden border border-slate-200 mb-4 bg-slate-100">
|
||||
<img src={item.img} alt={item.title} class="w-full h-36 md:h-40 object-cover opacity-90 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3 mb-3">
|
||||
<p class="text-xs font-black text-amber-600 tracking-[0.16em]">PAIN 0{index + 1}</p>
|
||||
<p class="inline-flex items-center w-fit px-2.5 py-1 rounded-full text-[11px] font-bold bg-amber-50 text-amber-700 border border-amber-100">
|
||||
{item.tag}
|
||||
</p>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-slate-900 leading-snug">{item.title}</h4>
|
||||
<p class="text-sm text-slate-600 leading-relaxed mt-3">{item.desc}</p>
|
||||
<div class="mt-4 h-1 w-12 bg-amber-400 rounded-full"></div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -38,14 +38,12 @@ const regulationPolicies = policies.slice(2);
|
||||
|
||||
<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">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-100 text-red-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-balance-scale"></i>
|
||||
<span>政策导向与法规依据</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
政策牵引落地，建设方向更清晰
|
||||
<div class="text-center mb-12 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-red-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-red-600">政策牵引</span>落地，建设方向更清晰
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full shadow-sm shadow-red-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 md:space-y-8">
|
||||
@@ -57,11 +55,6 @@ const regulationPolicies = policies.slice(2);
|
||||
<p class="text-[11px] font-bold text-red-600 mb-2 tracking-wide">{item.meta}</p>
|
||||
<h4 class="text-lg font-extrabold text-gray-900 leading-snug mb-3">{item.title}</h4>
|
||||
<p class="text-sm text-gray-600 leading-relaxed mb-4">{item.desc}</p>
|
||||
<div class="flex flex-wrap gap-2 mt-auto">
|
||||
{item.tags.map((tag) => (
|
||||
<span class="px-2 py-1 rounded-full bg-red-100 text-red-700 text-[11px] font-bold">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
@@ -75,11 +68,6 @@ const regulationPolicies = policies.slice(2);
|
||||
<p class="text-[11px] font-bold text-blue-600 mb-2 tracking-wide">{item.meta}</p>
|
||||
<h4 class="text-lg font-extrabold text-gray-900 leading-snug mb-3">{item.title}</h4>
|
||||
<p class="text-sm text-gray-600 leading-relaxed mb-4">{item.desc}</p>
|
||||
<div class="flex flex-wrap gap-2 mt-auto">
|
||||
{item.tags.map((tag) => (
|
||||
<span class="px-2 py-1 rounded-full bg-blue-100 text-blue-700 text-[11px] font-bold">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
<img src="/img/timeline-2019-icon.webp" alt="icon" class="w-7 h-7 object-contain">
|
||||
公司成立
|
||||
</h4>
|
||||
<p class="text-gray-600 text-base leading-relaxed">自主研发"车险分期"系统平台，为全国商用车领域业务赋能</p>
|
||||
<p class="text-gray-600 text-base leading-relaxed">2019年2月公司在杭州成立</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -74,16 +74,14 @@ const capabilities = [
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">实现校园安全治理“看得见、管得住、可追溯”，支撑学校日常管理与监管协同的数字化升级。</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 border-t border-blue-100 pt-8">
|
||||
<div class="text-center mb-8">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-emerald-100 text-emerald-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-th-large"></i>
|
||||
<span>核心能力体系</span>
|
||||
</p>
|
||||
<h4 class="text-2xl md:text-4xl font-black text-gray-900 tracking-tight mt-4">
|
||||
面向校园场景的一体化能力底座
|
||||
</h4>
|
||||
</div>
|
||||
<div class="mt-10 border-t border-blue-100 pt-8">
|
||||
<div class="text-center mb-8 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-emerald-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h4 class="text-2xl md:text-4xl font-black tracking-tight leading-tight mt-4">
|
||||
面向校园场景的<span class="text-emerald-600">一体化能力</span>底座
|
||||
</h4>
|
||||
<div class="w-24 h-1.5 bg-emerald-600 mx-auto mt-8 rounded-full shadow-sm shadow-emerald-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{capabilities.map((item) => (
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
<i class="fa fa-graduation-cap"></i>
|
||||
<span>智慧学校安全运营平台</span>
|
||||
</div>
|
||||
<h1 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight leading-tight">
|
||||
智慧学校
|
||||
<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-base md:text-lg leading-relaxed">
|
||||
围绕校园安防、后勤运维与日常管理场景，融合 AI 视频识别与多系统数据联动，构建“主动发现、快速联动、标准处置、全过程追溯”的校园安全闭环体系。
|
||||
|
||||
@@ -61,64 +61,18 @@ const painSections = [
|
||||
icon: '/img/education/pain-3-fire-alarm.svg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
index: '痛点四',
|
||||
title: '治理机制不完善，处置质量不稳定',
|
||||
summary: '处理流程不规范、管理体系缺失、跨部门协同不足，导致同类问题反复出现，难以形成长效治理。',
|
||||
items: [
|
||||
{
|
||||
title: '处理流程不规范',
|
||||
desc: '事件分级、责任分派、验收标准不统一，执行偏差大。',
|
||||
icon: '/img/education/pain-4-process-nonstandard.svg'
|
||||
},
|
||||
{
|
||||
title: '管理体系缺失',
|
||||
desc: '缺少制度化台账与持续评估机制，整改难以沉淀为标准。',
|
||||
icon: '/img/education/pain-4-system-missing.svg'
|
||||
},
|
||||
{
|
||||
title: '联动协同不足',
|
||||
desc: '安保、后勤、教务之间信息传递链路长，响应效率低。',
|
||||
icon: '/img/education/pain-4-collab-weak.svg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
index: '痛点五',
|
||||
title: '设备和台账管理粗放，运维成本持续抬升',
|
||||
summary: '设备数量多、类型杂，依赖人工登记与分散记录，漏检失修与信息不一致问题并存。',
|
||||
items: [
|
||||
{
|
||||
title: '漏检失修',
|
||||
desc: '周期巡检执行不到位，关键设备状态变化无法及时掌握。',
|
||||
icon: '/img/education/pain-5-missed-inspection.svg'
|
||||
},
|
||||
{
|
||||
title: '人工登记',
|
||||
desc: '纸质或分散表格记录易遗漏、易出错，追溯效率低。',
|
||||
icon: '/img/education/pain-5-manual-record.svg'
|
||||
},
|
||||
{
|
||||
title: '设备繁杂',
|
||||
desc: '多品牌多协议并存，维护策略难统一，管理复杂度高。',
|
||||
icon: '/img/education/pain-5-device-complex.svg'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<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">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-exclamation-triangle"></i>
|
||||
<span>校园管理核心痛点</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
按场景拆解问题，按闭环重建治理
|
||||
<div class="text-center mb-12 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-blue-600">校园管理</span>核心痛点
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full shadow-sm shadow-blue-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 md:space-y-8">
|
||||
|
||||
@@ -44,17 +44,12 @@ const regulationPolicies = [
|
||||
|
||||
<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">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-100 text-red-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-balance-scale"></i>
|
||||
<span>政策导向与法规依据</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
政策有依据，建设有方向
|
||||
<div class="text-center mb-12 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-red-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-red-600">政策有依据</span>，建设有方向
|
||||
</h3>
|
||||
<p class="text-gray-600 mt-5 max-w-3xl mx-auto leading-relaxed">
|
||||
围绕校园安防、消防、食品与治安管理的关键法规要求，构建“可检查、可整改、可追溯”的数字化治理闭环。
|
||||
</p>
|
||||
<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full shadow-sm shadow-red-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
@@ -73,12 +68,7 @@ const regulationPolicies = [
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="text-lg font-extrabold text-gray-900 leading-snug mb-3">{item.title}</h4>
|
||||
<p class="text-sm text-gray-600 leading-relaxed mb-4">{item.desc}</p>
|
||||
<div class="flex flex-wrap gap-2 mt-auto">
|
||||
{item.tags.map((tag) => (
|
||||
<span class="px-2 py-1 rounded-full bg-red-100 text-red-700 text-[11px] font-bold">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 leading-relaxed mb-4">{item.desc}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
@@ -99,12 +89,7 @@ const regulationPolicies = [
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="text-lg font-extrabold text-gray-900 leading-snug mb-3">{item.title}</h4>
|
||||
<p class="text-sm text-gray-600 leading-relaxed mb-4">{item.desc}</p>
|
||||
<div class="flex flex-wrap gap-2 mt-auto">
|
||||
{item.tags.map((tag) => (
|
||||
<span class="px-2 py-1 rounded-full bg-blue-100 text-blue-700 text-[11px] font-bold">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 leading-relaxed mb-4">{item.desc}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
const cases = [
|
||||
{
|
||||
title: '河北承德国恩老年公寓“4·8”重大火灾事故',
|
||||
brief: '自制劣质插排短路引燃衣物，叠加违规彩钢板、消防失效与夜间处置缺位，造成重大人员伤亡。',
|
||||
brief: '劣质插排短路起火，违规彩钢板+消防失效+处置缺位，导致重大伤亡。',
|
||||
focus: '暴露问题：电气隐患失管、消防设施失效、值班体系缺位。',
|
||||
img: '/img/elderly/case-1.webp'
|
||||
},
|
||||
{
|
||||
title: '广东东莞康怡护理院“4·4”较大火灾事故',
|
||||
brief: '违规改建及用火不慎叠加消防系统长期瘫痪，起火后无有效报警、喷淋与排烟联动。',
|
||||
brief: '违规改建+用火不慎，消防系统长期瘫痪，起火后无有效报警、喷淋与排烟。',
|
||||
focus: '暴露问题：系统长期手动、日常巡检流于形式、应急链条断裂。',
|
||||
img: '/img/elderly/case-2.webp'
|
||||
}
|
||||
@@ -17,20 +17,18 @@ const cases = [
|
||||
|
||||
<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">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-search"></i>
|
||||
<span>案例警示</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
从事故复盘到机制重建
|
||||
<div class="text-center mb-12 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
从事故复盘到<span class="text-blue-600">机制重建</span>
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full shadow-sm shadow-blue-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{cases.map((item) => (
|
||||
<article class="group bg-white rounded-3xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col">
|
||||
<div class="aspect-[16/10] overflow-hidden">
|
||||
<div class="aspect-[16/7] overflow-hidden">
|
||||
<img src={item.img} alt={item.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
|
||||
</div>
|
||||
<div class="p-5 md:p-6 flex-1 flex flex-col">
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
<i class="fa fa-heartbeat"></i>
|
||||
<span>智慧养老安全运营中台</span>
|
||||
</div>
|
||||
<h1 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight leading-tight">
|
||||
智慧养老
|
||||
<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-base md:text-lg leading-relaxed">
|
||||
企安智控立足机构养老场景，融合 AI 视觉认知与全域物联感知能力，构建“主动预警、智能防控、闭环管理、数据决策”一体化平台，帮助机构持续提升照护安全与运营效率。
|
||||
|
||||
@@ -21,14 +21,12 @@ const products = [
|
||||
|
||||
<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">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-emerald-100 text-emerald-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-home"></i>
|
||||
<span>居家养老服务</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
适老化改造 + 智能终端 + 数据服务
|
||||
<div class="text-center mb-12 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-emerald-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-emerald-600">适老化改造</span> + 智能终端 + 数据服务
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-emerald-600 mx-auto mt-8 rounded-full shadow-sm shadow-emerald-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-3xl border border-emerald-100 p-5 md:p-8">
|
||||
|
||||
@@ -35,21 +35,16 @@ const painPoints = [
|
||||
|
||||
<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">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-amber-100 text-amber-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-exclamation-triangle"></i>
|
||||
<span>机构养老六大安全痛点</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
安全防线失守，照见养老消防顽疾
|
||||
<div class="text-center mb-12 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-blue-600">机构养老</span>六大安全痛点
|
||||
</h3>
|
||||
<p class="text-gray-600 mt-5 max-w-3xl mx-auto leading-relaxed">
|
||||
围绕管理、设施、电气、台账、演练、监控六个关键维度，建立风险画像，明确智慧养老平台建设优先级。
|
||||
</p>
|
||||
<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full shadow-sm shadow-blue-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{painPoints.map((item, index) => (
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{painPoints.map((item) => (
|
||||
<article class="group bg-white rounded-3xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300">
|
||||
<div class="aspect-[16/10] overflow-hidden">
|
||||
<img src={item.img} alt={item.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
|
||||
|
||||
@@ -29,14 +29,12 @@ const policies = [
|
||||
|
||||
<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">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-100 text-red-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-balance-scale"></i>
|
||||
<span>政策导向与标准要求</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
政策有依据，建设有方向
|
||||
<div class="text-center mb-12 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-red-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-red-600">政策有依据</span>，建设有方向
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full shadow-sm shadow-red-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
@@ -47,11 +45,6 @@ const policies = [
|
||||
</div>
|
||||
<p class="text-[11px] font-bold text-red-600 mb-2 tracking-wide">{item.meta}</p>
|
||||
<h4 class="text-base font-extrabold text-gray-900 leading-snug mb-3">{item.title}</h4>
|
||||
<div class="flex flex-wrap gap-2 mt-auto">
|
||||
{item.tags.map((tag) => (
|
||||
<span class="px-2 py-1 rounded-full bg-red-100 text-red-700 text-[11px] font-bold">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
@@ -7,8 +7,8 @@
|
||||
<i class="fa fa-cutlery"></i>
|
||||
<span>明厨亮灶智慧监管平台</span>
|
||||
</div>
|
||||
<h1 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight leading-tight">
|
||||
明厨亮灶
|
||||
<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-base md:text-lg leading-relaxed">
|
||||
围绕餐饮加工全流程与监管全链路，平台融合视频可视化、过程留痕与智能感知能力，推动食品安全治理从“被动抽检”向“实时监管、闭环处置、社会共治”升级。
|
||||
|
||||
@@ -37,14 +37,12 @@ const painPoints = [
|
||||
|
||||
<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-10">
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
食安事故频发，折射餐饮行业重症
|
||||
<div class="text-center mb-10 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-amber-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-amber-500">食安事故</span>频发，折射餐饮行业重症
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="max-w-3xl mx-auto rounded-2xl overflow-hidden border border-slate-200 shadow-sm mb-8">
|
||||
<img src="/img/kitchen/pain-cover.webp" alt="食安事故频发场景示意" class="w-full h-auto object-cover" />
|
||||
<div class="w-24 h-1.5 bg-amber-500 mx-auto mt-8 rounded-full shadow-sm shadow-amber-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
|
||||
@@ -35,14 +35,12 @@ const policies = [
|
||||
|
||||
<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">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-100 text-red-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-balance-scale"></i>
|
||||
<span>政策驱动</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
保卫“舌尖上的安全”
|
||||
<div class="text-center mb-12 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-red-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
政策法规护航，筑牢<span class="text-red-600">食安防线</span>
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-red-600 mx-auto mt-8 rounded-full shadow-sm shadow-red-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
|
||||
@@ -20,17 +20,12 @@ const trinity = [
|
||||
|
||||
<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">
|
||||
<p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide">
|
||||
<i class="fa fa-sitemap"></i>
|
||||
<span>三位一体治理</span>
|
||||
</p>
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight mt-5">
|
||||
全面提升食安治理水平
|
||||
<div class="text-center mb-12 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
全面提升<span class="text-blue-600">食安治理</span>水平
|
||||
</h3>
|
||||
<p class="text-gray-600 mt-5 max-w-3xl mx-auto leading-relaxed">
|
||||
落实企业主体责任、创新监管方式、强化社会共治，形成可持续的食品安全治理机制。
|
||||
</p>
|
||||
<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full shadow-sm shadow-blue-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
const features = [
|
||||
{ icon: 'fa-fire', title: '消防 AI 巡查', desc: '吸烟、违规动火、消防通道占用、消火栓遮挡 7×24h AI 识别，告警准确率≥98%。' },
|
||||
{ icon: 'fa-cubes', title: '堆垛智能识别', desc: 'AI 视觉自动巡查超高超宽、与喷淋墙体距离不足等违规堆垛，提示整改。' },
|
||||
{ icon: 'fa-truck', title: '人车作业管控', desc: '叉车超速 / 违规载人识别、装卸月台防坠落、人车分流电子围栏管理。' },
|
||||
{ icon: 'fa-id-card', title: '出入门禁与车辆', desc: '人脸 + 车牌 + 排队预约一体化，车辆称重、装卸、出场全流程闭环留痕。' }
|
||||
];
|
||||
|
||||
const layers = [
|
||||
{ name: '应用层', color: 'bg-blue-600', items: ['驾驶舱大屏', '隐患工单', '应急指挥', '监管上报'] },
|
||||
{ name: '平台层', color: 'bg-indigo-600', items: ['AI 视觉大模型', 'SaaS 中台', '出入库联动', 'WMS 对接'] },
|
||||
{ name: '网络层', color: 'bg-cyan-600', items: ['园区光纤', 'LoRa / NB-IoT', '4G/5G', 'Wi-Fi 6'] },
|
||||
{ name: '感知层', color: 'bg-emerald-600', items: ['AI 摄像头', '电气火灾监测', '温湿度传感', '车牌识别'] }
|
||||
];
|
||||
---
|
||||
|
||||
<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">满足 GB 51157 物流建筑设计规范与《大型物流仓储基地消防安全管理规定》要求，存量摄像头利旧 + AI 算法赋能，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/logistics/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: '立体库、平库、装卸月台部署 AI 摄像头，吸烟、动火、通道占用、堆垛超高秒级识别，存量设备支持利旧。',
|
||||
tags: ['存量利旧', 'AI 视觉']
|
||||
},
|
||||
{
|
||||
icon: 'fa-bolt',
|
||||
title: '电气火灾监测',
|
||||
desc: '配电柜、货架照明、叉车充电间部署电气火灾监测探测器，漏电、过载、温升异常秒级上报。',
|
||||
tags: ['漏电监测', '过载预警']
|
||||
},
|
||||
{
|
||||
icon: 'fa-fire',
|
||||
title: '热成像非接触测温',
|
||||
desc: '充电间、电池区、配电硐室、易燃货物堆区热成像测温,在明火出现前探测隐蔽热源。',
|
||||
tags: ['全天候', '隐蔽热源']
|
||||
},
|
||||
{
|
||||
icon: 'fa-id-card',
|
||||
title: '人脸 + 车牌一体门禁',
|
||||
desc: '员工、司机、装卸工人脸识别准入，车辆车牌识别 + 排队预约 + 称重一体化闭环管理。',
|
||||
tags: ['多重验证', '车辆闭环']
|
||||
},
|
||||
{
|
||||
icon: 'fa-thermometer-three-quarters',
|
||||
title: '温湿度与可燃气体',
|
||||
desc: '冷链库、危化仓、电池间温湿度 / 可燃气体浓度 24h 监测，超标自动联动通风与断电。',
|
||||
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">围绕立体库、装卸月台、叉车作业区、充电间与园区出入口，提供 AI 视频、电气监测、温湿度感知、出入管控等关键硬件，与海康、大华等头部厂商深度兼容。</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-truck"></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 视觉大模型与物联感知，构建<strong>消防安全、货物管理、人车作业、出入管控</strong>全流程数字化安全管理体系。
|
||||
</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/logistics/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 算法赋能，吸烟、违规动火、消防通道占用、堆垛超高秒级识别，告警准确率 ≥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-3">为监管部门赋能</p>
|
||||
<p class="text-gray-700 leading-relaxed text-base md:text-lg">符合 GB 51157、GB 35181、《大型物流仓储基地消防安全管理规定》等标准，对接地方应急、消防与商务部门监管平台，自动上传视频、隐患、出入库及应急数据。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
const painPoints = [
|
||||
{
|
||||
icon: 'fa-fire',
|
||||
title: '火灾隐患高发',
|
||||
subtitle: '可燃货物密集 · 一旦起火扩散快',
|
||||
points: ['纸箱、塑料、棉麻等可燃物大量堆放', '吸烟、违规动火屡禁不止', '消防通道、防火门常被占用堵塞']
|
||||
},
|
||||
{
|
||||
icon: 'fa-bolt',
|
||||
title: '电气与充电风险',
|
||||
subtitle: '叉车 / 货架照明 / 电池间风险叠加',
|
||||
points: ['电气线路老化、私拉乱接频发', '叉车锂电池充电热失控风险', '配电箱 / 电池间监管难全覆盖']
|
||||
},
|
||||
{
|
||||
icon: 'fa-cubes',
|
||||
title: '货物堆垛不规范',
|
||||
subtitle: '"三距" 难达标 · 安全隐患沉淀',
|
||||
points: ['超高、超宽堆放压坏货架', '堆垛与喷淋 / 墙体距离不足', '违规存放危化、易燃易爆物品']
|
||||
},
|
||||
{
|
||||
icon: 'fa-truck',
|
||||
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: '国务院安委办',
|
||||
year: '2022',
|
||||
desc: '明确大型物流仓储基地消防设施、防火分隔、动火管理、智能监测系统的强制要求，是行业消防数字化的核心依据。'
|
||||
},
|
||||
{
|
||||
title: '物流建筑设计规范',
|
||||
meta: 'GB 51157',
|
||||
year: '2016',
|
||||
desc: '高层 / 大跨度 / 立体仓库设计的强制性国家标准，规范防火分区、安全疏散、自动喷淋等关键安全要素。'
|
||||
},
|
||||
{
|
||||
title: '建筑设计防火规范',
|
||||
meta: 'GB 50016',
|
||||
year: '2018 修订',
|
||||
desc: '丙类厂房与仓库防火分区、安全距离、消防设施配置的根本性强制标准，仓储建筑合规底线。'
|
||||
},
|
||||
{
|
||||
title: '重大火灾隐患判定方法',
|
||||
meta: 'GB 35181',
|
||||
year: '2017',
|
||||
desc: '统一重大火灾隐患判定基准，仓储类场所违规储存、堵塞通道、消防设施失效等情形纳入重点判定。'
|
||||
},
|
||||
{
|
||||
title: '"十四五"现代物流发展规划',
|
||||
meta: '国办发〔2022〕17号',
|
||||
year: '2022',
|
||||
desc: '推动智慧物流、绿色物流发展，明确数字化监测、智能仓储、安全风险防控的现代化建设方向。'
|
||||
},
|
||||
{
|
||||
title: '关于推进大型商业综合体消防安全工作的指导意见',
|
||||
meta: '应急管理部',
|
||||
year: '2020',
|
||||
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>
|
||||
@@ -13,36 +13,36 @@
|
||||
|
||||
<div class="mb-12 bg-white rounded-[2rem] border border-red-100 p-5 md:p-6 shadow-sm hover:shadow-xl hover:shadow-red-500/10 transition-all duration-300">
|
||||
<div class="flex flex-col">
|
||||
<div class="inline-flex items-center self-start px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-bold tracking-wide mb-3">重点政策解读</div>
|
||||
<h5 class="text-xl md:text-2xl font-extrabold text-gray-900 leading-tight mb-3">各地加快高层建筑消防物联感知设备统筹接入</h5>
|
||||
<div class="inline-flex items-center self-start px-3 py-1 rounded-full bg-red-100 text-red-700 text-sm font-bold tracking-wide mb-3">重点政策解读</div>
|
||||
<h5 class="text-2xl md:text-3xl font-extrabold text-gray-900 leading-tight mb-3">各地加快高层建筑消防物联感知设备统筹接入</h5>
|
||||
<div class="mb-5 pb-4 border-b border-red-100">
|
||||
<p class="text-sm md:text-base text-red-700 font-bold mb-3">全国政策共性要求</p>
|
||||
<p class="text-sm text-gray-700 leading-relaxed">近年来，全国高层建筑消防安全数字化治理工作统筹推进，各地积极探索实践。</p>
|
||||
<p class="text-sm text-gray-700 leading-relaxed mt-2 mb-3">上海、重庆、广州、杭州等重点城市相继落地实施，核心聚焦物联感知监测、智能实时预警、数据平台汇聚、全链条闭环处置，着力构建现代化智慧消防治理体系。</p>
|
||||
<p class="text-base md:text-lg text-red-700 font-bold mb-3">全国政策共性要求</p>
|
||||
<p class="text-base text-gray-700 leading-relaxed">近年来，全国高层建筑消防安全数字化治理工作统筹推进，各地积极探索实践。</p>
|
||||
<p class="text-base text-gray-700 leading-relaxed mt-2 mb-3">上海、重庆、广州、杭州等重点城市相继落地实施，核心聚焦物联感知监测、智能实时预警、数据平台汇聚、全链条闭环处置，着力构建现代化智慧消防治理体系。</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-[11px] font-bold text-red-700">消防设施联网</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-[11px] font-bold text-red-700">24小时在线监测</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-[11px] font-bold text-red-700">异常事件预警</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-[11px] font-bold text-red-700">监管平台数据接入</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-xs font-bold text-red-700">消防设施联网</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-xs font-bold text-red-700">24小时在线监测</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-xs font-bold text-red-700">异常事件预警</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-red-50 border border-red-100 text-xs font-bold text-red-700">监管平台数据接入</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm md:text-base text-red-700 font-bold mb-4">四项“必须加装”要求</p>
|
||||
<p class="text-base md:text-lg text-red-700 font-bold mb-4">四项“必须加装”要求</p>
|
||||
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<li class="flex items-start gap-3 bg-red-50/70 border border-red-100 rounded-xl p-3">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-red-600 mt-1.5 shrink-0"></span>
|
||||
<p class="text-sm text-gray-700 leading-relaxed">对设有室内消火栓、自动喷水灭火系统的，必须加装水压水位监测设备</p>
|
||||
<p class="text-base text-gray-700 leading-relaxed">对设有室内消火栓、自动喷水灭火系统的，必须加装水压水位监测设备</p>
|
||||
</li>
|
||||
<li class="flex items-start gap-3 bg-red-50/70 border border-red-100 rounded-xl p-3">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-red-600 mt-1.5 shrink-0"></span>
|
||||
<p class="text-sm text-gray-700 leading-relaxed">对设有火灾自动报警系统的，必须加装用户传输装置设备</p>
|
||||
<p class="text-base text-gray-700 leading-relaxed">对设有火灾自动报警系统的，必须加装用户传输装置设备</p>
|
||||
</li>
|
||||
<li class="flex items-start gap-3 bg-red-50/70 border border-red-100 rounded-xl p-3">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-red-600 mt-1.5 shrink-0"></span>
|
||||
<p class="text-sm text-gray-700 leading-relaxed">对设有建筑消防车通道的，在占堵路段必须加装占道监测设备</p>
|
||||
<p class="text-base text-gray-700 leading-relaxed">对设有建筑消防车通道的，在占堵路段必须加装占道监测设备</p>
|
||||
</li>
|
||||
<li class="flex items-start gap-3 bg-red-50/70 border border-red-100 rounded-xl p-3">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-red-600 mt-1.5 shrink-0"></span>
|
||||
<p class="text-sm text-gray-700 leading-relaxed">对设有消防控制室的，必须加装值班人员脱岗离岗监测设备</p>
|
||||
<p class="text-base text-gray-700 leading-relaxed">对设有消防控制室的，必须加装值班人员脱岗离岗监测设备</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<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-xs 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">
|
||||
街道-社区-物业三级协同的安全治理底座
|
||||
</h3>
|
||||
<p class="text-gray-600 leading-relaxed mb-6">
|
||||
平台以 AI 视频与物联感知作为前端感知入口，在中台完成统一告警、分级研判与工单流转，向上对接街道指挥侧、向下连通物业执行侧，把感知、决策、处置串成同一条责任链。
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="bg-blue-600 text-white rounded-xl py-3 text-center text-sm font-bold">全域感知</div>
|
||||
<div class="bg-blue-600 text-white rounded-xl py-3 text-center text-sm font-bold">统一告警</div>
|
||||
<div class="bg-blue-600 text-white rounded-xl py-3 text-center text-sm font-bold">工单闭环</div>
|
||||
<div class="bg-blue-600 text-white rounded-xl py-3 text-center text-sm font-bold">三级协同</div>
|
||||
</div>
|
||||
<div class="mt-6 bg-white border border-blue-100 rounded-2xl p-4">
|
||||
<p class="text-sm font-bold text-blue-700 mb-2">建设目标</p>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">让街道全域态势"一屏掌控"、社区精细化管理"一键处置"、物业巡检"一机搞定"，全面打通任务下发-执行-反馈的全流程闭环。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
|
||||
<img src="/img/property/architecture.webp" alt="物业楼宇系统架构图" class="w-full h-auto object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,277 @@
|
||||
---
|
||||
const roles = [
|
||||
{
|
||||
title: '街道管委会',
|
||||
channel: 'PC 端',
|
||||
desc: '查看全域安全数据、下发检查任务、查阅台账并开展考核。',
|
||||
img: '/img/property/multi-end-street.webp'
|
||||
},
|
||||
{
|
||||
title: '社区管委会',
|
||||
channel: 'PC 端 + 小程序',
|
||||
desc: '管理人员与设备档案、调度隐患处置、上报工作进度，查看告警音视频。',
|
||||
img: '/img/property/multi-end-community.webp'
|
||||
},
|
||||
{
|
||||
title: '物业巡检员',
|
||||
channel: '小程序',
|
||||
desc: '接收任务、上传检查记录、实时处理告警隐患，移动化作业。',
|
||||
img: '/img/property/multi-end-inspector.webp'
|
||||
}
|
||||
];
|
||||
|
||||
const channels = [
|
||||
{ name: '电话', icon: 'fa-phone' },
|
||||
{ name: '短信', icon: 'fa-envelope' },
|
||||
{ name: '小程序', icon: 'fa-mobile' },
|
||||
{ name: 'PC 端', icon: 'fa-desktop' },
|
||||
{ name: '大屏 IOC', icon: 'fa-tv' }
|
||||
];
|
||||
|
||||
const alerts = [
|
||||
{
|
||||
num: '1',
|
||||
name: '一级 · 紧急告警',
|
||||
timing: '20 秒内响应',
|
||||
desc: '关键风险事件秒级触达，五通道同时推送至全链路负责人，自动升级提醒。',
|
||||
active: [true, true, true, true, true],
|
||||
from: 'from-red-500',
|
||||
to: 'to-red-600',
|
||||
ring: 'ring-red-100',
|
||||
text: 'text-red-600',
|
||||
bg: 'bg-red-50',
|
||||
border: 'border-red-200'
|
||||
},
|
||||
{
|
||||
num: '2',
|
||||
name: '二级 · 一般告警',
|
||||
timing: '实时推送',
|
||||
desc: '短信、小程序与 PC 端三通道同步推送，匹配日常处置流程，确保及时处置。',
|
||||
active: [false, true, true, true, false],
|
||||
from: 'from-amber-400',
|
||||
to: 'to-amber-500',
|
||||
ring: 'ring-amber-100',
|
||||
text: 'text-amber-600',
|
||||
bg: 'bg-amber-50',
|
||||
border: 'border-amber-200'
|
||||
},
|
||||
{
|
||||
num: '3',
|
||||
name: '三级 · 提示告警',
|
||||
timing: '系统留痕',
|
||||
desc: '小程序与 PC 端推送，事件全链路留痕，统计分析便于复盘与考核。',
|
||||
active: [false, false, true, true, false],
|
||||
from: 'from-blue-500',
|
||||
to: 'to-blue-600',
|
||||
ring: 'ring-blue-100',
|
||||
text: 'text-blue-600',
|
||||
bg: 'bg-blue-50',
|
||||
border: 'border-blue-200'
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<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 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-blue-600">基础支撑</span>三大核心能力
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full shadow-sm shadow-blue-200"></div>
|
||||
<p class="text-gray-600 mt-6 max-w-2xl mx-auto">为街道、社区、物业各级角色提供从可视化中心、协同管理到分级告警的全链路底层能力。</p>
|
||||
</div>
|
||||
|
||||
<!-- 能力 1：可视化中心大屏 -->
|
||||
<article class="bg-white rounded-3xl border border-blue-100 shadow-sm p-5 md:p-8 mb-6">
|
||||
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide mb-3">
|
||||
<i class="fa fa-tv"></i>
|
||||
<span>能力一</span>
|
||||
</p>
|
||||
<h4 class="text-2xl font-black text-gray-900 mb-2">可视化中心大屏</h4>
|
||||
<p class="text-base text-gray-600 leading-relaxed md:max-w-2xl">
|
||||
双版本可视化大屏，街道版聚焦全域态势一屏掌控，社区版聚焦精细化管理一键处置。
|
||||
</p>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-3 shrink-0 bg-blue-50 border border-blue-100 rounded-2xl px-4 py-3">
|
||||
<div class="flex -space-x-1">
|
||||
<div class="w-9 h-9 rounded-lg bg-blue-600 text-white flex items-center justify-center border-2 border-white shadow-sm">
|
||||
<i class="fa fa-tv"></i>
|
||||
</div>
|
||||
<div class="w-9 h-9 rounded-lg bg-blue-500 text-white flex items-center justify-center border-2 border-white shadow-sm">
|
||||
<i class="fa fa-desktop"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-black text-blue-700 leading-none">双版本协同</p>
|
||||
<p class="text-[11px] text-gray-500 mt-1">街道 + 社区</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<!-- 街道版 -->
|
||||
<div class="rounded-2xl bg-white border border-slate-200 ring-4 ring-blue-100 overflow-hidden hover:shadow-lg transition-all duration-300">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-blue-600 p-4 flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur flex items-center justify-center shrink-0 border border-white/30">
|
||||
<i class="fa fa-globe text-2xl text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-white font-black text-lg leading-tight">街道版</p>
|
||||
<p class="text-white/85 text-xs font-bold mt-0.5 tracking-wide">
|
||||
<i class="fa fa-arrows-alt mr-1"></i>全域态势 · 一屏掌控
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<p class="text-base text-gray-600 leading-relaxed mb-4">呈现全域地图，标注各社区安全状态、实时告警与设备资产，一屏掌握街道全域安全态势。</p>
|
||||
<p class="text-xs font-black text-gray-400 tracking-wider mb-3">核心模块</p>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="rounded-xl bg-blue-50 border border-blue-100 p-3 flex items-center gap-2">
|
||||
<i class="fa fa-map-marker text-blue-600 text-lg w-5 text-center"></i>
|
||||
<span class="text-sm font-bold text-gray-800">全域地图</span>
|
||||
</div>
|
||||
<div class="rounded-xl bg-blue-50 border border-blue-100 p-3 flex items-center gap-2">
|
||||
<i class="fa fa-bell text-blue-600 text-lg w-5 text-center"></i>
|
||||
<span class="text-sm font-bold text-gray-800">实时告警</span>
|
||||
</div>
|
||||
<div class="rounded-xl bg-blue-50 border border-blue-100 p-3 flex items-center gap-2">
|
||||
<i class="fa fa-server text-blue-600 text-lg w-5 text-center"></i>
|
||||
<span class="text-sm font-bold text-gray-800">设备资产</span>
|
||||
</div>
|
||||
<div class="rounded-xl bg-blue-50 border border-blue-100 p-3 flex items-center gap-2">
|
||||
<i class="fa fa-pie-chart text-blue-600 text-lg w-5 text-center"></i>
|
||||
<span class="text-sm font-bold text-gray-800">辖区考核</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 社区版 -->
|
||||
<div class="rounded-2xl bg-white border border-slate-200 ring-4 ring-blue-100 overflow-hidden hover:shadow-lg transition-all duration-300">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-blue-600 p-4 flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur flex items-center justify-center shrink-0 border border-white/30">
|
||||
<i class="fa fa-building text-2xl text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-white font-black text-lg leading-tight">社区版</p>
|
||||
<p class="text-white/85 text-xs font-bold mt-0.5 tracking-wide">
|
||||
<i class="fa fa-crosshairs mr-1"></i>精细管理 · 一键处置
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<p class="text-base text-gray-600 leading-relaxed mb-4">聚焦单社区管理，展示设备点位、巡检任务与待办事项，告警事件自动弹窗辅助处置。</p>
|
||||
<p class="text-xs font-black text-gray-400 tracking-wider mb-3">核心模块</p>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="rounded-xl bg-blue-50 border border-blue-100 p-3 flex items-center gap-2">
|
||||
<i class="fa fa-dot-circle-o text-blue-600 text-lg w-5 text-center"></i>
|
||||
<span class="text-sm font-bold text-gray-800">设备点位</span>
|
||||
</div>
|
||||
<div class="rounded-xl bg-blue-50 border border-blue-100 p-3 flex items-center gap-2">
|
||||
<i class="fa fa-tasks text-blue-600 text-lg w-5 text-center"></i>
|
||||
<span class="text-sm font-bold text-gray-800">巡检任务</span>
|
||||
</div>
|
||||
<div class="rounded-xl bg-blue-50 border border-blue-100 p-3 flex items-center gap-2">
|
||||
<i class="fa fa-list-alt text-blue-600 text-lg w-5 text-center"></i>
|
||||
<span class="text-sm font-bold text-gray-800">待办事项</span>
|
||||
</div>
|
||||
<div class="rounded-xl bg-blue-50 border border-blue-100 p-3 flex items-center gap-2">
|
||||
<i class="fa fa-window-restore text-blue-600 text-lg w-5 text-center"></i>
|
||||
<span class="text-sm font-bold text-gray-800">告警弹窗</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 能力 2：多端管理系统 -->
|
||||
<article class="bg-white rounded-3xl border border-blue-100 shadow-sm p-5 md:p-8 mb-6">
|
||||
<div class="flex flex-col gap-4 mb-6">
|
||||
<p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide w-fit">
|
||||
<i class="fa fa-th-large"></i>
|
||||
<span>能力二</span>
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="text-2xl font-black text-gray-900 mb-2">多端管理系统</h4>
|
||||
<p class="text-sm text-gray-600 leading-relaxed max-w-3xl">
|
||||
适配街道 / 社区 / 物业 / 巡检员三级角色，按角色配置专属端侧与功能，分级授权、多端协同，打通任务下发-执行-反馈的全流程闭环。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
{roles.map((role) => (
|
||||
<div class="rounded-2xl border border-slate-200 bg-slate-50 overflow-hidden hover:shadow-lg transition-all duration-300">
|
||||
<div class="aspect-[16/10] bg-white overflow-hidden">
|
||||
<img src={role.img} alt={role.title} class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<p class="font-black text-gray-900">{role.title}</p>
|
||||
<span class="text-[11px] font-bold text-blue-700 bg-blue-100 px-2 py-0.5 rounded-full">{role.channel}</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">{role.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 能力 3：消息管理与实时告警 -->
|
||||
<article class="bg-white rounded-3xl border border-blue-100 shadow-sm p-5 md:p-8">
|
||||
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide mb-3">
|
||||
<i class="fa fa-bell"></i>
|
||||
<span>能力三</span>
|
||||
</p>
|
||||
<h4 class="text-2xl font-black text-gray-900 mb-2">消息管理与实时告警</h4>
|
||||
<p class="text-sm text-gray-600 leading-relaxed md:max-w-2xl">
|
||||
按严重程度划分一/二/三级告警，匹配街道应急响应流程，多渠道精准推送保障告警无漏接，未按时处置自动升级提醒。
|
||||
</p>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-2 text-xs text-gray-500 shrink-0">
|
||||
<i class="fa fa-arrow-right text-blue-500"></i>
|
||||
<span>告警严重程度递减</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{alerts.map((a) => (
|
||||
<div class={`relative rounded-2xl bg-white border border-slate-200 ring-4 ${a.ring} overflow-hidden hover:shadow-lg transition-all duration-300`}>
|
||||
<div class={`bg-gradient-to-br ${a.from} ${a.to} p-4 flex items-center gap-3`}>
|
||||
<div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur flex items-center justify-center shrink-0 border border-white/30">
|
||||
<span class="text-2xl font-black text-white leading-none">{a.num}</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-white font-black text-base leading-tight">{a.name}</p>
|
||||
<p class="text-white/85 text-[11px] font-bold mt-0.5 tracking-wide">
|
||||
<i class="fa fa-clock-o mr-1"></i>{a.timing}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm text-gray-600 leading-relaxed mb-3">{a.desc}</p>
|
||||
<p class="text-[11px] font-bold text-gray-400 tracking-wider mb-2">推送渠道</p>
|
||||
<div class="grid grid-cols-5 gap-1.5">
|
||||
{channels.map((ch, i) => (
|
||||
<div class={`flex flex-col items-center justify-center gap-1 rounded-lg border py-2 px-1 transition-all ${
|
||||
a.active[i]
|
||||
? `${a.bg} ${a.border} ${a.text}`
|
||||
: 'bg-slate-50 border-dashed border-slate-200 text-slate-300'
|
||||
}`}>
|
||||
<i class={`fa ${ch.icon} text-sm`}></i>
|
||||
<span class="text-[10px] font-bold leading-none whitespace-nowrap">{ch.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
</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-xs font-bold tracking-wide">
|
||||
<i class="fa fa-building-o"></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-base 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-sm">全域可视</div>
|
||||
<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-sm">统一告警</div>
|
||||
<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-sm">闭环处置</div>
|
||||
<div class="bg-blue-600 text-white text-center py-2.5 rounded-xl font-bold text-sm">三级协同</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/property/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-sm md:text-base">实现街道全域安全态势一屏掌控、辖区安全数据实时汇聚，支撑统一指挥调度与精细化考核，让街道统筹有抓手、社区管理有数据。</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-sm md:text-base">小程序接收任务、上传巡检记录、实时处置告警隐患，把繁杂的纸面流程变成口袋里的一站式工作台，降低重复劳动与隐性成本。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
const painPoints = [
|
||||
{
|
||||
icon: 'fa-cny',
|
||||
title: '人工成本高',
|
||||
subtitle: '重复劳动，效率低下',
|
||||
points: ['重复劳动严重', '巡检覆盖有限', '隐性成本攀升']
|
||||
},
|
||||
{
|
||||
icon: 'fa-users',
|
||||
title: '人员管理分散',
|
||||
subtitle: '档案不一，考核困难',
|
||||
points: ['档案不统一', '状态难掌握', '考核无依据']
|
||||
},
|
||||
{
|
||||
icon: 'fa-wrench',
|
||||
title: '老旧小区隐患',
|
||||
subtitle: '设施老化，漏检率高',
|
||||
points: ['基础设施老化', '人工巡检盲区', '风险难以防控']
|
||||
},
|
||||
{
|
||||
icon: 'fa-comments',
|
||||
title: '物业协同低',
|
||||
subtitle: '信息不畅，闭环难追',
|
||||
points: ['沟通渠道单一', '指令传达滞后', '闭环管理缺失']
|
||||
},
|
||||
{
|
||||
icon: 'fa-bell',
|
||||
title: '应急响应不及时',
|
||||
subtitle: '调度困难，支撑不足',
|
||||
points: ['社区分布分散', '数据支撑缺失', '联动机制不畅']
|
||||
},
|
||||
{
|
||||
icon: 'fa-cubes',
|
||||
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 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
<span class="text-blue-600">物业楼宇</span>六大管理痛点
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full shadow-sm shadow-blue-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{painPoints.map((item, idx) => (
|
||||
<article class="group relative bg-white rounded-3xl border border-slate-200 p-6 md:p-7 hover:shadow-xl hover:border-blue-200 hover:-translate-y-0.5 transition-all duration-300 flex flex-col overflow-hidden">
|
||||
<span class="pointer-events-none absolute -top-3 -right-2 text-[110px] font-black text-blue-100/80 leading-none select-none group-hover:text-blue-200/80 transition-colors duration-300">{String(idx + 1).padStart(2, '0')}</span>
|
||||
|
||||
<div class="relative flex items-center gap-4 mb-5">
|
||||
<div class="shrink-0 w-14 h-14 rounded-2xl bg-blue-500 text-white flex items-center justify-center shadow-lg shadow-blue-200 group-hover:scale-105 transition-transform duration-300">
|
||||
<i class={`fa ${item.icon} text-[30px] leading-none`}></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="text-2xl md:text-[26px] font-black text-gray-900 leading-tight">{item.title}</h4>
|
||||
<p class="text-sm font-bold text-blue-700 tracking-wide mt-1">{item.subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative h-px bg-gradient-to-r from-blue-200 via-blue-100 to-transparent mb-5"></div>
|
||||
|
||||
<ul class="relative space-y-3 flex-1">
|
||||
{item.points.map((p) => (
|
||||
<li class="flex items-center gap-3 text-base">
|
||||
<span class="shrink-0 w-1.5 h-1.5 rounded-full bg-blue-500"></span>
|
||||
<span class="text-gray-700 font-medium">{p}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,224 @@
|
||||
---
|
||||
const scenarios = [
|
||||
{
|
||||
title: '电气火灾监测',
|
||||
icon: 'fa-bolt',
|
||||
desc: '在老旧小区单元楼总配电房部署电气监测传感器，实时采集电流、温度、漏电值，超阈值自动告警。',
|
||||
value: '从源头规避电气火灾，提升老旧小区电气安全防护能力'
|
||||
},
|
||||
{
|
||||
title: '可燃气体监测',
|
||||
icon: 'fa-fire',
|
||||
desc: '部署可燃气体传感器，实时监测燃气浓度，超标时自动联动切断阀门并向社区与街道推送告警。',
|
||||
value: '防控燃气泄漏风险，提升沿街商铺燃气安全管理'
|
||||
},
|
||||
{
|
||||
title: '消防水监测',
|
||||
icon: 'fa-tint',
|
||||
desc: '消防栓末端安装无线压力表、水箱部署无线液位表，全程监测消防供水状态，异常即预警。',
|
||||
value: '消除"无水可用"隐患，强化小区消防应急保障'
|
||||
},
|
||||
{
|
||||
title: '吸气式感烟监测',
|
||||
icon: 'fa-cloud',
|
||||
desc: '面向高配房、仓库等重点区域部署吸气式感烟探测器，24 小时主动监测，火情秒级预警。',
|
||||
value: '实现火灾早期精准预警，从源头遏制火情蔓延'
|
||||
},
|
||||
{
|
||||
title: '可视化烟感监测',
|
||||
icon: 'fa-camera',
|
||||
desc: '公共区域、配套用房、地下区域部署可视化烟感，告警时同步联动视频抓拍与录像，可视化取证。',
|
||||
value: '隐患早发现 + 可视化取证，提升消防管控精准度'
|
||||
},
|
||||
{
|
||||
title: '高空抛物监测',
|
||||
icon: 'fa-binoculars',
|
||||
desc: '全域部署专用摄像机，AI 抛物检测算法精准识别行为，过滤飞鸟落叶干扰，记录抛物轨迹。',
|
||||
value: '固定完整证据链助力溯源处置，守护小区高空安全'
|
||||
},
|
||||
{
|
||||
title: '梯控管理',
|
||||
icon: 'fa-arrows-v',
|
||||
desc: 'AI 电动车精准识别算法实时监测电梯内车辆进入，触发语音警告并联动梯门管控、推送物业。',
|
||||
value: '杜绝电动车入梯隐患，筑牢小区乘梯安全防线'
|
||||
},
|
||||
{
|
||||
title: '电动车喷淋灭火',
|
||||
icon: 'fa-shield',
|
||||
desc: '专用停放区部署热成像 + 泡沫喷淋系统，秒级触发告警，10 秒内启动喷淋灭火并推送巡检员。',
|
||||
value: '快速遏制车辆火情，规避火灾扩大风险'
|
||||
}
|
||||
];
|
||||
|
||||
const highaltitudeSteps = [
|
||||
{
|
||||
step: '01',
|
||||
title: '认清危害',
|
||||
desc: '小至易拉罐、鸡蛋，从 15 楼以上抛下足以致人重伤甚至死亡，传统物业难以追责。',
|
||||
tag: '问题源头'
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: 'AI 实时识别告警',
|
||||
desc: '专用摄像机内置 AI 抛物检测算法，过滤飞鸟、落叶等干扰物，事件秒级告警推送。',
|
||||
tag: '智能识别'
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: '抛物轨迹自动还原',
|
||||
desc: '画面叠加抛物轨迹，自动定位起始楼层与窗口，关键画面与全过程视频留痕取证。',
|
||||
tag: '取证溯源'
|
||||
}
|
||||
];
|
||||
|
||||
const feature = [
|
||||
{
|
||||
title: '梯控管理',
|
||||
subtitle: '电动车入梯精准识别',
|
||||
img: '/img/property/scenario-elevator.webp',
|
||||
icon: 'fa-arrows-v',
|
||||
tag: 'AI 视觉',
|
||||
bullets: [
|
||||
'AI 算法实时识别电动车进入电梯',
|
||||
'自动语音警告 + 联动梯门不关闭',
|
||||
'告警同步推送物业端形成监管闭环'
|
||||
],
|
||||
value: '杜绝电动车入梯隐患'
|
||||
},
|
||||
{
|
||||
title: '电动车喷淋灭火系统',
|
||||
subtitle: '热成像 + 泡沫喷淋秒级响应',
|
||||
img: '/img/property/scenario-ebike.webp',
|
||||
icon: 'fa-shield',
|
||||
tag: '主动灭火',
|
||||
bullets: [
|
||||
'热成像 24 小时不间断监测车辆温度',
|
||||
'起火秒级触发告警 + 10 秒启动喷淋',
|
||||
'告警同步推送巡检员形成闭环管控'
|
||||
],
|
||||
value: '快速遏制火情控制初期'
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<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 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h3 class="text-3xl md:text-5xl font-black tracking-tight leading-tight mt-5">
|
||||
八大<span class="text-blue-600">场景应用</span>覆盖全周期安全
|
||||
</h3>
|
||||
<div class="w-24 h-1.5 bg-blue-600 mx-auto mt-8 rounded-full shadow-sm shadow-blue-200"></div>
|
||||
<p class="text-gray-600 mt-6 max-w-2xl mx-auto">围绕老旧小区改造、公共区域监管、重点设施防护，构建覆盖事前预防、事中告警、事后取证的全周期场景能力。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-16">
|
||||
{scenarios.map((item) => (
|
||||
<article class="group bg-slate-50 rounded-3xl border border-blue-100 p-5 md:p-6 hover:shadow-lg hover:border-blue-200 transition-all duration-300 flex flex-col">
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-600 text-white flex items-center justify-center mb-4 shadow-sm group-hover:scale-105 transition-transform duration-300">
|
||||
<i class={`fa ${item.icon} text-xl`}></i>
|
||||
</div>
|
||||
<h4 class="text-lg font-black text-gray-900 mb-2 leading-snug">{item.title}</h4>
|
||||
<p class="text-sm text-gray-600 leading-relaxed mb-4 flex-1">{item.desc}</p>
|
||||
<div class="border-t border-blue-100 pt-3 mt-auto">
|
||||
<p class="text-xs font-bold text-blue-700 leading-relaxed">{item.value}</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- 重点场景实景：高空抛物 case study -->
|
||||
<div class="text-center mb-10 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-100/50 blur-3xl rounded-full -z-10"></div>
|
||||
<h4 class="text-2xl md:text-4xl font-black tracking-tight leading-tight mt-4">
|
||||
重点场景<span class="text-blue-600">实景展示</span>
|
||||
</h4>
|
||||
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-6 rounded-full shadow-sm shadow-blue-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- 高空抛物：浅色主题，文字为主、图片为辅 -->
|
||||
<article class="bg-slate-50 rounded-3xl border border-blue-100 p-5 md:p-8 mb-6">
|
||||
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide mb-3">
|
||||
<i class="fa fa-binoculars"></i>
|
||||
<span>专题方案 · 高空安全</span>
|
||||
</p>
|
||||
<h5 class="text-2xl md:text-3xl font-black text-gray-900 tracking-tight leading-tight mb-2">高空抛物全链路监测</h5>
|
||||
<p class="text-sm text-gray-600 leading-relaxed max-w-2xl">从隐患识别、智能告警到轨迹还原的三步闭环，AI 算法精准过滤干扰物，为物业及警方提供完整证据链。</p>
|
||||
</div>
|
||||
<div class="flex gap-5 md:gap-6 shrink-0">
|
||||
<div class="text-center">
|
||||
<p class="text-2xl md:text-3xl font-black text-blue-600">3 步</p>
|
||||
<p class="text-[11px] text-gray-500 mt-0.5">完整证据链</p>
|
||||
</div>
|
||||
<div class="w-px bg-blue-100"></div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl md:text-3xl font-black text-blue-600">秒级</p>
|
||||
<p class="text-[11px] text-gray-500 mt-0.5">事件告警</p>
|
||||
</div>
|
||||
<div class="w-px bg-blue-100"></div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl md:text-3xl font-black text-blue-600">AI</p>
|
||||
<p class="text-[11px] text-gray-500 mt-0.5">智能过滤</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5">
|
||||
{highaltitudeSteps.map((s, i) => (
|
||||
<div class="relative bg-white rounded-2xl border border-slate-200 p-5 md:p-6 hover:shadow-lg hover:border-blue-200 transition-all duration-300">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-blue-600 text-white text-sm font-black tracking-wider">{s.step}</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-md bg-blue-50 text-blue-700 text-[11px] font-bold border border-blue-100">{s.tag}</span>
|
||||
</div>
|
||||
<h6 class="text-lg font-black text-gray-900 mb-2">{s.title}</h6>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">{s.desc}</p>
|
||||
{i < highaltitudeSteps.length - 1 && (
|
||||
<div class="hidden md:flex absolute -right-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-blue-600 items-center justify-center text-white text-xs z-10 shadow">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 梯控 / 电动车喷淋：横向 feature card，图片缩略 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{feature.map((f) => (
|
||||
<article class="group bg-white rounded-3xl border border-slate-200 p-5 hover:shadow-xl hover:border-blue-200 transition-all duration-300">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
|
||||
<i class={`fa ${f.icon} text-lg`}></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h5 class="text-lg font-black text-gray-900 leading-tight">{f.title}</h5>
|
||||
<p class="text-xs font-bold text-blue-600 tracking-wide mt-0.5">{f.subtitle}</p>
|
||||
</div>
|
||||
<span class="bg-blue-50 text-blue-700 border border-blue-100 text-[11px] font-black px-2 py-1 rounded-md shrink-0">{f.tag}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<div class="shrink-0 w-32 sm:w-36 rounded-xl overflow-hidden border border-slate-100 bg-slate-50 self-start">
|
||||
<img src={f.img} alt={f.title} class="w-full h-auto block" />
|
||||
</div>
|
||||
<ul class="space-y-2 flex-1">
|
||||
{f.bullets.map((b) => (
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fa fa-check text-blue-500 mt-1 text-xs shrink-0"></i>
|
||||
<span class="text-sm text-gray-600 leading-relaxed">{b}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-slate-100 pt-3 mt-4 flex items-center gap-2">
|
||||
<i class="fa fa-shield text-blue-500"></i>
|
||||
<span class="text-xs font-bold text-blue-700">{f.value}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
+69
-33
@@ -9,6 +9,7 @@ interface NavChild {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: string;
|
||||
desc?: string;
|
||||
}
|
||||
|
||||
interface NavItem {
|
||||
@@ -24,11 +25,16 @@ const navItems: NavItem[] = [
|
||||
{
|
||||
id: 'products', label: '产品中心', href: '/qazk', icon: 'fa-cubes',
|
||||
children: [
|
||||
{ id: 'qazk', label: '工贸企业', href: '/qazk', icon: 'fa-cogs' },
|
||||
{ id: 'elderly', label: '智慧养老', href: '/elderly', icon: 'fa-heartbeat' },
|
||||
{ id: 'construction', label: '智慧工地', href: '/construction', icon: 'fa-industry' },
|
||||
{ id: 'kitchen', label: '明厨亮灶', href: '/kitchen', icon: 'fa-cutlery' },
|
||||
{ id: 'education', label: '智慧学校', href: '/education', icon: 'fa-graduation-cap' },
|
||||
{ id: 'qazk', label: '工贸企业', href: '/qazk', icon: 'fa-cogs', desc: 'AI + 物联全场景安全管理' },
|
||||
{ id: 'property', label: '物业楼宇', href: '/property', icon: 'fa-building-o', desc: '智慧社区全域安防一体化' },
|
||||
{ id: 'elderly', label: '智慧养老', href: '/elderly', icon: 'fa-heartbeat', desc: '适老化主动健康守护体系' },
|
||||
{ id: 'kitchen', label: '明厨亮灶', href: '/kitchen', icon: 'fa-cutlery', desc: 'AI 视觉后厨食安管控' },
|
||||
{ id: 'education', label: '智慧学校', href: '/education', icon: 'fa-graduation-cap', desc: '平安校园数智化治理' },
|
||||
{ id: 'logistics', label: '仓储物流', href: '/logistics', icon: 'fa-truck', desc: '仓配园区全闭环安全管控' },
|
||||
{ id: 'construction', label: '智慧工地', href: '/construction', icon: 'fa-industry', desc: '工地七牌一图数智管控' },
|
||||
{ id: 'chemical', label: '危险化学品', href: '/chemical', icon: 'fa-flask', desc: '五防协同危化智能管控' },
|
||||
{ id: 'fireworks', label: '烟花爆竹', href: '/fireworks', icon: 'fa-asterisk', desc: '防爆 AI 火工品全链路溯源' },
|
||||
{ id: 'mining', label: '非煤矿山', href: '/mining', icon: 'fa-cubes', desc: '矿山防爆物联灾害预警' },
|
||||
]
|
||||
},
|
||||
{ id: 'customization', label: '本地化定制', href: '/customization', icon: 'fa-wrench' },
|
||||
@@ -42,19 +48,19 @@ function isActive(item: NavItem): boolean {
|
||||
}
|
||||
|
||||
function getNavLinkClass(item: NavItem) {
|
||||
const baseClass = 'flex items-center gap-2 px-4 py-2.5 rounded-full font-medium transition-all duration-300';
|
||||
const baseClass = 'nav-link flex items-center gap-2 px-5 py-3 rounded-full text-base font-semibold transition-all duration-300 touch-manipulation select-none';
|
||||
if (isActive(item)) {
|
||||
return `${baseClass} bg-primary text-white shadow-md`;
|
||||
}
|
||||
return `${baseClass} text-gray-600 hover:text-primary hover:bg-primary/10`;
|
||||
return `${baseClass} text-gray-600`;
|
||||
}
|
||||
|
||||
function getMobileNavLinkClass(item: NavItem) {
|
||||
const baseClass = 'flex flex-col items-center justify-center py-2 px-2 min-w-[4.5rem] rounded-xl transition-all duration-300';
|
||||
const baseClass = 'flex flex-col items-center justify-center py-2.5 px-3 min-w-[5.5rem] rounded-xl transition-all duration-300 touch-manipulation select-none';
|
||||
if (isActive(item)) {
|
||||
return `${baseClass} bg-primary text-white`;
|
||||
}
|
||||
return `${baseClass} text-gray-600 hover:bg-primary/10`;
|
||||
return `${baseClass} text-gray-600`;
|
||||
}
|
||||
---
|
||||
|
||||
@@ -81,19 +87,32 @@ function getMobileNavLinkClass(item: NavItem) {
|
||||
<span>{item.label}</span>
|
||||
<i class="fa fa-angle-down text-xs ml-0.5 transition-transform duration-200" data-dropdown-chevron></i>
|
||||
</button>
|
||||
<div class="absolute top-full left-1/2 -translate-x-1/2 pt-2 opacity-0 invisible transition-all duration-200 z-50"
|
||||
<div class="absolute top-full left-1/2 -translate-x-1/2 pt-3 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/95 backdrop-blur-xl rounded-3xl shadow-2xl shadow-slate-900/10 ring-1 ring-slate-200/70 p-3 w-[720px]">
|
||||
<div class="grid grid-cols-2 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={`menu-item group relative flex items-center gap-4 px-4 py-3.5 rounded-2xl transition-all duration-200 touch-manipulation select-none ${
|
||||
child.id === activeNav
|
||||
? 'bg-primary text-white'
|
||||
: 'text-gray-700 hover:bg-primary/10 hover:text-primary'
|
||||
? 'bg-gradient-to-br from-primary to-blue-600 text-white shadow-lg shadow-blue-500/30'
|
||||
: 'text-gray-700'
|
||||
}`}>
|
||||
<i class={`fa ${child.icon} text-xl`}></i>
|
||||
<span class="text-sm font-medium whitespace-nowrap">{child.label}</span>
|
||||
<span class={`menu-item-icon w-16 flex items-center justify-center shrink-0 transition-all duration-200 ${
|
||||
child.id === activeNav
|
||||
? 'text-white'
|
||||
: 'text-primary group-hover:scale-110'
|
||||
}`}>
|
||||
<i class={`fa ${child.icon} text-5xl`}></i>
|
||||
</span>
|
||||
<span class="flex-1 min-w-0">
|
||||
<span class="block text-base font-extrabold leading-tight tracking-tight">{child.label}</span>
|
||||
{child.desc && (
|
||||
<span class={`block text-xs font-medium mt-1 leading-snug truncate ${
|
||||
child.id === activeNav ? 'text-blue-50/90' : 'text-gray-500'
|
||||
}`}>{child.desc}</span>
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
@@ -132,19 +151,19 @@ function getMobileNavLinkClass(item: NavItem) {
|
||||
class={getMobileNavLinkClass(item)}
|
||||
aria-haspopup="true" aria-expanded="false"
|
||||
data-mobile-dropdown-trigger>
|
||||
<i class={`fa ${item.icon} text-lg mb-1`}></i>
|
||||
<span class="text-xs font-medium whitespace-nowrap">{item.label}</span>
|
||||
<i class={`fa ${item.icon} text-xl mb-1`}></i>
|
||||
<span class="text-sm font-semibold whitespace-nowrap">{item.label}</span>
|
||||
</button>
|
||||
) : (
|
||||
<a href={item.href} class={getMobileNavLinkClass(item)}>
|
||||
<i class={`fa ${item.icon} text-lg mb-1`}></i>
|
||||
<span class="text-xs font-medium whitespace-nowrap">{item.label}</span>
|
||||
<i class={`fa ${item.icon} text-xl mb-1`}></i>
|
||||
<span class="text-sm font-semibold whitespace-nowrap">{item.label}</span>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<a href="/#contact-info" class="flex items-center justify-center py-2 px-3 bg-primary text-white rounded-xl min-w-[3rem] ml-1">
|
||||
<i class="fa fa-phone text-lg"></i>
|
||||
<a href="/#contact-info" class="flex items-center justify-center py-2.5 px-3.5 bg-primary text-white rounded-xl min-w-[3.25rem] ml-1.5">
|
||||
<i class="fa fa-phone text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -153,16 +172,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-5 gap-1">
|
||||
<div class="max-w-lg mx-auto px-4 py-4 grid grid-cols-2 gap-3">
|
||||
{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-2 py-4 px-2 rounded-xl transition-colors touch-manipulation select-none ${
|
||||
child.id === activeNav
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'hover:bg-primary/10'
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-primary/5 text-gray-700'
|
||||
}`}>
|
||||
<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-2xl ${child.id === activeNav ? 'text-white' : 'text-primary'}`}></i>
|
||||
<span class={`text-sm font-semibold leading-tight text-center whitespace-nowrap ${child.id === activeNav ? 'text-white' : 'text-gray-700'}`}>{child.label}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
@@ -172,8 +191,8 @@ function getMobileNavLinkClass(item: NavItem) {
|
||||
<div id="mobile-product-backdrop"
|
||||
class="lg:hidden fixed inset-0 z-20 bg-black/20 opacity-0 pointer-events-none transition-opacity duration-300"></div>
|
||||
|
||||
<!-- Spacer for mobile to prevent content overlap (header 3.5rem + nav 2.5rem) -->
|
||||
<div class="lg:hidden h-[6rem] transition-all duration-300"></div>
|
||||
<!-- Spacer for mobile to prevent content overlap (header ~3.5rem + nav ~4rem) -->
|
||||
<div class="lg:hidden h-[7.5rem] transition-all duration-300"></div>
|
||||
|
||||
<slot />
|
||||
<Footer />
|
||||
@@ -188,7 +207,7 @@ function getMobileNavLinkClass(item: NavItem) {
|
||||
(function() {
|
||||
var navContainer = document.getElementById('mobile-nav-container');
|
||||
var headerRow = document.getElementById('mobile-header-row');
|
||||
var spacer = document.querySelector('.lg\\:hidden.h-\\[6rem\\]');
|
||||
var spacer = document.querySelector('.lg\\:hidden.h-\\[7\\.5rem\\]');
|
||||
var lastScrollTop = 0;
|
||||
var scrollThreshold = 50;
|
||||
|
||||
@@ -229,7 +248,7 @@ function getMobileNavLinkClass(item: NavItem) {
|
||||
}
|
||||
// Restore spacer height
|
||||
if (spacer) {
|
||||
(spacer as HTMLElement).style.height = '6rem';
|
||||
(spacer as HTMLElement).style.height = '7.5rem';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -369,6 +388,23 @@ function getMobileNavLinkClass(item: NavItem) {
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hover effects only on real pointer devices (avoid sticky hover on iPad/touch) */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.nav-link.text-gray-600:hover {
|
||||
color: var(--color-primary, #165DFF);
|
||||
background-color: rgb(22 93 255 / 0.1);
|
||||
}
|
||||
.menu-item.text-gray-700:hover {
|
||||
background-color: rgb(22 93 255 / 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
/* Active tap feedback for touch / iPad */
|
||||
.nav-link:active,
|
||||
.menu-item:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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 LogisticsHero from '../../components/sections/LogisticsHero.astro';
|
||||
import LogisticsPainPoints from '../../components/sections/LogisticsPainPoints.astro';
|
||||
import LogisticsPolicy from '../../components/sections/LogisticsPolicy.astro';
|
||||
import LogisticsArchitecture from '../../components/sections/LogisticsArchitecture.astro';
|
||||
import LogisticsHardware from '../../components/sections/LogisticsHardware.astro';
|
||||
---
|
||||
|
||||
<Layout title="仓储物流 - 浙江贝凡网络科技" activeNav="logistics">
|
||||
<main class="pt-20">
|
||||
<LogisticsHero />
|
||||
<LogisticsPainPoints />
|
||||
<LogisticsPolicy />
|
||||
<LogisticsArchitecture />
|
||||
<LogisticsHardware />
|
||||
</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>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import PropertyHero from '../../components/sections/PropertyHero.astro';
|
||||
import PropertyPainPoints from '../../components/sections/PropertyPainPoints.astro';
|
||||
import PropertyArchitecture from '../../components/sections/PropertyArchitecture.astro';
|
||||
import PropertyFoundation from '../../components/sections/PropertyFoundation.astro';
|
||||
import PropertyScenarios from '../../components/sections/PropertyScenarios.astro';
|
||||
---
|
||||
|
||||
<Layout title="物业楼宇 - 浙江贝凡网络科技" activeNav="property">
|
||||
<main class="pt-20">
|
||||
<PropertyHero />
|
||||
<PropertyPainPoints />
|
||||
<PropertyArchitecture />
|
||||
<PropertyFoundation />
|
||||
<PropertyScenarios />
|
||||
</main>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user