新增智慧工地页面并完善模块排版

2026-04-15 11:07:57 +08:00
parent 2420268134
commit ab8413792c
11 changed files with 246 additions and 0 deletions
@@ -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">
+						AI 识别驱动的工地安全闭环
+					</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/construction/architecture.png" alt="智慧工地系统架构图" class="w-full h-auto object-cover" />
+				</div>
+			</div>
+		</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-xs font-bold tracking-wide">
+						<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>
+					<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/construction/hero.jpg" 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,63 @@
+---
+const painPoints = [
+	{
+		title: '安全生产风险突出',
+		desc: '工地事故类型复杂、影响范围广，传统巡检难以实现全时段覆盖，隐患识别和处置常常滞后。',
+		img: '/img/construction/pain-1.png',
+		tag: '事故预防'
+	},
+	{
+		title: '环境与秩序管理压力大',
+		desc: '扬尘、噪声、泥土遗撒与现场治安事件并存，监管要求持续趋严，现场管理压力持续上升。',
+		img: '/img/construction/pain-2.png',
+		tag: '环保与治安'
+	},
+	{
+		title: '人员与车辆管理混乱',
+		desc: '人员身份核验、考勤统计和车辆调度缺少统一机制，外来人员与运输车辆难以精细化管控。',
+		img: '/img/construction/pain-3.png',
+		tag: '实名与调度'
+	},
+	{
+		title: '协同与响应效率偏低',
+		desc: '作业面分散导致信息传递链路长，突发事件中难以及时定位、联动和复盘，影响处置效率。',
+		img: '/img/construction/pain-4.png',
+		tag: '处置协同'
+	}
+];
+---
+
+<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="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>
+			</div>
+		</div>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
+			{painPoints.map((item, index) => (
+				<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>
+	</div>
+</section>
@@ -0,0 +1,89 @@
+---
+const policies = [
+	{
+		title: '房屋市政工程安全生产治本攻坚三年行动的通知',
+		meta: '建质〔2024〕27号',
+		desc: '要求构建施工安全数字化监管体系，推动人员、设备全要素协同监管和隐患闭环管理。',
+		tags: ['数字化监管', '隐患闭环', '预警体系建设']
+	},
+	{
+		title: '智能建造技术导则（试行）',
+		meta: '建办市〔2025〕14号',
+		desc: '明确智能建造全周期应用路径，推动危大工程机械化、自动化与可视化监管。',
+		tags: ['全流程数字化', '智能建造', '标准化监管']
+	},
+	{
+		title: '建筑工人实名制管理办法（试行）',
+		meta: '建市〔2019〕18号',
+		desc: '要求施工现场封闭管理与实名登记，落实人员进场培训、人脸打卡等信息化管理机制。',
+		tags: ['实名制', '封闭管理', '安全培训']
+	},
+	{
+		title: '安全生产法（2021修订）',
+		meta: '国家法律法规',
+		desc: '明确企业隐患排查治理和应急管理责任，为工地风险防控与事件处置提供法律依据。',
+		tags: ['法定责任', '隐患治理', '应急管理']
+	},
+	{
+		title: '建筑施工安全检查标准',
+		meta: 'JGJ59',
+		desc: '规范施工现场人员、设备、巡查与整改流程，支撑设备维保和分级管控的标准化执行。',
+		tags: ['行业标准', '设备维保', '分级管控']
+	}
+];
+
+const nationalPolicies = policies.slice(0, 2);
+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">
+				政策牵引落地，建设方向更清晰
+			</h3>
+		</div>
+
+		<div class="space-y-6 md:space-y-8">
+			<div>
+				<p class="text-xs font-bold text-red-700 tracking-[0.16em] mb-3">国家政策导向</p>
+				<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+					{nationalPolicies.map((item) => (
+						<article class="bg-slate-50 rounded-3xl border border-red-100 p-5 md:p-6 hover:shadow-lg transition-all duration-300 flex flex-col">
+							<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>
+			</div>
+
+			<div>
+				<p class="text-xs font-bold text-blue-700 tracking-[0.16em] mb-3">相关政策法规</p>
+				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+					{regulationPolicies.map((item) => (
+						<article class="bg-slate-50 rounded-3xl border border-slate-200 p-5 md:p-6 hover:shadow-lg transition-all duration-300 flex flex-col">
+							<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>
+			</div>
+			</div>
+		</div>
+</section>
@@ -0,0 +1,16 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import ConstructionHero from '../../components/sections/ConstructionHero.astro';
+import ConstructionPainPoints from '../../components/sections/ConstructionPainPoints.astro';
+import ConstructionPolicy from '../../components/sections/ConstructionPolicy.astro';
+import ConstructionArchitecture from '../../components/sections/ConstructionArchitecture.astro';
+---
+
+<Layout title="智慧工地 - 浙江贝凡网络科技" activeNav="construction">
+	<main class="pt-20">
+		<ConstructionHero />
+		<ConstructionPainPoints />
+		<ConstructionPolicy />
+		<ConstructionArchitecture />
+	</main>
+</Layout>