Frudrax Cheng
119 lines
4.5 KiB
Plaintext
119 lines
4.5 KiB
Plaintext
---
|
||
const painSections = [
|
||
{
|
||
index: '痛点一',
|
||
title: '巡检模式传统，风险发现偏后',
|
||
summary: '校园日常安全巡检仍依赖人工经验，覆盖频次和标准执行不稳定，异常问题经常在事后才进入处置流程。',
|
||
items: [
|
||
{
|
||
title: '人工巡查',
|
||
desc: '依赖人员定时巡检，重点区域和高峰时段存在覆盖盲区。',
|
||
icon: '/img/education/pain-1-manual-patrol.svg'
|
||
},
|
||
{
|
||
title: '事后处置',
|
||
desc: '问题发现滞后，处置流程启动慢，风险扩散概率增加。',
|
||
icon: '/img/education/pain-1-post-response.svg'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
index: '痛点二',
|
||
title: '重点领域监管与合规压力',
|
||
summary: '关键环节监管标准执行不到位，过程记录不完整、不规范，难以满足最新政策法规与行业监管要求。',
|
||
items: [
|
||
{
|
||
title: '食品安全',
|
||
desc: '食材采购溯源难、加工过程监控缺失，存在卫生隐患。',
|
||
icon: '/img/education/pain-2-food-safety.svg'
|
||
},
|
||
{
|
||
title: '消防安防',
|
||
desc: '设施巡检不及时，隐患排查记录不规范，应急响应慢。',
|
||
icon: '/img/education/pain-2-fire-security.svg'
|
||
},
|
||
{
|
||
title: '后勤运维',
|
||
desc: '设备维护记录不全，维修流程不透明，资源浪费严重。',
|
||
icon: '/img/education/pain-2-ops-maintenance.svg'
|
||
}
|
||
],
|
||
risk: '重点环节整改不及时，可能面临监管处罚、责任追责与舆情风险。'
|
||
},
|
||
{
|
||
index: '痛点三',
|
||
title: '系统割裂，数据协同不足',
|
||
summary: '出入管理、视频监控、消防报警等系统相互独立，数据难汇聚、事件难联动，管理效率受限。',
|
||
items: [
|
||
{
|
||
title: '出入管理系统',
|
||
desc: '访客、车辆、师生进出规则分散，异常通行难以统一预警。',
|
||
icon: '/img/education/pain-3-access-control.svg'
|
||
},
|
||
{
|
||
title: '视频监控系统',
|
||
desc: '监控数据孤立，难与其他业务系统形成协同处置链路。',
|
||
icon: '/img/education/pain-3-video-surveillance.svg'
|
||
},
|
||
{
|
||
title: '消防报警系统',
|
||
desc: '告警信息无法与现场管理流程联动，闭环追踪困难。',
|
||
icon: '/img/education/pain-3-fire-alarm.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 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">
|
||
{painSections.map((section) => (
|
||
<article class="rounded-3xl border border-blue-100 bg-white/95 shadow-sm p-5 md:p-8">
|
||
<div class="flex flex-col gap-3 md:gap-4">
|
||
<h4 class="text-2xl md:text-4xl font-black text-blue-600 tracking-tight">
|
||
{section.index}：{section.title}
|
||
</h4>
|
||
<div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 md:px-6 py-4">
|
||
<p class="text-gray-700 text-base md:text-lg leading-relaxed">{section.summary}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class={`grid grid-cols-1 gap-4 mt-5 ${section.items.length === 2 ? 'md:grid-cols-2' : 'md:grid-cols-3'}`}>
|
||
{section.items.map((item) => (
|
||
<div class="rounded-2xl border border-blue-200 bg-blue-50 p-4 md:p-5">
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<div class="w-10 h-10 rounded-xl border border-blue-200 bg-white flex items-center justify-center shrink-0">
|
||
<img src={item.icon} alt={item.title} class="w-6 h-6 object-contain" />
|
||
</div>
|
||
<p class="text-xl font-black text-blue-600 leading-none">{item.title}</p>
|
||
</div>
|
||
<p class="text-gray-700 text-sm md:text-[1.05rem] leading-relaxed">{item.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{section.risk && (
|
||
<div class="mt-5 rounded-2xl border border-dashed border-blue-200 bg-blue-50/70 px-4 md:px-6 py-4 flex items-start gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-red-100 text-red-600 flex items-center justify-center shrink-0 mt-0.5">
|
||
<i class="fa fa-bell"></i>
|
||
</div>
|
||
<p class="text-gray-700 text-sm md:text-base leading-relaxed">
|
||
<span class="font-black text-blue-600 mr-1">合规风险提示：</span>{section.risk}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|