178 lines
9.2 KiB
Plaintext
178 lines
9.2 KiB
Plaintext
<section class="py-16 md:py-24 bg-slate-50 overflow-hidden">
|
||
<div class="max-w-7xl mx-auto space-y-24 px-4 lg:px-0">
|
||
|
||
<style>
|
||
@keyframes float {
|
||
0% {
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0px);
|
||
}
|
||
}
|
||
|
||
.animate-float {
|
||
animation: float 4s ease-in-out infinite;
|
||
}
|
||
|
||
.text-gradient-gold {
|
||
background: linear-gradient(135deg, #fff 0%, #ffd700 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
</style>
|
||
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="relative flex flex-col md:flex-row md:items-center mb-10 md:mb-14 px-3 md:px-0">
|
||
<div class="absolute left-0 w-full h-16 md:h-14 bg-blue-50/50 -z-10 rounded-r-full"></div>
|
||
|
||
<div class="flex items-start md:items-center">
|
||
<div class="w-2.5 h-12 md:h-12 bg-blue-600 rounded-full shadow-[4px_0_12px_rgba(37,99,235,0.4)] flex-shrink-0 mt-1 md:mt-0"></div>
|
||
|
||
<div class="ml-4 flex flex-col md:flex-row md:items-center gap-2 md:gap-6">
|
||
|
||
<div class="flex items-center">
|
||
<div class="relative flex items-center justify-center">
|
||
<span class="absolute -top-4 -left-2 text-5xl md:text-5xl font-black text-blue-600/10 select-none">01</span>
|
||
|
||
<div class="flex items-center">
|
||
<span class="text-blue-600 font-black text-xl md:text-2xl tracking-tight">核心业务</span>
|
||
<span class="flex items-center justify-center bg-blue-600 text-white w-9 h-9 md:w-10 md:h-10 rounded-xl shadow-md shadow-blue-200 text-xl md:text-2xl font-black mx-2">
|
||
1
|
||
</span>
|
||
<span class="text-blue-600 font-black text-xl md:text-2xl tracking-tight">：</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-col justify-center">
|
||
<h3 class="text-2xl md:text-3xl font-black text-gray-900 tracking-tight leading-none">
|
||
SaaS化系统
|
||
</h3>
|
||
<div class="flex items-center gap-2 mt-1.5">
|
||
<span class="h-1 w-5 bg-blue-600 rounded-full"></span>
|
||
<span class="text-xs md:text-xs text-blue-500 font-bold uppercase tracking-[0.1em] md:tracking-[0.2em] leading-none">
|
||
Cloud Intelligence System
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white p-4 md:p-10 rounded-3xl shadow-2xl border border-blue-100 transition-all duration-500">
|
||
|
||
<div class="flex flex-col md:flex-row items-center gap-8 md:gap-16 mb-12">
|
||
<div class="md:w-5/12 w-[85%] relative">
|
||
<div class="absolute -inset-4 bg-blue-400/10 blur-3xl rounded-full"></div>
|
||
<div class="animate-float relative overflow-hidden rounded-2xl shadow-[0_20px_50px_rgba(8,_112,_184,_0.2)] border border-white">
|
||
<img src="/img/banner.webp" alt="企安智控 AI" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="md:w-7/12 w-full text-center md:text-left">
|
||
<div class="flex items-center md:justify-start justify-center mb-4">
|
||
<img src="/img/qazk-logo.png" alt="企安智控 LOGO" class="h-14 md:h-18 w-auto mr-3">
|
||
<h1 class="text-3xl md:text-4xl font-extrabold text-gray-900 tracking-tight">企安智控</h1>
|
||
</div>
|
||
<p class="text-sm md:text-base text-gray-500 mb-6 border-b border-gray-100 pb-4 inline-block">由浙江贝凡网络科技提供云和AI服务</p>
|
||
<p class="text-gray-700 text-lg md:text-xl leading-relaxed">
|
||
<strong class="text-blue-600 font-extrabold">企安智控</strong>由浙江贝凡科技自主研发，专注于为全国生产工贸型企业、园区楼宇、酒店餐饮等场景提供<strong class="text-blue-600 font-extrabold">智能安全管理解决方案</strong>。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-10 mb-8 items-stretch">
|
||
<div class="flex flex-col p-6 md:p-8 bg-blue-50 rounded-2xl border-2 border-blue-100 shadow-sm hover:shadow-lg hover:shadow-blue-200/40 transition-all">
|
||
<div class="flex-1">
|
||
<p class="text-base md:text-lg text-gray-900 font-bold mb-4 flex items-center gap-2">
|
||
<span class="w-1.5 h-5 bg-blue-600 rounded-full"></span>
|
||
系统为企业赋能：
|
||
</p>
|
||
|
||
<div class="grid grid-cols-4 gap-3 mb-6">
|
||
<div class="flex flex-col items-center justify-center py-4 bg-indigo-600 rounded-xl shadow-md border border-indigo-700">
|
||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
|
||
<rect x="9" y="9" width="6" height="6"></rect>
|
||
<line x1="9" y1="1" x2="9" y2="4"></line>
|
||
<line x1="15" y1="1" x2="15" y2="4"></line>
|
||
</svg>
|
||
<span class="text-sm font-bold text-white">AI算法</span>
|
||
</div>
|
||
<div class="flex flex-col items-center justify-center py-4 bg-indigo-600 rounded-xl shadow-md border border-indigo-700">
|
||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
|
||
<line x1="12" y1="18" x2="12.01" y2="18"></line>
|
||
</svg>
|
||
<span class="text-sm font-bold text-white">多端联动</span>
|
||
</div>
|
||
<div class="flex flex-col items-center justify-center py-4 bg-indigo-600 rounded-xl shadow-md border border-indigo-700">
|
||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||
</svg>
|
||
<span class="text-sm font-bold text-white">秒级预警</span>
|
||
</div>
|
||
<div class="flex flex-col items-center justify-center py-4 bg-indigo-600 rounded-xl shadow-md border border-indigo-700">
|
||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||
</svg>
|
||
<span class="text-sm font-bold text-white">硬件物联</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-3 mb-6">
|
||
<div class="flex items-center justify-center py-3.5 bg-blue-600 text-white text-sm md:text-base font-black rounded-xl shadow-md">多模态协同</div>
|
||
<div class="flex items-center justify-center py-3.5 bg-blue-600 text-white text-sm md:text-base font-black rounded-xl shadow-md">全流程管控</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-[14px] md:text-base text-blue-900 leading-relaxed border-t border-blue-100 pt-4 font-bold text-center md:text-left min-h-[4.5rem] flex items-center">
|
||
实现隐患排查自动化、履职考核标准化，全面提升企业安全水平
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flex flex-col p-6 md:p-8 bg-red-50 rounded-2xl border-2 border-red-200 shadow-sm hover:shadow-lg hover:shadow-red-200/40 transition-all">
|
||
<div class="flex-1">
|
||
<p class="text-base md:text-lg text-gray-900 font-bold mb-4 flex items-center gap-2">
|
||
<span class="w-1.5 h-5 bg-red-600 rounded-full"></span>
|
||
系统辅助各监管部门构建：
|
||
</p>
|
||
|
||
<div class="grid grid-cols-2 gap-3 mb-6">
|
||
<div class="flex flex-col items-center justify-center py-4 bg-red-500 text-white rounded-xl shadow-md border border-red-800 transition-all">
|
||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
|
||
<path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
|
||
<path d="M22 12A10 10 0 0 0 12 2v10z"></path>
|
||
</svg>
|
||
<span class="text-sm font-bold tracking-wider">数据驱动</span>
|
||
</div>
|
||
<div class="flex flex-col items-center justify-center py-4 bg-red-500 text-white rounded-xl shadow-md border border-red-800 transition-all">
|
||
<svg class="w-6 h-6 text-white mb-2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
|
||
<path d="M23 7l-7 5 7 5V7z"></path>
|
||
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
||
</svg>
|
||
<span class="text-sm font-bold tracking-wider">远程监管</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-3 gap-2 mb-6">
|
||
<div class="flex items-center justify-center py-3.5 bg-red-700 text-white text-sm md:text-base font-black rounded-xl shadow-md">事前预警</div>
|
||
<div class="flex items-center justify-center py-3.5 bg-red-700 text-white text-sm md:text-base font-black rounded-xl shadow-md">事中干预</div>
|
||
<div class="flex items-center justify-center py-3.5 bg-red-700 text-white text-sm md:text-base font-black rounded-xl shadow-md">事后溯源</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-[14px] md:text-base text-red-950 leading-relaxed border-t border-red-200 pt-4 font-bold text-center md:text-left min-h-[4.5rem] flex items-center">
|
||
实现政策有技术抓手、风险可量化考核，全面降低社会风险
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|