# 贝凡官网

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

## 技术栈

- **框架**：[Astro 5.7.3](https://astro.build) - 现代化的静态站点生成器
- **样式**：[Tailwind CSS](https://tailwindcss.com) - 实用优先的 CSS 框架
- **包管理器**：[pnpm](https://pnpm.io) - 快速、节省磁盘空间的包管理器

## 项目结构

```
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 区域**：全场景产业数字化转型服务介绍
- **公司介绍**：浙江贝凡发展历程时间轴
- **SaaS化系统**：企安智控智能安全管理解决方案
- **本地化定制**：多行业全场景定制服务
- **公司荣誉资质**：企业资质展示
- **联系我们**：联系方式展示
- **页脚**：版权信息、ICP备案等

### 2. 核心业务页面 - `/core-business`

包含以下内容区块：
- **最新政策导向**：安全生产相关政策法规
- **典型事故案例**：重大事故案例分析
- **硬件物联**：12个物联网应用场景
- **AI大模型**：15个AI应用场景
- **页脚**：版权信息、ICP备案等

### 3. 生态合作页面 - `/partnership`

包含以下内容区块：
- **生态合作**：合作伙伴信息
- **页脚**：版权信息、ICP备案等

### 4. 独立产品页面（Intro）

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

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

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 开发模式

启动本地开发服务器：

```bash
pnpm dev
```

访问 http://localhost:4321 查看网站。

### 构建生产版本

构建静态站点：

```bash
pnpm build
```

构建产物将输出到 `dist/` 目录。

### 预览构建结果

预览生产构建：

```bash
pnpm preview
```

## 配置说明

### Astro 配置

项目使用了 Astro 的 Tailwind 集成，在 `astro.config.mjs` 中配置：

```javascript
import tailwind from '@astrojs/tailwind';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [tailwind()],
});
```

### Tailwind 配置

在 `tailwind.config.mjs` 中扩展了主题颜色：

```javascript
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` 中统一管理，采用**单行紧凑设计**，支持导航高亮：

**桌面端：**
- 单行布局，三个板块并排显示
- 胶囊式按钮设计，每个板块包含**图标 + 标题**
- 当前页面：**蓝色填充背景 + 白色文字**高亮显示
- 非当前页面：灰色文字，悬停显示淡蓝色背景

**移动端：**
- 卡片式设计，包含图标容器和标题
- 当前页面蓝色高亮并显示对勾标记

```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）

## 部署

### 静态部署

项目构建为静态站点，可部署到任何静态托管服务：

- **Vercel**
- **Netlify**
- **GitHub Pages**
- **Cloudflare Pages**
- **阿里云 OSS**
- **腾讯云 COS**

部署时只需将 `dist/` 目录的内容上传到静态托管服务即可。

## 许可证

© 2026 浙江贝凡网络科技有限公司. All Rights Reserved.

- ICP 备案：浙ICP备2025170226号-4
- 公安备案：浙公网安备33011002018371号

## 联系方式

- 电话：400-998-5710
- 网址：https://beifan.cn