Files
company-website/src/components/sections/ChemicalPolicy.astro
T

98 lines
4.4 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
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: '国办发〔202133号',
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>