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

refactor: split single-page landing into three separate pages

Browse Source
This commit is contained in:
郑肖毅
2026-02-09 15:04:43 +08:00
parent bf7fc2d434
commit f89ac6baf0
9 changed files with 172 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
README.md
View File

@@ -16,14 +16,18 @@ beifan.cn/
│ ├── layouts/
│ │ └── Layout.astro # 主布局组件（包含导航栏、页脚等）
│ ├── pages/
│ │ ├── index.astro # 首页
│ │ └── intro/
│ │ ├── index.astro # 首页（公司介绍）
│ │ ├── core-business/ # 核心业务页面
│ │ │ └── index.astro
│ │ ├── partnership/ # 生态合作页面
│ │ │ └── index.astro
│ │ └── intro/ # 独立产品页面
│ │ ├── qazk/ # 企安智控详情页
│ │ ├── hardware/ # 硬件物联详情页
│ │ ├── customized-deployment/ # 本地化定制详情页
│ │ └── miniapp-manual/ # 小程序手册页
│ ├── components/
│ │ └── sections/ # 首页各功能区块组件
│ │ └── sections/ # 各功能区块组件
│ │ ├── Hero.astro
│ │ ├── Timeline.astro
│ │ ├── SaaS.astro
@@ -36,9 +40,9 @@ beifan.cn/
│ │ ├── Contact.astro
│ │ ├── Partnership.astro
│ │ └── Footer.astro
│ ├── styles/
│ │ └── global.css # 全局样式
文件├── public/ # 静态资源
│ └── styles/
│ └── global.css # 全局样式
├── public/ # 静态资源
│ ├── img/ # 图片资源
│ ├── js/ # JavaScript 文件
│ ├── docs/ # 文档资源
@@ -53,6 +57,42 @@ beifan.cn/
└── pnpm-lock.yaml # pnpm 锁文件
```
## 页面结构
### 1. 首页（公司介绍）- `/`
包含以下内容区块：
- **Hero 区域**：全场景产业数字化转型服务介绍
- **公司介绍**：浙江贝凡发展历程时间轴
- **核心业务 1 - SaaS化系统**：企安智控智能安全管理解决方案
- **核心业务 2 - 本地化定制**：多行业全场景定制服务
- **公司荣誉资质**：企业资质展示
- **联系我们**：联系方式展示
- **页脚**：版权信息、ICP备案等
### 2. 核心业务页面 - `/core-business`
包含以下内容区块：
- **最新政策导向**：安全生产相关政策法规
- **典型事故案例**：重大事故案例分析
- **核心业务 3 - 硬件物联**：12个物联网应用场景
- **AI大模型**：15个AI应用场景
### 3. 生态合作页面 - `/partnership`
包含以下内容区块：
- **生态合作**：合作伙伴信息
- **页脚**：版权信息、ICP备案等
### 4. 独立产品页面（Intro）
这些页面使用独立的导航栏和样式：
- **企安智控**：智能安全管理平台详细介绍
- **硬件物联**：27种智能硬件产品展示
- **本地化定制**：全场景产业数字化定制方案
- **小程序手册**：企安智控小程序使用指南
## 快速开始
### 安装依赖
@@ -89,38 +129,6 @@ pnpm build
pnpm preview
```
## 功能特性
- 响应式设计，支持桌面端和移动端
- 基于 Astro 的静态站点生成，加载速度快
- Tailwind CSS 提供丰富的实用样式类
- 模块化组件设计，便于维护和扩展
- 支持 Type checking（通过 Astro Check）
## 站点内容
### 主页
- **Hero 区域**：全场景产业数字化转型服务介绍
- **公司介绍**：浙江贝凡发展历程时间轴
- **核心业务 1 - SaaS化系统**：企安智控智能安全管理解决方案
- **核心业务 2 - 本地化定制**：多行业全场景定制服务
- **最新政策导向**：安全生产相关政策法规
- **典型事故案例**：重大事故案例分析
- **核心业务 3 - 硬件物联**：12个物联网应用场景
- **AI大模型**：15个AI应用场景
- **公司荣誉资质**：企业资质展示
- **联系我们**：联系方式展示
- **生态合作**：合作伙伴信息
- **页脚**：版权信息、ICP备案等
### Intro 子页面
- **企安智控**：智能安全管理平台详细介绍
- **硬件物联**：27种智能硬件产品展示
- **本地化定制**：全场景产业数字化定制方案
- **小程序手册**：企安智控小程序使用指南
## 配置说明
### Astro 配置
@@ -160,6 +168,41 @@ export default {
}
```
### 导航栏配置
导航栏在 `src/layouts/Layout.astro` 中统一管理，采用**单行紧凑设计**，支持导航高亮：
**桌面端：**
- 单行布局，三个板块并排显示
- 胶囊式按钮设计，每个板块包含**图标 + 标题**
- 当前页面：**蓝色填充背景 + 白色文字**高亮显示
- 非当前页面：灰色文字，悬停显示淡蓝色背景
**移动端：**
- 卡片式设计，包含图标容器和标题
- 当前页面蓝色高亮并显示对勾标记
```astro
---
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: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
];
---
```
## 功能特性
- 响应式设计，支持桌面端和移动端
- 基于 Astro 的静态站点生成，加载速度快
- Tailwind CSS 提供丰富的实用样式类
- 模块化组件设计，便于维护和扩展
- 导航栏自动高亮当前页面
- 支持类型检查（通过 Astro Check）
## 部署
### 静态部署

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

@@ -1,7 +1,7 @@
---
---
<section class="bg-slate-50 overflow-hidden">
<div class="max-w-7xl mx-auto space-y-24">
<div class="max-w-7xl mx-auto space-y-24 px-4 lg:px-0">
<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>

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

@@ -3,10 +3,17 @@
<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 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 lg:grid-cols-2 gap-12">

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

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

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

@@ -9,7 +9,7 @@
</div>
</div>
<div class="flex flex-col md:flex-row items-stretch gap-6 md:gap-20 max-w-7xl mx-auto">
<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">

71
src/layouts/Layout.astro
View File

@@ -1,5 +1,19 @@
---
const { title = "浙江贝凡网络科技" } = Astro.props;
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: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
];
function getNavLinkClass(itemId: string) {
const baseClass = 'flex items-center gap-2 px-4 py-2.5 rounded-full font-medium transition-all duration-300';
if (itemId === activeNav) {
return `${baseClass} bg-primary text-white shadow-md`;
}
return `${baseClass} text-gray-600 hover:text-primary hover:bg-primary/10`;
}
---
<html lang="zh-CN">
@@ -16,29 +30,46 @@ const { title = "浙江贝凡网络科技" } = Astro.props;
<a href="/" class="flex items-center space-x-3">
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-10 w-auto">
</a>
<nav class="hidden lg:flex items-center space-x-6 lg:space-x-8">
<a href="/#home" class="font-bold text-primary transition duration-300 relative hover:text-blue-600">首页</a>
<a href="/#core-business" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">核心业务</a>
<a href="/#ai-model" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">AI大模型</a>
<a href="/#about-us" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">关于我们</a>
<a href="/#recruitment" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">生态合作</a>
</nav>
<a href="/#contact-info" class="hidden lg:block bg-primary hover:bg-blue-600 text-white px-6 py-2 rounded-full font-bold transition-all duration-300 shadow-xl hover:shadow-2xl hover:-translate-y-0.5">
立即咨询
<nav class="hidden lg:flex items-center gap-3">
{
navItems.map(item => (
<a href={item.href} class={getNavLinkClass(item.id)}>
<i class={`fa ${item.icon}`}></i>
<span>{item.label}</span>
</a>
<button id="menu-toggle" class="lg:hidden text-gray-800 focus:outline-none p-2 rounded-lg hover:bg-gray-100">
))
}
</nav>
<a href="/#contact-info" class="hidden lg:flex items-center gap-2 bg-primary hover:bg-blue-600 text-white px-5 py-2.5 rounded-full font-bold transition-all duration-300 shadow-lg hover:shadow-xl">
<i class="fa fa-phone"></i>
<span>立即咨询</span>
</a>
<button id="menu-toggle" class="lg:hidden text-gray-800 focus:outline-none p-3 rounded-xl hover:bg-gray-100 border border-gray-200">
<i class="fa fa-bars text-xl"></i>
</button>
</div>
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl">
<div class="max-w-7xl mx-auto px-4 py-3 flex flex-col space-y-2">
<a href="/#home" class="font-medium text-primary py-2 px-4 rounded-lg hover:bg-primary/10 transition">首页</a>
<a href="/#core-business" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">核心业务</a>
<a href="/#ai-model" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">AI大模型</a>
<a href="/#about-us" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">关于我们</a>
<a href="/#recruitment" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">生态合作</a>
<a href="/#contact-info" class="bg-primary hover:bg-blue-600 text-white px-6 py-2.5 rounded-full font-bold text-center mt-3 transition shadow-lg">
立即咨询
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl pb-4">
<div class="max-w-7xl mx-auto px-4 pt-4 space-y-2">
{
navItems.map(item => (
<a href={item.href} class={`flex items-center gap-4 p-4 rounded-xl transition-all ${item.id === activeNav ? 'bg-primary/10 border-2 border-primary' : 'hover:bg-gray-50 border-2 border-transparent'}`}>
<div class={`w-12 h-12 rounded-xl flex items-center justify-center ${item.id === activeNav ? 'bg-primary' : 'bg-gray-100'}`}>
<i class={`fa ${item.icon} text-xl ${item.id === activeNav ? 'text-white' : 'text-gray-600'}`}></i>
</div>
<div class="flex-1">
<span class={`text-base font-bold block ${item.id === activeNav ? 'text-primary' : 'text-gray-800'}`}>{item.label}</span>
</div>
{
item.id === activeNav && <i class="fa fa-check-circle text-primary text-xl"></i>
}
</a>
))
}
<a href="/#contact-info" class="flex items-center gap-4 p-4 rounded-xl bg-primary text-white mt-4">
<i class="fa fa-phone text-xl"></i>
<span class="text-base font-bold">立即咨询</span>
<i class="fa fa-arrow-right ml-auto"></i>
</a>
</div>
</div>

16
src/pages/core-business/index.astro Normal file
View File

@@ -0,0 +1,16 @@
---
import Layout from '../../layouts/Layout.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">
<main class="pt-20">
<Policy />
<AccidentCases />
<Hardware />
<AIModel />
</main>
</Layout>

12
src/pages/index.astro
View File

@@ -4,29 +4,19 @@ import Hero from '../components/sections/Hero.astro';
import Timeline from '../components/sections/Timeline.astro';
import SaaS from '../components/sections/SaaS.astro';
import Customization from '../components/sections/Customization.astro';
import Policy from '../components/sections/Policy.astro';
import AccidentCases from '../components/sections/AccidentCases.astro';
import Hardware from '../components/sections/Hardware.astro';
import AIModel from '../components/sections/AIModel.astro';
import Honors from '../components/sections/Honors.astro';
import Contact from '../components/sections/Contact.astro';
import Partnership from '../components/sections/Partnership.astro';
import Footer from '../components/sections/Footer.astro';
---
<Layout>
<Layout title="浙江贝凡网络科技 - 全场景 ‧ 产业数字化转型服务商" activeNav="home">
<main>
<Hero />
<Timeline />
<SaaS />
<Customization />
<Policy />
<AccidentCases />
<Hardware />
<AIModel />
<Honors />
<Contact />
<Partnership />
</main>
<Footer />
</Layout>

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

@@ -0,0 +1,10 @@
---
import Layout from '../../layouts/Layout.astro';
import Partnership from '../../components/sections/Partnership.astro';
---
<Layout title="生态合作 - 浙江贝凡网络科技" activeNav="partnership">
<main class="pt-20">
<Partnership />
</main>
</Layout>