beifan/company-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: beifan:d8b77d3d3c92cdea2c44310aa0b6c239d132b75c
Branches Tags
beifan:main
..
compare: beifan:049ec90b9bb376f49c4a2f54953a56f0e3adc38b
Branches Tags
beifan:main

2 Commits
d8b77d3d3c ... 049ec90b9b

Author SHA1 Message Date
ZHENG XIAOYI
049ec90b9b style: redesign company introduction layout 2026-02-09 19:10:45 +08:00
ZHENG XIAOYI
35f57b2ce9 refactor: major overhaul of site structure and layout 2026-02-09 18:31:05 +08:00
8 changed files with 357 additions and 170 deletions
Expand all files Collapse all files

63
README.md
View File

@@ -10,6 +10,53 @@
## 项目结构
```
beifan.cn/
├── src/
│ ├── layouts/
│ │ └── Layout.astro # 主布局组件（包含导航栏、页脚等）
│ ├── pages/
│ │ ├── index.astro # 首页（公司介绍）
│ │ ├── qazk/ # 企安智控页面
│ │ │ └── index.astro
│ │ ├── customization/ # 本地化定制页面
│ │ │ └── index.astro
│ │ ├── partnership/ # 生态合作页面
│ │ │ └── index.astro
│ │ └── intro/ # 独立产品页面
│ │ ├── qazk/ # 企安智控详情页
│ │ ├── hardware/ # 硬件物联详情页
│ │ ├── customized-deployment/ # 本地化定制详情页
│ │ └── miniapp-manual/ # 小程序手册页
│ ├── components/
│ │ └── sections/ # 各功能区块组件
│ │ ├── Hero.astro
│ │ ├── Timeline.astro
│ │ ├── SaaS.astro
│ │ ├── Customization.astro
│ │ ├── Policy.astro
│ │ ├── AccidentCases.astro
│ │ ├── Hardware.astro
│ │ ├── AIModel.astro
│ │ ├── Honors.astro
│ │ ├── Contact.astro
│ │ ├── Partnership.astro
│ │ └── Footer.astro
│ └── styles/
│ └── global.css # 全局样式
├── public/ # 静态资源
│ ├── img/ # 图片资源
│ ├── js/ # JavaScript 文件
│ ├── docs/ # 文档资源
│ └── intro/ # Intro 页面的静态资源
│ ├── qazk/
│ ├── hardware/
│ ├── customized-deployment/
│ └── miniapp-manual/
├── astro.config.mjs # Astro 配置文件
├── tailwind.config.mjs # Tailwind CSS 配置文件
├── package.json # 项目依赖配置
└── pnpm-lock.yaml # pnpm 锁文件
```
beifan.cn/
├── src/
@@ -64,22 +111,27 @@ beifan.cn/
包含以下内容区块：
- **Hero 区域**：全场景产业数字化转型服务介绍
- **公司介绍**：浙江贝凡发展历程时间轴
- **SaaS化系统**：企安智控智能安全管理解决方案
- **本地化定制**：多行业全场景定制服务
- **公司荣誉资质**：企业资质展示
- **联系我们**：联系方式展示
- **页脚**：版权信息、ICP备案等
### 2. 核心业务页面 - `/core-business`
### 2. 企安智控页面 - `/qazk`
包含以下内容区块：
- **SaaS化系统**：企安智控智能安全管理解决方案
- **最新政策导向**：安全生产相关政策法规
- **典型事故案例**：重大事故案例分析
- **硬件物联**：12个物联网应用场景
- **AI大模型**：15个AI应用场景
- **页脚**：版权信息、ICP备案等
### 3. 生态合作页面 - `/partnership`
### 3. 本地化定制页面 - `/customization`
包含以下内容区块：
- **本地化定制**：多行业全场景定制服务
- **页脚**：版权信息、ICP备案等
### 4. 生态合作页面 - `/partnership`
包含以下内容区块：
- **生态合作**：合作伙伴信息
@@ -189,7 +241,8 @@ const { title = "浙江贝凡网络科技", activeNav = "home" } = Astro.props;
const navItems = [
{ id: 'home', label: '公司介绍', href: '/', icon: 'fa-building' },
{ id: 'core-business', label: '核心业务', href: '/core-business', icon: 'fa-cogs' },
{ id: 'qazk', { label: '企安智控', href: '/qazk', icon: 'fa-cogs' },
{ id: 'customization', label: '本地化定制', href: '/customization', icon: 'fa-wrench' },
{ id: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
];
---

2
src/components/sections/Partnership.astro
View File

@@ -1,6 +1,6 @@
---
---
<section id="recruitment" class="py-16 md:py-24 bg-white">
<section id="recruitment">
<div class="max-w-7xl mx-auto px-4 lg:px-0">
<div class="mb-16 relative">

2
src/components/sections/SaaS.astro
View File

@@ -1,4 +1,4 @@
<section class="py-16 md:py-24 bg-slate-50 overflow-hidden">
<section class="bg-slate-50 overflow-hidden">
<div class="max-w-7xl mx-auto space-y-24 px-4 lg:px-0">
<style>

439
src/components/sections/Timeline.astro
View File

@@ -1,183 +1,308 @@
<section id="timeline" class="bg-slate-50">
<div class="mb-16 relative mt-20">
<div class="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">
<div class="text-center mb-12">
<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 px-4 lg:px-0">
<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 class="max-w-7xl mx-auto px-4 lg:px-0 mb-20">
<div class="relative mb-16">
<div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 rounded-3xl blur-3xl opacity-30"></div>
<div class="relative bg-gradient-to-br from-white via-blue-50/50 to-indigo-50/50 backdrop-blur-xl rounded-[2.5rem] p-8 md:p-16 border border-blue-100/50 shadow-2xl shadow-blue-200/20">
<div class="flex flex-col lg:flex-row gap-12 items-center">
<div class="flex-1">
<div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500/10 rounded-full mb-6">
<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
<span class="text-blue-600 text-sm font-semibold tracking-wider uppercase">About Us</</span>
</div>
<p class="text-gray-700 text-lg md:text-xl leading-relaxed mb-6">
浙江贝凡网络科技有限公司是一家专注于<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 font-bold">产业数字化转型</span>的高科技企业，总部坐落于美丽的<span class="text-blue-600 font-bold">西子湖畔 · 杭州</span>。
</p>
<p class="text-gray-600 text-base md:text-lg leading-relaxed mb-6">
依托<span class="text-indigo-600 font-semibold">AI大模型</span>、<span class="text-blue-600 font-semibold">物联网IoT</span>、<span class="text-indigo-600 font-semibold">融合开发DevOps</span>等技术优势，为政府和企业提供<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 font-semibold">全场景的数字化解决方案</span>。与<span class="text-blue-600 font-semibold">浪潮集团</span>、<span class="text-indigo-600 font-semibold">中国移动</span>、<span class="text-purple-600 font-semibold">海康威视</span>、<span class="text-cyan-600 font-semibold">阿里云</span>、<span class="text-blue-600 font-semibold">字节跳动</span>等头部企业深度融合合作，构建强大的业务生态体系。
</p>
</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 class="flex-shrink-0 w-full lg:w-auto">
<div class="grid grid-cols-2 gap-4">
<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-blue-100 hover:bg-white hover:shadow-xl hover:shadow-blue-200/50 hover:scale-105 transition-all duration-300">
<div class="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 mb-1">2019</div>
<div class="text-gray-600 text-sm font-medium">成立年份</div>
</div>
<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-indigo-100 hover:bg-white hover:shadow-xl hover:shadow-indigo-200/50 hover:scale-105 transition-all duration-300">
<div class="absolute -top-1 -right-1 w-3 h-3 bg-indigo-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 mb-1">700+</div>
<div class="text-gray-600 text-sm font-medium">视觉理解算法</div>
</div>
<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-blue-100 hover:bg-white hover:shadow-xl hover:shadow-blue-200/50 hover:scale-105 transition-all duration-300">
<div class="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600 mb-1">99.9%</div>
<div class="text-gray-600 text-sm font-medium">SLA可用性</div>
</div>
<div class="group relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-purple-100 hover:bg-white hover:shadow-xl hover:shadow-purple-200/50 hover:scale-105 transition-all duration-300">
<div class="absolute -top-1 -right-1 w-3 h-3 bg-purple-500 rounded-full animate-pulse" style="animation-delay: 0.6s"></div>
<div class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 mb-1">15+</div>
<div class="text-gray-600 text-sm font-medium">合作伙伴</div>
</div>
</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="mb-16">
<div class="flex items-center justify-center gap-4 mb-10">
<div class="h-[1px] w-20 bg-gradient-to-r from-transparent to-blue-600"></div>
<h4 class="text-2xl md:text-3xl font-bold text-gray-900">核心技术引擎</h4>
<div class="h-[1px] w-20 bg-gradient-to-l from-transparent to-blue-600"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500">
<div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-cyan-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-blue-500/30">
<i class="fa fa-cogs text-white text-2xl"></i>
</div>
<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">AI大模型</h5>
<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">多模态人工智能技术<br>提供智能决策与分析能力</p>
</div>
</div>
<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-indigo-500/10 transition-all duration-500">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
<div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-indigo-500/30">
<i class="fa fa-globe text-white text-2xl"></i>
</div>
<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">物联网IoT</h5>
<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">海量设备接入与汇总，实现万物互联</p>
</div>
</div>
<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-purple-500/10 transition-all duration-500">
<div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-pink-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-purple-500/30">
<i class="fa fa-code text-white text-2xl"></i>
</div>
<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">融合开发DevOps</h5>
<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">全流程自动化开发运维，提升交付效率</p>
</div>
</div>
<div class="group relative bg-white rounded-3xl p-1 shadow-xl shadow-gray-200/50 hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500">
<div class="absolute inset-0 bg-gradient-to-br from-cyan-600 to-blue-600 rounded-[1.3rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative h-full bg-white rounded-[1.2rem] p-6 group-hover:bg-transparent transition-colors duration-500">
<div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-lg shadow-cyan-500/30">
<i class="fa fa-shield text-white text-2xl"></i>
</div>
<h5 class="text-xl font-bold text-gray-900 group-hover:text-white mb-3 transition-colors">安全可信</h5>
<p class="text-gray-500 text-sm leading-relaxed group-hover:text-white/80 transition-colors">企业级安全防护体系，保障数据安全</p>
</div>
</div>
</div>
</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 class="mb-12">
<div class="flex items-center justify-center gap-4 mb-10">
<div class="h-[1px] w-20 bg-gradient-to-r from-transparent to-indigo-600"></div>
<h4 class="text-2xl md:text-3xl font-bold text-gray-900">服务生态</h4>
<div class="h-[1px] w-20 bg-gradient-to-l from-transparent to-indigo-600"></div>
</div>
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-indigo-600/10 to-purple-600/10 blur-3xl rounded-full"></div>
<div class="relative flex flex-wrap gap-4 justify-center p-4">
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 hover:text-white hover:border-transparent hover:shadow-blue-500/30 transition-all duration-300 cursor-default">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
<i class="fa fa-flask text-sm"></i>
化工能源
</span>
</span>
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-indigo-600 hover:to-purple-600 hover:text-white hover:border-transparent hover:shadow-indigo-500/30 transition-all duration-300 cursor-default">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
<i class="fa fa-cogs text-sm"></i>
生产制造
</span>
</span>
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white hover:border-transparent hover:shadow-purple-500/30 transition-all duration-300 cursor-default">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
<i class="fa fa-line-chart text-sm"></i>
金融零售
</span>
</span>
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-cyan-600 hover:to-blue-600 hover:text-white hover:border-transparent hover:shadow-cyan-500/30 transition-all duration-300 cursor-default">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-600 to-blue-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
<i class="fa fa-building text-sm"></i>
城市政务
</span>
</span>
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 hover:text-white hover:border-transparent hover:shadow-blue-500/30 transition-all duration-300 cursor-default">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
<i class="fa fa-truck text-sm"></i>
交通运输
</span>
</span>
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-indigo-600 hover:to-purple-600 hover:text-white hover:border-transparent hover:shadow-indigo-500/30 transition-all duration-300 cursor-default">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
<i class="fa fa-camera text-sm"></i>
景区文旅
</span>
</span>
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white hover:border-transparent hover:shadow-purple-500/30 transition-all duration-300 cursor-default">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
<i class="fa fa-heart text-sm"></i>
智慧养老
</span>
</span>
<span class="group relative px-6 py-3 bg-white/70 backdrop-blur-sm rounded-full text-gray-700 font-semibold shadow-lg border border-white/30 hover:bg-gradient-to-r hover:from-cyan-600 hover:to-blue-600 hover:text-white hover:border-transparent hover:shadow-cyan-500/30 transition-all duration-300 cursor-default">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-600 to-blue-600 opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
<i class="fa fa-medkit text-sm"></i>
医疗健康
</span>
</span>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 lg:px-0 pb-20">
<div class="text-center mb-16">
<h3 class="text-2xl md:text-3xl font-bold text-gray-900">发展历程</h3>
<div class="w-16 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mx-auto mt-4 rounded-full"></div>
</div>
<div class="flex flex-col md:flex-row items-stretch gap-8 md:gap-20">
<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="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 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 bg-gradient-to-b from-blue-600/40 via-gray-200 to-transparent z-0"></div>
<div class="space-y-8 md:space-y-10">
<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">
技术升级
</h4>
<p class="text-gray-600 text-base leading-relaxed">技术研发转向工业互联网解决方案，企安智控1.0上线</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 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">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">
核心聚焦
</h4>
<p class="text-gray-600 text-base leading-relaxed">AI大模型、物联网IOT、融合开发DevOps，标准SaaS部署及行业应用，全场景产业数字化转型服务商</p>
</div>
</div>
</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>

3
src/layouts/Layout.astro
View File

@@ -5,7 +5,8 @@ const { title = "浙江贝凡网络科技", activeNav = "home" } = Astro.props;
const navItems = [
{ id: 'home', label: '公司介绍', href: '/', icon: 'fa-building' },
{ id: 'core-business', label: '核心业务', href: '/core-business', icon: 'fa-cogs' },
{ id: 'qazk', label: '企安智控', href: '/qazk', icon: 'fa-cogs' },
{ id: 'customization', label: '本地化定制', href: '/customization', icon: 'fa-wrench' },
{ id: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
];

10
src/pages/customization/index.astro Normal file
View File

@@ -0,0 +1,10 @@
---
import Layout from '../../layouts/Layout.astro';
import Customization from '../../components/sections/Customization.astro';
---
<Layout title="本地化定制 - 浙江贝凡网络科技" activeNav="customization">
<main class="pt-20">
<Customization />
</main>
</Layout>

4
src/pages/index.astro
View File

@@ -2,8 +2,6 @@
import Layout from '../layouts/Layout.astro';
import Hero from '../components/sections/Hero.astro';
import Timeline from '../components/sections/Timeline.astro';
import SaaS from '../components/sections/SaaS.astro';
import Customization from '../components/sections/Customization.astro';
import Honors from '../components/sections/Honors.astro';
import Contact from '../components/sections/Contact.astro';
---
@@ -12,8 +10,6 @@ import Contact from '../components/sections/Contact.astro';
<main>
<Hero />
<Timeline />
<SaaS />
<Customization />
<Honors />
<Contact />
</main>

4
src/pages/core-business/index.astro → src/pages/qazk/index.astro
View File

@@ -1,13 +1,15 @@
---
import Layout from '../../layouts/Layout.astro';
import SaaS from '../../components/sections/SaaS.astro';
import Policy from '../../components/sections/Policy.astro';
import AccidentCases from '../../components/sections/AccidentCases.astro';
import Hardware from '../../components/sections/Hardware.astro';
import AIModel from '../../components/sections/AIModel.astro';
---
<Layout title="核心业务 - 浙江贝凡网络科技" activeNav="core-business">
<Layout title="企安智控 - 浙江贝凡网络科技" activeNav="qazk">
<main class="pt-20">
<SaaS />
<Policy />
<AccidentCases />
<Hardware />