473 lines
21 KiB
HTML
473 lines
21 KiB
HTML
<!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> |