添加 IntelliJ IDEA 项目配置文件
This commit is contained in:
ylweng
10
.idea/.gitignore
generated
vendored
Normal file
10
.idea/.gitignore
generated
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
# 默认忽略的文件
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# 基于编辑器的 HTTP 客户端请求
|
||||
/httpRequests/
|
||||
# 依赖于环境的 Maven 主目录路径
|
||||
/mavenHomeManager.xml
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
10
.idea/UniappTool.xml
generated
Normal file
10
.idea/UniappTool.xml
generated
Normal file
@@ -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>
|
||||
6
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
6
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
@@ -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>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -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>
|
||||
9
.idea/niumall.iml
generated
Normal file
9
.idea/niumall.iml
generated
Normal file
@@ -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>
|
||||
7
.idea/vcs.xml
generated
Normal file
7
.idea/vcs.xml
generated
Normal file
@@ -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>
|
||||
47
README.md
Normal file
47
README.md
Normal file
@@ -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
|
||||
38
admin-system/README.md
Normal file
38
admin-system/README.md
Normal file
@@ -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. 代码分割和懒加载
|
||||
30
backend/README.md
Normal file
30
backend/README.md
Normal file
@@ -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. 安全防护措施
|
||||
207
docs/Live-Cattle-Procurement-SOP-System-PRD.md
Normal file
207
docs/Live-Cattle-Procurement-SOP-System-PRD.md
Normal file
@@ -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
|
||||
345
docs/官网需求文档.md
Normal file
345
docs/官网需求文档.md
Normal file
@@ -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
|
||||
|
||||
---
|
||||
|
||||
*本文档为活牛采购智能数字化系统官网的需求规范，用于指导官网的设计、开发和运营工作。*
|
||||
1990
docs/技术实施方案.md
Normal file
1990
docs/技术实施方案.md
Normal file
File diff suppressed because it is too large
Load Diff
177
docs/活牛采购智能数字化系统PRD.md
Normal file
177
docs/活牛采购智能数字化系统PRD.md
Normal file
@@ -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开发
|
||||
- 系统集成接口
|
||||
- 高级报表功能
|
||||
- 消息通知系统
|
||||
37
mini_program/README.md
Normal file
37
mini_program/README.md
Normal file
@@ -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. 性能优化
|
||||
606
website/about.html
Normal file
606
website/about.html
Normal file
@@ -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">© 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>
|
||||
503
website/cases.html
Normal file
503
website/cases.html
Normal file
@@ -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">© 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>
|
||||
304
website/contact.html
Normal file
304
website/contact.html
Normal file
@@ -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">© 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>
|
||||
450
website/css/custom.css
Normal file
450
website/css/custom.css
Normal file
@@ -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;
|
||||
}
|
||||
1
website/images/placeholder-800x400.png
Normal file
1
website/images/placeholder-800x400.png
Normal file
@@ -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=
|
||||
26
website/images/placeholder.txt
Normal file
26
website/images/placeholder.txt
Normal file
@@ -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. 使用懒加载技术提高页面加载速度
|
||||
|
||||
当前为占位文件，实际使用时请替换为真实的图片资源。
|
||||
445
website/index.html
Normal file
445
website/index.html
Normal file
@@ -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>© 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>
|
||||
310
website/js/main.js
Normal file
310
website/js/main.js
Normal file
@@ -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();
|
||||
517
website/news.html
Normal file
517
website/news.html
Normal file
@@ -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">© 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>
|
||||
340
website/product.html
Normal file
340
website/product.html
Normal file
@@ -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">© 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>
|
||||
311
website/solutions.html
Normal file
311
website/solutions.html
Normal file
@@ -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">© 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>
|
||||
Reference in New Issue
Block a user