259 lines
8.3 KiB
Markdown
259 lines
8.3 KiB
Markdown
# 贝凡官网
|
||
|
||
浙江贝凡网络科技公司官方网站，提供企业介绍、产品展示、解决方案等信息的现代化网站。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**：[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 # 首页（公司介绍）
|
||
│ │ ├── 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种智能硬件产品展示
|
||
- **本地化定制**：全场景产业数字化定制方案
|
||
- **小程序手册**：企安智控小程序使用指南
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
```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: '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
|