贝凡官网
浙江贝凡网络科技公司官方网站，提供企业介绍、产品展示、解决方案等信息的现代化网站。
技术栈
- 框架：Astro 5.7.3 - 现代化的静态站点生成器
- 样式：Tailwind CSS - 实用优先的 CSS 框架
- 包管理器：pnpm - 快速、节省磁盘空间的包管理器
项目结构
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/ │ ├── layouts/ │ │ └── Layout.astro # 主布局组件（包含导航栏、页脚等） │ ├── pages/ │ │ ├── index.astro # 首页（公司介绍） │ │ ├── core-business/ # 核心业务页面 │ │ │ └── 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 锁文件
## 页面结构
### 1. 首页（公司介绍）- `/`
包含以下内容区块：
- **Hero 区域**：全场景产业数字化转型服务介绍
- **公司介绍**：浙江贝凡发展历程时间轴
- **公司荣誉资质**：企业资质展示
- **联系我们**：联系方式展示
- **页脚**：版权信息、ICP备案等
### 2. 企安智控页面 - `/qazk`
包含以下内容区块：
- **SaaS化系统**：企安智控智能安全管理解决方案
- **最新政策导向**：安全生产相关政策法规
- **典型事故案例**：重大事故案例分析
- **硬件物联**：12个物联网应用场景
- **AI大模型**：15个AI应用场景
- **页脚**：版权信息、ICP备案等
### 3. 本地化定制页面 - `/customization`
包含以下内容区块：
- **本地化定制**：多行业全场景定制服务
- **页脚**：版权信息、ICP备案等
### 4. 生态合作页面 - `/partnership`
包含以下内容区块：
- **生态合作**：合作伙伴信息
- **页脚**：版权信息、ICP备案等
### 4. 独立产品页面（Intro）
这些页面使用独立的导航栏和样式：
- **企安智控**：智能安全管理平台详细介绍
- **硬件物联**：27种智能硬件产品展示
- **本地化定制**：全场景产业数字化定制方案
- **小程序手册**：企安智控小程序使用指南
## 快速开始
### 安装依赖
```bash
pnpm install
开发模式
启动本地开发服务器：
pnpm dev
访问 http://localhost:4321 查看网站。
构建生产版本
构建静态站点：
pnpm build
构建产物将输出到 dist/ 目录。
预览构建结果
预览生产构建：
pnpm preview
配置说明
Astro 配置
项目使用了 Astro 的 Tailwind 集成，在 astro.config.mjs 中配置：
import tailwind from '@astrojs/tailwind';
import { defineConfig } from 'astro/config';
export default defineConfig({
integrations: [tailwind()],
});
Tailwind 配置
在 tailwind.config.mjs 中扩展了主题颜色：
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36D399',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
},
plugins: [],
}
导航栏配置
导航栏在 src/layouts/Layout.astro 中统一管理，采用单行紧凑设计，支持导航高亮：
桌面端：
- 单行布局，三个板块并排显示
- 胶囊式按钮设计，每个板块包含图标 + 标题
- 当前页面：蓝色填充背景 + 白色文字高亮显示
- 非当前页面：灰色文字，悬停显示淡蓝色背景
移动端：
- 卡片式设计，包含图标容器和标题
- 当前页面蓝色高亮并显示对勾标记
---
const { title = "浙江贝凡网络科技", activeNav = "home" } = Astro.props;
const navItems = [
{ id: 'home', label: '公司介绍', href: '/', icon: 'fa-building' },
{ 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' },
];
---
功能特性
- 响应式设计，支持桌面端和移动端
- 基于 Astro 的静态站点生成，加载速度快
- Tailwind CSS 提供丰富的实用样式类
- 模块化组件设计，便于维护和扩展
- 导航栏自动高亮当前页面
- 支持类型检查（通过 Astro Check）
部署
静态部署
项目构建为静态站点，可部署到任何静态托管服务：
- Vercel
- Netlify
- GitHub Pages
- Cloudflare Pages
- 阿里云 OSS
- 腾讯云 COS
部署时只需将 dist/ 目录的内容上传到静态托管服务即可。
许可证
© 2026 浙江贝凡网络科技有限公司. All Rights Reserved.
- ICP 备案：浙ICP备2025170226号-4
- 公安备案：浙公网安备33011002018371号
联系方式
- 电话：400-998-5710
- 网址：https://beifan.cn