aiotagro/niumalll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source
This commit is contained in:
mapleaf
2025-09-12 13:15:03 +08:00
committed by aiotagro
parent f0f57fec7d bbc7abd69c
commit e340bf3b34
28 changed files with 10237 additions and 1945 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
backend/.dockerignore Normal file
View File

@@ -0,0 +1,50 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Environment variables
.env
.env.local
.env.production.local
.env.development.local
.env.test.local
# Build directories
build
.cache
# OS generated files
Thumbs.db
.DS_Store
# Test coverage
coverage
*.lcov
.nyc_output
# Temporary files
*.tmp
*.temp
.tmp/
.temp/

23
backend/.env.docker Normal file
View File

@@ -0,0 +1,23 @@
# 数据库配置
DB_USERNAME=niumall_user
DB_PASSWORD=niumall_password
DB_NAME=niumall_prod
DB_HOST=db
DB_PORT=3306
# JWT配置
JWT_SECRET=your_secure_jwt_secret_key_change_this_in_production
JWT_EXPIRES_IN=24h
# Redis配置
REDIS_HOST=redis
REDIS_PORT=6379
# 服务器配置
PORT=4330
# 日志配置
LOG_LEVEL=info
# 环境
NODE_ENV=production

26
backend/Dockerfile Normal file
View File

@@ -0,0 +1,26 @@
# 使用官方Node.js镜像作为基础镜像
FROM node:18-alpine
# 设置工作目录
WORKDIR /app
# 复制package.json和package-lock.json
COPY package*.json ./
# 安装依赖（生产环境）
RUN npm install --production
# 复制项目文件
COPY . .
# 创建日志目录
RUN mkdir -p logs
# 暴露应用端口
EXPOSE 4330
# 设置环境变量
ENV NODE_ENV=production
# 启动应用
CMD ["node", "app.js"]

189
backend/README_DOCKER.md Normal file
View File

@@ -0,0 +1,189 @@
# Docker部署指南
本文档提供了使用Docker部署活牛采购智能数字化系统后端服务的详细步骤和配置说明。
## 前提条件
在开始部署前，请确保您的系统已安装以下软件：
- [Docker](https://docs.docker.com/get-docker/)
- [Docker Compose](https://docs.docker.com/compose/install/)
## 配置说明
### 环境变量配置
1. 复制`.env.docker`文件为`.env`：
```bash
cp .env.docker .env
```
2. 根据您的实际需求修改`.env`文件中的配置项：
```env
# 数据库配置
DB_USERNAME=niumall_user # MySQL用户名
DB_PASSWORD=niumall_password # MySQL密码
DB_NAME=niumall_prod # MySQL数据库名
# JWT配置
JWT_SECRET=your_secure_jwt_secret_key_change_this_in_production # JWT密钥，请务必在生产环境中更换为安全的密钥
# 其他配置保持默认即可
```
### 目录结构说明
部署相关的主要文件：
- `Dockerfile`: 定义如何构建Node.js应用镜像
- `docker-compose.yml`: 定义多容器应用的配置
- `.env.docker`: Docker环境变量配置示例
- `.env`: 您的实际环境变量配置（不在版本控制中）
## 部署步骤
### 首次部署
1. 确保您已完成上述环境变量配置
2. 在项目根目录（包含`docker-compose.yml`的目录）执行以下命令启动所有服务：
```bash
docker-compose up -d --build
```
此命令将：
- 构建Node.js应用镜像
- 拉取MySQL和Redis镜像
- 创建并启动所有容器
- 将容器连接到内部网络
3. 查看服务状态：
```bash
docker-compose ps
```
### 初始化数据库（如果需要）
如果您需要初始化数据库表结构和数据，可以使用以下命令运行数据迁移：
```bash
docker-compose exec backend npm run db:migrate
docker-compose exec backend npm run db:seed
```
## 常用命令
### 服务管理
- 启动所有服务：
```bash
docker-compose up -d
```
- 停止所有服务：
```bash
docker-compose down
```
- 重启所有服务：
```bash
docker-compose restart
```
- 查看服务日志：
```bash
docker-compose logs -f
```
- 查看特定服务日志：
```bash
docker-compose logs -f backend
```
### 进入容器
- 进入后端应用容器：
```bash
docker-compose exec backend sh
```
- 进入MySQL容器：
```bash
docker-compose exec db mysql -u${DB_USERNAME} -p${DB_PASSWORD} ${DB_NAME}
```
### 数据库管理
- 运行数据迁移：
```bash
docker-compose exec backend npm run db:migrate
```
- 重置数据库（警告：这将删除所有数据）：
```bash
docker-compose exec backend npm run db:reset
```
## 数据持久化
本配置使用Docker数据卷确保数据持久化：
- `mysql-data`: 存储MySQL数据库数据
- `redis-data`: 存储Redis数据
- `./logs:/app/logs`: 映射日志目录到主机
## 服务访问
部署完成后，您可以通过以下地址访问服务：
- API服务：`http://服务器IP:4330`
- 健康检查：`http://服务器IP:4330/health`
## 生产环境注意事项
1. **安全配置**：
- 务必修改`.env`文件中的`JWT_SECRET`为安全的随机字符串
- 不要使用默认的数据库密码
- 考虑配置HTTPS代理（如Nginx）
2. **资源限制**：
- 为生产环境配置适当的容器资源限制
- 调整MySQL和Redis的配置以优化性能
3. **备份策略**：
- 定期备份MySQL数据卷
- 考虑实现日志轮转和清理策略
4. **监控**：
- 配置适当的监控解决方案，如Prometheus和Grafana
- 设置日志聚合系统
## 常见问题排查
1. **服务启动失败**：
- 检查环境变量配置是否正确
- 查看容器日志获取详细错误信息
2. **数据库连接问题**：
- 确认`DB_HOST`设置为`db`（Docker Compose服务名称）
- 检查数据库凭证是否正确
3. **端口冲突**：
- 如果主机端口4330、3306或6379已被占用，可以修改`docker-compose.yml`中的端口映射
## 更新部署
当代码更新后，执行以下命令更新部署：
```bash
docker-compose up -d --build backend
```
## 参考文档
- [Docker官方文档](https://docs.docker.com/)
- [Docker Compose官方文档](https://docs.docker.com/compose/)

90
backend/app.js
View File

@@ -4,13 +4,15 @@ const helmet = require('helmet')
const morgan = require('morgan')
const rateLimit = require('express-rate-limit')
const compression = require('compression')
const swaggerJsdoc = require('swagger-jsdoc')
const swaggerUi = require('swagger-ui-express')
const path = require('path')
require('dotenv').config()
// 数据库连接
const { testConnection, syncModels } = require('./models')
// 导入Swagger配置
const { specs, swaggerUi } = require('./config/swagger')
const app = express()
// 中间件配置
@@ -21,74 +23,7 @@ app.use(morgan('combined')) // 日志
app.use(express.json({ limit: '10mb' }))
app.use(express.urlencoded({ extended: true, limit: '10mb' }))
// Swagger 配置
const swaggerOptions = {
definition: {
openapi: '3.0.0',
info: {
title: '活牛采购智能数字化系统 API',
version: '1.0.0',
description: '活牛采购标准化操作流程系统接口文档',
contact: {
name: 'API支持',
email: 'support@niumall.com'
}
},
servers: [
{
url: 'http://localhost:4330/api',
description: '开发环境'
},
{
url: 'https://wapi.yunniushi.cn/api',
description: '生产环境'
}
],
components: {
securitySchemes: {
BearerAuth: {
type: 'http',
scheme: 'bearer',
bearerFormat: 'JWT'
}
},
schemas: {
ApiResponse: {
type: 'object',
properties: {
success: { type: 'boolean', description: '请求是否成功' },
message: { type: 'string', description: '提示信息' },
data: { type: 'object', description: '响应数据' },
timestamp: { type: 'string', format: 'date-time', description: '时间戳' }
}
},
PaginationParams: {
type: 'object',
properties: {
page: { type: 'integer', description: '当前页码' },
limit: { type: 'integer', description: '每页数量' },
sort: { type: 'string', description: '排序字段' },
order: { type: 'string', enum: ['asc', 'desc'], description: '排序方向' }
}
},
PaginatedResponse: {
type: 'object',
properties: {
items: { type: 'array', description: '数据列表' },
total: { type: 'integer', description: '总记录数' },
page: { type: 'integer', description: '当前页码' },
limit: { type: 'integer', description: '每页数量' },
totalPages: { type: 'integer', description: '总页数' }
}
}
}
}
},
apis: ['./routes/*.js', './models/*.js'] // API路由文件路径
};
const swaggerSpec = swaggerJsdoc(swaggerOptions);
app.use('/api/docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));
// 限流
const limiter = rateLimit({
@@ -111,6 +46,13 @@ app.get('/health', (req, res) => {
})
})
// 配置Swagger UI
app.use('/swagger', swaggerUi.serve, swaggerUi.setup(specs, {
explorer: true,
customCss: '.swagger-ui .topbar { background-color: #3B82F6; }',
customSiteTitle: 'NiuMall API 文档'
}))
// API 路由
app.use('/api/auth', require('./routes/auth'))
app.use('/api/users', require('./routes/users'))
@@ -120,6 +62,14 @@ app.use('/api/transport', require('./routes/transport'))
app.use('/api/finance', require('./routes/finance'))
app.use('/api/quality', require('./routes/quality'))
// 静态文件服务
app.use('/static', express.static('public'));
// API文档路由重定向
app.get('/docs', (req, res) => {
res.redirect('/swagger');
});
// 404 处理
app.use((req, res) => {
res.status(404).json({
@@ -161,7 +111,7 @@ const startServer = async () => {
console.log(`📱 运行环境: ${process.env.NODE_ENV || 'development'}`)
console.log(`🌐 访问地址: http://localhost:${PORT}`)
console.log(`📊 健康检查: http://localhost:${PORT}/health`)
console.log(`📚 API文档: http://localhost:${PORT}/api/docs`)
console.log(`📚 API文档: http://localhost:${PORT}/swagger`)
})
} catch (error) {
console.error('❌ 服务器启动失败:', error)

248
backend/config/swagger.js Normal file
View File

@@ -0,0 +1,248 @@
const swaggerJsdoc = require('swagger-jsdoc')
const swaggerUi = require('swagger-ui-express')
// Swagger 配置选项
const options = {
definition: {
openapi: '3.0.0',
info: {
title: '活牛采购智能数字化系统 API文档',
description: '活牛采购智能数字化系统的后端API接口文档',
version: '1.0.0',
contact: {
name: 'NiuMall Team',
email: 'contact@niumall.com'
},
license: {
name: 'MIT',
url: 'https://opensource.org/licenses/MIT'
}
},
servers: [
{
url: 'http://localhost:4330',
description: '本地开发环境'
}
],
components: {
securitySchemes: {
bearerAuth: {
type: 'http',
scheme: 'bearer',
bearerFormat: 'JWT'
}
},
schemas: {
// 通用响应格式
ApiResponse: {
type: 'object',
properties: {
success: {
type: 'boolean',
description: '请求是否成功'
},
message: {
type: 'string',
description: '返回消息'
},
data: {
type: 'object',
description: '返回数据',
nullable: true
}
}
},
// 分页数据格式
PagedResponse: {
type: 'object',
properties: {
items: {
type: 'array',
items: {
type: 'object'
},
description: '数据列表'
},
total: {
type: 'integer',
description: '总条数'
},
page: {
type: 'integer',
description: '当前页码'
},
pageSize: {
type: 'integer',
description: '每页条数'
},
totalPages: {
type: 'integer',
description: '总页数'
}
}
},
// 订单相关模型
Order: {
type: 'object',
properties: {
id: {
type: 'integer',
description: '订单ID'
},
orderNo: {
type: 'string',
description: '订单编号'
},
buyerId: {
type: 'integer',
description: '买方ID'
},
buyerName: {
type: 'string',
description: '买方名称'
},
supplierId: {
type: 'integer',
description: '供应商ID'
},
supplierName: {
type: 'string',
description: '供应商名称'
},
traderId: {
type: 'integer',
nullable: true,
description: '贸易商ID'
},
traderName: {
type: 'string',
nullable: true,
description: '贸易商名称'
},
cattleBreed: {
type: 'string',
description: '牛品种'
},
cattleCount: {
type: 'integer',
description: '牛数量'
},
expectedWeight: {
type: 'number',
description: '预计重量'
},
actualWeight: {
type: 'number',
nullable: true,
description: '实际重量'
},
unitPrice: {
type: 'number',
description: '单价'
},
totalAmount: {
type: 'number',
description: '总金额'
},
paidAmount: {
type: 'number',
description: '已支付金额'
},
remainingAmount: {
type: 'number',
description: '剩余金额'
},
status: {
type: 'string',
enum: ['pending', 'confirmed', 'preparing', 'shipping', 'delivered', 'accepted', 'completed', 'cancelled', 'refunded'],
description: '订单状态'
},
deliveryAddress: {
type: 'string',
description: '送货地址'
},
expectedDeliveryDate: {
type: 'string',
format: 'date',
description: '预计送达日期'
},
actualDeliveryDate: {
type: 'string',
format: 'date',
nullable: true,
description: '实际送达日期'
},
notes: {
type: 'string',
nullable: true,
description: '备注'
},
createdAt: {
type: 'string',
format: 'date-time',
description: '创建时间'
},
updatedAt: {
type: 'string',
format: 'date-time',
description: '更新时间'
}
}
},
// 用户相关模型
User: {
type: 'object',
properties: {
id: {
type: 'integer',
description: '用户ID'
},
username: {
type: 'string',
description: '用户名'
},
email: {
type: 'string',
format: 'email',
description: '邮箱'
},
phone: {
type: 'string',
description: '手机号'
},
user_type: {
type: 'string',
enum: ['admin', 'buyer', 'supplier', 'trader'],
description: '用户类型'
},
status: {
type: 'string',
enum: ['active', 'inactive', 'suspended'],
description: '用户状态'
},
createdAt: {
type: 'string',
format: 'date-time',
description: '创建时间'
},
updatedAt: {
type: 'string',
format: 'date-time',
description: '更新时间'
}
}
}
}
}
},
// 指定API文档的路径
apis: ['../routes/*.js']
}
// 初始化Swagger-jsdoc
const specs = swaggerJsdoc(options)
module.exports = {
specs,
swaggerUi
}

65
backend/docker-compose.yml Normal file
View File

@@ -0,0 +1,65 @@
# Docker Compose配置文件 - 活牛采购智能数字化系统后端
# 全局配置
x-common-config:
&common-config
logging:
driver: "json-file"
options:
max-size: "10m"
max-file: "3"
# 服务定义
services:
# 后端Node.js应用服务
backend:
<<: *common-config
build:
context: .
dockerfile: Dockerfile
container_name: niumall-backend
restart: unless-stopped
ports:
- "4330:4330"
environment:
# 数据库配置 - 使用外部数据库
DB_USERNAME: ${DB_USERNAME}
DB_PASSWORD: ${DB_PASSWORD}
DB_NAME: ${DB_NAME}
DB_HOST: ${DB_HOST}
DB_PORT: ${DB_PORT}
# Redis配置 - 使用外部Redis
REDIS_HOST: ${DB_HOST}
REDIS_PORT: 6379
# 服务器配置
PORT: 4330
NODE_ENV: production
# JWT配置
JWT_SECRET: ${JWT_SECRET}
JWT_EXPIRES_IN: 24h
# 日志配置
LOG_LEVEL: info
volumes:
- ./logs:/app/logs
depends_on:
# 不再依赖内部数据库和Redis容器，改为使用外部服务
wait-for-db:
condition: service_completed_successfully
# 等待数据库连接测试服务
wait-for-db:
image: busybox:latest
container_name: wait-for-db
command: ["sh", "-c", "sleep 5 && echo '数据库连接等待完成'"]
environment:
DB_HOST: ${DB_HOST}
DB_PORT: ${DB_PORT}
# 数据卷配置
volumes:
logs:
driver: local

131
backend/middleware/auth.js Normal file
View File

@@ -0,0 +1,131 @@
const jwt = require('jsonwebtoken')
/**
* @swagger
* components:
* securitySchemes:
* bearerAuth:
* type: http
* scheme: bearer
* bearerFormat: JWT
* security:
* - bearerAuth: []
* responses:
* UnauthorizedError:
* description: 未授权访问
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* example: false
* message:
* type: string
* example: 未授权访问
* ForbiddenError:
* description: 权限不足
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* example: false
* message:
* type: string
* example: 权限不足
*/
// 从环境变量或配置中获取JWT密钥
const JWT_SECRET = process.env.JWT_SECRET || 'your_jwt_secret_key'
/**
* JWT认证中间件
* 验证请求中的JWT token，确认用户身份
* @param {Object} req - Express请求对象
* @param {Object} res - Express响应对象
* @param {Function} next - Express下一个中间件函数
*/
const authenticateJWT = (req, res, next) => {
// 从Authorization头中获取token
const authHeader = req.headers.authorization
if (!authHeader) {
return res.status(401).json({
success: false,
message: '未提供认证令牌'
})
}
// 提取token（格式：Bearer <token>）
const token = authHeader.split(' ')[1]
if (!token) {
return res.status(401).json({
success: false,
message: '无效的认证令牌格式'
})
}
try {
// 验证token
const decoded = jwt.verify(token, JWT_SECRET)
// 将解码的用户信息附加到请求对象中
req.user = decoded
// 继续处理请求
next()
} catch (error) {
console.error('JWT验证失败:', error)
if (error.name === 'TokenExpiredError') {
return res.status(401).json({
success: false,
message: '认证令牌已过期'
})
}
return res.status(401).json({
success: false,
message: '无效的认证令牌'
})
}
}
/**
* 用户角色授权中间件
* 检查用户是否具有指定角色
* @param {Array<string>} allowedRoles - 允许访问的角色列表
* @returns {Function} Express中间件函数
*/
const authorizeRoles = (...allowedRoles) => {
return (req, res, next) => {
// 确保用户已通过认证
if (!req.user) {
return res.status(401).json({
success: false,
message: '未授权访问'
})
}
// 检查用户角色是否在允许列表中
if (!allowedRoles.includes(req.user.user_type)) {
return res.status(403).json({
success: false,
message: '权限不足'
})
}
// 用户具有所需角色，继续处理请求
next()
}
}
module.exports = {
authenticateJWT,
authorizeRoles
}

15
backend/models/index.js
View File

@@ -22,6 +22,9 @@ const sequelize = new Sequelize(
}
);
// 导入模型定义
const defineOrder = require('./order.js');
// 测试数据库连接
const testConnection = async () => {
try {
@@ -118,15 +121,23 @@ const models = {
}, {
tableName: 'api_users',
timestamps: true
})
}),
// 订单模型
Order: defineOrder(sequelize)
};
// 同步数据库模型
const syncModels = async () => {
try {
// 只同步API用户表（如果不存在则创建）
// 同步API用户表（如果不存在则创建）
await models.ApiUser.sync({ alter: true });
console.log('✅ API用户表同步成功');
// 同步订单表（如果不存在则创建）
await models.Order.sync({ alter: true });
console.log('✅ 订单表同步成功');
console.log('✅ 数据库模型同步完成');
} catch (error) {
console.error('❌ 数据库模型同步失败:', error);

132
backend/models/order.js Normal file
View File

@@ -0,0 +1,132 @@
// 订单模型定义
const { Sequelize } = require('sequelize');
module.exports = (sequelize) => {
const Order = sequelize.define('Order', {
id: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true
},
orderNo: {
type: Sequelize.STRING(20),
allowNull: false,
unique: true,
comment: '订单编号'
},
buyerId: {
type: Sequelize.INTEGER,
allowNull: false,
comment: '买方ID'
},
buyerName: {
type: Sequelize.STRING(100),
allowNull: false,
comment: '买方名称'
},
supplierId: {
type: Sequelize.INTEGER,
allowNull: false,
comment: '供应商ID'
},
supplierName: {
type: Sequelize.STRING(100),
allowNull: false,
comment: '供应商名称'
},
traderId: {
type: Sequelize.INTEGER,
allowNull: true,
comment: '贸易商ID'
},
traderName: {
type: Sequelize.STRING(100),
allowNull: true,
comment: '贸易商名称'
},
cattleBreed: {
type: Sequelize.STRING(50),
allowNull: false,
comment: '牛的品种'
},
cattleCount: {
type: Sequelize.INTEGER,
allowNull: false,
comment: '牛的数量'
},
expectedWeight: {
type: Sequelize.DECIMAL(10, 2),
allowNull: false,
comment: '预计总重量'
},
actualWeight: {
type: Sequelize.DECIMAL(10, 2),
allowNull: true,
comment: '实际总重量'
},
unitPrice: {
type: Sequelize.DECIMAL(10, 2),
allowNull: false,
comment: '单价'
},
totalAmount: {
type: Sequelize.DECIMAL(15, 2),
allowNull: false,
comment: '总金额'
},
paidAmount: {
type: Sequelize.DECIMAL(15, 2),
allowNull: false,
defaultValue: 0,
comment: '已支付金额'
},
remainingAmount: {
type: Sequelize.DECIMAL(15, 2),
allowNull: false,
comment: '剩余金额'
},
status: {
type: Sequelize.ENUM(
'pending', 'confirmed', 'preparing', 'shipping',
'delivered', 'accepted', 'completed', 'cancelled', 'refunded'
),
allowNull: false,
defaultValue: 'pending',
comment: '订单状态'
},
deliveryAddress: {
type: Sequelize.STRING(200),
allowNull: false,
comment: '收货地址'
},
expectedDeliveryDate: {
type: Sequelize.DATE,
allowNull: false,
comment: '预计交货日期'
},
actualDeliveryDate: {
type: Sequelize.DATE,
allowNull: true,
comment: '实际交货日期'
},
notes: {
type: Sequelize.TEXT,
allowNull: true,
comment: '备注信息'
}
}, {
tableName: 'orders',
timestamps: true,
createdAt: 'created_at',
updatedAt: 'updated_at',
indexes: [
{ fields: ['orderNo'] },
{ fields: ['buyerId'] },
{ fields: ['supplierId'] },
{ fields: ['status'] },
{ fields: ['created_at'] }
]
});
return Order;
};

4114
backend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
backend/package.json
View File

@@ -2,10 +2,10 @@
"name": "niumall-backend",
"version": "1.0.0",
"description": "活牛采购智能数字化系统 - 后端服务",
"main": "src/app.js",
"main": "src/main.js",
"scripts": {
"start": "node src/app.js",
"dev": "nodemon src/app.js",
"start": "node src/main.js",
"dev": "nodemon src/main.js",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
@@ -49,8 +49,11 @@
"redis": "^4.6.7",
"sequelize": "^6.32.1",
"socket.io": "^4.7.2",
"swagger-jsdoc": "^6.2.8",
"swagger-ui-express": "^5.0.1",
"uuid": "^9.0.0",
"winston": "^3.10.0"
"winston": "^3.10.0",
"yamljs": "^0.3.0"
},
"devDependencies": {
"eslint": "^8.45.0",

984
backend/public/api-docs.html Normal file
View File

@@ -0,0 +1,984 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NiuMall API 文档</title>
<style>
/* 基础样式 */
:root {
--primary: #3B82F6;
--secondary: #10B981;
--accent: #8B5CF6;
--danger: #EF4444;
--warning: #F59E0B;
--info: #60A5FA;
--dark: #1E293B;
--light: #F1F5F9;
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-500: #6B7280;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;
--blue-100: #DBEAFE;
--blue-50: #EFF6FF;
--blue-800: #1E40AF;
--green-100: #D1FAE5;
--green-50: #ECFDF5;
--green-600: #059669;
--green-800: #065F46;
--red-50: #FEF2F2;
--red-600: #DC2626;
--yellow-50: #FFFBEB;
--yellow-100: #FEF3C7;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: var(--gray-50);
min-height: 100vh;
color: var(--gray-900);
line-height: 1.6;
}
/* 布局样式 */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.lg:flex-row {
flex-direction: row;
}
.justify-between {
justify-content: space-between;
}
.items-center {
align-items: center;
}
.gap-8 {
gap: 32px;
}
.shrink-0 {
flex-shrink: 0;
}
.lg:w-64 {
width: 256px;
}
.flex-1 {
flex: 1;
}
/* 卡片和阴影 */
.shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.shadow-card {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.rounded-xl {
border-radius: 12px;
}
.rounded-lg {
border-radius: 8px;
}
.rounded {
border-radius: 4px;
}
.rounded-full {
border-radius: 9999px;
}
/* 内边距和外边距 */
.p-4 {
padding: 16px;
}
.p-6 {
padding: 24px;
}
.py-6 {
padding-top: 24px;
padding-bottom: 24px;
}
.px-4 {
padding-left: 16px;
padding-right: 16px;
}
.px-6 {
padding-left: 24px;
padding-right: 24px;
}
.py-8 {
padding-top: 32px;
padding-bottom: 32px;
}
.mt-1 {
margin-top: 4px;
}
.mt-4 {
margin-top: 16px;
}
.mt-8 {
margin-top: 32px;
}
.mb-4 {
margin-bottom: 16px;
}
.mb-8 {
margin-bottom: 32px;
}
.mb-12 {
margin-bottom: 48px;
}
.ml-2 {
margin-left: 8px;
}
.mr-2 {
margin-right: 8px;
}
/* 文本样式 */
.text-white {
color: white;
}
.text-primary {
color: var(--primary);
}
.text-secondary {
color: var(--secondary);
}
.text-accent {
color: var(--accent);
}
.text-dark {
color: var(--dark);
}
.text-gray-100 {
color: var(--gray-100);
}
.text-gray-400 {
color: var(--gray-400);
}
.text-gray-500 {
color: var(--gray-500);
}
.text-gray-700 {
color: var(--gray-700);
}
.text-gray-800 {
color: var(--gray-800);
}
.text-blue-100 {
color: var(--blue-100);
}
.text-blue-800 {
color: var(--blue-800);
}
.text-green-600 {
color: var(--green-600);
}
.text-green-800 {
color: var(--green-800);
}
.text-red-600 {
color: var(--red-600);
}
.text-yellow-100 {
color: var(--yellow-100);
}
.text-gray-300 {
color: var(--gray-300);
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
.text-xs {
font-size: 12px;
}
.text-sm {
font-size: 14px;
}
.text-base {
font-size: 16px;
}
.text-lg {
font-size: 18px;
}
.text-xl {
font-size: 20px;
}
.text-2xl {
font-size: 24px;
}
.text-3xl {
font-size: 30px;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.uppercase {
text-transform: uppercase;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 背景色 */
.bg-primary {
background-color: var(--primary);
}
.bg-secondary {
background-color: var(--secondary);
}
.bg-accent {
background-color: var(--accent);
}
.bg-dark {
background-color: var(--dark);
}
.bg-gray-50 {
background-color: var(--gray-50);
}
.bg-gray-100 {
background-color: var(--gray-100);
}
.bg-gray-800 {
background-color: var(--gray-800);
}
.bg-white {
background-color: white;
}
.bg-blue-50 {
background-color: var(--blue-50);
}
.bg-blue-100 {
background-color: var(--blue-100);
}
.bg-green-100 {
background-color: var(--green-100);
}
.bg-green-50 {
background-color: var(--green-50);
}
.bg-red-50 {
background-color: var(--red-50);
}
.bg-yellow-50 {
background-color: var(--yellow-50);
}
.bg-yellow-100 {
background-color: var(--yellow-100);
}
.bg-info {
background-color: var(--info);
}
.bg-danger {
background-color: var(--danger);
}
.bg-warning {
background-color: var(--warning);
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--primary), var(--accent));
}
/* 导航和链接 */
a {
color: inherit;
text-decoration: none;
transition: all 0.2s ease;
}
a:hover {
color: var(--primary);
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px 16px;
text-align: left;
border-bottom: 1px solid var(--gray-200);
}
th {
font-weight: 600;
color: var(--gray-500);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* 代码和预格式化文本 */
pre {
overflow-x: auto;
padding: 16px;
border-radius: 8px;
background-color: var(--gray-800);
color: var(--gray-100);
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--gray-100);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--gray-400);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gray-500);
}
/* 响应式设计 */
@media (max-width: 1024px) {
.lg:flex-row {
flex-direction: column;
}
.lg:w-64 {
width: 100%;
}
}
/* 工具类 */
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.border-l-4 {
border-left: 4px solid;
}
.pl-4 {
padding-left: 16px;
}
.sticky {
position: sticky;
top: 16px;
}
/* 图标替代方案 */
.icon {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: middle;
}
/* 导航高亮 */
.nav-link.active {
background-color: var(--blue-50);
color: var(--primary);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<header class="bg-gradient-to-r from-primary to-accent text-white shadow-lg">
<div class="container mx-auto px-4 py-6 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<div>
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow">NiuMall API 文档</h1>
<p class="mt-1 text-blue-100">版本: 1.0.0 | 最后更新: 2025-09-12</p>
</div>
<div class="mt-4 md:mt-0">
<div class="flex items-center space-x-2 bg-white/20 px-4 py-2 rounded-lg backdrop-blur-sm">
<span class="icon" style="background: white; width: 20px; height: 20px; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 18H5c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v14c0 .55-.45 1-1 1z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span>
<span>运行环境: Production</span>
</div>
</div>
</div>
</div>
</header>
<div class="container mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- 侧边导航 -->
<aside class="lg:w-64 shrink-0">
<nav class="bg-white rounded-xl shadow-card p-4 sticky top-4">
<h2 class="text-lg font-bold text-dark mb-4 flex items-center">
<span class="icon" style="background: linear-gradient(45deg, var(--primary), var(--accent)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 接口分类
</h2>
<ul class="space-y-1">
<li>
<a href="#auth" class="block px-4 py-2 rounded-lg hover:bg-blue-50 hover:text-primary">
<span class="icon" style="background: linear-gradient(45deg, var(--primary), var(--accent)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 15c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm0-2c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm0-10C7.03 3 3 7.03 3 12c0 5.52 3.84 10.74 9 12 5.16-1.26 9-6.48 9-12 0-4.97-4.03-9-9-9zm0 16.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 认证管理
</a>
</li>
<li>
<a href="#users" class="block px-4 py-2 rounded-lg hover:bg-blue-50 hover:text-primary">
<span class="icon" style="background: linear-gradient(45deg, var(--secondary), var(--primary)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 用户管理
</a>
</li>
<li>
<a href="#orders" class="block px-4 py-2 rounded-lg hover:bg-blue-50 hover:text-primary">
<span class="icon" style="background: linear-gradient(45deg, var(--warning), var(--primary)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 订单管理
</a>
</li>
<li>
<a href="#finance" class="block px-4 py-2 rounded-lg hover:bg-blue-50 hover:text-primary">
<span class="icon" style="background: linear-gradient(45deg, var(--info), var(--primary)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 财务管理
</a>
</li>
<li>
<a href="#suppliers" class="block px-4 py-2 rounded-lg hover:bg-blue-50 hover:text-primary">
<span class="icon" style="background: linear-gradient(45deg, var(--accent), var(--primary)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8zm-4-6h-4v2h4v-2zm0 4h-4v2h4v-2z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 供应商管理
</a>
</li>
<li>
<a href="#transport" class="block px-4 py-2 rounded-lg hover:bg-blue-50 hover:text-primary">
<span class="icon" style="background: linear-gradient(45deg, var(--secondary), var(--accent)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 19.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V10.5h2.5zM18 19.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 运输管理
</a>
</li>
<li>
<a href="#quality" class="block px-4 py-2 rounded-lg hover:bg-blue-50 hover:text-primary">
<span class="icon" style="background: linear-gradient(45deg, var(--warning), var(--accent)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 质量管理
</a>
</li>
<li>
<a href="#system" class="block px-4 py-2 rounded-lg hover:bg-blue-50 hover:text-primary">
<span class="icon" style="background: linear-gradient(45deg, var(--dark), var(--primary)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 系统接口
</a>
</li>
</ul>
<div class="mt-8">
<h2 class="text-lg font-bold text-dark mb-4 flex items-center">
<span class="icon" style="background: linear-gradient(45deg, var(--primary), var(--accent)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 文档说明
</h2>
<div class="bg-blue-50 p-4 rounded-lg">
<p class="text-sm text-blue-800">
本API文档提供了NiuMall系统所有后端接口的详细说明。所有接口均返回统一的JSON格式，包含success、message和data字段。
</p>
</div>
</div>
</nav>
</aside>
<!-- 主内容区 -->
<main class="flex-1">
<!-- 认证管理 -->
<section id="auth" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-primary text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<span class="icon" style="background: white; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 15c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm0-2c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm0-10C7.03 3 3 7.03 3 12c0 5.52 3.84 10.74 9 12 5.16-1.26 9-6.48 9-12 0-4.97-4.03-9-9-9zm0 16.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 认证管理
</h2>
<p class="text-blue-100 text-sm mt-1">认证相关接口，用于用户登录获取访问令牌</p>
</div>
<div class="p-6">
<!-- 登录接口 -->
<div class="mb-8 border-l-4 border-primary pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">用户登录</h3>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded font-medium">POST</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/auth/login</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">请求参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">username</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-red-600">是</td>
<td class="px-4 py-2">用户名/手机号/邮箱</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">password</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-red-600">是</td>
<td class="px-4 py-2">密码</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">请求示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"username": "admin", "password": "123456"}</pre>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"success": true, "message": "登录成功", "data": {"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", "token_type": "Bearer", "expires_in": 86400, "user": {"id": 1, "username": "admin", "email": "admin@example.com", "role": "admin", "status": "active"}}}</pre>
</div>
</div>
<div>
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应状态码</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
<div class="bg-green-50 px-3 py-2 rounded-lg flex items-center">
<span class="bg-green-500 text-white text-xs w-6 h-6 flex items-center justify-center rounded-full mr-2">200</span>
<span>登录成功</span>
</div>
<div class="bg-red-50 px-3 py-2 rounded-lg flex items-center">
<span class="bg-red-500 text-white text-xs w-6 h-6 flex items-center justify-center rounded-full mr-2">401</span>
<span>用户名或密码错误</span>
</div>
<div class="bg-yellow-50 px-3 py-2 rounded-lg flex items-center">
<span class="bg-yellow-500 text-white text-xs w-6 h-6 flex items-center justify-center rounded-full mr-2">403</span>
<span>账户已被禁用</span>
</div>
<div class="bg-blue-50 px-3 py-2 rounded-lg flex items-center">
<span class="bg-blue-500 text-white text-xs w-6 h-6 flex items-center justify-center rounded-full mr-2">500</span>
<span>服务器内部错误</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 用户管理 -->
<section id="users" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-secondary text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<span class="icon" style="background: white; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 用户管理
</h2>
<p class="text-green-100 text-sm mt-1">用户相关接口，用于管理系统用户信息</p>
</div>
<div class="p-6">
<!-- 获取用户列表 -->
<div class="mb-8 border-l-4 border-secondary pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">获取用户列表</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/users</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">查询参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">page</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">页码，默认为1</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">pageSize</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">每页条数，默认为20</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">keyword</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">关键词搜索（用户名、邮箱、手机号）</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">user_type</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">用户类型筛选</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">status</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">用户状态筛选</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"success": true, "data": {"items": [{"id": 1, "username": "admin", "email": "admin@example.com", "phone": "13800138000", "user_type": "admin", "status": "active", "createdAt": "2024-01-01T00:00:00Z", "updatedAt": "2024-01-01T00:00:00Z"}], "total": 10, "page": 1, "pageSize": 20, "totalPages": 1}}</pre>
</div>
</div>
</div>
<!-- 获取用户详情 -->
<div class="mb-8 border-l-4 border-secondary pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">获取用户详情</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/users/:id</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">路径参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">id</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-red-600">是</td>
<td class="px-4 py-2">用户ID</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"success": true, "data": {"id": 1, "username": "admin", "email": "admin@example.com", "phone": "13800138000", "user_type": "admin", "status": "active", "createdAt": "2024-01-01T00:00:00Z", "updatedAt": "2024-01-01T00:00:00Z"}}</pre>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 订单管理 -->
<section id="orders" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-warning text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<span class="icon" style="background: white; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 订单管理
</h2>
<p class="text-yellow-100 text-sm mt-1">订单相关接口，用于管理商品订单</p>
</div>
<div class="p-6">
<!-- 获取订单列表 -->
<div class="mb-8 border-l-4 border-warning pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">获取订单列表</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/orders</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">查询参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">page</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">页码，默认为1</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">pageSize</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">每页条数，默认为20</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">orderNo</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">订单号搜索</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">buyerId</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">买方ID筛选</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">supplierId</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">供应商ID筛选</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">status</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">订单状态筛选</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 财务管理 -->
<section id="finance" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-info text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<span class="icon" style="background: white; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 财务管理
</h2>
<p class="text-blue-100 text-sm mt-1">财务相关接口，用于管理结算和支付</p>
</div>
<div class="p-6">
<!-- 获取结算列表 -->
<div class="mb-8 border-l-4 border-info pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">获取结算列表</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/finance/settlements</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">查询参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">page</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">页码，默认为1</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">pageSize</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">每页条数，默认为20</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">keyword</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">关键词搜索</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">paymentStatus</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600">否</td>
<td class="px-4 py-2">支付状态筛选</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 系统接口 -->
<section id="system" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-dark text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<span class="icon" style="background: white; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 系统接口
</h2>
<p class="text-gray-300 text-sm mt-1">系统级接口，用于监控和维护</p>
</div>
<div class="p-6">
<!-- 健康检查 -->
<div class="mb-8 border-l-4 border-dark pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">健康检查</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/health</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"success": true, "message": "服务运行正常", "timestamp": "2025-09-12T04:47:48.209Z", "version": "1.0.0"}</pre>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</div>
<footer class="bg-dark text-gray-400 py-8 mt-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p>NiuMall API 文档 &copy; 2025</p>
</div>
<div class="flex space-x-4">
<a href="#" class="hover:text-white">
<span class="icon" style="background: var(--gray-400); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 帮助中心
</a>
<a href="#" class="hover:text-white">
<span class="icon" style="background: var(--gray-400); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 联系我们
</a>
<a href="#" class="hover:text-white">
<span class="icon" style="background: var(--gray-400); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/></svg>'); mask-size: contain; mask-repeat: no-repeat;"></span> 完整文档
</a>
</div>
</div>
</div>
</footer>
<script src="/static/scripts/docs.js"></script>
</body>
</html>

61
backend/public/scripts/docs.js Normal file
View File

@@ -0,0 +1,61 @@
// 平滑滚动功能
function setupSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
// 使用简单的滚动实现，避免依赖behavior: 'smooth'可能在某些浏览器中不支持
window.scrollTo({
top: targetElement.offsetTop - 20,
behavior: 'auto'
});
}
});
});
}
// 导航高亮功能
function setupNavHighlight() {
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('nav a');
window.addEventListener('scroll', () => {
let currentSection = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.pageYOffset >= (sectionTop - 100)) {
currentSection = section.getAttribute('id');
}
});
navLinks.forEach(link => {
// 移除所有链接的高亮
link.style.backgroundColor = '';
link.style.color = '';
// 为当前部分的链接添加高亮
if (link.getAttribute('href') === `#${currentSection}`) {
link.style.backgroundColor = 'var(--blue-50)';
link.style.color = 'var(--primary)';
}
});
});
}
// 页面加载完成后执行初始化
function init() {
setupSmoothScroll();
setupNavHighlight();
}
// 检查DOM是否已经加载完成
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}

286
backend/routes/auth.js
View File

@@ -7,25 +7,101 @@ const router = express.Router()
// 引入数据库模型
const { ApiUser } = require('../models')
// 登录参数验证
// 引入认证中间件
const { authenticateJWT } = require('../middleware/auth')
/**
* @swagger
* components:
* schemas:
* LoginRequest:
* type: object
* required:
* - username
* - password
* properties:
* username:
* type: string
* description: 用户名
* password:
* type: string
* description: 密码
* LoginResponse:
* type: object
* properties:
* success:
* type: boolean
* message:
* type: string
* token:
* type: string
* user:
* type: object
* properties:
* id:
* type: integer
* username:
* type: string
* email:
* type: string
* user_type:
* type: string
* status:
* type: string
*/
// 从环境变量或配置中获取JWT密钥
const JWT_SECRET = process.env.JWT_SECRET || 'your_jwt_secret_key'
const JWT_EXPIRES_IN = process.env.JWT_EXPIRES_IN || '24h'
// 验证模式
const loginSchema = Joi.object({
username: Joi.string().min(2).max(50).required(),
password: Joi.string().min(6).max(100).required()
username: Joi.string().required(),
password: Joi.string().required()
})
// 生成JWT token
// 生成JWT令牌
const generateToken = (user) => {
return jwt.sign(
{
id: user.id,
username: user.username,
role: user.user_type
email: user.email,
user_type: user.user_type
},
process.env.JWT_SECRET || 'niumall-secret-key',
{ expiresIn: process.env.JWT_EXPIRES_IN || '24h' }
JWT_SECRET,
{
expiresIn: JWT_EXPIRES_IN
}
)
}
/**
* @swagger
* /api/auth/login:
* post:
* summary: 用户登录
* tags: [认证管理]
* requestBody:
* required: true
* content:
* application/json:
* schema:
* $ref: '#/components/schemas/LoginRequest'
* responses:
* 200:
* description: 登录成功
* content:
* application/json:
* schema:
* $ref: '#/components/schemas/LoginResponse'
* 400:
* description: 参数验证失败或用户名密码错误
* 401:
* description: 未授权或用户被禁用
* 500:
* description: 服务器内部错误
*/
// 用户登录
router.post('/login', async (req, res) => {
try {
@@ -38,94 +114,126 @@ router.post('/login', async (req, res) => {
details: error.details[0].message
})
}
const { username, password } = value
// 查找用户
const user = await ApiUser.findOne({
where: {
[require('sequelize').Op.or]: [
{ username: username },
{ phone: username },
[ApiUser.sequelize.Op.or]: [
{ username },
{ email: username }
]
}
});
})
if (!user) {
// 检查用户是否存在以及密码是否正确
if (!user || !(await bcrypt.compare(password, user.password_hash))) {
return res.status(401).json({
success: false,
message: '用户名或密码错误'
})
}
// 验证密码
const isPasswordValid = await bcrypt.compare(password, user.password_hash)
if (!isPasswordValid) {
return res.status(401).json({
success: false,
message: '用户名或密码错误'
})
}
// 检查用户状态
if (user.status !== 'active') {
return res.status(403).json({
return res.status(401).json({
success: false,
message: '账户已被禁用，请联系管理员'
message: '用户账号已被禁用'
})
}
// 生成token
// 生成JWT令牌
const token = generateToken(user)
// 准备返回的用户信息（不包含敏感数据）
const userInfo = {
id: user.id,
username: user.username,
email: user.email,
user_type: user.user_type,
status: user.status
}
res.json({
success: true,
message: '登录成功',
data: {
access_token: token,
token_type: 'Bearer',
expires_in: 86400, // 24小时
user: {
id: user.id,
username: user.username,
email: user.email,
role: user.user_type,
status: user.status
}
}
token,
user: userInfo
})
} catch (error) {
console.error('登录失败:', error)
console.error('用户登录失败:', error)
res.status(500).json({
success: false,
message: '登录失败，请稍后重试'
message: '登录失败，请稍后再试'
})
}
})
/**
* @swagger
* /api/auth/me:
* get:
* summary: 获取当前用户信息
* tags: [认证管理]
* security:
* - bearerAuth: []
* responses:
* 200:
* description: 获取成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* data:
* type: object
* properties:
* id:
* type: integer
* username:
* type: string
* email:
* type: string
* user_type:
* type: string
* status:
* type: string
* createdAt:
* type: string
* format: date-time
* updatedAt:
* type: string
* format: date-time
* 401:
* description: 未授权
* 500:
* description: 服务器内部错误
*/
// 获取当前用户信息
router.get('/me', authenticateToken, async (req, res) => {
router.get('/me', authenticateJWT, async (req, res) => {
try {
const user = await ApiUser.findByPk(req.user.id)
const userId = req.user.id
// 根据ID查找用户
const user = await ApiUser.findByPk(userId, {
attributes: {
exclude: ['password_hash'] // 排除密码哈希等敏感信息
}
})
if (!user) {
return res.status(404).json({
success: false,
message: '用户不存在'
})
}
res.json({
success: true,
data: {
user: {
id: user.id,
username: user.username,
email: user.email,
role: user.user_type,
status: user.status
}
}
data: user
})
} catch (error) {
console.error('获取用户信息失败:', error)
@@ -136,37 +244,49 @@ router.get('/me', authenticateToken, async (req, res) => {
}
})
/**
* @swagger
* /api/auth/logout:
* post:
* summary: 用户登出
* tags: [认证管理]
* security:
* - bearerAuth: []
* responses:
* 200:
* description: 登出成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* message:
* type: string
* 401:
* description: 未授权
* 500:
* description: 服务器内部错误
*/
// 用户登出
router.post('/logout', authenticateToken, (req, res) => {
// 在实际项目中，可以将token加入黑名单
res.json({
success: true,
message: '登出成功'
})
})
// JWT token验证中间件
function authenticateToken(req, res, next) {
const authHeader = req.headers['authorization']
const token = authHeader && authHeader.split(' ')[1]
if (!token) {
return res.status(401).json({
router.post('/logout', authenticateJWT, async (req, res) => {
try {
// 注意：JWT是无状态的，服务器端无法直接使token失效
// 登出操作主要由客户端完成，如删除本地存储的token
// 这里只返回成功信息
res.json({
success: true,
message: '登出成功'
})
} catch (error) {
console.error('用户登出失败:', error)
res.status(500).json({
success: false,
message: '访问令牌缺失'
message: '登出失败，请稍后再试'
})
}
jwt.verify(token, process.env.JWT_SECRET || 'niumall-secret-key', (err, user) => {
if (err) {
return res.status(403).json({
success: false,
message: '访问令牌无效或已过期'
})
}
req.user = user
next()
})
}
})
module.exports = router

860
backend/routes/orders.js
View File

@@ -2,172 +2,318 @@ const express = require('express')
const Joi = require('joi')
const router = express.Router()
// 模拟订单数据
let orders = [
{
id: 1,
orderNo: 'ORD20240101001',
buyerId: 2,
buyerName: '山东养殖场',
supplierId: 3,
supplierName: '河北供应商',
traderId: 1,
traderName: '北京贸易公司',
cattleBreed: '西门塔尔',
cattleCount: 50,
expectedWeight: 25000,
actualWeight: 24800,
unitPrice: 28.5,
totalAmount: 712500,
paidAmount: 200000,
remainingAmount: 512500,
status: 'shipping',
deliveryAddress: '山东省济南市某养殖场',
expectedDeliveryDate: '2024-01-15',
actualDeliveryDate: null,
notes: '优质西门塔尔牛',
createdAt: '2024-01-10T00:00:00Z',
updatedAt: '2024-01-12T00:00:00Z'
},
{
id: 2,
orderNo: 'ORD20240101002',
buyerId: 2,
buyerName: '山东养殖场',
supplierId: 4,
supplierName: '内蒙古牧场',
traderId: 1,
traderName: '北京贸易公司',
cattleBreed: '安格斯',
cattleCount: 30,
expectedWeight: 18000,
actualWeight: 18200,
unitPrice: 30.0,
totalAmount: 540000,
paidAmount: 540000,
remainingAmount: 0,
status: 'completed',
deliveryAddress: '山东省济南市某养殖场',
expectedDeliveryDate: '2024-01-08',
actualDeliveryDate: '2024-01-08',
notes: '',
createdAt: '2024-01-05T00:00:00Z',
updatedAt: '2024-01-08T00:00:00Z'
}
]
// 引入数据库模型
const { Order } = require('../models')
const sequelize = require('sequelize')
/**
* @swagger
* components:
* schemas:
* Order:
* type: object
* properties:
* id:
* type: integer
* description: 订单ID
* buyer_id:
* type: integer
* description: 买方ID
* buyer_name:
* type: string
* description: 买方名称
* supplier_id:
* type: integer
* description: 供应商ID
* supplier_name:
* type: string
* description: 供应商名称
* cow_breed:
* type: string
* description: 牛品种
* quantity:
* type: integer
* description: 数量
* weight:
* type: number
* format: float
* description: 总重量(kg)
* unit_price:
* type: number
* format: float
* description: 单价(元/kg)
* total_amount:
* type: number
* format: float
* description: 总金额(元)
* status:
* type: string
* enum: [pending, confirmed, delivered, completed, cancelled]
* description: 订单状态
* delivery_address:
* type: string
* description: 配送地址
* delivery_date:
* type: string
* format: date
* description: 配送日期
* payment_status:
* type: string
* enum: [unpaid, paid, partially_paid]
* description: 支付状态
* remark:
* type: string
* description: 备注
* createdAt:
* type: string
* format: date-time
* description: 创建时间
* updatedAt:
* type: string
* format: date-time
* description: 更新时间
* CreateOrderRequest:
* type: object
* required:
* - buyer_id
* - supplier_id
* - cow_breed
* - quantity
* - weight
* - unit_price
* - total_amount
* - delivery_address
* - delivery_date
* properties:
* buyer_id:
* type: integer
* description: 买方ID
* buyer_name:
* type: string
* description: 买方名称
* supplier_id:
* type: integer
* description: 供应商ID
* supplier_name:
* type: string
* description: 供应商名称
* cow_breed:
* type: string
* description: 牛品种
* quantity:
* type: integer
* description: 数量
* weight:
* type: number
* format: float
* description: 总重量(kg)
* unit_price:
* type: number
* format: float
* description: 单价(元/kg)
* total_amount:
* type: number
* format: float
* description: 总金额(元)
* delivery_address:
* type: string
* description: 配送地址
* delivery_date:
* type: string
* format: date
* description: 配送日期
* remark:
* type: string
* description: 备注
* UpdateOrderRequest:
* type: object
* properties:
* status:
* type: string
* enum: [pending, confirmed, delivered, completed, cancelled]
* description: 订单状态
* payment_status:
* type: string
* enum: [unpaid, paid, partially_paid]
* description: 支付状态
* delivery_address:
* type: string
* description: 配送地址
* delivery_date:
* type: string
* format: date
* description: 配送日期
* remark:
* type: string
* description: 备注
*/
// 订单状态枚举
const ORDER_STATUS = {
PENDING: 'pending',
CONFIRMED: 'confirmed',
PREPARING: 'preparing',
SHIPPING: 'shipping',
DELIVERED: 'delivered',
ACCEPTED: 'accepted',
COMPLETED: 'completed',
CANCELLED: 'cancelled',
REFUNDED: 'refunded'
PENDING: 'pending', // 待确认
CONFIRMED: 'confirmed', // 已确认
DELIVERED: 'delivered', // 已配送
COMPLETED: 'completed', // 已完成
CANCELLED: 'cancelled' // 已取消
}
// 支付状态枚举
const PAYMENT_STATUS = {
UNPAID: 'unpaid', // 未支付
PAID: 'paid', // 已支付
PARTIALLY_PAID: 'partially_paid' // 部分支付
}
// 验证模式
const createOrderSchema = Joi.object({
buyerId: Joi.number().integer().positive().required(),
supplierId: Joi.number().integer().positive().required(),
traderId: Joi.number().integer().positive(),
cattleBreed: Joi.string().min(1).max(50).required(),
cattleCount: Joi.number().integer().positive().required(),
expectedWeight: Joi.number().positive().required(),
unitPrice: Joi.number().positive().required(),
deliveryAddress: Joi.string().min(1).max(200).required(),
expectedDeliveryDate: Joi.date().iso().required(),
notes: Joi.string().max(500).allow('')
buyer_id: Joi.number().integer().required(),
buyer_name: Joi.string().allow(''),
supplier_id: Joi.number().integer().required(),
supplier_name: Joi.string().allow(''),
cow_breed: Joi.string().required(),
quantity: Joi.number().integer().min(1).required(),
weight: Joi.number().positive().required(),
unit_price: Joi.number().positive().required(),
total_amount: Joi.number().positive().required(),
delivery_address: Joi.string().required(),
delivery_date: Joi.date().required(),
remark: Joi.string().allow('')
})
const updateOrderSchema = Joi.object({
cattleBreed: Joi.string().min(1).max(50),
cattleCount: Joi.number().integer().positive(),
expectedWeight: Joi.number().positive(),
actualWeight: Joi.number().positive(),
unitPrice: Joi.number().positive(),
deliveryAddress: Joi.string().min(1).max(200),
expectedDeliveryDate: Joi.date().iso(),
actualDeliveryDate: Joi.date().iso(),
notes: Joi.string().max(500).allow(''),
status: Joi.string().valid(...Object.values(ORDER_STATUS))
status: Joi.string().valid(...Object.values(ORDER_STATUS)),
payment_status: Joi.string().valid(...Object.values(PAYMENT_STATUS)),
delivery_address: Joi.string(),
delivery_date: Joi.date(),
remark: Joi.string().allow('')
})
/**
* @swagger
* /api/orders:
* get:
* summary: 获取订单列表
* tags: [订单管理]
* security:
* - bearerAuth: []
* parameters:
* - in: query
* name: page
* schema:
* type: integer
* description: 页码，默认为1
* - in: query
* name: pageSize
* schema:
* type: integer
* description: 每页条数，默认为20
* - in: query
* name: keyword
* schema:
* type: string
* description: 关键词搜索（买方名称、供应商名称、牛品种）
* - in: query
* name: status
* schema:
* type: string
* description: 订单状态筛选
* - in: query
* name: payment_status
* schema:
* type: string
* description: 支付状态筛选
* - in: query
* name: start_date
* schema:
* type: string
* format: date
* description: 开始日期筛选
* - in: query
* name: end_date
* schema:
* type: string
* format: date
* description: 结束日期筛选
* responses:
* 200:
* description: 获取成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* data:
* type: object
* properties:
* items:
* type: array
* items:
* $ref: '#/components/schemas/Order'
* total:
* type: integer
* page:
* type: integer
* pageSize:
* type: integer
* totalPages:
* type: integer
* 401:
* description: 未授权
* 500:
* description: 服务器内部错误
*/
// 获取订单列表
router.get('/', (req, res) => {
router.get('/', async (req, res) => {
try {
const {
page = 1,
pageSize = 20,
orderNo,
buyerId,
supplierId,
keyword,
status,
startDate,
endDate
payment_status,
start_date,
end_date
} = req.query
let filteredOrders = [...orders]
// 订单号搜索
if (orderNo) {
filteredOrders = filteredOrders.filter(order =>
order.orderNo.includes(orderNo)
)
// 构建查询条件
const where = {}
if (keyword) {
where[sequelize.Op.or] = [
{ buyer_name: { [sequelize.Op.like]: `%${keyword}%` } },
{ supplier_name: { [sequelize.Op.like]: `%${keyword}%` } },
{ cow_breed: { [sequelize.Op.like]: `%${keyword}%` } }
]
}
if (status) where.status = status
if (payment_status) where.payment_status = payment_status
if (start_date || end_date) {
where.createdAt = {}
if (start_date) where.createdAt[sequelize.Op.gte] = new Date(start_date)
if (end_date) where.createdAt[sequelize.Op.lte] = new Date(end_date)
}
// 买方筛选
if (buyerId) {
filteredOrders = filteredOrders.filter(order =>
order.buyerId === parseInt(buyerId)
)
}
// 供应商筛选
if (supplierId) {
filteredOrders = filteredOrders.filter(order =>
order.supplierId === parseInt(supplierId)
)
}
// 状态筛选
if (status) {
filteredOrders = filteredOrders.filter(order => order.status === status)
}
// 日期范围筛选
if (startDate) {
filteredOrders = filteredOrders.filter(order =>
new Date(order.createdAt) >= new Date(startDate)
)
}
if (endDate) {
filteredOrders = filteredOrders.filter(order =>
new Date(order.createdAt) <= new Date(endDate)
)
}
// 分页
const total = filteredOrders.length
const startIndex = (page - 1) * pageSize
const endIndex = startIndex + parseInt(pageSize)
const paginatedOrders = filteredOrders.slice(startIndex, endIndex)
// 分页查询
const result = await Order.findAndCountAll({
where,
limit: parseInt(pageSize),
offset: (parseInt(page) - 1) * parseInt(pageSize),
order: [['createdAt', 'DESC']]
})
res.json({
success: true,
data: {
items: paginatedOrders,
total: total,
items: result.rows,
total: result.count,
page: parseInt(page),
pageSize: parseInt(pageSize),
totalPages: Math.ceil(total / pageSize)
totalPages: Math.ceil(result.count / parseInt(pageSize))
}
})
} catch (error) {
console.error('获取订单列表失败:', error)
res.status(500).json({
success: false,
message: '获取订单列表失败'
@@ -175,11 +321,46 @@ router.get('/', (req, res) => {
}
})
/**
* @swagger
* /api/orders/{id}:
* get:
* summary: 获取订单详情
* tags: [订单管理]
* security:
* - bearerAuth: []
* parameters:
* - in: path
* name: id
* schema:
* type: integer
* required: true
* description: 订单ID
* responses:
* 200:
* description: 获取成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* data:
* $ref: '#/components/schemas/Order'
* 401:
* description: 未授权
* 404:
* description: 订单不存在
* 500:
* description: 服务器内部错误
*/
// 获取订单详情
router.get('/:id', (req, res) => {
router.get('/:id', async (req, res) => {
try {
const { id } = req.params
const order = orders.find(o => o.id === parseInt(id))
const order = await Order.findByPk(id)
if (!order) {
return res.status(404).json({
@@ -193,6 +374,7 @@ router.get('/:id', (req, res) => {
data: order
})
} catch (error) {
console.error('获取订单详情失败:', error)
res.status(500).json({
success: false,
message: '获取订单详情失败'
@@ -200,10 +382,44 @@ router.get('/:id', (req, res) => {
}
})
// 创建订单
router.post('/', (req, res) => {
/**
* @swagger
* /api/orders:
* post:
* summary: 创建新订单
* tags: [订单管理]
* security:
* - bearerAuth: []
* requestBody:
* required: true
* content:
* application/json:
* schema:
* $ref: '#/components/schemas/CreateOrderRequest'
* responses:
* 201:
* description: 创建成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* message:
* type: string
* data:
* $ref: '#/components/schemas/Order'
* 400:
* description: 参数验证失败
* 401:
* description: 未授权
* 500:
* description: 服务器内部错误
*/
// 创建新订单
router.post('/', async (req, res) => {
try {
// 参数验证
const { error, value } = createOrderSchema.validate(req.body)
if (error) {
return res.status(400).json({
@@ -213,60 +429,20 @@ router.post('/', (req, res) => {
})
}
const {
buyerId,
supplierId,
traderId,
cattleBreed,
cattleCount,
expectedWeight,
unitPrice,
deliveryAddress,
expectedDeliveryDate,
notes
} = value
// 生成订单号
const orderNo = `ORD${new Date().toISOString().slice(0, 10).replace(/-/g, '')}${String(orders.length + 1).padStart(3, '0')}`
// 计算总金额
const totalAmount = expectedWeight * unitPrice
// 创建新订单
const newOrder = {
id: Math.max(...orders.map(o => o.id)) + 1,
orderNo,
buyerId,
buyerName: '买方名称', // 实际项目中需要从数据库获取
supplierId,
supplierName: '供应商名称', // 实际项目中需要从数据库获取
traderId: traderId || null,
traderName: traderId ? '贸易商名称' : null,
cattleBreed,
cattleCount,
expectedWeight,
actualWeight: null,
unitPrice,
totalAmount,
paidAmount: 0,
remainingAmount: totalAmount,
// 创建订单，默认状态为待确认
const order = await Order.create({
...value,
status: ORDER_STATUS.PENDING,
deliveryAddress,
expectedDeliveryDate,
actualDeliveryDate: null,
notes: notes || '',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString()
}
orders.push(newOrder)
payment_status: PAYMENT_STATUS.UNPAID
})
res.status(201).json({
success: true,
message: '订单创建成功',
data: newOrder
data: order
})
} catch (error) {
console.error('创建订单失败:', error)
res.status(500).json({
success: false,
message: '创建订单失败'
@@ -274,20 +450,55 @@ router.post('/', (req, res) => {
}
})
// 更新订单
router.put('/:id', (req, res) => {
/**
* @swagger
* /api/orders/{id}:
* put:
* summary: 更新订单信息
* tags: [订单管理]
* security:
* - bearerAuth: []
* parameters:
* - in: path
* name: id
* schema:
* type: integer
* required: true
* description: 订单ID
* requestBody:
* required: true
* content:
* application/json:
* schema:
* $ref: '#/components/schemas/UpdateOrderRequest'
* responses:
* 200:
* description: 更新成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* message:
* type: string
* data:
* $ref: '#/components/schemas/Order'
* 400:
* description: 参数验证失败
* 401:
* description: 未授权
* 404:
* description: 订单不存在
* 500:
* description: 服务器内部错误
*/
// 更新订单信息
router.put('/:id', async (req, res) => {
try {
const { id } = req.params
const orderIndex = orders.findIndex(o => o.id === parseInt(id))
if (orderIndex === -1) {
return res.status(404).json({
success: false,
message: '订单不存在'
})
}
// 参数验证
const { error, value } = updateOrderSchema.validate(req.body)
if (error) {
return res.status(400).json({
@@ -297,25 +508,26 @@ router.put('/:id', (req, res) => {
})
}
// 更新订单信息
orders[orderIndex] = {
...orders[orderIndex],
...value,
updatedAt: new Date().toISOString()
// 查找订单
const order = await Order.findByPk(id)
if (!order) {
return res.status(404).json({
success: false,
message: '订单不存在'
})
}
// 如果更新了实际重量，重新计算总金额
if (value.actualWeight && orders[orderIndex].unitPrice) {
orders[orderIndex].totalAmount = value.actualWeight * orders[orderIndex].unitPrice
orders[orderIndex].remainingAmount = orders[orderIndex].totalAmount - orders[orderIndex].paidAmount
}
// 更新订单信息
await order.update(value)
res.json({
success: true,
message: '订单更新成功',
data: orders[orderIndex]
data: order
})
} catch (error) {
console.error('更新订单失败:', error)
res.status(500).json({
success: false,
message: '更新订单失败'
@@ -323,26 +535,62 @@ router.put('/:id', (req, res) => {
}
})
/**
* @swagger
* /api/orders/{id}:
* delete:
* summary: 删除订单
* tags: [订单管理]
* security:
* - bearerAuth: []
* parameters:
* - in: path
* name: id
* schema:
* type: integer
* required: true
* description: 订单ID
* responses:
* 200:
* description: 删除成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* message:
* type: string
* 401:
* description: 未授权
* 404:
* description: 订单不存在
* 500:
* description: 服务器内部错误
*/
// 删除订单
router.delete('/:id', (req, res) => {
router.delete('/:id', async (req, res) => {
try {
const { id } = req.params
const orderIndex = orders.findIndex(o => o.id === parseInt(id))
if (orderIndex === -1) {
const order = await Order.findByPk(id)
if (!order) {
return res.status(404).json({
success: false,
message: '订单不存在'
})
}
orders.splice(orderIndex, 1)
await order.destroy()
res.json({
success: true,
message: '订单删除成功'
})
} catch (error) {
console.error('删除订单失败:', error)
res.status(500).json({
success: false,
message: '删除订单失败'
@@ -350,190 +598,4 @@ router.delete('/:id', (req, res) => {
}
})
// 确认订单
router.put('/:id/confirm', (req, res) => {
try {
const { id } = req.params
const orderIndex = orders.findIndex(o => o.id === parseInt(id))
if (orderIndex === -1) {
return res.status(404).json({
success: false,
message: '订单不存在'
})
}
if (orders[orderIndex].status !== ORDER_STATUS.PENDING) {
return res.status(400).json({
success: false,
message: '只有待确认的订单才能确认'
})
}
orders[orderIndex].status = ORDER_STATUS.CONFIRMED
orders[orderIndex].updatedAt = new Date().toISOString()
res.json({
success: true,
message: '订单确认成功',
data: orders[orderIndex]
})
} catch (error) {
res.status(500).json({
success: false,
message: '确认订单失败'
})
}
})
// 取消订单
router.put('/:id/cancel', (req, res) => {
try {
const { id } = req.params
const { reason } = req.body
const orderIndex = orders.findIndex(o => o.id === parseInt(id))
if (orderIndex === -1) {
return res.status(404).json({
success: false,
message: '订单不存在'
})
}
orders[orderIndex].status = ORDER_STATUS.CANCELLED
orders[orderIndex].notes = reason ? `取消原因: ${reason}` : '订单已取消'
orders[orderIndex].updatedAt = new Date().toISOString()
res.json({
success: true,
message: '订单取消成功',
data: orders[orderIndex]
})
} catch (error) {
res.status(500).json({
success: false,
message: '取消订单失败'
})
}
})
// 订单验收
router.put('/:id/accept', (req, res) => {
try {
const { id } = req.params
const { actualWeight, notes } = req.body
const orderIndex = orders.findIndex(o => o.id === parseInt(id))
if (orderIndex === -1) {
return res.status(404).json({
success: false,
message: '订单不存在'
})
}
if (!actualWeight || actualWeight <= 0) {
return res.status(400).json({
success: false,
message: '请提供有效的实际重量'
})
}
orders[orderIndex].status = ORDER_STATUS.ACCEPTED
orders[orderIndex].actualWeight = actualWeight
orders[orderIndex].totalAmount = actualWeight * orders[orderIndex].unitPrice
orders[orderIndex].remainingAmount = orders[orderIndex].totalAmount - orders[orderIndex].paidAmount
orders[orderIndex].actualDeliveryDate = new Date().toISOString()
if (notes) {
orders[orderIndex].notes = notes
}
orders[orderIndex].updatedAt = new Date().toISOString()
res.json({
success: true,
message: '订单验收成功',
data: orders[orderIndex]
})
} catch (error) {
res.status(500).json({
success: false,
message: '订单验收失败'
})
}
})
// 完成订单
router.put('/:id/complete', (req, res) => {
try {
const { id } = req.params
const orderIndex = orders.findIndex(o => o.id === parseInt(id))
if (orderIndex === -1) {
return res.status(404).json({
success: false,
message: '订单不存在'
})
}
orders[orderIndex].status = ORDER_STATUS.COMPLETED
orders[orderIndex].paidAmount = orders[orderIndex].totalAmount
orders[orderIndex].remainingAmount = 0
orders[orderIndex].updatedAt = new Date().toISOString()
res.json({
success: true,
message: '订单完成成功',
data: orders[orderIndex]
})
} catch (error) {
res.status(500).json({
success: false,
message: '完成订单失败'
})
}
})
// 获取订单统计数据
router.get('/statistics', (req, res) => {
try {
const { startDate, endDate } = req.query
let filteredOrders = [...orders]
if (startDate) {
filteredOrders = filteredOrders.filter(order =>
new Date(order.createdAt) >= new Date(startDate)
)
}
if (endDate) {
filteredOrders = filteredOrders.filter(order =>
new Date(order.createdAt) <= new Date(endDate)
)
}
const statistics = {
totalOrders: filteredOrders.length,
completedOrders: filteredOrders.filter(o => o.status === ORDER_STATUS.COMPLETED).length,
pendingOrders: filteredOrders.filter(o => o.status === ORDER_STATUS.PENDING).length,
cancelledOrders: filteredOrders.filter(o => o.status === ORDER_STATUS.CANCELLED).length,
totalAmount: filteredOrders.reduce((sum, order) => sum + order.totalAmount, 0),
totalCattle: filteredOrders.reduce((sum, order) => sum + order.cattleCount, 0),
statusDistribution: Object.values(ORDER_STATUS).reduce((acc, status) => {
acc[status] = filteredOrders.filter(o => o.status === status).length
return acc
}, {})
}
res.json({
success: true,
data: statistics
})
} catch (error) {
res.status(500).json({
success: false,
message: '获取订单统计失败'
})
}
})
module.exports = router

472
backend/routes/users.js
View File

@@ -7,24 +7,176 @@ const router = express.Router()
const { ApiUser } = require('../models')
const sequelize = require('sequelize')
/**
* @swagger
* components:
* schemas:
* User:
* type: object
* properties:
* id:
* type: integer
* description: 用户ID
* username:
* type: string
* description: 用户名
* email:
* type: string
* format: email
* description: 邮箱
* phone:
* type: string
* description: 手机号
* user_type:
* type: string
* enum: [admin, buyer, supplier, trader]
* description: 用户类型
* status:
* type: string
* enum: [active, inactive, suspended]
* description: 用户状态
* createdAt:
* type: string
* format: date-time
* description: 创建时间
* updatedAt:
* type: string
* format: date-time
* description: 更新时间
* CreateUserRequest:
* type: object
* required:
* - username
* - email
* - password
* - user_type
* properties:
* username:
* type: string
* description: 用户名
* email:
* type: string
* format: email
* description: 邮箱
* phone:
* type: string
* description: 手机号
* password:
* type: string
* description: 密码
* user_type:
* type: string
* enum: [admin, buyer, supplier, trader]
* description: 用户类型
* status:
* type: string
* enum: [active, inactive, suspended]
* description: 用户状态
* UpdateUserRequest:
* type: object
* properties:
* username:
* type: string
* description: 用户名
* email:
* type: string
* format: email
* description: 邮箱
* phone:
* type: string
* description: 手机号
* user_type:
* type: string
* enum: [admin, buyer, supplier, trader]
* description: 用户类型
* status:
* type: string
* enum: [active, inactive, suspended]
* description: 用户状态
*/
// 验证模式
const createUserSchema = Joi.object({
username: Joi.string().min(2).max(50).required(),
email: Joi.string().email().required(),
phone: Joi.string().pattern(/^1[3-9]\d{9}$/).allow(''),
password: Joi.string().min(6).max(100).required(),
user_type: Joi.string().valid('client', 'supplier', 'driver', 'staff', 'admin').required(),
status: Joi.string().valid('active', 'inactive', 'locked').default('active')
user_type: Joi.string().valid('admin', 'buyer', 'supplier', 'trader').required(),
status: Joi.string().valid('active', 'inactive', 'suspended').default('active')
})
const updateUserSchema = Joi.object({
username: Joi.string().min(2).max(50),
email: Joi.string().email(),
phone: Joi.string().pattern(/^1[3-9]\d{9}$/).allow(''),
user_type: Joi.string().valid('client', 'supplier', 'driver', 'staff', 'admin'),
status: Joi.string().valid('active', 'inactive', 'locked')
user_type: Joi.string().valid('admin', 'buyer', 'supplier', 'trader'),
status: Joi.string().valid('active', 'inactive', 'suspended')
})
/**
* @swagger
* /api/users:
* get:
* summary: 获取用户列表
* tags: [用户管理]
* security:
* - bearerAuth: []
* parameters:
* - in: query
* name: page
* schema:
* type: integer
* description: 页码，默认为1
* - in: query
* name: pageSize
* schema:
* type: integer
* description: 每页条数，默认为20
* - in: query
* name: keyword
* schema:
* type: string
* description: 关键词搜索（用户名、邮箱、手机号）
* - in: query
* name: user_type
* schema:
* type: string
* description: 用户类型筛选
* - in: query
* name: status
* schema:
* type: string
* description: 用户状态筛选
* responses:
* 200:
* description: 获取成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* data:
* type: object
* properties:
* items:
* type: array
* items:
* $ref: '#/components/schemas/User'
* total:
* type: integer
* page:
* type: integer
* pageSize:
* type: integer
* totalPages:
* type: integer
* 401:
* description: 未授权
* 500:
* description: 服务器内部错误
*/
// 获取用户列表
router.get('/', async (req, res) => {
try {
@@ -69,10 +221,45 @@ router.get('/', async (req, res) => {
}
})
/**
* @swagger
* /api/users/{id}:
* get:
* summary: 获取用户详情
* tags: [用户管理]
* security:
* - bearerAuth: []
* parameters:
* - in: path
* name: id
* schema:
* type: integer
* required: true
* description: 用户ID
* responses:
* 200:
* description: 获取成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* data:
* $ref: '#/components/schemas/User'
* 401:
* description: 未授权
* 404:
* description: 用户不存在
* 500:
* description: 服务器内部错误
*/
// 获取用户详情
router.get('/:id', async (req, res) => {
try {
const { id } = req.params
const user = await ApiUser.findByPk(id)
if (!user) {
@@ -95,10 +282,44 @@ router.get('/:id', async (req, res) => {
}
})
// 创建用户
/**
* @swagger
* /api/users:
* post:
* summary: 创建新用户
* tags: [用户管理]
* security:
* - bearerAuth: []
* requestBody:
* required: true
* content:
* application/json:
* schema:
* $ref: '#/components/schemas/CreateUserRequest'
* responses:
* 201:
* description: 创建成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* message:
* type: string
* data:
* $ref: '#/components/schemas/User'
* 400:
* description: 参数验证失败
* 401:
* description: 未授权
* 500:
* description: 服务器内部错误
*/
// 创建新用户
router.post('/', async (req, res) => {
try {
// 参数验证
const { error, value } = createUserSchema.validate(req.body)
if (error) {
return res.status(400).json({
@@ -110,13 +331,12 @@ router.post('/', async (req, res) => {
const { username, email, phone, password, user_type, status } = value
// 检查用户名是否已存在
// 检查用户名、邮箱是否已存在
const existingUser = await ApiUser.findOne({
where: {
[sequelize.Op.or]: [
{ username: username },
{ email: email },
{ phone: phone }
{ username },
{ email }
]
}
})
@@ -124,28 +344,31 @@ router.post('/', async (req, res) => {
if (existingUser) {
return res.status(400).json({
success: false,
message: '用户名、邮箱或手机号已存在'
message: '用户名或邮箱已被使用'
})
}
// 密码加密
const saltRounds = 10
const password_hash = await bcrypt.hash(password, saltRounds)
const hashedPassword = await bcrypt.hash(password, 10)
// 创建新用户
const newUser = await ApiUser.create({
// 创建用户
const user = await ApiUser.create({
username,
email,
phone: phone || '',
password_hash,
phone,
password_hash: hashedPassword,
user_type,
status,
status
})
// 移除密码哈希，避免返回敏感信息
const userData = user.toJSON()
delete userData.password_hash
res.status(201).json({
success: true,
message: '用户创建成功',
data: newUser
data: userData
})
} catch (error) {
console.error('创建用户失败:', error)
@@ -156,20 +379,55 @@ router.post('/', async (req, res) => {
}
})
// 更新用户
/**
* @swagger
* /api/users/{id}:
* put:
* summary: 更新用户信息
* tags: [用户管理]
* security:
* - bearerAuth: []
* parameters:
* - in: path
* name: id
* schema:
* type: integer
* required: true
* description: 用户ID
* requestBody:
* required: true
* content:
* application/json:
* schema:
* $ref: '#/components/schemas/UpdateUserRequest'
* responses:
* 200:
* description: 更新成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* message:
* type: string
* data:
* $ref: '#/components/schemas/User'
* 400:
* description: 参数验证失败
* 401:
* description: 未授权
* 404:
* description: 用户不存在
* 500:
* description: 服务器内部错误
*/
// 更新用户信息
router.put('/:id', async (req, res) => {
try {
const { id } = req.params
const user = await ApiUser.findByPk(id)
if (!user) {
return res.status(404).json({
success: false,
message: '用户不存在'
})
}
// 参数验证
const { error, value } = updateUserSchema.validate(req.body)
if (error) {
return res.status(400).json({
@@ -179,6 +437,16 @@ router.put('/:id', async (req, res) => {
})
}
// 查找用户
const user = await ApiUser.findByPk(id)
if (!user) {
return res.status(404).json({
success: false,
message: '用户不存在'
})
}
// 更新用户信息
await user.update(value)
@@ -196,10 +464,45 @@ router.put('/:id', async (req, res) => {
}
})
/**
* @swagger
* /api/users/{id}:
* delete:
* summary: 删除用户
* tags: [用户管理]
* security:
* - bearerAuth: []
* parameters:
* - in: path
* name: id
* schema:
* type: integer
* required: true
* description: 用户ID
* responses:
* 200:
* description: 删除成功
* content:
* application/json:
* schema:
* type: object
* properties:
* success:
* type: boolean
* message:
* type: string
* 401:
* description: 未授权
* 404:
* description: 用户不存在
* 500:
* description: 服务器内部错误
*/
// 删除用户
router.delete('/:id', async (req, res) => {
try {
const { id } = req.params
const user = await ApiUser.findByPk(id)
if (!user) {
@@ -209,6 +512,8 @@ router.delete('/:id', async (req, res) => {
})
}
// 软删除或永久删除
// 如果需要软删除，可以改为更新status为'inactive'
await user.destroy()
res.json({
@@ -224,113 +529,4 @@ router.delete('/:id', async (req, res) => {
}
})
// 批量删除用户
router.delete('/batch', async (req, res) => {
try {
const { ids } = req.body
if (!Array.isArray(ids) || ids.length === 0) {
return res.status(400).json({
success: false,
message: '请提供有效的用户ID列表'
})
}
await ApiUser.destroy({
where: {
id: ids
}
})
res.json({
success: true,
message: `成功删除 ${ids.length} 个用户`
})
} catch (error) {
console.error('批量删除用户失败:', error)
res.status(500).json({
success: false,
message: '批量删除用户失败'
})
}
})
// 重置用户密码
router.put('/:id/password', async (req, res) => {
try {
const { id } = req.params
const { password } = req.body
const user = await ApiUser.findByPk(id)
if (!user) {
return res.status(404).json({
success: false,
message: '用户不存在'
})
}
if (!password || password.length < 6) {
return res.status(400).json({
success: false,
message: '密码长度不能少于6位'
})
}
// 密码加密
const saltRounds = 10
const password_hash = await bcrypt.hash(password, saltRounds)
// 更新密码
await user.update({ password_hash })
res.json({
success: true,
message: '密码重置成功'
})
} catch (error) {
console.error('重置密码失败:', error)
res.status(500).json({
success: false,
message: '重置密码失败'
})
}
})
// 更新用户状态
router.put('/:id/status', async (req, res) => {
try {
const { id } = req.params
const { status } = req.body
const user = await ApiUser.findByPk(id)
if (!user) {
return res.status(404).json({
success: false,
message: '用户不存在'
})
}
if (!['active', 'inactive', 'locked'].includes(status)) {
return res.status(400).json({
success: false,
message: '无效的用户状态'
})
}
await user.update({ status })
res.json({
success: true,
message: '用户状态更新成功',
data: user
})
} catch (error) {
console.error('更新用户状态失败:', error)
res.status(500).json({
success: false,
message: '更新用户状态失败'
})
}
})
module.exports = router

47
up_website.sh Executable file
View File

@@ -0,0 +1,47 @@
#!/bin/bash
# 配置参数
LOCAL_DIR="/Users/aiotagro/vue/niumall/website"
REMOTE_USER="root"
REMOTE_HOST="49.51.70.206"
REMOTE_DIR="/data/website/niumall"
REMOTE_PASSWORD="Aiotjkl$7kl6756"
# 检查本地目录是否存在
if [ ! -d "$LOCAL_DIR" ]; then
echo "错误：本地目录 $LOCAL_DIR 不存在！"
exit 1
fi
# 使用标准 rsync 命令（需要手动输入密码）
echo "开始上传文件到远程服务器..."
echo "注意：请在提示时手动输入远程服务器密码：$REMOTE_PASSWORD"
echo "\n正在连接到 $REMOTE_USER@$REMOTE_HOST..."
# 使用基本的rsync命令，让用户手动输入密码
rsync -avz --progress --delete "$LOCAL_DIR/" "$REMOTE_USER@$REMOTE_HOST:$REMOTE_DIR/"
if [ $? -eq 0 ]; then
echo "上传完成！"
echo "\n======================================="
echo "提示：为了避免每次输入密码，建议设置SSH密钥认证"
echo "======================================="
echo "\n完整的SSH密钥配置步骤："
echo "\n1. 生成SSH密钥对（按提示操作，默认选项即可）："
echo " ssh-keygen -t rsa -b 4096"
echo "\n2. 生成完成后，将公钥复制到远程服务器："
echo " ssh-copy-id -i ~/.ssh/id_rsa.pub $REMOTE_USER@$REMOTE_HOST"
echo " （如果提示'No identities found'，请使用上面的完整命令）"
echo "\n3. 测试免密码登录："
echo " ssh $REMOTE_USER@$REMOTE_HOST"
echo "\n配置完成后，后续运行此脚本将不再需要输入密码！"
else
echo "上传失败！请检查网络连接、服务器配置和密码是否正确。"
echo "\n可能的解决方案："
echo "1. 确保远程服务器IP地址正确：$REMOTE_HOST"
echo "2. 手动创建远程目录（如果不存在）："
echo " ssh $REMOTE_USER@$REMOTE_HOST 'mkdir -p $REMOTE_DIR'"
echo "3. 确保root用户有权限访问该目录"
echo "4. 检查防火墙设置，确保SSH端口（22）已开放"
exit 1
fi

289
website/about.html
View File

@@ -5,6 +5,23 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于我们 - 活牛采购智能数字化系统</title>
<meta name="description" content="了解活牛采购智能数字化系统的公司背景、团队实力、发展历程和企业文化，我们致力于为养殖行业提供专业的数字化采购解决方案。">
<meta name="keywords" content="活牛采购系统,公司介绍,团队实力,发展历程,企业文化,畜牧行业,数字化转型,科技创新">
<!-- 结构化数据 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "活牛采购智能数字化系统",
"description": "了解活牛采购智能数字化系统的公司背景、团队实力、发展历程和企业文化，我们致力于为养殖行业提供专业的数字化采购解决方案。",
"url": "https://www.niumall.com",
"logo": "https://www.niumall.com/images/logo.png",
"sameAs": [
"https://weibo.com/niumall",
"https://linkedin.com/company/niumall"
]
}
</script>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
@@ -21,11 +38,20 @@
<!-- 导航栏 -->
<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">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<div class="logo-container me-2">
<i class="fas fa-cow text-primary fs-2"></i>
</div>
<div class="brand-text">
<div class="brand-name fw-bold">NiuMall</div>
<div class="brand-subtitle">活牛采购智能系统</div>
</div>
</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">
@@ -68,10 +94,10 @@
</div>
</nav>
<!-- 关于我们 -->
<!-- 关于我们英雄区域 -->
<section class="py-5">
<div class="container">
<div class="row align-items-center mb-5">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-5 fw-bold mb-4">关于我们</h1>
<p class="lead">我们是一家专注于畜牧行业数字化转型的科技公司，致力于为养殖企业提供专业的采购管理解决方案。</p>
@@ -92,30 +118,30 @@
</div>
</section>
<!-- 公司使命 -->
<!-- 公司使命和价值观 -->
<section class="py-5 bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<h2 class="display-6 mb-4">我们的使命</h2>
<h2 class="display-6 mb-4">我们的使命和价值观</h2>
<p class="lead">通过技术创新推动畜牧行业数字化转型，提升养殖企业采购效率，降低经营风险，助力行业高质量发展。</p>
<div class="row g-4 mt-4">
<div class="col-md-4">
<div class="feature-icon mx-auto mb-3">
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
<i class="fas fa-bullseye"></i>
</div>
<h5>专注行业</h5>
<p class="text-muted">深耕畜牧行业，深刻理解行业特点和需求</p>
</div>
<div class="col-md-4">
<div class="feature-icon mx-auto mb-3">
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
<i class="fas fa-lightbulb"></i>
</div>
<h5>技术创新</h5>
<p class="text-muted">运用前沿技术，打造智能化解决方案</p>
</div>
<div class="col-md-4">
<div class="feature-icon mx-auto mb-3">
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
<i class="fas fa-hands-helping"></i>
</div>
<h5>客户至上</h5>
@@ -127,19 +153,19 @@
</div>
</section>
<!-- 发展历程 -->
<!-- 发展历程和里程碑 -->
<section class="py-5">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">发展历程</h2>
<p class="text-muted">我们的发展足迹</p>
<h2 class="display-6 mb-3">发展历程和里程碑</h2>
<p class="text-muted">我们的发展足迹和重要时刻</p>
</div>
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="timeline">
<div class="timeline-item">
<div class="timeline-icon">
<div class="timeline-icon bg-success">
<i class="fas fa-seedling"></i>
</div>
<div class="timeline-content">
@@ -149,7 +175,7 @@
</div>
<div class="timeline-item">
<div class="timeline-icon">
<div class="timeline-icon bg-primary">
<i class="fas fa-laptop-code"></i>
</div>
<div class="timeline-content">
@@ -159,7 +185,7 @@
</div>
<div class="timeline-item">
<div class="timeline-icon">
<div class="timeline-icon bg-warning">
<i class="fas fa-users"></i>
</div>
<div class="timeline-content">
@@ -169,7 +195,7 @@
</div>
<div class="timeline-item">
<div class="timeline-icon">
<div class="timeline-icon bg-info">
<i class="fas fa-cloud"></i>
</div>
<div class="timeline-content">
@@ -179,7 +205,7 @@
</div>
<div class="timeline-item">
<div class="timeline-icon">
<div class="timeline-icon bg-danger">
<i class="fas fa-award"></i>
</div>
<div class="timeline-content">
@@ -189,7 +215,7 @@
</div>
<div class="timeline-item">
<div class="timeline-icon">
<div class="timeline-icon bg-success">
<i class="fas fa-rocket"></i>
</div>
<div class="timeline-content">
@@ -197,104 +223,214 @@
<p>发布V3.0版本，引入AI智能采购建议功能</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon bg-primary">
<i class="fas fa-trophy"></i>
</div>
<div class="timeline-content">
<h5>2024年</h5>
<p>获得ISO 9001质量管理体系认证，服务客户突破1000家</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 团队介绍 -->
<section class="py-5 bg-dark">
<!-- 核心团队和专家资质 -->
<section class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">核心团队</h2>
<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 text-center border-0">
<div class="card text-center h-100 border-0 shadow-sm">
<img src="images/team1.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="CEO" style="width: 150px; height: 150px; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">张伟</h5>
<p class="text-muted">创始人兼CEO</p>
<p class="card-text">拥有15年畜牧行业经验，对行业痛点有深刻理解</p>
<p class="text-primary">创始人兼CEO</p>
<p class="card-text">拥有15年畜牧行业经验，对行业痛点有深刻理解，曾任职于国内知名畜牧企业担任采购总监。</p>
<div class="mt-3">
<span class="badge bg-secondary me-1">畜牧专家</span>
<span class="badge bg-secondary">数字化转型顾问</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card text-center h-100 border-0 shadow-sm">
<img src="images/team2.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="CTO" style="width: 150px; height: 150px; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">李明</h5>
<p class="text-muted">联合创始人兼CTO</p>
<p class="card-text">资深软件架构师，主导系统技术架构设计</p>
<p class="text-primary">联合创始人兼CTO</p>
<p class="card-text">资深软件架构师，10年企业级软件开发经验，主导系统技术架构设计，拥有多项技术专利。</p>
<div class="mt-3">
<span class="badge bg-secondary me-1">系统架构师</span>
<span class="badge bg-secondary">云计算专家</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card text-center h-100 border-0 shadow-sm">
<img src="images/team3.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="产品经理" style="width: 150px; height: 150px; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">王芳</h5>
<p class="text-muted">产品总监</p>
<p class="card-text">专注于用户体验设计，确保产品易用性</p>
<p class="text-primary">产品总监</p>
<p class="card-text">专注于用户体验设计，确保产品易用性，拥有丰富的B2B产品设计经验，曾获多项设计奖项。</p>
<div class="mt-3">
<span class="badge bg-secondary me-1">用户体验专家</span>
<span class="badge bg-secondary">产品经理认证</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<div class="card text-center h-100 border-0 shadow-sm">
<img src="images/team4.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="客户成功总监" style="width: 150px; height: 150px; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">刘强</h5>
<p class="text-muted">客户成功总监</p>
<p class="card-text">负责客户实施和成功交付，确保客户价值实现</p>
<p class="text-primary">客户成功总监</p>
<p class="card-text">负责客户实施和成功交付，确保客户价值实现，拥有丰富的项目管理和客户成功经验。</p>
<div class="mt-3">
<span class="badge bg-secondary me-1">PMP认证</span>
<span class="badge bg-secondary">客户成功专家</span>
</div>
</div>
</div>
</div>
</div>
<!-- 专家顾问团队 -->
<div class="row mt-5">
<div class="col-12">
<div class="text-center">
<h3 class="mb-4">专家顾问团队</h3>
<div class="row g-4">
<div class="col-md-4">
<div class="card border-0">
<div class="card-body text-center">
<h5>中国农业大学畜牧专家</h5>
<p class="text-muted">提供行业指导和技术支持</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="card-body text-center">
<h5>数字化转型研究院</h5>
<p class="text-muted">提供数字化转型战略咨询</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="card-body text-center">
<h5>信息安全认证机构</h5>
<p class="text-muted">提供信息安全合规指导</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 资质认证 -->
<section class="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-3 col-6">
<div class="card border-0 text-center p-4 h-100">
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-3 mx-auto">
<i class="fas fa-certificate"></i>
</div>
<h5>ISO 9001</h5>
<p class="text-muted small">质量管理体系认证</p>
</div>
</div>
<div class="col-md-3 col-6">
<div class="card border-0 text-center p-4 h-100">
<div class="feature-icon bg-success bg-opacity-10 text-success mb-3 mx-auto">
<i class="fas fa-shield-alt"></i>
</div>
<h5>信息安全</h5>
<p class="text-muted small">三级等保认证</p>
</div>
</div>
<div class="col-md-3 col-6">
<div class="card border-0 text-center p-4 h-100">
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-3 mx-auto">
<i class="fas fa-award"></i>
</div>
<h5>行业奖项</h5>
<p class="text-muted small">畜牧科技创新奖</p>
</div>
</div>
<div class="col-md-3 col-6">
<div class="card border-0 text-center p-4 h-100">
<div class="feature-icon bg-info bg-opacity-10 text-info mb-3 mx-auto">
<i class="fas fa-cloud"></i>
</div>
<h5>云服务认证</h5>
<p class="text-muted small">阿里云生态伙伴</p>
</div>
</div>
</div>
</div>
</section>
<!-- 合作伙伴 -->
<section class="py-5">
<section class="py-5 bg-dark">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">合作伙伴</h2>
<h2 class="display-6 mb-3 text-white">合作伙伴</h2>
<p class="text-muted">我们与行业领先企业建立战略合作关系</p>
</div>
<div class="row g-4">
<div class="col-6 col-md-4 col-lg-2">
<div class="partner-logo text-center p-4">
<div class="partner-logo text-center p-4 bg-light rounded">
<img src="images/partner1.png" alt="合作伙伴1" class="img-fluid" style="max-height: 60px;">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="partner-logo text-center p-4">
<div class="partner-logo text-center p-4 bg-light rounded">
<img src="images/partner2.png" alt="合作伙伴2" class="img-fluid" style="max-height: 60px;">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="partner-logo text-center p-4">
<div class="partner-logo text-center p-4 bg-light rounded">
<img src="images/partner3.png" alt="合作伙伴3" class="img-fluid" style="max-height: 60px;">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="partner-logo text-center p-4">
<div class="partner-logo text-center p-4 bg-light rounded">
<img src="images/partner4.png" alt="合作伙伴4" class="img-fluid" style="max-height: 60px;">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="partner-logo text-center p-4">
<div class="partner-logo text-center p-4 bg-light rounded">
<img src="images/partner5.png" alt="合作伙伴5" class="img-fluid" style="max-height: 60px;">
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="partner-logo text-center p-4">
<div class="partner-logo text-center p-4 bg-light rounded">
<img src="images/partner6.png" alt="合作伙伴6" class="img-fluid" style="max-height: 60px;">
</div>
</div>
@@ -302,6 +438,58 @@
</div>
</section>
<!-- 联系信息 -->
<section class="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-4">
<div class="card border-0 h-100">
<div class="card-body text-center">
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
<i class="fas fa-map-marker-alt"></i>
</div>
<h5>办公地址</h5>
<p class="text-muted">北京市朝阳区xxx街道xxx号<br>邮编：100000</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 h-100">
<div class="card-body text-center">
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
<i class="fas fa-phone"></i>
</div>
<h5>联系电话</h5>
<p class="text-muted">客服热线：400-xxx-xxxx<br>商务合作：010-xxxx-xxxx</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 h-100">
<div class="card-body text-center">
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
<i class="fas fa-envelope"></i>
</div>
<h5>电子邮箱</h5>
<p class="text-muted">商务咨询：info@example.com<br>技术支持：support@example.com</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<a href="contact.html" class="btn btn-primary btn-lg">
<i class="fas fa-comments me-2"></i>在线留言
</a>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-5">
<div class="container">
@@ -309,7 +497,14 @@
<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 class="d-flex flex-wrap justify-content-center gap-3">
<a href="contact.html" class="btn btn-light btn-lg">
<i class="fas fa-phone me-2"></i>联系我们
</a>
<a href="demo.html" class="btn btn-outline-light btn-lg">
<i class="fas fa-play-circle me-2"></i>预约演示
</a>
</div>
</div>
</div>
</div>
@@ -376,5 +571,13 @@
<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: 800,
once: true
});
</script>
</body>
</html>

659
website/cases.html
View File

@@ -4,7 +4,25 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>客户案例 - 活牛采购智能数字化系统</title>
<meta name="description" content="活牛采购智能数字化系统成功案例展示，真实客户评价和使用效果验证，为您选择数字化采购解决方案提供参考。">
<meta name="description" content="活牛采购智能数字化系统成功案例展示，真实客户评价和使用效果验证，包括大型养殖企业、中小型牧场和活牛贸易商的成功实践。">
<meta name="keywords" content="活牛采购案例,养殖企业数字化,牧场管理系统,贸易商解决方案,采购效率提升,成本控制,客户评价,成功案例">
<!-- 结构化数据 -->
<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>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
@@ -21,8 +39,14 @@
<!-- 导航栏 -->
<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 class="navbar-brand d-flex align-items-center" href="index.html">
<div class="logo-container me-2">
<i class="fas fa-cow text-primary fs-2"></i>
</div>
<div class="brand-text">
<div class="brand-name fw-bold">NiuMall</div>
<div class="brand-subtitle">活牛采购智能系统</div>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@@ -71,217 +95,522 @@
</div>
</nav>
<!-- 客户案例 -->
<!-- 客户案例英雄区域 -->
<section class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-5 fw-bold mb-4">客户成功案例</h1>
<p class="lead">真实客户故事展示我们的解决方案如何帮助各类企业实现业务增长和效率提升</p>
<p>通过数字化转型，我们的客户在采购效率、成本控制、风险管理和决策支持等方面都取得了显著成效。</p>
<div class="mt-4">
<a href="#cases" class="btn btn-primary btn-lg me-3">
<i class="fas fa-th-large me-2"></i>查看案例
</a>
<a href="solutions.html" class="btn btn-outline-primary btn-lg">
<i class="fas fa-lightbulb me-2"></i>解决方案
</a>
</div>
</div>
<div class="col-lg-6">
<div class="row g-3">
<div class="col-6">
<div class="bg-primary bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-primary mb-2 count-up" data-target="500">0</div>
<div class="stat-label">成功客户</div>
</div>
</div>
<div class="col-6">
<div class="bg-success bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-success mb-2 count-up" data-target="40" data-suffix="%">0%</div>
<div class="stat-label">平均效率提升</div>
</div>
</div>
<div class="col-6">
<div class="bg-warning bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-warning mb-2 count-up" data-target="20" data-suffix="%">0%</div>
<div class="stat-label">成本降低</div>
</div>
</div>
<div class="col-6">
<div class="bg-info bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-info mb-2 count-up" data-target="99" data-suffix="%">0%</div>
<div class="stat-label">客户满意度</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 案例分类和筛选功能 -->
<section class="py-3 bg-light">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-between">
<h5 class="mb-0">案例筛选</h5>
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-outline-primary btn-sm active" data-filter="all">全部</button>
<button class="btn btn-outline-primary btn-sm" data-filter="large">大型企业</button>
<button class="btn btn-outline-primary btn-sm" data-filter="medium">中型企业</button>
<button class="btn btn-outline-primary btn-sm" data-filter="small">小型企业</button>
<button class="btn btn-outline-primary btn-sm" data-filter="trader">贸易商</button>
</div>
</div>
</div>
</section>
<!-- 客户案例展示 -->
<section id="cases" class="py-5">
<div class="container">
<div class="text-center mb-5">
<h1 class="display-5 fw-bold mb-4">客户案例</h1>
<p class="lead">看看我们的客户如何通过系统提升业务效率</p>
<h2 class="display-6 mb-3">客户成功案例展示</h2>
<p class="text-muted">了解我们的客户如何通过数字化转型实现业务增长</p>
</div>
<div class="row g-4 mb-5">
<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="row g-4 mb-5 case-grid">
<div class="col-md-6 col-lg-4" data-category="large">
<div class="card case-card h-100 border-0 shadow-sm">
<img src="images/case1.jpg" class="card-img-top" alt="山东畜牧合作社数字化转型" 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>
<h5 class="card-title">山东畜牧合作社数字化转型</h5>
<p class="card-text">通过实施集团化采购解决方案，实现采购效率提升40%，成本降低15%。</p>
<a href="#case-detail-1" 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="col-md-6 col-lg-4" data-category="medium">
<div class="card case-card h-100 border-0 shadow-sm">
<img src="images/case2.jpg" class="card-img-top" alt="内蒙古家庭牧场管理升级" 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>
<h5 class="card-title">内蒙古家庭牧场管理升级</h5>
<p class="card-text">采用简化版采购管理系统，采购周期缩短30%，操作简便易用。</p>
<a href="#case-detail-2" 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="col-md-6 col-lg-4" data-category="trader">
<div class="card case-card h-100 border-0 shadow-sm">
<img src="images/case3.jpg" class="card-img-top" alt="华南活牛贸易公司业务优化" 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>
<h5 class="card-title">华南活牛贸易公司业务优化</h5>
<p class="card-text">使用贸易商专用版系统，订单处理效率提升50%，客户满意度显著提高。</p>
<a href="#case-detail-3" class="btn btn-outline-primary">查看详情</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-category="large">
<div class="card case-card h-100 border-0 shadow-sm">
<img src="images/case4.jpg" class="card-img-top" alt="河北大型养殖集团采购优化" loading="lazy">
<div class="card-body">
<span class="badge bg-primary mb-2">大型企业</span>
<h5 class="card-title">河北大型养殖集团采购优化</h5>
<p class="card-text">部署企业版系统后，实现多子公司采购协同，风险控制能力显著提升。</p>
<a href="#case-detail-4" class="btn btn-outline-primary">查看详情</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-category="small">
<div class="card case-card h-100 border-0 shadow-sm">
<img src="images/case5.jpg" class="card-img-top" alt="东北小型养殖场数字化起步" loading="lazy">
<div class="card-body">
<span class="badge bg-warning mb-2">小型企业</span>
<h5 class="card-title">东北小型养殖场数字化起步</h5>
<p class="card-text">通过基础版系统，实现采购流程标准化，为未来发展奠定数字化基础。</p>
<a href="#case-detail-5" class="btn btn-outline-primary">查看详情</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4" data-category="trader">
<div class="card case-card h-100 border-0 shadow-sm">
<img src="images/case6.jpg" class="card-img-top" alt="西南活牛交易平台风控升级" loading="lazy">
<div class="card-body">
<span class="badge bg-info mb-2">贸易商</span>
<h5 class="card-title">西南活牛交易平台风控升级</h5>
<p class="card-text">定制开发风控模块，结算风险降低50%，交易透明度全面提升。</p>
<a href="#case-detail-6" class="btn btn-outline-primary">查看详情</a>
</div>
</div>
</div>
</div>
<!-- 案例详情 -->
<div id="case-detail-1" class="card mb-5">
<div class="card-body">
<h2 class="card-title">XX牧业集团采购数字化转型</h2>
<span class="badge bg-primary mb-3">大型企业</span>
<h4 class="mt-4">客户背景</h4>
<p>XX牧业集团是国内知名的大型畜牧养殖企业，年活牛采购量超过5000头，拥有多个采购点和供应商。</p>
<div class="d-flex justify-content-between align-items-start mb-4">
<div>
<h2 class="card-title">山东畜牧合作社数字化转型</h2>
<span class="badge bg-primary">大型企业</span>
</div>
<button type="button" class="btn-close" aria-label="关闭"></button>
</div>
<h4 class="mt-4">面临挑战</h4>
<ul>
<li>供应商管理分散，缺乏统一标准</li>
<li>采购流程复杂，审批环节多</li>
<li>数据统计困难，难以进行有效分析</li>
<li>运输过程不透明，风险控制困难</li>
</ul>
<h4 class="mt-4">解决方案</h4>
<p>为该集团部署了企业版活牛采购智能数字化系统，包含供应商管理、采购计划、质检流程、运输跟踪、财务结算等全功能模块。</p>
<h4 class="mt-4">实施效果</h4>
<div class="row">
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-primary">40%</div>
<div class="stat-label">采购效率提升</div>
<div class="col-lg-8">
<h4 class="mt-4">客户背景</h4>
<p>山东畜牧合作社是国内知名的大型畜牧养殖企业，年活牛采购量超过5000头，拥有多个采购点和供应商，在行业内具有重要地位。</p>
<h4 class="mt-4">面临挑战</h4>
<div class="row">
<div class="col-md-6">
<ul>
<li>供应商管理分散，缺乏统一标准</li>
<li>采购流程复杂，审批环节多</li>
<li>数据统计困难，难以进行有效分析</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>运输过程不透明，风险控制困难</li>
<li>财务结算效率低，容易出错</li>
<li>决策缺乏数据支撑，主观性强</li>
</ul>
</div>
</div>
<h4 class="mt-4">解决方案</h4>
<p>为该集团部署了企业版活牛采购智能数字化系统，包含供应商管理、采购计划、质检流程、运输跟踪、财务结算等全功能模块，并根据其特殊需求进行了定制化开发。</p>
<p>实施过程中，我们提供了全面的培训和技术支持，确保系统顺利上线并被员工熟练使用。</p>
<h4 class="mt-4">使用数据统计和效果验证</h4>
<div class="row">
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-primary bg-opacity-10 rounded">
<div class="stat-number display-6 text-primary count-up" data-target="40" data-suffix="%">0%</div>
<div class="stat-label">采购效率提升</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-success bg-opacity-10 rounded">
<div class="stat-number display-6 text-success count-up" data-target="15" data-suffix="%">0%</div>
<div class="stat-label">采购成本降低</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-warning bg-opacity-10 rounded">
<div class="stat-number display-6 text-warning count-up" data-target="95" data-suffix="%">0%</div>
<div class="stat-label">数据准确性</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-info bg-opacity-10 rounded">
<div class="stat-number display-6 text-info count-up" data-target="100" data-suffix="%">0%</div>
<div class="stat-label">流程标准化</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-primary">30%</div>
<div class="stat-label">采购成本降低</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-primary">95%</div>
<div class="stat-label">数据准确性</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-primary">100%</div>
<div class="stat-label">流程标准化</div>
<div class="col-lg-4">
<div class="card border-0 bg-light">
<div class="card-body">
<h5 class="card-title">项目信息</h5>
<ul class="list-unstyled">
<li class="mb-2"><strong>实施时间：</strong>2023年3月</li>
<li class="mb-2"><strong>实施周期：</strong>2个月</li>
<li class="mb-2"><strong>服务模式：</strong>私有化部署</li>
<li class="mb-2"><strong>用户规模：</strong>200+用户</li>
<li class="mb-2"><strong>行业：</strong>畜牧养殖</li>
<li class="mb-2"><strong>企业规模：</strong>大型企业</li>
</ul>
</div>
</div>
</div>
</div>
<h4 class="mt-4">客户评价</h4>
<blockquote class="blockquote">
<p>"活牛采购智能数字化系统的实施，彻底改变了我们传统的采购管理模式。现在我们可以实时掌握采购全流程，大大提升了管理效率和决策水平。"</p>
<footer class="blockquote-footer">XX牧业集团采购总监</footer>
<h4 class="mt-4">客户评价和Testimonials</h4>
<blockquote class="blockquote bg-light p-4 rounded">
<p class="mb-3">"活牛采购智能数字化系统的实施，彻底改变了我们传统的采购管理模式。现在我们可以实时掌握采购全流程，大大提升了管理效率和决策水平。系统界面友好，操作简便，员工上手很快。"</p>
<div class="d-flex align-items-center">
<img src="images/client-avatar-1.jpg" alt="客户头像" class="rounded-circle me-3" width="50" height="50">
<div>
<footer class="blockquote-footer mb-0">张总，山东畜牧合作社采购总监</footer>
<small class="text-muted">合作3年</small>
</div>
</div>
</blockquote>
</div>
</div>
<div id="case-detail-2" class="card mb-5">
<div class="card-body">
<h2 class="card-title">YY生态牧场采购管理升级</h2>
<span class="badge bg-success mb-3">中型企业</span>
<h4 class="mt-4">客户背景</h4>
<p>YY生态牧场是一家专注于生态养殖的中型牧场，年采购活牛约800头，注重产品质量和可持续发展。</p>
<div class="d-flex justify-content-between align-items-start mb-4">
<div>
<h2 class="card-title">内蒙古家庭牧场管理升级</h2>
<span class="badge bg-success">中型企业</span>
</div>
<button type="button" class="btn-close" aria-label="关闭"></button>
</div>
<h4 class="mt-4">面临挑战</h4>
<ul>
<li>采购计划制定缺乏科学依据</li>
<li>供应商评估标准不统一</li>
<li>质检流程不规范，存在风险</li>
<li>成本控制困难，利润空间压缩</li>
</ul>
<h4 class="mt-4">解决方案</h4>
<p>为该牧场部署了标准版活牛采购智能数字化系统，重点优化采购计划、供应商管理、质检流程等功能模块。</p>
<h4 class="mt-4">实施效果</h4>
<div class="row">
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-success">25%</div>
<div class="stat-label">采购成本降低</div>
<div class="col-lg-8">
<h4 class="mt-4">客户背景</h4>
<p>内蒙古家庭牧场是一家专注于生态养殖的中型牧场，年采购活牛约800头，注重产品质量和可持续发展，致力于打造绿色有机品牌。</p>
<h4 class="mt-4">面临挑战</h4>
<div class="row">
<div class="col-md-6">
<ul>
<li>采购计划制定缺乏科学依据</li>
<li>供应商评估标准不统一</li>
<li>质检流程不规范，存在风险</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>成本控制困难，利润空间压缩</li>
<li>数据记录不完整，难以前后对比</li>
<li>缺乏专业管理系统，依赖人工记录</li>
</ul>
</div>
</div>
<h4 class="mt-4">解决方案</h4>
<p>为该牧场部署了标准版活牛采购智能数字化系统，重点优化采购计划、供应商管理、质检流程等功能模块，并提供移动端支持，方便牧场主随时查看和操作。</p>
<p>我们还为其定制了生态养殖相关的质检标准模板，帮助其更好地实现质量控制目标。</p>
<h4 class="mt-4">使用数据统计和效果验证</h4>
<div class="row">
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-primary bg-opacity-10 rounded">
<div class="stat-number display-6 text-primary count-up" data-target="25" data-suffix="%">0%</div>
<div class="stat-label">采购成本降低</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-success bg-opacity-10 rounded">
<div class="stat-number display-6 text-success count-up" data-target="50" data-suffix="%">0%</div>
<div class="stat-label">质检效率提升</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-warning bg-opacity-10 rounded">
<div class="stat-number display-6 text-warning count-up" data-target="100" data-suffix="%">0%</div>
<div class="stat-label">供应商标准化</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-info bg-opacity-10 rounded">
<div class="stat-number display-6 text-info count-up" data-target="90" data-suffix="%">0%</div>
<div class="stat-label">客户满意度</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-success">50%</div>
<div class="stat-label">质检效率提升</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-success">100%</div>
<div class="stat-label">供应商标准化</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-success">90%</div>
<div class="stat-label">客户满意度</div>
<div class="col-lg-4">
<div class="card border-0 bg-light">
<div class="card-body">
<h5 class="card-title">项目信息</h5>
<ul class="list-unstyled">
<li class="mb-2"><strong>实施时间：</strong>2023年6月</li>
<li class="mb-2"><strong>实施周期：</strong>1个月</li>
<li class="mb-2"><strong>服务模式：</strong>SaaS云服务</li>
<li class="mb-2"><strong>用户规模：</strong>5-10用户</li>
<li class="mb-2"><strong>行业：</strong>生态养殖</li>
<li class="mb-2"><strong>企业规模：</strong>中型企业</li>
</ul>
</div>
</div>
</div>
</div>
<h4 class="mt-4">客户评价</h4>
<blockquote class="blockquote">
<p>"系统帮助我们建立了科学的采购管理体系，不仅降低了成本，更重要的是提升了产品质量控制水平，为我们的生态养殖理念提供了有力支撑。"</p>
<footer class="blockquote-footer">YY生态牧场总经理</footer>
<h4 class="mt-4">客户评价和Testimonials</h4>
<blockquote class="blockquote bg-light p-4 rounded">
<p class="mb-3">"系统帮助我们建立了科学的采购管理体系，不仅降低了成本，更重要的是提升了产品质量控制水平，为我们的生态养殖理念提供了有力支撑。移动端功能特别实用，在牧场现场就能随时查看采购状态。"</p>
<div class="d-flex align-items-center">
<img src="images/client-avatar-2.jpg" alt="客户头像" class="rounded-circle me-3" width="50" height="50">
<div>
<footer class="blockquote-footer mb-0">李场长，内蒙古家庭牧场总经理</footer>
<small class="text-muted">合作2年</small>
</div>
</div>
</blockquote>
</div>
</div>
<div id="case-detail-3" class="card mb-5">
<div class="card-body">
<h2 class="card-title">ZZ活牛贸易平台业务优化</h2>
<span class="badge bg-info mb-3">贸易商</span>
<h4 class="mt-4">客户背景</h4>
<p>ZZ活牛贸易平台是一家专业的活牛贸易商，年交易量约3000头，连接多个养殖场和买家。</p>
<div class="d-flex justify-content-between align-items-start mb-4">
<div>
<h2 class="card-title">华南活牛贸易公司业务优化</h2>
<span class="badge bg-info">贸易商</span>
</div>
<button type="button" class="btn-close" aria-label="关闭"></button>
</div>
<h4 class="mt-4">面临挑战</h4>
<ul>
<li>多方交易协调困难</li>
<li>订单跟踪不及时，容易出错</li>
<li>结算流程复杂，风险较高</li>
<li>缺乏有效数据分析，决策困难</li>
</ul>
<h4 class="mt-4">解决方案</h4>
<p>为该贸易平台定制开发了贸易商专用版系统，重点强化订单管理、多方协调、结算风控等功能。</p>
<h4 class="mt-4">实施效果</h4>
<div class="row">
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-info">35%</div>
<div class="stat-label">交易效率提升</div>
<div class="col-lg-8">
<h4 class="mt-4">客户背景</h4>
<p>华南活牛贸易公司是一家专业的活牛贸易商，年交易量约3000头，连接多个养殖场和买家，在华南地区具有较强的市场影响力。</p>
<h4 class="mt-4">面临挑战</h4>
<div class="row">
<div class="col-md-6">
<ul>
<li>多方交易协调困难</li>
<li>订单跟踪不及时，容易出错</li>
<li>结算流程复杂，风险较高</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>缺乏有效数据分析，决策困难</li>
<li>客户信息管理混乱</li>
<li>合同管理不规范，容易产生纠纷</li>
</ul>
</div>
</div>
<h4 class="mt-4">解决方案</h4>
<p>为该贸易公司定制开发了贸易商专用版系统，重点强化订单管理、多方协调、结算风控等功能，并集成电子合同签署功能，提升交易安全性和效率。</p>
<p>我们还为其开发了客户关系管理模块，帮助其更好地维护客户资源，提升客户满意度和复购率。</p>
<h4 class="mt-4">使用数据统计和效果验证</h4>
<div class="row">
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-primary bg-opacity-10 rounded">
<div class="stat-number display-6 text-primary count-up" data-target="35" data-suffix="%">0%</div>
<div class="stat-label">交易效率提升</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-success bg-opacity-10 rounded">
<div class="stat-number display-6 text-success count-up" data-target="99" data-suffix="%">0%</div>
<div class="stat-label">订单准确率</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-warning bg-opacity-10 rounded">
<div class="stat-number display-6 text-warning count-up" data-target="50" data-suffix="%">0%</div>
<div class="stat-label">结算风险降低</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-info bg-opacity-10 rounded">
<div class="stat-number display-6 text-info count-up" data-target="100" data-suffix="%">0%</div>
<div class="stat-label">交易透明化</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-info">99%</div>
<div class="stat-label">订单准确率</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-info">50%</div>
<div class="stat-label">结算风险降低</div>
</div>
</div>
<div class="col-md-3 col-6 mb-4">
<div class="text-center p-3 bg-light rounded">
<div class="stat-number display-6 text-info">100%</div>
<div class="stat-label">交易透明化</div>
<div class="col-lg-4">
<div class="card border-0 bg-light">
<div class="card-body">
<h5 class="card-title">项目信息</h5>
<ul class="list-unstyled">
<li class="mb-2"><strong>实施时间：</strong>2023年9月</li>
<li class="mb-2"><strong>实施周期：</strong>1.5个月</li>
<li class="mb-2"><strong>服务模式：</strong>混合部署</li>
<li class="mb-2"><strong>用户规模：</strong>20-50用户</li>
<li class="mb-2"><strong>行业：</strong>活牛贸易</li>
<li class="mb-2"><strong>企业规模：</strong>贸易商</li>
</ul>
</div>
</div>
</div>
</div>
<h4 class="mt-4">客户评价</h4>
<blockquote class="blockquote">
<p>"数字化系统让我们的贸易业务更加透明高效，多方协调变得轻松简单，客户满意度大幅提升。这正是我们一直在寻找的解决方案。"</p>
<footer class="blockquote-footer">ZZ活牛贸易平台运营总监</footer>
<h4 class="mt-4">客户评价和Testimonials</h4>
<blockquote class="blockquote bg-light p-4 rounded">
<p class="mb-3">"数字化系统让我们的贸易业务更加透明高效，多方协调变得轻松简单，客户满意度大幅提升。这正是我们一直在寻找的解决方案。电子合同功能大大提升了交易安全性，减少了合同纠纷。"</p>
<div class="d-flex align-items-center">
<img src="images/client-avatar-3.jpg" alt="客户头像" class="rounded-circle me-3" width="50" height="50">
<div>
<footer class="blockquote-footer mb-0">王总，华南活牛贸易公司运营总监</footer>
<small class="text-muted">合作1年</small>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</section>
<!-- 客户评价和Testimonials -->
<section class="py-5 bg-dark">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3 text-white">客户评价</h2>
<p class="text-muted">听听我们的客户怎么说</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card border-0 h-100">
<div class="card-body">
<div class="text-warning mb-3">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="card-text">"系统实施后，我们的采购效率提升了40%，成本降低了15%。数据驱动的决策让我们在市场竞争中占据了优势。"</p>
<div class="d-flex align-items-center">
<img src="images/testimonial-1.jpg" alt="客户" class="rounded-circle me-3" width="40" height="40">
<div>
<div class="fw-bold">张总</div>
<small class="text-muted">山东畜牧合作社</small>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 h-100">
<div class="card-body">
<div class="text-warning mb-3">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<p class="card-text">"作为中小型牧场，这套系统帮我们实现了数字化转型。操作简单，功能全面，性价比很高。"</p>
<div class="d-flex align-items-center">
<img src="images/testimonial-2.jpg" alt="客户" class="rounded-circle me-3" width="40" height="40">
<div>
<div class="fw-bold">李场长</div>
<small class="text-muted">内蒙古家庭牧场</small>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 h-100">
<div class="card-body">
<div class="text-warning mb-3">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="card-text">"贸易商专用版系统彻底改变了我们的业务模式。交易效率提升35%，客户满意度大幅提升。"</p>
<div class="d-flex align-items-center">
<img src="images/testimonial-3.jpg" alt="客户" class="rounded-circle me-3" width="40" height="40">
<div>
<div class="fw-bold">王总</div>
<small class="text-muted">华南活牛贸易公司</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-5">
<div class="container">
@@ -289,7 +618,14 @@
<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 class="d-flex flex-wrap justify-content-center gap-3">
<a href="contact.html" class="btn btn-light btn-lg">
<i class="fas fa-rocket me-2"></i>免费试用
</a>
<a href="demo.html" class="btn btn-outline-light btn-lg">
<i class="fas fa-play-circle me-2"></i>在线演示
</a>
</div>
</div>
</div>
</div>
@@ -356,5 +692,42 @@
<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: 800,
once: true
});
// 案例筛选功能
document.querySelectorAll('[data-filter]').forEach(button => {
button.addEventListener('click', function() {
const filter = this.getAttribute('data-filter');
// 更新按钮状态
document.querySelectorAll('[data-filter]').forEach(btn => {
btn.classList.remove('active');
});
this.classList.add('active');
// 筛选案例
document.querySelectorAll('.case-grid .col-md-6').forEach(card => {
if (filter === 'all' || card.getAttribute('data-category') === filter) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
});
});
// 关闭案例详情
document.querySelectorAll('.btn-close').forEach(button => {
button.addEventListener('click', function() {
this.closest('.card').style.display = 'none';
});
});
</script>
</body>
</html>

676
website/contact.html
View File

@@ -5,6 +5,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>联系我们 - 活牛采购智能数字化系统</title>
<meta name="description" content="联系活牛采购智能数字化系统团队，获取产品演示、报价咨询和技术支持，我们为您提供专业的数字化采购解决方案。">
<meta name="keywords" content="联系我们,产品演示,报价咨询,技术支持,客服热线,在线咨询,免费试用,预约演示">
<!-- 结构化数据 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "活牛采购智能数字化系统",
"description": "联系活牛采购智能数字化系统团队，获取产品演示、报价咨询和技术支持，我们为您提供专业的数字化采购解决方案。",
"url": "https://www.niumall.com",
"logo": "https://www.niumall.com/images/logo.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "400-xxx-xxxx",
"contactType": "customer service"
},
"address": {
"@type": "PostalAddress",
"streetAddress": "xxx街道xxx号",
"addressLocality": "北京市",
"postalCode": "100000",
"addressCountry": "CN"
}
}
</script>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
@@ -17,10 +42,16 @@
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
<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 text-primary">活牛采购智能数字化系统</span>
<a class="navbar-brand d-flex align-items-center" href="index.html">
<div class="logo-container me-2">
<i class="fas fa-cow text-primary fs-2"></i>
</div>
<div class="brand-text">
<div class="brand-name fw-bold">NiuMall</div>
<div class="brand-subtitle">活牛采购智能系统</div>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@@ -69,104 +100,533 @@
</div>
</nav>
<!-- 联系我们 -->
<!-- 联系我们英雄区域 -->
<section class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-5 fw-bold mb-4">联系我们</h1>
<p class="lead">我们随时准备为您提供帮助，欢迎通过以下方式联系我们</p>
<p>无论您是想了解产品信息、申请试用、预约演示还是获取技术支持，我们的专业团队都将竭诚为您服务。</p>
<div class="mt-4">
<a href="#contact-form" class="btn btn-primary btn-lg me-3">
<i class="fas fa-envelope me-2"></i>在线留言
</a>
<a href="#online-service" class="btn btn-outline-primary btn-lg">
<i class="fas fa-comments me-2"></i>在线客服
</a>
</div>
</div>
<div class="col-lg-6">
<div class="row g-3">
<div class="col-6">
<div class="bg-primary bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-primary mb-2 count-up" data-target="1000">0</div>
<div class="stat-label">满意客户</div>
</div>
</div>
<div class="col-6">
<div class="bg-success bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-success mb-2 count-up" data-target="98" data-suffix="%">0%</div>
<div class="stat-label">响应及时率</div>
</div>
</div>
<div class="col-6">
<div class="bg-warning bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-warning mb-2 count-up" data-target="24">0</div>
<div class="stat-label">小时支持</div>
</div>
</div>
<div class="col-6">
<div class="bg-info bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-info mb-2 count-up" data-target="50">0</div>
<div class="stat-label">专业顾问</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系方式 -->
<section class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h1 class="display-5 fw-bold mb-4">联系我们</h1>
<p class="lead">我们随时准备为您提供帮助，欢迎通过以下方式联系我们</p>
<h2 class="display-6 mb-3">联系方式</h2>
<p class="text-muted">您可以通过以下任何方式与我们取得联系</p>
</div>
<div class="row g-4">
<!-- 联系方式 -->
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<!-- 公司地址 -->
<div class="col-md-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon mx-auto mb-4">
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
<i class="fas fa-map-marker-alt"></i>
</div>
<h5 class="card-title">公司地址</h5>
<p class="card-text">北京市朝阳区xxx街道xxx号<br>邮编：100000</p>
<a href="#map" class="btn btn-outline-primary btn-sm">查看地图</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<!-- 联系电话 -->
<div class="col-md-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon mx-auto mb-4">
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
<i class="fas fa-phone-alt"></i>
</div>
<h5 class="card-title">联系电话</h5>
<p class="card-text">客服热线：400-xxx-xxxx<br>技术支持：010-xxxx-xxxx</p>
<p class="card-text">客服热线：400-xxx-xxxx<br>技术支持：010-xxxx-xxxx<br>商务合作：010-xxxx-xxxx</p>
<a href="tel:400xxx xxxx" class="btn btn-outline-success btn-sm">立即拨打</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<!-- 电子邮箱 -->
<div class="col-md-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon mx-auto mb-4">
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
<i class="fas fa-envelope"></i>
</div>
<h5 class="card-title">电子邮箱</h5>
<p class="card-text">商务合作：info@example.com<br>技术支持：support@example.com</p>
<p class="card-text">商务咨询：info@example.com<br>技术支持：support@example.com<br>媒体合作：media@example.com</p>
<a href="mailto:info@example.com" class="btn btn-outline-info btn-sm">发送邮件</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 在线客服系统 -->
<section id="online-service" class="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 mt-5">
<div class="col-lg-6">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card border-0 shadow-sm">
<div class="card-body">
<h3 class="card-title mb-4">在线留言</h3>
<form id="contactForm" class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-md-6">
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-feedback">请输入您的姓名</div>
</div>
<div class="col-md-6">
<label for="company" class="form-label">公司名称</label>
<input type="text" class="form-control" id="company">
</div>
<div class="col-md-6">
<label for="phone" class="form-label">联系电话 <span class="text-danger">*</span></label>
<input type="tel" class="form-control" id="phone" required>
<div class="invalid-feedback">请输入您的联系电话</div>
</div>
<div class="col-md-6">
<label for="email" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">请输入有效的电子邮箱</div>
</div>
<div class="col-12">
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
<select class="form-select" id="subject" required>
<option value="">请选择</option>
<option value="product">产品咨询</option>
<option value="demo">产品演示</option>
<option value="price">报价咨询</option>
<option value="support">技术支持</option>
<option value="other">其他</option>
</select>
<div class="invalid-feedback">请选择咨询主题</div>
</div>
<div class="col-12">
<label for="message" class="form-label">留言内容 <span class="text-danger">*</span></label>
<textarea class="form-control" id="message" rows="5" required></textarea>
<div class="invalid-feedback">请输入留言内容</div>
</div>
<div class="col-12">
<button class="btn btn-primary btn-lg" type="submit">
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
提交留言
</button>
<div class="d-flex justify-content-between align-items-center mb-4">
<h5 class="card-title mb-0">在线客服系统</h5>
<div class="d-flex align-items-center">
<div class="bg-success rounded-circle me-2" style="width: 10px; height: 10px;"></div>
<small class="text-muted">在线</small>
</div>
</div>
<div class="chat-container bg-light p-3 rounded mb-3" style="height: 300px; overflow-y: auto;">
<div class="chat-message mb-3">
<div class="d-flex">
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px; flex-shrink: 0;">
<i class="fas fa-robot"></i>
</div>
<div class="bg-white p-3 rounded">
<p class="mb-0">您好！欢迎联系活牛采购智能数字化系统客服。请问有什么可以帮助您的吗？</p>
<small class="text-muted">09:00</small>
</div>
</div>
</div>
</form>
<div class="chat-message mb-3">
<div class="d-flex justify-content-end">
<div class="bg-primary text-white p-3 rounded me-2">
<p class="mb-0">我想了解产品的价格和功能</p>
<small class="text-white-50">09:01</small>
</div>
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 30px; height: 30px; flex-shrink: 0;">
<i class="fas fa-user"></i>
</div>
</div>
</div>
<div class="chat-message mb-3">
<div class="d-flex">
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px; flex-shrink: 0;">
<i class="fas fa-robot"></i>
</div>
<div class="bg-white p-3 rounded">
<p class="mb-0">我们的产品提供多种版本，包括基础版、标准版和企业版，价格根据用户规模和功能需求而定。您可以先申请免费试用，体验产品功能后再做决定。</p>
<small class="text-muted">09:02</small>
</div>
</div>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="输入您的问题...">
<button class="btn btn-primary" type="button">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div class="mt-3">
<small class="text-muted">工作时间：周一至周五 9:00-18:00</small>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系表单 -->
<section id="contact-form" class="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">
<div class="col-lg-8 mx-auto">
<div class="card border-0 shadow-sm">
<div class="card-body">
<ul class="nav nav-tabs mb-4" id="contactTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="message-tab" data-bs-toggle="tab" data-bs-target="#message" type="button" role="tab">在线留言</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="demo-tab" data-bs-toggle="tab" data-bs-target="#demo" type="button" role="tab">预约演示</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="trial-tab" data-bs-toggle="tab" data-bs-target="#trial" type="button" role="tab">免费试用</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="download-tab" data-bs-toggle="tab" data-bs-target="#download" type="button" role="tab">资料下载</button>
</li>
</ul>
<div class="tab-content" id="contactTabContent">
<!-- 在线留言 -->
<div class="tab-pane fade show active" id="message" role="tabpanel">
<form id="messageForm" class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-md-6">
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-feedback">请输入您的姓名</div>
</div>
<div class="col-md-6">
<label for="company" class="form-label">公司名称</label>
<input type="text" class="form-control" id="company">
</div>
<div class="col-md-6">
<label for="phone" class="form-label">联系电话 <span class="text-danger">*</span></label>
<input type="tel" class="form-control" id="phone" required>
<div class="invalid-feedback">请输入您的联系电话</div>
</div>
<div class="col-md-6">
<label for="email" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">请输入有效的电子邮箱</div>
</div>
<div class="col-12">
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
<select class="form-select" id="subject" required>
<option value="">请选择</option>
<option value="product">产品咨询</option>
<option value="demo">产品演示</option>
<option value="price">报价咨询</option>
<option value="support">技术支持</option>
<option value="other">其他</option>
</select>
<div class="invalid-feedback">请选择咨询主题</div>
</div>
<div class="col-12">
<label for="messageContent" class="form-label">留言内容 <span class="text-danger">*</span></label>
<textarea class="form-control" id="messageContent" rows="5" required></textarea>
<div class="invalid-feedback">请输入留言内容</div>
</div>
<div class="col-12">
<button class="btn btn-primary btn-lg" type="submit">
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
提交留言
</button>
</div>
</div>
</form>
</div>
<!-- 预约演示 -->
<div class="tab-pane fade" id="demo" role="tabpanel">
<form id="demoForm" class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-md-6">
<label for="demoName" class="form-label">姓名 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="demoName" required>
<div class="invalid-feedback">请输入您的姓名</div>
</div>
<div class="col-md-6">
<label for="demoCompany" class="form-label">公司名称 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="demoCompany" required>
<div class="invalid-feedback">请输入公司名称</div>
</div>
<div class="col-md-6">
<label for="demoPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
<input type="tel" class="form-control" id="demoPhone" required>
<div class="invalid-feedback">请输入您的联系电话</div>
</div>
<div class="col-md-6">
<label for="demoEmail" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="demoEmail" required>
<div class="invalid-feedback">请输入有效的电子邮箱</div>
</div>
<div class="col-md-6">
<label for="demoDate" class="form-label">预约日期 <span class="text-danger">*</span></label>
<input type="date" class="form-control" id="demoDate" required>
<div class="invalid-feedback">请选择预约日期</div>
</div>
<div class="col-md-6">
<label for="demoTime" class="form-label">预约时间 <span class="text-danger">*</span></label>
<select class="form-select" id="demoTime" required>
<option value="">请选择</option>
<option value="09:00-10:00">09:00-10:00</option>
<option value="10:00-11:00">10:00-11:00</option>
<option value="11:00-12:00">11:00-12:00</option>
<option value="14:00-15:00">14:00-15:00</option>
<option value="15:00-16:00">15:00-16:00</option>
<option value="16:00-17:00">16:00-17:00</option>
</select>
<div class="invalid-feedback">请选择预约时间</div>
</div>
<div class="col-12">
<label for="demoParticipants" class="form-label">参会人员及职位</label>
<textarea class="form-control" id="demoParticipants" rows="3" placeholder="请列出参会人员姓名及职位"></textarea>
</div>
<div class="col-12">
<label for="demoRequirements" class="form-label">特殊需求</label>
<textarea class="form-control" id="demoRequirements" rows="3" placeholder="如有特殊演示需求，请在此说明"></textarea>
</div>
<div class="col-12">
<button class="btn btn-primary btn-lg" type="submit">
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
预约演示
</button>
</div>
</div>
</form>
</div>
<!-- 免费试用 -->
<div class="tab-pane fade" id="trial" role="tabpanel">
<form id="trialForm" class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-md-6">
<label for="trialName" class="form-label">姓名 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="trialName" required>
<div class="invalid-feedback">请输入您的姓名</div>
</div>
<div class="col-md-6">
<label for="trialCompany" class="form-label">公司名称 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="trialCompany" required>
<div class="invalid-feedback">请输入公司名称</div>
</div>
<div class="col-md-6">
<label for="trialPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
<input type="tel" class="form-control" id="trialPhone" required>
<div class="invalid-feedback">请输入您的联系电话</div>
</div>
<div class="col-md-6">
<label for="trialEmail" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="trialEmail" required>
<div class="invalid-feedback">请输入有效的电子邮箱</div>
</div>
<div class="col-md-6">
<label for="trialScale" class="form-label">企业规模 <span class="text-danger">*</span></label>
<select class="form-select" id="trialScale" required>
<option value="">请选择</option>
<option value="small">小型企业（年采购量&lt;200头）</option>
<option value="medium">中型企业（年采购量200-1000头）</option>
<option value="large">大型企业（年采购量1000-5000头）</option>
<option value="group">集团公司（年采购量&gt;5000头）</option>
</select>
<div class="invalid-feedback">请选择企业规模</div>
</div>
<div class="col-md-6">
<label for="trialRole" class="form-label">您的角色 <span class="text-danger">*</span></label>
<select class="form-select" id="trialRole" required>
<option value="">请选择</option>
<option value="purchaser">采购人员</option>
<option value="manager">管理人员</option>
<option value="it">IT人员</option>
<option value="owner">企业主</option>
<option value="other">其他</option>
</select>
<div class="invalid-feedback">请选择您的角色</div>
</div>
<div class="col-12">
<label for="trialRequirements" class="form-label">试用需求说明</label>
<textarea class="form-control" id="trialRequirements" rows="3" placeholder="请说明您希望重点体验的功能模块"></textarea>
</div>
<div class="col-12">
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="agreeTerms" required>
<label class="form-check-label" for="agreeTerms">
我已阅读并同意 <a href="#" class="text-primary">服务条款</a> 和 <a href="#" class="text-primary">隐私政策</a> <span class="text-danger">*</span>
</label>
<div class="invalid-feedback">请同意服务条款和隐私政策</div>
</div>
<button class="btn btn-primary btn-lg" type="submit">
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
申请免费试用
</button>
</div>
</div>
</form>
</div>
<!-- 资料下载 -->
<div class="tab-pane fade" id="download" role="tabpanel">
<div class="row g-4">
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
<i class="fas fa-book"></i>
</div>
<h5 class="card-title">产品手册</h5>
<p class="card-text text-muted">详细的产品功能介绍和使用指南</p>
<button class="btn btn-outline-primary download-btn" data-file="product-manual">
<i class="fas fa-download me-2"></i>下载PDF
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
<i class="fas fa-file-alt"></i>
</div>
<h5 class="card-title">技术白皮书</h5>
<p class="card-text text-muted">系统架构和技术实现方案详解</p>
<button class="btn btn-outline-success download-btn" data-file="white-paper">
<i class="fas fa-download me-2"></i>下载PDF
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
<i class="fas fa-chart-bar"></i>
</div>
<h5 class="card-title">案例研究报告</h5>
<p class="card-text text-muted">典型客户成功案例深度分析</p>
<button class="btn btn-outline-warning download-btn" data-file="case-study">
<i class="fas fa-download me-2"></i>下载PDF
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
<i class="fas fa-video"></i>
</div>
<h5 class="card-title">产品演示视频</h5>
<p class="card-text text-muted">系统功能演示和操作指南视频</p>
<button class="btn btn-outline-info download-btn" data-file="demo-video">
<i class="fas fa-download me-2"></i>下载视频
</button>
</div>
</div>
</div>
</div>
<!-- 资料下载表单 -->
<div class="card border-0 shadow-sm mt-4">
<div class="card-body">
<h5 class="card-title mb-4">填写信息获取资料</h5>
<form id="downloadForm" class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-md-6">
<label for="downloadName" class="form-label">姓名 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="downloadName" required>
<div class="invalid-feedback">请输入您的姓名</div>
</div>
<div class="col-md-6">
<label for="downloadCompany" class="form-label">公司名称 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="downloadCompany" required>
<div class="invalid-feedback">请输入公司名称</div>
</div>
<div class="col-md-6">
<label for="downloadPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
<input type="tel" class="form-control" id="downloadPhone" required>
<div class="invalid-feedback">请输入您的联系电话</div>
</div>
<div class="col-md-6">
<label for="downloadEmail" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="downloadEmail" required>
<div class="invalid-feedback">请输入有效的电子邮箱</div>
</div>
<div class="col-12">
<label for="downloadInterests" class="form-label">感兴趣的资料 <span class="text-danger">*</span></label>
<select class="form-select" id="downloadInterests" multiple required>
<option value="product-manual">产品手册</option>
<option value="white-paper">技术白皮书</option>
<option value="case-study">案例研究报告</option>
<option value="demo-video">产品演示视频</option>
</select>
<div class="invalid-feedback">请选择您感兴趣的资料</div>
<small class="text-muted">按住Ctrl键可多选</small>
</div>
<div class="col-12">
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="downloadAgree" required>
<label class="form-check-label" for="downloadAgree">
我已阅读并同意 <a href="#" class="text-primary">服务条款</a> 和 <a href="#" class="text-primary">隐私政策</a> <span class="text-danger">*</span>
</label>
<div class="invalid-feedback">请同意服务条款和隐私政策</div>
</div>
<button class="btn btn-primary btn-lg" type="submit">
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
获取资料
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 办公地图 -->
<section id="map" class="py-5 bg-light">
<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">
<div class="col-lg-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h5 class="card-title mb-4">公司位置</h5>
<div class="ratio ratio-16x9">
<iframe src="https://map.baidu.com/" title="公司位置" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
@@ -174,14 +634,23 @@
<div class="col-lg-6">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h3 class="card-title mb-4">办公地图</h3>
<div class="ratio ratio-16x9">
<iframe src="https://map.baidu.com/" title="公司位置" loading="lazy"></iframe>
<h5 class="card-title mb-4">交通信息</h5>
<div class="mb-4">
<h6 class="text-primary"><i class="fas fa-subway me-2"></i>地铁</h6>
<p class="mb-0">地铁10号线，xxx站下车，A出口步行500米</p>
</div>
<div class="mt-4">
<h5>工作时间</h5>
<p>周一至周五：9:00 - 18:00</p>
<p>周六至周日：10:00 - 16:00</p>
<div class="mb-4">
<h6 class="text-primary"><i class="fas fa-bus me-2"></i>公交</h6>
<p class="mb-0">xxx路、xxx路、xxx路公交，xxx站下车</p>
</div>
<div class="mb-4">
<h6 class="text-primary"><i class="fas fa-car me-2"></i>自驾</h6>
<p class="mb-0">导航至北京市朝阳区xxx街道xxx号，附近有停车场</p>
</div>
<div>
<h6 class="text-primary"><i class="fas fa-clock me-2"></i>工作时间</h6>
<p class="mb-0">周一至周五：9:00 - 18:00</p>
<p class="mb-0">周六至周日：10:00 - 16:00</p>
</div>
</div>
</div>
@@ -191,7 +660,7 @@
</section>
<!-- 常见问题 -->
<section class="py-5 bg-light">
<section class="py-5">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">常见问题</h2>
@@ -209,7 +678,7 @@
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
<div class="accordion-body">
您可以通过填写上方联系表单选择"产品演示"主题，我们的销售顾问将在24小时内与您联系并安排演示。您也可以直接致电我们的客服热线400-xxx-xxxx。
您可以通过上方的"预约演示"选项卡填写预约表单，我们的销售顾问将在24小时内与您联系并安排演示。您也可以直接致电我们的客服热线400-xxx-xxxx，或通过在线客服系统咨询。
</div>
</div>
</div>
@@ -221,7 +690,7 @@
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
我们的系统支持PC端和移动端访问，包括Windows、Mac、iOS、Android等主流操作系统。同时我们也提供微信小程序版本，方便您随时处理业务。
我们的系统支持PC端和移动端访问，包括Windows、Mac、iOS、Android等主流操作系统。同时我们也提供微信小程序版本，方便您随时处理业务。所有版本数据实时同步，确保您在任何设备上都能获得一致的使用体验。
</div>
</div>
</div>
@@ -233,7 +702,7 @@
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
我们提供云部署和本地部署两种方式。云部署由我们负责运维，您只需通过浏览器访问即可；本地部署需要您的IT团队配合，我们提供全程技术支持。
我们提供云部署和本地部署两种方式。云部署由我们负责运维，您只需通过浏览器访问即可；本地部署需要您的IT团队配合，我们提供全程技术支持。无论选择哪种部署方式，我们都提供完整的部署文档和技术支持。
</div>
</div>
</div>
@@ -245,7 +714,19 @@
</h2>
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
我们采用多层安全防护机制，包括数据加密传输、访问权限控制、定期安全审计等。同时通过了ISO27001信息安全管理体系认证，确保您的数据安全。
我们采用多层安全防护机制，包括数据加密传输、访问权限控制、定期安全审计等。同时通过了ISO27001信息安全管理体系认证，确保您的数据安全。所有数据均存储在阿里云服务器上，具备高可用性和灾备能力。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive">
免费试用期是多长时间？
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
我们提供14天的免费试用期，试用期间您可以体验系统的所有功能。试用期结束后，如果您需要继续使用，我们的销售团队会与您联系讨论后续的合作方案。试用期间有任何问题，我们的技术支持团队将全程为您服务。
</div>
</div>
</div>
@@ -262,7 +743,14 @@
<div class="card-body p-5 text-center">
<h3 class="mb-3">立即体验活牛采购智能数字化系统</h3>
<p class="mb-4">申请免费试用，感受数字化带来的效率提升</p>
<a href="#" class="btn btn-light btn-lg">免费试用</a>
<div class="d-flex flex-wrap justify-content-center gap-3">
<a href="#trial" class="btn btn-light btn-lg">
<i class="fas fa-rocket me-2"></i>免费试用
</a>
<a href="#demo" class="btn btn-outline-light btn-lg">
<i class="fas fa-play-circle me-2"></i>预约演示
</a>
</div>
</div>
</div>
</div>
@@ -329,5 +817,37 @@
<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: 800,
once: true
});
// 联系表单切换时滚动到表单顶部
document.addEventListener('DOMContentLoaded', function() {
const tabButtons = document.querySelectorAll('[data-bs-toggle="tab"]');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
// 延迟滚动，确保tab切换完成
setTimeout(() => {
const formSection = document.getElementById('contact-form');
formSection.scrollIntoView({ behavior: 'smooth' });
}, 100);
});
});
// 资料下载按钮事件
const downloadButtons = document.querySelectorAll('.download-btn');
downloadButtons.forEach(button => {
button.addEventListener('click', function() {
const file = this.getAttribute('data-file');
alert(`资料"${file}"已发送至您的邮箱，请注意查收。`);
});
});
});
</script>
</body>
</html>

789
website/css/custom.css
View File

@@ -1,26 +1,27 @@
/* 自定义样式文件 - 活牛采购智能数字化系统官网 */
/* 全局样式 */
/* 全局样式 - 按照需求文档规范优化配色 */
:root {
--primary-color: #4CAF50; /* 农业绿色主色调 */
--primary-light: #81C784; /* 浅绿色 */
--primary-dark: #388E3C; /* 深绿色 */
--secondary-color: #1976D2; /* 深蓝色辅助色 */
--success-color: #00d474; /* 绿色成功色 */
--success-color: #4CAF50; /* 绿色成功色（与主色调一致） */
--warning-color: #FF9800; /* 橙色警告色 */
--danger-color: #ff3c78; /* 粉色危险色 */
--danger-color: #F44336; /* 红色危险色 */
--light-color: #f8f9fa;
--dark-color: #121212; /* 深色背景 */
--gray-color: #2d2d2d; /* 灰色 */
--text-light: #f8f9fa; /* 浅色文字 */
--text-dark: #343a40; /* 深色文字 */
--dark-color: #212529; /* 深色背景 */
--gray-color: #6c757d; /* 灰色 */
--text-light: #ffffff; /* 浅色文字 */
--text-dark: #212529; /* 深色文字 */
--text-muted: #6c757d; /* 柔和文字 */
--font-family-base: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Source Han Sans CN';
--font-family-base: 'Source Han Sans CN', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
--border-radius: 0.75rem;
--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--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);
--neon-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
--neon-shadow-hover: 0 0 20px rgba(76, 175, 80, 0.5);
}
* {
@@ -51,13 +52,14 @@ body {
.navbar {
padding: 0.5rem 0;
transition: var(--transition);
background: rgba(30, 30, 30, 0.9) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.95) !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
background: rgba(30, 30, 30, 0.95) !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
/* 品牌logo样式 */
@@ -235,12 +237,80 @@ body {
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
color: var(--text-light);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6);
color: var(--text-light);
}
.btn-outline-primary {
border: 2px solid var(--primary-color);
color: var(--primary-color);
background: transparent;
}
.btn-outline-primary:hover {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
border-color: var(--primary-color);
color: var(--text-light);
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}
.btn-success {
background: linear-gradient(135deg, var(--success-color), #3d8b40);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
color: var(--text-light);
}
.btn-success:hover {
background: linear-gradient(135deg, var(--success-color), var(--success-color));
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6);
color: var(--text-light);
}
.btn-warning {
background: linear-gradient(135deg, var(--warning-color), #e68a00);
box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
color: var(--text-light);
}
.btn-warning:hover {
background: linear-gradient(135deg, var(--warning-color), var(--warning-color));
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 152, 0, 0.6);
color: var(--text-light);
}
.btn-info {
background: linear-gradient(135deg, var(--secondary-color), #1565c0);
box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);
color: var(--text-light);
}
.btn-info:hover {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-color));
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(25, 118, 210, 0.6);
color: var(--text-light);
}
.btn-danger {
background: linear-gradient(135deg, var(--danger-color), #d32f2f);
box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
color: var(--text-light);
}
.btn-danger:hover {
background: linear-gradient(135deg, var(--danger-color), var(--danger-color));
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(244, 67, 54, 0.6);
color: var(--text-light);
}
.btn-outline-secondary {
@@ -307,16 +377,21 @@ body {
/* 统计数据样式 */
.stat-item {
text-align: center;
padding: 1.5rem;
}
.stat-number {
font-size: 2rem;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: var(--primary-color);
text-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}
.stat-label {
font-size: 1rem;
color: var(--text-muted);
font-weight: 500;
}
/* 响应式设计优化 */
@@ -384,15 +459,23 @@ body {
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border 0.75s linear infinite;
color: var(--primary-color);
}
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
/* 加载按钮状态 */
.btn-loading .loading-spinner {
margin-right: 0.5rem;
}
/* 动画效果增强 */
.fade-in-up {
animation: fadeInUp 0.8s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
@keyframes fadeInUp {
@@ -406,6 +489,57 @@ body {
}
}
.fade-in-left {
animation: fadeInLeft 0.8s ease-out forwards;
opacity: 0;
transform: translateX(-30px);
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.fade-in-right {
animation: fadeInRight 0.8s ease-out forwards;
opacity: 0;
transform: translateX(30px);
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.zoom-in {
animation: zoomIn 0.6s ease-out forwards;
opacity: 0;
transform: scale(0.8);
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* 图片优化 */
img {
max-width: 100%;
@@ -415,10 +549,12 @@ img {
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
@@ -430,6 +566,12 @@ img {
background: var(--primary-dark);
}
/* 火狐浏览器滚动条 */
* {
scrollbar-width: thin;
scrollbar-color: var(--primary-color) #f1f1f1;
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
@@ -442,11 +584,20 @@ img {
z-index: 1000;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: var(--text-light);
border: none;
}
.back-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
color: var(--text-light);
}
.back-to-top i {
font-size: 1.25rem;
}
/* 导航栏动画 */
@@ -494,6 +645,7 @@ img {
height: 8px;
border-radius: 10px;
background: rgba(76, 175, 80, 0.1);
overflow: hidden;
}
.progress-bar {
@@ -501,6 +653,22 @@ img {
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
}
.progress-bar.bg-success {
background: linear-gradient(90deg, var(--success-color), #81c784);
}
.progress-bar.bg-warning {
background: linear-gradient(90deg, var(--warning-color), #ffb74d);
}
.progress-bar.bg-info {
background: linear-gradient(90deg, var(--secondary-color), #64b5f6);
}
.progress-bar.bg-danger {
background: linear-gradient(90deg, var(--danger-color), #e57373);
}
/* 数字统计增强 */
.count-up {
font-weight: 700;
@@ -508,6 +676,36 @@ img {
text-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}
/* 面包屑导航样式 */
.breadcrumb {
background-color: transparent;
padding: 1rem 0;
margin-bottom: 0;
}
.breadcrumb-item {
font-size: 0.9rem;
}
.breadcrumb-item a {
color: var(--secondary-color);
text-decoration: none;
transition: var(--transition);
}
.breadcrumb-item a:hover {
color: var(--primary-color);
text-decoration: underline;
}
.breadcrumb-item.active {
color: var(--text-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--text-muted);
}
/* 模态框动画 */
.modal-dialog {
transition: all 0.3s ease;
@@ -524,6 +722,13 @@ img.lazy.loaded {
}
/* 表单增强样式 */
.form-control {
border: 1px solid #ced4da;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
transition: var(--transition);
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
@@ -533,15 +738,101 @@ img.lazy.loaded {
border-color: var(--success-color);
}
.form-control.is-valid:focus {
border-color: var(--success-color);
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}
.form-control.is-invalid {
border-color: var(--danger-color);
}
.form-control.is-invalid:focus {
border-color: var(--danger-color);
box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25);
}
.form-select {
border: 1px solid #ced4da;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
transition: var(--transition);
}
.form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}
.form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.form-check-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}
.invalid-feedback {
display: block;
width: 100%;
margin-top: 0.25rem;
font-size: 0.875em;
color: var(--danger-color);
}
.valid-feedback {
display: block;
width: 100%;
margin-top: 0.25rem;
font-size: 0.875em;
color: var(--success-color);
}
/* 提示框样式 */
.alert {
border: none;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
padding: 1.25rem;
}
.alert-primary {
background-color: rgba(76, 175, 80, 0.15);
color: #2e7d32;
border-left: 4px solid var(--primary-color);
}
.alert-success {
background-color: rgba(76, 175, 80, 0.15);
color: #2e7d32;
border-left: 4px solid var(--success-color);
}
.alert-warning {
background-color: rgba(255, 152, 0, 0.15);
color: #ef6c00;
border-left: 4px solid var(--warning-color);
}
.alert-info {
background-color: rgba(25, 118, 210, 0.15);
color: #0d47a1;
border-left: 4px solid var(--secondary-color);
}
.alert-danger {
background-color: rgba(244, 67, 54, 0.15);
color: #b71c1c;
border-left: 4px solid var(--danger-color);
}
.alert .btn-close {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem;
}
/* 打字机效果 */
@@ -578,7 +869,7 @@ img.lazy.loaded {
.page-transition {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
transition: all 0.3s ease;
}
.page-transition.loaded {
@@ -625,445 +916,89 @@ img.lazy.loaded {
transform: rotateY(5deg) rotateX(5deg);
}
/* 无障碍优化 */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* 按钮增强效果 */
.btn-pressed {
transform: scale(0.95) !important;
transition: transform 0.1s ease;
}
/* 焦点可见性 */
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
/* 卡片增强效果 */
.card {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 打印样式 */
@media print {
.navbar,
.back-to-top,
.floating-element {
display: none !important;
}
.hero-section {
background: white !important;
color: black !important;
}
}
/* 导航栏样式 */
.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;
/* 滚动进度条 */
.scroll-progress {
position: fixed;
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: 3px;
background: rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.scroll-progress-bar {
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
z-index: -1;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
width: 0%;
transition: width 0.1s ease;
}
.btn:hover::before {
left: 100%;
/* 模态框背景模糊 */
.modal-open-blur {
backdrop-filter: blur(5px);
}
.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;
.transform-3d:hover {
transform: none;
}
.hero-section h1 {
font-size: 2.8rem;
.card:hover {
transform: translateY(-5px);
}
.hero-section .lead {
font-size: 1.2rem;
.btn:hover {
transform: translateY(-2px);
}
.navbar-brand {
font-size: 1.3rem;
.scroll-progress {
height: 2px;
}
.card {
margin-bottom: 1.5rem;
}
}
@media (max-width: 576px) {
.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;
.stat-number {
font-size: 2rem;
}
.btn {
width: 100%;
margin-bottom: 0.75rem;
padding: 0.75rem 1.25rem;
padding: 0.75rem 1.5rem;
}
.feature-icon {
margin-bottom: 1rem;
width: 50px;
height: 50px;
font-size: 1.25rem;
.back-to-top {
width: 40px;
height: 40px;
bottom: 20px;
right: 20px;
}
}
/* 大屏幕优化 */
@media (min-width: 1200px) {
.transform-3d {
transition: transform 0.2s ease;
}
.navbar-nav .nav-link {
text-align: center;
margin: 0.25rem 0;
.transform-3d:hover {
transform: rotateY(10deg) rotateX(10deg) scale(1.05);
}
}
/* 工具类 */
.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;
}

356
website/index-enhanced.html
View File

@@ -1,356 +0,0 @@
<!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系统,农业数字化,养殖业">
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<!-- 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.4.0/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">
<!-- 响应式样式 -->
<link href="css/responsive.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"
},
"provider": {
"@type": "Organization",
"name": "NiuMall",
"url": "https://www.niumall.com"
}
}
</script>
</head>
<body>
<!-- 顶部联系栏 -->
<div class="top-bar bg-primary text-white py-2 d-none d-md-block">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8">
<small>
<i class="fas fa-phone me-2"></i>咨询热线：400-xxx-xxxx
<span class="mx-3">|</span>
<i class="fas fa-envelope me-2"></i>邮箱：info@niumall.com
</small>
</div>
<div class="col-md-4 text-end">
<small>
<a href="#" class="text-white text-decoration-none me-3">
<i class="fab fa-weixin me-1"></i>微信
</a>
<a href="#" class="text-white text-decoration-none">
<i class="fab fa-qq me-1"></i>QQ
</a>
</small>
</div>
</div>
</div>
</div>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm" id="mainNavbar">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<div class="logo-container me-2">
<i class="fas fa-cow text-primary fs-2"></i>
</div>
<div class="brand-text">
<div class="brand-name fw-bold">NiuMall</div>
<div class="brand-subtitle">活牛采购智能系统</div>
</div>
</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 mx-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">
<i class="fas fa-home me-1"></i>首页
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
<i class="fas fa-cube me-1"></i>产品中心
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="product.html">产品介绍</a></li>
<li><a class="dropdown-item" href="solutions.html">解决方案</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="demo.html">在线演示</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="cases.html">
<i class="fas fa-trophy me-1"></i>客户案例
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">
<i class="fas fa-newspaper me-1"></i>新闻动态
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">
<i class="fas fa-info-circle me-1"></i>关于我们
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">
<i class="fas fa-envelope me-1"></i>联系我们
</a>
</li>
</ul>
<div class="navbar-actions d-flex gap-2">
<a href="contact.html" class="btn btn-outline-primary btn-sm">
<i class="fas fa-phone me-1"></i>咨询
</a>
<a href="contact.html" class="btn btn-primary btn-sm">
<i class="fas fa-rocket me-1"></i>免费试用
</a>
</div>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section class="hero-section position-relative overflow-hidden" id="hero">
<!-- 背景动画元素 -->
<div class="hero-bg-animation">
<div class="floating-element" style="--delay: 0s; --x: 10%; --y: 20%;">
<i class="fas fa-cow text-primary opacity-25"></i>
</div>
<div class="floating-element" style="--delay: 1s; --x: 80%; --y: 10%;">
<i class="fas fa-truck text-success opacity-25"></i>
</div>
<div class="floating-element" style="--delay: 2s; --x: 20%; --y: 80%;">
<i class="fas fa-chart-line text-info opacity-25"></i>
</div>
<div class="floating-element" style="--delay: 3s; --x: 70%; --y: 70%;">
<i class="fas fa-shield-alt text-warning opacity-25"></i>
</div>
</div>
<div class="container position-relative">
<div class="row align-items-center min-vh-100">
<div class="col-lg-6">
<div class="hero-content" data-aos="fade-right">
<div class="hero-badge mb-3">
<span class="badge bg-primary fs-6 px-3 py-2">
<i class="fas fa-star me-2"></i>行业领先的数字化解决方案
</span>
</div>
<h1 class="hero-title display-3 fw-bold mb-4">
数字化活牛采购
<span class="text-primary">全流程管理</span>
</h1>
<p class="hero-subtitle lead mb-4 text-muted">
专业的SOP采购管理系统，从供应商筛选、订单管理、运输跟踪到财务结算，
<strong class="text-primary">一站式解决</strong>活牛采购的所有难题
</p>
<div class="hero-features mb-4">
<div class="row g-3">
<div class="col-6 col-md-3">
<div class="feature-item text-center">
<i class="fas fa-users text-primary fs-4 mb-2"></i>
<small class="d-block">供应商管理</small>
</div>
</div>
<div class="col-6 col-md-3">
<div class="feature-item text-center">
<i class="fas fa-truck text-success fs-4 mb-2"></i>
<small class="d-block">运输跟踪</small>
</div>
</div>
<div class="col-6 col-md-3">
<div class="feature-item text-center">
<i class="fas fa-shield-alt text-warning fs-4 mb-2"></i>
<small class="d-block">质量保证</small>
</div>
</div>
<div class="col-6 col-md-3">
<div class="feature-item text-center">
<i class="fas fa-chart-line text-info fs-4 mb-2"></i>
<small class="d-block">数据分析</small>
</div>
</div>
</div>
</div>
<div class="hero-actions d-flex flex-wrap gap-3">
<a href="contact.html" class="btn btn-primary btn-lg px-4 py-3">
<i class="fas fa-rocket me-2"></i>立即试用
<small class="d-block mt-1">免费体验30天</small>
</a>
<a href="product.html" class="btn btn-outline-secondary btn-lg px-4 py-3">
<i class="fas fa-play-circle me-2"></i>观看演示
<small class="d-block mt-1">3分钟了解产品</small>
</a>
</div>
<div class="hero-stats mt-5">
<div class="row g-4">
<div class="col-4">
<div class="stat-item text-center">
<div class="stat-number h4 fw-bold text-primary mb-1" data-target="500">0</div>
<small class="text-muted">服务企业</small>
</div>
</div>
<div class="col-4">
<div class="stat-item text-center">
<div class="stat-number h4 fw-bold text-success mb-1" data-target="99">0</div>
<small class="text-muted">满意度%</small>
</div>
</div>
<div class="col-4">
<div class="stat-item text-center">
<div class="stat-number h4 fw-bold text-warning mb-1" data-target="40">0</div>
<small class="text-muted">效率提升%</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="hero-visual" data-aos="fade-left">
<div class="hero-image-container position-relative">
<!-- 主要展示图 -->
<div class="main-visual">
<div class="dashboard-mockup bg-white rounded-3 shadow-lg p-4">
<div class="mockup-header d-flex align-items-center mb-3">
<div class="d-flex gap-2">
<div class="dot bg-danger rounded-circle" style="width: 12px; height: 12px;"></div>
<div class="dot bg-warning rounded-circle" style="width: 12px; height: 12px;"></div>
<div class="dot bg-success rounded-circle" style="width: 12px; height: 12px;"></div>
</div>
<div class="ms-3 text-muted small">活牛采购管理系统</div>
</div>
<div class="mockup-content">
<!-- 模拟仪表盘 -->
<div class="row g-3 mb-4">
<div class="col-6">
<div class="card border-0 bg-primary bg-opacity-10">
<div class="card-body p-3">
<div class="d-flex align-items-center">
<i class="fas fa-shopping-cart text-primary fs-4"></i>
<div class="ms-3">
<div class="h6 mb-0">156</div>
<small class="text-muted">本月订单</small>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card border-0 bg-success bg-opacity-10">
<div class="card-body p-3">
<div class="d-flex align-items-center">
<i class="fas fa-truck text-success fs-4"></i>
<div class="ms-3">
<div class="h6 mb-0">23</div>
<small class="text-muted">运输中</small>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 模拟图表 -->
<div class="chart-area bg-light rounded p-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<small class="text-muted">采购趋势</small>
<div class="progress" style="width: 100px; height: 4px;">
<div class="progress-bar bg-primary" style="width: 75%"></div>
</div>
</div>
<div class="mock-chart d-flex align-items-end gap-1" style="height: 60px;">
<div class="bar bg-primary rounded-top" style="height: 30%; width: 8px;"></div>
<div class="bar bg-primary rounded-top" style="height: 60%; width: 8px;"></div>
<div class="bar bg-primary rounded-top" style="height: 40%; width: 8px;"></div>
<div class="bar bg-primary rounded-top" style="height: 80%; width: 8px;"></div>
<div class="bar bg-primary rounded-top" style="height: 100%; width: 8px;"></div>
<div class="bar bg-primary rounded-top" style="height: 70%; width: 8px;"></div>
<div class="bar bg-primary rounded-top" style="height: 90%; width: 8px;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 浮动元素 -->
<div class="floating-card position-absolute" style="top: -20px; right: -20px;">
<div class="card border-0 shadow-sm" style="width: 200px;">
<div class="card-body p-3">
<div class="d-flex align-items-center">
<i class="fas fa-bell text-warning fs-5"></i>
<div class="ms-2">
<div class="small fw-bold">新订单通知</div>
<div class="tiny text-muted">2分钟前</div>
</div>
</div>
</div>
</div>
</div>
<div class="floating-card position-absolute" style="bottom: -20px; left: -20px;">
<div class="card border-0 shadow-sm" style="width: 180px;">
<div class="card-body p-3">
<div class="d-flex align-items-center">
<i class="fas fa-check-circle text-success fs-5"></i>
<div class="ms-2">
<div class="small fw-bold">运输完成</div>
<div class="tiny text-muted">订单#12345</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 滚动提示 -->
<div class="scroll-indicator position-absolute bottom-0 start-50 translate-middle-x mb-4">
<div class="text-center">
<small class="text-muted d-block mb-2">了解更多</small>
<i class="fas fa-chevron-down text-primary animate-bounce"></i>
</div>
</div>
</section>
<!-- 其他部分保持不变... -->

140
website/index.html
View File

@@ -7,15 +7,6 @@
<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">
{
@@ -29,23 +20,44 @@
"@type": "Offer",
"price": "0",
"priceCurrency": "CNY"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"bestRating": "5",
"worstRating": "1",
"ratingCount": "156"
},
"softwareVersion": "3.2",
"dateModified": "2023-12-15"
}
</script>
<!-- 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">
<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>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<div class="logo-container me-2">
<i class="fas fa-cow text-primary fs-2"></i>
</div>
<div class="brand-text">
<div class="brand-name fw-bold">NiuMall</div>
<div class="brand-subtitle">活牛采购智能系统</div>
</div>
</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">
@@ -78,21 +90,16 @@
</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">
<div class="hero-badge mb-3">
<span class="badge bg-primary">行业领先</span>
</div>
<h1 class="display-4 fw-bold mb-4">数字化活牛采购全流程管理</h1>
<p class="lead mb-4">专业的SOP采购管理系统，从供应商筛选、订单管理、运输跟踪到财务结算，一站式解决活牛采购的所有难题。</p>
@@ -100,7 +107,7 @@
<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">
<a href="demo.html" class="btn btn-outline-light btn-lg">
<i class="fas fa-play-circle me-2"></i>观看演示
</a>
</div>
@@ -114,6 +121,71 @@
</div>
</section>
<!-- 核心功能亮点轮播 -->
<section class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">核心功能亮点</h2>
<p class="text-muted">为什么选择我们的系统</p>
</div>
<div id="featuresCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#featuresCarousel" data-bs-slide-to="0" class="active" aria-current="true"></button>
<button type="button" data-bs-target="#featuresCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#featuresCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-bolt"></i>
</div>
<h3 class="mb-3">智能采购建议</h3>
<p class="lead">基于历史数据和市场趋势分析，系统能够为用户提供智能采购建议，包括采购时机、数量预测、价格趋势等，帮助用户做出更明智的采购决策。</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-mobile-alt"></i>
</div>
<h3 class="mb-3">移动端优化</h3>
<p class="lead">针对移动设备进行了全面优化，界面更加简洁直观，操作更加流畅便捷。无论您是在牧场、运输途中还是办公室，都能轻松管理采购流程。</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="mb-3">数据可视化</h3>
<p class="lead">新增丰富的数据可视化功能，通过图表形式直观展示采购数据、成本分析、供应商绩效等关键指标，让数据更有价值。</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#featuresCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#featuresCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!-- 功能特性 -->
<section class="features-section py-5">
<div class="container">
@@ -175,7 +247,7 @@
</section>
<!-- 统计数据 -->
<section class="stats-section">
<section class="stats-section py-5 bg-dark text-white">
<div class="container">
<div class="row text-center">
<div class="col-md-3 col-6">
@@ -264,7 +336,7 @@
</section>
<!-- 客户案例 -->
<section class="cases-section py-5">
<section class="cases-section py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">客户案例</h2>

428
website/js/main.js
View File

@@ -16,6 +16,20 @@ document.addEventListener('DOMContentLoaded', function() {
initModalEffects();
initSmoothScrolling();
initPreloader();
initCaseFiltering();
initNewsFiltering();
initPageTransitions();
enhanceCardHoverEffects();
enhanceButtonEffects();
initImageZoom();
enhanceBackToTop();
enhanceFormInteractions();
enhanceNavbar();
enhanceCarousel(); // 增强轮播图效果
enhanceModals(); // 增强模态框效果
initSocialShare(); // 社交分享功能
enhanceStatsDisplay(); // 增强统计数据展示
initScrollProgress(); // 页面滚动进度指示器
console.log('官网初始化完成 - 活牛采购智能数字化系统');
});
@@ -703,4 +717,416 @@ function initParticleEffect() {
}
animate();
}
}
// 案例筛选功能
function initCaseFiltering() {
const filterButtons = document.querySelectorAll('[data-filter]');
const caseItems = document.querySelectorAll('.case-grid .col-md-6');
if (!filterButtons.length || !caseItems.length) return;
filterButtons.forEach(button => {
button.addEventListener('click', function() {
const filterValue = this.getAttribute('data-filter');
// 更新激活状态
filterButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
// 筛选案例
caseItems.forEach(item => {
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
item.style.display = 'block';
setTimeout(() => {
item.classList.add('fade-in-up');
}, 100);
} else {
item.style.display = 'none';
}
});
});
});
}
// 新闻筛选功能
function initNewsFiltering() {
const filterButtons = document.querySelectorAll('[data-filter]');
const newsItems = document.querySelectorAll('#news-list .col-12');
const searchInput = document.getElementById('newsSearch');
const searchBtn = document.getElementById('searchBtn');
if (!filterButtons.length || !newsItems.length) return;
// 筛选功能
filterButtons.forEach(button => {
button.addEventListener('click', function() {
const filterValue = this.getAttribute('data-filter');
// 更新激活状态
filterButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
// 筛选新闻
newsItems.forEach(item => {
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
item.style.display = 'block';
setTimeout(() => {
item.classList.add('fade-in-up');
}, 100);
} else {
item.style.display = 'none';
}
});
});
});
// 搜索功能
if (searchInput && searchBtn) {
const performSearch = function() {
const searchTerm = searchInput.value.toLowerCase().trim();
newsItems.forEach(item => {
const title = item.querySelector('.card-title').textContent.toLowerCase();
const content = item.querySelector('.card-text').textContent.toLowerCase();
if (searchTerm === '' || title.includes(searchTerm) || content.includes(searchTerm)) {
item.style.display = 'block';
setTimeout(() => {
item.classList.add('fade-in-up');
}, 100);
} else {
item.style.display = 'none';
}
});
};
searchBtn.addEventListener('click', performSearch);
searchInput.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
performSearch();
}
});
}
}
// 页面过渡动画
function initPageTransitions() {
// 为所有内部链接添加页面切换效果
const links = document.querySelectorAll('a[href^="/"]:not([target])');
links.forEach(link => {
link.addEventListener('click', function(e) {
const href = this.getAttribute('href');
// 如果是锚点链接或外部链接，不使用过渡效果
if (href.startsWith('#') || href.includes('://')) return;
e.preventDefault();
// 添加过渡类
document.body.classList.add('page-transition');
// 延迟跳转以显示过渡效果
setTimeout(() => {
window.location.href = href;
}, 300);
});
});
// 页面加载完成后移除过渡类
window.addEventListener('pageshow', function() {
document.body.classList.remove('page-transition');
});
}
// 增强卡片悬停效果
function enhanceCardHoverEffects() {
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
// 添加3D变换效果
card.addEventListener('mousemove', function(e) {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateY = (x - centerX) / 10;
const rotateX = (centerY - y) / 10;
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
});
card.addEventListener('mouseleave', function() {
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
});
});
}
// 增强按钮点击效果
function enhanceButtonEffects() {
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener('mousedown', function() {
this.classList.add('btn-pressed');
});
button.addEventListener('mouseup', function() {
this.classList.remove('btn-pressed');
});
button.addEventListener('mouseleave', function() {
this.classList.remove('btn-pressed');
});
});
}
// 图片放大效果
function initImageZoom() {
const images = document.querySelectorAll('.card-img-top');
images.forEach(img => {
img.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
});
img.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
}
// 增强返回顶部按钮效果
function enhanceBackToTop() {
const backToTopBtn = document.querySelector('.back-to-top');
if (backToTopBtn) {
// 添加脉冲动画
setInterval(() => {
backToTopBtn.classList.toggle('pulse');
}, 2000);
// 滚动进度指示
window.addEventListener('scroll', function() {
const scrollTop = window.scrollY;
const docHeight = document.body.scrollHeight - window.innerHeight;
const scrollPercent = (scrollTop / docHeight) * 100;
// 可以在这里添加进度指示器
});
}
}
// 增强表单交互效果
function enhanceFormInteractions() {
const formControls = document.querySelectorAll('.form-control, .form-select');
formControls.forEach(control => {
control.addEventListener('focus', function() {
this.parentElement.classList.add('focused');
});
control.addEventListener('blur', function() {
this.parentElement.classList.remove('focused');
});
// 添加输入效果
control.addEventListener('input', function() {
if (this.value.length > 0) {
this.classList.add('has-value');
} else {
this.classList.remove('has-value');
}
});
});
}
// 增强导航栏效果
function enhanceNavbar() {
const navbar = document.querySelector('.navbar');
const navLinks = document.querySelectorAll('.nav-link');
// 添加导航栏品牌动画
const brand = document.querySelector('.navbar-brand');
if (brand) {
brand.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
});
brand.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
}
// 增强导航链接效果
navLinks.forEach(link => {
link.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-2px)';
});
link.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
}
// 增强轮播图效果
function enhanceCarousel() {
const carousels = document.querySelectorAll('.carousel');
carousels.forEach(carousel => {
const carouselElement = new bootstrap.Carousel(carousel, {
interval: 5000,
pause: 'hover',
wrap: true
});
// 添加手动控制增强
const indicators = carousel.querySelectorAll('.carousel-indicators button');
const controls = carousel.querySelectorAll('.carousel-control-prev, .carousel-control-next');
// 指示器悬停效果
indicators.forEach((indicator, index) => {
indicator.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.2)';
});
indicator.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
// 控制按钮效果
controls.forEach(control => {
control.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.1)';
});
control.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
});
}
// 增强模态框效果
function enhanceModals() {
const modals = document.querySelectorAll('.modal');
modals.forEach(modal => {
modal.addEventListener('show.bs.modal', function() {
// 添加背景模糊效果
document.body.classList.add('modal-open-blur');
// 增强模态框动画
this.querySelector('.modal-dialog').style.transform = 'scale(0.8) translateY(-50px)';
this.querySelector('.modal-dialog').style.opacity = '0';
setTimeout(() => {
this.querySelector('.modal-dialog').style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
this.querySelector('.modal-dialog').style.transform = 'scale(1) translateY(0)';
this.querySelector('.modal-dialog').style.opacity = '1';
}, 50);
});
modal.addEventListener('hide.bs.modal', function() {
// 移除背景模糊效果
document.body.classList.remove('modal-open-blur');
this.querySelector('.modal-dialog').style.transform = 'scale(0.8) translateY(-50px)';
this.querySelector('.modal-dialog').style.opacity = '0';
});
});
}
// 添加社交分享功能
function initSocialShare() {
const shareButtons = document.querySelectorAll('.social-share');
if (shareButtons.length > 0) {
shareButtons.forEach(button => {
button.addEventListener('click', function() {
const url = window.location.href;
const title = document.title;
if (navigator.share) {
// 使用原生分享API
navigator.share({
title: title,
url: url
}).catch(console.error);
} else {
// 降级处理：复制链接
const textarea = document.createElement('textarea');
textarea.value = url;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
// 显示提示
showAlert('info', '链接已复制到剪贴板');
}
});
});
}
}
// 增强统计数据展示
function enhanceStatsDisplay() {
const statItems = document.querySelectorAll('.stat-item, .stat-number');
statItems.forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
});
item.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
}
// 添加页面滚动进度指示器
function initScrollProgress() {
// 创建进度条元素
const progressBar = document.createElement('div');
progressBar.className = 'scroll-progress';
progressBar.innerHTML = '<div class="scroll-progress-bar"></div>';
document.body.appendChild(progressBar);
// 添加样式
const style = document.createElement('style');
style.textContent = `
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.scroll-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
width: 0%;
transition: width 0.1s ease;
}
`;
document.head.appendChild(style);
// 监听滚动事件
window.addEventListener('scroll', function() {
const scrollTop = window.scrollY;
const docHeight = document.body.scrollHeight - window.innerHeight;
const scrollPercent = (scrollTop / docHeight) * 100;
progressBar.querySelector('.scroll-progress-bar').style.width = scrollPercent + '%';
});
}

306
website/news.html
View File

@@ -5,6 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻动态 - 活牛采购智能数字化系统</title>
<meta name="description" content="获取活牛采购智能数字化系统的最新动态、行业新闻和技术更新，了解养殖数字化领域的最新发展趋势和公司进展。">
<meta name="keywords" content="活牛采购新闻,行业资讯,产品更新,技术文章,客户案例,活动报道,养殖业趋势,数字化发展">
<!-- 结构化数据 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Blog",
"name": "活牛采购智能数字化系统 - 新闻动态",
"description": "获取活牛采购智能数字化系统的最新动态、行业新闻和技术更新，了解养殖数字化领域的最新发展趋势和公司进展。",
"url": "https://www.niumall.com/news.html"
}
</script>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
@@ -21,11 +33,20 @@
<!-- 导航栏 -->
<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">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<div class="logo-container me-2">
<i class="fas fa-cow text-primary fs-2"></i>
</div>
<div class="brand-text">
<div class="brand-name fw-bold">NiuMall</div>
<div class="brand-subtitle">活牛采购智能系统</div>
</div>
</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">
@@ -68,19 +89,87 @@
</div>
</nav>
<!-- 新闻动态 -->
<!-- 新闻动态英雄区域 -->
<section class="py-5">
<div class="container">
<div class="text-center mb-5">
<h1 class="display-5 fw-bold mb-4">新闻动态</h1>
<p class="lead">获取最新产品资讯和行业动态</p>
<div class="row align-items-center">
<div class="col-lg-8">
<h1 class="display-5 fw-bold mb-4">新闻动态</h1>
<p class="lead">获取最新产品资讯和行业动态，了解活牛采购数字化领域的最新发展趋势</p>
<p>我们定期发布行业洞察、产品更新、技术文章和客户成功案例，帮助您了解行业发展和系统功能。</p>
<div class="mt-4">
<a href="#news-list" class="btn btn-primary btn-lg me-3">
<i class="fas fa-newspaper me-2"></i>查看新闻
</a>
<a href="contact.html" class="btn btn-outline-primary btn-lg">
<i class="fas fa-bell me-2"></i>订阅资讯
</a>
</div>
</div>
<div class="col-lg-4">
<div class="row g-3">
<div class="col-6">
<div class="bg-primary bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-primary mb-2 count-up" data-target="150">0</div>
<div class="stat-label">行业报告</div>
</div>
</div>
<div class="col-6">
<div class="bg-success bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-success mb-2 count-up" data-target="80" data-suffix="%">0%</div>
<div class="stat-label">用户增长</div>
</div>
</div>
<div class="col-6">
<div class="bg-warning bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-warning mb-2 count-up" data-target="50">0</div>
<div class="stat-label">技术文章</div>
</div>
</div>
<div class="col-6">
<div class="bg-info bg-opacity-10 p-3 rounded text-center h-100">
<div class="stat-number display-6 text-info mb-2 count-up" data-target="200">0</div>
<div class="stat-label">客户案例</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 新闻筛选和搜索功能 -->
<section class="py-3 bg-light">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-between">
<div class="d-flex flex-wrap gap-2 mb-3 mb-md-0">
<button class="btn btn-outline-primary btn-sm active" data-filter="all">全部</button>
<button class="btn btn-outline-primary btn-sm" data-filter="product">产品更新</button>
<button class="btn btn-outline-primary btn-sm" data-filter="industry">行业资讯</button>
<button class="btn btn-outline-primary btn-sm" data-filter="case">客户案例</button>
<button class="btn btn-outline-primary btn-sm" data-filter="tech">技术文章</button>
<button class="btn btn-outline-primary btn-sm" data-filter="event">活动报道</button>
</div>
<div class="d-flex">
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="搜索新闻..." id="newsSearch">
<button class="btn btn-primary" type="button" id="searchBtn">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 新闻列表 -->
<section id="news-list" class="py-5">
<div class="container">
<div class="row g-4">
<!-- 新闻1 -->
<div class="col-12">
<div class="card border-0">
<div class="row g-0">
<div class="col-12" data-category="product">
<div class="card border-0 shadow-sm h-100">
<div class="row g-0 h-100">
<div class="col-md-4">
<img src="images/news1.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="产品更新">
</div>
@@ -88,13 +177,13 @@
<div class="card-body h-100 d-flex flex-column">
<div>
<span class="badge bg-primary mb-2">产品更新</span>
<h3 class="card-title">活牛采购智能数字化系统V3.0正式发布</h3>
<p class="card-text text-muted">新版本增加了智能采购建议、移动端优化、数据可视化等功能，进一步提升了用户体验和系统性能。</p>
<h3 class="card-title">活牛采购智能数字化系统V3.2正式发布</h3>
<p class="card-text text-muted">新版本增加了AI智能采购预测、移动端优化、数据可视化等功能，进一步提升了用户体验和系统性能。本次更新重点优化了采购决策支持模块，新增了市场价格趋势分析功能。</p>
</div>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
<i class="far fa-calendar-alt me-1"></i> 2023年10月15日
<i class="far fa-calendar-alt me-1"></i> 2023年12月15日
<i class="far fa-user ms-3 me-1"></i> 产品经理
</small>
<a href="#news-detail-1" class="btn btn-outline-primary">阅读更多</a>
@@ -107,9 +196,9 @@
</div>
<!-- 新闻2 -->
<div class="col-12">
<div class="card border-0">
<div class="row g-0">
<div class="col-12" data-category="industry">
<div class="card border-0 shadow-sm h-100">
<div class="row g-0 h-100">
<div class="col-md-4">
<img src="images/news2.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="行业资讯">
</div>
@@ -118,12 +207,12 @@
<div>
<span class="badge bg-success mb-2">行业资讯</span>
<h3 class="card-title">数字化转型推动畜牧业高质量发展</h3>
<p class="card-text text-muted">随着信息技术的发展，数字化转型已成为畜牧业发展的必然趋势。活牛采购智能数字化系统引领行业变革。</p>
<p class="card-text text-muted">随着信息技术的发展，数字化转型已成为畜牧业发展的必然趋势。活牛采购智能数字化系统引领行业变革，帮助养殖企业提升采购效率，降低经营风险，实现可持续发展。</p>
</div>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
<i class="far fa-calendar-alt me-1"></i> 2023年9月28日
<i class="far fa-calendar-alt me-1"></i> 2023年11月28日
<i class="far fa-user ms-3 me-1"></i> 行业分析师
</small>
<a href="#news-detail-2" class="btn btn-outline-primary">阅读更多</a>
@@ -136,9 +225,9 @@
</div>
<!-- 新闻3 -->
<div class="col-12">
<div class="card border-0">
<div class="row g-0">
<div class="col-12" data-category="case">
<div class="card border-0 shadow-sm h-100">
<div class="row g-0 h-100">
<div class="col-md-4">
<img src="images/news3.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="客户案例">
</div>
@@ -147,12 +236,12 @@
<div>
<span class="badge bg-info mb-2">客户案例</span>
<h3 class="card-title">XX牧业集团成功实施采购数字化项目</h3>
<p class="card-text text-muted">通过与我们合作，XX牧业集团实现了采购流程的全面数字化，采购效率提升40%，成本降低30%。</p>
<p class="card-text text-muted">通过与我们合作，XX牧业集团实现了采购流程的全面数字化，采购效率提升40%，成本降低30%。该项目覆盖了从供应商管理到结算支付的全流程，为集团节省了大量人力成本。</p>
</div>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
<i class="far fa-calendar-alt me-1"></i> 2023年9月12日
<i class="far fa-calendar-alt me-1"></i> 2023年11月12日
<i class="far fa-user ms-3 me-1"></i> 客户成功部
</small>
<a href="#news-detail-3" class="btn btn-outline-primary">阅读更多</a>
@@ -164,15 +253,34 @@
</div>
</div>
<!-- 更多新闻 -->
<div class="col-12">
<div class="card border-0">
<!-- 新闻4 -->
<div class="col-12" data-category="tech">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<h4 class="card-title">系统优化升级，提升用户体验</h4>
<p class="card-text text-muted">我们持续对系统进行优化升级，不断提升用户体验和系统性能。最新版本解决了部分用户反馈的问题。</p>
<span class="badge bg-warning mb-2">技术文章</span>
<h4 class="card-title">基于大数据的活牛价格预测模型研究</h4>
<p class="card-text text-muted">本文介绍了我们研发的活牛价格预测模型，该模型基于历史交易数据、市场供需关系、季节性因素等多个维度进行分析，能够为用户提供准确的价格趋势预测，辅助采购决策。</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
<i class="far fa-calendar-alt me-1"></i> 2023年8月25日
<i class="far fa-calendar-alt me-1"></i> 2023年10月25日
<i class="far fa-user ms-3 me-1"></i> 技术研发部
</small>
<a href="#" class="btn btn-outline-primary">阅读更多</a>
</div>
</div>
</div>
</div>
<!-- 新闻5 -->
<div class="col-12" data-category="product">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<span class="badge bg-primary mb-2">产品更新</span>
<h4 class="card-title">系统优化升级，提升用户体验</h4>
<p class="card-text text-muted">我们持续对系统进行优化升级，不断提升用户体验和系统性能。最新版本解决了部分用户反馈的问题，优化了移动端操作流程，提升了数据加载速度。</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
<i class="far fa-calendar-alt me-1"></i> 2023年10月10日
<i class="far fa-user ms-3 me-1"></i> 技术团队
</small>
<a href="#" class="btn btn-outline-primary">阅读更多</a>
@@ -181,14 +289,45 @@
</div>
</div>
<div class="col-12">
<div class="card border-0">
<!-- 新闻6 -->
<div class="col-12" data-category="event">
<div class="card border-0 shadow-sm h-100">
<div class="row g-0 h-100">
<div class="col-md-4">
<img src="images/news4.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="活动报道">
</div>
<div class="col-md-8">
<div class="card-body h-100 d-flex flex-column">
<div>
<span class="badge bg-danger mb-2">活动报道</span>
<h3 class="card-title">参加2023中国畜牧业博览会圆满成功</h3>
<p class="card-text text-muted">在刚刚结束的2023中国畜牧业博览会上，我们的活牛采购智能数字化系统获得了广泛关注。展会期间与多家行业龙头企业达成合作意向，展示了我们在畜牧行业数字化转型方面的领先优势。</p>
</div>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
<i class="far fa-calendar-alt me-1"></i> 2023年9月18日
<i class="far fa-user ms-3 me-1"></i> 市场部
</small>
<a href="#" class="btn btn-outline-primary">阅读更多</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻7 -->
<div class="col-12" data-category="industry">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<span class="badge bg-success mb-2">行业资讯</span>
<h4 class="card-title">荣获"2023年度畜牧科技创新奖"</h4>
<p class="card-text text-muted">凭借在畜牧行业数字化转型方面的突出贡献，我们的活牛采购智能数字化系统荣获"2023年度畜牧科技创新奖"。</p>
<p class="card-text text-muted">凭借在畜牧行业数字化转型方面的突出贡献，我们的活牛采购智能数字化系统荣获"2023年度畜牧科技创新奖"。这是对我们团队多年努力和创新成果的充分肯定。</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
<i class="far fa-calendar-alt me-1"></i> 2023年8月10日
<i class="far fa-calendar-alt me-1"></i> 2023年9月5日
<i class="far fa-user ms-3 me-1"></i> 市场部
</small>
<a href="#" class="btn btn-outline-primary">阅读更多</a>
@@ -197,14 +336,16 @@
</div>
</div>
<div class="col-12">
<div class="card border-0">
<!-- 新闻8 -->
<div class="col-12" data-category="tech">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<span class="badge bg-warning mb-2">技术文章</span>
<h4 class="card-title">与YY农业大学建立产学研合作关系</h4>
<p class="card-text text-muted">为进一步推动技术创新，我们与YY农业大学签署战略合作协议，共同开展畜牧行业数字化转型研究。</p>
<p class="card-text text-muted">为进一步推动技术创新，我们与YY农业大学签署战略合作协议，共同开展畜牧行业数字化转型研究。双方将在智能采购算法、数据分析模型等领域展开深度合作。</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
<i class="far fa-calendar-alt me-1"></i> 2023年7月18日
<i class="far fa-calendar-alt me-1"></i> 2023年8月22日
<i class="far fa-user ms-3 me-1"></i> 合作发展部
</small>
<a href="#" class="btn btn-outline-primary">阅读更多</a>
@@ -240,34 +381,34 @@
<div class="col-lg-8">
<article>
<span class="badge bg-primary mb-3">产品更新</span>
<h1 class="display-6 mb-4">活牛采购智能数字化系统V3.0正式发布</h1>
<h1 class="display-6 mb-4">活牛采购智能数字化系统V3.2正式发布</h1>
<div class="d-flex text-muted mb-4">
<span class="me-3"><i class="far fa-calendar-alt me-1"></i> 2023年10月15日</span>
<span class="me-3"><i class="far fa-calendar-alt me-1"></i> 2023年12月15日</span>
<span class="me-3"><i class="far fa-user me-1"></i> 产品经理</span>
<span><i class="far fa-eye me-1"></i> 阅读量: 1256</span>
</div>
<img src="images/news1.jpg" alt="产品更新" class="img-fluid rounded mb-4">
<p>我们很高兴地宣布，活牛采购智能数字化系统V3.0版本正式发布！新版本在原有功能基础上进行了全面升级和优化，为用户带来更加智能、便捷的使用体验。</p>
<p>我们很高兴地宣布，活牛采购智能数字化系统V3.2版本正式发布！新版本在原有功能基础上进行了全面升级和优化，为用户带来更加智能、便捷的使用体验。</p>
<h4 class="mt-4">主要更新内容</h4>
<h5 class="mt-3">1. 智能采购建议</h5>
<p>基于历史数据和市场趋势分析，系统能够为用户提供智能采购建议，包括采购时机、数量预测、价格趋势等，帮助用户做出更明智的采购决策。</p>
<h5 class="mt-3">1. AI智能采购预测</h5>
<p>基于历史数据和市场趋势分析，系统能够为用户提供智能采购预测，包括采购时机、数量预测、价格趋势等，帮助用户做出更明智的采购决策。该功能采用了先进的机器学习算法，预测准确率高达90%以上。</p>
<h5 class="mt-3">2. 移动端优化</h5>
<p>针对移动设备进行了全面优化，界面更加简洁直观，操作更加流畅便捷。无论您是在牧场、运输途中还是办公室，都能轻松管理采购流程。</p>
<p>针对移动设备进行了全面优化，界面更加简洁直观，操作更加流畅便捷。无论您是在牧场、运输途中还是办公室，都能轻松管理采购流程。新增了离线模式，即使在网络不稳定的情况下也能正常使用核心功能。</p>
<h5 class="mt-3">3. 数据可视化</h5>
<p>新增丰富的数据可视化功能，通过图表形式直观展示采购数据、成本分析、供应商绩效等关键指标，让数据更有价值。</p>
<p>新增丰富的数据可视化功能，通过图表形式直观展示采购数据、成本分析、供应商绩效等关键指标，让数据更有价值。用户可以自定义报表模板，一键生成采购分析报告。</p>
<h5 class="mt-3">4. 性能优化</h5>
<p>对系统架构进行了优化，提升了数据处理能力和响应速度，即使在高峰期也能保持流畅运行。</p>
<p>对系统架构进行了优化，提升了数据处理能力和响应速度，即使在高峰期也能保持流畅运行。数据库查询效率提升50%，页面加载速度提升30%。</p>
<h4 class="mt-4">用户反馈</h4>
<blockquote class="blockquote">
<p>"V3.0版本的智能采购建议功能非常实用，帮助我们更好地把握市场时机，降低了采购成本。"</p>
<footer class="blockquote-footer">某大型牧业集团采购经理</footer>
<blockquote class="blockquote bg-white p-4 rounded shadow-sm">
<p>"V3.2版本的AI智能采购预测功能非常实用，帮助我们更好地把握市场时机，降低了采购成本。数据显示预测准确率确实很高，为我们的决策提供了有力支持。"</p>
<footer class="blockquote-footer mt-2">某大型牧业集团采购总监</footer>
</blockquote>
<div class="alert alert-info mt-4">
@@ -287,7 +428,14 @@
<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 class="d-flex flex-wrap justify-content-center gap-3">
<a href="contact.html" class="btn btn-light btn-lg">
<i class="fas fa-bell me-2"></i>订阅资讯
</a>
<a href="#news-list" class="btn btn-outline-light btn-lg">
<i class="fas fa-newspaper me-2"></i>查看所有新闻
</a>
</div>
</div>
</div>
</div>
@@ -354,5 +502,63 @@
<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: 800,
once: true
});
// 新闻筛选功能
document.addEventListener('DOMContentLoaded', function() {
const filterButtons = document.querySelectorAll('[data-filter]');
const newsItems = document.querySelectorAll('#news-list .col-12');
const searchInput = document.getElementById('newsSearch');
const searchBtn = document.getElementById('searchBtn');
// 筛选功能
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// 更新活动状态
filterButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
const filter = this.getAttribute('data-filter');
newsItems.forEach(item => {
if (filter === 'all' || item.getAttribute('data-category') === filter) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
// 搜索功能
searchBtn.addEventListener('click', function() {
const searchTerm = searchInput.value.toLowerCase();
newsItems.forEach(item => {
const title = item.querySelector('.card-title').textContent.toLowerCase();
const content = item.querySelector('.card-text').textContent.toLowerCase();
if (title.includes(searchTerm) || content.includes(searchTerm)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
// 回车搜索
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
searchBtn.click();
}
});
});
</script>
</body>
</html>

300
website/product.html
View File

@@ -4,7 +4,25 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品介绍 - 活牛采购智能数字化系统</title>
<meta name="description" content="详细了解活牛采购智能数字化系统的核心功能，包括供应商管理、采购流程、运输跟踪、财务结算等全流程数字化解决方案。">
<meta name="description" content="详细了解活牛采购智能数字化系统的核心功能，包括供应商管理、采购计划、质检流程、运输跟踪、财务结算等全流程数字化解决方案，提升养殖企业采购效率。">
<meta name="keywords" content="活牛采购系统,数字化采购,供应商管理,采购计划,质检流程,运输跟踪,财务结算,养殖业数字化,畜牧管理系统">
<!-- 结构化数据 -->
<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>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
@@ -19,8 +37,14 @@
<!-- 导航栏 -->
<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 class="navbar-brand d-flex align-items-center" href="index.html">
<div class="logo-container me-2">
<i class="fas fa-cow text-primary fs-2"></i>
</div>
<div class="brand-text">
<div class="brand-name fw-bold">NiuMall</div>
<div class="brand-subtitle">活牛采购智能系统</div>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@@ -78,8 +102,8 @@
<p class="lead">活牛采购智能数字化系统是一套专为畜牧养殖行业设计的全流程采购管理解决方案，通过数字化技术提升采购效率，降低运营成本。</p>
<p>系统集成了供应商管理、采购计划、质检流程、运输跟踪、财务结算等核心功能模块，实现采购全流程的数字化管理。</p>
<div class="mt-4">
<a href="contact.html" class="btn btn-primary btn-lg me-3">
<i class="fas fa-rocket me-2"></i>免费试用
<a href="demo.html" class="btn btn-primary btn-lg me-3">
<i class="fas fa-play me-2"></i>观看演示
</a>
<a href="#features" class="btn btn-outline-primary btn-lg">
<i class="fas fa-info-circle me-2"></i>查看详情
@@ -93,11 +117,211 @@
</div>
</section>
<!-- 核心功能 -->
<!-- 四大用户角色功能详解 -->
<section class="py-5 bg-light">
<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 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
<i class="fas fa-user-tie"></i>
</div>
<h5>企业管理者</h5>
<p class="text-muted">全面掌握采购数据，实时监控业务进展，科学决策支持</p>
<ul class="text-start">
<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>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
<i class="fas fa-user"></i>
</div>
<h5>采购人员</h5>
<p class="text-muted">高效完成采购任务，简化操作流程，提升工作效率</p>
<ul class="text-start">
<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>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
<i class="fas fa-truck-loading"></i>
</div>
<h5>运输团队</h5>
<p class="text-muted">实时掌握运输任务，确保货物安全准时送达</p>
<ul class="text-start">
<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>GPS实时跟踪</li>
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>异常情况处理</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
<i class="fas fa-user-shield"></i>
</div>
<h5>质检人员</h5>
<p class="text-muted">标准化质检流程，确保产品质量符合标准</p>
<ul class="text-start">
<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>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 采购全流程可视化展示 -->
<section class="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">
<div class="col-12">
<div class="process-timeline">
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
1
</div>
<h5 class="text-center mb-3">需求计划</h5>
<p class="text-center text-muted">根据市场需求和库存情况制定采购计划</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>需求预测分析</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>预算制定</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>采购清单生成</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
2
</div>
<h5 class="text-center mb-3">供应商筛选</h5>
<p class="text-center text-muted">基于资质和历史表现选择优质供应商</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>供应商库管理</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>资质审核</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>价格比较</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
3
</div>
<h5 class="text-center mb-3">订单确认</h5>
<p class="text-center text-muted">与供应商确认订单细节和交期</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>订单创建</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>合同签署</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>付款安排</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
4
</div>
<h5 class="text-center mb-3">质检验收</h5>
<p class="text-center text-muted">严格按照标准进行质量检验</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>证件核查</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>现场检验</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>质检报告</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
5
</div>
<h5 class="text-center mb-3">运输跟踪</h5>
<p class="text-center text-muted">全程可视化监控运输过程</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>运输计划</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>GPS跟踪</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>异常预警</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
6
</div>
<h5 class="text-center mb-3">结算支付</h5>
<p class="text-center text-muted">自动化财务结算流程</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>对账确认</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>发票管理</li>
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>付款执行</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心功能模块 -->
<section id="features" class="py-5 bg-dark">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">核心功能</h2>
<h2 class="display-6 mb-3">核心功能模块</h2>
<p class="text-muted">一站式解决活牛采购全流程管理需求</p>
</div>
@@ -207,11 +431,11 @@
</div>
</section>
<!-- 技术优势 -->
<!-- 系统特色和优势 -->
<section class="py-5">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">技术优势</h2>
<h2 class="display-6 mb-3">系统特色和优势</h2>
<p class="text-muted">领先的技术架构，确保系统稳定高效运行</p>
</div>
@@ -259,6 +483,56 @@
</div>
</section>
<!-- 功能演示 -->
<section class="py-5 bg-light">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="display-6 mb-4">功能演示</h2>
<p class="lead">通过在线演示，您可以直观了解系统的强大功能和便捷操作。</p>
<p>我们提供完整的系统演示，展示从采购计划制定到财务结算的全流程操作，让您全面了解系统如何提升您的采购效率。</p>
<a href="demo.html" class="btn btn-primary btn-lg">
<i class="fas fa-play-circle me-2"></i>观看在线演示
</a>
</div>
<div class="col-lg-6">
<div class="dashboard-mockup bg-white rounded shadow p-4 mt-4 mt-lg-0">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0">数据驾驶舱</h5>
<span class="badge bg-primary">实时数据</span>
</div>
<div class="row g-3">
<div class="col-6">
<div class="bg-primary bg-opacity-10 p-3 rounded text-center">
<div class="h4 text-primary mb-0 count-up" data-target="156">0</div>
<small>本月订单</small>
</div>
</div>
<div class="col-6">
<div class="bg-success bg-opacity-10 p-3 rounded text-center">
<div class="h4 text-success mb-0 count-up" data-target="98" data-suffix="%">0%</div>
<small>完成率</small>
</div>
</div>
<div class="col-6">
<div class="bg-warning bg-opacity-10 p-3 rounded text-center">
<div class="h4 text-warning mb-0 count-up" data-target="24">0</div>
<small>运输中</small>
</div>
</div>
<div class="col-6">
<div class="bg-info bg-opacity-10 p-3 rounded text-center">
<div class="h4 text-info mb-0 count-up" data-target="99" data-suffix="%">0%</div>
<small>质量合格率</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-5">
<div class="container">
@@ -333,5 +607,13 @@
<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: 800,
once: true
});
</script>
</body>
</html>

435
website/solutions.html
View File

@@ -4,7 +4,25 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>解决方案 - 活牛采购智能数字化系统</title>
<meta name="description" content="活牛采购智能数字化系统针对不同行业和企业规模的专业解决方案，提供全流程数字化采购管理服务。">
<meta name="description" content="活牛采购智能数字化系统针对不同行业和企业规模的专业解决方案，提供全流程数字化采购管理服务，助力养殖企业实现数字化转型。">
<meta name="keywords" content="活牛采购解决方案,养殖业数字化转型,规模化养殖,家庭牧场,活牛贸易商,采购管理方案,数字化解决方案">
<!-- 结构化数据 -->
<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>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
@@ -21,8 +39,14 @@
<!-- 导航栏 -->
<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 class="navbar-brand d-flex align-items-center" href="index.html">
<div class="logo-container me-2">
<i class="fas fa-cow text-primary fs-2"></i>
</div>
<div class="brand-text">
<div class="brand-name fw-bold">NiuMall</div>
<div class="brand-subtitle">活牛采购智能系统</div>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@@ -71,64 +95,88 @@
</div>
</nav>
<!-- 解决方案 -->
<!-- 解决方案英雄区域 -->
<section class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-5 fw-bold mb-4">行业解决方案</h1>
<p class="lead">针对不同规模和类型的畜牧企业提供定制化解决方案，助力企业实现数字化转型</p>
<p>我们的解决方案基于多年行业经验积累，结合先进的数字化技术，为企业提供量身定制的采购管理服务。</p>
<div class="mt-4">
<a href="#solutions" class="btn btn-primary btn-lg me-3">
<i class="fas fa-th-large me-2"></i>查看方案
</a>
<a href="cases.html" class="btn btn-outline-primary btn-lg">
<i class="fas fa-user-check me-2"></i>客户案例
</a>
</div>
</div>
<div class="col-lg-6">
<img src="images/solution-banner.jpg" alt="解决方案" class="img-fluid rounded shadow" loading="lazy">
</div>
</div>
</div>
</section>
<!-- 按行业分类的解决方案 -->
<section id="solutions" class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h1 class="display-5 fw-bold mb-4">行业解决方案</h1>
<p class="lead">针对不同规模和类型的畜牧企业提供定制化解决方案</p>
<h2 class="display-6 mb-3">按行业分类的解决方案</h2>
<p class="text-muted">针对不同细分行业的特殊需求提供专业解决方案</p>
</div>
<div class="row g-4 mb-5">
<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 solution-card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="feature-icon mb-4 mx-auto">
<i class="fas fa-building"></i>
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
<i class="fas fa-tractor"></i>
</div>
<h5 class="card-title text-center">大型养殖企业</h5>
<p class="card-text">针对年采购量超过1000头的大型养殖企业，提供集团化采购管理解决方案。</p>
<h5 class="card-title text-center">规模化养殖</h5>
<p class="card-text">针对年出栏量超过5000头的大型养殖场，提供集团化采购管理解决方案。</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>
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>集团采购协同</li>
</ul>
<div class="text-center mt-4">
<a href="contact.html" class="btn btn-primary">获取方案</a>
</div>
</div>
<div class="card-footer bg-transparent border-0 text-center">
<a href="contact.html" class="btn btn-primary">获取方案</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card solution-card h-100 border-0">
<div class="card solution-card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="feature-icon mb-4 mx-auto">
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
<i class="fas fa-home"></i>
</div>
<h5 class="card-title text-center">中小型牧场</h5>
<p class="card-text">针对年采购量在100-1000头的中小型牧场，提供简化版采购管理方案。</p>
<h5 class="card-title text-center">家庭牧场</h5>
<p class="card-text">针对年出栏量在500-5000头的中小型牧场，提供简化版采购管理方案。</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>
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>移动端支持</li>
</ul>
<div class="text-center mt-4">
<a href="contact.html" class="btn btn-primary">获取方案</a>
</div>
</div>
<div class="card-footer bg-transparent border-0 text-center">
<a href="contact.html" class="btn btn-primary">获取方案</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card solution-card h-100 border-0">
<div class="card solution-card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="feature-icon mb-4 mx-auto">
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
<i class="fas fa-exchange-alt"></i>
</div>
<h5 class="card-title text-center">贸易商</h5>
<h5 class="card-title text-center">活牛贸易</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>
@@ -136,57 +184,265 @@
<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>
<div class="text-center mt-4">
<a href="contact.html" class="btn btn-primary">获取方案</a>
</div>
<div class="card-footer bg-transparent border-0 text-center">
<a href="contact.html" class="btn btn-primary">获取方案</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 按企业规模的定制方案 -->
<section class="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-lg-3 col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
<i class="fas fa-seedling"></i>
</div>
<h5>小微企业</h5>
<p class="text-muted">年采购量&lt;200头</p>
<ul class="list-unstyled text-start">
<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-times text-danger me-2"></i>高级分析报表</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
<i class="fas fa-building"></i>
</div>
<h5>中小企业</h5>
<p class="text-muted">年采购量200-1000头</p>
<ul class="list-unstyled text-start">
<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>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
<i class="fas fa-city"></i>
</div>
<h5>大型企业</h5>
<p class="text-muted">年采购量1000-5000头</p>
<ul class="list-unstyled text-start">
<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>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
<i class="fas fa-industry"></i>
</div>
<h5>集团公司</h5>
<p class="text-muted">年采购量&gt;5000头</p>
<ul class="list-unstyled text-start">
<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>BI商业智能</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 成功案例引用 -->
<section class="py-5 bg-dark">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3 text-white">成功案例引用</h2>
<p class="text-muted">真实客户案例展示我们的解决方案如何帮助客户实现业务增长</p>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-0">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<img src="images/case-logo-1.jpg" alt="客户logo" class="rounded-circle me-3" width="50" height="50">
<div>
<h5 class="mb-0">山东畜牧合作社</h5>
<small class="text-muted">大型养殖企业</small>
</div>
</div>
<p class="card-text">通过实施我们的集团化采购解决方案，该合作社实现了采购效率提升40%，成本降低15%。</p>
<div class="d-flex justify-content-between align-items-center">
<div class="text-success">
<i class="fas fa-arrow-up me-1"></i>40% 效率提升
</div>
<a href="cases.html#case1" class="btn btn-outline-primary btn-sm">查看详情</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-0">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<img src="images/case-logo-2.jpg" alt="客户logo" class="rounded-circle me-3" width="50" height="50">
<div>
<h5 class="mb-0">内蒙古家庭牧场</h5>
<small class="text-muted">中小型牧场</small>
</div>
</div>
<p class="card-text">采用我们的简化版采购管理系统后，牧场主表示操作简便，采购周期缩短30%。</p>
<div class="d-flex justify-content-between align-items-center">
<div class="text-success">
<i class="fas fa-arrow-up me-1"></i>30% 周期缩短
</div>
<a href="cases.html#case2" class="btn btn-outline-primary btn-sm">查看详情</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-0">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<img src="images/case-logo-3.jpg" alt="客户logo" class="rounded-circle me-3" width="50" height="50">
<div>
<h5 class="mb-0">华南活牛贸易公司</h5>
<small class="text-muted">贸易商</small>
</div>
</div>
<p class="card-text">使用我们的贸易商解决方案后，该公司订单处理效率提升50%，客户满意度显著提高。</p>
<div class="d-flex justify-content-between align-items-center">
<div class="text-success">
<i class="fas fa-arrow-up me-1"></i>50% 效率提升
</div>
<a href="cases.html#case3" class="btn btn-outline-primary btn-sm">查看详情</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 效益分析和ROI计算 -->
<section class="py-5">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">效益分析和ROI计算</h2>
<p class="text-muted">我们的解决方案如何帮助您实现投资回报最大化</p>
</div>
<div class="row align-items-center mt-5">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="display-6 mb-4">为什么选择我们的解决方案？</h2>
<p>我们的解决方案基于多年行业经验积累，结合先进的数字化技术，为企业提供量身定制的采购管理服务。</p>
<div class="mt-4">
<div class="d-flex mb-3">
<div class="flex-shrink-0">
<i class="fas fa-check-circle text-success fa-2x"></i>
</div>
<div class="flex-grow-1 ms-3">
<h5>行业专业性</h5>
<p class="mb-0">深耕畜牧行业多年，深刻理解行业特点和需求</p>
</div>
<h3 class="mb-4">数字化采购带来的核心价值</h3>
<div class="mb-4">
<div class="d-flex justify-content-between mb-2">
<span>采购效率提升</span>
<span class="fw-bold">30-50%</span>
</div>
<div class="d-flex mb-3">
<div class="flex-shrink-0">
<i class="fas fa-check-circle text-success fa-2x"></i>
</div>
<div class="flex-grow-1 ms-3">
<h5>技术先进性</h5>
<p class="mb-0">采用前沿技术架构，确保系统稳定高效运行</p>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 45%"></div>
</div>
<div class="d-flex">
<div class="flex-shrink-0">
<i class="fas fa-check-circle text-success fa-2x"></i>
</div>
<div class="flex-grow-1 ms-3">
<h5>服务全面性</h5>
<p class="mb-0">提供从咨询、实施到运维的全生命周期服务</p>
</div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-between mb-2">
<span>采购成本降低</span>
<span class="fw-bold">10-20%</span>
</div>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 15%"></div>
</div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-between mb-2">
<span>风险控制能力</span>
<span class="fw-bold">显著提升</span>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 80%"></div>
</div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-between mb-2">
<span>决策支持能力</span>
<span class="fw-bold">全面提升</span>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 90%"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<img src="images/solution-banner.jpg" alt="解决方案优势" class="img-fluid rounded shadow" loading="lazy">
<div class="card border-0 shadow-sm">
<div class="card-body">
<h4 class="card-title mb-4">投资回报分析</h4>
<div class="row g-3">
<div class="col-md-6">
<div class="bg-primary bg-opacity-10 p-3 rounded text-center">
<div class="h4 text-primary mb-0">3-6个月</div>
<small>投资回收期</small>
</div>
</div>
<div class="col-md-6">
<div class="bg-success bg-opacity-10 p-3 rounded text-center">
<div class="h4 text-success mb-0">5:1</div>
<small>平均ROI</small>
</div>
</div>
<div class="col-md-6">
<div class="bg-warning bg-opacity-10 p-3 rounded text-center">
<div class="h4 text-warning mb-0">15%</div>
<small>年成本节约</small>
</div>
</div>
<div class="col-md-6">
<div class="bg-info bg-opacity-10 p-3 rounded text-center">
<div class="h4 text-info mb-0">40%</div>
<small>效率提升</small>
</div>
</div>
</div>
<div class="mt-4">
<p class="mb-0"><i class="fas fa-lightbulb text-warning me-2"></i>根据行业数据统计，采用数字化采购系统的企业平均可在6个月内收回投资成本。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 实施流程 -->
<section class="py-5 bg-dark">
<section class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-6 mb-3">实施流程</h2>
@@ -195,42 +451,50 @@
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="text-center">
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-comments"></i>
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
<i class="fas fa-comments"></i>
</div>
<h5>需求调研</h5>
<p class="text-muted">深入了解企业现状和需求，制定个性化方案</p>
</div>
<h5>需求调研</h5>
<p class="text-muted">深入了解企业现状和需求，制定个性化方案</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="text-center">
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-cogs"></i>
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
<i class="fas fa-cogs"></i>
</div>
<h5>系统部署</h5>
<p class="text-muted">快速部署系统环境，进行基础配置</p>
</div>
<h5>系统部署</h5>
<p class="text-muted">快速部署系统环境，进行基础配置</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="text-center">
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-graduation-cap"></i>
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
<i class="fas fa-graduation-cap"></i>
</div>
<h5>培训指导</h5>
<p class="text-muted">提供全面培训，确保用户熟练使用</p>
</div>
<h5>培训指导</h5>
<p class="text-muted">提供全面培训，确保用户熟练使用</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="text-center">
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-sync-alt"></i>
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center">
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
<i class="fas fa-sync-alt"></i>
</div>
<h5>持续优化</h5>
<p class="text-muted">根据使用反馈，持续优化系统功能</p>
</div>
<h5>持续优化</h5>
<p class="text-muted">根据使用反馈，持续优化系统功能</p>
</div>
</div>
</div>
@@ -244,7 +508,14 @@
<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 class="d-flex flex-wrap justify-content-center gap-3">
<a href="contact.html" class="btn btn-light btn-lg">
<i class="fas fa-phone me-2"></i>联系我们
</a>
<a href="demo.html" class="btn btn-outline-light btn-lg">
<i class="fas fa-play-circle me-2"></i>预约演示
</a>
</div>
</div>
</div>
</div>
@@ -311,5 +582,13 @@
<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: 800,
once: true
});
</script>
</body>
</html>