Initial commit
This commit is contained in:
132
src/components/script.js
Normal file
132
src/components/script.js
Normal file
@@ -0,0 +1,132 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 滚动动画逻辑
|
||||
const animatedElements = document.querySelectorAll('.scroll-animate');
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1
|
||||
});
|
||||
animatedElements.forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// 导航栏逻辑
|
||||
const navbar = document.getElementById('navbar');
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.remove('bg-white/80', 'backdrop-blur-lg', 'shadow-sm');
|
||||
navbar.classList.add('bg-white', 'shadow-md');
|
||||
} else {
|
||||
navbar.classList.remove('bg-white', 'shadow-md');
|
||||
navbar.classList.add('bg-white/80', 'backdrop-blur-lg', 'shadow-sm');
|
||||
}
|
||||
});
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
menuToggle.querySelector('i').classList.toggle('fa-bars');
|
||||
menuToggle.querySelector('i').classList.toggle('fa-close');
|
||||
});
|
||||
|
||||
// 轮播图逻辑
|
||||
const slides = document.querySelectorAll('.hero-carousel-slide');
|
||||
const dots = document.querySelectorAll('.hero-carousel-dot');
|
||||
let currentSlide = 0;
|
||||
const intervalTime = 5000;
|
||||
|
||||
function updateCarousel() {
|
||||
slides.forEach((slide, index) => {
|
||||
slide.classList.remove('opacity-100');
|
||||
slide.classList.add('opacity-0');
|
||||
dots[index].classList.remove('bg-white');
|
||||
dots[index].classList.add('bg-white/50');
|
||||
});
|
||||
|
||||
slides[currentSlide].classList.remove('opacity-0');
|
||||
slides[currentSlide].classList.add('opacity-100');
|
||||
dots[currentSlide].classList.remove('bg-white/50');
|
||||
dots[currentSlide].classList.add('bg-white');
|
||||
|
||||
const img = slides[currentSlide].querySelector('img');
|
||||
document.querySelectorAll('.hero-carousel-slide img').forEach(i => i.classList.remove('ken-burns-active'));
|
||||
img.classList.add('ken-burns-active');
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
currentSlide = (currentSlide + 1) % slides.length;
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
let carouselInterval = setInterval(nextSlide, intervalTime);
|
||||
updateCarousel(); // 初始化
|
||||
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener('click', () => {
|
||||
clearInterval(carouselInterval);
|
||||
currentSlide = index;
|
||||
updateCarousel();
|
||||
carouselInterval = setInterval(nextSlide, intervalTime);
|
||||
});
|
||||
});
|
||||
|
||||
// 模态框逻辑
|
||||
const modal = document.getElementById('solution-modal');
|
||||
const modalTitle = document.getElementById('modal-title');
|
||||
const modalContent = document.getElementById('modal-content');
|
||||
const modalCloseBtn = document.getElementById('modal-close-btn');
|
||||
const saasCards = document.querySelectorAll('.saas-card');
|
||||
|
||||
saasCards.forEach(card => {
|
||||
card.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const title = card.dataset.title;
|
||||
const content = card.dataset.content;
|
||||
|
||||
modalTitle.textContent = title;
|
||||
modalContent.innerHTML = content;
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
modal.classList.add('open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
});
|
||||
});
|
||||
|
||||
function closeModal() {
|
||||
modal.classList.add('hidden');
|
||||
modal.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
modalCloseBtn.addEventListener('click', closeModal);
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滑动，隐藏政策引导箭头
|
||||
const pContainer = document.getElementById('policy-container');
|
||||
const pHint = document.getElementById('policy-hint');
|
||||
|
||||
if (pContainer && pHint) {
|
||||
pContainer.addEventListener('scroll', function() {
|
||||
if (pContainer.scrollLeft > 25) {
|
||||
pHint.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
pHint.style.display = 'none';
|
||||
}, 500);
|
||||
}
|
||||
}, {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
});
|
||||
471
src/components/sections/AIModel.astro
Normal file
471
src/components/sections/AIModel.astro
Normal file
@@ -0,0 +1,471 @@
|
||||
---
|
||||
---
|
||||
<section id="ai-model" class="bg-slate-50 mt-20 mb-20">
|
||||
<div class="container max-w-7xl mx-auto px-4 lg:px-0">
|
||||
|
||||
<div class="mb-16 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-80 h-80 bg-blue-100/50 blur-[100px] rounded-full -z-10"></div>
|
||||
<div class="text-center">
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">AI 大模型</span> 应用场景
|
||||
</h3>
|
||||
<div class="w-20 h-1.5 bg-gradient-to-r from-blue-600 to-indigo-600 mx-auto mt-6 rounded-full"></div>
|
||||
<p class="text-gray-500 mt-6 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
无需替换硬件，即可为海量存量安防设备提供强大的<span class="text-blue-600 font-bold">视觉识别</span>和<span class="text-blue-600 font-bold">实时告警</span>能力
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-1.webp" alt="工贸企业" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">工贸企业</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
监测<span class="text-blue-600 font-semibold">危险行为</span>、规范作业流程、识别违规物品，提升工业环境的安全生产效率和合规性。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">合规识别</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-2.webp" alt="仓储物流" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">仓储物流</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
实时监控<span class="text-blue-600 font-semibold">货物堆放、通道占用、叉车违规</span>行驶等，确保仓储环境安全，优化物流效率。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">通道治理</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-3.webp" alt="酒店餐饮" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">酒店餐饮</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
后厨<span class="text-blue-600 font-semibold">明厨亮灶、卫生规范监测</span>；大堂异常聚集、消防通道堵塞告警，提升服务和安全标准。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">食安监控</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-4.webp" alt="商业综合" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">商业综合</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
<span class="text-blue-600 font-semibold">人流量分析、热区监测</span>、可疑滞留行为预警，助力商业运营管理与客流安全保障。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">客流画像</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-5.webp" alt="物业楼宇" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">物业楼宇</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
<span class="text-blue-600 font-semibold">电动车入梯、高空抛物</span>、异常占道停车、周界入侵等行为实时告警，提升社区安全。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">智慧安居</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-6.webp" alt="交通出行" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">交通出行</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
路况监测、违停抓拍、<span class="text-blue-600 font-semibold">驾驶员疲劳驾驶识别</span>，保障道路交通安全和运营效率。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">交通治理</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-7.webp" alt="建筑建设" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">建筑建设</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
<span class="text-blue-600 font-semibold">安全帽/反光衣穿戴</span>、危险区域闯入、烟火识别，实现工地安全生产智能化监管。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">智慧工地</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-8.webp" alt="智慧医院" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">智慧医院</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
医护通道占道、聚集识别、病患<span class="text-blue-600 font-semibold">跌倒、久坐异常行为</span>监测，维护场所秩序。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">智慧医疗</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-9.webp" alt="公共区域" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">公共区域</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
重点区域<span class="text-blue-600 font-semibold">人流密度、遗留物检测</span>、周界入侵等，全方位保障城市公共场所安全。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">城市大脑</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-10.webp" alt="农林渔业" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">农林渔业</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
<span class="text-blue-600 font-semibold">病虫害识别、养殖行为分析</span>、森林防火监测，推动传统产业智能化转型。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">智慧农林</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-11.webp" alt="电力巡检" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">电力巡检</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
设备<span class="text-blue-600 font-semibold">温度异常、异物识别</span>、人员违规操作识别，确保基础设施运行稳定。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">基建巡护</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-12.webp" alt="水监测" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">水监测</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
河道<span class="text-blue-600 font-semibold">漂浮物检测、偷排监测</span>、水位异常变化预警，助力水资源数字化管理。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">生态环境</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-13.webp" alt="学校教育" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">学校教育</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
校园周界安全、<span class="text-blue-600 font-semibold">陌生人闯入、课堂状态分析</span>、食堂卫生监督，构建平安校园。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">智慧校园</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-14.webp" alt="智慧养老" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">智慧养老</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
独居老人<span class="text-blue-600 font-semibold">跌倒识别、异常久坐、夜间离床</span>监测，提供及时的安全看护服务。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">适老关怀</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-15.webp" alt="居家监测" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">居家监测</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
<span class="text-blue-600 font-semibold">宠物识别、异常闯入、烟雾告警</span>，实现家庭环境的智能化安全防护。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">家庭智能</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[1.5rem] p-4 border border-transparent hover:border-blue-200 hover:bg-white hover:shadow-2xl transition-all duration-500 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 aspect-[4/3]">
|
||||
<img src="/img/ai-product-16.webp" alt="梯次利用" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">梯次利用</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
识别<span class="text-blue-600 font-semibold">电池热失控风险</span>、作业规范及分选精度，构建高度自动化的数字工厂。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-slate-100 flex gap-2">
|
||||
<span class="text-sm font-medium text-blue-500 bg-blue-50 px-3 py-1 rounded-full">工业 4.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12">
|
||||
<a href="#contact-info" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-xl font-medium rounded-full shadow-lg text-white bg-primary hover:bg-blue-700 transition duration-300">
|
||||
700+ AI核心算法，赋能产业数字化全场景
|
||||
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto space-y-12 mt-12">
|
||||
|
||||
<div class="relative overflow-hidden bg-white rounded-[2.5rem] shadow-xl border border-blue-100 transition-all duration-500 hover:shadow-2xl group">
|
||||
<div class="absolute top-0 right-0 w-64 h-64 bg-blue-50 rounded-full -mr-32 -mt-32 blur-3xl opacity-50 group-hover:bg-blue-100 transition-colors"></div>
|
||||
|
||||
<div class="relative p-8 md:p-12 flex flex-col md:flex-row items-center gap-10">
|
||||
<div class="w-full md:w-1/3 lg:w-1/4 flex-shrink-0">
|
||||
<div class="relative p-2 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-3xl rotate-2 group-hover:rotate-0 transition-transform duration-500">
|
||||
<img src="/img/ai-landscape.webp?20260118" alt="AI赋能存量摄像头" class="w-full h-48 md:h-64 object-cover rounded-2xl shadow-inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 text-blue-600 rounded-full text-xs font-bold tracking-widest uppercase mb-4">
|
||||
Legacy Upgrade
|
||||
</div>
|
||||
<h4 class="text-3xl md:text-4xl font-black text-gray-900 mb-6 leading-tight">
|
||||
🔄 AI大模型设备利旧解决方案：<span class="text-blue-600">低成本、快升级</span>
|
||||
</h4>
|
||||
<p class="text-gray-600 text-sm md:text-base leading-relaxed max-w-3xl mb-8">
|
||||
<span class="text-blue-600 font-bold text-lg">AI赋能企业既有的存量摄像头</span>，无需投入大量资金进行硬件更换，即可通过强大的AI算法和平台能力，赋予旧设备全新的<span class="text-blue-600 font-semibold">视觉智能</span>，实现资产价值最大化。
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div class="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-slate-100 hover:border-blue-200 transition-colors">
|
||||
<span class="text-2xl">✅</span>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-blue-700">利旧兼容</div>
|
||||
<div class="text-[12px] text-gray-500 mt-0.5">支持主流各类旧有摄像头接入</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-slate-100 hover:border-blue-200 transition-colors">
|
||||
<span class="text-2xl">💰</span>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-blue-700">成本节约</div>
|
||||
<div class="text-[12px] text-gray-500 mt-0.5">显著降低硬件升级成本</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-slate-100 hover:border-blue-200 transition-colors">
|
||||
<span class="text-2xl">⚡</span>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-blue-700">快速赋能</div>
|
||||
<div class="text-[12px] text-gray-500 mt-0.5">软件平台升级快速部署算法</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 pt-4">
|
||||
|
||||
<div class="bg-white p-8 md:p-10 rounded-[2.5rem] shadow-xl border border-slate-100 flex flex-col">
|
||||
<h3 class="text-2xl font-black text-gray-900 mb-10 flex items-center gap-3">
|
||||
<span class="w-1.5 h-8 bg-blue-600 rounded-full"></span>
|
||||
技术对比：从固定规则到深度理解
|
||||
</h3>
|
||||
|
||||
<div class="space-y-10">
|
||||
<div class="relative pl-6 border-l-2 border-slate-100">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-sm"></div>
|
||||
<h4 class="text-lg font-bold text-gray-800 mb-4">1. 场景识别</h4>
|
||||
<div class="grid gap-4">
|
||||
<div class="bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-orange-50/50 hover:border-orange-200 transition-colors">
|
||||
<p class="text-base text-gray-700 leading-relaxed">
|
||||
<strong class="text-orange-600 font-bold">传统算法：</strong>
|
||||
依赖像素、颜色等固定特征，场景、光照一旦变化，识别能力便会失效，<span class="font-semibold text-orange-700">泛化能力弱</span>。
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-100">
|
||||
<p class="text-base text-white leading-relaxed">
|
||||
<strong class="text-blue-100 font-bold">大模型方案：</strong>
|
||||
模拟人类视觉进行上下文理解，能<span class="font-semibold text-blue-100">自主适应复杂、多变的环境</span>，准确识别目标。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pl-6 border-l-2 border-slate-100">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-sm"></div>
|
||||
<h4 class="text-lg font-bold text-gray-800 mb-4">2. 误报警处理</h4>
|
||||
<div class="grid gap-4">
|
||||
<div class="bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-orange-50/50 hover:border-orange-200 transition-colors">
|
||||
<p class="text-base text-gray-700 leading-relaxed">
|
||||
<strong class="text-orange-600 font-bold">传统算法：</strong>
|
||||
无法区分真实威胁与环境干扰，<span class="font-semibold text-orange-700">误报率高</span>，耗费大量安保人力。
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-100">
|
||||
<p class="text-base text-white leading-relaxed">
|
||||
<strong class="text-blue-100 font-bold">大模型方案：</strong>
|
||||
通过逻辑推理过滤无效信息，能识别“飘动的塑料袋”而非“火焰”，<span class="font-semibold text-blue-100">显著降低误报</span>。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pl-6 border-l-2 border-slate-100">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-sm"></div>
|
||||
<h4 class="text-lg font-bold text-gray-800 mb-4">3. 新任务部署</h4>
|
||||
<div class="grid gap-4">
|
||||
<div class="bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-orange-50/50 hover:border-orange-200 transition-colors">
|
||||
<p class="text-base text-gray-700 leading-relaxed">
|
||||
<strong class="text-orange-600 font-bold">传统算法：</strong>
|
||||
增加识别任务需重新编程和数周模型训练，且不能保证训练效果，<span class="font-semibold text-orange-700">成本高、周期长</span>。
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-100">
|
||||
<p class="text-base text-white leading-relaxed">
|
||||
<strong class="text-blue-100 font-bold">大模型方案：</strong>
|
||||
具备<span class="font-semibold text-blue-100">零样本/小样本学习能力</span>，仅需少量样本即可在短时间内完成部署。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 md:p-10 rounded-[2.5rem] shadow-xl border border-slate-100 flex flex-col h-full">
|
||||
<h3 class="text-2xl font-black text-gray-900 mb-10 flex items-center gap-3">
|
||||
<span class="w-1.5 h-8 bg-blue-600 rounded-full"></span>
|
||||
核心优势：成本效益与部署模式
|
||||
</h3>
|
||||
|
||||
<div class="flex-grow space-y-8">
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-camera-retro text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">“利旧”原则，无需重新硬件部署</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">支持对您现场已部署的<span class="text-blue-600 font-semibold italic">海康威视等主流品牌摄像头</span>进行直接利旧，无需采购昂贵的 AI 专用硬件。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-puzzle-piece text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">高兼容性与平滑接入</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">只要能提供稳定的视频流，即可通过我们的平台无缝接入<span class="text-blue-600 font-semibold">AI 大模型</span>，使其立即具备智慧识别能力。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-line-chart text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">显著的成本节约</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">此方案可避免替换 AI 摄像头的巨额前期投入，将有限的预算更精准地用于<span class="text-blue-600 font-semibold">AI 算法订阅与数据应用服务</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-rocket text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">快速部署与验证</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">方案基于软件部署，可在<span class="text-blue-600 font-semibold">数日内完成对指定摄像头的 AI 赋能</span>，并快速进行效果验证。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-sliders text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">弹性扩展与订阅</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">您可以根据业务需求，随时增减需要 AI 分析的摄像头数量。灵活的算法订阅模式让支出与业务增长精准匹配。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-sitemap text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">统一平台与数据整合</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">所有分析产生的结构化数据都将汇入<span class="text-blue-600 font-semibold">统一管理平台</span>，为后续深层次业务挖掘奠定基础。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
|
||||
<i class="fa fa-refresh text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900 text-lg mb-1 group-hover:text-blue-600 transition-colors">算法持续进化</h4>
|
||||
<p class="text-gray-500 text-base leading-relaxed">您接入的是一个<span class="text-blue-600 font-semibold">持续进化的算法生态</span>。大模型不断优化，无需操作即可在云端自动获取最新识别能力。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
171
src/components/sections/AccidentCases.astro
Normal file
171
src/components/sections/AccidentCases.astro
Normal file
@@ -0,0 +1,171 @@
|
||||
---
|
||||
---
|
||||
<section class="py-0 md:py-16 bg-slate-50 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto relative">
|
||||
|
||||
<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>
|
||||
|
||||
<div class="inline-flex items-center space-x-2 bg-blue-100 text-blue-700 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase mb-6">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-blue-600"></span>
|
||||
</span>
|
||||
<span>Case Analysis</span>
|
||||
</div>
|
||||
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight leading-tight">
|
||||
典型事故案例<br><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 class="flex md:hidden mt-12 items-l justify-center space-x-2 mt-4 text-blue-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="scroll-hint" class="md:hidden absolute right-4 top-[55%] transform -translate-y-1/2 z-30 transition-opacity duration-500 pointer-events-none">
|
||||
<div class="bg-blue-600/90 text-white p-3 rounded-full shadow-2xl 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="case-container" class="mb-12 flex overflow-x-auto gap-6 pb-8 snap-x snap-mandatory no-scrollbar md:grid md:grid-cols-2 lg:grid-cols-3 md:overflow-visible md:gap-y-12 scroll-px-4">
|
||||
|
||||
<div class="min-w-[16px] md:hidden"></div>
|
||||
|
||||
<div class="min-w-[85vw] md:min-w-full snap-start flex flex-col">
|
||||
<div class="group h-full bg-white rounded-3xl p-6 border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-4 pb-2 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 1:</span> 杭州金隅田园山水里火灾
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-2xl overflow-hidden mb-6">
|
||||
<img src="/img/accident-case-1.webp" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
</div>
|
||||
<div class="space-y-4 flex-grow">
|
||||
<div class="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
|
||||
<h5 class="font-bold text-blue-600 text-sm mb-1 uppercase">事故原因 · ROOT CAUSE</h5>
|
||||
<p class="text-base text-gray-700 leading-relaxed">起火原因是冰箱及家具起火，但楼道消防栓却<span class="text-blue-600 font-semibold">无水</span>，延误扑救时机。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/50 p-4 rounded-xl border border-red-100">
|
||||
<h5 class="font-bold text-red-600 text-sm mb-1 uppercase">损失情况 · IMPACT</h5>
|
||||
<p class="text-base text-red-700 font-medium">价值<span class="font-extrabold">300万元</span>的房屋几乎被完全烧毁。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[85vw] md:min-w-full snap-start flex flex-col">
|
||||
<div class="group h-full bg-white rounded-3xl p-6 border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-4 pb-2 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 2:</span> 江西赣州加佰加工厂火灾
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-2xl overflow-hidden mb-6">
|
||||
<img src="/img/accident-case-2.webp" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
</div>
|
||||
<div class="space-y-4 flex-grow">
|
||||
<div class="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
|
||||
<h5 class="font-bold text-blue-600 text-sm mb-1 uppercase">事故原因 · ROOT CAUSE</h5>
|
||||
<p class="text-base text-gray-700 leading-relaxed">企业此前多次被查出安全隐患，但<span class="text-blue-600 font-semibold">整改不到位</span>导致严重后果。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/50 p-4 rounded-xl border border-red-100">
|
||||
<h5 class="font-bold text-red-600 text-sm mb-1 uppercase">损失情况 · IMPACT</h5>
|
||||
<p class="text-base text-red-700 font-medium">预计损失达<span class="font-extrabold">1.2亿 - 1.5亿</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[85vw] md:min-w-full snap-start flex flex-col">
|
||||
<div class="group h-full bg-white rounded-3xl p-6 border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-4 pb-2 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 3:</span> 杭州萧山瓜沥镇厂房火灾
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-2xl overflow-hidden mb-6">
|
||||
<img src="/img/accident-case-3.webp" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
</div>
|
||||
<div class="space-y-4 flex-grow">
|
||||
<div class="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
|
||||
<h5 class="font-bold text-blue-600 text-sm mb-1 uppercase">事故原因 · ROOT CAUSE</h5>
|
||||
<p class="text-base text-gray-700 leading-relaxed">泡沫原料遇明火迅速燃烧，曾存在<span class="text-blue-600 font-semibold">消防通道被占用</span>等问题。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/50 p-4 rounded-xl border border-red-100">
|
||||
<h5 class="font-bold text-red-600 text-sm mb-1 uppercase">损失情况 · IMPACT</h5>
|
||||
<p class="text-base text-red-700 font-medium">企业生产节奏打乱，造成<span class="font-extrabold">重大财产损失</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[85vw] md:min-w-full snap-start flex flex-col">
|
||||
<div class="group h-full bg-white rounded-3xl p-6 border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-4 pb-2 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 4:</span> 杭州下沙汽配城附近火灾
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-2xl overflow-hidden mb-6">
|
||||
<img src="/img/accident-case-4.webp" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
</div>
|
||||
<div class="space-y-4 flex-grow">
|
||||
<div class="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
|
||||
<h5 class="font-bold text-blue-600 text-sm mb-1 uppercase">事故原因 · ROOT CAUSE</h5>
|
||||
<p class="text-base text-gray-700 leading-relaxed"><span class="text-blue-600 font-semibold">电气线路故障</span>引燃易燃物品，导致火灾。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/50 p-4 rounded-xl border border-red-100">
|
||||
<h5 class="font-bold text-red-600 text-sm mb-1 uppercase">损失情况 · IMPACT</h5>
|
||||
<p class="text-base text-red-700 font-medium">原料烧毁，直接经济损失达<span class="font-extrabold">数千万</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[85vw] md:min-w-full snap-start flex flex-col">
|
||||
<div class="group h-full bg-white rounded-3xl p-6 border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-4 pb-2 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 5:</span> 南京雨花台区“2.23”事故
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-2xl overflow-hidden mb-6">
|
||||
<img src="/img/accident-case-5.webp" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
</div>
|
||||
<div class="space-y-4 flex-grow">
|
||||
<div class="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
|
||||
<h5 class="font-bold text-blue-600 text-sm mb-1 uppercase">事故原因 · ROOT CAUSE</h5>
|
||||
<p class="text-base text-gray-700 leading-relaxed">架空层停放的<span class="text-blue-600 font-semibold">违规改装电动自行车</span>热失控起火。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/50 p-4 rounded-xl border border-red-100">
|
||||
<h5 class="font-bold text-red-600 text-sm mb-1 uppercase">损失情况 · IMPACT</h5>
|
||||
<p class="text-base text-red-700 font-medium"><span class="font-extrabold">15人死亡</span>，44人受伤，损失巨大。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[85vw] md:min-w-full snap-start flex flex-col">
|
||||
<div class="group h-full bg-white rounded-3xl p-6 border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-500 flex flex-col">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-4 pb-2 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 6:</span> 辽宁盘锦浩业化工爆炸
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-2xl overflow-hidden mb-6">
|
||||
<img src="/img/accident-case-6.webp" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
</div>
|
||||
<div class="space-y-4 flex-grow">
|
||||
<div class="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
|
||||
<h5 class="font-bold text-blue-600 text-sm mb-1 uppercase">事故原因 · ROOT CAUSE</h5>
|
||||
<p class="text-base text-gray-700 leading-relaxed">违规带压密封操作引发爆炸；设备安全管理<span class="text-blue-600 font-semibold">缺失</span>。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/50 p-4 rounded-xl border border-red-100">
|
||||
<h5 class="font-bold text-red-600 text-sm mb-1 uppercase">损失情况 · IMPACT</h5>
|
||||
<p class="text-base text-red-700 font-medium"><span class="font-extrabold">13人死亡</span>，造成经济损失8799万元。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[16px] md:hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
42
src/components/sections/Contact.astro
Normal file
42
src/components/sections/Contact.astro
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
---
|
||||
<section id="contact-info" class="py-16 md:py-24 bg-gray-50">
|
||||
|
||||
<div class="text-center mb-12 px-4 lg:px-0">
|
||||
<span class="text-primary font-medium">联系我们</span>
|
||||
<h3 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mt-2 mb-4">让我们一起开启数字化之旅</h3>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-0">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border border-gray-100 flex flex-col items-center text-center
|
||||
transition-all duration-500 hover:shadow-2xl hover:scale-[1.02] hover:-translate-y-2">
|
||||
<div class="flex-shrink-0 w-16 h-16 border-2 border-primary rounded-full flex items-center justify-center mb-4 bg-primary/10">
|
||||
<i class="fa fa-phone text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-extrabold text-xl mb-1 text-gray-800">合作咨询</h4>
|
||||
<a href="tel:4009985710" class="text-primary hover:text-blue-600 transition text-lg font-extrabold">400-998-5710</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border border-gray-100 flex flex-col items-center text-center
|
||||
transition-all duration-500 hover:shadow-2xl hover:scale-[1.02] hover:-translate-y-2">
|
||||
<div class="flex-shrink-0 w-16 h-16 border-2 border-primary rounded-full flex items-center justify-center mb-4 bg-primary/10">
|
||||
<i class="fa fa-envelope text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-extrabold text-xl mb-1 text-gray-800">电子邮箱</h4>
|
||||
<a href="mailto:zjbeifan@126.com" class="text-primary hover:text-blue-600 transition text-lg font-medium break-all">zjbeifan@126.com</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border border-gray-100 flex flex-col items-center text-center
|
||||
transition-all duration-500 hover:shadow-2xl hover:scale-[1.02] hover:-translate-y-2">
|
||||
<div class="flex-shrink-0 w-16 h-16 border-2 border-primary rounded-full flex items-center justify-center mb-4 bg-primary/10">
|
||||
<i class="fa fa-map-marker text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-extrabold text-xl mb-1 text-gray-800">公司地址</h4>
|
||||
<p class="text-gray-600 text-base">浙江省杭州市余杭区杭行路1499号润珹置地中心</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
284
src/components/sections/Customization.astro
Normal file
284
src/components/sections/Customization.astro
Normal file
@@ -0,0 +1,284 @@
|
||||
---
|
||||
---
|
||||
<section class="bg-slate-50 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto space-y-24">
|
||||
<div class="relative">
|
||||
<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-indigo-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-indigo-600 rounded-full shadow-[4px_0_12px_rgba(79,70,229,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-indigo-600/10 select-none">02</span>
|
||||
|
||||
<div class="flex items-center">
|
||||
<span class="text-indigo-600 font-black text-xl md:text-2xl tracking-tight">核心业务</span>
|
||||
<span class="flex items-center justify-center bg-indigo-600 text-white w-9 h-9 md:w-10 md:h-10 rounded-xl shadow-md shadow-indigo-200 text-xl md:text-2xl font-black mx-2">
|
||||
2
|
||||
</span>
|
||||
<span class="text-indigo-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">
|
||||
本地化定制
|
||||
</h3>
|
||||
<div class="flex items-center gap-2 mt-1.5">
|
||||
<span class="h-1 w-5 bg-indigo-600 rounded-full"></span>
|
||||
<span class="text-xs md:text-xs text-indigo-500 font-bold uppercase tracking-[0.1em] md:tracking-[0.2em] leading-none">
|
||||
Local Customization Service
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto space-y-6">
|
||||
<div class="grid lg:grid-cols-12 gap-8 lg:gap-16 items-stretch">
|
||||
|
||||
<div class="lg:col-span-4 flex flex-col">
|
||||
<div class="bg-slate-50/90 pb-4 rounded-3xl">
|
||||
<h2 class="text-4xl font-black text-gray-900 leading-[1.1] mb-6">
|
||||
全场景<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">产业数字化</span>
|
||||
</h2>
|
||||
<p class="text-gray-600 text-lg md:text-xl leading-[1.8] mb-8">
|
||||
<span class="text-indigo-600 font-extrabold">多模态软件系统研发</span>，
|
||||
场景覆盖多个重点行业，核心集中在
|
||||
<span class="text-gray-900 font-bold">化工能源、生产制造、金融零售、城市政务、交通运输、景区文旅</span>
|
||||
等领域，提供从需求、方案设计、系统开发、运维交付的
|
||||
<span class="relative inline-block">
|
||||
<span class="text-indigo-600 font-bold">全周期定制化服务</span>
|
||||
<span class="absolute bottom-0.5 left-0 w-full h-[2px] bg-indigo-200"></span>
|
||||
</span>，
|
||||
助力产业数字化转型
|
||||
<span class="text-indigo-600 font-black tracking-tight underline decoration-indigo-200 decoration-4 underline-offset-8">提质增效</span>。
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||||
<div class="bg-indigo-50/50 p-4 rounded-2xl border border-indigo-100">
|
||||
<div class="text-indigo-600 font-bold text-2xl mb-1">700+</div>
|
||||
<div class="text-gray-500 text-[10px] sm:text-xs tracking-wider font-bold uppercase">自研核心算法</div>
|
||||
</div>
|
||||
<div class="bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
|
||||
<div class="text-blue-600 font-bold text-2xl mb-1">99.99%+</div>
|
||||
<div class="text-gray-500 text-[10px] sm:text-xs tracking-wider font-bold uppercase">SLA 服务可用性</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-4">
|
||||
<div class="flex-1 relative group overflow-hidden rounded-3xl border border-slate-100 shadow-md">
|
||||
<img src="/img/product-customization-1.webp" alt="AI定制技术" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-6 text-white">
|
||||
<p class="text-sm font-bold tracking-widest opacity-80 uppercase">园区IOC</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 relative group overflow-hidden rounded-3xl border border-slate-100 shadow-md">
|
||||
<img src="/img/product-customization-2.webp" alt="数字化应用" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-6 text-white">
|
||||
<p class="text-sm font-bold tracking-widest opacity-80 uppercase">数字孪生</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-5 relative z-10">
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">化工能源</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">深耕危化品全流程管控体系，研发<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">储罐区动态风险评价、人员定位与安全预警平台</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">生产制造</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">聚焦核心生产管控，提供<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">MES执行系统、EAP设备自动化及AMHS物料搬运系统</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">金融零售</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">研发高并发<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">大数据智能风控模型、反洗钱稽查及投资组合监控平台</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">智慧养老</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">打造<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">智慧康养大脑</span>，集成毫米波雷达跌倒监测与居家健康实时预警。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">城市政务</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">主打治理中台，研发<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">超级智能体、一网统管及智能秒批审批系统</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1zm0 0l5 4V12l-5 4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">交通运输</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">研发调度体系，包括<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">无人集卡调度、高铁/航空票务流量预测模型</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">景区文旅</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">提供全域数字化方案，研发<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">AR导览、客流预警及分销风控平台</span>。</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-7 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all duration-500 flex flex-col">
|
||||
<div class="flex items-center gap-4 mb-5">
|
||||
<div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-all">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-2xl font-black text-gray-900">医疗健康</h4>
|
||||
</div>
|
||||
<p class="text-lg text-gray-700 leading-relaxed font-semibold">研发信息系统，涵盖<span class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md">临床辅助决策(CDSS)、数字病人虚拟训练</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative bg-white rounded-[3rem] p-10 md:p-14 shadow-[0_32px_64px_-16px_rgba(0,0,0,0.08)] border border-slate-100 overflow-hidden group">
|
||||
<div class="absolute -top-24 -right-24 w-96 h-96 bg-indigo-50 rounded-full blur-3xl opacity-60 transition-all duration-700 group-hover:scale-110"></div>
|
||||
<div class="absolute -bottom-24 -left-24 w-72 h-72 bg-blue-50 rounded-full blur-3xl opacity-60"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="flex flex-col lg:flex-row lg:items-center gap-10 lg:gap-16">
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="w-3 h-3 rounded-full bg-indigo-600 shadow-[0_0_10px_rgba(79,70,229,0.4)]"></span>
|
||||
<span class="text-indigo-600 text-sm font-black tracking-[0.2em] uppercase">Industry Scale</span>
|
||||
</div>
|
||||
<h4 class="text-4xl md:text-5xl font-black text-gray-900 tracking-tighter leading-tight">
|
||||
全场景<br />
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">定制覆盖</span>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:block w-[2px] h-24 bg-slate-100"></div>
|
||||
|
||||
<div class="flex-1 grid grid-cols-2 lg:flex lg:flex-wrap gap-4">
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
司法监管
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
智慧教育
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
电力巡检
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
环境监测
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5" />
|
||||
</svg>
|
||||
物业楼宇
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-2 px-5 py-3 lg:px-6 lg:py-3 rounded-2xl bg-slate-50 border border-slate-200 text-gray-700 text-base lg:text-lg font-bold hover:bg-white hover:border-indigo-400 hover:text-indigo-600 hover:shadow-md transition-all cursor-default group/tag">
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover/tag:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
梯次利用
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="lg:w-[40%] group/info">
|
||||
<div class="relative p-8 rounded-[2.5rem] bg-indigo-600 shadow-[0_20px_40px_-12px_rgba(79,70,229,0.3)] transition-all duration-500 group-hover/info:scale-[1.02]">
|
||||
<div class="absolute top-0 right-0 p-6 opacity-20">
|
||||
<svg class="w-20 h-20 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="relative z-10 flex flex-col gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="bg-white/20 p-2 rounded-lg backdrop-blur-sm">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</span>
|
||||
<p class="text-white font-black text-2xl tracking-tight">不限行业</p>
|
||||
</div>
|
||||
<p class="text-indigo-50 text-lg leading-relaxed font-medium">
|
||||
依托底层自研算法，将数字化转型延伸至每一个细分业务场景。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
105
src/components/sections/Footer.astro
Normal file
105
src/components/sections/Footer.astro
Normal file
@@ -0,0 +1,105 @@
|
||||
---
|
||||
---
|
||||
<footer class="bg-gray-900 text-white pt-16 pb-8">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-10">
|
||||
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-extrabold text-xl text-white border-l-4 border-blue-500 pl-3">扫码关注获取更多资讯</h4>
|
||||
|
||||
<div class="flex gap-6">
|
||||
<div class="group relative flex flex-col items-center space-y-2 cursor-pointer">
|
||||
<div class="bg-white p-1 rounded-lg inline-block shadow-lg transition-transform duration-300 group-hover:scale-110">
|
||||
<img src="/img/official-wechat.jpg" alt="微信服务号" class="w-16 h-16 rounded-md">
|
||||
</div>
|
||||
<p class="text-sm text-gray-400">企业服务号</p>
|
||||
|
||||
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
|
||||
<div class="bg-white p-3 rounded-xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] border-2 border-blue-500 w-48 text-center">
|
||||
<img src="/img/official-wechat.jpg" alt="微信服务号大图" class="w-full h-auto rounded-lg mb-2">
|
||||
<div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative flex flex-col items-center space-y-2 cursor-pointer">
|
||||
<div class="bg-white p-1 rounded-lg inline-block shadow-lg transition-transform duration-300 group-hover:scale-110">
|
||||
<img src="/img/official-douyin.jpg" alt="企业抖音" class="w-16 h-16 rounded-md">
|
||||
</div>
|
||||
<p class="text-sm text-gray-400">企业抖音</p>
|
||||
|
||||
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
|
||||
<div class="bg-white p-3 rounded-xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] border-2 border-blue-500 w-48 text-center">
|
||||
<img src="/img/official-douyin.jpg" alt="企业抖音大图" class="w-full h-auto rounded-lg mb-2">
|
||||
<div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group relative flex flex-col items-center space-y-2 cursor-pointer">
|
||||
<div class="bg-white p-1 rounded-lg inline-block shadow-lg transition-transform duration-300 group-hover:scale-110">
|
||||
<img src="/img/official-xiaohongshu.jpg" alt="企业小红书" class="w-16 h-16 rounded-md">
|
||||
</div>
|
||||
<p class="text-sm text-gray-400">企业小红书</p>
|
||||
|
||||
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
|
||||
<div class="bg-white p-3 rounded-xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] border-2 border-blue-500 w-48 text-center">
|
||||
<img src="/img/official-xiaohongshu.jpg" alt="企业小红书大图" class="w-full h-auto rounded-lg mb-2">
|
||||
<div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<h4 class="font-extrabold text-xl text-white border-l-4 border-blue-500 pl-3">快速链接</h4>
|
||||
<div class="w-full">
|
||||
<div class="grid grid-cols-2 gap-x-8">
|
||||
<ul class="space-y-4 text-base">
|
||||
<li><a href="#home" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-home w-4 text-center text-blue-500"></i><span>首页</span></a></li>
|
||||
<li><a href="#core-business" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-briefcase w-4 text-center text-blue-500"></i><span>核心业务</span></a></li>
|
||||
<li><a href="#ai-model" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-microchip w-4 text-center text-blue-500"></i><span>AI大模型</span></a></li>
|
||||
</ul>
|
||||
<ul class="space-y-4 text-base">
|
||||
<li><a href="#about-us" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-info-circle w-4 text-center text-blue-500"></i><span>关于我们</span></a></li>
|
||||
<li><a href="#recruitment" class="flex items-center gap-3 text-gray-400 hover:text-blue-400 transition-colors"><i class="fa fa-handshake-o w-4 text-center text-blue-500"></i><span>生态合作</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<h4 class="font-extrabold text-xl text-white border-l-4 border-blue-500 pl-3">联系我们</h4>
|
||||
<ul class="space-y-4 text-base text-gray-400">
|
||||
<li class="flex items-start">
|
||||
<i class="fa fa-map-marker w-5 text-blue-500 mt-1 flex-shrink-0"></i>
|
||||
<span>浙江省杭州市余杭区杭行路1499号润珹置地中心</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa fa-phone w-5 text-blue-500 mt-1 flex-shrink-0"></i>
|
||||
<a href="tel:400-998-5710" class="hover:text-blue-400 transition-colors">400-998-5710</a>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa fa-envelope w-5 text-blue-500 mt-1 flex-shrink-0"></i>
|
||||
<a href="mailto:zjbeifan@126.com" class="hover:text-blue-400 transition-colors">zjbeifan@126.com</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-700 pt-6 mt-10 space-y-2">
|
||||
<p class="text-center text-sm text-gray-500">
|
||||
Copyright © 2026 浙江贝凡网络科技有限公司. All Rights Reserved. |
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" class="hover:text-blue-400 transition-colors">浙ICP备2025170226号-4</a>
|
||||
</p>
|
||||
<p class="text-center text-sm text-gray-500">
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=33011002018371" rel="noreferrer" target="_blank" class="inline-flex items-center justify-center gap-1 hover:text-blue-400 transition-colors">
|
||||
<img src="/img/beian.png" alt="备案图标" class="w-4 h-4">
|
||||
<span>浙公网安备33011002018371号</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
293
src/components/sections/Hardware.astro
Normal file
293
src/components/sections/Hardware.astro
Normal file
@@ -0,0 +1,293 @@
|
||||
---
|
||||
---
|
||||
<section id="core-business" class="bg-slate-50/50 text-dark">
|
||||
<div class="container max-w-7xl mx-auto px-4 lg:px-0">
|
||||
<div class="mb-16 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-200/30 blur-3xl rounded-full -z-10"></div>
|
||||
<div class="text-center">
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">硬件物联</span> 应用场景
|
||||
</h3>
|
||||
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-6 rounded-full"></div>
|
||||
<p class="text-gray-500 mt-6 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
硬件物联方案将先进技术融入作业流程，实现定制化、智能化的企业安全管理
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-1.webp" alt="仓储烟雾" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">秒级告警</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">仓储烟雾颗粒监测</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
针对易燃易爆区域等仓储环境，利用吸入式烟感主动探测。支持<span class="text-blue-600 font-semibold">秒级响应</span>，确保在火情萌芽状态即刻下发告警。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">极早期采集</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">实时浓度监控</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-2.webp" alt="燃气监测" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">自动联动</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">燃气监测</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
实时监测燃气浓度波动。一旦探测到浓度超标，系统将立即<span class="text-blue-600 font-semibold">联动自闭阀自动封闭</span>，推送预警至安全负责人手机。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">自动切断联动</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">泄漏溯源</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-3.webp" alt="消防水压" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">实时监测</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">消防水压监测</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
监控消防栓末端水压值及屋顶消防水箱水位。解决巡检难题，确保火灾发生时<span class="text-blue-600 font-semibold">管网水量充足、设备随时可用</span>。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">水压预警</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">水位远程监控</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-4.webp" alt="电车灭火" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">精准扑灭</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">电动灭火系统</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
针对充电区域实现锂电池火源热点定位。一旦升温，启动<span class="text-blue-600 font-semibold">泡沫自动喷淋系统</span>，精准覆盖火源并快速隔离氧气。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">火源热点定位</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">自动灭火控制</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-5.webp" alt="特种设备" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">准入管控</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">特种设备管理</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
集成北斗定位与人脸识别，从源头上<span class="text-blue-600 font-semibold">杜绝无证驾驶、非授权动车</span>。支持电子围栏超速告警，强效保障厂区作业安全。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">人脸核身起动</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">安全带监测</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-6.webp" alt="行为监测" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">AI视觉</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">行为监测管理</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
实时识别人员异常行为，如<span class="text-blue-600 font-semibold">摔倒识别、周界侵入、脱岗监测</span>等。自动抓拍违规画面并即时告警，有效弥补人工盲区。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">骨骼动作分析</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">全场覆盖</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-7.webp" alt="热成像" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">温度预警</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">热成像模块</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
捕捉环境温度波动，在可见火光产生前<span class="text-blue-600 font-semibold">探测到隐蔽热源</span>，有效预防自燃事故，支持无光环境与全天候作业扫描。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">非接触测温</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">自燃风险分析</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-8.webp" alt="梯控" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">梯内安全</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">梯控管理</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
精准识别进入电梯的电动自行车，联动电梯门保持开启、<span class="text-blue-600 font-semibold">电梯停运及语音警告</span>，强效阻断电动车上楼充电隐患。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">电车识别算法</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">联动拒载控制</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-9.webp" alt="电气火灾" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">用电安全</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">电气火灾监测</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
实时监控配电箱内部漏电、过载等参数。对<span class="text-blue-600 font-semibold">异常电气波动实现秒级上报</span>，有效预防老旧线路引发的突发火灾。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">参数异常预警</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">配电数字画像</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/hardware-10.webp" alt="设备赋码" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">数字档案</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">设备赋码巡检</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
建立专属二维码。通过<span class="text-blue-600 font-semibold">到期自动预警、扫码数字化巡检</span>，巡检人员可上传隐患照片，实现闭环式设备安全管控。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">一机一码管理</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-600 px-2 py-0.5 rounded">到期智能提醒</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/product-system-1.webp" alt="无人机巡检" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-indigo-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">全域覆盖</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">无人机巡检</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
实现对复杂环境的<span class="text-blue-600 font-semibold">立体化安全扫描</span>。集成AI视觉与红外热成像，自动识别死角隐患，构建空地一体化防控体系。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded">空地一体监控</span>
|
||||
<span class="text-sm font-medium bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded">红外/AI识别</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/product-system-2.webp" alt="智能机器人巡检" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-indigo-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">7x24h 守护</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">机器人巡检</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
代替人工在危险环境下作业。集成<span class="text-blue-600 font-semibold">自动避障、仪表识别及RFID校验</span>，实时监测异动，确保极端工况风险零残留。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded">极限环境替人</span>
|
||||
<span class="text-sm font-medium bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded">自主导航避障</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/bcm-2.webp" alt="建筑基建监测" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-emerald-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">结构安全</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">建筑自动化监测</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
对深基坑、桥梁等实现实时监测。精准感知<span class="text-blue-600 font-semibold">微米级位移、应力变化</span>，为自然灾害防治提供自动化预警。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-emerald-50 text-emerald-600 px-2 py-0.5 rounded">高精度形变监测</span>
|
||||
<span class="text-sm font-medium bg-emerald-50 text-emerald-600 px-2 py-0.5 rounded">地灾实时预警</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/product-energy-1.webp" alt="智慧水务监测" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-cyan-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">水质动态监测</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">水环境监测</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
构建覆盖<span class="text-blue-600 font-semibold">智慧排水、供水压力及水生态</span>的监控网络。同步采集指标并实现流量计量，确保水资源管理的高效与环保。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-cyan-50 text-cyan-600 px-2 py-0.5 rounded">多参数集成</span>
|
||||
<span class="text-sm font-medium bg-cyan-50 text-cyan-600 px-2 py-0.5 rounded">实时流量管控</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/product-saas-1.webp" alt="智慧充电系统" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-orange-600 text-white text-[10px] font-bold px-2 py-1 rounded-md">用电安全</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">电动车/新能源车充电系统</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
提供从两轮插排到新能源直流快充桩的<span class="text-blue-600 font-semibold">全场景充电方案</span>。支持充满自停、超载断电及工业级倾斜保护。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-orange-50 text-orange-600 px-2 py-0.5 rounded">多功率适配</span>
|
||||
<span class="text-sm font-medium bg-orange-50 text-orange-600 px-2 py-0.5 rounded">云端安防联动</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-[2rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 flex flex-col h-full">
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||
<img src="/img/product-solution-1.webp" alt="智慧物流系统" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
||||
<div class="absolute top-4 left-4 bg-blue-700 text-white text-[10px] font-bold px-2 py-1 rounded-md">物流效率</div>
|
||||
</div>
|
||||
<div class="flex-grow px-1">
|
||||
<h4 class="text-lg font-bold text-gray-900 mb-3">智慧物流</h4>
|
||||
<p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
|
||||
依托 <span class="text-blue-600 font-semibold">3D SLAM 无轨道导航技术</span>，实现多机集群调度。在不停工状态下协同执行码垛与转运，提升物流效率。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-50">
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-700 px-2 py-0.5 rounded">3D SLAM 导航</span>
|
||||
<span class="text-sm font-medium bg-blue-50 text-blue-700 px-2 py-0.5 rounded">集群调度系统</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
41
src/components/sections/Hero.astro
Normal file
41
src/components/sections/Hero.astro
Normal file
@@ -0,0 +1,41 @@
|
||||
<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-dark">
|
||||
<div id="hero-carousel-container" class="absolute inset-0 z-0">
|
||||
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100">
|
||||
<img src="/img/hero-banner-1.webp" alt="数字化解决方案" class="w-full h-full object-cover scale-105">
|
||||
</div>
|
||||
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0">
|
||||
<img src="/img/hero-banner-2.webp" alt="创新科技应用" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0">
|
||||
<img src="/img/hero-banner-3.webp" alt="智慧城市远景" class="w-full h-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-dark/90 via-dark/40 to-transparent z-10"></div>
|
||||
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10 z-10"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-0 relative z-20 w-full">
|
||||
<div class="max-w-3xl lg:text-left text-center">
|
||||
<h1 class="text-[clamp(2.2rem,6vw,3rem)] font-black leading-[1.1] text-white mb-8 scroll-animate">
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
|
||||
全场景 ‧ 产业数字化转型服务商
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-gray-300 font-light mb-12 max-w-xl lg:mx-0 mx-auto leading-relaxed scroll-animate">
|
||||
浙江贝凡是专注互联网科技与云服务的创新型企业，致力于利用 <span class="text-white font-medium">AI、大数据、云计算</span> ，为各行业提供核心智能化解决方案。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hero-carousel-dots" class="absolute bottom-10 left-1/2 lg:left-0 lg:ml-0 lg:translate-x-0 -translate-x-1/2 z-20 flex space-x-3 lg:max-w-7xl lg:mx-auto lg:px-4 w-full justify-center lg:justify-start">
|
||||
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
|
||||
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
|
||||
</button>
|
||||
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
|
||||
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
|
||||
</button>
|
||||
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
|
||||
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
252
src/components/sections/Honors.astro
Normal file
252
src/components/sections/Honors.astro
Normal file
@@ -0,0 +1,252 @@
|
||||
---
|
||||
---
|
||||
<section id="about-us" class="py-16 bg-slate-50">
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-0">
|
||||
|
||||
<div class="text-center mb-16 px-4 lg:px-0">
|
||||
<span class="text-blue-600 font-medium text-lg tracking-widest block mb-2">关于我们</span>
|
||||
<h2 class="text-[clamp(1.8rem,4vw,3rem)] font-extrabold text-dark mt-2 mb-4">专注创新 · 赋能产业升级</h2>
|
||||
<p class="text-gray-600 max-w-3xl mx-auto text-base">浙江贝凡网络科技有限公司致力于利用AI、大数据、云计算，为各行业提供开放、灵活、可扩展的核心智能化解决方案。我们以创新、专注、协作为核心，持续深耕安全数字化领域，引领行业转型。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all duration-500 group">
|
||||
<div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6">
|
||||
<i class="fa fa-users text-blue-600 text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-dark mb-4">核心价值观</h3>
|
||||
<p class="text-gray-600">想要共赢，必先担当。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all duration-500 group">
|
||||
<div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6">
|
||||
<i class="fa fa-eye text-blue-600 text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-dark mb-4">企业愿景</h3>
|
||||
<p class="text-gray-600">致力于打造全国领先的安全风险管理平台。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all duration-500 group">
|
||||
<div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6">
|
||||
<i class="fa fa-bar-chart text-blue-600 text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-dark mb-4">业务版图</h3>
|
||||
<p class="text-gray-600">以杭州为总部，运营中心辐射各省、市、地区。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-16 md:mt-24">
|
||||
<div class="text-center mb-16 px-4 lg:px-0">
|
||||
<h2 class="text-[clamp(1.8rem,4vw,3rem)] font-bold mt-2 mb-4">匠心筑就 · 信赖桥梁</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">合作携手，共创价值</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 items-center">
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-cmcc.webp" alt="中国移动 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">中国移动</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-ct.webp" alt="中国电信 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">中国电信</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-inspur.webp" alt="浪潮 inspur logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">浪潮 inspur</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-hikvision.webp" alt="海康威视 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">海康威视</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/grid.webp" alt="国家电网 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">国家电网</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-aliyun.webp" alt="阿里云 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">阿里云</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-amap.webp" alt="高德地图 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">高德地图</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-zjtd.webp" alt="字节跳动 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">字节跳动</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-cu.webp" alt="中国联通 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">中国联通</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/hr.webp" alt="虹润 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">虹润</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-tencent.webp" alt="腾讯 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">腾讯</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||
<img src="/img/partner-doubao.webp" alt="豆包 logo" class="max-h-12 w-auto">
|
||||
<p class="text-sm font-semibold text-gray-700">豆包</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-20 md:mt-28">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
<div class="text-center mb-12">
|
||||
<h3 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">企业荣誉与资质</h3>
|
||||
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-4 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-10">
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-6 gap-3">
|
||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
||||
<img src="/img/certificate-1.webp" alt="ISO 27001" class="max-w-[80%] max-h-[80%] transition-all duration-500">
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">信息安全管理体系</h4>
|
||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">ISO 27001</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
||||
<img src="/img/certificate-2.webp" alt="ISO 20000" class="max-w-[80%] max-h-[80%] object-contain transition-all duration-500">
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">信息服务管理体系</h4>
|
||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">ISO 20000</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
||||
<img src="/img/certificate-3.webp" alt="ISO 9001" class="max-w-[80%] max-h-[80%] object-contain transition-all duration-500">
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">质量管理体系认证</h4>
|
||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">ISO 9001</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
||||
<img src="/img/product-safety-1.webp" alt="ISO 27001" class="max-w-[80%] max-h-[80%] transition-all duration-500">
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">多光谱热成像图像处理分析管理系统</h4>
|
||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">软著</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
||||
<img src="/img/product-safety-2.webp" alt="ISO 20000" class="max-w-[80%] max-h-[80%] object-contain transition-all duration-500">
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">高性能边缘计算盒运行控制管理系统</h4>
|
||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">软著</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
||||
<img src="/img/product-safety-3.webp" alt="ISO 9001" class="max-w-[80%] max-h-[80%] object-contain transition-all duration-500">
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">基于数字孪生的乡村治理平台</h4>
|
||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">软著</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[2.5rem] p-8 md:p-10 border border-slate-100 shadow-xl">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-red-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-red-100">
|
||||
<i class="fa fa-star"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-bold text-gray-900">资信等级认证</h4>
|
||||
</div>
|
||||
<span class="px-4 py-1 bg-red-50 text-red-600 text-sm font-black rounded-full border border-red-100 self-start">权威机构 AAA 级评定</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="flex items-center gap-4 bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-white hover:border-red-200 transition-all group">
|
||||
<span class="text-2xl group-hover:scale-110 transition-transform">🏆</span>
|
||||
<span class="text-base font-bold text-gray-700">诚信经营示范单位</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-white hover:border-red-200 transition-all group">
|
||||
<span class="text-2xl group-hover:scale-110 transition-transform">🤝</span>
|
||||
<span class="text-base font-bold text-gray-700">重合同守信用企业</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-white hover:border-red-200 transition-all group">
|
||||
<span class="text-2xl group-hover:scale-110 transition-transform">💎</span>
|
||||
<span class="text-base font-bold text-gray-700">质量服务信用单位</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-white hover:border-red-200 transition-all group">
|
||||
<span class="text-2xl group-hover:scale-110 transition-transform">📈</span>
|
||||
<span class="text-base font-bold text-gray-700">企业资信等级认证</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 md:p-10 rounded-[2.5rem] border border-slate-100 shadow-xl relative overflow-hidden">
|
||||
<div class="absolute -right-10 -bottom-10 opacity-[0.03] pointer-events-none">
|
||||
<i class="fa fa-file-code-o text-[240px]"></i>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 mb-10">
|
||||
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
|
||||
<i class="fa fa-code"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-bold text-gray-900">核心自主知识产权</h4>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-8 gap-x-12 mb-12">
|
||||
<div class="relative pl-5 group">
|
||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">多光谱热成像图像处理分析管理系统</p>
|
||||
</div>
|
||||
<div class="relative pl-5 group">
|
||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">高性能边缘计算盒运行控制管理系统</p>
|
||||
</div>
|
||||
<div class="relative pl-5 group">
|
||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">基于数字孪生的乡村治理平台</p>
|
||||
</div>
|
||||
<div class="relative pl-5 group">
|
||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">企业能耗在线监测端系统</p>
|
||||
</div>
|
||||
<div class="relative pl-5 group">
|
||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">数据中心园区综合管理系统</p>
|
||||
</div>
|
||||
<div class="relative pl-5 group">
|
||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">硬件处理模块智能配置管理系统</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-10 border-t border-slate-50 flex flex-col md:flex-row md:items-center justify-between gap-8">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="bg-blue-600 px-8 py-4 rounded-[2rem] text-white shadow-xl shadow-blue-100 flex items-center gap-4">
|
||||
<span class="text-4xl font-black italic">30+</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-lg font-bold text-gray-900">软件著作权与专利</p>
|
||||
<p class="text-sm text-gray-400">持续投入研发，构建核心技术护城河</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 max-w-sm">
|
||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 机器视觉</span>
|
||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 边缘计算</span>
|
||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 数字孪生</span>
|
||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 智能监测</span>
|
||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 可视化大屏</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
172
src/components/sections/Partnership.astro
Normal file
172
src/components/sections/Partnership.astro
Normal file
@@ -0,0 +1,172 @@
|
||||
---
|
||||
---
|
||||
<section id="recruitment" class="py-16 md:py-24 bg-white">
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-0">
|
||||
|
||||
<div class="text-center mb-16">
|
||||
<span class="text-blue-600 font-medium text-lg tracking-widest block mb-2">生态合作</span>
|
||||
<h2 class="text-[clamp(1.8rem,4vw,3rem)] font-extrabold text-gray-900 mt-2 mb-4">生态合作，共享蓝海</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 lg:p-10 border-t-8 border-blue-600 h-full flex flex-col transition-all duration-300 hover:shadow-2xl">
|
||||
<div class="text-center mb-10">
|
||||
<div class="w-16 h-16 mx-auto bg-gradient-to-r from-blue-600 to-blue-400 rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<i class="fa fa-star text-white text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-extrabold text-gray-800">合作优势</h3>
|
||||
<p class="text-gray-500 mt-2">与我们携手，共筑安全数字化新篇章</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5 flex-grow">
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-map-marker text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">城市独家</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-bullhorn text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">政策风口</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-leaf text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">市场蓝海</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-diamond text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">轻资产运营</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-sitemap text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">无边界客群池</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-line-chart text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">管道收益</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-4 px-4 bg-blue-50 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-lg">
|
||||
<i class="fa fa-cubes text-blue-600 text-xl w-6 flex-shrink-0 mr-4"></i>
|
||||
<h4 class="font-bold text-gray-900 text-lg">全链路赋能</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 lg:p-10 border h-full flex flex-col transition-all duration-300 hover:shadow-2xl">
|
||||
<div class="text-center mb-8">
|
||||
<i class="fa fa-handshake-o text-blue-600 text-5xl mb-4"></i>
|
||||
<h3 class="text-2xl font-extrabold text-gray-800">目标招商对象</h3>
|
||||
<p class="text-gray-500 mt-2">我们正在寻找以下类型的合作伙伴</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow">
|
||||
|
||||
<div class="space-y-6 mb-6">
|
||||
<h4 class="font-bold text-xl text-gray-800 mb-4">目标招商对象</h4>
|
||||
|
||||
<div class="bg-blue-50 p-4 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-md">
|
||||
<h5 class="font-bold text-gray-900 mb-2 flex items-center gap-1 text-base">
|
||||
<span class="text-blue-600 font-extrabold">1.</span> 本地企业服务机构
|
||||
</h5>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">财税公司</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">人力资源服务商</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">产业园运营方</span>
|
||||
</div>
|
||||
<p class="text-base text-gray-600">可依托现有企业客群快速转化。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 p-4 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-md">
|
||||
<h5 class="font-bold text-gray-900 mb-2 flex items-center gap-1 text-base">
|
||||
<span class="text-blue-600 font-extrabold">2.</span> 安全领域从业者
|
||||
</h5>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">前安全监管人员</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">安全咨询顾问</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">消防工程商</span>
|
||||
</div>
|
||||
<p class="text-base text-gray-600">具备行业资源与专业认知。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 p-4 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-md">
|
||||
<h5 class="font-bold text-gray-900 mb-2 flex items-center gap-1 text-base">
|
||||
<span class="text-blue-600 font-extrabold">3.</span> 创业转型者
|
||||
</h5>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">个体创业者</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">传统行业经营者</span>
|
||||
</div>
|
||||
<p class="text-base text-gray-600">寻求低门槛、高潜力项目，或计划拓展新业务。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 p-4 rounded-xl border border-blue-200 transition-all duration-300 hover:shadow-md">
|
||||
<h5 class="font-bold text-gray-900 mb-2 flex items-center gap-1 text-base">
|
||||
<span class="text-blue-600 font-extrabold">4.</span> 异业渠道商
|
||||
</h5>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">办公软件代理商</span>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-200 text-blue-800">工业设备供应商</span>
|
||||
</div>
|
||||
<p class="text-base text-gray-600">可通过产品捆绑实现客群互补。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-8 lg:p-10 border h-full transition-all duration-300 hover:shadow-2xl">
|
||||
<div class="text-center mb-10">
|
||||
<h3 class="text-3xl font-extrabold text-gray-800 inline-block">合作流程</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
|
||||
<div class="hidden md:block absolute top-[60px] left-[15%] right-[15%] h-1 bg-blue-300 z-0"></div>
|
||||
|
||||
<div class="relative flex flex-col items-center text-center p-4 pt-6 rounded-lg bg-blue-50 border border-blue-200 shadow-md transition-all duration-300 hover:shadow-lg z-10">
|
||||
<span class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg mb-3 shadow-lg">1</span>
|
||||
<p class="font-semibold text-gray-900 text-base">提交申请意向</p>
|
||||
<p class="text-sm text-gray-600 mt-1">通过官网或商务渠道<br>提交初步合作申请</p>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center text-center p-4 pt-6 rounded-lg bg-blue-50 border border-blue-200 shadow-md transition-all duration-300 hover:shadow-lg z-10">
|
||||
<span class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg mb-3 shadow-lg">2</span>
|
||||
<p class="font-semibold text-gray-900 text-base">资质审核与洽谈</p>
|
||||
<p class="text-sm text-gray-600 mt-1">总部对资质、能力、规划<br>进行审核和洽谈</p>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center text-center p-4 pt-6 rounded-lg bg-blue-50 border border-blue-200 shadow-md transition-all duration-300 hover:shadow-lg z-10">
|
||||
<span class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg mb-3 shadow-lg">3</span>
|
||||
<p class="font-semibold text-gray-900 text-base">签署合作协议</p>
|
||||
<p class="text-sm text-gray-600 mt-1">双方达成一致<br>签订正式的代理或合作协议</p>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center text-center p-4 pt-6 rounded-lg bg-blue-50 border border-blue-200 shadow-md transition-all duration-300 hover:shadow-lg z-10">
|
||||
<span class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg mb-3 shadow-lg">4</span>
|
||||
<p class="font-semibold text-gray-900 text-base">授权与培训启动</p>
|
||||
<p class="text-sm text-gray-600 mt-1">提供独家区域授权<br>系统培训及全方位赋能</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-10">
|
||||
<div class="flex flex-col sm:flex-row justify-center items-center gap-6">
|
||||
<a href="docs/合作申请表.xlsx" download="合作申请表.xlsx" class="w-full sm:w-auto inline-flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition-all duration-300 shadow-xl hover:shadow-2xl">
|
||||
<i class="fa fa-download mr-2"></i> 下载申请表格
|
||||
</a>
|
||||
<div class="text-center text-sm">
|
||||
<span class="font-semibold text-gray-700 block sm:inline">发送至:</span>
|
||||
<a href="mailto:zjbeifan@126.com" class="text-blue-600 font-bold ml-1 hover:text-blue-700 transition">zjbeifan@126.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
138
src/components/sections/Policy.astro
Normal file
138
src/components/sections/Policy.astro
Normal file
@@ -0,0 +1,138 @@
|
||||
---
|
||||
---
|
||||
<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>
|
||||
177
src/components/sections/SaaS.astro
Normal file
177
src/components/sections/SaaS.astro
Normal file
@@ -0,0 +1,177 @@
|
||||
<section class="py-16 md:py-24 bg-slate-50 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto space-y-24">
|
||||
|
||||
<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>
|
||||
185
src/components/sections/Timeline.astro
Normal file
185
src/components/sections/Timeline.astro
Normal file
@@ -0,0 +1,185 @@
|
||||
<section id="timeline" class="bg-slate-50">
|
||||
<div class="mb-16 relative mt-20">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-80 h-80 bg-blue-100/50 blur-[100px] rounded-full -z-10"></div>
|
||||
<div class="text-center">
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">公司介绍</span>
|
||||
</h3>
|
||||
<div class="w-20 h-1.5 bg-gradient-to-r from-blue-600 to-indigo-600 mx-auto mt-6 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-stretch gap-6 md:gap-20 max-w-7xl mx-auto">
|
||||
|
||||
<div class="w-full md:w-5/12 order-1 relative">
|
||||
<div class="md:sticky md:top-20 h-fit">
|
||||
<div class="grid grid-cols-2 gap-x-4 md:gap-x-5 gap-y-4 md:gap-y-5">
|
||||
|
||||
<div class="col-span-2 flex flex-col rounded-2xl overflow-hidden border border-gray-100 bg-white group transition-all duration-300 shadow-sm">
|
||||
<div class="relative aspect-[3/1] md:aspect-[3/1.2] overflow-hidden">
|
||||
<img src="/img/company-hangzhou.jpg" alt="杭州" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="relative p-3 md:p-4">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-white/80 backdrop-blur-md z-0"></div>
|
||||
<div class="relative z-10">
|
||||
<span class="text-blue-600/70 font-bold text-[10px] tracking-widest uppercase">Location</span>
|
||||
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">总部坐落于</h4>
|
||||
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">美丽的西子湖畔 · 杭州</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-2xl overflow-hidden border border-gray-100 bg-white group transition-all duration-300 shadow-sm">
|
||||
<div class="relative aspect-[16/10] overflow-hidden">
|
||||
<img src="/img/company-building.jpg" alt="大楼" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="relative p-3 md:p-4">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-slate-100/50 to-white/80 backdrop-blur-md z-0"></div>
|
||||
<div class="relative z-10">
|
||||
<span class="text-blue-600/70 font-bold text-[10px] tracking-widest uppercase">R&D Center</span>
|
||||
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">立足杭城CBD</h4>
|
||||
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">驱动数字研发新引擎</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-2xl overflow-hidden border border-gray-100 bg-white group transition-all duration-300 shadow-sm">
|
||||
<div class="relative aspect-[16/10] overflow-hidden">
|
||||
<img src="/img/company-showroom.jpg" alt="展示" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="relative p-3 md:p-4">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-white/80 backdrop-blur-md z-0"></div>
|
||||
<div class="relative z-10">
|
||||
<span class="text-blue-600/70 font-bold text-[10px] tracking-widest uppercase">Solutions</span>
|
||||
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">AI场景赋能</h4>
|
||||
<h4 class="text-gray-800 font-bold text-sm md:text-base mt-0.5">面向未来的数字展厅</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-7/12 order-2">
|
||||
<div class="relative">
|
||||
<div class="absolute top-0 bottom-0 left-3 md:left-6 w-px bg-gradient-to-b from-blue-600/40 via-gray-200 to-transparent z-0"></div>
|
||||
|
||||
<div class="space-y-8 md:space-y-12">
|
||||
|
||||
<div class="relative flex z-10">
|
||||
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/30 z-20 border-2 border-white"></span>
|
||||
<div class="w-full pl-10 md:pl-16">
|
||||
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-200 shadow-sm">
|
||||
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2019 公司成立</span>
|
||||
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
|
||||
<img src="/img/timeline-2019-icon.webp" alt="icon" class="w-7 h-7 object-contain">
|
||||
自研系统上线
|
||||
</h4>
|
||||
<p class="text-gray-600 text-base leading-relaxed">自主研发"车险分期"系统平台，为全国商用车领域业务赋能</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex z-10">
|
||||
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/40 z-20 border-2 border-white"></span>
|
||||
<div class="w-full pl-10 md:pl-16">
|
||||
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-200 shadow-sm">
|
||||
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2020-2022 规模化增长</span>
|
||||
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
|
||||
<img src="/img/timeline-2022-icon.webp" alt="icon" class="w-7 h-7 object-contain">
|
||||
全国市场布局
|
||||
</h4>
|
||||
<p class="text-gray-600 text-base leading-relaxed">业务规模化增长阶段，实现全国市场布局，同步优化运营体系与技术架构</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex z-10">
|
||||
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/50 z-20 border-2 border-white"></span>
|
||||
<div class="w-full pl-10 md:pl-16">
|
||||
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
|
||||
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2023–2024 技术升级</span>
|
||||
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
|
||||
<img src="/img/timeline-2024-icon.webp" alt="icon" class="w-7 h-7 object-contain">
|
||||
企安智控1.0上线
|
||||
</h4>
|
||||
<p class="text-gray-600 text-base leading-relaxed">技术研发转向工业互联网解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex z-10">
|
||||
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/60 z-20 border-2 border-white"></span>
|
||||
<div class="w-full pl-10 md:pl-16">
|
||||
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
|
||||
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2025 双赛道启航</span>
|
||||
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
|
||||
<img src="/img/timeline-2025-icon.webp" alt="icon" class="w-7 h-7 object-contain">
|
||||
业务生态构建
|
||||
</h4>
|
||||
<p class="text-gray-600 text-base leading-relaxed">SaaS系统交叉融合，构建业务生态，ToB、ToG多模块场景研发定制</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex z-10">
|
||||
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/70 z-20 border-2 border-white"></span>
|
||||
<div class="w-full pl-10 md:pl-16">
|
||||
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
|
||||
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">2026 核心聚焦</span>
|
||||
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
|
||||
<img src="/img/timeline-2026-icon.webp" alt="icon" class="w-7 h-7 object-contain">
|
||||
AI大模型与工业应用
|
||||
</h4>
|
||||
<p class="text-gray-600 text-base leading-relaxed">AI大模型、物联网IOT、融合开发DevOps，标准SaaS部署及行业应用</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex z-10">
|
||||
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/75 z-20 border-2 border-white"></span>
|
||||
<div class="w-full pl-10 md:pl-16">
|
||||
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
|
||||
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">Innovation 本地化定制</span>
|
||||
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
|
||||
<img src="/img/timeline-innovation-icon.webp" alt="icon" class="w-7 h-7 object-contain">
|
||||
多模态软件系统研发
|
||||
</h4>
|
||||
<p class="text-gray-600 text-base leading-relaxed">场景覆盖多个重点行业，核心集中在化工能源、生产制造、金融零售、城市政务、交通运输、景区文旅等领域提供从需求、方案设计、系统开发、运维交付的全周期定制化服务，助力产业数字化转型提质增效</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex z-10">
|
||||
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600/80 z-20 border-2 border-white"></span>
|
||||
<div class="w-full pl-10 md:pl-16">
|
||||
<div class="relative z-10 rounded-xl p-6 bg-white border border-gray-100 shadow-sm">
|
||||
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">Ecology 生态聚力</span>
|
||||
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
|
||||
<img src="img/timeline-ecology-icon.webp" alt="icon" class="w-7 h-7 object-contain">
|
||||
头部伙伴深度融合
|
||||
</h4>
|
||||
<p class="text-gray-600 text-base leading-relaxed">与浪潮集团、移动通讯、海康威视、阿里云、字节跳动等头部行业深度融合合作</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex z-10">
|
||||
<span class="absolute top-6 left-3 md:left-6 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600 shadow-[0_0_0_6px_rgba(37,99,235,0.15)] z-20 border-2 border-white"></span>
|
||||
<div class="w-full pl-10 md:pl-16">
|
||||
<div class="relative z-10 rounded-xl p-6 bg-gradient-to-br from-blue-600/10 to-transparent border border-blue-600/20 shadow-lg backdrop-blur-sm">
|
||||
<span class="text-blue-600 font-bold tracking-wider text-sm uppercase">Vision 愿景领航</span>
|
||||
<h4 class="text-xl font-bold mt-3 mb-2 flex items-center gap-3 text-blue-600">
|
||||
<img src="img/timeline-vision-icon.webp" alt="icon" class="w-7 h-7 object-contain">
|
||||
全场景产业数字化转型服务商
|
||||
</h4>
|
||||
<p class="text-gray-600 text-base leading-relaxed">以技术驱动产业数字化升级，以平台构建多模态安全场景赋能</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
52
src/layouts/Layout.astro
Normal file
52
src/layouts/Layout.astro
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
const { title = "浙江贝凡网络科技" } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{title}</title>
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="font-inter text-dark bg-slate-50">
|
||||
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-md shadow-lg border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-0 py-3 flex items-center justify-between">
|
||||
<a href="/" class="flex items-center space-x-3">
|
||||
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-10 w-auto">
|
||||
</a>
|
||||
<nav class="hidden lg:flex items-center space-x-6 lg:space-x-8">
|
||||
<a href="/#home" class="font-bold text-primary transition duration-300 relative hover:text-blue-600">首页</a>
|
||||
<a href="/#core-business" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">核心业务</a>
|
||||
<a href="/#ai-model" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">AI大模型</a>
|
||||
<a href="/#about-us" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">关于我们</a>
|
||||
<a href="/#recruitment" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">生态合作</a>
|
||||
</nav>
|
||||
<a href="/#contact-info" class="hidden lg:block bg-primary hover:bg-blue-600 text-white px-6 py-2 rounded-full font-bold transition-all duration-300 shadow-xl hover:shadow-2xl hover:-translate-y-0.5">
|
||||
立即咨询
|
||||
</a>
|
||||
<button id="menu-toggle" class="lg:hidden text-gray-800 focus:outline-none p-2 rounded-lg hover:bg-gray-100">
|
||||
<i class="fa fa-bars text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl">
|
||||
<div class="max-w-7xl mx-auto px-4 py-3 flex flex-col space-y-2">
|
||||
<a href="/#home" class="font-medium text-primary py-2 px-4 rounded-lg hover:bg-primary/10 transition">首页</a>
|
||||
<a href="/#core-business" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">核心业务</a>
|
||||
<a href="/#ai-model" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">AI大模型</a>
|
||||
<a href="/#about-us" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">关于我们</a>
|
||||
<a href="/#recruitment" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">生态合作</a>
|
||||
<a href="/#contact-info" class="bg-primary hover:bg-blue-600 text-white px-6 py-2.5 rounded-full font-bold text-center mt-3 transition shadow-lg">
|
||||
立即咨询
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<slot />
|
||||
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
|
||||
<i class="fa fa-arrow-up"></i>
|
||||
</button>
|
||||
<script is:inline src="/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
src/pages/index.astro
Normal file
32
src/pages/index.astro
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Hero from '../components/sections/Hero.astro';
|
||||
import Timeline from '../components/sections/Timeline.astro';
|
||||
import SaaS from '../components/sections/SaaS.astro';
|
||||
import Customization from '../components/sections/Customization.astro';
|
||||
import Policy from '../components/sections/Policy.astro';
|
||||
import AccidentCases from '../components/sections/AccidentCases.astro';
|
||||
import Hardware from '../components/sections/Hardware.astro';
|
||||
import AIModel from '../components/sections/AIModel.astro';
|
||||
import Honors from '../components/sections/Honors.astro';
|
||||
import Contact from '../components/sections/Contact.astro';
|
||||
import Partnership from '../components/sections/Partnership.astro';
|
||||
import Footer from '../components/sections/Footer.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<main>
|
||||
<Hero />
|
||||
<Timeline />
|
||||
<SaaS />
|
||||
<Customization />
|
||||
<Policy />
|
||||
<AccidentCases />
|
||||
<Hardware />
|
||||
<AIModel />
|
||||
<Honors />
|
||||
<Contact />
|
||||
<Partnership />
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
207
src/pages/intro/customized-deployment/index.astro
Normal file
207
src/pages/intro/customized-deployment/index.astro
Normal file
@@ -0,0 +1,207 @@
|
||||
---
|
||||
import Layout from '../../../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="本地化部署">
|
||||
<header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md shadow-sm">
|
||||
<div class="container mx-auto flex items-center p-4 h-16 gap-3">
|
||||
<img src="/intro/customized-deployment/img/logo.png" alt="Logo" class="h-5 w-auto flex-shrink-0">
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto pt-16">
|
||||
|
||||
<section class="py-12 bg-white overflow-hidden">
|
||||
<div class="px-4 mb-10 text-center">
|
||||
<div class="inline-flex items-center space-x-2 bg-indigo-50 text-indigo-700 px-4 py-2 rounded-full text-sm font-black tracking-widest uppercase mb-6">
|
||||
<span class="relative flex h-3 w-3">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-indigo-600"></span>
|
||||
</span>
|
||||
<span>Local Customization</span>
|
||||
</div>
|
||||
<h3 class="text-[30px] font-black text-gray-900 tracking-tight leading-tight">
|
||||
全场景<br><span class="text-indigo-600">产业数字化定制</span>
|
||||
</h3>
|
||||
<div class="w-20 h-1.5 bg-indigo-600 mx-auto mt-6 rounded-full shadow-sm shadow-indigo-100"></div>
|
||||
|
||||
<p class="mt-8 text-gray-600 text-lg leading-relaxed font-medium max-w-sm mx-auto">
|
||||
覆盖化工能源、生产制造等重点行业，提供从方案设计到运维交付的<span class="text-indigo-600 font-black underline decoration-indigo-100 underline-offset-4">全周期定制服务</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 px-4 mb-10">
|
||||
<div class="bg-indigo-50/50 p-5 rounded-[2rem] border border-indigo-100 text-center">
|
||||
<div class="text-indigo-600 font-black text-2xl mb-1">700+</div>
|
||||
<div class="text-gray-500 text-xs tracking-wider font-bold">自研核心算法</div>
|
||||
</div>
|
||||
<div class="bg-blue-50/50 p-5 rounded-[2rem] border border-blue-100 text-center">
|
||||
<div class="text-blue-600 font-black text-2xl mb-1">99.9%</div>
|
||||
<div class="text-gray-500 text-xs tracking-wider font-bold">交付满意度</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 space-y-4">
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-[2rem] border border-slate-100">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 shadow-sm shrink-0">
|
||||
<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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">化工能源</h4>
|
||||
</div>
|
||||
<p class="text-gray-600 text-[15px] leading-relaxed">
|
||||
深耕危化品全流程管控，研发<span class="text-indigo-600 font-bold">储罐区动态风险评价、人员定位及安全预警平台</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-[2rem] border border-slate-100">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 shadow-sm shrink-0">
|
||||
<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 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/></svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">生产制造</h4>
|
||||
</div>
|
||||
<p class="text-gray-600 text-[15px] leading-relaxed">
|
||||
聚焦核心生产管控，提供<span class="text-indigo-600 font-bold">MES执行系统、EAP设备自动化及AMHS物料搬运系统</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-[2rem] border border-slate-100">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 shadow-sm shrink-0">
|
||||
<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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
{<h4 class="text-xl font-black text-gray-900">金融零售</h4>}
|
||||
</div>
|
||||
<p class="text-gray-kt600 text-[15px] leading-relaxed">
|
||||
研发高并发<span class="text-indigo-600 font-bold">大数据智能风控模型、反洗钱稽查及投资组合监控平台</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-[2rem] border border-slate-100">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 shadow-sm shrink-0">
|
||||
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">智慧养老</h4>
|
||||
</div>
|
||||
<p class="text-gray-600 text-[15px] leading-relaxed">
|
||||
打造<span class="text-indigo-600 font-bold">智慧康养大脑</span>，集成毫米波雷达跌倒监测与居家健康实时预警。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-[2rem] border border-slate-100">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 shadow-sm shrink-0">
|
||||
<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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5"/></svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">城市政务</h4>
|
||||
</div>
|
||||
<p class="text-gray-600 text-[15px] leading-relaxed">
|
||||
主打治理中台，研发<span class="text-indigo-600 font-bold">超级智能体、一网统管及智能秒批审批系统</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-[2rem] border border-slate-100">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 shadow-sm shrink-0">
|
||||
<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="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1zm0 0l5 4V12l-5 4z"/></svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">交通运输</h4>
|
||||
</div>
|
||||
<p class="text-gray-600 text-[15px] leading-relaxed">
|
||||
研发调度体系，包括<span class="text-indigo-600 font-bold">无人集卡调度、高铁/航空票务流量预测模型</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-6 rounded-[2rem] border border-slate-100">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-indigo-600 shadow-sm shrink-0">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-line[cap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-black text-gray-900">医疗健康</h4>
|
||||
</div>
|
||||
<p class="text-gray-600 text-[15px] leading-relaxed">
|
||||
研发信息系统，涵盖<span class="text-indigo-600 font-bold">临床辅助决策(CDSS)、数字病人虚拟训练</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-indigo-600 to-blue-700 p-8 rounded-[2.5rem] shadow-xl relative overflow-hidden">
|
||||
<div class="absolute -top-12 -right-12 w-64 h-64 bg-white/10 rounded-full blur-3xl transition-all"></div>
|
||||
<h4 class="text-2xl font-black text-white mb-6 text-center">不限行业 · 深度定制</h4>
|
||||
|
||||
<div class="grid grid-cols-3 gap-2 mb-6">
|
||||
<span class="px-2 py-2.5 bg-white/10 rounded-xl text-base text-white border border-white/10 text-center whitespace-nowrap">司法监管</span>
|
||||
<span class="px-2 py-2.5 bg-white/10 rounded-xl text-base text-white border border-white/10 text-center whitespace-nowrap">梯次利用</span>
|
||||
<span class="px-2 py-2.5 bg-white/10 rounded-xl text-base text-white border border-white/10 text-center whitespace-nowrap">智慧教育</span>
|
||||
<span class="px-2 py-2.5 bg-white/10 rounded-xl text-base text-white border border-white/10 text-center whitespace-nowrap">电力巡检</span>
|
||||
<span class="px-2 py-2.5 bg-white/10 rounded-xl text-base text-white border border-white/10 text-center whitespace-nowrap">环境监测</span>
|
||||
<span class="px-2 py-2.5 bg-white/10 rounded-xl text-base text-white border border-white/10 text-center whitespace-nowrap">物业楼宇</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/15 border border-white/20 rounded-2xl p-5 text-center">
|
||||
<p class="text-white text-lg font-bold tracking-tight mb-1">深度定制覆盖全细分场景</p>
|
||||
<p class="text-white/70 text-base leading-relaxed">依托底层自研算法，将数字化转型延伸至每一个具体业务</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="p-4 bg-white">
|
||||
<div class="text-center mb-10 px-4">
|
||||
<h3 class="text-[28px] font-black text-gray-900 leading-tight">
|
||||
<span class="text-indigo-600">相关案例场景</span>
|
||||
</h3>
|
||||
|
||||
<div class="w-16 h-1.5 bg-indigo-600 mx-auto mt-5 rounded-full shadow-sm shadow-indigo-100"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
|
||||
<img src="/intro/customized-deployment/img/dk.png" alt="智慧低空" class="w-full h-auto object-cover">
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
|
||||
<img src="/intro/customized-deployment/img/yy.png" alt="智慧医院" class="w-full h-auto object-cover">
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
|
||||
<img src="/intro/customized-deployment/img/yl.png" alt="智慧养老" class="w-full h-auto object-cover">
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
|
||||
<img src="/intro/customized-deployment/img/yq.png" alt="智慧园区" class="w-full h-auto object-cover">
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
|
||||
<img src="/intro/customized-deployment/img/xx.png" alt="智慧学校" class="w-full h-auto object-cover">
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
|
||||
<img src="/intro/customized-deployment/img/hg.png" alt="智慧化工" class="w-full h-auto object-cover">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="p-4">
|
||||
<div class="bg-white p-6 rounded-2xl shadow-lg text-center">
|
||||
<h2 class="text-xl font-bold text-dark mb-2">本地化部署咨询</h2>
|
||||
<p class="text-gray-600 mb-4">请扫描下方二维码或致电联系我们</p>
|
||||
<img src="/intro/customized-deployment/img/wx-official-account.jpg" alt="合作二维码" class="w-kt1/2 max-w-[200px] mx-auto rounded-lg">
|
||||
<a href="tel:400-998-5710" class="mt-4 block w-full bg-primary text-white text-center py-3 rounded-xl font-bold text-lg shadow-md">
|
||||
<i class="fa fa-phone"></i> 400-998-5710
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="text-center text-xs text-gray-400 py-6 px-4 space-y-1">
|
||||
<p>© 2025 浙江贝凡网络科技. All Rights Reserved.</p>
|
||||
<p>
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-gray-600">
|
||||
浙ICP备2025170226号-4
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=33011002018371" rel="noreferrer" target="_blank" class="inline-flex items-center justify-center gap-1 hover hover:text-gray-600 transition-colors">
|
||||
<img src="/intro/customized-deployment/img/beian.png" alt="备案图标" class="w-4 h-4">
|
||||
<span>浙公网安备33011002018371号</span>
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
</Layout>
|
||||
264
src/pages/intro/hardware/index.astro
Normal file
264
src/pages/intro/hardware/index.astro
Normal file
@@ -0,0 +1,264 @@
|
||||
---
|
||||
import Layout from '../../../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="硬件场景">
|
||||
<header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md shadow-sm">
|
||||
<div class="container mx-auto flex items-center p-4 h-16 gap-3">
|
||||
<img src="/intro/hardware/img/logo.png" alt="Logo" class="h-5 w-auto flex-shrink-0">
|
||||
<div class="w-px h-5 bg-gray-200"></div>
|
||||
<span class="text-xs text-gray-500 font-semibold leading-tight">致力于打造全国领先的安全风险数智平台</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto pt-16">
|
||||
<section class="p-4">
|
||||
<h1 class="text-2xl font-bold text-dark mb-4">智能硬件产品系列</h1>
|
||||
<div class="space-y-4">
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw1.jpg" alt="吸气式感烟火灾探测器" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">吸气式感烟火灾探测器</h3>
|
||||
<p class="text-sm text-gray-600">支持烟雾背景自平衡算法、 支持气流自适应算法。耐磷化氢腐蚀，可应用在烟草熏蒸场所。防水等级达到IP66，支持低温-40℃工作，可应用在冷库场景。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw2.jpg" alt="火灾报警消防联动终端" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">火灾报警消防联动终端</h3>
|
||||
<p class="text-sm text-gray-600">支持程序网络升级、参数远程配置、远程监控中心集中管理、实时自动校时等功能模块，保证系统的便捷性、准确性、实时性。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw3.jpg" alt="点型可燃气体探测器" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">点型可燃气体探测器</h3>
|
||||
<p class="text-sm text-gray-600">催化燃烧式，支持电信AEP物联网平台，物模型ID：99014232，已接入消防云平台。一级报警设定值25%LEL，二级报警设定值50%LEL。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw4.jpg" alt="组合式电气火灾探测器" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">组合式电气火灾探测器</h3>
|
||||
<p class="text-sm text-gray-600">数据监测：剩余电流、线缆温度、环境温度、相电压、相电流、有功功率、无功功率、视在功率、功率因素、有功电能、箱体湿度检测</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw5.jpg" alt="双光谱筒型摄像机" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">双光谱筒型摄像机</h3>
|
||||
<p class="text-sm text-gray-600">支持吸烟检测、火点检测、烟雾检测。智能功能资源配置：测温、周界功能支持同时开启。测温、火点检测、烟雾检测支持同时开启。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw6.jpg" alt="行为规范摄像机" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">行为规范摄像机</h3>
|
||||
<p class="text-sm text-gray-600">支持未戴安全帽人员检测,并联动IO开关量，使音柱进行播报。支持智能[资源]模式切换：未戴安全帽检测、人脸抓拍、周界、道路监控。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw7.jpg" alt="梯控摄像机" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">梯控摄像机</h3>
|
||||
<p class="text-sm text-gray-600">支持RS-485功能，配合出厂配备的楼层感应器，可显示楼层信息。采用高效阵列红外灯，使用寿命长，红外照射距离可达10 m。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw8.jpg" alt="海螺型网络摄像机" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">海螺型网络摄像机</h3>
|
||||
<p class="text-sm text-gray-600">支持SmartIR，防止夜间红外过曝。支持背光补偿，强光抑制，3D数字降噪，数字宽动态，适应不同环境。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw9.jpg" alt="筒型网络摄像机" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">筒型网络摄像机</h3>
|
||||
<p class="text-sm text-gray-600">支持SmartIR，防止夜间红外过曝，支持背光补偿，强光抑制，3D数字降噪，数字宽动态，适应不同使用环境。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw10.jpg" alt="危化品仓库门禁" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">危化品仓库门禁</h3>
|
||||
<p class="text-sm text-gray-600">支持人脸、刷卡（IC卡、手机NFC卡、CPU卡序列号/内容、身份证卡序列号）、密码认证方式，可外接身份证、指纹、蓝牙、二维码功能模块。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw11.jpg" alt="门禁模块-人行通道" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">门禁模块-人行通道</h3>
|
||||
<p class="text-sm text-gray-600">设备标配面部识别组件、IC读卡器等多种外设，实现多样化的认证方式并降低配单及施工难度。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw12.jpg" alt="门禁模块-车行摆闸" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">[门] 门禁模块-车行摆闸</h3>
|
||||
<p class="text-sm text-gray-600">集成行星齿轮道闸，传动效率高，性能稳定，快速抬杆慢速落杆，实现快速通行。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw13.jpg" alt="无线数显压力表" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">无线数显压力表</h3>
|
||||
<p class="text-sm text-gray-600">无线数显压力表对消防水系统的消火栓、喷淋末端的压力值进行监测，采用无线通信方式定时上报设备状态信息。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw14.jpg" alt="无线数显液位表" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">无线数显液位表</h3>
|
||||
<p class="text-sm text-gray-600">无线数显液位表对消防水泵房的水池、楼顶水箱的液位值进行监测，采用无线通信方式定时上报设备状态信息。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw15.jpg" alt="电动车泡沫灭火系统" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">电动车泡沫灭火系统</h3>
|
||||
<p class="text-sm text-gray-600">一旦发现火情，启动主机内置的创新型泡沫原液和泵组，控制阀触发相应分区喷头。交叉全覆盖持续喷淋阻燃，抑制火情蔓延。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw16.jpg" alt="叉车管理系统" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">叉车管理系统</h3>
|
||||
<p class="text-sm text-gray-600">系统由人脸设别一体机、控制主机、安全带监测模块、通讯天线组成。具备持证驾驶、限速管理、电子围栏、车辆轨迹及违规驾驶五大核心功能。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw17.jpg" alt="嵌入式数据采集控制工作站" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">嵌入式数据采集控制工作站</h3>
|
||||
<p class="text-sm text-gray-600">丰富的硬件配置与强大的软件功能，用户可自行组态成适合各种工况的控制器，例如水质多参数控制器。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw18.jpg" alt="超声波液位计" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">超声波液位计</h3>
|
||||
<p class="text-sm text-gray-600">不必接触介质就能满足大部分液位/物位测量要求,彻底解决了压力式、电容式、浮子式等传统测量方式带来的缠绕、堵塞、泄露、介质腐蚀、维护不便等缺点。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw19.jpg" alt="管道式电磁流量计" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">管道式电磁流量计</h3>
|
||||
<p class="text-sm text-gray-600">测量不受流体密度、粘度、温度、压力、和电导率变化的影响，对浆液测量有独特的适应性。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw20.jpg" alt="M型压力变送器" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">M型压力变送器</h3>
|
||||
<p class="text-sm text-gray-600">内部使用扩散硅压阻式传感器，其结构简单，体积小巧，易安装；以其优良的可靠性、适用性、灵活性和多样性。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw21.jpg" alt="污泥浓度传感器" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">污泥浓度传感器</h3>
|
||||
<p class="text-sm text-gray-600">通过分析这组散射光的强度得出污泥浓度值。适用于污水处理厂的各工艺过程的污泥浓度在线监测，以及各种工业生产过程用水和废水处理过程等环节的污泥浓度在线监测。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw22.jpg" alt="余氯传感器" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">余氯传感器</h3>
|
||||
<p class="text-sm text-gray-600">采用恒电压法，可配置流通池实时检测水体中余氯含量，广泛应用于饮用水消毒监测、污水处理、泳池水质管控、食品加工用水等领域。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw23.jpg" alt="浊度传感器" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">浊度传感器</h3>
|
||||
<p class="text-sm text-gray-600">基于红外散射光技术，即光源发出的红外光在传输过程中经过被测样品时会发生散射，其散射光强度和浊度成正比关系。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw24.jpg" alt="荧光法溶解氧传感器" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">荧光法溶解氧传感器</h3>
|
||||
<p class="text-sm text-gray-600">采用先进的荧光淬灭原理对水体溶解氧浓度进行无损耗测量，具有无污染、寿命长、稳定性好、维护简单等优点。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw25.jpg" alt="电导率数字传感器" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">电导率数字传感器</h3>
|
||||
<p class="text-sm text-gray-600">采用了成熟、稳定的技术，性能优越、品质可靠。电极壳体采用不锈钢设计，具有4级电极常数可选，测温范围宽，适用于通用工业过程应用，可满足多种工况下的电/TDS在线测量需求。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw26.jpg" alt="巡检无人机" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">巡检无人机</h3>
|
||||
<p class="text-sm text-gray-600">搭载高清变焦相机红外热像仪激光雷达，快速发现设备发热等异常。检测井盖缺失、路灯故障，生成维修工单同步至相关部门，空中监控人流密度，发现拥挤点后通过地面人员疏导，预防踩踏事故。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 bg-white p-4 rounded-xl shadow-md">
|
||||
<img src="/intro/hardware/img/hw27.jpg" alt="巡检机器人" class="w-20 h-20 object-contain rounded-md flex-shrink-0">
|
||||
<div>
|
||||
<h3 class="font-bold text-dark">巡检机器人</h3>
|
||||
<p class="text-sm text-gray-600">24小时不间断巡检，避免人工夜间漏检。防爆设计适配配电房易燃易爆环境，降低kt 火灾风险，可替代人工登塔/走线，避免高空坠落、高压触电。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="p-4">
|
||||
<div class="bg-white p-6 rounded-2xl shadow-lg text-center">
|
||||
<h2 class="text-xl font-bold text-dark mb-2">业务合作</h2>
|
||||
<p class="text-gray-600 mb-4">请扫描下方二维码或致电联系我们</p>
|
||||
<img src="/intro/hardware/img/wx-official-account.jpg" alt="合作二维码" class="w-1/2 mx-auto rounded-lg">
|
||||
<a href="tel:400-998-5710" class="mt-4 block w-full bg-primary text-white text-center py-3 rounded-xl font-bold text-lg shadow-md">
|
||||
<i class="fa fa-phone"></i> 400-998-5710
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="text-center text-xs text-gray-400 py-6 px-4 space-y-1">
|
||||
<p>© 2025 浙江贝凡网络科技. All Rights Reserved.</p>
|
||||
<p>
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-gray-600">
|
||||
浙ICP备2025170226号-4
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=33011002018371" rel="noreferrer" target="_blank" class="inline-flex items-center justify-center gap-1 hover:text-gray-600 transition-colors">
|
||||
<img src="/intro/hardware/img/beian.png" alt="备案图标" class="w-4 h-4">
|
||||
<span>浙公网安备33011002018371号</span>
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
</Layout>
|
||||
83
src/pages/intro/miniapp-manual/index.astro
Normal file
83
src/pages/intro/miniapp-manual/index.astro
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
import Layout from '../../../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="平台操作指南">
|
||||
<header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md shadow-sm">
|
||||
<div class="container mx-auto flex items-center p-4 h-16 gap-3">
|
||||
<img src="/intro/miniapp-manual/img/logo.png" alt="Logo" class="h-5 w-auto flex-shrink-0">
|
||||
<div class="w-px h-5 bg-gray-200"></div>
|
||||
<span class="text-xs text-gray-500 font-semibold leading-tight">致力于打造全国领先的安全风险数智平台</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto pt-16">
|
||||
|
||||
<section class="p-4">
|
||||
<div class="bg-white p-5 rounded-2xl shadow-lg text-center">
|
||||
<i class="fa fa-paper-plane-o text-primary text-4xl mb-3"></i>
|
||||
<h1 class="text-2xl font-bold text-dark">企安智控小程序快速入门</h1>
|
||||
<p class="text-sm text-gray-500 mt-1">快速上手，掌握小程序核心用法</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="px-4 pb-4 space-y-5">
|
||||
|
||||
<div>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white p-5 rounded-2xl shadow-lg">
|
||||
<h3 class="text-lg font-bold text-dark mb-3">第一步：关注服务号</h3>
|
||||
<p class="text-gray-600 text-sm leading-relaxed mb-4">
|
||||
在微信中识别下方服务号二维码，或搜索"源享品企安智控"，点击关注我们的官方服务号。
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<img src="/intro/miniapp-manual/img/wx-official-account.jpg" alt="关注服务号二维码" class="w-2/3 mx-auto rounded-lg border border-gray-100">
|
||||
<p class="text-xs text-center text-gray-400 mt-2">源享品企安智控服务号</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/intro/miniapp-manual/img/wx-follow-screenshot.jpg" alt="关注服务号的截图" class="w-2/3 mx-auto rounded-lg border border-gray-100">
|
||||
<p class="text-xs text-center text-gray-400 mt-2">点击"关注服务号"</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ktbg-white p-5 rounded-2xl shadow-lg">
|
||||
<h3 class="text-lg font-bold text-dark mb-3">第二步：进入小程序</h3>
|
||||
<p class="text-gray-600 text-sm leading-relaxed mb-4">
|
||||
进入服务号对话界面，点击右下角的菜单栏，选择""系统登录-小程序登录"，即可拉起企安智控小程序登录页。
|
||||
</ktdiv>
|
||||
<img src="/intro/miniapp-manual/img/manual-enter-miniapp.jpg" alt="从服务号菜单进入小程序" class="w-full rounded-lg border border-gray-100 bg-slate-100">
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-2xl shadow-lg">
|
||||
<h3 class="text-lg font-bold text-dark mb-3">第三步：登录系统</h3>
|
||||
<p class="text-gray-600 text-sm leading-relaxed mb-4">
|
||||
首次进入小程序，需由企业管理员通过后台授权用户，并将获得一串初始密码。账户名即为您的手机号，输入并完成验证登录操作，请登录后按指引修改初始密码。
|
||||
</p>
|
||||
<img src="/intro/miniapp-manual/img/wx-miniapp-login.jpg" alt="小程序登录页" class="w-full rounded-lg border border-gray-100 bg-slate-100">
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-2xl shadow-lg">
|
||||
<h3 class="text-lg font-bold text-dark mb-3">平台主页面</h3>
|
||||
<p class="text-gray-600 text-sm leading-relaxed mb-4">
|
||||
成功登录后，您将看到平台主界面，这里汇总了您的待办任务及各项功能入口，快来上手试试吧！
|
||||
</p>
|
||||
<img src="/intro/miniapp-manual/img/wx-miniapp-home.jpg" alt="小程序登录后主界面" class="w-full rounded-lg border border-gray-100 bg-slate-100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="text-center text-xs text-gray-400 py-6 px-4 space-y-1">
|
||||
<p>© 2025 浙江贝凡网络科技. All Rights Reserved.</p>
|
||||
<p>
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-gray-600">
|
||||
浙ICP备2025170226号-4
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=33011002018371" rel="noreferrer" target="_blank" class="inline-flex items-center justify-center gap-1 hover:text-gray-600 transition-colors">
|
||||
<img src="/intro/miniapp-manual/img/beian.png" alt="备案图标" class="w-4 h-4">
|
||||
<span>浙公网安备33011002018371号</span>
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
</Layout>
|
||||
584
src/pages/intro/qazk/index.astro
Normal file
584
src/pages/intro/qazk/index.astro
Normal file
@@ -0,0 +1,584 @@
|
||||
---
|
||||
import Layout from '../../../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="企安安智控">
|
||||
<header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md shadowbacks-sm">
|
||||
<div class="container mx-auto flex items-center p-4 h-16 gap-3">
|
||||
<img src="/intro/qazk/img/logo.png" alt="Logo" class="h-5 w-auto flex-shrink-0">
|
||||
<div class="w-px h-5 bg-gray-200"></div>
|
||||
<span class="text-xs text-gray-500 font-semibold leading-tight">致力于打造全国领先的安全风险数智平台</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto pt-16">
|
||||
<div class="min-h-screen bg-slate-50 font-sans antialiased">
|
||||
|
||||
<section class="p-4 pb-2">
|
||||
<div class="bg-white p-6 rounded-[2.5rem] shadow-xl shadow-slate-200/50 border border-blue-50">
|
||||
<div class="relative overflow-hidden rounded-[2rem] mb-6 shadow-lg">
|
||||
<img src="/intro/qazk/img/banner.webp" alt="企安智控 AI" class="w-full h-auto">
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4">
|
||||
<p class="text-white text-sm opacity-80">由浙江贝凡网络科技提供云和AI服务</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<img src="/intro/qazk/img/qazk-logo.png" alt="LOGO" class="h-10 w-auto mr-2">
|
||||
<h1 class="text-2xl font-black text-gray-900 tracking-tight">企安智控 fanc></h1>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 text-[18px] leading-relaxed text-justify px-1">
|
||||
<strong class="text-blue-600 font-extrabold">企安智控</strong>由浙江贝凡科技自主研发，专注于为全国生产工贸型企业、园区楼宇、酒店餐饮等场景提供<strong class="text-blue-600 font-extrabold">智能安全管理解决方案</strong>。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="p-4 pt-2">
|
||||
<div class="bg-blue-600 rounded-[2.5rem] p-1 shadow-lg shadow-blue-200">
|
||||
<div class="bg-white rounded-[2.3rem] p-6">
|
||||
<p class="text-xl text-gray-900 font-bold mb-8 flex items-center gap-2">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span>
|
||||
为企业赋能：
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-5 gap-0 mb-10">
|
||||
<div class="flex flex-col items-center">
|
||||
<svg class="w-7 h-7 text-blue-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/></svg>
|
||||
<span class="text-xs font-black text-blue-900">AI算法</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<svg class="w-7 h-7 text-blue-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg>
|
||||
<span class="text-xs font-black text-blue-900">SaaS化</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<svg class="w-7 h-7 text-blue-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
|
||||
<span class="text-xs font-black text-blue-900">多端联动</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<svg class="w-7 h-7 text-blue-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
<span class="text-xs font-black text-blue-900">秒级预警</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<svg class="w-7 h-7 text-blue-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 21.241a11.955 11.955 0 01-9.618-7.257A11.967 11.967 0 0112 2.184c4.791 0 8.947 2.833 10.84 7.041z"/></svg>
|
||||
<span class="text-xs font-black text-blue-900">闭环管控</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||||
<div class="flex items-center justify-center py-4 bg-blue-600 text-white text-[17px] font-black rounded-2xl shadow-md">台账数字化</div>
|
||||
<div class="flex items-center justify-center py-4 bg-blue-600 text-white text-[17px] font-black rounded-2xl shadow-md">全天候巡检</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 border-t border-blue-50">
|
||||
<p class="text-[18px] text-blue-900 leading-relaxed font-bold text-center">
|
||||
实现隐患排查自动化、履职考核标准化，全面提升企业安全水平
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="p-4 pt-2">
|
||||
<div class="bg-red-600 rounded-[2.5rem] p-1 shadow-lg shadow-red-100">
|
||||
<div class="bg-white rounded-[2.3rem] p-6">
|
||||
<p class="text-xl text-gray-900 font-bold mb-6 flex items-center gap-2">
|
||||
<span class="w-1.5 h-6 bg-red-600 rounded-full"></span>
|
||||
辅助监管部门构建：
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div class="flex items-center justify-center py-5 bg-red-600 text-white text-lg font-black rounded-2xl shadow-lg">数据驱动</div>
|
||||
<div class="flex items-center justify-center py-5 bg-red-600 text-white text-lg font-black rounded-2xl shadow-lg">远程监管</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 mb-8">
|
||||
<div class="flex items-center justify-center py-3 bg-red-600 text-white text-lg font-black rounded-xl shadow-md">事前预警</div>
|
||||
<div class="flex items-center justify-center py-3 bg-red-600 text-white text-lg font-black rounded-xl shadow-md">事中干预</div>
|
||||
<div class="flex items[items-center justify-center py-3] justify-center py-3 bg-red-600 text-white text-lg font-black rounded-xl shadow-md">事后溯源</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 border-t border-red-50">
|
||||
<p class="text-[18px] text-red-950 leading-relaxed font-bold text-center">
|
||||
实现政策有技术抓手、风险可量化考核，全面降低社会风险
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="p-4 pt-12 bg-slate-50/50">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-[28px] font-black text-gray-900 tracking-tight leading-tight">
|
||||
最新政策导向<br>
|
||||
<span class="text-red-600">安全管理核心驱动力</span>
|
||||
</h2>
|
||||
<div class="w-20 h-1.5 bg-red-600 mx-auto mt-6 rounded-full shadow-sm shadow-red-200"></div>
|
||||
</div>
|
||||
|
||||
<div class="mb-14">
|
||||
<div class="flex items-center space-x-2 mb-8 border-l-[6px] border-red-600 pl-4">
|
||||
<h4 class="text-[22px] font-black text-gray-800">国家强制性安全生产标准</h4>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div class="bg-white rounded-[2.5rem] p-6 border border-red-100 shadow-md flex gap-6 items-center">
|
||||
<div class="w-28 h-36 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg border border-gray-100">
|
||||
<img src="/intro/qazk/img/gov-1.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-[20px] font-black text-gray-900 mb-3 leading-tight">企业安全生产标准化基本规范</h3>
|
||||
<p class="text-[15px] text-gray-700 leading-relaxed bg-red-50/80 p-3 rounded-xl border-red-600 mb-3">
|
||||
核心要求：全面建立并保持<span class="text-red-700 font-black">标准化系统</span>。
|
||||
</p>
|
||||
<div class="text-xs font-black text-red-600 tracking-widest uppercase">GB/T 33000-2016</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[2.5rem] p-6 border border-red-100 shadow-md flex gap-6 items-center">
|
||||
<div class="w-28 h-36 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg border border-gray-100">
|
||||
<img src="/intro/qazk/img/gov-2.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-[20px] font-black text-gray-900 mb-3 leading-tight">重大火灾隐患判定规则</h3>
|
||||
<p class="text-[15px] text-gray-700 leading-relaxed bg-red-50/80 p-3 rounded-xl border-red-600 mb-3">
|
||||
确立标准：统一了重大火灾隐患的<span class="text-red-700 font-black">判定基准</span>。
|
||||
</p>
|
||||
<div class="text-xs font-black text-red-600 tracking-widest uppercase">GB 35181-2017</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex items-center justify-between mb-8 border-l-[6px] border-red-600 pl-4">
|
||||
<h4 class="text-[22px] font-black text-gray-800">数字化与应急管理指引</h4>
|
||||
<div class="flex items-center text-red-600 text-[14px] font-black animate-pulse bg-red-50 px-3 py-1 rounded-full">
|
||||
左滑查看 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M13 7l5 5m0 0l-5 5[5m5-5H6]" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex overflow-x-auto gap-6 pb-10 snap-x no-scrollbar">
|
||||
|
||||
<div class="min-w-[280px] snap-center bg-white rounded-[2.2rem] p-5 border border-slate-100 shadow-lg">
|
||||
<div class="aspect-[21/29.7] w-full rounded-2xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
|
||||
<img src="/intro/qazk/img/gov-4.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<h3 class="text-[18px] font-black text-gray-900 mb-3 h-8 line-clamp-2 leading-snug">防范电动车棚火灾事故措施</h3>
|
||||
<p class="text-[15px] text-gray-600 border-l-4 border-red-100 pl-3 leading-relaxed">
|
||||
应具有<span class="text-red-600 font-black">24小时视频监控</span>，鼓励接入电气监控。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[280px] snap-center bg-white rounded-[2.2rem] p-5 border border-slate-100 shadow-lg">
|
||||
<div class="aspect-[21/29.7] w-full rounded-2xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
|
||||
<img src="/intro/qazk/img/gov-8.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<h3 class="text-[18px] font-black text-gray-900 mb-3 h-8 line-clamp-2 leading-snug">应急管理科技信息化任务书</h3>
|
||||
<p class="text-[15px] text-gray-600 border-l-4 border-red-100 pl-3 leading-relaxed">
|
||||
企业端健全监测体系，政府端<span class="text-red-600 font-black">加强数据汇聚</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[280px] snap-center bg-white rounded-[2.2rem] p-5 border border-slate-100 shadow-lg">
|
||||
<div class="aspect-[21/29.7] w-full rounded-2xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
|
||||
<img src="/intro/qazk/img/gov-9.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<h3 class="text-[18px] font-black text-gray-900 mb-3 h-8 line-clamp-2 leading-snug">餐饮业促进和管理办法</h3>
|
||||
<p class="text-[15px] text-gray-600 border-l-4 border-red-100 pl-3 leading-relaxed">
|
||||
落实经营者安全责任，明确<span class="text-red-600 font-black">数字化监管</span>支持。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[280px] snap-center bg-white rounded-[2.2rem] p-5 border border-slate-100 shadow-lg">
|
||||
<div class="aspect-[21/29.7] w-full rounded-2xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
|
||||
<img src="/intro/qazk/img/gov-10.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<h3 class="text-[18px] font-black text-gray-900 mb-3 h-8 line-clamp-2 leading-snug">安全生产责任指导意见</h3>
|
||||
<p class="text-[15px] text-gray-600 border-l-4 border-red-100 pl-3 leading-relaxed">
|
||||
单位须落实责任主体，并严格执行<span class="text-red-600 font-black">五项到位</span>要求。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[280px] snap-center bg-white rounded-[2.2rem] p-5 border border-slate-100 shadow-lg">
|
||||
<div class="aspect-[21/29.7] w-full rounded-2xl overflow-hidden mb-5 border border-slate-50 shadow-inner">
|
||||
<img src="/intro/qazk/img/gov-11.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<h3 class="text-[18px] font-black text-gray-900 mb-3 h-8 line-clamp-2 leading-snug">推进新型工业数字化意见</h3>
|
||||
<p class="text-[15px] text-gray-600 border-l-4 border-red-100 pl-3 leading-relaxed">
|
||||
智能化改造，符合条件最高获<span class="text-red-600 font-black">100万元补助</span>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</style>
|
||||
<section class="bg-slate-50 overflow-hidden">
|
||||
<div class="px-4">
|
||||
<div class="text-center mb-10 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>
|
||||
|
||||
<div class="inline-flex items-center space-x-2 bg-blue-100 text-blue-700 px-4 py-2 rounded-full text-sm font-black tracking-widest uppercase mb-6">
|
||||
<span class="relative flex h-3 w-3">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-600"></span>
|
||||
</span>
|
||||
<span>Case Analysis</span>
|
||||
</div>
|
||||
|
||||
<h3 class="text-[28px] font-black text-gray-900 tracking-tight leading-tight">
|
||||
典型事故案例<br><span class="text-blue-600">重检查 · 轻整改 · 后追责</span>
|
||||
</h3>
|
||||
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-6 rounded-full shadow-sm shadow-blue-200"></div>
|
||||
|
||||
<div class="flex justify-center mt-8">
|
||||
<div class="flex items-center text-blue-600 text-[14px] font-black animate-pulse bg-blue-50 px-4 py-1.5 rounded-full border border-blue-100">
|
||||
左滑查看更多案例
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M13 7l5 5m0 0l-5 5m5-5H6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex overflow-x-auto gap-6 snap-x snap-mandatory no-scrollbar">
|
||||
|
||||
<div class="min-w-[88vw] snap-start flex flex-col">
|
||||
<div class="bg-white rounded-[2.5rem] p-6 border border-gray-200 flex flex-col h-full">
|
||||
<h4 class="text-[20px] font-black text-gray-900 mb-5 pb-3 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 1:</span> 杭州金隅田园火灾
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-3xl overflow-hidden mb-6">
|
||||
<img src="/intro/qazk/img/sg4.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="space-y-5 flex-grow text-[15px]">
|
||||
<div class="bg-blue-50/80 p-5 rounded-2xl border-l-4 border-blue-600">
|
||||
<h5 class="font-black text-blue-700 text-base mb-2 uppercase">事故原因</h5>
|
||||
<p class="text-gray-800 leading-relaxed font-medium">消防栓<span class="text-blue-600 font-black">常年无水</span>且未及时发现，导致火灾初期无法有效扑救，延误最佳救援时机。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/60 p-5 rounded-2xl border-l-4 border-red-600">
|
||||
<h5 class="font-black text-red-700 text-base mb-2 uppercase">损失情况</h5>
|
||||
<p class="text-gray-700 leading-relaxed font-medium">价值约<span class="text-red-600 font-black text-lg">300万元</span>的住宅付之一炬，室内家具及个人昂贵资产几乎<span class="text-red-600 font-black">全部化为灰烬</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[88vw] snap-start flex flex-col">
|
||||
<div class="bg-white rounded-[2.5rem] p-6 border border-gray-200 flex flex-col h-full">
|
||||
<h4 class="text-[20px] font-black text-gray-900 mb-5 pb-3 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 2:</span> 赣州加佰加工厂火灾
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-3xl overflow-hidden mb-6">
|
||||
<img src="/intro/qazk/img/sg5.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="space-y-5 flex-grow text-[15px]">
|
||||
<div class="bg-blue-50/80 p-5 rounded-2xl border-l-4 border-blue-600">
|
||||
<h5 class="font-black text-blue-700 text-base mb-2 uppercase">事故原因</h5>
|
||||
<p class="text-gray-800 leading-relaxed font-medium">企业虽然多次收到安全整改单，但由于<span class="text-blue-600 font-black">落实不到位</span>，易燃海绵堆积引燃火源。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/60 p-5 rounded-2xl border-l-4 border-red-600">
|
||||
<h5 class="font-black text-red-700 text-base mb-2 uppercase">损失情况</h5>
|
||||
<p class="text-gray-700 leading-relaxed font-medium">厂房结构大面积坍塌，预估直接经济损失高达<span class="text-red-600 font-black text-lg">1.2亿 - 1.5亿元</span>，企业面临停产。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[88vw] snap-start flex flex-col">
|
||||
<div class="bg-white rounded-[2.5rem] p-6 border border-gray-200 flex flex-col h-full">
|
||||
<h4 class="text-[20px] font-black text-gray-900 mb-5 pb-3 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 3:</span> 萧山瓜沥厂房火灾
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-3xl overflow-hidden mb-6">
|
||||
<img src="/intro/qazk/img/sg6.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="space-y-5 flex-grow text-[15px]">
|
||||
<div class="bg-blue-50/80 p-5 rounded-2xl border-l-4 border-blue-600">
|
||||
<h5 class="font-black text-blue-700 text-base mb-2 uppercase">事故原因</h5>
|
||||
<p class="text-gray-800 leading-relaxed font-medium">存在严重的<span class="text-blue-600 font-black">消防通道占用</span>现象，火灾发生时人员撤离困难，且灭火器材过期。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/60 p-5 rounded-2xl border-l-4 border-red-600">
|
||||
<h5 class="font-black text-red-700 text-base mb-2 uppercase">损失情况</h5>
|
||||
<p class="text-gray-700 leading-relaxed font-medium">企业由于停产整顿及厂房烧毁，造成<span class="text-red-600 font-black">重大财产损失</span>，生产被迫停工。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[88vw] snap-start flex flex-col">
|
||||
<div class="bg-white rounded-[2.5rem] p-6 border border-gray-200 flex flex-col h-full">
|
||||
<h4 class="text-[20px] font-black text-gray-900 mb-5 pb-3 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 4:</span> 下沙汽配城厂房火灾
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-3xl overflow-hidden mb-6">
|
||||
<img src="/intro/qazk/img/sg7.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="space-y-5 flex-grow text-[15px]">
|
||||
<div class="bg-blue-50/80 p-5 rounded-2xl border-l-4 border-blue-600">
|
||||
<h5 class="font-black text-blue-700 text-base mb-2 uppercase">事故原因</h5>
|
||||
<p class="text-gray-800 leading-relaxed font-medium">长期高负荷运转导致<span class="text-blue-600 font-black">电气线路老化过载</span>，火花引燃了周围存放的大量塑料包材。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/60 p-5 rounded-2xl border-l-4 border-red-600">
|
||||
<h5 class="font-black text-red-700 text-base mb-2 uppercase">损失情况</h5>
|
||||
<p class="text-gray-700 leading-relaxed font-medium">库存放的原料全部烧毁，直接经济损失达<span class="text-red-600 font-black text-lg">数千万元</span>，导致后续订单无法交付。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[88vw] snap-start flex flex-col">
|
||||
<div class="bg-white rounded-[2.5rem] p-6 border border-gray-200 flex flex-col h-full">
|
||||
<h4 class="text-[20px] font-black text-gray-900 mb-5 pb-3 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 5:</span> 南京雨花台事故
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-2xl overflow-hidden mb-6">
|
||||
<img src="/intro/qazk/img/sg8.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="space-y-5 flex-grow text-[15px]">
|
||||
<div class="bg-blue-50/80 p-5 rounded-2xl border-l-4 border-blue-600">
|
||||
<h5 class="font-black text-blue-700 text-base mb-2 uppercase">事故原因</h5>
|
||||
<p class="text-gray-800 leading-relaxed font-medium">架空层违规存放的改装电动自行车发生<span class="text-blue-600 font-black">锂电池热失控</span>，火势通过天井迅速蔓延。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/60 p-5 rounded-2xl border-l-4 border-red-600">
|
||||
<h5 class="font-black text-red-700 text-base mb-2 uppercase">损失情况</h5>
|
||||
<p class="text-gray-700 leading-relaxed font-medium">此次事故造成惨重的<span class="text-red-600 font-black text-lg">15人死亡</span>及44人受伤，引发社会对消防监管的高度关注。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-[88vw] snap-start flex flex-col">
|
||||
<div class="bg-white rounded-[2.5rem] p-6 border border-gray-200 flex flex-col h-full">
|
||||
<h4 class="text-[20px] font-black text-gray-900 mb-5 pb-3 border-b border-gray-100">
|
||||
<span class="text-blue-500 mr-2">案例 6:</span> 盘锦浩业化工爆炸
|
||||
</h4>
|
||||
<div class="h-48 w-full rounded-3xl overflow-hidden mb-6">
|
||||
<img src="/intro/qazk/img/sg9.webp" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="space-y-5 flex-grow text-[15px]">
|
||||
<div class="bg-blue-50/80 p-5 rounded-2xl border-l-4 border-blue-600">
|
||||
<h5 class="font-black text-blue-700 text-base mb-2 uppercase">事故原因</h5>
|
||||
<p class="text-gray-800 leading-relaxed font-medium">在进行<span class="text-blue-600 font-black">违规带压密封</span>作业时突发爆炸，暴露了企业在风险监控方面的短板。</p>
|
||||
</div>
|
||||
<div class="bg-red-50/60 p-5 rounded-2xl border-l-4 border-red-600">
|
||||
<h5 class="font-black text-red-700 text-base mb-2 uppercase">损失情况</h5>
|
||||
<p class="text-gray-700 leading-relaxed font-medium">价值约<span class="text-red-600 font-black text-lg">300万元</span>的住宅付之一炬，室内家具及个人昂贵资产几乎<span class="text-red-600 font-black">全部化为灰烬</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</style>
|
||||
|
||||
<section class="pt-4 px-4">
|
||||
<div class="text-center mb-12 relative">
|
||||
<h2 class="text-[28px] font-black text-gray-900 tracking-tight leading-tight">
|
||||
<br><span class="text-blue-600 font-black">AI 大模型</span>
|
||||
</h2>
|
||||
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-6 rounded-full"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 pt-4">
|
||||
|
||||
<div class="bg-white p-6 md:p-10 rounded-[2.5rem] shadow-xl border border-slate-100 flex flex-col">
|
||||
<h3 class="text-2xl font-black text-gray-900 mb-10 flex items-center gap-3">
|
||||
<span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-200"></span>
|
||||
技术对比：深度理解
|
||||
</h3>
|
||||
|
||||
<div class="space-y-10">
|
||||
<div class="relative pl-6 border-l-2 border-slate-100">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-sm"></div>
|
||||
<h4 class="text-lg font-black text-gray-800 mb-4">1. 场景识别能力</h4>
|
||||
<div class="grid gap-4">
|
||||
<div class="bg-slate-50 p-5 rounded-2xl border border-slate-100">
|
||||
<p class="text-[15px] text-gray-600 leading-relaxed font-medium">
|
||||
<strong class="text-orange-600">传统算法：</strong>
|
||||
依赖固定特征，光照或场景一旦变化即失效，<span class="text-orange-700 font-bold underline decoration-orange-200 underline-offset-4">环境适应能力极弱</span>。
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-100">
|
||||
<p class="text-[15px] text-white leading-relaxed font-medium">
|
||||
<strong class="text-blue-100">大模型方案：</strong>
|
||||
模拟人类视觉逻辑，能自动理解复杂环境，<span class="text-white font-black">自主适应各种极端、多变场景</span>。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pl-6 border-l-2 border-slate-100">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-sm"></div>
|
||||
<h4 class="text-lg font-black text-gray-800 mb-4">2. 误报警准确度</h4>
|
||||
<div class="grid gap-4">
|
||||
<div class="bg-slate-50 p-5 rounded-2xl border border-b border-slate-100">
|
||||
<p class="text-[15px] text-gray-600 leading-relaxed font-medium">
|
||||
<strong class="text-orange-600">传统算法：</strong>
|
||||
无法区分干扰物，<span class="text-orange-700 font-bold underline decoration-orange-200 underline-offset-4">误报率极高</span>，经常导致安保人员产生"报警疲劳"。
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-100">
|
||||
<p class="text-[15px] text-white leading-relaxed font-medium">
|
||||
<strong class="text-blue-100">大模型方案：</strong>
|
||||
具备逻辑推理，能精准识别"塑料袋"与"火焰"，<span class="text-white font-black">将无效误报降至最低</span>。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pl-6 border-l-2 border-slate-100">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-sm"></div>
|
||||
<h4 class="text-lg font-black text-gray-800 mb-4">3. 部署响应周期</h4>
|
||||
<div class="grid gap-4">
|
||||
<div class="bg-slate-50 p-5 rounded-2xl border border-slate-100">
|
||||
<p class="text-[15px] text-gray-600 leading-relaxed font-medium">
|
||||
<strong class="text-orange-600">传统算法：</strong>
|
||||
需数周的模型训练与编程，且效果不可控，<span class="text-orange-700 font-bold underline decoration-orange-200 underline-offset-4">升级成本高、速度慢</span>。
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-100">
|
||||
<p class="text-[15px] text-white leading-relaxed font-medium">
|
||||
<strong class="text-blue-100">大模型方案：</strong>
|
||||
零样本/小样本即可启动，<span class="text-white font-black">数日内即可完成新算法上线</span>。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 md:p-10 rounded-[2.5rem] shadow-xl border border-slate-100 flex flex-col h-full">
|
||||
<h3 class="text-2xl font-black text-gray-900 mb-10 flex items-center gap-3">
|
||||
<span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-200"></span>
|
||||
核心优势：资产提效
|
||||
</h3>
|
||||
|
||||
<div class="flex-grow space-y-8">
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500">
|
||||
<i class="fa fa-camera-retro text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-black text-gray-900 text-lg mb-2 group-hover:text-blue-600">"利旧"原则 · 零硬件成本</h4>
|
||||
<p class="text-gray-500 text-[15px] leading-relaxed font-medium">直接支持海康、大华等主流品牌摄像头，无需更换昂贵的 AI 专用硬件，<span class="text-blue-600 font-black">最大限度保护已有投资</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500">
|
||||
<i class="fa fa-line-chart text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-black text-gray-900 text-lg mb-2 group-hover:text-blue-600">显著的运营降本</h4>
|
||||
<p class="text-gray-500 text-[15px] leading-relaxed font-medium">避免大规模硬件替换的巨额投入，将预算精准投入到<span class="text-blue-600 font-black text-lg">算法订阅与数据应用</span>中。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group">
|
||||
<div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500">
|
||||
<i class="fa fa-sliders text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-black text-gray-900 text-lg mb-2 group-hover:text-blue-600">弹性扩展与按需订阅</h4>
|
||||
<p class="text-gray-500 text-[15px] leading-relaxed font-medium">按需增减 AI 分析节点，灵活的月/年订阅模式，确保<span class="text-blue-600 font-black">每一分投入都与业务需求精准匹配</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-5 group border-t border-slate-50 pt-6">
|
||||
<div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500">
|
||||
<i class="fa fa-refresh text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-black text-gray-900 text-lg mb-2 group-hover:text-blue-600">能力持续进化</h4>
|
||||
<p class="text-gray-500 text-[15px] leading-relaxed font-medium">接入火山引擎 AI 算法生态，<span class="text-blue-600 font-black">在云端自动迭代</span>。您的设备无需任何操作，即可获取最新的识别能力。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-10">
|
||||
<div class="text-center mb-6">
|
||||
<h2 class="text-[28px] font-black text-gray-900 leading-tight">
|
||||
企安智控<br><span class="text-blue-600">全链条系统架构</span>
|
||||
</h2>
|
||||
<div class="w-16 h-1.5 bg-blue-600 mx-auto mt-4 rounded-full"></div>
|
||||
</div>
|
||||
<img src="/intro/qazk/img/xtjg.jpg" alt="系统架构" class="w-full h-auto block">
|
||||
</section>
|
||||
|
||||
<section class="py-10">
|
||||
<div class="text-center mb-6">
|
||||
<h2 class="text-[28px] font-black text-gray-900 leading-tight">
|
||||
秒级响应<br><span class="text-red-600">支持多渠道实时告警</span>
|
||||
</h2>
|
||||
<div class="w-16 h-1.5 bg-red-600 mx-auto mt-4 rounded-full"></div>
|
||||
</div>
|
||||
<img src="/intro/qazk/img/alart.jpg" alt="多端告警" class="w-full h-auto block">
|
||||
</section>
|
||||
|
||||
<section class="py-10">
|
||||
<div class="text-center mb-6">
|
||||
<h2 class="text-[26px] font-black text-gray-900"><span class="text-blue-600">行业赋能</span> 应用场景</h2>
|
||||
<div class="w-12 h-1 bg-blue-600 mx-auto mt-3 rounded-full opacity-50"></div>
|
||||
</div>
|
||||
<img src="/intro/qazk/img/hyfn.webp" alt="行业赋能" class="w-full h-auto block">
|
||||
</section>
|
||||
|
||||
<section class="py-10">
|
||||
<div class="text-center mb-6">
|
||||
<h2 class="text-[26px] font-black text-gray-900"><span class="text-blue-600">系统模块</span> 应用场景</h2>
|
||||
<div class="w-12 h-1 bg-blue-600 mx-auto mt-3 rounded-full opacity-50"></div>
|
||||
</div>
|
||||
<img src="/intro/qazk/img/xtmk.webp" alt="系统模块" class="w-full h-auto block">
|
||||
</section>
|
||||
|
||||
<section class="py-16 bg-white px-4">
|
||||
<div class="max-w-lg mx-auto text-center">
|
||||
<h2 class="text-[32px] font-black text-gray-900 mb-2 tracking-tight">联系我们</h2>
|
||||
<p class="text-gray-500 text-lg mb-10 font-medium">了解更多数字化安全方案<br>期待与您的深度合作</p>
|
||||
|
||||
<div class="mb-10">
|
||||
<img src="/intro/qazk/img/wx-official-account.jpg" alt="合作二维码" class="w-44 h-44 mx-auto rounded-xl shadow-md">
|
||||
</div>
|
||||
|
||||
<a href="tel:400-998-5710" class="flex items-center justify-center gap-4 w-full max-w-sm mx-auto bg-blue-600 text-white py-5 rounded-full font-black text-xl shadow-lg active:scale-95 transition-all">
|
||||
<i class="fa fa-phone"></i>
|
||||
<span>400-998-5710</span>
|
||||
</a>
|
||||
|
||||
<p class="mt-8 text-slate-400 text-xs tracking-widest font-bold uppercase">Professional · Reliable · Efficient</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-center text-xs text-gray-400 py-6 px-4 space-y-1">
|
||||
<p>© 2026 浙江贝凡网络科技. All Rights Reserved.</p>
|
||||
<p>
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-gray-600">
|
||||
浙ICP备2025170226号-4
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=33011002018371" rel="noreferrer" target="_blank" class="inline-flex items-center justify-center gap-1 hover:text-white transition-colors">
|
||||
<img src="/intro/qazk/img/beian.png" alt="备案图标" class="w-4 h-4">
|
||||
<span>浙公网安备33011002018371号</span>
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
</main>
|
||||
</Layout>
|
||||
111
src/styles/styles.css
Normal file
111
src/styles/styles.css
Normal file
@@ -0,0 +1,111 @@
|
||||
@layer utilities {
|
||||
.text-shadow {
|
||||
text-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
.transition-all-500 {
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
.scroll-animate {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
.scroll-animate.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.modal.open {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kenburns-effect {
|
||||
0% {
|
||||
transform: scale(1.1) translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translate(-3%, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
.ken-burns-active {
|
||||
animation: kenburns-effect 20s ease-out forwards;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
@keyframes bounce-x {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(6px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-bounce-x {
|
||||
animation: bounce-x 1s infinite;
|
||||
}
|
||||
|
||||
/* 核心功能：隐藏滚动条 */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* 引导箭头动画 */
|
||||
@keyframes bounce-x {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-bounce-x {
|
||||
animation: bounce-x 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* 移动端卡片宽度微调 */
|
||||
@media (max-width: 767px) {
|
||||
#policy-container {
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user