添加 IntelliJ IDEA 项目配置文件
This commit is contained in:
ylweng
84
website/MAINTENANCE.md
Normal file
84
website/MAINTENANCE.md
Normal file
@@ -0,0 +1,84 @@
|
||||
# Website 维护指南
|
||||
|
||||
## 📁 文件结构
|
||||
```
|
||||
website/
|
||||
├── css/custom.css # 自定义样式
|
||||
├── js/main.js # 主要脚本
|
||||
├── images/ # 图片资源
|
||||
├── index.html # 首页
|
||||
├── product.html # 产品介绍
|
||||
├── solutions.html # 解决方案
|
||||
├── cases.html # 客户案例
|
||||
├── news.html # 新闻动态
|
||||
├── about.html # 关于我们
|
||||
└── contact.html # 联系我们
|
||||
```
|
||||
|
||||
## 🔧 维护任务
|
||||
|
||||
### 内容更新
|
||||
1. **新闻更新**：编辑 `news.html`，添加新内容
|
||||
2. **产品信息**：更新 `product.html` 产品功能
|
||||
3. **客户案例**：在 `cases.html` 添加成功案例
|
||||
4. **联系信息**：修改 `contact.html` 联系方式
|
||||
|
||||
### 图片管理
|
||||
- 使用WebP格式优化加载速度
|
||||
- 图片大小控制在500KB以内
|
||||
- 添加适当的alt属性
|
||||
|
||||
### SEO优化
|
||||
- 更新页面title和meta描述
|
||||
- 检查关键词密度（2-3%）
|
||||
- 保持H标签层次结构
|
||||
- 添加结构化数据标记
|
||||
|
||||
## 🚀 部署流程
|
||||
|
||||
### 本地测试
|
||||
```bash
|
||||
# Python服务器
|
||||
python -m http.server 8080
|
||||
|
||||
# Node.js服务器
|
||||
npx serve . -p 8080
|
||||
```
|
||||
|
||||
### 生产部署
|
||||
```bash
|
||||
# 上传文件到服务器
|
||||
scp -r website/* user@server:/var/www/html/
|
||||
|
||||
# 检查文件权限
|
||||
chmod -R 644 /var/www/html/*
|
||||
chmod 755 /var/www/html/
|
||||
```
|
||||
|
||||
## 📊 性能监控
|
||||
|
||||
### 关键指标
|
||||
- 页面加载时间 < 3秒
|
||||
- 首屏渲染时间 < 1.5秒
|
||||
- Google PageSpeed 分数 > 90
|
||||
|
||||
### 优化建议
|
||||
- 启用Gzip压缩
|
||||
- 配置浏览器缓存
|
||||
- 使用CDN加速
|
||||
- 图片懒加载
|
||||
|
||||
## 🔍 SEO检查清单
|
||||
|
||||
- [ ] 页面标题包含目标关键词
|
||||
- [ ] Meta描述控制在150字符内
|
||||
- [ ] 图片添加alt属性
|
||||
- [ ] 内链和外链正常
|
||||
- [ ] 移动端适配良好
|
||||
- [ ] 页面加载速度优化
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
- **前端开发**：frontend@niumall.com
|
||||
- **SEO优化**：seo@niumall.com
|
||||
- **服务器运维**：ops@niumall.com
|
||||
656
website/api.html
Normal file
656
website/api.html
Normal file
@@ -0,0 +1,656 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>API接口文档 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="活牛采购智能数字化系统API接口文档，提供完整的接口说明和示例代码。">
|
||||
|
||||
<!-- 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">
|
||||
<!-- Prism.js 代码高亮 -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/responsive.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.api-container {
|
||||
background: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.api-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 4rem 0;
|
||||
margin-top: -100px;
|
||||
padding-top: 150px;
|
||||
}
|
||||
|
||||
.api-sidebar {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
max-height: calc(100vh - 140px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.api-content {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.api-nav-item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin: 0.25rem 0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.api-nav-item:hover {
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
color: var(--primary-color);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.api-nav-item.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.endpoint-card {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.endpoint-header {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.method-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.method-get { background: #28a745; color: white; }
|
||||
.method-post { background: #007bff; color: white; }
|
||||
.method-put { background: #ffc107; color: black; }
|
||||
.method-delete { background: #dc3545; color: white; }
|
||||
|
||||
.endpoint-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.param-table {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.param-table th {
|
||||
background: #f8f9fa;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.param-table td {
|
||||
border: 1px solid #e9ecef;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.response-example {
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
padding: 1rem;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.api-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.api-section.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<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>
|
||||
|
||||
<div class="navbar-nav ms-auto">
|
||||
<a href="index.html" class="nav-link">
|
||||
<i class="fas fa-home me-1"></i>返回首页
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- API文档页面 -->
|
||||
<div class="api-container">
|
||||
<!-- 页面标题 -->
|
||||
<section class="api-header">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="display-4 fw-bold mb-3">API接口文档</h1>
|
||||
<p class="lead">完整的REST API接口文档，支持开发者快速集成活牛采购系统</p>
|
||||
<div class="d-flex gap-3 mt-4">
|
||||
<div class="badge bg-primary fs-6 px-3 py-2">
|
||||
<i class="fas fa-code me-2"></i>RESTful API
|
||||
</div>
|
||||
<div class="badge bg-success fs-6 px-3 py-2">
|
||||
<i class="fas fa-shield-alt me-2"></i>JWT认证
|
||||
</div>
|
||||
<div class="badge bg-info fs-6 px-3 py-2">
|
||||
<i class="fas fa-database me-2"></i>JSON格式
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 text-center">
|
||||
<div class="api-info">
|
||||
<h5 class="mb-3">API信息</h5>
|
||||
<p><strong>基础URL:</strong><br>https://api.niumall.com/v1</p>
|
||||
<p><strong>版本:</strong> v1.0</p>
|
||||
<p><strong>认证:</strong> Bearer Token</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- API文档内容 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- 侧边导航 -->
|
||||
<div class="col-lg-3">
|
||||
<div class="api-sidebar">
|
||||
<h5 class="mb-3">接口分类</h5>
|
||||
<div class="api-nav">
|
||||
<a href="#overview" class="api-nav-item active" onclick="showSection('overview')">
|
||||
<i class="fas fa-info-circle me-2"></i>概述
|
||||
</a>
|
||||
<a href="#auth" class="api-nav-item" onclick="showSection('auth')">
|
||||
<i class="fas fa-key me-2"></i>认证授权
|
||||
</a>
|
||||
<a href="#users" class="api-nav-item" onclick="showSection('users')">
|
||||
<i class="fas fa-users me-2"></i>用户管理
|
||||
</a>
|
||||
<a href="#orders" class="api-nav-item" onclick="showSection('orders')">
|
||||
<i class="fas fa-shopping-cart me-2"></i>订单管理
|
||||
</a>
|
||||
<a href="#suppliers" class="api-nav-item" onclick="showSection('suppliers')">
|
||||
<i class="fas fa-store me-2"></i>供应商管理
|
||||
</a>
|
||||
<a href="#transport" class="api-nav-item" onclick="showSection('transport')">
|
||||
<i class="fas fa-truck me-2"></i>运输管理
|
||||
</a>
|
||||
<a href="#finance" class="api-nav-item" onclick="showSection('finance')">
|
||||
<i class="fas fa-chart-line me-2"></i>财务管理
|
||||
</a>
|
||||
<a href="#errors" class="api-nav-item" onclick="showSection('errors')">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>错误处理
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API文档内容区域 -->
|
||||
<div class="col-lg-9">
|
||||
<div class="api-content">
|
||||
|
||||
<!-- 概述 -->
|
||||
<div id="overview" class="api-section active">
|
||||
<h3 class="mb-4">API概述</h3>
|
||||
<p class="text-muted mb-4">活牛采购智能数字化系统提供完整的REST API接口，支持开发者快速集成和自定义开发。</p>
|
||||
|
||||
<h5>快速开始</h5>
|
||||
<p>所有API请求都需要使用HTTPS协议，并在请求头中包含有效的JWT Token。</p>
|
||||
|
||||
<div class="code-block position-relative">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre><code class="language-bash">curl -X GET "https://api.niumall.com/v1/orders" \
|
||||
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
|
||||
-H "Content-Type: application/json"</code></pre>
|
||||
</div>
|
||||
|
||||
<h5 class="mt-4">响应格式</h5>
|
||||
<p>所有API响应都使用JSON格式，并遵循统一的响应结构：</p>
|
||||
|
||||
<div class="response-example">
|
||||
<pre><code class="language-json">{
|
||||
"success": true,
|
||||
"data": {},
|
||||
"message": "操作成功",
|
||||
"timestamp": "2024-01-20T12:00:00Z"
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 认证授权 -->
|
||||
<div id="auth" class="api-section">
|
||||
<h3 class="mb-4">认证授权</h3>
|
||||
|
||||
<div class="endpoint-card">
|
||||
<div class="endpoint-header">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="method-badge method-post">POST</span>
|
||||
<span class="ms-3 fw-bold">/auth/login</span>
|
||||
<span class="ms-auto text-muted">用户登录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="endpoint-content">
|
||||
<h6>请求参数</h6>
|
||||
<table class="table param-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数名</th>
|
||||
<th>类型</th>
|
||||
<th>必填</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>username</td>
|
||||
<td>string</td>
|
||||
<td>是</td>
|
||||
<td>用户名或手机号</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>password</td>
|
||||
<td>string</td>
|
||||
<td>是</td>
|
||||
<td>密码</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h6 class="mt-3">请求示例</h6>
|
||||
<div class="code-block position-relative">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre><code class="language-json">{
|
||||
"username": "admin@example.com",
|
||||
"password": "password123"
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<h6 class="mt-3">响应示例</h6>
|
||||
<div class="response-example">
|
||||
<pre><code class="language-json">{
|
||||
"success": true,
|
||||
"data": {
|
||||
"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
|
||||
"token_type": "Bearer",
|
||||
"expires_in": 3600,
|
||||
"user": {
|
||||
"id": 1,
|
||||
"username": "admin",
|
||||
"email": "admin@example.com",
|
||||
"role": "admin"
|
||||
}
|
||||
},
|
||||
"message": "登录成功"
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单管理 -->
|
||||
<div id="orders" class="api-section">
|
||||
<h3 class="mb-4">订单管理</h3>
|
||||
|
||||
<div class="endpoint-card">
|
||||
<div class="endpoint-header">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="method-badge method-get">GET</span>
|
||||
<span class="ms-3 fw-bold">/orders</span>
|
||||
<span class="ms-auto text-muted">获取订单列表</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="endpoint-content">
|
||||
<h6>查询参数</h6>
|
||||
<table class="table param-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数名</th>
|
||||
<th>类型</th>
|
||||
<th>必填</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>page</td>
|
||||
<td>integer</td>
|
||||
<td>否</td>
|
||||
<td>页码，默认1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>limit</td>
|
||||
<td>integer</td>
|
||||
<td>否</td>
|
||||
<td>每页数量，默认20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>status</td>
|
||||
<td>string</td>
|
||||
<td>否</td>
|
||||
<td>订单状态筛选</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h6 class="mt-3">响应示例</h6>
|
||||
<div class="response-example">
|
||||
<pre><code class="language-json">{
|
||||
"success": true,
|
||||
"data": {
|
||||
"orders": [
|
||||
{
|
||||
"id": 1,
|
||||
"order_no": "ORD20240120001",
|
||||
"supplier_id": 101,
|
||||
"supplier_name": "山东畜牧合作社",
|
||||
"cattle_count": 50,
|
||||
"total_weight": 25000,
|
||||
"unit_price": 28.5,
|
||||
"total_amount": 712500,
|
||||
"status": "shipping",
|
||||
"created_at": "2024-01-20T10:00:00Z"
|
||||
}
|
||||
],
|
||||
"pagination": {
|
||||
"current_page": 1,
|
||||
"total_pages": 5,
|
||||
"total_count": 100
|
||||
}
|
||||
},
|
||||
"message": "获取成功"
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="endpoint-card">
|
||||
<div class="endpoint-header">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="method-badge method-post">POST</span>
|
||||
<span class="ms-3 fw-bold">/orders</span>
|
||||
<span class="ms-auto text-muted">创建新订单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="endpoint-content">
|
||||
<h6>请求参数</h6>
|
||||
<table class="table param-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数名</th>
|
||||
<th>类型</th>
|
||||
<th>必填</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>supplier_id</td>
|
||||
<td>integer</td>
|
||||
<td>是</td>
|
||||
<td>供应商ID</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cattle_breed</td>
|
||||
<td>string</td>
|
||||
<td>是</td>
|
||||
<td>牛种类型</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cattle_count</td>
|
||||
<td>integer</td>
|
||||
<td>是</td>
|
||||
<td>牛只数量</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expected_weight</td>
|
||||
<td>decimal</td>
|
||||
<td>是</td>
|
||||
<td>预期重量(kg)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>unit_price</td>
|
||||
<td>decimal</td>
|
||||
<td>是</td>
|
||||
<td>单价(元/kg)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h6 class="mt-3">请求示例</h6>
|
||||
<div class="code-block position-relative">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre><code class="language-json">{
|
||||
"supplier_id": 101,
|
||||
"cattle_breed": "西门塔尔",
|
||||
"cattle_count": 30,
|
||||
"expected_weight": 15000,
|
||||
"unit_price": 28.5,
|
||||
"delivery_address": "北京市朝阳区xx养殖场",
|
||||
"expected_delivery_date": "2024-01-25"
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误处理 -->
|
||||
<div id="errors" class="api-section">
|
||||
<h3 class="mb-4">错误处理</h3>
|
||||
|
||||
<p class="text-muted mb-4">API使用标准HTTP状态码来表示请求的成功或失败状态。</p>
|
||||
|
||||
<h5>HTTP状态码</h5>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>状态码</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">200</span></td>
|
||||
<td>请求成功</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">201</span></td>
|
||||
<td>创建成功</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-warning">400</span></td>
|
||||
<td>请求参数错误</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-danger">401</span></td>
|
||||
<td>未授权，需要登录</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-danger">403</span></td>
|
||||
<td>禁止访问，权限不足</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-danger">404</span></td>
|
||||
<td>资源不存在</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-danger">500</span></td>
|
||||
<td>服务器内部错误</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h5 class="mt-4">错误响应格式</h5>
|
||||
<div class="response-example">
|
||||
<pre><code class="language-json">{
|
||||
"success": false,
|
||||
"error": {
|
||||
"code": "VALIDATION_ERROR",
|
||||
"message": "请求参数验证失败",
|
||||
"details": [
|
||||
{
|
||||
"field": "cattle_count",
|
||||
"message": "牛只数量必须大于0"
|
||||
}
|
||||
]
|
||||
},
|
||||
"timestamp": "2024-01-20T12:00:00Z"
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他部分省略，实际项目中会包含所有API接口 -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Prism.js 代码高亮 -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 显示指定的API部分
|
||||
function showSection(sectionId) {
|
||||
// 隐藏所有部分
|
||||
document.querySelectorAll('.api-section').forEach(section => {
|
||||
section.classList.remove('active');
|
||||
});
|
||||
|
||||
// 移除所有导航项的active类
|
||||
document.querySelectorAll('.api-nav-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
// 显示选中的部分
|
||||
document.getElementById(sectionId).classList.add('active');
|
||||
|
||||
// 激活对应的导航项
|
||||
event.target.classList.add('active');
|
||||
|
||||
// 更新URL hash
|
||||
window.location.hash = sectionId;
|
||||
}
|
||||
|
||||
// 复制代码功能
|
||||
function copyCode(button) {
|
||||
const codeBlock = button.nextElementSibling;
|
||||
const code = codeBlock.textContent;
|
||||
|
||||
navigator.clipboard.writeText(code).then(() => {
|
||||
const originalText = button.textContent;
|
||||
button.textContent = '已复制';
|
||||
button.style.background = 'rgba(40, 167, 69, 0.8)';
|
||||
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
button.style.background = 'rgba(255, 255, 255, 0.1)';
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载时根据hash显示对应部分
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const hash = window.location.hash.substring(1);
|
||||
if (hash && document.getElementById(hash)) {
|
||||
showSection(hash);
|
||||
}
|
||||
|
||||
// 初始化代码高亮
|
||||
if (typeof Prism !== 'undefined') {
|
||||
Prism.highlightAll();
|
||||
}
|
||||
});
|
||||
|
||||
// 平滑滚动到锚点
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -32,11 +32,630 @@
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
line-height: 1.6;
|
||||
color: var(--text-light);
|
||||
background-color: var(--dark-color);
|
||||
color: var(--text-dark);
|
||||
background-color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 顶部联系栏 */
|
||||
.top-bar {
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-bar a:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
/* 导航栏样式增强 */
|
||||
.navbar {
|
||||
padding: 0.5rem 0;
|
||||
transition: var(--transition);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 品牌logo样式 */
|
||||
.logo-container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.brand-text .brand-name {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.brand-text .brand-subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(248, 249, 250, 0.8);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 导航链接增强 */
|
||||
.navbar-nav .nav-link {
|
||||
font-weight: 500;
|
||||
color: var(--text-light) !important;
|
||||
transition: var(--transition);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover {
|
||||
color: var(--primary-color) !important;
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link.active {
|
||||
color: var(--primary-color) !important;
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
/* 下拉菜单 */
|
||||
.dropdown-menu {
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
||||
padding: 0.5rem 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 0.75rem 1.5rem;
|
||||
transition: var(--transition);
|
||||
border-radius: 8px;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
color: var(--primary-color);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
/* 英雄区域现代化设计 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-section .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 英雄区域动画元素 */
|
||||
.hero-bg-animation {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.floating-element {
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
animation-delay: var(--delay);
|
||||
left: var(--x);
|
||||
top: var(--y);
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(5deg); }
|
||||
}
|
||||
|
||||
/* 英雄内容样式 */
|
||||
.hero-content {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-badge .badge {
|
||||
border-radius: 25px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* 英雄区域功能特性 */
|
||||
.hero-features .feature-item {
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.hero-features .feature-item:hover {
|
||||
transform: translateY(-5px);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 按钮增强样式 */
|
||||
.btn {
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
padding: 0.875rem 2rem;
|
||||
transition: var(--transition);
|
||||
border: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.btn-outline-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: translateY(-3px);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 英雄视觉区域 */
|
||||
.hero-visual {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.hero-image-container {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.dashboard-mockup {
|
||||
transform: rotateY(-5deg) rotateX(5deg);
|
||||
transition: var(--transition);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dashboard-mockup:hover {
|
||||
transform: rotateY(0deg) rotateX(0deg) scale(1.02);
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
animation: floatCard 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floating-card:nth-child(2) {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
@keyframes floatCard {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
/* 滚动指示器 */
|
||||
.scroll-indicator {
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||||
40% { transform: translateY(-10px); }
|
||||
60% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
/* 统计数据样式 */
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 响应式设计优化 */
|
||||
@media (max-width: 768px) {
|
||||
.top-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.hero-actions .btn {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.dashboard-mockup {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.hero-features .col-6 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-stats .col-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.brand-text .brand-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.brand-text .brand-subtitle {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.text-shadow {
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.backdrop-blur {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.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); }
|
||||
}
|
||||
|
||||
/* 动画效果增强 */
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片优化 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
/* 返回顶部按钮 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
transition: var(--transition);
|
||||
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
|
||||
}
|
||||
|
||||
/* 导航栏动画 */
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮点击效果 */
|
||||
.btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 卡片悬停增强 */
|
||||
.card {
|
||||
transition: var(--transition);
|
||||
border: none;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.progress {
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
|
||||
}
|
||||
|
||||
/* 数字统计增强 */
|
||||
.count-up {
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
/* 模态框动画 */
|
||||
.modal-dialog {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 懒加载图片 */
|
||||
img.lazy {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
img.lazy.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 表单增强样式 */
|
||||
.form-control:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
|
||||
}
|
||||
|
||||
.form-control.is-valid {
|
||||
border-color: var(--success-color);
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* 提示框样式 */
|
||||
.alert {
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 打字机效果 */
|
||||
.typewriter {
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* 粒子效果容器 */
|
||||
.particles-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
.back-to-top {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.floating-element {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面切换动画 */
|
||||
.page-transition {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.page-transition.loaded {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 高级动画效果 */
|
||||
@keyframes pulseGlow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-glow {
|
||||
animation: pulseGlow 2s infinite;
|
||||
}
|
||||
|
||||
/* 文字渐变效果 */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* 毛玻璃效果 */
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 3D变换效果 */
|
||||
.transform-3d {
|
||||
transform-style: preserve-3d;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.transform-3d:hover {
|
||||
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:focus-visible,
|
||||
.nav-link:focus-visible,
|
||||
.form-control:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.navbar,
|
||||
.back-to-top,
|
||||
.floating-element {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navbar {
|
||||
padding: 1rem 0;
|
||||
|
||||
438
website/css/responsive.css
Normal file
438
website/css/responsive.css
Normal file
@@ -0,0 +1,438 @@
|
||||
/* 移动端响应式优化样式 */
|
||||
|
||||
/* 移动设备优先设计 */
|
||||
@media (max-width: 767.98px) {
|
||||
/* 导航栏优化 */
|
||||
.navbar {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.navbar-brand .brand-text .brand-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navbar-brand .brand-text .brand-subtitle {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
padding: 0.75rem 1rem;
|
||||
margin: 0.25rem 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 英雄区域移动端优化 */
|
||||
.hero-section {
|
||||
min-height: 90vh;
|
||||
padding: 100px 0 50px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-features .col-6 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-features .feature-item {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.hero-actions .btn {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* 隐藏复杂动画元素 */
|
||||
.floating-element,
|
||||
.floating-card,
|
||||
.particles-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dashboard-mockup {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* 统计数据移动端优化 */
|
||||
.hero-stats .col-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* 卡片组件优化 */
|
||||
.card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
/* 按钮优化 */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
/* 表单优化 */
|
||||
.form-control {
|
||||
padding: 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* 模态框优化 */
|
||||
.modal-dialog {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
/* 演示页面移动端优化 */
|
||||
.demo-sidebar {
|
||||
margin-bottom: 2rem;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.demo-nav-item {
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metric-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板设备优化 */
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.hero-actions .btn {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.demo-sidebar {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕优化 */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.metric-number {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 触摸设备优化 */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
/* 移除悬停效果 */
|
||||
.card:hover,
|
||||
.btn:hover,
|
||||
.nav-link:hover,
|
||||
.dashboard-card:hover {
|
||||
transform: none !important;
|
||||
box-shadow: inherit !important;
|
||||
}
|
||||
|
||||
/* 增大点击区域 */
|
||||
.btn {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 优化表单控件 */
|
||||
.form-control,
|
||||
.form-select {
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高对比度模式 */
|
||||
@media (prefers-contrast: high) {
|
||||
.hero-section {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #000;
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 2px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-color: #121212;
|
||||
--text-color: #ffffff;
|
||||
--card-bg: #1e1e1e;
|
||||
--border-color: #333;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
}
|
||||
|
||||
.demo-sidebar,
|
||||
.demo-content,
|
||||
.dashboard-card {
|
||||
background-color: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画效果 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.floating-element,
|
||||
.floating-card {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 横屏模式优化 */
|
||||
@media (orientation: landscape) and (max-height: 500px) {
|
||||
.hero-section {
|
||||
min-height: 100vh;
|
||||
padding: 80px 0 20px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕设备 */
|
||||
@media (max-width: 575.98px) {
|
||||
.container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding: 80px 0 30px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.hero-features .col-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.hero-stats .col-4 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.hero-stats .col-4:nth-child(3) {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
padding: 2rem 0;
|
||||
padding-top: 120px;
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.demo-nav-item {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.metric-number {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式优化 */
|
||||
@media print {
|
||||
.navbar,
|
||||
.back-to-top,
|
||||
.floating-element,
|
||||
.demo-sidebar,
|
||||
.hero-bg-animation {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: white !important;
|
||||
color: black !important;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.demo-content,
|
||||
.dashboard-card {
|
||||
background: white !important;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #ddd !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 12pt;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.card {
|
||||
page-break-inside: avoid;
|
||||
border: 1px solid #ddd !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 可访问性增强 */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.smooth-scroll {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高分辨率屏幕优化 */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.logo-container i {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.metric-number {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
}
|
||||
|
||||
/* 键盘导航优化 */
|
||||
.btn:focus-visible,
|
||||
.nav-link:focus-visible,
|
||||
.form-control:focus-visible,
|
||||
.demo-nav-item:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.25);
|
||||
}
|
||||
|
||||
/* 错误状态优化 */
|
||||
.is-invalid:focus {
|
||||
border-color: var(--danger-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
||||
}
|
||||
|
||||
/* 成功状态优化 */
|
||||
.is-valid:focus {
|
||||
border-color: var(--success-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
|
||||
}
|
||||
473
website/demo.html
Normal file
473
website/demo.html
Normal file
@@ -0,0 +1,473 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>在线演示 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="体验活牛采购智能数字化系统的强大功能，包括供应商管理、运输跟踪、质量控制等核心模块。">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<!-- Chart.js -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.demo-container {
|
||||
background: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 4rem 0;
|
||||
margin-top: -100px;
|
||||
padding-top: 150px;
|
||||
}
|
||||
|
||||
.demo-sidebar {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.demo-nav-item {
|
||||
padding: 0.75rem 1rem;
|
||||
margin: 0.25rem 0;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.demo-nav-item:hover {
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.demo-nav-item.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.metric-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
padding: 1rem;
|
||||
border-radius: 10px;
|
||||
background: #f8f9fa;
|
||||
margin-bottom: 1rem;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.process-step.completed {
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
border-left-color: var(--success-color);
|
||||
}
|
||||
|
||||
.process-step.active {
|
||||
background: rgba(255, 193, 7, 0.1);
|
||||
border-left-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<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>
|
||||
|
||||
<div class="navbar-nav ms-auto">
|
||||
<a href="index.html" class="nav-link">
|
||||
<i class="fas fa-home me-1"></i>返回首页
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 演示页面 -->
|
||||
<div class="demo-container">
|
||||
<!-- 页面标题 -->
|
||||
<section class="demo-header">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="display-4 fw-bold mb-3">系统在线演示</h1>
|
||||
<p class="lead">体验活牛采购智能数字化系统的完整功能，了解如何提升您的采购效率</p>
|
||||
</div>
|
||||
<div class="col-lg-4 text-center">
|
||||
<div class="demo-stats">
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<div class="stat-item text-center">
|
||||
<div class="stat-number count-up" data-target="1000">0</div>
|
||||
<small>活跃用户</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="stat-item text-center">
|
||||
<div class="stat-number count-up" data-target="50000">0</div>
|
||||
<small>完成订单</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 演示内容 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- 侧边导航 -->
|
||||
<div class="col-lg-3">
|
||||
<div class="demo-sidebar">
|
||||
<h5 class="mb-3">功能模块</h5>
|
||||
<div class="demo-nav">
|
||||
<button class="demo-nav-item active" onclick="showDemo('dashboard')">
|
||||
<i class="fas fa-tachometer-alt me-2"></i>
|
||||
数据驾驶舱
|
||||
</button>
|
||||
<button class="demo-nav-item" onclick="showDemo('orders')">
|
||||
<i class="fas fa-shopping-cart me-2"></i>
|
||||
订单管理
|
||||
</button>
|
||||
<button class="demo-nav-item" onclick="showDemo('suppliers')">
|
||||
<i class="fas fa-users me-2"></i>
|
||||
供应商管理
|
||||
</button>
|
||||
<button class="demo-nav-item" onclick="showDemo('transport')">
|
||||
<i class="fas fa-truck me-2"></i>
|
||||
运输跟踪
|
||||
</button>
|
||||
<button class="demo-nav-item" onclick="showDemo('quality')">
|
||||
<i class="fas fa-shield-alt me-2"></i>
|
||||
质量管理
|
||||
</button>
|
||||
<button class="demo-nav-item" onclick="showDemo('finance')">
|
||||
<i class="fas fa-chart-line me-2"></i>
|
||||
财务结算
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 演示内容区域 -->
|
||||
<div class="col-lg-9">
|
||||
<div class="demo-content">
|
||||
<!-- 数据驾驶舱 -->
|
||||
<div id="dashboard-demo" class="demo-section">
|
||||
<h3 class="mb-4">
|
||||
<i class="fas fa-tachometer-alt text-primary me-2"></i>
|
||||
数据驾驶舱
|
||||
</h3>
|
||||
|
||||
<!-- 关键指标 -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="dashboard-card metric-card">
|
||||
<div class="metric-number count-up" data-target="156">0</div>
|
||||
<div class="metric-label">本月订单</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="dashboard-card metric-card">
|
||||
<div class="metric-number count-up" data-target="89" data-suffix="%">0%</div>
|
||||
<div class="metric-label">完成率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="dashboard-card metric-card">
|
||||
<div class="metric-number count-up" data-target="2356">0</div>
|
||||
<div class="metric-label">运输中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="dashboard-card metric-card">
|
||||
<div class="metric-number count-up" data-target="98" data-suffix="%">0%</div>
|
||||
<div class="metric-label">质量合格率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="dashboard-card">
|
||||
<h5 class="mb-3">订单趋势分析</h5>
|
||||
<div class="chart-container">
|
||||
<canvas id="ordersChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="dashboard-card">
|
||||
<h5 class="mb-3">供应商分布</h5>
|
||||
<div class="chart-container">
|
||||
<canvas id="suppliersChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他演示模块 -->
|
||||
<div id="orders-demo" class="demo-section" style="display: none;">
|
||||
<h3 class="mb-4">
|
||||
<i class="fas fa-shopping-cart text-primary me-2"></i>
|
||||
订单管理系统
|
||||
</h3>
|
||||
<p class="text-muted mb-4">完整的订单生命周期管理，从创建到完成的全流程跟踪</p>
|
||||
|
||||
<div class="dashboard-card">
|
||||
<h5 class="mb-3">订单处理流程</h5>
|
||||
<div class="process-step completed">
|
||||
<strong>1. 订单创建</strong> - 采购人员创建采购需求
|
||||
<small class="text-success d-block">✓ 已完成</small>
|
||||
</div>
|
||||
<div class="process-step completed">
|
||||
<strong>2. 供应商确认</strong> - 供应商接受订单并确认交期
|
||||
<small class="text-success d-block">✓ 已完成</small>
|
||||
</div>
|
||||
<div class="process-step active">
|
||||
<strong>3. 质量检验</strong> - 牛只质量检验和证件审核
|
||||
<small class="text-warning d-block">⏳ 进行中</small>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<strong>4. 运输配送</strong> - 专业运输队伍配送
|
||||
<small class="text-muted d-block">○ 待执行</small>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<strong>5. 到货验收</strong> - 买方验收确认
|
||||
<small class="text-muted d-block">○ 待执行</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多演示模块将在这里添加 -->
|
||||
<div id="suppliers-demo" class="demo-section" style="display: none;">
|
||||
<h3 class="mb-4">
|
||||
<i class="fas fa-users text-primary me-2"></i>
|
||||
供应商管理
|
||||
</h3>
|
||||
<p class="text-muted mb-4">全面的供应商资质管理和评估体系</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="dashboard-card text-center">
|
||||
<i class="fas fa-certificate text-primary fs-1 mb-3"></i>
|
||||
<h5>资质认证</h5>
|
||||
<p class="text-muted">营业执照、检疫证明等资质文件管理</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="dashboard-card text-center">
|
||||
<i class="fas fa-star text-warning fs-1 mb-3"></i>
|
||||
<h5>评级管理</h5>
|
||||
<p class="text-muted">基于历史交易的供应商信用评级</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="dashboard-card text-center">
|
||||
<i class="fas fa-chart-bar text-success fs-1 mb-3"></i>
|
||||
<h5>绩效分析</h5>
|
||||
<p class="text-muted">交付准时率、质量合格率统计</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 试用申请区域 -->
|
||||
<section class="py-5 bg-primary text-white">
|
||||
<div class="container text-center">
|
||||
<h2 class="mb-3">准备开始使用了吗？</h2>
|
||||
<p class="lead mb-4">立即申请免费试用，体验完整功能</p>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<form class="trial-form">
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="email" class="form-control" placeholder="请输入您的邮箱地址" required>
|
||||
<button class="btn btn-light btn-lg" type="submit">
|
||||
<i class="fas fa-rocket me-2"></i>立即试用
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 演示模块切换
|
||||
function showDemo(module) {
|
||||
// 隐藏所有演示模块
|
||||
document.querySelectorAll('.demo-section').forEach(section => {
|
||||
section.style.display = 'none';
|
||||
});
|
||||
|
||||
// 移除所有导航项的active类
|
||||
document.querySelectorAll('.demo-nav-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
// 显示选中的模块
|
||||
document.getElementById(module + '-demo').style.display = 'block';
|
||||
|
||||
// 激活对应的导航项
|
||||
event.target.classList.add('active');
|
||||
|
||||
// 重新初始化图表（如果是仪表盘）
|
||||
if (module === 'dashboard') {
|
||||
setTimeout(initCharts, 100);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
function initCharts() {
|
||||
// 订单趋势图
|
||||
const ordersCtx = document.getElementById('ordersChart');
|
||||
if (ordersCtx) {
|
||||
new Chart(ordersCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
datasets: [{
|
||||
label: '订单数量',
|
||||
data: [120, 190, 300, 250, 200, 300],
|
||||
borderColor: '#4CAF50',
|
||||
backgroundColor: 'rgba(76, 175, 80, 0.1)',
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 供应商分布图
|
||||
const suppliersCtx = document.getElementById('suppliersChart');
|
||||
if (suppliersCtx) {
|
||||
new Chart(suppliersCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['华北', '华东', '华南', '西部'],
|
||||
datasets: [{
|
||||
data: [30, 45, 20, 15],
|
||||
backgroundColor: [
|
||||
'#4CAF50',
|
||||
'#2196F3',
|
||||
'#FF9800',
|
||||
'#9C27B0'
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(initCharts, 500);
|
||||
|
||||
// 试用表单提交
|
||||
document.querySelector('.trial-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const email = this.querySelector('input[type="email"]').value;
|
||||
showAlert('success', '申请提交成功！我们会尽快与您联系。');
|
||||
this.reset();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
356
website/index-enhanced.html
Normal file
356
website/index-enhanced.html
Normal file
@@ -0,0 +1,356 @@
|
||||
<!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>
|
||||
|
||||
<!-- 其他部分保持不变... -->
|
||||
@@ -9,6 +9,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
initBackToTop();
|
||||
initImageLazyLoading();
|
||||
initFormValidation();
|
||||
initParticleEffect();
|
||||
initTypewriter();
|
||||
initProgressBars();
|
||||
initCountUp();
|
||||
initModalEffects();
|
||||
initSmoothScrolling();
|
||||
initPreloader();
|
||||
|
||||
console.log('官网初始化完成 - 活牛采购智能数字化系统');
|
||||
});
|
||||
@@ -17,23 +24,47 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
function initNavigation() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const navbarToggler = document.querySelector('.navbar-toggler');
|
||||
const navbarCollapse = document.querySelector('.navbar-collapse');
|
||||
|
||||
// 滚动时导航栏样式变化
|
||||
window.addEventListener('scroll', function() {
|
||||
window.addEventListener('scroll', throttle(function() {
|
||||
if (window.scrollY > 100) {
|
||||
navbar.classList.add('navbar-scrolled');
|
||||
navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
|
||||
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
|
||||
navbar.classList.add('navbar-scrolled', 'scrolled');
|
||||
navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.95)';
|
||||
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.3)';
|
||||
navbar.style.backdropFilter = 'blur(10px)';
|
||||
} else {
|
||||
navbar.classList.remove('navbar-scrolled');
|
||||
navbar.style.backgroundColor = 'rgba(255, 255, 255, 1)';
|
||||
navbar.classList.remove('navbar-scrolled', 'scrolled');
|
||||
navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
|
||||
navbar.style.boxShadow = 'none';
|
||||
}
|
||||
});
|
||||
}, 100));
|
||||
|
||||
// 移动端导航切换
|
||||
if (navbarToggler && navbarCollapse) {
|
||||
navbarToggler.addEventListener('click', function() {
|
||||
navbarCollapse.classList.toggle('show');
|
||||
this.classList.toggle('collapsed');
|
||||
|
||||
// 动画效果
|
||||
if (navbarCollapse.classList.contains('show')) {
|
||||
navbarCollapse.style.animation = 'slideDown 0.3s ease-out';
|
||||
} else {
|
||||
navbarCollapse.style.animation = 'slideUp 0.3s ease-out';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 导航链接点击效果
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
// 添加点击动画
|
||||
this.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
this.style.transform = 'scale(1)';
|
||||
}, 150);
|
||||
|
||||
// 移除所有active类
|
||||
navLinks.forEach(l => l.classList.remove('active'));
|
||||
// 添加当前active类
|
||||
@@ -45,13 +76,36 @@ function initNavigation() {
|
||||
e.preventDefault();
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
targetElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
const offsetTop = targetElement.offsetTop - 80;
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// 关闭移动端菜单
|
||||
if (navbarCollapse.classList.contains('show')) {
|
||||
navbarToggler.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 悬停效果
|
||||
link.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-2px)';
|
||||
});
|
||||
|
||||
link.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
});
|
||||
});
|
||||
|
||||
// 自动高亮当前页面对应的导航项
|
||||
const currentPage = window.location.pathname.split('/').pop();
|
||||
navLinks.forEach(link => {
|
||||
if (link.getAttribute('href') === currentPage) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -307,4 +361,346 @@ function monitorPerformance() {
|
||||
}
|
||||
|
||||
// 初始化性能监控
|
||||
monitorPerformance();
|
||||
monitorPerformance();
|
||||
|
||||
// 加载动画初始化
|
||||
function initPreloader() {
|
||||
const preloader = document.createElement('div');
|
||||
preloader.className = 'preloader';
|
||||
preloader.innerHTML = `
|
||||
<div class="preloader-inner">
|
||||
<div class="preloader-logo">
|
||||
<i class="fas fa-cow text-primary fs-1"></i>
|
||||
<div class="brand-name mt-2">NiuMall</div>
|
||||
</div>
|
||||
<div class="loading-bar">
|
||||
<div class="loading-progress"></div>
|
||||
</div>
|
||||
<p class="loading-text">正在加载中...</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 添加加载动画样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
transition: opacity 0.5s ease, visibility 0.5s ease;
|
||||
}
|
||||
.preloader-inner {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.loading-bar {
|
||||
width: 200px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.loading-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #4CAF50, #81C784);
|
||||
width: 0;
|
||||
animation: loadingProgress 2s ease-in-out;
|
||||
}
|
||||
.loading-text {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
@keyframes loadingProgress {
|
||||
0% { width: 0%; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
.preloader.hide {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
document.body.appendChild(preloader);
|
||||
|
||||
// 页面加载完成后隐藏加载动画
|
||||
window.addEventListener('load', function() {
|
||||
setTimeout(() => {
|
||||
preloader.classList.add('hide');
|
||||
setTimeout(() => {
|
||||
preloader.remove();
|
||||
style.remove();
|
||||
}, 500);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
// 打字机效果
|
||||
function initTypewriter() {
|
||||
const typewriterElements = document.querySelectorAll('.typewriter');
|
||||
|
||||
typewriterElements.forEach(element => {
|
||||
const text = element.textContent;
|
||||
element.textContent = '';
|
||||
element.style.borderRight = '2px solid #4CAF50';
|
||||
element.style.animation = 'typewriter-cursor 1s infinite';
|
||||
|
||||
let i = 0;
|
||||
const timer = setInterval(() => {
|
||||
if (i < text.length) {
|
||||
element.textContent += text.charAt(i);
|
||||
i++;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
setTimeout(() => {
|
||||
element.style.borderRight = 'none';
|
||||
}, 1000);
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 添加打字机样式
|
||||
if (!document.querySelector('#typewriter-style')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'typewriter-style';
|
||||
style.textContent = `
|
||||
@keyframes typewriter-cursor {
|
||||
0%, 50% { border-right-color: transparent; }
|
||||
51%, 100% { border-right-color: #4CAF50; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条动画
|
||||
function initProgressBars() {
|
||||
const progressBars = document.querySelectorAll('.progress-bar');
|
||||
|
||||
const progressObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const progressBar = entry.target;
|
||||
const targetWidth = progressBar.getAttribute('data-width') || '100%';
|
||||
|
||||
progressBar.style.width = '0%';
|
||||
progressBar.style.transition = 'width 2s ease-in-out';
|
||||
|
||||
setTimeout(() => {
|
||||
progressBar.style.width = targetWidth;
|
||||
}, 100);
|
||||
|
||||
progressObserver.unobserve(progressBar);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
progressBars.forEach(bar => progressObserver.observe(bar));
|
||||
}
|
||||
|
||||
// 数字递增动画优化
|
||||
function initCountUp() {
|
||||
const countElements = document.querySelectorAll('.count-up');
|
||||
|
||||
const countObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const element = entry.target;
|
||||
const target = parseInt(element.getAttribute('data-target') || element.textContent);
|
||||
const duration = parseInt(element.getAttribute('data-duration') || '2000');
|
||||
const suffix = element.getAttribute('data-suffix') || '';
|
||||
|
||||
animateNumber(element, 0, target, duration, suffix);
|
||||
countObserver.unobserve(element);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
countElements.forEach(el => countObserver.observe(el));
|
||||
}
|
||||
|
||||
// 数字动画函数
|
||||
function animateNumber(element, start, end, duration, suffix) {
|
||||
const startTime = performance.now();
|
||||
|
||||
function update(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// 使用缓动函数
|
||||
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
||||
const current = Math.floor(start + (end - start) * easeProgress);
|
||||
|
||||
element.textContent = current.toLocaleString() + suffix;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
// 模态框效果
|
||||
function initModalEffects() {
|
||||
const modals = document.querySelectorAll('.modal');
|
||||
|
||||
modals.forEach(modal => {
|
||||
modal.addEventListener('show.bs.modal', function() {
|
||||
this.querySelector('.modal-dialog').style.transform = 'scale(0.8)';
|
||||
this.querySelector('.modal-dialog').style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
this.querySelector('.modal-dialog').style.transition = 'all 0.3s ease';
|
||||
this.querySelector('.modal-dialog').style.transform = 'scale(1)';
|
||||
this.querySelector('.modal-dialog').style.opacity = '1';
|
||||
}, 10);
|
||||
});
|
||||
|
||||
modal.addEventListener('hide.bs.modal', function() {
|
||||
this.querySelector('.modal-dialog').style.transform = 'scale(0.8)';
|
||||
this.querySelector('.modal-dialog').style.opacity = '0';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 平滑滚动优化
|
||||
function initSmoothScrolling() {
|
||||
// 禁用默认滚动行为
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
|
||||
if (target) {
|
||||
const offsetTop = target.getBoundingClientRect().top + window.pageYOffset - 80;
|
||||
|
||||
// 使用自定义平滑滚动
|
||||
smoothScrollTo(offsetTop, 1000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 自定义平滑滚动函数
|
||||
function smoothScrollTo(target, duration) {
|
||||
const start = window.pageYOffset;
|
||||
const distance = target - start;
|
||||
const startTime = performance.now();
|
||||
|
||||
function scroll(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// 使用缓动函数
|
||||
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
||||
|
||||
window.scrollTo(0, start + distance * easeProgress);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(scroll);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(scroll);
|
||||
}
|
||||
|
||||
// 粒子效果
|
||||
function initParticleEffect() {
|
||||
const heroSection = document.querySelector('.hero-section');
|
||||
if (!heroSection) return;
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.top = '0';
|
||||
canvas.style.left = '0';
|
||||
canvas.style.width = '100%';
|
||||
canvas.style.height = '100%';
|
||||
canvas.style.pointerEvents = 'none';
|
||||
canvas.style.zIndex = '1';
|
||||
|
||||
heroSection.appendChild(canvas);
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = heroSection.offsetWidth;
|
||||
canvas.height = heroSection.offsetHeight;
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
const particles = [];
|
||||
|
||||
// 创建粒子
|
||||
function createParticle() {
|
||||
return {
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
vx: (Math.random() - 0.5) * 0.5,
|
||||
vy: (Math.random() - 0.5) * 0.5,
|
||||
radius: Math.random() * 2 + 1,
|
||||
opacity: Math.random() * 0.5 + 0.2
|
||||
};
|
||||
}
|
||||
|
||||
// 初始化粒子
|
||||
for (let i = 0; i < 50; i++) {
|
||||
particles.push(createParticle());
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
particles.forEach((particle, index) => {
|
||||
// 更新位置
|
||||
particle.x += particle.vx;
|
||||
particle.y += particle.vy;
|
||||
|
||||
// 边界检测
|
||||
if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
|
||||
if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;
|
||||
|
||||
// 绘制粒子
|
||||
ctx.beginPath();
|
||||
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(76, 175, 80, ${particle.opacity})`;
|
||||
ctx.fill();
|
||||
|
||||
// 连接粒子
|
||||
particles.forEach((otherParticle, otherIndex) => {
|
||||
if (index !== otherIndex) {
|
||||
const dx = particle.x - otherParticle.x;
|
||||
const dy = particle.y - otherParticle.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 100) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(particle.x, particle.y);
|
||||
ctx.lineTo(otherParticle.x, otherParticle.y);
|
||||
ctx.strokeStyle = `rgba(76, 175, 80, ${0.1 * (1 - distance / 100)})`;
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
194
website/product-enhanced.html
Normal file
194
website/product-enhanced.html
Normal file
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>产品介绍 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="了解活牛采购智能数字化系统的核心功能，包括供应商管理、订单管理、运输跟踪等全流程功能。">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/responsive.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||||
<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>
|
||||
|
||||
<div class="navbar-nav ms-auto">
|
||||
<a href="index.html" class="nav-link">
|
||||
<i class="fas fa-home me-1"></i>返回首页
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 产品英雄区域 -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center min-vh-100">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="display-3 fw-bold mb-4 text-white">
|
||||
全流程数字化
|
||||
<span class="text-primary">采购管理</span>
|
||||
</h1>
|
||||
<p class="lead mb-4 text-white-50">
|
||||
从供应商筛选到财务结算，NiuMall提供活牛采购的完整数字化解决方案
|
||||
</p>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="demo.html" class="btn btn-primary btn-lg">
|
||||
<i class="fas fa-play me-2"></i>观看演示
|
||||
</a>
|
||||
<a href="contact.html" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-download me-2"></i>下载手册
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="bg-white rounded-3 shadow-lg p-4">
|
||||
<h5 class="mb-3">实时数据驾驶舱</h5>
|
||||
<div class="row g-3">
|
||||
<div class="col-4">
|
||||
<div class="text-center p-2 bg-primary bg-opacity-10 rounded">
|
||||
<div class="h4 text-primary mb-0 count-up" data-target="156">0</div>
|
||||
<small>本月订单</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="text-center p-2 bg-success bg-opacity-10 rounded">
|
||||
<div class="h4 text-success mb-0 count-up" data-target="98" data-suffix="%">0%</div>
|
||||
<small>成功率</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="text-center p-2 bg-warning bg-opacity-10 rounded">
|
||||
<div class="h4 text-warning mb-0 count-up" data-target="24">0</div>
|
||||
<small>运输中</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心功能模块 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-5 fw-bold mb-3">核心功能模块</h2>
|
||||
<p class="lead text-muted">全面覆盖活牛采购业务的每一个环节</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100 border-0 shadow">
|
||||
<div class="card-body p-4 text-center">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 p-3 rounded-circle mx-auto mb-3" style="width: 80px; height: 80px;">
|
||||
<i class="fas fa-users text-primary fs-2"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">供应商管理</h4>
|
||||
<p class="text-muted">完整的供应商档案管理、资质审核、绩效评估体系</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100 border-0 shadow">
|
||||
<div class="card-body p-4 text-center">
|
||||
<div class="feature-icon bg-success bg-opacity-10 p-3 rounded-circle mx-auto mb-3" style="width: 80px; height: 80px;">
|
||||
<i class="fas fa-shopping-cart text-success fs-2"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">订单管理</h4>
|
||||
<p class="text-muted">标准化的采购流程管理，从需求计划到订单执行</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100 border-0 shadow">
|
||||
<div class="card-body p-4 text-center">
|
||||
<div class="feature-icon bg-warning bg-opacity-10 p-3 rounded-circle mx-auto mb-3" style="width: 80px; height: 80px;">
|
||||
<i class="fas fa-truck text-warning fs-2"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">运输跟踪</h4>
|
||||
<p class="text-muted">全程可视化的运输监控，确保运输过程安全透明</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100 border-0 shadow">
|
||||
<div class="card-body p-4 text-center">
|
||||
<div class="feature-icon bg-info bg-opacity-10 p-3 rounded-circle mx-auto mb-3" style="width: 80px; height: 80px;">
|
||||
<i class="fas fa-shield-alt text-info fs-2"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">质量管理</h4>
|
||||
<p class="text-muted">严格的质量控制体系，确保牛只质量符合标准</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100 border-0 shadow">
|
||||
<div class="card-body p-4 text-center">
|
||||
<div class="feature-icon bg-danger bg-opacity-10 p-3 rounded-circle mx-auto mb-3" style="width: 80px; height: 80px;">
|
||||
<i class="fas fa-chart-line text-danger fs-2"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">财务结算</h4>
|
||||
<p class="text-muted">自动化的财务结算系统，提高资金使用效率</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100 border-0 shadow">
|
||||
<div class="card-body p-4 text-center">
|
||||
<div class="feature-icon bg-secondary bg-opacity-10 p-3 rounded-circle mx-auto mb-3" style="width: 80px; height: 80px;">
|
||||
<i class="fas fa-chart-bar text-secondary fs-2"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">数据分析</h4>
|
||||
<p class="text-muted">深度数据分析和商业智能，为决策提供科学依据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 体验申请区域 -->
|
||||
<section class="py-5 bg-primary text-white">
|
||||
<div class="container text-center">
|
||||
<h2 class="mb-3">准备开始体验了吗？</h2>
|
||||
<p class="lead mb-4">立即申请免费试用，体验完整功能</p>
|
||||
<div class="d-flex gap-3 justify-content-center">
|
||||
<a href="demo.html" class="btn btn-light btn-lg">
|
||||
<i class="fas fa-play me-2"></i>在线演示
|
||||
</a>
|
||||
<a href="contact.html" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-phone me-2"></i>联系咨询
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user