commit 59cfe620fe60fd47d6b5b75a50b5cb26823aebbc
Author: ylweng <mapleaf@aitoagro.com>
Date:   Tue Sep 2 01:23:16 2025 +0800

    添加 IntelliJ IDEA 项目配置文件

diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..7d05e99
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,10 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# 依赖于环境的 Maven 主目录路径
+/mavenHomeManager.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/UniappTool.xml b/.idea/UniappTool.xml
new file mode 100644
index 0000000..f7328e8
--- /dev/null
+++ b/.idea/UniappTool.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="cn.fjdmy.uniapp.UniappProjectDataService">
+    <option name="generalBasePath" value="$PROJECT_DIR$" />
+    <option name="manifestPath" value="$PROJECT_DIR$/manifest.json" />
+    <option name="pagesPath" value="$PROJECT_DIR$/pages.json" />
+    <option name="scanNum" value="1" />
+    <option name="type" value="store" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..03d9549
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..589c940
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/niumall.iml" filepath="$PROJECT_DIR$/.idea/niumall.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/niumall.iml b/.idea/niumall.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/.idea/niumall.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..8306744
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1b13661
--- /dev/null
+++ b/README.md
@@ -0,0 +1,47 @@
+# NiuMall 项目
+
+## 项目结构
+
+本项目采用模块化架构设计，包含以下主要目录：
+
+### 📁 backend - 后端服务
+后端API服务，基于Node.js/Java/Python等技术栈开发
+
+### 📁 admin-system - 管理后台
+基于Vue/React的管理后台前端项目
+
+### 📁 website - 官网
+公司官网或电商平台前端项目
+
+### 📁 mini_program - 微信小程序矩阵
+包含多个微信小程序项目的目录
+
+### 📁 docs - 文档目录
+项目文档、API文档、设计文档等
+
+### 📁 test - 测试文件目录
+单元测试、集成测试、端到端测试等
+
+## 开发规范
+
+1. 每个目录下应有独立的package.json和开发配置
+2. 遵循统一的代码规范和提交规范
+3. 文档及时更新，保持与代码同步
+
+## 快速开始
+
+```bash
+# 安装依赖（根据具体项目）
+npm install
+
+# 启动开发服务
+npm run dev
+```
+
+## 贡献指南
+
+1. Fork 项目
+2. 创建特性分支
+3. 提交更改
+4. 推送到分支
+5. 开启Pull Request
\ No newline at end of file
diff --git a/admin-system/README.md b/admin-system/README.md
new file mode 100644
index 0000000..7f673b9
--- /dev/null
+++ b/admin-system/README.md
@@ -0,0 +1,38 @@
+# Admin System 管理后台
+
+## 技术栈
+- Vue 3 + TypeScript
+- Element Plus / Ant Design Vue
+- Vue Router
+- Pinia状态管理
+- Axios HTTP客户端
+
+## 项目结构
+```
+admin-system/
+├── src/
+│   ├── views/         # 页面组件
+│   ├── components/    # 公共组件
+│   ├── router/        # 路由配置
+│   ├── store/         # 状态管理
+│   ├── api/           # API接口
+│   ├── utils/         # 工具函数
+│   └── assets/        # 静态资源
+├── public/            # 公共文件
+├── tests/             # 测试文件
+├── package.json
+└── README.md
+```
+
+## 功能模块
+- 用户管理
+- 商品管理
+- 订单管理
+- 数据统计
+- 系统设置
+
+## 开发规范
+1. 使用Composition API
+2. TypeScript严格模式
+3. 组件命名规范
+4. 代码分割和懒加载
\ No newline at end of file
diff --git a/backend/README.md b/backend/README.md
new file mode 100644
index 0000000..e3f3026
--- /dev/null
+++ b/backend/README.md
@@ -0,0 +1,30 @@
+# Backend 后端服务
+
+## 技术栈
+- Node.js/Express/Nest.js
+- 数据库：MySQL/MongoDB/Redis
+- 消息队列：RabbitMQ/Kafka
+- 缓存：Redis
+- 文件存储：MinIO/阿里云OSS
+
+## 项目结构
+```
+backend/
+├── src/
+│   ├── controllers/    # 控制器层
+│   ├── services/       # 服务层
+│   ├── models/         # 数据模型
+│   ├── middleware/     # 中间件
+│   ├── utils/          # 工具函数
+│   └── config/         # 配置文件
+├── tests/              # 测试文件
+├── package.json
+└── README.md
+```
+
+## 开发规范
+1. 使用ES6+语法
+2. 遵循RESTful API设计规范
+3. 错误处理统一格式
+4. 日志记录规范
+5. 安全防护措施
\ No newline at end of file
diff --git a/docs/Live-Cattle-Procurement-SOP-System-PRD.md b/docs/Live-Cattle-Procurement-SOP-System-PRD.md
new file mode 100644
index 0000000..0edca71
--- /dev/null
+++ b/docs/Live-Cattle-Procurement-SOP-System-PRD.md
@@ -0,0 +1,207 @@
+# Live Cattle Procurement Intelligent Digital System - Product Requirements Document
+
+## Version History
+| Version | Date | Author | Description |
+|---------|------|--------|-------------|
+| v1.0 | 2024-01-20 | Product Manager | Initial PRD |
+
+## 1. Project Overview
+
+### 1.1 Project Background
+To address issues of information opacity, non-standard processes, and difficult risk control in live cattle procurement, develop a digital management system for live cattle procurement SOP.
+
+### 1.2 Project Objectives
+- Achieve standardized, digital management of procurement processes
+- Improve procurement efficiency and reduce operational risks
+- Ensure traceable cattle quality and secure transactions
+
+### 1.3 Success Criteria
+- 30% reduction in procurement process time
+- Operational error rate reduced to below 1%
+- Customer satisfaction rate reaches 95% or higher
+
+## 2. User Roles and Use Cases
+
+### 2.1 User Roles
+| Role | Responsibilities | System Permissions |
+|------|-----------------|-------------------|
+| Purchaser | Initiate procurement needs, confirm acceptance, approve payments | Order creation, acceptance confirmation, payment approval |
+| Trader | Forward orders, manage suppliers, handle fund settlement | Order management, supplier management, settlement processing |
+| Supplier | Prepare cattle, manage loading, provide documents | Cattle information maintenance, loading management, document upload |
+| Driver | Execute transportation, report status, handle document transfer | Transport tracking, status reporting, document confirmation |
+| Internal Staff | Internal operations and management | Internal system access and management functions |
+
+### 2.2 Core Use Cases
+1. **Procurement Order Management** - Purchaser creates orders, trader forwards orders
+2. **Cattle Verification Management** - Supplier prepares cattle, uploads quarantine certificates
+3. **Transport Tracking Management** - Driver reports real-time transport status
+4. **Arrival Acceptance Management** - Purchaser confirms acceptance, handles exceptions
+5. **Settlement Payment Management** - Automatic calculation of payments, online payment
+
+## 3. Functional Requirements
+
+### 3.1 Procurement Planning Phase
+#### User Story: As a Purchaser, I want to create procurement orders, so that procurement requirements are clear
+**Acceptance Criteria:**
+- Given the purchaser logs into the system
+- When filling in "Procurement Order" information
+- Then the system generates a pending confirmation order
+- And includes complete information such as breed, weight, quantity, unit price
+
+#### User Story: As a Trader, I want to review supplier qualifications, so that supplier compliance is ensured
+**Acceptance Criteria:**
+- Given the trader views supplier information
+- When verifying business license and quarantine certificate issuance capability
+- Then the system records review results
+- And supports document file upload and viewing
+
+### 3.2 Pre-loading Preparation
+#### User Story: As a Driver, I want to complete vehicle registration, so that transport vehicles are compliant
+**Acceptance Criteria:**
+- Given the driver prepares for loading
+- When uploading empty truck weighing video and disinfection certificate
+- Then the system verifies video completeness
+- And on-site veterinarian confirms disinfection certificate online
+
+#### User Story: As a Supplier, I want to prepare cattle verification, so that cattle meet requirements
+**Acceptance Criteria:**
+- Given the supplier prepares for loading
+- When providing "Animal Quarantine Qualification Certificate"
+- And ensuring empty water and empty trough time ≥ 8 hours
+- Then the system records verification information
+- And supports weight range configuration for different breeds
+
+### 3.3 Transport Delivery
+#### User Story: As a Driver, I want to report real-time transport status, so that the purchasing party knows transport progress
+**Acceptance Criteria:**
+- Given the driver is during transport
+- When automatically reporting location and cattle status every 10 minutes
+- Then the system records transport trajectory
+- And supports video status reporting
+
+#### User Story: As a Purchaser, I want to perform arrival acceptance, so that cattle quality is ensured
+**Acceptance Criteria:**
+- Given within 2 hours after cattle arrival
+- When the purchaser accepts the cattle
+- Then the system records acceptance results
+- And supports exception situation recording and handling
+
+### 3.4 Settlement Payment
+#### User Story: As a System, I want to automatically calculate settlement amount, so that manual errors are reduced
+**Acceptance Criteria:**
+- Given acceptance is completed
+- When the system obtains loading weight and unit price
+- Then automatically calculates: loading weight × unit price - advance payment
+- And generates settlement statement
+
+#### User Story: As a Purchaser, I want to make online payment of balance, so that transaction is completed
+**Acceptance Criteria:**
+- Given within 3 hours after acceptance
+- When the purchaser confirms the settlement statement
+- Then the system supports online payment
+- And generates payment voucher
+
+### 3.5 Exception Handling
+#### User Story: As a System, I want to automatically calculate penalty fees, so that违约处理 is standardized
+**Acceptance Criteria:**
+- Given违约情况 occurs
+- When the system identifies违约类型
+- Then calculates penalty at 0.5% of daily contract amount
+- And generates违约处理单
+
+## 4. Non-Functional Requirements
+
+### 4.1 Performance Requirements
+- System response time: < 2 seconds
+- Concurrent users: Support 100+ users online simultaneously
+- Data storage: Video files permanently saved
+
+### 4.2 Security Requirements
+- Data transmission encryption: HTTPS protocol
+- Identity authentication: Multi-factor authentication
+- Permission control: Role-based access control
+- Data backup: Automatic daily backup
+
+### 4.3 Reliability Requirements
+- System availability: 99.9%
+- Fault recovery: < 30 minutes
+- Data consistency: Transaction integrity guarantee
+
+## 5. Technical Architecture
+
+### 5.1 Mini-Program Matrix (uni-app Technology)
+- **Client Mini-Program**: For purchasers to create orders and track progress
+- **Supplier Mini-Program**: For suppliers to manage cattle preparation and documents
+- **Driver Mini-Program**: For drivers to report transport status and locations
+- **Internal Staff Mini-Program**: For internal operations and management
+
+### 5.2 Unified System Architecture
+- **Single Database**: All three systems (Website, Admin System, Mini-Programs) use the same database
+- **Unified User Center**: Single sign-on across all platforms with consistent authentication
+- **Consistent Interaction Design**: Unified UI/UX design standards across all interfaces
+- **Real-time Data Sync**: WebSocket-based real-time data synchronization
+
+### 5.3 System Integration
+- **API Gateway**: Unified API management and authentication
+- **Microservices Architecture**: Modular service design for scalability
+- **Message Queue**: Asynchronous processing for better performance
+- **Cloud Storage**: Secure file and video storage solution
+
+## 6. Prototype Description
+
+### 6.1 Interface Key Elements
+- **Dashboard View**: Visualized procurement process status
+- **Order Management**: Integrated order creation, review, and tracking
+- **Map View**: Real-time transport trajectory display
+- **Video Monitoring**: Loading and unloading process video viewing
+- **Settlement Center**: Automatic calculation, online payment
+
+### 6.2 Interaction Flow
+1. Purchaser creates order → Trader confirms forwarding → Supplier accepts order
+2. Supplier prepares cattle → Uploads certificate documents → Driver vehicle registration
+3. Loading monitoring → Transport tracking → Arrival acceptance
+4. System automatic settlement → Online payment → Document archiving
+
+## 7. Scope Definition
+
+### This Version Includes:
+- Complete digital management of live cattle procurement process
+- Full functionality for five user roles (including internal staff)
+- Dual order process (Purchaser→Trader→Supplier)
+- Real-time transport tracking and status reporting
+- Automated settlement and payment processing
+- Uni-app based mini-program matrix
+- Unified database and user center
+- Consistent interaction design across all platforms
+
+### This Version Excludes:
+- Cattle breeding management functionality
+- Sales-side functionality
+- Complex financial accounting functions
+- Multi-language support
+
+## 8. Priority Ranking
+
+### P0 (Highest Priority)
+- Procurement order creation and management
+- Cattle verification and document management
+- Real-time transport status tracking
+- Arrival acceptance and exception handling
+- Unified user authentication system
+- Real-time data synchronization
+
+### P1 (High Priority)
+- Automated settlement calculation
+- Online payment functionality
+- Document archiving and management
+- Data statistics and analysis
+- Mini-program development (uni-app)
+- API gateway implementation
+
+### P2 (Medium Priority)
+- Mobile APP development
+- System integration interfaces
+- Advanced reporting functionality
+- Message notification system
+- Performance optimization
+- Security enhancement features
\ No newline at end of file
diff --git a/docs/官网需求文档.md b/docs/官网需求文档.md
new file mode 100644
index 0000000..64889d6
--- /dev/null
+++ b/docs/官网需求文档.md
@@ -0,0 +1,345 @@
+# 官网需求文档 - 活牛采购智能数字化系统
+
+## 版本历史
+| 版本 | 日期 | 作者 | 说明 |
+|------|------|------|------|
+| v1.0 | 2024-01-25 | 产品经理 | 初版官网需求文档 |
+
+## 1. 项目概述
+
+### 1.1 项目背景
+为配合活牛采购智能数字化系统的推广和客户服务，开发专业的企业官网，展示系统功能价值，提供产品介绍和客户服务入口。
+
+### 1.2 项目目标
+- 建立专业的企业形象和品牌展示
+- 清晰传达活牛采购智能数字化系统的核心价值
+- 提供系统功能演示和客户咨询入口
+- 支持潜在客户了解和试用系统
+
+### 1.3 成功标准
+- 官网访问转化率达到5%以上
+- 平均页面停留时间超过2分钟
+- 客户咨询量提升50%
+- 搜索引擎关键词排名前3
+
+## 2. 目标用户分析
+
+### 2.1 主要用户群体
+| 用户类型 | 需求特点 | 访问目的 |
+|----------|----------|----------|
+| 养殖企业主 | 规模化养殖，采购需求频繁 | 了解系统如何规范采购流程 |
+| 贸易商 | 中介服务，需要效率工具 | 寻找订单管理和结算工具 |
+| 供应商 | 牛只供应，需要客户资源 | 展示资质，接入采购平台 |
+| 行业从业者 | 职业发展，行业信息 | 了解行业动态和技术趋势 |
+
+### 2.2 用户场景
+1. **信息获取型**：通过搜索引擎找到官网，了解系统功能
+2. **需求明确型**：已有采购需求，直接寻找解决方案
+3. **比较选择型**：对比多个系统，评估性价比
+4. **售后服务型**：现有客户，需要技术支持
+
+## 3. 功能需求
+
+### 3.1 核心页面功能
+
+#### 3.1.1 首页（Landing Page）
+**用户故事**：As a 潜在客户, I want to 快速了解系统价值, so that 决定是否深入了解
+**功能要求：**
+- 企业LOGO和品牌口号展示
+- 核心功能亮点轮播展示
+- 客户案例和数据统计展示
+- 主要功能模块快捷入口
+- 咨询入口和试用申请按钮
+
+#### 3.1.2 产品介绍页
+**用户故事**：As a 详细调研用户, I want to 深入了解系统功能, so that 评估是否适合
+**功能要求：**
+- 系统架构和技术栈介绍
+- 四大用户角色功能详解
+- 采购全流程可视化展示
+- 系统特色和优势说明
+- 功能演示视频嵌入
+
+#### 3.1.3 解决方案页
+**用户故事**：As a 有特定需求用户, I want to 找到针对性的解决方案, so that 解决具体问题
+**功能要求：**
+- 按行业细分解决方案
+- 按企业规模定制方案
+- 成功案例详细分析
+- ROI计算器和效益分析
+
+#### 3.1.4 客户案例页
+**用户故事**：As a 谨慎决策用户, I want to 查看真实客户反馈, so that 建立信任
+**功能要求：**
+- 客户成功案例展示
+- 客户评价和 testimonials
+- 使用数据统计和效果验证
+- 案例分类和筛选功能
+
+#### 3.1.5 关于我们页
+**用户故事**：As a 关注企业背景用户, I want to 了解公司实力, so that 建立合作信心
+**功能要求：**
+- 公司发展历程和里程碑
+- 团队介绍和专家资质
+- 合作伙伴和资质认证
+- 联系信息和办公地址
+
+#### 3.1.6 新闻动态页
+**用户故事**：As a 行业关注者, I want to 获取最新资讯, so that 了解行业动态
+**功能要求：**
+- 行业新闻和公司动态
+- 产品更新和技术文章
+- 活动信息和会议报道
+- 分类筛选和搜索功能
+
+#### 3.1.7 联系我们页
+**用户故事**：As a 有意向客户, I want to 方便地联系企业, so that 获取详细咨询
+**功能要求：**
+- 多联系方式（电话、邮箱、微信）
+- 在线客服系统集成
+- 预约演示表单
+- 地图定位和交通指引
+
+### 3.2 交互功能需求
+
+#### 3.2.1 在线咨询系统
+**用户故事**：As a 潜在客户, I want to 实时咨询问题, so that 快速获得解答
+**功能要求：**
+- 在线客服聊天窗口
+- 常见问题自动回复
+- 客服工作时间显示
+- 留言和回拨功能
+
+#### 3.2.2 试用申请功能
+**用户故事**：As a 感兴趣用户, I want to 申请系统试用, so that 体验系统功能
+**功能要求：**
+- 试用申请表单
+- 企业信息收集
+- 需求描述字段
+- 自动邮件确认
+
+#### 3.2.3 资料下载功能
+**用户故事**：As a 深入研究用户, I want to 下载详细资料, so that 后续参考
+**功能要求：**
+- 产品手册PDF下载
+- 技术白皮书下载
+- 案例研究文档
+- 需要联系信息换取资料
+
+#### 3.2.4 预约演示功能
+**用户故事**：As a 决策者, I want to 预约产品演示, so that 深入了解系统
+**功能要求：**
+- 在线预约日历
+- 时间段选择
+- 参会人员信息
+- 自动提醒和确认
+
+## 4. 非功能需求
+
+### 4.1 性能要求
+- 页面加载时间：< 3秒
+- 首屏加载时间：< 1.5秒
+- 移动端适配：完美响应式
+- 浏览器兼容性：Chrome, Firefox, Safari, Edge
+
+### 4.2 SEO优化要求
+- 页面标题和meta描述优化
+- 结构化数据标记
+- 面包屑导航
+- XML网站地图
+- 页面速度优化
+
+### 4.3 安全要求
+- HTTPS加密传输
+- 表单数据验证和过滤
+- 防止XSS和CSRF攻击
+- 定期安全扫描
+
+### 4.4 可访问性要求
+- WCAG 2.1 AA标准合规
+- 键盘导航支持
+- 屏幕阅读器兼容
+- 颜色对比度达标
+
+## 5. 设计规范
+
+### 5.1 视觉设计
+**色彩方案：**
+- 主色调：农业绿色(#4CAF50)
+- 辅助色：深蓝色(#1976D2)
+- 中性色：灰色调(#f5f5f5, #eeeeee, #9e9e9e)
+- 强调色：橙色(#FF9800)
+
+**字体规范：**
+- 中文：思源黑体
+- 英文：Inter字体
+- 字号：14px/16px/18px/20px/24px/32px/48px
+
+### 5.2 内容规范
+**文案风格：**
+- 专业但不晦涩
+- 简洁明了
+- 重点突出
+- 呼唤行动
+
+**图片规范：**
+- 高质量专业摄影
+- 统一风格和色调
+- 优化加载性能
+- alt标签完整
+
+### 5.3 交互规范
+**导航设计：**
+- 主导航固定顶部
+- 面包屑导航
+- 页脚全面链接
+- 返回顶部按钮
+
+**表单设计：**
+- 清晰标签和占位符
+- 即时验证反馈
+- 进度指示器
+- 成功/错误状态
+
+## 6. 技术实施方案
+
+### 6.1 技术栈选择
+- **前端技术**：HTML5 + Bootstrap 5
+- **JavaScript**：原生JavaScript + jQuery（可选）
+- **样式框架**：Bootstrap 5 + 自定义CSS
+- **构建工具**：无构建步骤或使用轻量级工具（如Gulp）
+- **响应式设计**：Bootstrap网格系统
+
+### 6.2 项目结构
+```
+website/
+├── css/                # 样式文件
+│   ├── bootstrap.min.css
+│   ├── custom.css       # 自定义样式
+│   └── responsive.css   # 响应式调整
+├── js/                 # JavaScript文件
+│   ├── bootstrap.bundle.min.js
+│   ├── jquery.min.js    # 可选
+│   └── main.js         # 主要业务逻辑
+├── images/             # 图片资源
+│   ├── logo.png
+│   ├── hero-banner.jpg
+│   └── icons/
+├── pages/              # HTML页面文件
+│   ├── index.html      # 首页
+│   ├── product.html    # 产品介绍
+│   ├── solutions.html  # 解决方案
+│   ├── cases.html      # 客户案例
+│   ├── about.html      # 关于我们
+│   ├── news.html       # 新闻动态
+│   └── contact.html    # 联系我们
+├── includes/           # 公共包含文件
+│   ├── header.html     # 头部导航
+│   ├── footer.html     # 页脚
+│   └── scripts.html    # 公共脚本
+└── assets/             # 其他静态资源
+    ├── fonts/          # 字体文件
+    ├── docs/           # 文档资料
+    └── favicon.ico
+```
+
+### 6.3 第三方服务集成
+- **数据分析**：Google Analytics + 百度统计
+- **在线客服**：腾讯云客服或类似服务
+- **邮件服务**：SendGrid或Mailchimp
+- **地图服务**：高德地图API
+- **表单处理**：Formspree或自定义后端
+
+## 7. 内容策略
+
+### 7.1 核心内容规划
+**首页：**
+- 吸引人的主标语和价值主张
+- 关键功能亮点展示
+- 客户信任指标（用户数、交易额等）
+- 明确的行动号召
+
+**产品页：**
+- 系统功能模块详细介绍
+- 技术架构和安全性说明
+- 移动端和PC端功能对比
+- 集成和扩展能力
+
+**解决方案：**
+- 按行业分类的解决方案
+- 按企业规模的定制方案
+- 成功案例引用
+- 效益分析和ROI计算
+
+### 7.2 SEO内容规划
+**目标关键词：**
+- 活牛采购系统
+- 畜牧业管理软件
+- 农产品采购平台
+- 养殖业数字化
+- 牲畜交易管理
+
+**内容类型：**
+- 产品功能详细介绍
+- 行业解决方案文章
+- 客户案例研究
+- 技术白皮书
+- 行业趋势分析
+
+## 8. 开发计划
+
+### 8.1 阶段一：MVP版本（2周）
+- 首页设计和开发
+- 产品介绍页基础版
+- 联系页面和表单
+- 基础响应式布局
+
+### 8.2 阶段二：功能完善（2周）
+- 完整产品功能页面
+- 客户案例展示
+- 新闻动态系统
+- SEO优化实施
+
+### 8.3 阶段三：优化增强（1周）
+- 在线客服集成
+- 数据分析配置
+- 性能优化
+- 多语言支持（可选）
+
+## 9. 成功度量指标
+
+### 9.1 流量指标
+- 月访问量目标：10,000+
+- 跳出率：< 40%
+- 平均会话时长：> 2分钟
+- 页面/会话：> 3
+
+### 9.2 转化指标
+- 试用申请数：月100+
+- 咨询表单提交：月50+
+- 资料下载数：月200+
+- 预约演示：月20+
+
+### 9.3 业务指标
+- 销售线索质量评分
+- 客户来源渠道分析
+- ROI和转化成本
+- 客户生命周期价值
+
+## 10. 维护和更新计划
+
+### 10.1 内容更新
+- 每月发布2-4篇行业文章
+- 季度更新客户案例
+- 半年更新产品功能
+- 年度进行设计刷新
+
+### 10.2 技术维护
+- 每月安全扫描和更新
+- 季度性能优化
+- 半年技术栈评估
+- 年度架构review
+
+---
+
+*本文档为活牛采购智能数字化系统官网的需求规范，用于指导官网的设计、开发和运营工作。*
\ No newline at end of file
diff --git a/docs/技术实施方案.md b/docs/技术实施方案.md
new file mode 100644
index 0000000..34bc2ad
--- /dev/null
+++ b/docs/技术实施方案.md
@@ -0,0 +1,1990 @@
+# 活牛采购智能数字化系统 - 技术实施方案
+
+## 1. 技术架构
+
+### 1.1 系统架构
+```
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│   Mini-Program  │    │   Admin System   │    │    Website      │
+│  (uni-app)      │    │  (Vue 3)         │    │  (HTML5 + Bootstrap)  │
+└─────────────────┘    └─────────────────┘    └─────────────────┘
+         │                      │                      │
+         └──────────┬───────────┴──────────┬───────────┘
+                    │                      │
+           ┌────────┴─────────┐    ┌──────┴───────┐
+           │   API Gateway     │    │ 统一用户中心  │
+           │  (Authentication)│    │ (Single Sign-On)
+           └────────┬─────────┘    └──────┬───────┘
+                    │                      │
+                    └──────────┬───────────┘
+                               │
+                    ┌──────────┴──────────┐
+                    │   微服务层           │
+                    │  (NestJS Services)  │
+                    └──────────┬──────────┘
+                               │
+                    ┌──────────┴──────────┐
+                    │   统一数据库         │
+                    │  (MySQL + Redis)    │
+                    └─────────────────────┘
+```
+
+### 1.2 技术选型
+| 层级 | 技术栈 | 说明 |
+|------|--------|------|
+| 官网前端 | HTML5 + Bootstrap | 企业官网展示 |
+| 管理后台 | Vue 3 + TypeScript + Element Plus + Vite + Pinia | Web管理后台 |
+| 小程序端 | Uni-app + Vue 3 + TypeScript | 跨平台小程序矩阵 |
+| 后端 | Node.js + Express.js | 微服务架构 |
+| 数据库 | MySQL 5.7 + Redis | 统一业务数据 + 缓存 |
+| 文件存储 | MinIO/阿里云OSS | 视频文件存储 |
+| 消息队列 | RabbitMQ | 异步任务处理 |
+| 实时通信 | WebSocket | 实时数据传输 |
+
+**数据库连接信息**:
+- **主机**: 129.211.213.226
+- **端口**: 9527
+- **用户名**: root
+- **密码**: aiotAiot123!
+- **数据库名**: jiebandata
+
+**管理员默认账号**: admin/admin123
+
+### 1.3 小程序矩阵技术架构
+```
+┌─────────────────────────────────────────────────┐
+│                Uni-app 跨端框架                  │
+├─────────────────────────────────────────────────┤
+│  Client MP    Supplier MP   Driver MP   Staff MP │
+│  (客户端)      (供应商)      (司机)     (内部员工) │
+└─────────────────────────────────────────────────┘
+                     │
+           ┌─────────┴─────────┐
+           │  统一API接口调用    │
+           │  统一用户认证       │
+           │  统一数据格式       │
+           └─────────┬─────────┘
+                     │
+           ┌─────────┴─────────┐
+           │  后端微服务集群     │
+           └───────────────────┘
+```
+
+## 2. 微服务划分
+
+### 2.1 服务模块
+| 服务名称 | 职责 | 技术栈 |
+|----------|------|--------|
+| user-service | 统一用户管理、权限控制 | Express.js + Sequelize + JWT + RBAC |
+| auth-service | 统一认证中心、单点登录 | Express.js + Sequelize + OAuth2.0 |
+| order-service | 订单管理、流程控制 | Express.js + Sequelize + MySQL |
+| transport-service | 运输跟踪、状态管理 | Express.js + Sequelize + WebSocket |
+| payment-service | 支付结算、财务处理 | Express.js + Sequelize + 支付接口 |
+| file-service | 文件管理、视频处理 | Express.js + Sequelize + MinIO |
+| notification-service | 消息通知、提醒 | Express.js + Sequelize + RabbitMQ |
+| mini-program-service | 小程序接口统一管理 | Express.js + Sequelize + 接口网关 |
+
+### 2.2 小程序服务接口
+```typescript
+// 统一小程序API接口设计
+export interface MiniProgramApi {
+  // 用户认证接口
+  login(phone: string, code: string): Promise<UserInfo>;
+  logout(): Promise<void>;
+  
+  // 订单相关接口
+  createOrder(orderData: OrderCreateDto): Promise<Order>;
+  getOrderList(params: OrderQueryDto): Promise<Order[]>;
+  getOrderDetail(orderId: string): Promise<OrderDetail>;
+  
+  // 运输跟踪接口
+  reportLocation(location: LocationDto): Promise<void>;
+  getTransportTrack(orderId: string): Promise<TransportTrack[]>;
+  
+  // 文件上传接口
+  uploadFile(file: File, type: FileType): Promise<FileResponse>;
+  
+  // 消息通知接口
+  getNotifications(): Promise<Notification[]>;
+  markAsRead(notificationId: string): Promise<void>;
+}
+```
+
+## 3. 数据库设计
+
+### 3.1 Sequelize ORM 模型定义
+```javascript
+// 统一用户模型
+const User = sequelize.define('User', {
+  id: {
+    type: DataTypes.BIGINT,
+    primaryKey: true,
+    autoIncrement: true
+  },
+  uuid: {
+    type: DataTypes.STRING(36),
+    allowNull: false,
+    unique: true
+  },
+  username: {
+    type: DataTypes.STRING(50),
+    allowNull: false,
+    unique: true
+  },
+  password_hash: {
+    type: DataTypes.STRING(255),
+    allowNull: false
+  },
+  phone: {
+    type: DataTypes.STRING(20),
+    allowNull: false,
+    unique: true
+  },
+  email: DataTypes.STRING(100),
+  real_name: DataTypes.STRING(50),
+  avatar_url: DataTypes.STRING(255),
+  user_type: {
+    type: DataTypes.ENUM('client','supplier','driver','staff','admin'),
+    allowNull: false
+  },
+  status: {
+    type: DataTypes.ENUM('active','inactive','locked'),
+    defaultValue: 'active'
+  }
+}, {
+  tableName: 'users',
+  timestamps: true,
+  indexes: [
+    { fields: ['phone'] },
+    { fields: ['user_type'] },
+    { fields: ['status'] }
+  ]
+});
+
+// 用户角色模型
+const UserRole = sequelize.define('UserRole', {
+  id: {
+    type: DataTypes.BIGINT,
+    primaryKey: true,
+    autoIncrement: true
+  },
+  role_code: {
+    type: DataTypes.STRING(50),
+    allowNull: false
+  }
+}, {
+  tableName: 'user_roles',
+  timestamps: true
+});
+
+// 用户会话模型
+const UserSession = sequelize.define('UserSession', {
+  id: {
+    type: DataTypes.BIGINT,
+    primaryKey: true,
+    autoIncrement: true
+  },
+  session_token: {
+    type: DataTypes.STRING(255),
+    allowNull: false,
+    unique: true
+  },
+  device_type: {
+    type: DataTypes.ENUM('web','mini_program','app'),
+    allowNull: false
+  },
+  device_info: DataTypes.STRING(500),
+  login_ip: DataTypes.STRING(45),
+  expires_at: {
+    type: DataTypes.DATE,
+    allowNull: false
+  }
+}, {
+  tableName: 'user_sessions',
+  timestamps: true,
+  indexes: [
+    { fields: ['session_token'] },
+    { fields: ['user_id', 'device_type'] }
+  ]
+});
+
+// 订单模型
+const Order = sequelize.define('Order', {
+  id: {
+    type: DataTypes.BIGINT,
+    primaryKey: true,
+    autoIncrement: true
+  },
+  order_no: {
+    type: DataTypes.STRING(50),
+    allowNull: false,
+    unique: true
+  },
+  breed_type: {
+    type: DataTypes.STRING(20),
+    allowNull: false
+  },
+  min_weight: {
+    type: DataTypes.DECIMAL(10, 2),
+    allowNull: false
+  },
+  max_weight: {
+    type: DataTypes.DECIMAL(10, 2),
+    allowNull: false
+  },
+  total_count: {
+    type: DataTypes.INTEGER,
+    allowNull: false
+  },
+  total_weight: DataTypes.DECIMAL(10, 2),
+  unit_price: {
+    type: DataTypes.DECIMAL(10, 2),
+    allowNull: false
+  },
+  total_amount: {
+    type: DataTypes.DECIMAL(15, 2),
+    allowNull: false
+  },
+  status: {
+    type: DataTypes.ENUM('pending','confirmed','loading','shipping','delivered','completed','cancelled'),
+    defaultValue: 'pending'
+  }
+}, {
+  tableName: 'orders',
+  timestamps: true,
+  indexes: [
+    { fields: ['order_no'] },
+    { fields: ['buyer_id'] },
+    { fields: ['status'] },
+    { fields: ['created_at'] }
+  ]
+});
+
+// 定义模型关联关系
+User.hasMany(UserRole, { foreignKey: 'user_id' });
+UserRole.belongsTo(User, { foreignKey: 'user_id' });
+
+User.hasMany(UserSession, { foreignKey: 'user_id' });
+UserSession.belongsTo(User, { foreignKey: 'user_id' });
+
+User.hasMany(Order, { foreignKey: 'buyer_id', as: 'BuyerOrders' });
+User.hasMany(Order, { foreignKey: 'trader_id', as: 'TraderOrders' });
+User.hasMany(Order, { foreignKey: 'supplier_id', as: 'SupplierOrders' });
+Order.belongsTo(User, { foreignKey: 'buyer_id', as: 'Buyer' });
+Order.belongsTo(User, { foreignKey: 'trader_id', as: 'Trader' });
+Order.belongsTo(User, { foreignKey: 'supplier_id', as: 'Supplier' });
+```
+// 运输跟踪模型
+const TransportTrack = sequelize.define('TransportTrack', {
+  id: {
+    type: DataTypes.BIGINT,
+    primaryKey: true,
+    autoIncrement: true
+  },
+  latitude: {
+    type: DataTypes.DECIMAL(10, 8),
+    allowNull: true
+  },
+  longitude: {
+    type: DataTypes.DECIMAL(11, 8),
+    allowNull: true
+  },
+  speed: {
+    type: DataTypes.DECIMAL(5, 2),
+    allowNull: true
+  },
+  direction: {
+    type: DataTypes.DECIMAL(5, 2),
+    allowNull: true
+  },
+  cattle_status: {
+    type: DataTypes.STRING(20),
+    allowNull: true
+  },
+  video_url: {
+    type: DataTypes.STRING(255),
+    allowNull: true
+  }
+}, {
+  tableName: 'transport_tracks',
+  timestamps: true
+});
+
+// 结算模型
+const Settlement = sequelize.define('Settlement', {
+  id: {
+    type: DataTypes.BIGINT,
+    primaryKey: true,
+    autoIncrement: true
+  },
+  prepayment_amount: {
+    type: DataTypes.DECIMAL(15, 2),
+    allowNull: true
+  },
+  final_amount: {
+    type: DataTypes.DECIMAL(15, 2),
+    allowNull: true
+  },
+  total_amount: {
+    type: DataTypes.DECIMAL(15, 2),
+    allowNull: false
+  },
+  payment_status: {
+    type: DataTypes.ENUM('pending', 'paid', 'refunded'),
+    defaultValue: 'pending'
+  },
+  payment_time: {
+    type: DataTypes.DATE,
+    allowNull: true
+  }
+}, {
+  tableName: 'settlements',
+  timestamps: true
+});
+
+// 完善模型关联关系
+Order.hasMany(TransportTrack, { foreignKey: 'order_id' });
+TransportTrack.belongsTo(Order, { foreignKey: 'order_id' });
+
+Order.hasMany(Settlement, { foreignKey: 'order_id' });
+Settlement.belongsTo(Order, { foreignKey: 'order_id' });
+
+User.hasMany(TransportTrack, { foreignKey: 'driver_id', as: 'DriverTracks' });
+TransportTrack.belongsTo(User, { foreignKey: 'driver_id', as: 'Driver' });
+
+// Sequelize 连接配置
+const sequelize = new Sequelize('jiebandata', 'root', 'aiotAiot123!', {
+  host: '129.211.213.226',
+  port: 9527,
+  dialect: 'mysql',
+  dialectOptions: {
+    charset: 'utf8mb4',
+    collate: 'utf8mb4_unicode_ci'
+  },
+  pool: {
+    max: 10,
+    min: 0,
+    acquire: 30000,
+    idle: 10000
+  },
+  logging: process.env.NODE_ENV === 'development' ? console.log : false,
+  timezone: '+08:00' // 东八区
+});
+```
+
+## 4. 统一API接口设计
+
+### 4.1 Express.js + Swagger 配置
+```javascript
+// app.js - Express.js 应用配置
+const express = require('express');
+const swaggerJsdoc = require('swagger-jsdoc');
+const swaggerUi = require('swagger-ui-express');
+const cors = require('cors');
+const helmet = require('helmet');
+const rateLimit = require('express-rate-limit');
+
+const app = express();
+
+// 中间件配置
+app.use(helmet());
+app.use(cors());
+app.use(express.json({ limit: '10mb' }));
+app.use(express.urlencoded({ extended: true }));
+
+// 速率限制
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15分钟
+  max: 100 // 每个IP限制100个请求
+});
+app.use(limiter);
+
+// Swagger 配置
+const swaggerOptions = {
+  definition: {
+    openapi: '3.0.0',
+    info: {
+      title: '活牛采购智能数字化系统 API',
+      version: '1.0.0',
+      description: '活牛采购标准化操作流程系统接口文档',
+      contact: {
+        name: 'API支持',
+        email: 'support@niumall.com'
+      }
+    },
+    servers: [
+      {
+        url: 'http://localhost:3000/api',
+        description: '开发环境'
+      },
+      {
+        url: 'https://api.niumall.com/api',
+        description: '生产环境'
+      }
+    ],
+    components: {
+      securitySchemes: {
+        BearerAuth: {
+          type: 'http',
+          scheme: 'bearer',
+          bearerFormat: 'JWT'
+        }
+      },
+      schemas: {
+        ApiResponse: {
+          type: 'object',
+          properties: {
+            code: { type: 'integer', description: '状态码：200成功，400客户端错误，500服务端错误' },
+            message: { type: 'string', description: '提示信息' },
+            data: { type: 'object', description: '响应数据' },
+            timestamp: { type: 'integer', description: '时间戳' }
+          }
+        },
+        PaginationParams: {
+          type: 'object',
+          properties: {
+            page: { type: 'integer', description: '当前页码' },
+            limit: { type: 'integer', description: '每页数量' },
+            sort: { type: 'string', description: '排序字段' },
+            order: { type: 'string', enum: ['asc', 'desc'], description: '排序方向' }
+          }
+        },
+        PaginatedResponse: {
+          type: 'object',
+          properties: {
+            items: { type: 'array', description: '数据列表' },
+            total: { type: 'integer', description: '总记录数' },
+            page: { type: 'integer', description: '当前页码' },
+            limit: { type: 'integer', description: '每页数量' },
+            totalPages: { type: 'integer', description: '总页数' }
+          }
+        }
+      }
+    }
+  },
+  apis: ['./routes/*.js', './models/*.js'] // API路由文件路径
+};
+
+const swaggerSpec = swaggerJsdoc(swaggerOptions);
+app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));
+
+// 统一响应中间件
+app.use((req, res, next) => {
+  res.apiSuccess = (data, message = '成功') => {
+    res.json({
+      code: 200,
+      message,
+      data,
+      timestamp: Date.now()
+    });
+  };
+  
+  res.apiError = (message = '服务器错误', code = 500) => {
+    res.status(code).json({
+      code,
+      message,
+      data: null,
+      timestamp: Date.now()
+    });
+  };
+  next();
+});
+
+// JWT认证中间件
+const jwt = require('jsonwebtoken');
+app.use((req, res, next) => {
+  const token = req.header('Authorization')?.replace('Bearer ', '');
+  if (token) {
+    try {
+      const decoded = jwt.verify(token, process.env.JWT_SECRET || 'your-secret-key');
+      req.user = decoded;
+    } catch (error) {
+      // Token验证失败，但不阻止请求
+    }
+  }
+  next();
+});
+
+module.exports = app;
+```
+
+### 4.2 Express.js 认证路由示例
+```javascript
+// routes/auth.js - 认证路由
+const express = require('express');
+const jwt = require('jsonwebtoken');
+const { User } = require('../models');
+const router = express.Router();
+
+/**
+ * @swagger
+ * /api/auth/mini-program/login:
+ *   post:
+ *     summary: 小程序用户登录
+ *     tags: [认证]
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - phone
+ *               - code
+ *               - miniProgramType
+ *             properties:
+ *               phone:
+ *                 type: string
+ *                 description: 手机号
+ *                 example: "13800138000"
+ *               code:
+ *                 type: string
+ *                 description: 验证码
+ *                 example: "123456"
+ *               miniProgramType:
+ *                 type: string
+ *                 enum: [client, supplier, driver, staff]
+ *                 description: 小程序类型
+ *                 example: "client"
+ *     responses:
+ *       200:
+ *         description: 登录成功
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/ApiResponse'
+ *               example:
+ *                 code: 200
+ *                 message: "登录成功"
+ *                 data:
+ *                   token: "jwt_token_string"
+ *                   userInfo:
+ *                     id: 1
+ *                     username: "user123"
+ *                     realName: "张三"
+ *                     avatar: "https://example.com/avatar.jpg"
+ *                     userType: "client"
+ *                     roles: ["purchaser"]
+ *                 timestamp: 1643097600000
+ */
+router.post('/mini-program/login', async (req, res) => {
+  try {
+    const { phone, code, miniProgramType } = req.body;
+    
+    // 验证验证码逻辑
+    // ...
+    
+    // 查找用户
+    const user = await User.findOne({ 
+      where: { phone, user_type: miniProgramType } 
+    });
+    
+    if (!user) {
+      return res.apiError('用户不存在', 404);
+    }
+    
+    // 生成JWT token
+    const token = jwt.sign(
+      { 
+        id: user.id, 
+        username: user.username,
+        userType: user.user_type 
+      },
+      process.env.JWT_SECRET || 'your-secret-key',
+      { expiresIn: '7d' }
+    );
+    
+    res.apiSuccess({
+      token,
+      userInfo: {
+        id: user.id,
+        username: user.username,
+        realName: user.real_name,
+        avatar: user.avatar_url,
+        userType: user.user_type,
+        roles: [] // 根据实际业务获取角色
+      }
+    }, '登录成功');
+    
+  } catch (error) {
+    console.error('Login error:', error);
+    res.apiError('登录失败');
+  }
+});
+
+/**
+ * @swagger
+ * /api/auth/user-info:
+ *   get:
+ *     summary: 获取当前用户信息
+ *     tags: [认证]
+ *     security:
+ *       - BearerAuth: []
+ *     responses:
+ *       200:
+ *         description: 获取成功
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/ApiResponse'
+ */
+router.get('/user-info', (req, res) => {
+  if (!req.user) {
+    return res.apiError('未认证', 401);
+  }
+  
+  // 从数据库获取完整的用户信息
+  User.findByPk(req.user.id)
+    .then(user => {
+      res.apiSuccess({
+        id: user.id,
+        username: user.username,
+        realName: user.real_name,
+        avatar: user.avatar_url,
+        userType: user.user_type,
+        phone: user.phone,
+        email: user.email
+      });
+    })
+    .catch(error => {
+      res.apiError('获取用户信息失败');
+    });
+});
+
+module.exports = router;
+```
+
+### 4.3 Express.js 订单路由示例
+```javascript
+// routes/orders.js - 订单路由
+const express = require('express');
+const { Order, User } = require('../models');
+const router = express.Router();
+
+/**
+ * @swagger
+ * /api/orders:
+ *   post:
+ *     summary: 创建采购订单
+ *     tags: [订单]
+ *     security:
+ *       - BearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - breedType
+ *               - minWeight
+ *               - maxWeight
+ *               - totalCount
+ *               - unitPrice
+ *             properties:
+ *               breedType:
+ *                 type: string
+ *                 description: 牛品种
+ *                 example: "simmental"
+ *               minWeight:
+ *                 type: number
+ *                 format: float
+ *                 description: 最低重量(kg)
+ *                 example: 500
+ *               maxWeight:
+ *                 type: number
+ *                 format: float
+ *                 description: 最高重量(kg)
+ *                 example: 600
+ *               totalCount:
+ *                 type: integer
+ *                 description: 总数量
+ *                 example: 100
+ *               unitPrice:
+ *                 type: number
+ *                 format: float
+ *                 description: 单价(元/kg)
+ *                 example: 35.5
+ *               deliveryAddress:
+ *                 type: string
+ *                 description: 配送地址
+ *                 example: "xxx养殖场"
+ *               deliveryDate:
+ *                 type: string
+ *                 format: date
+ *                 description: 配送日期
+ *                 example: "2024-01-25"
+ *               specialRequirements:
+ *                 type: string
+ *                 description: 特殊要求
+ *                 example: "要求健康无病"
+ *     responses:
+ *       201:
+ *         description: 订单创建成功
+ */
+router.post('/', async (req, res) => {
+  try {
+    const {
+      breedType,
+      minWeight,
+      maxWeight,
+      totalCount,
+      unitPrice,
+      deliveryAddress,
+      deliveryDate,
+      specialRequirements
+    } = req.body;
+    
+    // 计算总金额
+    const avgWeight = (minWeight + maxWeight) / 2;
+    const totalAmount = avgWeight * totalCount * unitPrice;
+    
+    // 生成订单号
+    const orderNo = 'ORD' + Date.now() + Math.random().toString(36).substr(2, 6);
+    
+    const order = await Order.create({
+      order_no: orderNo,
+      buyer_id: req.user.id,
+      trader_id: 1, // 默认贸易商ID
+      supplier_id: 1, // 默认供应商ID
+      breed_type: breedType,
+      min_weight: minWeight,
+      max_weight: maxWeight,
+      total_count: totalCount,
+      total_weight: avgWeight * totalCount,
+      unit_price: unitPrice,
+      total_amount: totalAmount,
+      status: 'pending'
+    });
+    
+    res.apiSuccess(order, '订单创建成功');
+    
+  } catch (error) {
+    console.error('Create order error:', error);
+    res.apiError('创建订单失败');
+  }
+});
+
+/**
+ * @swagger
+ * /api/orders:
+ *   get:
+ *     summary: 获取订单列表
+ *     tags: [订单]
+ *     security:
+ *       - BearerAuth: []
+ *     parameters:
+ *       - in: query
+ *         name: status
+ *         schema:
+ *           type: string
+ *         description: 订单状态过滤
+ *       - in: query
+ *         name: page
+ *         schema:
+ *           type: integer
+ *           default: 1
+ *         description: 页码
+ *       - in: query
+ *         name: limit
+ *         schema:
+ *           type: integer
+ *           default: 10
+ *         description: 每页数量
+ *     responses:
+ *       200:
+ *         description: 获取成功
+ */
+router.get('/', async (req, res) => {
+  try {
+    const { status, page = 1, limit = 10 } = req.query;
+    const offset = (page - 1) * limit;
+    
+    const whereClause = {};
+    if (status) {
+      whereClause.status = status;
+    }
+    
+    // 根据用户类型过滤订单
+    if (req.user.userType === 'client') {
+      whereClause.buyer_id = req.user.id;
+    } else if (req.user.userType === 'supplier') {
+      whereClause.supplier_id = req.user.id;
+    }
+    
+    const { count, rows: orders } = await Order.findAndCountAll({
+      where: whereClause,
+      limit: parseInt(limit),
+      offset: parseInt(offset),
+      order: [['created_at', 'DESC']],
+      include: [
+        { model: User, as: 'Buyer', attributes: ['id', 'real_name', 'phone'] },
+        { model: User, as: 'Supplier', attributes: ['id', 'real_name', 'phone'] }
+      ]
+    });
+    
+    res.apiSuccess({
+      items: orders,
+      total: count,
+      page: parseInt(page),
+      limit: parseInt(limit),
+      totalPages: Math.ceil(count / limit)
+    });
+    
+  } catch (error) {
+    console.error('Get orders error:', error);
+    res.apiError('获取订单列表失败');
+  }
+});
+
+module.exports = router;
+```
+
+### 4.4 Express.js 运输跟踪路由示例
+```javascript
+// routes/transport.js - 运输跟踪路由
+const express = require('express');
+const { TransportTrack, Order } = require('../models');
+const router = express.Router();
+
+/**
+ * @swagger
+ * /api/transport/tracks:
+ *   post:
+ *     summary: 司机上报位置信息
+ *     tags: [运输跟踪]
+ *     security:
+ *       - BearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - orderId
+ *               - latitude
+ *               - longitude
+ *             properties:
+ *               orderId:
+ *                 type: integer
+ *                 description: 订单ID
+ *                 example: 123
+ *               latitude:
+ *                 type: number
+ *                 format: float
+ *                 description: 纬度
+ *                 example: 39.9042
+ *               longitude:
+ *                 type: number
+ *                 format: float
+ *                 description: 经度
+ *                 example: 116.4074
+ *               speed:
+ *                 type: number
+ *                 format: float
+ *                 description: 速度(km/h)
+ *                 example: 80.5
+ *               direction:
+ *                 type: number
+ *                 format: float
+ *                 description: 方向(度)
+ *                 example: 45.2
+ *               cattleStatus:
+ *                 type: string
+ *                 description: 牛只状态
+ *                 example: "normal"
+ *               temperature:
+ *                 type: number
+ *                 format: float
+ *                 description: 车内温度(℃)
+ *                 example: 25.5
+ *               humidity:
+ *                 type: number
+ *                 format: float
+ *                 description: 湿度(%)
+ *                 example: 60.2
+ *               videoUrl:
+ *                 type: string
+ *                 description: 状态视频URL
+ *                 example: "https://example.com/status.mp4"
+ *     responses:
+ *       200:
+ *         description: 位置上报成功
+ */
+router.post('/tracks', async (req, res) => {
+  try {
+    const {
+      orderId,
+      latitude,
+      longitude,
+      speed,
+      direction,
+      cattleStatus,
+      temperature,
+      humidity,
+      videoUrl
+    } = req.body;
+    
+    // 验证司机权限
+    const order = await Order.findByPk(orderId);
+    if (!order || order.driver_id !== req.user.id) {
+      return res.apiError('无权限操作此订单', 403);
+    }
+    
+    const track = await TransportTrack.create({
+      order_id: orderId,
+      driver_id: req.user.id,
+      latitude,
+      longitude,
+      speed,
+      direction,
+      cattle_status: cattleStatus,
+      temperature,
+      humidity,
+      video_url: videoUrl
+    });
+    
+    // 实时推送位置信息给相关用户
+    // WebSocket推送逻辑...
+    
+    res.apiSuccess(track, '位置上报成功');
+    
+  } catch (error) {
+    console.error('Report location error:', error);
+    res.apiError('位置上报失败');
+  }
+});
+
+/**
+ * @swagger
+ * /api/transport/orders/{orderId}/tracks:
+ *   get:
+ *     summary: 获取订单运输轨迹
+ *     tags: [运输跟踪]
+ *     security:
+ *       - BearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: orderId
+ *         required: true
+ *         schema:
+ *           type: integer
+ *         description: 订单ID
+ *     responses:
+ *       200:
+ *         description: 获取成功
+ */
+router.get('/orders/:orderId/tracks', async (req, res) => {
+  try {
+    const { orderId } = req.params;
+    
+    // 验证订单访问权限
+    const order = await Order.findByPk(orderId);
+    if (!order) {
+      return res.apiError('订单不存在', 404);
+    }
+    
+    // 权限验证：采购人只能查看自己的订单
+    if (req.user.userType === 'client' && order.buyer_id !== req.user.id) {
+      return res.apiError('无权限查看此订单', 403);
+    }
+    
+    const tracks = await TransportTrack.findAll({
+      where: { order_id: orderId },
+      order: [['created_at', 'ASC']],
+      attributes: [
+        'id',
+        'latitude',
+        'longitude',
+        'speed',
+        'direction',
+        'cattle_status',
+        'temperature',
+        'humidity',
+        'video_url',
+        'created_at'
+      ]
+    });
+    
+    res.apiSuccess(tracks);
+    
+  } catch (error) {
+    console.error('Get tracks error:', error);
+    res.apiError('获取运输轨迹失败');
+  }
+});
+
+module.exports = router;
+```
+
+### 4.5 Express.js 文件上传路由示例
+```javascript
+// routes/files.js - 文件上传路由
+const express = require('express');
+const multer = require('multer');
+const path = require('path');
+const { v4: uuidv4 } = require('uuid');
+const router = express.Router();
+
+// 配置multer文件上传
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, 'uploads/');
+  },
+  filename: (req, file, cb) => {
+    const ext = path.extname(file.originalname);
+    cb(null, `${uuidv4()}${ext}`);
+  }
+});
+
+const upload = multer({
+  storage,
+  limits: {
+    fileSize: 100 * 1024 * 1024 // 100MB限制
+  },
+  fileFilter: (req, file, cb) => {
+    const allowedTypes = [
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'video/mp4',
+      'video/quicktime',
+      'application/pdf'
+    ];
+    if (allowedTypes.includes(file.mimetype)) {
+      cb(null, true);
+    } else {
+      cb(new Error('不支持的文件类型'));
+    }
+  }
+});
+
+/**
+ * @swagger
+ * /api/files/upload:
+ *   post:
+ *     summary: 统一文件上传接口
+ *     tags: [文件管理]
+ *     security:
+ *       - BearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         multipart/form-data:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - file
+ *             properties:
+ *               file:
+ *                 type: string
+ *                 format: binary
+ *                 description: 上传的文件
+ *               type:
+ *                 type: string
+ *                 description: 文件类型
+ *                 example: "cattle_video"
+ *               businessId:
+ *                 type: string
+ *                 description: 业务ID
+ *                 example: "order_123"
+ *               description:
+ *                 type: string
+ *                 description: 文件描述
+ *                 example: "装车过程视频"
+ *     responses:
+ *       200:
+ *         description: 上传成功
+ */
+router.post('/upload', upload.single('file'), async (req, res) => {
+  try {
+    const { type, businessId, description } = req.body;
+    
+    if (!req.file) {
+      return res.apiError('请选择要上传的文件', 400);
+    }
+    
+    // 这里应该集成到云存储（如阿里云OSS、腾讯云COS）
+    // 实际项目中应该将文件上传到云存储并返回云存储URL
+    
+    const fileInfo = {
+      fileId: `file_${uuidv4()}`,
+      url: `/uploads/${req.file.filename}`,
+      thumbnail: `/uploads/thumbnails/${req.file.filename}.jpg`,
+      size: req.file.size,
+      mimeType: req.file.mimetype,
+      originalName: req.file.originalname,
+      type,
+      businessId,
+      description
+    };
+    
+    // 保存文件信息到数据库
+    // await File.create(fileInfo);
+    
+    res.apiSuccess(fileInfo, '上传成功');
+    
+  } catch (error) {
+    console.error('File upload error:', error);
+    res.apiError(error.message || '文件上传失败');
+  }
+});
+
+module.exports = router;
+```
+
+### 4.6 Express.js 支付路由示例
+```javascript
+// routes/payments.js - 支付路由
+const express = require('express');
+const { Payment, Order } = require('../models');
+const router = express.Router();
+
+/**
+ * @swagger
+ * /api/payments:
+ *   post:
+ *     summary: 创建支付订单
+ *     tags: [支付管理]
+ *     security:
+ *       - BearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - orderId
+ *               - amount
+ *               - paymentType
+ *             properties:
+ *               orderId:
+ *                 type: integer
+ *                 description: 订单ID
+ *                 example: 123
+ *               amount:
+ *                 type: number
+ *                 format: float
+ *                 description: 支付金额(元)
+ *                 example: 355000
+ *               paymentType:
+ *                 type: string
+ *                 enum: [wechat, alipay, bank]
+ *                 description: 支付类型
+ *                 example: "wechat"
+ *               paymentMethod:
+ *                 type: string
+ *                 enum: [mini_program, app, web]
+ *                 description: 支付方式
+ *                 example: "mini_program"
+ *     responses:
+ *       200:
+ *         description: 创建成功
+ */
+router.post('/', async (req, res) => {
+  try {
+    const { orderId, amount, paymentType, paymentMethod = 'mini_program' } = req.body;
+    
+    // 验证订单
+    const order = await Order.findByPk(orderId);
+    if (!order) {
+      return res.apiError('订单不存在', 404);
+    }
+    
+    // 验证支付权限
+    if (order.buyer_id !== req.user.id) {
+      return res.apiError('无权限支付此订单', 403);
+    }
+    
+    // 创建支付订单
+    const payment = await Payment.create({
+      order_id: orderId,
+      user_id: req.user.id,
+      amount,
+      payment_type: paymentType,
+      payment_method: paymentMethod,
+      status: 'pending',
+      payment_no: `pay_${Date.now()}${Math.random().toString(36).substr(2, 9)}`
+    });
+    
+    // 调用第三方支付接口（微信支付、支付宝等）
+    // const paymentData = await callPaymentGateway(paymentType, paymentMethod, amount, payment.payment_no);
+    
+    res.apiSuccess({
+      paymentId: payment.id,
+      paymentNo: payment.payment_no,
+      amount: payment.amount,
+      // ...paymentData // 第三方支付返回的数据
+    }, '支付订单创建成功');
+    
+  } catch (error) {
+    console.error('Create payment error:', error);
+    res.apiError('创建支付订单失败');
+  }
+});
+
+/**
+ * @swagger
+ * /api/payments/{id}/callback:
+ *   post:
+ *     summary: 支付回调接口
+ *     tags: [支付管理]
+ *     parameters:
+ *       - in: path
+ *         name: id
+ *         required: true
+ *         schema:
+ *           type: integer
+ *         description: 支付订单ID
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - paymentId
+ *               - status
+ *             properties:
+ *               paymentId:
+ *                 type: string
+ *                 description: 第三方支付ID
+ *                 example: "pay_123456"
+ *               status:
+ *                 type: string
+ *                 enum: [success, failed, canceled]
+ *                 description: 支付状态
+ *                 example: "success"
+ *               paidAmount:
+ *                 type: number
+ *                 format: float
+ *                 description: 实际支付金额
+ *                 example: 355000
+ *               paidTime:
+ *                 type: string
+ *                 format: date-time
+ *                 description: 支付时间
+ *                 example: "2024-01-25 15:30:00"
+ *     responses:
+ *       200:
+ *         description: 回调处理成功
+ */
+router.post('/:id/callback', async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { paymentId, status, paidAmount, paidTime } = req.body;
+    
+    const payment = await Payment.findByPk(id);
+    if (!payment) {
+      return res.apiError('支付订单不存在', 404);
+    }
+    
+    // 更新支付状态
+    await payment.update({
+      third_party_id: paymentId,
+      status: status === 'success' ? 'paid' : 'failed',
+      paid_amount: paidAmount,
+      paid_time: paidTime ? new Date(paidTime) : new Date()
+    });
+    
+    // 如果支付成功，更新订单状态
+    if (status === 'success') {
+      const order = await Order.findByPk(payment.order_id);
+      if (order) {
+        await order.update({ status: 'paid' });
+      }
+    }
+    
+    res.apiSuccess(null, '支付回调处理成功');
+    
+  } catch (error) {
+    console.error('Payment callback error:', error);
+    res.apiError('支付回调处理失败');
+  }
+});
+
+/**
+ * @swagger
+ * /api/payments/{id}/status:
+ *   get:
+ *     summary: 查询支付状态
+ *     tags: [支付管理]
+ *     security:
+ *       - BearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: id
+ *         required: true
+ *         schema:
+ *           type: integer
+ *         description: 支付订单ID
+ *     responses:
+ *       200:
+ *         description: 查询成功
+ */
+router.get('/:id/status', async (req, res) => {
+  try {
+    const { id } = req.params;
+    
+    const payment = await Payment.findByPk(id);
+    if (!payment) {
+      return res.apiError('支付订单不存在', 404);
+    }
+    
+    // 验证查询权限
+    if (payment.user_id !== req.user.id) {
+      return res.apiError('无权限查询此支付订单', 403);
+    }
+    
+    res.apiSuccess({
+      paymentId: payment.id,
+      paymentNo: payment.payment_no,
+      amount: payment.amount,
+      status: payment.status,
+      paidAmount: payment.paid_amount,
+      paidTime: payment.paid_time,
+      createdAt: payment.created_at
+    });
+    
+  } catch (error) {
+    console.error('Get payment status error:', error);
+    res.apiError('查询支付状态失败');
+  }
+});
+
+module.exports = router;
+```
+
+## 5. 统一交互设计与开发规范
+
+### 5.1 Uni-app小程序开发规范
+```javascript
+// 统一页面结构规范
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "enablePullDownRefresh": true,
+        "backgroundColor": "#f5f5f5"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "backgroundColor": "#FFFFFF",
+    "app-plus": {
+      "background": "#efeff4"
+    }
+  },
+  "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#007AFF",
+    "borderStyle": "black",
+    "backgroundColor": "#FFFFFF",
+    "list": []
+  }
+}
+
+// 统一组件命名规范
+- 组件目录：/components/
+- 页面目录：/pages/
+- 工具函数：/utils/
+- API接口：/api/
+- 状态管理：/store/
+- 类型定义：/types/
+
+// 统一状态管理（Vuex）
+const store = new Vuex.Store({
+  state: {
+    userInfo: null,
+    token: null,
+    currentOrder: null
+  },
+  mutations: {
+    SET_USER_INFO(state, userInfo) {
+      state.userInfo = userInfo;
+    },
+    SET_TOKEN(state, token) {
+      state.token = token;
+    }
+  },
+  actions: {
+    async login({ commit }, { phone, code }) {
+      const response = await uni.request({
+        url: '/api/auth/mini-program/login',
+        method: 'POST',
+        data: { phone, code, miniProgramType: 'client' }
+      });
+      commit('SET_USER_INFO', response.data.data.userInfo);
+      commit('SET_TOKEN', response.data.data.token);
+      uni.setStorageSync('token', response.data.data.token);
+    }
+  }
+});
+```
+
+### 5.2 统一UI组件库规范
+```vue
+<!-- 统一按钮组件 -->
+<template>
+  <button 
+    :class="['btn', type, size, { disabled: disabled }]"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'UniButton',
+  props: {
+    type: {
+      type: String,
+      default: 'default', // primary/success/warning/danger
+      validator: value => ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
+    },
+    size: {
+      type: String,
+      default: 'medium', // small/medium/large
+      validator: value => ['small', 'medium', 'large'].includes(value)
+    },
+    disabled: Boolean
+  },
+  methods: {
+    handleClick(event) {
+      if (!this.disabled) {
+        this.$emit('click', event);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.btn {
+  border: none;
+  border-radius: 8rpx;
+  padding: 16rpx 32rpx;
+  font-size: 28rpx;
+  transition: all 0.3s;
+}
+
+.btn.primary {
+  background-color: #007AFF;
+  color: #FFFFFF;
+}
+
+.btn.small {
+  padding: 12rpx 24rpx;
+  font-size: 24rpx;
+}
+
+.btn.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
+```
+
+### 5.3 统一交互体验规范
+```javascript
+// 统一加载状态管理
+const useLoading = () => {
+  const isLoading = ref(false);
+  
+  const showLoading = (title = '加载中') => {
+    isLoading.value = true;
+    uni.showLoading({ title, mask: true });
+  };
+  
+  const hideLoading = () => {
+    isLoading.value = false;
+    uni.hideLoading();
+  };
+  
+  return { isLoading, showLoading, hideLoading };
+};
+
+// 统一错误处理
+const handleApiError = (error) => {
+  console.error('API Error:', error);
+  
+  if (error.response?.status === 401) {
+    // token过期，跳转到登录页
+    uni.showModal({
+      title: '提示',
+      content: '登录已过期，请重新登录',
+      showCancel: false,
+      success: () => {
+        uni.navigateTo({ url: '/pages/login/login' });
+      }
+    });
+  } else if (error.response?.status === 403) {
+    uni.showToast({ title: '无权限访问', icon: 'none' });
+  } else {
+    uni.showToast({ 
+      title: error.response?.data?.message || '网络异常，请重试', 
+      icon: 'none' 
+    });
+  }
+};
+
+// 统一页面跳转
+const navigateTo = (url, params = {}) => {
+  if (params) {
+    const query = Object.keys(params)
+      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
+      .join('&');
+    url += `?${query}`;
+  }
+  uni.navigateTo({ url });
+};
+```
+
+## 6. 安全设计
+
+### 6.1 统一认证授权
+- JWT Token认证 + Refresh Token机制
+- 基于角色的访问控制（RBAC）
+- API访问频率限制和防刷机制
+- 多因素认证支持（短信验证码）
+
+### 6.2 数据安全与隐私保护
+- 敏感数据加密存储（AES-256）
+- HTTPS传输加密（TLS 1.3）
+- 视频文件访问权限控制和签名URL
+- 用户隐私数据脱敏处理
+- GDPR/个人信息保护法合规
+
+### 6.3 业务安全防护
+- 订单状态机验证和防篡改
+- 支付金额校验和防重放攻击
+- 操作日志审计和追溯
+- 敏感操作二次确认机制
+- 业务数据完整性校验
+
+## 6. 性能优化
+
+### 6.1 数据库优化
+- 读写分离
+- 索引优化
+- 分表分库策略
+
+### 6.2 缓存策略
+- Redis缓存热点数据
+- 本地缓存减少IO
+- 缓存失效策略
+
+### 6.3 文件处理
+- 视频文件分片上传
+- CDN加速访问
+- 压缩和转码处理
+
+## 7. 小程序矩阵详细实现
+
+### 7.1 客户端小程序 (Client Mini-Program)
+```javascript
+// 主要功能模块
+const clientModules = {
+  // 用户认证
+  auth: {
+    login: '用户登录注册',
+    profile: '个人信息管理',
+    certification: '企业认证'
+  },
+  
+  // 采购管理
+  procurement: {
+    orderCreate: '创建采购订单',
+    orderList: '订单列表查看',
+    orderDetail: '订单详情',
+    orderTracking: '订单跟踪'
+  },
+  
+  // 支付结算
+  payment: {
+    prepayment: '预付款支付',
+    balancePayment: '尾款支付',
+    paymentRecords: '支付记录'
+  },
+  
+  // 消息通知
+  notification: {
+    systemMsg: '系统消息',
+    orderUpdates: '订单状态更新',
+    paymentReminders: '付款提醒'
+  }
+};
+
+// 技术特色
+- 基于uni-app的跨端开发
+- 集成微信支付SDK
+- 实时订单状态推送
+- 地图集成和位置服务
+```
+
+### 7.2 供应商小程序 (Supplier Mini-Program)
+```javascript
+// 主要功能模块
+const supplierModules = {
+  // 订单管理
+  order: {
+    orderReceive: '接单管理',
+    orderProcessing: '订单处理',
+    orderStatus: '订单状态更新'
+  },
+  
+  // 牛只管理
+  cattle: {
+    inventory: '牛只库存',
+    qualityCheck: '质量检验',
+    certificateUpload: '证件上传'
+  },
+  
+  // 装车管理
+  loading: {
+    loadingPlan: '装车计划',
+    loadingProcess: '装车过程记录',
+    videoRecording: '装车视频录制'
+  },
+  
+  // 结算管理
+  settlement: {
+    settlementQuery: '结算查询',
+    invoiceManagement: '发票管理',
+    paymentRecords: '收款记录'
+  }
+};
+
+// 技术特色
+- 视频录制和上传功能
+- 证件扫描和OCR识别
+- 库存管理系统集成
+- 财务结算对接
+```
+
+### 7.3 司机小程序 (Driver Mini-Program)
+```javascript
+// 主要功能模块
+const driverModules = {
+  // 运输任务
+  transport: {
+    taskReceive: '任务接收',
+    taskList: '任务列表',
+    taskDetail: '任务详情'
+  },
+  
+  // 位置跟踪
+  tracking: {
+    autoTracking: '自动位置上报',
+    manualReport: '手动状态报告',
+    routePlanning: '路线规划'
+  },
+  
+  // 牛只监控
+  monitoring: {
+    cattleStatus: '牛只状态监测',
+    environment: '环境参数监测',
+    emergency: '紧急情况处理'
+  },
+  
+  // 单据管理
+  documents: {
+    deliveryNote: '交货单管理',
+    receiptConfirmation: '回执确认',
+    expenseReporting: '费用报销'
+  }
+};
+
+// 技术特色
+- 后台位置持续跟踪
+- 离线数据同步机制
+- 紧急求助功能
+- 多媒体数据采集
+```
+
+### 7.4 内部员工小程序 (Staff Mini-Program)
+```javascript
+// 主要功能模块
+const staffModules = {
+  // 运营监控
+  operation: {
+    dashboard: '运营看板',
+    orderMonitor: '订单监控',
+    exceptionHandling: '异常处理'
+  },
+  
+  // 客户服务
+  customerService: {
+    customerInfo: '客户信息',
+    serviceRecords: '服务记录',
+    complaintHandling: '投诉处理'
+  },
+  
+  // 数据统计
+  statistics: {
+    businessData: '业务数据',
+    financialReports: '财务报表',
+    performanceAnalysis: '绩效分析'
+  },
+  
+  // 系统管理
+  system: {
+    userManagement: '用户管理',
+    rolePermission: '权限管理',
+    systemSettings: '系统设置'
+  }
+};
+
+// 技术特色
+- 管理后台功能移动化
+- 实时数据可视化
+- 移动审批流程
+- 多维度数据分析
+```
+
+## 8. 监控告警
+
+### 8.1 系统监控
+- 应用性能监控(APM)：监控各微服务性能指标
+- 数据库监控：MySQL和Redis性能监控
+- 服务器资源监控：CPU、内存、磁盘、网络
+- 小程序性能监控：加载时间、渲染性能、API响应
+
+### 8.2 业务监控
+- 订单流程监控：各状态订单数量和耗时
+- 运输异常检测：偏离路线、长时间停留预警
+- 支付成功率监控：各渠道支付成功率和失败原因
+- 用户行为分析：各小程序用户活跃度和功能使用情况
+
+### 8.3 日志管理
+- 操作日志记录：用户关键操作审计日志
+- 错误日志收集：系统异常和错误信息收集
+- 日志分析和查询：ELK日志分析平台
+- 实时日志追踪：分布式请求追踪
+
+## 9. 部署方案
+
+### 9.1 开发环境
+```yaml
+# docker-compose-dev.yml
+version: '3.8'
+services:
+  # 后端服务
+  user-service:
+    build: ./services/user-service
+    ports:
+      - "3001:3000"
+    environment:
+      - NODE_ENV=development
+      - DB_HOST=mysql
+      - REDIS_HOST=redis
+  
+  # 数据库
+  mysql:
+    image: mysql:8.0
+    environment:
+      - MYSQL_ROOT_PASSWORD=root
+      - MYSQL_DATABASE=niu_mall
+    ports:
+      - "3306:3306"
+  
+  # 缓存
+  redis:
+    image: redis:6.2
+    ports:
+      - "6379:6379"
+
+  # 小程序开发环境
+  mini-program-dev:
+    image: node:16
+    working_dir: /app
+    volumes:
+      - ./mini_program:/app
+    ports:
+      - "8080:8080"
+    command: npm run dev:mp-weixin
+```
+
+### 9.2 生产环境
+```yaml
+# kubernetes部署配置
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: niu-mall-api
+  labels:
+    app: niu-mall
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: niu-mall-api
+  template:
+    metadata:
+      labels:
+        app: niu-mall-api
+    spec:
+      containers:
+      - name: api-gateway
+        image: niu-mall/api-gateway:latest
+        ports:
+        - containerPort: 3000
+        env:
+        - name: NODE_ENV
+          value: production
+        resources:
+          requests:
+            memory: "512Mi"
+            cpu: "250m"
+          limits:
+            memory: "1Gi"
+            cpu: "500m"
+
+# 小程序生产部署
+- 微信小程序平台审核发布
+- 阿里云OSS静态资源托管
+- CDN加速和域名配置
+- SSL证书和HTTPS强制
+```
+
+### 9.3 备份恢复策略
+```yaml
+# 数据库备份
+backup:
+  schedule: "0 2 * * *"  # 每天凌晨2点
+  retention: 30          # 保留30天
+  storage: 
+    type: oss            # 阿里云OSS存储
+    bucket: niu-mall-backup
+
+# 文件备份
+file_backup:
+  enabled: true
+  schedule: "0 3 * * *"  # 每天凌晨3点
+  include:
+    - /data/uploads     # 用户上传文件
+    - /data/logs        # 日志文件
+  exclude:
+    - /data/temp        # 临时文件
+
+# 灾难恢复
+recovery:
+  rto: "4h"             # 恢复时间目标4小时
+  rpo: "1h"             # 恢复点目标1小时
+  procedures:
+    - database_restore
+    - service_restart
+    - data_validation
+```
+
+## 10. 开发规范
+
+### 10.1 代码规范
+```javascript
+// ESLint配置
+module.exports = {
+  env: {
+    node: true,
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    'prettier'
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+};
+
+// Prettier配置
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false
+}
+```
+
+### 10.2 Git工作流
+```bash
+# 功能开发流程
+git checkout -b feature/order-management
+git add .
+git commit -m "feat: 添加订单管理功能"
+git push origin feature/order-management
+
+# 代码审查
+- 至少需要2个reviewer批准
+- 所有测试必须通过
+- 代码覆盖率要求85%以上
+
+# 发布流程
+- 开发 → 测试 → 预发布 → 生产
+- 蓝绿部署或金丝雀发布
+- 自动化CI/CD流水线
+```
+
+### 10.3 测试规范
+```javascript
+// 单元测试示例
+describe('OrderService', () => {
+  it('should create order successfully', async () => {
+    const orderData = {
+      breedType: 'simmental',
+      minWeight: 500,
+      maxWeight: 600,
+      totalCount: 100,
+      unitPrice: 35.5
+    };
+    
+    const result = await orderService.createOrder(orderData);
+    expect(result).toHaveProperty('id');
+    expect(result.status).toBe('pending');
+  });
+
+  it('should validate order data', async () => {
+    const invalidData = { totalCount: -1 };
+    await expect(orderService.createOrder(invalidData))
+      .rejects
+      .toThrow('数量必须大于0');
+  });
+});
+
+// 测试覆盖率要求
+- 单元测试: ≥80%
+- 集成测试: ≥70% 
+- E2E测试: 核心业务流程100%覆盖
+```
+- 灾难恢复预案
+
+## 9. 开发规范
+
+### 9.1 代码规范
+- TypeScript严格模式
+- ESLint代码检查
+- Prettier代码格式化
+
+### 9.2 Git规范
+- 分支管理策略
+- Commit message规范
+- Code Review流程
+
+### 9.3 文档规范
+- API文档自动化
+- 数据库文档维护
+- 部署文档更新
\ No newline at end of file
diff --git a/docs/活牛采购智能数字化系统PRD.md b/docs/活牛采购智能数字化系统PRD.md
new file mode 100644
index 0000000..ebd907b
--- /dev/null
+++ b/docs/活牛采购智能数字化系统PRD.md
@@ -0,0 +1,177 @@
+# 活牛采购智能数字化系统 - 产品需求文档
+
+## 版本历史
+| 版本 | 日期 | 作者 | 说明 |
+|------|------|------|------|
+| v1.0 | 2024-01-20 | 产品经理 | 初版PRD |
+
+## 1. 项目概述
+
+### 1.1 项目背景
+为解决活牛采购过程中信息不透明、流程不规范、风险控制难等问题，开发活牛采购智能数字化管理系统。
+
+### 1.2 项目目标
+- 实现采购流程标准化、数字化管理
+- 提高采购效率，降低操作风险
+- 确保牛只质量可追溯，交易安全可靠
+
+### 1.3 成功标准
+- 采购流程耗时减少30%
+- 操作错误率降低至1%以下
+- 客户满意度达到95%以上
+
+## 2. 用户角色与用例
+
+### 2.1 用户角色
+| 角色 | 职责描述 | 系统权限 |
+|------|----------|----------|
+| 采购人 | 发起采购需求，验收确认，支付审批 | 订单创建、验收确认、支付审批 |
+| 贸易商 | 订单转发，供应商管理，资金结算 | 订单管理、供应商管理、结算处理 |
+| 供应商 | 牛只准备，装车管理，单据提供 | 牛只信息维护、装车管理、单据上传 |
+| 司机 | 运输执行，状态上报，单据交接 | 运输跟踪、状态上报、单据确认 |
+
+### 2.2 核心用例
+1. **采购订单管理** - 采购人创建订单，贸易商转发订单
+2. **牛只核验管理** - 供应商准备牛只，上传检疫证明
+3. **运输跟踪管理** - 司机实时上报运输状态
+4. **到货验收管理** - 采购人验收确认，处理异常
+5. **结算支付管理** - 自动计算款项，在线支付
+
+## 3. 功能需求
+
+### 3.1 采购计划阶段
+#### 用户故事：As a 采购人, I want to 创建采购订单, so that 明确采购需求
+**验收标准：**
+- Given 采购人登录系统
+- When 填写《采购订货单》信息
+- Then 系统生成待确认订单
+- And 包含品种、重量、数量、单价等完整信息
+
+#### 用户故事：As a 贸易商, I want to 审核供应商资质, so that 确保供应商合规
+**验收标准：**
+- Given 贸易商查看供应商信息
+- When 核实营业执照和检疫证明开具能力
+- Then 系统记录审核结果
+- And 支持证件文件上传和查看
+
+### 3.2 装车前准备
+#### 用户故事：As a 司机, I want to 完成车辆备案, so that 确保运输车辆合规
+**验收标准：**
+- Given 司机准备装车
+- When 上传空车过磅视频和消毒证明
+- Then 系统验证视频完整性
+- And 驻场兽医在线确认消毒证明
+
+#### 用户故事：As a 供应商, I want to 准备牛只核验, so that 确保牛只符合要求
+**验收标准：**
+- Given 供应商准备装车
+- When 提供《动物检疫合格证明》
+- And 确保空水空槽时间≥8小时
+- Then 系统记录核验信息
+- And 支持不同品种的重量区间配置
+
+### 3.3 运输交付
+#### 用户故事：As a 司机, I want to 实时上报运输状态, so that 采购方掌握运输进度
+**验收标准：**
+- Given 司机在运输途中
+- When 每10分钟自动上报位置和牛只状态
+- Then 系统记录运输轨迹
+- And 支持视频状态上报
+
+#### 用户故事：As a 采购人, I want to 进行到货验收, so that 确保牛只质量
+**验收标准：**
+- Given 牛只到岸后2小时内
+- When 采购人验收牛只
+- Then 系统记录验收结果
+- And 支持异常情况记录和处理
+
+### 3.4 结算支付
+#### 用户故事：As a 系统, I want to 自动计算结算金额, so that 减少人工错误
+**验收标准：**
+- Given 验收完成
+- When 系统获取上车重量和单价
+- Then 自动计算：上车重量×单价 - 预付款
+- And 生成结算单
+
+#### 用户故事：As a 采购人, I want to 在线支付尾款, so that 完成交易
+**验收标准：**
+- Given 验收后3小时内
+- When 采购人确认结算单
+- Then 系统支持在线支付
+- And 生成支付凭证
+
+### 3.5 异常处理
+#### 用户故事：As a 系统, I want to 自动计算违约金, so that 规范违约处理
+**验收标准：**
+- Given 发生违约情况
+- When 系统识别违约类型
+- Then 按每日合同金额0.5%计算违约金
+- And 生成违约处理单
+
+## 4. 非功能需求
+
+### 4.1 性能要求
+- 系统响应时间：< 2秒
+- 并发用户数：支持100+用户同时在线
+- 数据存储：视频文件永久保存
+
+### 4.2 安全要求
+- 数据传输加密：HTTPS协议
+- 身份认证：多因素认证
+- 权限控制：基于角色的访问控制
+- 数据备份：每日自动备份
+
+### 4.3 可靠性要求
+- 系统可用性：99.9%
+- 故障恢复：< 30分钟
+- 数据一致性：事务完整性保证
+
+## 5. 原型说明
+
+### 5.1 界面关键元素
+- **驾驶舱视图**：采购流程状态可视化
+- **订单管理**：订单创建、审核、跟踪一体化
+- **地图视图**：实时运输轨迹展示
+- **视频监控**：装车卸货过程视频查看
+- **结算中心**：自动计算，在线支付
+
+### 5.2 交互流程
+1. 采购人创建订单 → 贸易商确认转发 → 供应商接单
+2. 供应商准备牛只 → 上传证明文件 → 司机车辆备案
+3. 装车监控 → 运输跟踪 → 到货验收
+4. 系统自动结算 → 在线支付 → 文件归档
+
+## 6. 范围界定
+
+### 本版本包含：
+- 活牛采购全流程数字化管理
+- 四类用户角色完整功能
+- 双订单流程（采购人→贸易商→供应商）
+- 运输实时跟踪和状态上报
+- 自动化结算和支付处理
+
+### 本版本不包含：
+- 牛只养殖管理功能
+- 销售端功能
+- 复杂的财务核算功能
+- 多语言支持
+
+## 7. 优先级排序
+
+### P0（最高优先级）
+- 采购订单创建和管理
+- 牛只核验和证件管理
+- 运输状态实时跟踪
+- 到货验收和异常处理
+
+### P1（高优先级）
+- 自动化结算计算
+- 在线支付功能
+- 文件归档和管理
+- 数据统计和分析
+
+### P2（中优先级）
+- 移动端APP开发
+- 系统集成接口
+- 高级报表功能
+- 消息通知系统
\ No newline at end of file
diff --git a/mini_program/README.md b/mini_program/README.md
new file mode 100644
index 0000000..471a6f2
--- /dev/null
+++ b/mini_program/README.md
@@ -0,0 +1,37 @@
+# Mini Program 微信小程序矩阵
+
+## 技术栈
+- 微信小程序原生开发
+- Taro多端框架（可选）
+- WeUI / Vant Weapp UI组件库
+
+## 项目结构
+```
+mini_program/
+├── app-one/           # 小程序项目1
+│   ├── pages/         # 页面文件
+│   ├── components/    # 自定义组件
+│   ├── utils/         # 工具函数
+│   ├── app.js         # 小程序入口
+│   ├── app.json       # 小程序配置
+│   └── app.wxss       # 全局样式
+├── app-two/           # 小程序项目2
+├── common/            # 公共资源
+│   ├── components/    # 公共组件
+│   ├── utils/         # 公共工具
+│   └── api/           # 公共API
+├── docs/              # 开发文档
+└── README.md
+```
+
+## 小程序类型
+- 电商小程序
+- 工具类小程序
+- 内容类小程序
+- 服务类小程序
+
+## 开发规范
+1. 遵循微信小程序开发规范
+2. 组件化开发
+3. 代码复用和模块化
+4. 性能优化
\ No newline at end of file
diff --git a/website/about.html b/website/about.html
new file mode 100644
index 0000000..d871a99
--- /dev/null
+++ b/website/about.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>关于我们 - 活牛采购智能数字化系统</title>
+    <meta name="description" content="了解活牛采购智能数字化系统的公司背景、团队实力、发展历程和企业文化，我们致力于为养殖行业提供专业的数字化采购解决方案。">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
+    <!-- AOS Animation -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+    <!-- 自定义样式 -->
+    <link href="css/custom.css" rel="stylesheet">
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
+        <div class="container">
+            <a class="navbar-brand fw-bold" href="index.html">活牛采购智能数字化系统</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">首页</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="product.html">产品介绍</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="solutions.html">解决方案</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="cases.html">客户案例</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="about.html">关于我们</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="news.html">新闻动态</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.html">联系我们</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 页面内容 -->
+    <main>
+        <!-- 英雄区域 -->
+        <section class="hero-section bg-dark text-white py-5 mt-5">
+            <div class="container py-5">
+                <div class="row align-items-center">
+                    <div class="col-lg-8 mx-auto text-center">
+                        <h1 class="display-4 fw-bold mb-4">关于我们</h1>
+                        <p class="lead mb-4">致力于用科技赋能传统养殖行业，打造智能化的活牛采购数字化平台</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 公司介绍 -->
+        <section class="py-5">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-lg-6" data-aos="fade-right">
+                        <h2 class="fw-bold text-dark mb-4">公司简介</h2>
+                        <p class="text-muted mb-4">
+                            活牛采购智能数字化系统成立于2018年，是一家专注于为养殖行业提供数字化采购解决方案的科技公司。
+                            我们深耕畜牧行业多年，深刻理解传统采购模式的痛点和挑战。
+                        </p>
+                        <p class="text-muted mb-4">
+                            通过结合物联网、大数据分析和人工智能技术，我们开发了一套完整的活牛采购数字化管理系统，
+                            帮助养殖企业实现采购流程的标准化、透明化和智能化。
+                        </p>
+                        <div class="row">
+                            <div class="col-6">
+                                <div class="d-flex align-items-center mb-3">
+                                    <div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
+                                        <i class="fas fa-users fs-4 text-primary"></i>
+                                    </div>
+                                    <div>
+                                        <div class="h4 fw-bold text-dark mb-0">200+</div>
+                                        <small class="text-muted">企业客户</small>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <div class="d-flex align-items-center mb-3">
+                                    <div class="bg-success bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
+                                        <i class="fas fa-cow fs-4 text-success"></i>
+                                    </div>
+                                    <div>
+                                        <div class="h4 fw-bold text-dark mb-0">50,000+</div>
+                                        <small class="text-muted">年交易牛只</small>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <div class="d-flex align-items-center mb-3">
+                                    <div class="bg-warning bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
+                                        <i class="fas fa-map-marker-alt fs-4 text-warning"></i>
+                                    </div>
+                                    <div>
+                                        <div class="h4 fw-bold text-dark mb-0">15+</div>
+                                        <small class="text-muted">省份覆盖</small>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <div class="d-flex align-items-center mb-3">
+                                    <div class="bg-info bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
+                                        <i class="fas fa-award fs-4 text-info"></i>
+                                    </div>
+                                    <div>
+                                        <div class="h4 fw-bold text-dark mb-0">10+</div>
+                                        <small class="text-muted">行业专利</small>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-6" data-aos="fade-left">
+                        <div class="placeholder-image bg-primary bg-opacity-10 rounded-3 p-5 text-center">
+                            <i class="fas fa-building fs-1 text-primary mb-3"></i>
+                            <h5 class="text-dark">公司总部</h5>
+                            <p class="text-muted mb-0">北京市朝阳区科技园区</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 使命愿景 -->
+        <section class="py-5 bg-light">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-4 mb-4" data-aos="fade-up">
+                        <div class="text-center p-4">
+                            <div class="bg-primary bg-opacity-10 p-4 rounded-circle d-inline-block mb-3 feature-icon">
+                                <i class="fas fa-bullseye fs-2 text-primary"></i>
+                            </div>
+                            <h4 class="fw-bold text-dark mb-3">我们的使命</h4>
+                            <p class="text-muted">
+                                通过数字化技术推动传统养殖行业转型升级，
+                让每一头牛的采购都更加智能、高效、透明。
+                            </p>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="100">
+                        <div class="text-center p-4">
+                            <div class="bg-success bg-opacity-10 p-4 rounded-circle d-inline-block mb-3 feature-icon">
+                                <i class="fas fa-eye fs-2 text-success"></i>
+                            </div>
+                            <h4 class="fw-bold text-dark mb-3">我们的愿景</h4>
+                            <p class="text-muted">
+                                成为全球领先的畜牧行业数字化解决方案提供商，
+                构建智慧养殖新生态。
+                            </p>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="200">
+                        <div class="text-center p-4">
+                            <div class="bg-warning bg-opacity-10 p-4 rounded-circle d-inline-block mb-3 feature-icon">
+                                <i class="fas fa-handshake fs-2 text-warning"></i>
+                            </div>
+                            <h4 class="fw-bold text-dark mb-3">我们的价值观</h4>
+                            <p class="text-muted">
+                                客户至上、技术创新、诚信务实、合作共赢，
+                为行业发展创造持续价值。
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 团队介绍 -->
+        <section class="py-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 text-center mb-5">
+                        <h2 class="fw-bold text-dark mb-3">核心团队</h2>
+                        <p class="text-muted">汇聚行业专家和技术精英，为您提供专业服务</p>
+                    </div>
+                </div>
+
+                <div class="row g-4">
+                    <!-- 团队成员1 -->
+                    <div class="col-lg-3 col-md-6" data-aos="fade-up">
+                        <div class="card border-0 shadow-sm h-100 text-center team-card">
+                            <div class="team-avatar mx-auto mt-4">
+                        <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
+                            <i class="fas fa-user-tie fs-1 text-primary"></i>
+                        </div>
+                    </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-1">张明</h5>
+                                <span class="text-primary small mb-2 d-block">创始人 & CEO</span>
+                                <p class="text-muted small">
+                                    15年畜牧行业经验，前某大型养殖集团采购总监，
+                    深刻理解行业痛点。
+                                </p>
+                                <div class="social-links">
+                                    <a href="#" class="text-muted me-2"><i class="fab fa-linkedin"></i></a>
+                                    <a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 团队成员2 -->
+                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
+                        <div class="card border-0 shadow-sm h-100 text-center team-card">
+                            <div class="team-avatar mx-auto mt-4">
+                        <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
+                            <i class="fas fa-laptop-code fs-1 text-success"></i>
+                        </div>
+                    </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-1">李华</h5>
+                                <span class="text-success small mb-2 d-block">CTO</span>
+                                <p class="text-muted small">
+                                    前BAT技术专家，10年大数据和AI研发经验，
+                    主导系统架构设计。
+                                </p>
+                                <div class="social-links">
+                                    <a href="#" class="text-muted me-2"><i class="fab fa-github"></i></a>
+                                    <a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 团队成员3 -->
+                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
+                        <div class="card border-0 shadow-sm h-100 text-center team-card">
+                            <div class="team-avatar mx-auto mt-4">
+                        <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
+                            <i class="fas fa-chart-line fs-1 text-warning"></i>
+                        </div>
+                    </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-1">王芳</h5>
+                                <span class="text-warning small mb-2 d-block">运营总监</span>
+                                <p class="text-muted small">
+                                    8年互联网运营经验，擅长用户增长和客户成功，
+                    负责整体运营策略。
+                                </p>
+                                <div class="social-links">
+                                    <a href="#" class="text-muted me-2"><i class="fab fa-weixin"></i></a>
+                                    <a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 团队成员4 -->
+                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
+                        <div class="card border-0 shadow-sm h-100 text-center team-card">
+                            <div class="team-avatar mx-auto mt-4">
+                        <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
+                            <i class="fas fa-graduation-cap fs-1 text-info"></i>
+                        </div>
+                    </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-1">陈教授</h5>
+                                <span class="text-info small mb-2 d-block">首席科学家</span>
+                                <p class="text-muted small">
+                                    农业大学生物科技教授，畜牧专家，
+                    负责技术研发和标准制定。
+                                </p>
+                                <div class="social-links">
+                                    <a href="#" class="text-muted me-2"><i class="fas fa-book"></i></a>
+                                    <a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row mt-5">
+                    <div class="col-12 text-center">
+                        <a href="#" class="btn btn-outline-primary">查看完整团队</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 发展历程 -->
+        <section class="py-5 bg-light">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 text-center mb-5">
+                        <h2 class="fw-bold text-dark mb-3">发展历程</h2>
+                        <p class="text-muted">从初创到行业领先的成长轨迹</p>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-12">
+                        <div class="timeline">
+                            <!-- 时间线项目1 -->
+                            <div class="timeline-item" data-aos="fade-right">
+                                <div class="timeline-date">2018.06</div>
+                                <div class="timeline-content">
+                                    <h5 class="fw-bold text-dark">公司成立</h5>
+                                    <p class="text-muted mb-0">在北京正式注册成立，开始产品研发</p>
+                                </div>
+                            </div>
+
+                            <!-- 时间线项目2 -->
+                            <div class="timeline-item" data-aos="fade-left">
+                                <div class="timeline-date">2019.03</div>
+                                <div class="timeline-content">
+                                    <h5 class="fw-bold text-dark">首版发布</h5>
+                                    <p class="text-muted mb-0">推出第一代活牛采购管理系统</p>
+                                </div>
+                            </div>
+
+                            <!-- 时间线项目3 -->
+                            <div class="timeline-item" data-aos="fade-right">
+                                <div class="timeline-date">2020.01</div>
+                                <div class="timeline-content">
+                                    <h5 class="fw-bold text-dark">A轮融资</h5>
+                                    <p class="text-muted mb-0">获得千万级A轮融资，加速市场扩张</p>
+                                </div>
+                            </div>
+
+                            <!-- 时间线项目4 -->
+                            <div class="timeline-item" data-aos="fade-left">
+                                <div class="timeline-date">2021.08</div>
+                                <div class="timeline-content">
+                                    <h5 class="fw-bold text-dark">用户突破</h5>
+                                    <p class="text-muted mb-0">服务客户超过100家，年交易牛只破万</p>
+                                </div>
+                            </div>
+
+                            <!-- 时间线项目5 -->
+                            <div class="timeline-item" data-aos="fade-right">
+                                <div class="timeline-date">2022.12</div>
+                                <div class="timeline-content">
+                                    <h5 class="fw-bold text-dark">技术升级</h5>
+                                    <p class="text-muted mb-0">发布AI智能评估系统，获得多项专利</p>
+                                </div>
+                            </div>
+
+                            <!-- 时间线项目6 -->
+                            <div class="timeline-item" data-aos="fade-left">
+                                <div class="timeline-date">2023.06</div>
+                                <div class="timeline-content">
+                                    <h5 class="fw-bold text-dark">全国布局</h5>
+                                    <p class="text-muted mb-0">业务覆盖全国15个省份，成为行业标杆</p>
+                                </div>
+                            </div>
+
+                            <!-- 时间线项目7 -->
+                            <div class="timeline-item" data-aos="fade-right">
+                                <div class="timeline-date">2024.01</div>
+                                <div class="timeline-content">
+                                    <h5 class="fw-bold text-dark">生态构建</h5>
+                                    <p class="text-muted mb-0">启动智慧养殖生态平台建设</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 合作伙伴 -->
+        <section class="py-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 text-center mb-5">
+                        <h2 class="fw-bold text-dark mb-3">合作伙伴</h2>
+                        <p class="text-muted">与行业领先企业共同推动养殖数字化发展</p>
+                    </div>
+                </div>
+
+                <div class="row align-items-center">
+                    <div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up">
+                        <div class="partner-logo bg-light rounded-3 p-4 text-center">
+                            <i class="fas fa-university fs-2 text-muted"></i>
+                            <p class="small text-muted mb-0 mt-2">农业大学</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="100">
+                        <div class="partner-logo bg-light rounded-3 p-4 text-center">
+                            <i class="fas fa-hospital fs-2 text-muted"></i>
+                            <p class="small text-muted mb-0 mt-2">兽医研究所</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="200">
+                        <div class="partner-logo bg-light rounded-3 p-4 text-center">
+                            <i class="fas fa-industry fs-2 text-muted"></i>
+                            <p class="small text-muted mb-0 mt-2">牧业集团</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="300">
+                        <div class="partner-logo bg-light rounded-3 p-4 text-center">
+                            <i class="fas fa-truck fs-2 text-muted"></i>
+                            <p class="small text-muted mb-0 mt-2">物流公司</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="400">
+                        <div class="partner-logo bg-light rounded-3 p-4 text-center">
+                            <i class="fas fa-money-bill-wave fs-2 text-muted"></i>
+                            <p class="small text-muted mb-0 mt-2">金融机构</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="500">
+                        <div class="partner-logo bg-light rounded-3 p-4 text-center">
+                            <i class="fas fa-cloud fs-2 text-muted"></i>
+                            <p class="small text-muted mb-0 mt-2">云服务商</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA区域 -->
+        <section class="py-5 bg-primary text-white">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-lg-8">
+                        <h3 class="fw-bold mb-3">加入我们，共创未来</h3>
+                        <p class="mb-4">我们正在寻找志同道合的伙伴，一起用科技改变传统养殖行业</p>
+                    </div>
+                    <div class="col-lg-4 text-lg-end">
+                        <a href="contact.html" class="btn btn-light btn-lg px-4">加入团队</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- 页脚 -->
+    <footer class="text-white py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 mb-4">
+                    <h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
+                    <p class="text-light">
+                        专业的数字化采购管理解决方案，
+                        为养殖企业提供全流程的采购数字化服务。
+                    </p>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">产品</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="product.html" class="text-light text-decoration-none">产品介绍</a></li>
+                        <li><a href="solutions.html" class="text-light text-decoration-none">解决方案</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">价格方案</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">资源</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="cases.html" class="text-light text-decoration-none">客户案例</a></li>
+                        <li><a href="news.html" class="text-light text-decoration-none">新闻动态</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">帮助文档</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">公司</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html" class="text-light text-decoration-none">关于我们</a></li>
+                        <li><a href="contact.html" class="text-light text-decoration-none">联系我们</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">加入我们</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">联系信息</h6>
+                    <div class="text-light">
+                        <p class="mb-1"><i class="fas fa-phone me-2"></i> 15927219038(周经理)</p>
+                        <p class="mb-1"><i class="fas fa-envelope me-2"></i> service@aiotagro.com</p>
+                        <p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 武汉光谷软件园F2栋</p>
+                    </div>
+                </div>
+            </div>
+            
+            <hr class="my-4">
+            
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <p class="text-light mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <div class="d-flex justify-content-md-end">
+                        <a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
+                        <a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
+                        <a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
+    <script src="js/main.js"></script>
+    
+    <script>
+        // 初始化AOS动画
+        AOS.init({
+            duration: 1000,
+            once: true,
+            offset: 100
+        });
+    </script>
+
+    <style>
+        .team-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .team-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
+        }
+        
+        .timeline {
+            position: relative;
+            padding-left: 3rem;
+        }
+        
+        .timeline::before {
+            content: '';
+            position: absolute;
+            left: 1.5rem;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: var(--bs-primary);
+        }
+        
+        .timeline-item {
+            position: relative;
+            margin-bottom: 2rem;
+        }
+        
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -3rem;
+            top: 0.5rem;
+            width: 1rem;
+            height: 1rem;
+            border-radius: 50%;
+            background: var(--bs-primary);
+            border: 3px solid white;
+            box-shadow: 0 0 0 3px var(--bs-primary);
+        }
+        
+        .timeline-date {
+            position: absolute;
+            left: -8rem;
+            top: 0;
+            width: 6rem;
+            text-align: right;
+            font-weight: 600;
+            color: var(--bs-primary);
+        }
+        
+        .timeline-content {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        
+        .partner-logo {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .partner-logo:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
+        }
+        
+        .placeholder-image {
+            background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
+            min-height: 300px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/cases.html b/website/cases.html
new file mode 100644
index 0000000..8229e44
--- /dev/null
+++ b/website/cases.html
@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>客户案例 - 活牛采购智能数字化系统</title>
+    <meta name="description" content="活牛采购智能数字化系统成功案例展示，真实客户评价和使用效果验证，为您选择数字化采购解决方案提供参考。">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
+    <!-- AOS Animation -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+    <!-- 自定义样式 -->
+    <link href="css/custom.css" rel="stylesheet">
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
+        <div class="container">
+            <a class="navbar-brand" href="index.html">
+                <span class="ms-2 fw-bold">活牛采购智能数字化系统</span>
+            </a>
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">首页</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="product.html">产品介绍</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="solutions.html">解决方案</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="cases.html">客户案例</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="about.html">关于我们</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="news.html">新闻动态</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.html">联系我们</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 页面内容 -->
+    <main>
+        <!-- 英雄区域 -->
+        <section class="hero-section bg-dark text-white py-5 mt-5">
+            <div class="container py-5">
+                <div class="row align-items-center">
+                    <div class="col-lg-8 mx-auto text-center">
+                        <h1 class="display-4 fw-bold mb-4">客户成功案例</h1>
+                        <p class="lead mb-4">见证我们如何帮助客户实现采购数字化转型升级，提升业务效率和盈利能力</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 案例筛选 -->
+        <section class="py-4 bg-white">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12">
+                        <div class="d-flex flex-wrap justify-content-center gap-2">
+                            <button class="btn btn-outline-primary active" data-filter="all">全部案例</button>
+                            <button class="btn btn-outline-primary" data-filter="large">大型企业</button>
+                            <button class="btn btn-outline-primary" data-filter="medium">中型企业</button>
+                            <button class="btn btn-outline-primary" data-filter="small">小型企业</button>
+                            <button class="btn btn-outline-primary" data-filter="beef">肉牛养殖</button>
+                            <button class="btn btn-outline-primary" data-filter="dairy">奶牛牧场</button>
+                            <button class="btn btn-outline-primary" data-filter="trade">贸易服务</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 案例展示 -->
+        <section class="py-5">
+            <div class="container">
+                <div class="row g-4" id="cases-container">
+                    <!-- 案例1 -->
+                    <div class="col-lg-4 col-md-6 case-item" data-category="large beef" data-aos="fade-up">
+                        <div class="card h-100 border-0 shadow-sm case-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-primary bg-opacity-10 d-flex align-items-center justify-content-center feature-icon" style="height: 200px;">
+                                    <i class="fas fa-building fs-1 text-primary"></i>
+                                </div>
+                                <span class="position-absolute top-0 end-0 m-3 badge bg-primary">大型企业</span>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-2">内蒙古草原牧业集团</h5>
+                                <span class="badge bg-light text-dark mb-3">肉牛养殖 · 年采购5000+头</span>
+                                <p class="text-muted mb-3">通过系统实现采购流程标准化，采购效率提升40%，成本降低15%</p>
+                                
+                                <div class="case-stats mb-3">
+                                    <div class="d-flex justify-content-between small text-muted">
+                                        <span><i class="fas fa-arrow-up text-success me-1"></i> 效率 +40%</span>
+                                        <span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -15%</span>
+                                        <span><i class="fas fa-chart-line text-primary me-1"></i> ROI 3.2倍</span>
+                                    </div>
+                                </div>
+                                
+                                <div class="testimonial bg-light p-3 rounded mb-3">
+                                    <p class="mb-0 small text-muted">"系统帮助我们实现了采购全流程数字化，现在我们可以实时追踪每头牛的状态，大大提升了管理效率。"</p>
+                                    <div class="d-flex align-items-center mt-2">
+                                        <div class="avatar-placeholder bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 30px; height: 30px;">
+                                            <i class="fas fa-user text-primary fs-6"></i>
+                                        </div>
+                                        <div>
+                                            <span class="small fw-bold">张总</span>
+                                            <span class="small d-block text-muted">采购总监</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 案例2 -->
+                    <div class="col-lg-4 col-md-6 case-item" data-category="medium dairy" data-aos="fade-up" data-aos-delay="100">
+                        <div class="card h-100 border-0 shadow-sm case-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-success bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-tractor fs-1 text-success"></i>
+                                </div>
+                                <span class="position-absolute top-0 end-0 m-3 badge bg-success">中型企业</span>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-2">河北优牧乳业</h5>
+                                <span class="badge bg-light text-dark mb-3">奶牛牧场 · 年采购2000头</span>
+                                <p class="text-muted mb-3">数字化管理育种牛只采购，奶牛品质提升20%，产奶量增加15%</p>
+                                
+                                <div class="case-stats mb-3">
+                                    <div class="d-flex justify-content-between small text-muted">
+                                        <span><i class="fas fa-arrow-up text-success me-1"></i> 品质 +20%</span>
+                                        <span><i class="fas fa-arrow-up text-success me-1"></i> 产量 +15%</span>
+                                        <span><i class="fas fa-chart-line text-primary me-1"></i> ROI 2.8倍</span>
+                                    </div>
+                                </div>
+                                
+                                <div class="testimonial bg-light p-3 rounded mb-3">
+                                    <p class="mb-0 small text-muted">"系统的数据分析功能帮助我们筛选出最优质的育种牛只，现在我们的奶牛品质和产奶量都有了显著提升。"</p>
+                                    <div class="d-flex align-items-center mt-2">
+                                        <div class="avatar-placeholder bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
+                                            <i class="fas fa-user text-success fs-6"></i>
+                                        </div>
+                                        <div>
+                                            <span class="small fw-bold">李经理</span>
+                                            <span class="small d-block text-muted">牧场负责人</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 案例3 -->
+                    <div class="col-lg-4 col-md-6 case-item" data-category="small trade" data-aos="fade-up" data-aos-delay="200">
+                        <div class="card h-100 border-0 shadow-sm case-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-warning bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-handshake fs-1 text-warning"></i>
+                                </div>
+                                <span class="position-absolute top-0 end-0 m-3 badge bg-warning">小型企业</span>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-2">山东牛贸中介服务</h5>
+                                <span class="badge bg-light text-dark mb-3">贸易服务 · 年交易3000头</span>
+                                <p class="text-muted mb-3">通过平台实现买卖双方高效匹配，交易成功率提升50%，佣金收入翻倍</p>
+                                
+                                <div class="case-stats mb-3">
+                                    <div class="d-flex justify-content-between small text-muted">
+                                        <span><i class="fas fa-arrow-up text-success me-1"></i> 成功率 +50%</span>
+                                        <span><i class="fas fa-arrow-up text-success me-1"></i> 收入 +100%</span>
+                                        <span><i class="fas fa-chart-line text-primary me-1"></i> ROI 4.1倍</span>
+                                    </div>
+                                </div>
+                                
+                                <div class="testimonial bg-light p-3 rounded mb-3">
+                                    <p class="mb-0 small text-muted">"这个系统彻底改变了我们的业务模式，现在我们可以同时处理多个交易，客户满意度大幅提升。"</p>
+                                    <div class="d-flex align-items-center mt-2">
+                                        <div class="avatar-placeholder bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
+                                            <i class="fas fa-user text-warning fs-6"></i>
+                                        </div>
+                                        <div>
+                                            <span class="small fw-bold">王总</span>
+                                            <span class="small d-block text-muted">创始人</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 案例4 -->
+                    <div class="col-lg-4 col-md-6 case-item" data-category="medium beef" data-aos="fade-up" data-aos-delay="300">
+                        <div class="card h-100 border-0 shadow-sm case-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-info bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-industry fs-1 text-info"></i>
+                                </div>
+                                <span class="position-absolute top-0 end-0 m-3 badge bg-info">中型企业</span>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-2">河南美味肉制品</h5>
+                                <span class="badge bg-light text-dark mb-3">肉牛加工 · 年采购1500头</span>
+                                <p class="text-muted mb-3">实现从采购到加工的全程追溯，产品质量提升30%，客户投诉减少80%</p>
+                                
+                                <div class="case-stats mb-3">
+                                    <div class="d-flex justify-content-between small text-muted">
+                                        <span><i class="fas fa-arrow-up text-success me-1"></i> 质量 +30%</span>
+                                        <span><i class="fas fa-arrow-down text-danger me-1"></i> 投诉 -80%</span>
+                                        <span><i class="fas fa-chart-line text-primary me-1"></i> ROI 3.5倍</span>
+                                    </div>
+                                </div>
+                                
+                                <div class="testimonial bg-light p-3 rounded mb-3">
+                                    <p class="mb-0 small text-muted">"追溯系统让我们的产品质量有了保障，现在客户可以扫描二维码了解每块肉的来源，信任度大大提升。"</p>
+                                    <div class="d-flex align-items-center mt-2">
+                                        <div class="avatar-placeholder bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
+                                            <i class="fas fa-user text-info fs-6"></i>
+                                        </div>
+                                        <div>
+                                            <span class="small fw-bold">赵厂长</span>
+                                            <span class="small d-block text-muted">生产总监</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 案例5 -->
+                    <div class="col-lg-4 col-md-6 case-item" data-category="large dairy" data-aos="fade-up" data-aos-delay="400">
+                        <div class="card h-100 border-0 shadow-sm case-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-purple bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-seedling fs-1 text-purple"></i>
+                                </div>
+                                <span class="position-absolute top-0 end-0 m-3 badge bg-purple">大型企业</span>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-2">宁夏现代牧业</h5>
+                                <span class="badge bg-light text-dark mb-3">综合养殖 · 年采购8000头</span>
+                                <p class="text-muted mb-3">多牧场统一管理平台，运营成本降低25%，管理效率提升60%</p>
+                                
+                                <div class="case-stats mb-3">
+                                    <div class="d-flex justify-content-between small text-muted">
+                                        <span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -25%</span>
+                                        <span><i class="fas fa-arrow-up text-success me-1"></i> 效率 +60%</span>
+                                        <span><i class="fas fa-chart-line text-primary me-1"></i> ROI 4.3倍</span>
+                                    </div>
+                                </div>
+                                
+                                <div class="testimonial bg-light p-3 rounded mb-3">
+                                    <p class="mb-0 small text-muted">"系统帮助我们实现了多个牧场的统一管理，现在我们可以实时掌握各牧场的运营状况，决策更加科学。"</p>
+                                    <div class="d-flex align-items-center mt-2">
+                                        <div class="avatar-placeholder bg-purple bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
+                                            <i class="fas fa-user text-purple fs-6"></i>
+                                        </div>
+                                        <div>
+                                            <span class="small fw-bold">陈总</span>
+                                            <span class="small d-block text-muted">运营副总裁</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 案例6 -->
+                    <div class="col-lg-4 col-md-6 case-item" data-category="small beef" data-aos="fade-up" data-aos-delay="500">
+                        <div class="card h-100 border-0 shadow-sm case-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-orange bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-home fs-1 text-orange"></i>
+                                </div>
+                                <span class="position-absolute top-0 end-0 m-3 badge bg-orange">小型企业</span>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="fw-bold text-dark mb-2">四川家庭农场</h5>
+                                <span class="badge bg-light text-dark mb-3">家庭养殖 · 年采购500头</span>
+                                <p class="text-muted mb-3">小规模养殖数字化入门方案，管理成本降低40%，养殖效益提升35%</p>
+                                
+                                <div class="case-stats mb-3">
+                                    <div class="d-flex justify-content-between small text-muted">
+                                        <span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -40%</span>
+                                        <span><i class="fas fa-arrow-up text-success me-1"></i> 效益 +35%</span>
+                                        <span><i class="fas fa-chart-line text-primary me-1"></i> ROI 2.5倍</span>
+                                    </div>
+                                </div>
+                                
+                                <div class="testimonial bg-light p-3 rounded mb-3">
+                                    <p class="mb-0 small text-muted">"作为家庭农场，我们原本担心数字化门槛太高，但这个系统非常容易上手，现在我们的养殖效益明显提升了。"</p>
+                                    <div class="d-flex align-items-center mt-2">
+                                        <div class="avatar-placeholder bg-orange bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
+                                            <i class="fas fa-user text-orange fs-6"></i>
+                                        </div>
+                                        <div>
+                                            <span class="small fw-bold">刘先生</span>
+                                            <span class="small d-block text-muted">农场主</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 数据统计 -->
+        <div class="row mt-5 pt-5" data-aos="fade-up">
+            <div class="col-12 text-center mb-5">
+                <h3 class="fw-bold text-dark mb-3">客户成功数据</h3>
+                <p class="text-muted">基于200+企业客户的真实使用数据统计</p>
+            </div>
+            
+            <div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="100">
+                <div class="display-4 fw-bold text-primary mb-2">85%</div>
+                <p class="text-muted">客户续约率</p>
+            </div>
+            <div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="200">
+                <div class="display-4 fw-bold text-success mb-2">3.2倍</div>
+                <p class="text-muted">平均投资回报率</p>
+            </div>
+            <div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="300">
+                <div class="display-4 fw-bold text-warning mb-2">45%</div>
+                <p class="text-muted">平均效率提升</p>
+            </div>
+            <div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="400">
+                <div class="display-4 fw-bold text-info mb-2">20%</div>
+                <p class="text-muted">平均成本降低</p>
+            </div>
+        </div>
+            </div>
+        </section>
+
+        <!-- CTA区域 -->
+        <section class="py-5 bg-primary text-white">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-lg-8">
+                        <h3 class="fw-bold mb-3">Ready to see similar results?</h3>
+                        <p class="mb-4">加入200+成功企业的行列，开启您的数字化采购转型之旅</p>
+                    </div>
+                    <div class="col-lg-4 text-lg-end">
+                        <a href="contact.html" class="btn btn-light btn-lg px-4">立即咨询</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- 页脚 -->
+    <footer class="bg-dark text-white py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 mb-4">
+                    <h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
+                    <p class="text-light">
+                        专业的数字化采购管理解决方案，
+                        为养殖企业提供全流程的采购数字化服务。
+                    </p>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">产品</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
+                        <li><a href="solutions.html" class="text-muted text-decoration-none">解决方案</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">价格方案</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">资源</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
+                        <li><a href="news.html" class="text-muted text-decoration-none">新闻动态</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">帮助文档</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">公司</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
+                        <li><a href="contact.html" class="text-muted text-decoration-none">联系我们</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">加入我们</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">联系信息</h6>
+                    <div class="text-muted">
+                        <p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
+                        <p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
+                        <p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
+                    </div>
+                </div>
+            </div>
+            
+            <hr class="my-4">
+            
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <p class="text-muted mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <div class="d-flex justify-content-md-end">
+                        <a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
+                        <a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
+                        <a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
+    <script src="js/main.js"></script>
+    
+    <script>
+        // 初始化AOS动画
+        AOS.init({
+            duration: 1000,
+            once: true,
+            offset: 100
+        });
+
+        // 案例筛选功能
+        document.addEventListener('DOMContentLoaded', function() {
+            const filterButtons = document.querySelectorAll('[data-filter]');
+            const caseItems = document.querySelectorAll('.case-item');
+
+            filterButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // 移除所有active状态
+                    filterButtons.forEach(btn => btn.classList.remove('active'));
+                    // 添加当前active状态
+                    this.classList.add('active');
+                    
+                    const filterValue = this.getAttribute('data-filter');
+                    
+                    caseItems.forEach(item => {
+                        if (filterValue === 'all') {
+                            item.style.display = 'block';
+                        } else {
+                            const categories = item.getAttribute('data-category').split(' ');
+                            if (categories.includes(filterValue)) {
+                                item.style.display = 'block';
+                            } else {
+                                item.style.display = 'none';
+                            }
+                        }
+                    });
+                });
+            });
+        });
+    </script>
+
+    <style>
+        .bg-purple { background-color: #6f42c1 !important; }
+        .bg-orange { background-color: #fd7e14 !important; }
+        .text-purple { color: #6f42c1 !important; }
+        .text-orange { color: #fd7e14 !important; }
+        
+        .case-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .case-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
+        }
+        
+        .placeholder-image {
+            background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
+        }
+        
+        .avatar-placeholder {
+            background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
+        }
+    </style>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/contact.html b/website/contact.html
new file mode 100644
index 0000000..fa8170b
--- /dev/null
+++ b/website/contact.html
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>联系我们 - 活牛采购智能数字化系统</title>
+    <meta name="description" content="联系活牛采购智能数字化系统团队，获取产品演示、报价咨询和技术支持，我们为您提供专业的数字化采购解决方案。">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome Icons -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
+    <!-- AOS Animation -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+    <!-- 自定义样式 -->
+    <link href="css/custom.css" rel="stylesheet">
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
+        <div class="container">
+            <a class="navbar-brand" href="index.html">
+                <span class="ms-2 fw-bold text-primary">活牛采购智能数字化系统</span>
+            </a>
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">首页</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="product.html">产品介绍</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="solutions.html">解决方案</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="cases.html">客户案例</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="about.html">关于我们</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="news.html">新闻动态</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="contact.html">联系我们</a>
+                    </li>
+                </ul>
+                
+                <div class="ms-3">
+                    <a href="contact.html" class="btn btn-primary">免费试用</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 页面头部 -->
+    <section class="bg-primary py-5 mt-5">
+        <div class="container py-5">
+            <div class="row">
+                <div class="col-lg-8 mx-auto text-center">
+                    <h1 class="display-4 fw-bold text-white mb-4">联系我们</h1>
+                    <p class="lead text-white-50 mb-0">
+                        我们期待为您提供专业的数字化采购解决方案，立即联系获取产品演示和报价
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 联系信息 -->
+    <section class="py-5">
+        <div class="container">
+            <div class="row g-5">
+                <!-- 联系表单 -->
+                <div class="col-lg-8">
+                    <div class="card border-0 shadow-lg">
+                        <div class="card-body p-5">
+                            <h3 class="fw-bold text-dark mb-4">发送咨询</h3>
+                            <p class="text-muted mb-4">填写以下信息，我们的专业顾问会尽快联系您</p>
+                            
+                            <form id="contactForm" class="needs-validation" novalidate>
+                                <div class="row g-3">
+                                    <div class="col-md-6">
+                                        <label for="name" class="form-label fw-bold">姓名 *</label>
+                                        <input type="text" class="form-control" id="name" required>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <label for="company" class="form-label fw-bold">公司名称</label>
+                                        <input type="text" class="form-control" id="company">
+                                    </div>
+                                    <div class="col-md-6">
+                                        <label for="phone" class="form-label fw-bold">手机号 *</label>
+                                        <input type="tel" class="form-control" id="phone" required>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <label for="email" class="form-label fw-bold">邮箱 *</label>
+                                        <input type="email" class="form-control" id="email" required>
+                                    </div>
+                                    <div class="col-12">
+                                        <label for="interest" class="form-label fw-bold">您感兴趣的是</label>
+                                        <select class="form-select" id="interest">
+                                            <option value="">请选择...</option>
+                                            <option value="demo">产品演示</option>
+                                            <option value="quote">报价咨询</option>
+                                            <option value="cooperation">合作洽谈</option>
+                                            <option value="support">技术支持</option>
+                                            <option value="other">其他</option>
+                                        </select>
+                                    </div>
+                                    <div class="col-12">
+                                        <label for="message" class="form-label fw-bold">详细需求 *</label>
+                                        <textarea class="form-control" id="message" rows="5" required></textarea>
+                                    </div>
+                                    <div class="col-12">
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="agree" required>
+                                            <label class="form-check-label text-muted" for="agree">
+                                                我同意隐私政策和服务条款
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="col-12">
+                                        <button type="submit" class="btn btn-primary btn-lg w-100">
+                                            <i class="bi bi-send me-2"></i>发送咨询
+                                        </button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 联系信息 -->
+                <div class="col-lg-4">
+                    <div class="sticky-top" style="top: 100px;">
+                        <div class="card border-0 shadow-lg">
+                            <div class="card-body p-4">
+                                <h4 class="fw-bold text-dark mb-4">联系信息</h4>
+                                
+                                <div class="d-flex align-items-center mb-4">
+                                    <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
+                                        <i class="bi bi-telephone text-primary fs-5"></i>
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0">联系电话</h6>
+                                        <p class="text-light mb-0">15927219038(周经理)</p>
+                                    </div>
+                                </div>
+
+                                <div class="d-flex align-items-center mb-4">
+                                    <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
+                                        <i class="bi bi-envelope text-success fs-5"></i>
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0">商务邮箱</h6>
+                                        <p class="text-light mb-0">service@aiotagro.com</p>
+                                    </div>
+                                </div>
+
+                                <div class="d-flex align-items-center mb-4">
+                                    <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
+                                        <i class="bi bi-geo-alt text-warning fs-5"></i>
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0">公司地址</h6>
+                                        <p class="text-light mb-0">武汉光谷软件园F2栋</p>
+                                    </div>
+                                </div>
+
+                                <div class="d-flex align-items-center mb-4">
+                                    <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
+                                        <i class="bi bi-clock text-info fs-5"></i>
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0">工作时间</h6>
+                                        <p class="text-light mb-0">周一至周五 9:00-18:00</p>
+                                    </div>
+                                </div>
+
+                                <hr>
+
+                                <h6 class="fw-bold mb-3">关注我们</h6>
+                                <div class="d-flex gap-3">
+                                    <a href="#" class="text-primary fs-4">
+                                        <i class="bi bi-wechat"></i>
+                                    </a>
+                                    <a href="#" class="text-primary fs-4">
+                                        <i class="bi bi-weibo"></i>
+                                    </a>
+                                    <a href="#" class="text-primary fs-4">
+                                        <i class="bi bi-linkedin"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 快速联系卡片 -->
+                        <div class="card border-0 shadow-lg mt-4">
+                            <div class="card-body p-4 text-center bg-dark">
+                                <h6 class="fw-bold mb-3 text-light">急需技术支持？</h6>
+                                <p class="text-light small mb-3">
+                                    我们的技术团队提供7×24小时紧急支持服务
+                                </p>
+                                <a href="tel:400-123-4567" class="btn btn-outline-light btn-sm w-100">
+                                    <i class="bi bi-telephone me-2"></i>紧急联系
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 地图区域 -->
+    <section class="bg-light py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-12">
+                    <div class="card border-0 shadow-lg">
+                        <div class="card-body p-0">
+                            <div class="ratio ratio-21x9">
+                                <!-- 这里可以嵌入实际的地图 -->
+                                <div class="d-flex align-items-center justify-content-center bg-primary bg-opacity-10">
+                                    <div class="text-center">
+                                        <i class="bi bi-map text-primary fs-1 mb-3"></i>
+                                        <h5 class="fw-bold text-dark">公司位置地图</h5>
+                                        <p class="text-muted">北京市朝阳区科技园区创新大厦A座12层</p>
+                                        <a href="#" class="btn btn-primary btn-sm">
+                                            <i class="bi bi-geo-alt me-2"></i>查看详细地图
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="bg-dark text-light py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 mb-4">
+                    <h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
+                    <p class="text-light">
+                        专业的数字化采购管理解决方案，
+                        助力养殖企业提升采购效率和经济效益。
+                    </p>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">产品</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="product.html" class="text-light text-decoration-none">功能特性</a></li>
+                        <li><a href="solutions.html" class="text-light text-decoration-none">解决方案</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">资源</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="cases.html" class="text-light text-decoration-none">客户案例</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">文档中心</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-4 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">联系我们</h6>
+                    <ul class="list-unstyled text-light">
+                        <li><i class="bi bi-telephone me-2"></i> 400-123-4567</li>
+                        <li><i class="bi bi-envelope me-2"></i> info@niumall.com</li>
+                    </ul>
+                </div>
+            </div>
+            
+            <hr class="my-4 bg-secondary">
+            
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <p class="text-light mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <a href="#" class="text-light text-decoration-none me-3">隐私政策</a>
+                    <a href="#" class="text-light text-decoration-none">服务条款</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- 自定义JS -->
+    <script src="js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/css/custom.css b/website/css/custom.css
new file mode 100644
index 0000000..3a3414c
--- /dev/null
+++ b/website/css/custom.css
@@ -0,0 +1,450 @@
+/* 自定义样式文件 - 活牛采购智能数字化系统官网 */
+
+/* 全局样式 */
+:root {
+    --primary-color: #4CAF50; /* 农业绿色主色调 */
+    --primary-light: #81C784; /* 浅绿色 */
+    --primary-dark: #388E3C; /* 深绿色 */
+    --secondary-color: #1976D2; /* 深蓝色辅助色 */
+    --success-color: #00d474; /* 绿色成功色 */
+    --warning-color: #FF9800; /* 橙色警告色 */
+    --danger-color: #ff3c78; /* 粉色危险色 */
+    --light-color: #f8f9fa;
+    --dark-color: #121212; /* 深色背景 */
+    --gray-color: #2d2d2d; /* 灰色 */
+    --text-light: #f8f9fa; /* 浅色文字 */
+    --text-dark: #343a40; /* 深色文字 */
+    
+    --font-family-base: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Source Han Sans CN';
+    --border-radius: 0.75rem;
+    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
+    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    --neon-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
+    --neon-shadow-hover: 0 0 20px rgba(76, 175, 80, 0.8);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--font-family-base);
+    line-height: 1.6;
+    color: var(--text-light);
+    background-color: var(--dark-color);
+    overflow-x: hidden;
+}
+
+/* 导航栏样式 */
+.navbar {
+    padding: 1rem 0;
+    transition: var(--transition);
+    background: rgba(30, 30, 30, 0.8) !important;
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(76, 175, 80, 0.2);
+}
+
+.navbar-brand {
+    font-weight: 700;
+    font-size: 1.5rem;
+    color: var(--text-light) !important;
+    text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
+}
+
+.navbar-nav .nav-link {
+    font-weight: 500;
+    color: var(--text-light) !important;
+    transition: var(--transition);
+    padding: 0.5rem 1rem;
+    border-radius: var(--border-radius);
+    position: relative;
+    overflow: hidden;
+}
+
+.navbar-nav .nav-link::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.2), transparent);
+    transition: 0.5s;
+}
+
+.navbar-nav .nav-link:hover::before {
+    left: 100%;
+}
+
+.navbar-nav .nav-link:hover {
+    color: var(--secondary-color) !important;
+    box-shadow: var(--neon-shadow);
+}
+
+.navbar-nav .nav-link.active {
+    color: var(--secondary-color) !important;
+    background: rgba(76, 175, 80, 0.1);
+    box-shadow: var(--neon-shadow);
+}
+
+/* 英雄区域样式 */
+.hero-section {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    color: var(--text-light);
+    position: relative;
+    overflow: hidden;
+    padding: 6rem 0;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+}
+
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at 10% 20%, rgba(111, 66, 193, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(0, 198, 255, 0.1) 0%, transparent 20%);
+    z-index: 1;
+}
+
+.hero-section .container {
+    position: relative;
+    z-index: 2;
+}
+
+.hero-section h1 {
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    font-size: 3.5rem;
+    background: linear-gradient(to right, var(--secondary-color), var(--primary-light));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 0 20px rgba(0, 198, 255, 0.3);
+}
+
+.hero-section .lead {
+    font-size: 1.5rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* 功能特性卡片样式 */
+.feature-icon {
+    transition: var(--transition);
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    box-shadow: var(--neon-shadow);
+    color: var(--text-light);
+    font-size: 2rem;
+}
+
+.card {
+    transition: var(--transition);
+    border: none;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    background: rgba(45, 45, 45, 0.7);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(76, 175, 80, 0.2);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.card:hover {
+    transform: translateY(-10px) scale(1.02);
+    box-shadow: var(--neon-shadow-hover), 0 15px 40px rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(76, 175, 80, 0.5);
+}
+
+.card:hover .feature-icon {
+    transform: scale(1.1) rotate(5deg);
+    box-shadow: var(--neon-shadow-hover);
+}
+
+/* 按钮样式 */
+.btn {
+    border-radius: var(--border-radius);
+    font-weight: 600;
+    padding: 0.875rem 1.75rem;
+    transition: var(--transition);
+    border: none;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: 0.5s;
+    z-index: -1;
+}
+
+.btn:hover::before {
+    left: 100%;
+}
+
+.btn-primary {
+    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
+    border: none;
+    box-shadow: var(--neon-shadow);
+}
+
+.btn-primary:hover {
+    background: linear-gradient(45deg, var(--primary-light), var(--primary-color));
+    transform: translateY(-3px);
+    box-shadow: var(--neon-shadow-hover), 0 6px 20px rgba(0, 0, 0, 0.4);
+}
+
+.btn-outline-primary {
+    border: 2px solid var(--primary-color);
+    color: var(--primary-color);
+    background: transparent;
+    box-shadow: var(--neon-shadow);
+}
+
+.btn-outline-primary:hover {
+    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
+    color: white;
+    transform: translateY(-3px);
+    box-shadow: var(--neon-shadow-hover);
+    border: 2px solid var(--primary-light);
+}
+
+/* 页脚样式 */
+footer {
+    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+    border-top: 1px solid rgba(111, 66, 193, 0.2);
+}
+
+footer h5, footer h6 {
+    color: var(--text-light) !important;
+    text-shadow: 0 0 10px rgba(111, 66, 193, 0.3);
+}
+
+footer a {
+    transition: var(--transition);
+    color: var(--text-light) !important;
+}
+
+footer a:hover {
+    color: var(--secondary-color) !important;
+    text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .hero-section {
+        padding: 3rem 0;
+    }
+    
+    .hero-section h1 {
+        font-size: 2.8rem;
+    }
+    
+    .hero-section .lead {
+        font-size: 1.2rem;
+    }
+    
+    .navbar-brand {
+        font-size: 1.3rem;
+    }
+    
+    .card {
+        margin-bottom: 1.5rem;
+    }
+    
+    .feature-icon {
+        width: 60px;
+        height: 60px;
+        font-size: 1.5rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .hero-section {
+        text-align: center;
+        padding: 2rem 0;
+    }
+    
+    .hero-section h1 {
+        font-size: 2.2rem;
+    }
+    
+    .hero-section .lead {
+        font-size: 1rem;
+    }
+    
+    .btn {
+        width: 100%;
+        margin-bottom: 0.75rem;
+        padding: 0.75rem 1.25rem;
+    }
+    
+    .feature-icon {
+        margin-bottom: 1rem;
+        width: 50px;
+        height: 50px;
+        font-size: 1.25rem;
+    }
+    
+    .navbar-nav .nav-link {
+        text-align: center;
+        margin: 0.25rem 0;
+    }
+}
+
+/* 工具类 */
+.text-shadow {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* 新增：加载动画 */
+.loading-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: text-bottom;
+    border: 0.2em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spinner-border 0.75s linear infinite;
+}
+
+@keyframes spinner-border {
+    to { transform: rotate(360deg); }
+}
+
+/* 新增：图片占位符样式 */
+.placeholder-image {
+    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+}
+
+/* 新增：表单验证样式 */
+.form-control.is-invalid {
+    border-color: var(--danger-color);
+}
+
+.invalid-feedback {
+    display: block;
+    width: 100%;
+    margin-top: 0.25rem;
+    font-size: 0.875em;
+    color: var(--danger-color);
+}
+
+/* 新增：动画效果 */
+.fade-in-up {
+    animation: fadeInUp 0.6s ease-out forwards;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 新增：回到顶部按钮样式 */
+.back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: none;
+    z-index: 1000;
+    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
+    transition: var(--transition);
+}
+
+.back-to-top:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
+}
+
+.bg-gradient-primary {
+    background: linear-gradient(135deg, var(--primary-color), #0056b3);
+}
+
+.bg-gradient-dark {
+    background: linear-gradient(135deg, var(--dark-color), #2c3e50);
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in-up {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.pulse {
+    animation: pulse 2s infinite;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #0056b3;
+}
\ No newline at end of file
diff --git a/website/images/placeholder-800x400.png b/website/images/placeholder-800x400.png
new file mode 100644
index 0000000..24dbd5d
--- /dev/null
+++ b/website/images/placeholder-800x400.png
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAAyAAAAACCAYAAACg/LjIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGMtVWAAAAAxJREFUCB1j/P//PwMABfAC/11JyjcAAAAASUVORK5CYII=
\ No newline at end of file
diff --git a/website/images/placeholder.txt b/website/images/placeholder.txt
new file mode 100644
index 0000000..26eb45f
--- /dev/null
+++ b/website/images/placeholder.txt
@@ -0,0 +1,26 @@
+图片资源目录说明
+================
+
+此目录用于存放网站所需的图片资源，包括：
+
+1. logo.png - 网站Logo图片
+2. hero-banner.jpg - 首页英雄区域横幅图片
+3. feature-*.jpg - 功能特性相关图片
+4. case-*.jpg - 客户案例图片
+5. team-*.jpg - 团队成员照片
+6. icons/ - 图标资源目录
+
+建议图片规格：
+- Logo: 200x60px (PNG透明背景)
+- Banner图片: 1200x600px (JPG/WebP格式)
+- 功能图片: 800x600px 
+- 案例图片: 600x400px
+- 团队照片: 400x400px
+
+图片优化建议：
+1. 使用WebP格式以获得更好的压缩效果
+2. 确保所有图片都经过压缩优化
+3. 为重要图片添加alt文本描述
+4. 使用懒加载技术提高页面加载速度
+
+当前为占位文件，实际使用时请替换为真实的图片资源。
\ No newline at end of file
diff --git a/website/index.html b/website/index.html
new file mode 100644
index 0000000..b3ca034
--- /dev/null
+++ b/website/index.html
@@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>活牛采购智能数字化系统 - 专业数字化采购解决方案</title>
+    <meta name="description" content="专业的活牛采购数字化管理系统，提供从采购、运输到结算的全流程数字化解决方案，助力养殖企业提升采购效率。">
+    <meta name="keywords" content="活牛采购,畜牧管理,数字化系统,SOP系统,农业数字化,养殖业">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome Icons -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
+    <!-- AOS Animation -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+    <!-- 自定义样式 -->
+    <link href="css/custom.css" rel="stylesheet">
+    
+    <!-- 结构化数据 -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "SoftwareApplication",
+      "name": "活牛采购智能数字化系统",
+      "description": "专业的活牛采购数字化管理系统，提供从采购、运输到结算的全流程数字化解决方案",
+      "applicationCategory": "BusinessApplication",
+      "operatingSystem": "Web",
+      "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "CNY"
+      }
+    }
+    </script>
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
+        <div class="container">
+            <a class="navbar-brand" href="index.html">
+                <img src="images/logo.png" alt="活牛采购智能数字化系统" height="40">
+                <span class="ms-2 fw-bold">活牛采购智能数字化系统</span>
+            </a>
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="index.html">首页</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="product.html">产品介绍</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="solutions.html">解决方案</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="cases.html">客户案例</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="news.html">新闻动态</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="about.html">关于我们</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.html">联系我们</a>
+                    </li>
+                </ul>
+                
+                <div class="ms-3">
+                    <a href="contact.html" class="btn btn-primary">免费试用</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 面包屑导航 -->
+    <nav aria-label="breadcrumb" class="pt-5 mt-5">
+        <div class="container">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="index.html">首页</a></li>
+                <li class="breadcrumb-item active" aria-current="page">活牛采购智能数字化系统</li>
+            </ol>
+        </div>
+    </nav>
+
+    <!-- 英雄区域 -->
+    <section class="hero-section bg-dark text-white py-5">
+        <div class="container py-5">
+            <div class="row align-items-center">
+                <div class="col-lg-8 mx-auto text-center">
+                    <h1 class="display-4 fw-bold mb-4">数字化活牛采购全流程管理</h1>
+                    <p class="lead mb-4">专业的SOP采购管理系统，从供应商筛选、订单管理、运输跟踪到财务结算，一站式解决活牛采购的所有难题。</p>
+                    
+                    <div class="d-flex flex-wrap gap-3 justify-content-center mb-4">
+                        <a href="contact.html" class="btn btn-primary btn-lg">
+                            <i class="fas fa-rocket me-2"></i>立即试用
+                        </a>
+                        <a href="product.html" class="btn btn-outline-primary btn-lg">
+                            <i class="fas fa-play-circle me-2"></i>观看演示
+                        </a>
+                    </div>
+                    
+                    <div class="d-flex align-items-center justify-content-center">
+                        <i class="fas fa-check-circle text-success me-2"></i>
+                        <small>已有 500+ 企业选择我们的系统</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 功能特性 -->
+    <section class="features-section py-5">
+        <div class="container">
+            <div class="text-center mb-5">
+                <h2 class="display-6 mb-3">核心功能</h2>
+                <p class="text-muted">一站式解决活牛采购全流程管理需求</p>
+            </div>
+            
+            <div class="row g-4">
+                <div class="col-md-6 col-lg-3">
+                    <div class="card h-100 text-center border-0">
+                        <div class="feature-icon">
+                            <i class="fas fa-users"></i>
+                        </div>
+                        <div class="card-body">
+                            <h5 class="card-title">供应商管理</h5>
+                            <p class="card-text">建立供应商档案，记录资质信息，评估供应商信誉等级</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-6 col-lg-3">
+                    <div class="card h-100 text-center border-0">
+                        <div class="feature-icon">
+                            <i class="fas fa-clipboard-list"></i>
+                        </div>
+                        <div class="card-body">
+                            <h5 class="card-title">采购计划</h5>
+                            <p class="card-text">制定科学采购计划，自动生成采购清单和时间安排</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-6 col-lg-3">
+                    <div class="card h-100 text-center border-0">
+                        <div class="feature-icon">
+                            <i class="fas fa-search"></i>
+                        </div>
+                        <div class="card-body">
+                            <h5 class="card-title">质检系统</h5>
+                            <p class="card-text">标准化质检流程，制定质检标准，记录质检数据</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-6 col-lg-3">
+                    <div class="card h-100 text-center border-0">
+                        <div class="feature-icon">
+                            <i class="fas fa-truck"></i>
+                        </div>
+                        <div class="card-body">
+                            <h5 class="card-title">运输跟踪</h5>
+                            <p class="card-text">实时跟踪运输状态，确保货物安全准时到达</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 统计数据 -->
+    <section class="stats-section">
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-3 col-6">
+                    <div class="stat-item">
+                        <div class="stat-number" data-target="500">0</div>
+                        <div class="stat-label">服务企业</div>
+                    </div>
+                </div>
+                <div class="col-md-3 col-6">
+                    <div class="stat-item">
+                        <div class="stat-number" data-target="99">0</div>
+                        <div class="stat-label">客户满意度(%)</div>
+                    </div>
+                </div>
+                <div class="col-md-3 col-6">
+                    <div class="stat-item">
+                        <div class="stat-number" data-target="40">0</div>
+                        <div class="stat-label">效率提升(%)</div>
+                    </div>
+                </div>
+                <div class="col-md-3 col-6">
+                    <div class="stat-item">
+                        <div class="stat-number" data-target="15">0</div>
+                        <div class="stat-label">成本节约(%)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 解决方案 -->
+    <section class="solutions-section py-5">
+        <div class="container">
+            <div class="text-center mb-5">
+                <h2 class="display-6 mb-3">行业解决方案</h2>
+                <p class="text-muted">针对不同规模和类型的畜牧企业提供定制化解决方案</p>
+            </div>
+            
+            <div class="row g-4">
+                <div class="col-md-6 col-lg-4">
+                    <div class="card solution-card h-100 border-0">
+                        <div class="card-body">
+                            <h5 class="card-title">大型养殖企业</h5>
+                            <p class="card-text">针对年采购量超过1000头的大型养殖企业，提供集团化采购管理解决方案。</p>
+                            <ul class="list-unstyled mt-3">
+                                <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>多级审批流程</li>
+                                <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>多供应商管理</li>
+                                <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>数据分析报表</li>
+                            </ul>
+                            <a href="solutions.html" class="btn btn-outline-primary mt-3">了解更多</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-6 col-lg-4">
+                    <div class="card solution-card h-100 border-0">
+                        <div class="card-body">
+                            <h5 class="card-title">中小型牧场</h5>
+                            <p class="card-text">针对年采购量在100-1000头的中小型牧场，提供简化版采购管理方案。</p>
+                            <ul class="list-unstyled mt-3">
+                                <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>简易操作界面</li>
+                                <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>基础质检模板</li>
+                                <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>成本控制分析</li>
+                            </ul>
+                            <a href="solutions.html" class="btn btn-outline-primary mt-3">了解更多</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-6 col-lg-4">
+                    <div class="card solution-card h-100 border-0">
+                        <div class="card-body">
+                            <h5 class="card-title">贸易商</h5>
+                            <p class="card-text">针对活牛贸易商，提供订单管理和交易撮合解决方案。</p>
+                            <ul class="list-unstyled mt-3">
+                                <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>订单全流程跟踪</li>
+                                <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>多方交易协调</li>
+                                <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>结算风险控制</li>
+                            </ul>
+                            <a href="solutions.html" class="btn btn-outline-primary mt-3">了解更多</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 客户案例 -->
+    <section class="cases-section py-5">
+        <div class="container">
+            <div class="text-center mb-5">
+                <h2 class="display-6 mb-3">客户案例</h2>
+                <p class="text-muted">看看我们的客户如何通过系统提升业务效率</p>
+            </div>
+            
+            <div class="row g-4">
+                <div class="col-md-6 col-lg-4">
+                    <div class="card case-card h-100 border-0">
+                        <img src="images/case1.jpg" class="card-img-top" alt="XX牧业集团" loading="lazy">
+                        <div class="card-body">
+                            <span class="badge bg-primary mb-2">大型企业</span>
+                            <h5 class="card-title">XX牧业集团采购数字化转型</h5>
+                            <p class="card-text">通过实施活牛采购智能数字化系统，该集团实现了采购流程标准化，采购效率提升40%。</p>
+                            <a href="cases.html" class="btn btn-outline-primary">查看详情</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-6 col-lg-4">
+                    <div class="card case-card h-100 border-0">
+                        <img src="images/case2.jpg" class="card-img-top" alt="YY生态牧场" loading="lazy">
+                        <div class="card-body">
+                            <span class="badge bg-success mb-2">中型企业</span>
+                            <h5 class="card-title">YY生态牧场采购管理升级</h5>
+                            <p class="card-text">该牧场通过系统化管理采购流程，显著降低了采购风险，提升了供应商管理效率。</p>
+                            <a href="cases.html" class="btn btn-outline-primary">查看详情</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-6 col-lg-4">
+                    <div class="card case-card h-100 border-0">
+                        <img src="images/case3.jpg" class="card-img-top" alt="ZZ活牛贸易平台" loading="lazy">
+                        <div class="card-body">
+                            <span class="badge bg-info mb-2">贸易商</span>
+                            <h5 class="card-title">ZZ活牛贸易平台业务优化</h5>
+                            <p class="card-text">贸易商通过系统实现了多方交易协调，显著提升了交易效率和资金安全性。</p>
+                            <a href="cases.html" class="btn btn-outline-primary">查看详情</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="text-center mt-5">
+                <a href="cases.html" class="btn btn-primary btn-lg">查看更多案例</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- 新闻动态 -->
+    <section class="news-section py-5">
+        <div class="container">
+            <div class="text-center mb-5">
+                <h2 class="display-6 mb-3">新闻动态</h2>
+                <p class="text-muted">获取最新产品资讯和行业动态</p>
+            </div>
+            
+            <div class="row g-4">
+                <div class="col-md-6 col-lg-4">
+                    <div class="card news-card h-100 border-0">
+                        <img src="images/news1.jpg" class="card-img-top" alt="产品更新" loading="lazy">
+                        <div class="card-body">
+                            <span class="badge bg-primary mb-2">产品更新</span>
+                            <h5 class="card-title">活牛采购智能数字化系统V3.0正式发布</h5>
+                            <p class="card-text text-muted">新版本增加了智能采购建议、移动端优化、数据可视化等功能...</p>
+                            <a href="news.html" class="btn btn-outline-primary">阅读更多</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-6 col-lg-4">
+                    <div class="card news-card h-100 border-0">
+                        <img src="images/news2.jpg" class="card-img-top" alt="行业资讯" loading="lazy">
+                        <div class="card-body">
+                            <span class="badge bg-success mb-2">行业资讯</span>
+                            <h5 class="card-title">数字化转型推动畜牧业高质量发展</h5>
+                            <p class="card-text text-muted">随着信息技术的发展，数字化转型已成为畜牧业发展的必然趋势...</p>
+                            <a href="news.html" class="btn btn-outline-primary">阅读更多</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-6 col-lg-4">
+                    <div class="card news-card h-100 border-0">
+                        <img src="images/news3.jpg" class="card-img-top" alt="客户案例" loading="lazy">
+                        <div class="card-body">
+                            <span class="badge bg-info mb-2">客户案例</span>
+                            <h5 class="card-title">XX牧业集团成功实施采购数字化项目</h5>
+                            <p class="card-text text-muted">通过与我们合作，XX牧业集团实现了采购流程的全面数字化...</p>
+                            <a href="news.html" class="btn btn-outline-primary">阅读更多</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="text-center mt-5">
+                <a href="news.html" class="btn btn-primary btn-lg">查看更多新闻</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-5">
+        <div class="container">
+            <div class="card bg-primary text-white border-0 shadow">
+                <div class="card-body p-5 text-center">
+                    <h3 class="mb-3">开启您的数字化采购之旅</h3>
+                    <p class="mb-4">立即申请免费试用，体验活牛采购智能数字化系统带来的效率提升</p>
+                    <a href="contact.html" class="btn btn-light btn-lg">免费试用</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 mb-4 mb-lg-0">
+                    <h5 class="footer-title">活牛采购智能数字化系统</h5>
+                    <p>专业的活牛采购全流程数字化管理解决方案，提升采购效率，降低经营风险。</p>
+                    <div class="d-flex">
+                        <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
+                        <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
+                        <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
+                    </div>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
+                    <h5 class="footer-title">产品</h5>
+                    <ul class="list-unstyled">
+                        <li class="mb-2"><a href="product.html">功能介绍</a></li>
+                        <li class="mb-2"><a href="solutions.html">解决方案</a></li>
+                        <li class="mb-2"><a href="cases.html">客户案例</a></li>
+                        <li class="mb-2"><a href="news.html">更新日志</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
+                    <h5 class="footer-title">支持</h5>
+                    <ul class="list-unstyled">
+                        <li class="mb-2"><a href="#">帮助中心</a></li>
+                        <li class="mb-2"><a href="#">在线客服</a></li>
+                        <li class="mb-2"><a href="#">开发者文档</a></li>
+                        <li class="mb-2"><a href="#">合作伙伴</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-4 col-md-4">
+                    <h5 class="footer-title">联系我们</h5>
+                    <ul class="list-unstyled">
+                        <li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区xxx街道xxx号</li>
+                        <li class="mb-2"><i class="fas fa-phone me-2"></i> 400-xxx-xxxx</li>
+                        <li class="mb-2"><i class="fas fa-envelope me-2"></i> info@example.com</li>
+                    </ul>
+                </div>
+            </div>
+            
+            <div class="copyright text-center">
+                <p>&copy; 2023 活牛采购智能数字化系统. 保留所有权利。</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- 返回顶部按钮 -->
+    <button class="back-to-top" aria-label="返回顶部">
+        <i class="fas fa-arrow-up"></i>
+    </button>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <!-- AOS Animation -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
+    <!-- 自定义脚本 -->
+    <script src="js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/js/main.js b/website/js/main.js
new file mode 100644
index 0000000..9163b7e
--- /dev/null
+++ b/website/js/main.js
@@ -0,0 +1,310 @@
+// 活牛采购智能数字化系统官网 - 主JavaScript文件
+
+document.addEventListener('DOMContentLoaded', function() {
+    // 初始化所有功能
+    initNavigation();
+    initScrollEffects();
+    initAnimations();
+    initContactForm();
+    initBackToTop();
+    initImageLazyLoading();
+    initFormValidation();
+    
+    console.log('官网初始化完成 - 活牛采购智能数字化系统');
+});
+
+// 导航功能初始化
+function initNavigation() {
+    const navbar = document.querySelector('.navbar');
+    const navLinks = document.querySelectorAll('.nav-link');
+    
+    // 滚动时导航栏样式变化
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 100) {
+            navbar.classList.add('navbar-scrolled');
+            navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
+            navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
+        } else {
+            navbar.classList.remove('navbar-scrolled');
+            navbar.style.backgroundColor = 'rgba(255, 255, 255, 1)';
+            navbar.style.boxShadow = 'none';
+        }
+    });
+    
+    // 导航链接点击效果
+    navLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            // 移除所有active类
+            navLinks.forEach(l => l.classList.remove('active'));
+            // 添加当前active类
+            this.classList.add('active');
+            
+            // 平滑滚动到目标区域
+            const targetId = this.getAttribute('href');
+            if (targetId && targetId.startsWith('#')) {
+                e.preventDefault();
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            }
+        });
+    });
+}
+
+// 滚动效果初始化
+function initScrollEffects() {
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('fade-in-up');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    
+    // 观察所有需要动画的元素
+    const animateElements = document.querySelectorAll('.card, .feature-icon, h2, h3, p.lead');
+    animateElements.forEach(el => {
+        observer.observe(el);
+    });
+}
+
+// 动画效果初始化
+function initAnimations() {
+    // 数字统计动画
+    const stats = document.querySelectorAll('.stat-number');
+    if (stats.length > 0) {
+        stats.forEach(stat => {
+            const target = parseInt(stat.textContent);
+            let current = 0;
+            const duration = 2000; // 2秒
+            const increment = target / (duration / 16); // 60fps
+            
+            const timer = setInterval(() => {
+                current += increment;
+                if (current >= target) {
+                    stat.textContent = target.toLocaleString();
+                    clearInterval(timer);
+                } else {
+                    stat.textContent = Math.floor(current).toLocaleString();
+                }
+            }, 16);
+        });
+    }
+    
+    // 鼠标悬停效果
+    const cards = document.querySelectorAll('.card');
+    cards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-8px)';
+            this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+            this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+        });
+    });
+}
+
+// 联系表单初始化
+function initContactForm() {
+    const contactForm = document.getElementById('contactForm');
+    if (contactForm) {
+        contactForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            // 表单验证
+            if (!validateForm(contactForm)) {
+                return;
+            }
+            
+            const formData = new FormData(this);
+            const submitBtn = this.querySelector('button[type="submit"]');
+            const originalText = submitBtn.textContent;
+            
+            // 显示加载状态
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = '<span class="loading-spinner" role="status" aria-hidden="true"></span> 提交中...';
+            
+            // 模拟表单提交
+            setTimeout(() => {
+                // 这里可以替换为实际的API调用
+                showAlert('success', '提交成功！我们会尽快联系您。');
+                contactForm.reset();
+                
+                // 恢复按钮状态
+                submitBtn.disabled = false;
+                submitBtn.textContent = originalText;
+            }, 2000);
+        });
+    }
+}
+
+// 表单验证
+function validateForm(form) {
+    let isValid = true;
+    const requiredFields = form.querySelectorAll('[required]');
+    
+    requiredFields.forEach(field => {
+        if (!field.value.trim()) {
+            isValid = false;
+            field.classList.add('is-invalid');
+            
+            // 创建错误提示
+            if (!field.nextElementSibling || !field.nextElementSibling.classList.contains('invalid-feedback')) {
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'invalid-feedback';
+                errorDiv.textContent = '此字段为必填项';
+                field.parentNode.insertBefore(errorDiv, field.nextSibling);
+            }
+        } else {
+            field.classList.remove('is-invalid');
+            
+            // 移除错误提示
+            if (field.nextElementSibling && field.nextElementSibling.classList.contains('invalid-feedback')) {
+                field.nextElementSibling.remove();
+            }
+        }
+    });
+    
+    return isValid;
+}
+
+// 显示提示信息
+function showAlert(type, message) {
+    const alertDiv = document.createElement('div');
+    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
+    alertDiv.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+    
+    // 添加到页面顶部
+    document.body.insertBefore(alertDiv, document.body.firstChild);
+    
+    // 5秒后自动消失
+    setTimeout(() => {
+        if (alertDiv.parentNode) {
+            alertDiv.remove();
+        }
+    }, 5000);
+}
+
+// 返回顶部功能
+function initBackToTop() {
+    const backToTopBtn = document.createElement('button');
+    backToTopBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
+    backToTopBtn.className = 'btn btn-primary back-to-top';
+    
+    document.body.appendChild(backToTopBtn);
+    
+    backToTopBtn.addEventListener('click', function() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+    
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 300) {
+            backToTopBtn.style.display = 'block';
+        } else {
+            backToTopBtn.style.display = 'none';
+        }
+    });
+}
+
+// 图片懒加载
+function initImageLazyLoading() {
+    const images = document.querySelectorAll('img[data-src]');
+    
+    if ('IntersectionObserver' in window) {
+        const imageObserver = new IntersectionObserver(function(entries) {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.src = img.dataset.src;
+                    img.classList.remove('lazy');
+                    imageObserver.unobserve(img);
+                }
+            });
+        });
+        
+        images.forEach(img => imageObserver.observe(img));
+    } else {
+        // 降级处理
+        images.forEach(img => {
+            img.src = img.dataset.src;
+        });
+    }
+}
+
+// 表单验证初始化
+function initFormValidation() {
+    const forms = document.querySelectorAll('.needs-validation');
+    
+    Array.from(forms).forEach(form => {
+        form.addEventListener('submit', function(e) {
+            if (!form.checkValidity()) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            
+            form.classList.add('was-validated');
+        }, false);
+    });
+}
+
+// 工具函数：防抖
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// 工具函数：节流
+function throttle(func, limit) {
+    let inThrottle;
+    return function() {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+            func.apply(context, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+}
+
+// 页面性能监控
+function monitorPerformance() {
+    window.addEventListener('load', function() {
+        // 页面加载完成时间
+        const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
+        console.log(`页面加载完成时间: ${loadTime}ms`);
+        
+        // 核心网页指标
+        if ('loading' in HTMLImageElement.prototype) {
+            console.log('浏览器支持原生懒加载');
+        }
+    });
+}
+
+// 初始化性能监控
+monitorPerformance();
\ No newline at end of file
diff --git a/website/news.html b/website/news.html
new file mode 100644
index 0000000..a5571f7
--- /dev/null
+++ b/website/news.html
@@ -0,0 +1,517 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>新闻动态 - 活牛采购智能数字化系统</title>
+    <meta name="description" content="获取活牛采购智能数字化系统的最新动态、行业新闻和技术更新，了解养殖数字化领域的最新发展趋势和公司进展。">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
+    <!-- AOS Animation -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+    <!-- 自定义样式 -->
+    <link href="css/custom.css" rel="stylesheet">
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
+        <div class="container">
+            <a class="navbar-brand fw-bold" href="index.html">活牛采购智能数字化系统</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">首页</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="product.html">产品介绍</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="solutions.html">解决方案</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="cases.html">客户案例</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="news.html">新闻动态</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="about.html">关于我们</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.html">联系我们</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">帮助</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 页面内容 -->
+    <main>
+        <!-- 英雄区域 -->
+    <section class="hero-section bg-dark text-white py-5 mt-5">
+        <div class="container py-5">
+            <div class="row align-items-center">
+                <div class="col-lg-8 mx-auto text-center">
+                    <h1 class="display-4 fw-bold mb-4">新闻动态</h1>
+                    <p class="lead mb-4">了解最新的行业资讯、产品更新和公司动态</p>
+                    
+                    <!-- 搜索框 -->
+                    <div class="col-lg-6 mx-auto">
+                        <div class="input-group">
+                            <input type="text" class="form-control" placeholder="搜索新闻..." id="newsSearch">
+                            <button class="btn btn-outline-light" type="button">
+                                <i class="fas fa-search"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+        <!-- 新闻分类 -->
+        <section class="py-4 bg-white">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12">
+                        <div class="d-flex flex-wrap justify-content-center gap-2">
+                            <button class="btn btn-outline-primary active" data-category="all">全部</button>
+                            <button class="btn btn-outline-primary" data-category="company">公司动态</button>
+                            <button class="btn btn-outline-primary" data-category="industry">行业新闻</button>
+                            <button class="btn btn-outline-primary" data-category="technology">技术更新</button>
+                            <button class="btn btn-outline-primary" data-category="event">活动预告</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 新闻列表 -->
+        <section class="py-5">
+            <div class="container">
+                <div class="row" id="news-container">
+                    <!-- 新闻1 -->
+                    <div class="col-lg-6 mb-4 news-item" data-category="company" data-aos="fade-up">
+                        <div class="card border-0 shadow-sm h-100 news-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-newspaper fs-1 text-primary"></i>
+                                </div>
+                                <span class="position-absolute top-0 start-0 m-3 badge bg-primary">公司动态</span>
+                            </div>
+                            <div class="card-body">
+                                <div class="d-flex align-items-center mb-2">
+                                    <small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-03-15</small>
+                                    <small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 1,245</small>
+                                </div>
+                                <h5 class="fw-bold text-dark mb-3">活牛采购智能数字化系统完成B轮融资，加速全国市场布局</h5>
+                                <p class="text-muted mb-3">
+                                    公司宣布完成数千万元B轮融资，由某知名投资机构领投，老股东跟投。
+                                    本轮融资将用于产品研发、市场拓展和团队建设。
+                                </p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <a href="#" class="btn btn-outline-primary btn-sm">阅读全文</a>
+                                    <div class="d-flex">
+                                        <a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 86</a>
+                                        <a href="#" class="text-muted"><i class="far fa-comment"></i> 23</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 新闻2 -->
+                    <div class="col-lg-6 mb-4 news-item" data-category="industry" data-aos="fade-up" data-aos-delay="100">
+                        <div class="card border-0 shadow-sm h-100 news-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-success bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-chart-line fs-1 text-success"></i>
+                                </div>
+                                <span class="position-absolute top-0 start-0 m-3 badge bg-success">行业新闻</span>
+                            </div>
+                            <div class="card-body">
+                                <div class="d-flex align-items-center mb-2">
+                                    <small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-03-10</small>
+                                    <small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 892</small>
+                                </div>
+                                <h5 class="fw-bold text-dark mb-3">2024年中国畜牧行业数字化发展趋势报告发布</h5>
+                                <p class="text-muted mb-3">
+                                    最新行业报告显示，数字化采购管理系统渗透率预计将从目前的15%提升至30%，
+                                    市场规模将突破百亿元。
+                                </p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <a href="#" class="btn btn-outline-success btn-sm">阅读全文</a>
+                                    <div class="d-flex">
+                                        <a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 64</a>
+                                        <a href="#" class="text-muted"><i class="far fa-comment"></i> 18</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 新闻3 -->
+                    <div class="col-lg-6 mb-4 news-item" data-category="technology" data-aos="fade-up" data-aos-delay="200">
+                        <div class="card border-0 shadow-sm h-100 news-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-info bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-robot fs-1 text-info"></i>
+                                </div>
+                                <span class="position-absolute top-0 start-0 m-3 badge bg-info">技术更新</span>
+                            </div>
+                            <div class="card-body">
+                                <div class="d-flex align-items-center mb-2">
+                                    <small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-03-05</small>
+                                    <small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 1,567</small>
+                                </div>
+                                <h5 class="fw-bold text-dark mb-3">AI智能牛只评估系统V2.0正式上线，准确率提升至95%</h5>
+                                <p class="text-muted mb-3">
+                                    新一代AI评估系统采用深度学习算法，大幅提升牛只品质评估准确率，
+                                    同时新增健康监测和生长预测功能。
+                                </p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <a href="#" class="btn btn-outline-info btn-sm">阅读全文</a>
+                                    <div class="d-flex">
+                                        <a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 128</a>
+                                        <a href="#" class="text-muted"><i class="far fa-comment"></i> 45</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 新闻4 -->
+                    <div class="col-lg-6 mb-4 news-item" data-category="event" data-aos="fade-up" data-aos-delay="300">
+                        <div class="card border-0 shadow-sm h-100 news-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-warning bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-calendar-alt fs-1 text-warning"></i>
+                                </div>
+                                <span class="position-absolute top-0 start-0 m-3 badge bg-warning">活动预告</span>
+                            </div>
+                            <div class="card-body">
+                                <div class="d-flex align-items-center mb-2">
+                                    <small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-04-10</small>
+                                    <small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 734</small>
+                                </div>
+                                <h5 class="fw-bold text-dark mb-3">2024智慧养殖创新峰会将于4月在北京举行</h5>
+                                <p class="text-muted mb-3">
+                                    峰会聚焦数字化养殖、智能采购、产业链协同等热点话题，
+                                    邀请行业专家、企业代表共同探讨发展趋势。
+                                </p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <a href="#" class="btn btn-outline-warning btn-sm">立即报名</a>
+                                    <div class="d-flex">
+                                        <a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 92</a>
+                                        <a href="#" class="text-muted"><i class="far fa-comment"></i> 31</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 新闻5 -->
+                    <div class="col-lg-6 mb-4 news-item" data-category="company" data-aos="fade-up" data-aos-delay="400">
+                        <div class="card border-0 shadow-sm h-100 news-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-purple bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-award fs-1 text-purple"></i>
+                                </div>
+                                <span class="position-absolute top-0 start-0 m-3 badge bg-purple">公司动态</span>
+                            </div>
+                            <div class="card-body">
+                                <div class="d-flex align-items-center mb-2">
+                                    <small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-02-28</small>
+                                    <small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 987</small>
+                                </div>
+                                <h5 class="fw-bold text-dark mb-3">荣获"2024年度畜牧科技创新企业"称号</h5>
+                                <p class="text-muted mb-3">
+                                    在2024中国畜牧产业创新大会上，公司凭借数字化采购解决方案
+                                    获得行业权威认可。
+                                </p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <a href="#" class="btn btn-outline-purple btn-sm">阅读全文</a>
+                                    <div class="d-flex">
+                                        <a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 105</a>
+                                        <a href="#" class="text-muted"><i class="far fa-comment"></i> 28</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 新闻6 -->
+                    <div class="col-lg-6 mb-4 news-item" data-category="technology" data-aos="fade-up" data-aos-delay="500">
+                        <div class="card border-0 shadow-sm h-100 news-card">
+                            <div class="card-img-top position-relative">
+                                <div class="placeholder-image bg-orange bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
+                                    <i class="fas fa-mobile-alt fs-1 text-orange"></i>
+                                </div>
+                                <span class="position-absolute top-0 start-0 m-3 badge bg-orange">技术更新</span>
+                            </div>
+                            <div class="card-body">
+                                <div class="d-flex align-items-center mb-2">
+                                    <small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-02-20</small>
+                                    <small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 1,203</small>
+                                </div>
+                                <h5 class="fw-bold text-dark mb-3">移动端APP全新升级，支持离线操作和实时同步</h5>
+                                <p class="text-muted mb-3">
+                                    新版本移动端应用优化用户体验，新增离线数据采集功能，
+                                    即使在网络信号较差的牧场也能正常使用。
+                                </p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <a href="#" class="btn btn-outline-orange btn-sm">阅读全文</a>
+                                    <div class="d-flex">
+                                        <a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 142</a>
+                                        <a href="#" class="text-muted"><i class="far fa-comment"></i> 37</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 分页 -->
+                <div class="row mt-5">
+                    <div class="col-12">
+                        <nav aria-label="News pagination">
+                            <ul class="pagination justify-content-center">
+                                <li class="page-item disabled">
+                                    <a class="page-link" href="#" tabindex="-1">上一页</a>
+                                </li>
+                                <li class="page-item active">
+                                    <a class="page-link" href="#">1</a>
+                                </li>
+                                <li class="page-item">
+                                    <a class="page-link" href="#">2</a>
+                                </li>
+                                <li class="page-item">
+                                    <a class="page-link" href="#">3</a>
+                                </li>
+                                <li class="page-item">
+                                    <a class="page-link" href="#">下一页</a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 订阅区域 -->
+        <section class="py-5 bg-light">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-lg-6">
+                        <h3 class="fw-bold text-dark mb-3">订阅我们的新闻动态</h3>
+                        <p class="text-muted mb-4">及时获取最新行业资讯、产品更新和活动信息</p>
+                    </div>
+                    <div class="col-lg-6">
+                        <div class="input-group">
+                            <input type="email" class="form-control" placeholder="请输入您的邮箱" aria-label="Email">
+                            <button class="btn btn-primary" type="button">订阅</button>
+                        </div>
+                        <small class="text-muted">我们承诺不会泄露您的邮箱信息</small>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- 页脚 -->
+    <footer class="bg-dark text-white py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 mb-4">
+                    <h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
+                    <p class="text-muted">
+                        专业的数字化采购管理解决方案，
+                        为养殖企业提供全流程的采购数字化服务。
+                    </p>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">产品</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
+                        <li><a href="solutions.html" class="text-muted text-decoration-none">解决方案</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">价格方案</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">资源</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
+                        <li><a href="news.html" class="text-muted text-decoration-none">新闻动态</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">帮助文档</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">公司</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
+                        <li><a href="contact.html" class="text-muted text-decoration-none">联系我们</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">加入我们</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">联系信息</h6>
+                    <div class="text-muted">
+                        <p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
+                        <p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
+                        <p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
+                    </div>
+                </div>
+            </div>
+            
+            <hr class="my-4">
+            
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <p class="text-muted mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <div class="d-flex justify-content-md-end">
+                        <a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
+                        <a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
+                        <a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
+                    </div>
+                </div>
+            </div>
+            </div>
+        </footer>
+
+    <!-- JavaScript -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
+    <script src="js/main.js"></script>
+    
+    <script>
+        // 初始化AOS动画
+        AOS.init({
+            duration: 1000,
+            once: true,
+            offset: 100
+        });
+
+        // 新闻筛选功能
+        document.addEventListener('DOMContentLoaded', function() {
+            const filterButtons = document.querySelectorAll('[data-category]');
+            const newsItems = document.querySelectorAll('.news-item');
+            const searchInput = document.getElementById('newsSearch');
+
+            // 分类筛选
+            filterButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // 移除所有active状态
+                    filterButtons.forEach(btn => btn.classList.remove('active'));
+                    // 添加当前active状态
+                    this.classList.add('active');
+                    
+                    const category = this.getAttribute('data-category');
+                    
+                    newsItems.forEach(item => {
+                        if (category === 'all') {
+                            item.style.display = 'block';
+                        } else {
+                            const itemCategory = item.getAttribute('data-category');
+                            if (itemCategory === category) {
+                                item.style.display = 'block';
+                            } else {
+                                item.style.display = 'none';
+                            }
+                        }
+                    });
+                });
+            });
+
+            // 搜索功能
+            searchInput.addEventListener('input', function() {
+                const searchText = this.value.toLowerCase();
+                
+                newsItems.forEach(item => {
+                    const title = item.querySelector('h5').textContent.toLowerCase();
+                    const content = item.querySelector('p').textContent.toLowerCase();
+                    
+                    if (title.includes(searchText) || content.includes(searchText)) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+            });
+        });
+    </script>
+
+    <style>
+        .news-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .news-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
+        }
+        
+        .placeholder-image {
+            background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
+        }
+        
+        .bg-purple { background-color: #6f42c1 !important; }
+        .bg-orange { background-color: #fd7e14 !important; }
+        .text-purple { color: #6f42c1 !important; }
+        .text-orange { color: #fd7e14 !important; }
+        
+        .btn-outline-purple {
+            color: #6f42c1;
+            border-color: #6f42c1;
+        }
+        
+        .btn-outline-purple:hover {
+            color: white;
+            background-color: #6f42c1;
+            border-color: #6f42c1;
+        }
+        
+        .btn-outline-orange {
+            color: #fd7e14;
+            border-color: #fd7e14;
+        }
+        
+        .btn-outline-orange:hover {
+            color: white;
+            background-color: #fd7e14;
+            border-color: #fd7e14;
+        }
+        
+        .pagination .page-item.active .page-link {
+            background-color: var(--bs-primary);
+            border-color: var(--bs-primary);
+        }
+        
+        .pagination .page-link {
+            color: var(--bs-primary);
+        }
+        
+        .pagination .page-link:hover {
+            color: var(--bs-primary);
+            background-color: var(--bs-primary-bg-subtle);
+        }
+    </style>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/product.html b/website/product.html
new file mode 100644
index 0000000..1f45e60
--- /dev/null
+++ b/website/product.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>产品介绍 - 活牛采购智能数字化系统</title>
+    <meta name="description" content="详细了解活牛采购智能数字化系统的核心功能，包括供应商管理、采购流程、运输跟踪、财务结算等全流程数字化解决方案。">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome Icons -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
+    <!-- AOS Animation -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+    <!-- 自定义样式 -->
+    <link href="css/custom.css" rel="stylesheet">
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
+        <div class="container">
+            <a class="navbar-brand" href="index.html">
+                <span class="ms-2 fw-bold">活牛采购智能数字化系统</span>
+            </a>
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">首页</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="product.html">产品介绍</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="solutions.html">解决方案</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="cases.html">客户案例</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="about.html">关于我们</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="news.html">新闻动态</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.html">联系我们</a>
+                    </li>
+                </ul>
+                
+                <div class="ms-3">
+                    <a href="contact.html" class="btn btn-primary">免费试用</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 页面头部 -->
+    <section class="hero-section bg-dark text-white py-5 mt-5">
+        <div class="container py-5">
+            <div class="row">
+                <div class="col-lg-8 mx-auto text-center">
+                    <h1 class="display-4 fw-bold mb-4">产品功能特性</h1>
+                    <p class="lead mb-0">
+                        全面覆盖活牛采购全流程，从供应商管理到财务结算的一站式数字化解决方案
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 功能模块介绍 -->
+    <section class="py-5">
+        <div class="container">
+            <div class="row g-5">
+                <!-- 供应商管理 -->
+                <div class="col-lg-6">
+                    <div class="card h-100 border-0 shadow-lg">
+                        <div class="card-body p-5">
+                            <div class="text-center mb-4">
+                                <div class="feature-icon bg-primary bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
+                                    <i class="fas fa-users text-primary"></i>
+                                </div>
+                                <h3 class="fw-bold text-dark">供应商管理</h3>
+                                <p class="text-muted">完善的供应商评估和管理体系</p>
+                            </div>
+                            
+                            <ul class="list-unstyled">
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>供应商档案管理：</strong>完整的供应商信息数据库
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>资质审核：</strong>在线审核供应商资质和认证
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>绩效评估：</strong>基于历史交易的供应商评分系统
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>黑名单管理：</strong>不良供应商预警和屏蔽机制
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>合作记录：</strong>完整的合作历史和数据统计
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 采购流程管理 -->
+                <div class="col-lg-6">
+                    <div class="card h-100 border-0 shadow-lg">
+                        <div class="card-body p-5">
+                            <div class="text-center mb-4">
+                                <div class="feature-icon bg-success bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
+                                    <i class="fas fa-shopping-cart text-success"></i>
+                                </div>
+                                <h3 class="fw-bold text-dark">采购流程管理</h3>
+                                <p class="text-muted">标准化的SOP采购流程控制</p>
+                            </div>
+                            
+                            <ul class="list-unstyled">
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>需求计划：</strong>智能需求预测和采购计划制定
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>询价比价：</strong>多供应商在线询价和比价
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>订单管理：</strong>电子化订单创建、审批和执行
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>合同管理：</strong>电子合同签署和管理
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>进度跟踪：</strong>实时采购进度监控和预警
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 运输跟踪 -->
+                <div class="col-lg-6">
+                    <div class="card h-100 border-0 shadow-lg">
+                        <div class="card-body p-5">
+                            <div class="text-center mb-4">
+                                <div class="feature-icon bg-warning bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
+                                    <i class="fas fa-map-marker-alt text-warning"></i>
+                                </div>
+                                <h3 class="fw-bold text-dark">运输跟踪</h3>
+                                <p class="text-muted">全程可视化的运输监控系统</p>
+                            </div>
+                            
+                            <ul class="list-unstyled">
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>GPS定位：</strong>实时车辆位置追踪
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>视频监控：</strong>运输过程实时视频监控
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>温度监控：</strong>车厢环境温度实时监测
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>异常预警：</strong>运输异常自动预警和通知
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>电子围栏：</strong>预设路线偏离预警
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 财务结算 -->
+                <div class="col-lg-6">
+                    <div class="card h-100 border-0 shadow-lg">
+                        <div class="card-body p-5">
+                            <div class="text-center mb-4">
+                                <div class="feature-icon bg-info bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
+                                    <i class="fas fa-coins text-info"></i>
+                                </div>
+                                <h3 class="fw-bold text-dark">财务结算</h3>
+                                <p class="text-muted">自动化财务对账和结算系统</p>
+                            </div>
+                            
+                            <ul class="list-unstyled">
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>对账管理：</strong>自动化对账和差异处理
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>发票管理：</strong>电子发票上传和验证
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>支付管理：</strong>多方式支付和资金流水管理
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>成本分析：</strong>采购成本统计和分析报表
+                                </li>
+                                <li class="mb-3">
+                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
+                                    <strong>税务管理：</strong>税务合规性检查和申报
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 技术优势 -->
+    <section class="bg-light py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-8 mx-auto text-center mb-5">
+                    <h2 class="display-5 fw-bold text-dark mb-4">技术优势</h2>
+                    <p class="lead text-muted">基于先进技术架构，确保系统稳定可靠</p>
+                </div>
+            </div>
+            
+            <div class="row g-4">
+                <div class="col-md-4">
+                    <div class="text-center">
+                        <i class="bi bi-shield-check text-primary fs-1 mb-3"></i>
+                        <h5 class="fw-bold">安全可靠</h5>
+                        <p class="text-muted">多重安全防护机制，数据加密存储，确保业务安全</p>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="text-center">
+                        <i class="bi bi-lightning-charge text-success fs-1 mb-3"></i>
+                        <h5 class="fw-bold">高性能</h5>
+                        <p class="text-muted">分布式架构设计，支持高并发访问，响应迅速</p>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="text-center">
+                        <i class="bi bi-arrows-fullscreen text-warning fs-1 mb-3"></i>
+                        <h5 class="fw-bold">可扩展</h5>
+                        <p class="text-muted">模块化设计，支持功能灵活扩展，适应业务发展</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA区域 -->
+    <section class="py-5 bg-primary">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-8 mx-auto text-center">
+                    <h2 class="display-5 fw-bold text-white mb-4">立即体验专业采购管理系统</h2>
+                    <p class="lead text-white-50 mb-4">
+                        免费试用30天，体验数字化采购带来的效率提升
+                    </p>
+                    <a href="contact.html" class="btn btn-light btn-lg px-5">
+                        <i class="bi bi-rocket-takeoff me-2"></i>开始免费试用
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="bg-dark text-light py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 mb-4">
+                    <h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
+                    <p class="text-muted">
+                        专业的数字化采购管理解决方案，
+                        助力养殖企业提升采购效率和经济效益。
+                    </p>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">产品</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="product.html" class="text-muted text-decoration-none">功能特性</a></li>
+                        <li><a href="solutions.html" class="text-muted text-decoration-none">解决方案</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">资源</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">文档中心</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-4 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">联系我们</h6>
+                    <ul class="list-unstyled text-muted">
+                        <li><i class="bi bi-telephone me-2"></i> 15927219038(周经理)</li>
+                        <li><i class="bi bi-envelope me-2"></i> service@aiotagro.com</li>
+                    </ul>
+                </div>
+            </div>
+            
+            <hr class="my-4 bg-secondary">
+            
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <p class="text-muted mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- 自定义JS -->
+    <script src="js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/website/solutions.html b/website/solutions.html
new file mode 100644
index 0000000..7655eab
--- /dev/null
+++ b/website/solutions.html
@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>解决方案 - 活牛采购智能数字化系统</title>
+    <meta name="description" content="活牛采购智能数字化系统针对不同行业和企业规模的专业解决方案，提供全流程数字化采购管理服务。">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
+    <!-- AOS Animation -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+    <!-- 自定义样式 -->
+    <link href="css/custom.css" rel="stylesheet">
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
+        <div class="container">
+            <a class="navbar-brand" href="index.html">
+                <span class="ms-2 fw-bold">活牛采购智能数字化系统</span>
+            </a>
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">首页</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="product.html">产品介绍</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="solutions.html">解决方案</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="cases.html">客户案例</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="about.html">关于我们</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="news.html">新闻动态</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.html">联系我们</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 页面内容 -->
+    <main>
+        <!-- 英雄区域 -->
+        <section class="hero-section bg-dark text-white py-5 mt-5">
+            <div class="container py-5">
+                <div class="row align-items-center">
+                    <div class="col-lg-8 mx-auto text-center">
+                        <h1 class="display-4 fw-bold mb-4">专业解决方案</h1>
+                        <p class="lead mb-4">针对不同行业特点和企业规模，提供定制化的活牛采购数字化管理解决方案</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 行业解决方案 -->
+        <section class="py-5">
+            <div class="container">
+                <div class="text-center mb-5">
+                    <h2 class="fw-bold text-dark mb-3">按行业细分解决方案</h2>
+                    <p class="text-muted">针对不同养殖行业的特殊需求，提供专业定制的数字化解决方案</p>
+                </div>
+                
+                <div class="row g-4">
+                    <div class="col-lg-4 col-md-6" data-aos="fade-up">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <div class="card-body text-center p-4">
+                                <div class="feature-icon bg-primary bg-opacity-10 p-3 rounded-circle d-inline-block mb-3" style="width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto;">
+                                    <i class="fas fa-cow text-primary"></i>
+                                </div>
+                                <h5 class="fw-bold text-dark mb-3">肉牛养殖企业</h5>
+                                <p class="text-muted">专注于肉牛育肥和屠宰加工环节的采购管理，优化饲料采购和出栏计划</p>
+                                <ul class="text-start text-muted small">
+                                    <li>育肥牛只采购管理</li>
+                                    <li>饲料和兽药采购优化</li>
+                                    <li>出栏计划和销售对接</li>
+                                    <li>成本控制和效益分析</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <div class="card-body text-center p-4">
+                                <div class="feature-icon bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3" style="width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto;">
+                                    <i class="fas fa-seedling text-success"></i>
+                                </div>
+                                <h5 class="fw-bold text-dark mb-3">奶牛牧场</h5>
+                                <p class="text-muted">针对奶牛养殖的特殊需求，优化育种牛只采购和牧场设备采购管理</p>
+                                <ul class="text-start text-muted small">
+                                    <li>优质奶牛育种采购</li>
+                                    <li>牧场设备和设施采购</li>
+                                    <li>饲草料采购优化</li>
+                                    <li>奶制品生产配套</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <div class="card-body text-center p-4">
+                                <div class="feature-icon bg-warning bg-opacity-10 p-3 rounded-circle d-inline-block mb-3" style="width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto;">
+                                    <i class="fas fa-handshake text-warning"></i>
+                                </div>
+                                <h5 class="fw-bold text-dark mb-3">贸易中介服务</h5>
+                                <p class="text-muted">为牛只贸易商提供完整的采购中介服务解决方案，提升交易效率</p>
+                                <ul class="text-start text-muted small">
+                                    <li>买卖双方匹配服务</li>
+                                    <li>交易流程数字化管理</li>
+                                    <li>资金结算和安全保障</li>
+                                    <li>客户关系维护工具</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 企业规模解决方案 -->
+        <section class="py-5 bg-light">
+            <div class="container">
+                <div class="text-center mb-5">
+                    <h2 class="fw-bold text-dark mb-3">按企业规模定制方案</h2>
+                    <p class="text-muted">根据企业规模和采购需求，提供灵活可扩展的数字化解决方案</p>
+                </div>
+                
+                <div class="row g-4">
+                    <div class="col-lg-6" data-aos="fade-right">
+                        <div class="card h-100 border-0 shadow">
+                            <div class="card-body p-5">
+                                <h4 class="fw-bold text-primary mb-4">中小型养殖企业</h4>
+                                <div class="d-flex align-items-center mb-4">
+                                    <div class="feature-icon bg-primary bg-opacity-10 p-3 rounded-circle d-inline-block me-3" style="width: 50px; height: 50px; font-size: 1.25rem;">
+                                    <i class="fas fa-users text-primary"></i>
+                                </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0">标准版解决方案</h6>
+                                        <small class="text-muted">适合年采购量100-1000头的企业</small>
+                                    </div>
+                                </div>
+                                
+                                <ul class="list-unstyled mb-4">
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>基础采购流程管理</li>
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>供应商信息管理</li>
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>财务结算基础功能</li>
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>移动端基础应用</li>
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>标准报表和分析</li>
+                                </ul>
+                                
+                                <div class="text-center">
+                                    <span class="h4 text-dark fw-bold">¥9,800</span>
+                                    <span class="text-muted d-block">/年</span>
+                                    <a href="contact.html" class="btn btn-primary mt-3">立即咨询</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="col-lg-6" data-aos="fade-left">
+                        <div class="card h-100 border-0 shadow">
+                            <div class="card-body p-5">
+                                <h4 class="fw-bold text-primary mb-4">大型养殖集团</h4>
+                                <div class="d-flex align-items-center mb-4">
+                                    <div class="feature-icon bg-success bg-opacity-10 p-3 rounded-circle d-inline-block me-3" style="width: 50px; height: 50px; font-size: 1.25rem;">
+                                    <i class="fas fa-building text-success"></i>
+                                </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0">企业版解决方案</h6>
+                                        <small class="text-muted">适合年采购量1000头以上的企业</small>
+                                    </div>
+                                </div>
+                                
+                                <ul class="list-unstyled mb-4">
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>全流程采购管理</li>
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>多层级权限管理</li>
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>高级财务分析</li>
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>定制化报表开发</li>
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>API集成服务</li>
+                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>专属技术支持</li>
+                                </ul>
+                                
+                                <div class="text-center">
+                                    <span class="h4 text-dark fw-bold">定制报价</span>
+                                    <span class="text-muted d-block">根据需求定制</span>
+                                    <a href="contact.html" class="btn btn-success mt-3">获取定制方案</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA区域 -->
+        <section class="py-5 bg-primary text-white">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-lg-8">
+                        <h3 class="fw-bold mb-3">寻找适合您的解决方案？</h3>
+                        <p class="mb-4">我们的专家团队将为您提供个性化的咨询和方案定制服务</p>
+                    </div>
+                    <div class="col-lg-4 text-lg-end">
+                        <a href="contact.html" class="btn btn-light btn-lg px-4">立即咨询</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- 页脚 -->
+    <footer class="bg-dark text-white py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 mb-4">
+                    <h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
+                    <p class="text-light">
+                        专业的数字化采购管理解决方案，
+                        为养殖企业提供全流程的采购数字化服务。
+                    </p>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">产品</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
+                        <li><a href="solutions.html" class="text-muted text-decoration-none">解决方案</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">价格方案</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">资源</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
+                        <li><a href="news.html" class="text-muted text-decoration-none">新闻动态</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">帮助文档</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">公司</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
+                        <li><a href="contact.html" class="text-muted text-decoration-none">联系我们</a></li>
+                        <li><a href="#" class="text-muted text-decoration-none">加入我们</a></li>
+                    </ul>
+                </div>
+                
+                <div class="col-lg-2 col-md-4 mb-4">
+                    <h6 class="fw-bold mb-3">联系信息</h6>
+                    <div class="text-muted">
+                        <p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
+                        <p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
+                        <p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
+                    </div>
+                </div>
+            </div>
+            
+            <hr class="my-4">
+            
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <p class="text-muted mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <div class="d-flex justify-content-md-end">
+                        <a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
+                        <a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
+                        <a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
+    <script src="js/main.js"></script>
+    
+    <script>
+        // 初始化AOS动画
+        AOS.init({
+            duration: 1000,
+            once: true,
+            offset: 100
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file