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>
|
||||
Reference in New Issue
Block a user