贝凡官网

浙江贝凡网络科技公司官方网站，提供企业介绍、产品展示、解决方案等信息的现代化网站。

技术栈

• 框架：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/
│   │       │   └── index.astro    # 企安智控详情页
│   │       ├── hardware/
│   │       │   └── index.astro    # 硬件物联详情页
│   │       ├── customized-deployment/
│   │       │   └── index.astro    # 本地化定制详情页
│   │       └── miniapp-manual/
│   │           └── index.astro    # 小程序手册页
│   ├── components/
│   │   ├── sections/
│   │   │   ├── Hero.astro         # Hero 区域组件
│   │   │   ├── CompanyIntro.astro  # 公司介绍组件
│   │   │   ├── DevelopmentHistory.astro # 发展历程组件
│   │   │   ├── DataVisualization.astro # 数据可视化组件
│   │   │   ├── Honors.astro       # 公司荣誉资质组件
│   │   │   ├── Contact.astro       # 联系方式组件
│   │   │   ├── SaaS.astro         # SaaS化系统组件
│   │   │   ├── Policy.astro       # 政策导向组件
│   │   │   ├── AccidentCases.astro # 事故案例组件
│   │   │   ├── Hardware.astro      # 硬件物联组件
│   │   │   ├── AIModel.astro       # AI大模型组件
│   │   │   ├── Customization.astro # 本地化定制组件
│   │   │   ├── Partnership.astro   # 生态合作组件
│   │   │   └── Footer.astro       # 页脚组件
│   │   └── script.js               # 组件脚本
│   └── styles/
│       └── styles.css              # 全局样式
├── public/                        # 静态资源
│   ├── img/                        # 图片资源
│   │   ├── partner-search.webp     # 合作伙伴搜索图片
│   │   ├── cooperation-process.webp # 合作流程图片
│   │   └── shake-hands.webp        # 握手合作图片
│   ├── js/
│   │   └── script.js               # JavaScript 文件
│   ├── docs/
│   │   └── 合作申请表.xlsx         # 文档资源
│   ├── intro/                      # Intro 页面的静态资源
│   │   ├── qazk/                   # 企安智控页面资源
│   │   └── hardware/               # 硬件物联页面资源
│   ├── favicon.ico                 # 网站图标
│   ├── robots.txt                  # 爬虫规则
│   └── sitemap.xml                 # 网站地图
├── .env                            # 环境变量
├── .gitignore                      # Git 忽略文件
├── astro.config.mjs                # Astro 配置文件
├── tailwind.config.mjs             # Tailwind CSS 配置文件
└── package.json                    # 项目依赖配置

页面结构

1. 首页（公司介绍）- /

包含以下内容区块：

• Hero 区域：全场景产业数字化转型服务介绍
• 公司介绍：公司基本信息和发展理念
• 发展历程：浙江贝凡发展历程时间轴
• 数据可视化：企业关键数据展示（视觉理解大模型、SLA可用性、合作伙伴、软著专利）
• 生态合作：合作伙伴展示
• 联系我们：联系方式展示
• 页脚：版权信息、ICP备案等

2. 企安智控页面 - /qazk

包含以下内容区块：

• SaaS化系统：企安智控智能安全管理解决方案
• 最新政策导向：安全生产相关政策法规
• 典型事故案例：重大事故案例分析
• 硬件物联：12个物联网应用场景
• AI大模型：15个AI应用场景
• 页脚：版权信息、ICP备案等

3. 本地化定制页面 - /customization

包含以下内容区块：

• 本地化定制：多行业全场景定制服务
• 页脚：版权信息、ICP备案等

4. 生态合作页面 - /partnership

包含以下内容区块：

• 携手合作，共创未来，共享市场红利：合作优势卡片（包含8个合作优势）
• 我们需要找的合作伙伴：目标招商对象卡片（包含4类合作伙伴）
• 合作流程：合作流程卡片（包含4步合作流程）
• 页脚：版权信息、ICP备案等

4. 独立产品页面（Intro）

这些页面使用独立的导航栏和样式：

• 企安智控：智能安全管理平台详细介绍
• 硬件物联：27种智能硬件产品展示
• 本地化定制：全场景产业数字化定制方案
• 小程序手册：企安智控小程序使用指南

快速开始

安装依赖

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