Files
company-website/src/components/sections/Policy.astro
2026-02-09 14:12:28 +08:00

139 lines
9.2 KiB
Plaintext

---
---
<section class="px-4 lg:px-0 mt-12 bg-slate-50/50 overflow-hidden">
<div class="max-w-7xl mx-auto relative">
<div class="text-center mt-10 mb-16 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 text-gray-900 tracking-tight">
最新政策导向<br><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="mb-20">
<div class="flex items-center space-x-3 mb-10 border-l-4 border-red-600 pl-4">
<h4 class="text-2xl font-extrabold text-gray-800 tracking-tight">国家强制性安全生产标准</h4>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="group bg-white rounded-[2.5rem] p-6 border border-red-100 shadow-sm hover:shadow-2xl hover:shadow-red-500/10 transition-all duration-500 flex flex-col md:flex-row gap-8">
<div class="md:w-[45%] aspect-[21/29.7] rounded-[1.5rem] overflow-hidden shadow-md bg-slate-100 border border-gray-100">
<img src="/img/policy-1.webp" class="w-full h-full object-cover object-top group-hover:scale-110 transition-transform duration-1000" />
</div>
<div class="md:w-[55%] flex flex-col justify-center py-4">
<h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-red-600 transition-colors leading-tight">企业安全生产标准化<br>基本规范</h3>
<p class="text-base text-gray-600 leading-relaxed bg-red-50/50 p-5 rounded-2xl border-red-600 mb-4">
核心要求:全面建立并保持<span class="text-red-700 font-bold">标准化系统</span>,实现安全管理的系统化、岗位达标和规范化。
</p>
<div class="text-sm font-bold text-red-600">GB/T 33000-2016</div>
</div>
</div>
<div class="group bg-white rounded-[2.5rem] p-6 border border-red-100 shadow-sm hover:shadow-2xl hover:shadow-red-500/10 transition-all duration-500 flex flex-col md:flex-row gap-8">
<div class="md:w-[45%] aspect-[21/29.7] rounded-[1.5rem] overflow-hidden shadow-md bg-slate-100 border border-gray-100">
<img src="/img/policy-2.webp" class="w-full h-full object-cover object-top group-hover:scale-110 transition-transform duration-1000" />
</div>
<div class="md:w-[55%] flex flex-col justify-center py-4">
<h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-red-600 transition-colors leading-tight">重大火灾隐患<br>判定规则</h3>
<p class="text-base text-gray-600 leading-relaxed bg-red-50/50 p-5 rounded-2xl border-red-600 mb-4">
确立标准:统一了重大火灾隐患的<span class="text-red-700 font-bold">判定基准</span>,适用于各类建筑及公共场所的隐患界定。
</p>
<div class="text-sm font-bold text-red-600">GB 35181-2017</div>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="mb-10">
<div class="flex items-center border-l-4 border-red-600 pl-4">
<h4 class="text-2xl font-extrabold text-gray-800 tracking-tight">数字化与应急管理指引</h4>
</div>
<div class="flex md:hidden items-center space-x-2 mt-4 ml-5 text-red-600 font-bold animate-pulse">
<span class="text-base tracking-widest">向左滑动查看更多政策</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</div>
</div>
<div id="policy-hint" class="md:hidden absolute right-2 top-1/2 transform -translate-y-1/2 z-30 transition-opacity duration-500 pointer-events-none">
<div class="bg-red-600 text-white p-3 rounded-full shadow-xl animate-bounce-x">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
</div>
<div id="policy-container" class="flex md:grid md:grid-cols-3 lg:grid-cols-5 gap-6 overflow-x-auto pb-12 snap-x no-scrollbar">
<div class="min-w-[280px] md:min-w-0 snap-center group">
<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
<img src="/img/policy-3.webp" class="w-full h-full object-cover object-top" />
</div>
<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">防范电动车棚火灾事故措施</h3>
<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
应具有<span class="text-red-600 font-bold">24小时视频监控</span>,鼓励接入电气火灾监控。
</p>
<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">FIRE-001</div>
</div>
</div>
<div class="min-w-[280px] md:min-w-0 snap-center group">
<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
<img src="/img/policy-4.webp" class="w-full h-full object-cover object-top" />
</div>
<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">应急管理科技信息化任务书</h3>
<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
企业端健全监测体系,政府端<span class="text-red-600 font-bold">加强数据汇聚</span>应用。
</p>
<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">TASK-002</div>
</div>
</div>
<div class="min-w-[280px] md:min-w-0 snap-center group">
<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
<img src="/img/policy-5.webp" class="w-full h-full object-cover object-top" />
</div>
<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">餐饮业促进和管理办法</h3>
<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
落实餐饮经营者安全责任,明确<span class="text-red-600 font-bold">数字化监管</span>支持。
</p>
<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">CATER-003</div>
</div>
</div>
<div class="min-w-[280px] md:min-w-0 snap-center group">
<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
<img src="/img/policy-6.webp" class="w-full h-full object-cover object-top" />
</div>
<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">安全生产责任指导意见</h3>
<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
单位须落实责任主体,并严格执行<span class="text-red-600 font-bold">五项到位</span>要求。
</p>
<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">DUTY-004</div>
</div>
</div>
<div class="min-w-[280px] md:min-w-0 snap-center group">
<div class="bg-white rounded-[1.8rem] p-4 border border-slate-100 shadow-sm hover:shadow-xl hover:border-red-200 transition-all duration-300 flex flex-col h-full">
<div class="relative aspect-[21/29.7] w-full rounded-xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
<img src="/img/policy-7.webp" class="w-full h-full object-cover object-top" />
</div>
<h3 class="text-base font-bold text-gray-900 mb-3 line-clamp-2 leading-snug group-hover:text-red-600 transition-colors">推进新型工业数字化意见</h3>
<p class="text-[13px] text-gray-500 leading-relaxed mb-6 flex-grow border-l-2 border-red-100 pl-3">
鼓励智能化改造,符合条件单项最高获<span class="text-red-600 font-bold">100万元补助</span>。
</p>
<div class="mt-auto pt-4 border-t border-slate-50 text-[10px] text-gray-400 font-mono">SUB-005</div>
</div>
</div>
</div>
</div>
</div>