Frudrax Cheng
65 lines
2.0 KiB
Plaintext
65 lines
2.0 KiB
Plaintext
---
|
|
const painPoints = [
|
|
{
|
|
title: '餐饮单位食品安全意识差',
|
|
points: [
|
|
'从业人员良莠不齐，食安意识不强',
|
|
'经营模式混杂，管理水平参差不一',
|
|
'被监管意愿不强，不愿增加投入'
|
|
]
|
|
},
|
|
{
|
|
title: '网络餐饮线上监管不完善',
|
|
points: [
|
|
'部分商家虚拟化，无照经营',
|
|
'后厨加工过程无法直观查看',
|
|
'平台备案和监督机制不完善'
|
|
]
|
|
},
|
|
{
|
|
title: '监管部门线下监管难度大',
|
|
points: [
|
|
'企业量大面广、监管人少任务重',
|
|
'间歇性抽检，覆盖不全有疏漏',
|
|
'传统上门人工检查，耗费大效率低'
|
|
]
|
|
},
|
|
{
|
|
title: '消费者公众信任度较低',
|
|
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-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 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">
|
|
{painPoints.map((item) => (
|
|
<article class="bg-white rounded-2xl border border-slate-200 p-5 md:p-6 hover:shadow-lg transition-all duration-300">
|
|
<h4 class="text-xl font-black text-gray-900 mb-4 leading-snug">{item.title}</h4>
|
|
<ul class="space-y-2.5">
|
|
{item.points.map((point) => (
|
|
<li class="text-sm text-gray-600 leading-relaxed flex items-start gap-2">
|
|
<i class="fa fa-circle text-[8px] text-amber-500 mt-1.5"></i>
|
|
<span>{point}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|