356 lines
20 KiB
HTML
356 lines
20 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="专业的活牛采购数字化管理系统，提供从采购、运输到结算的全流程数字化解决方案，助力养殖企业提升采购效率。">
|
||
<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>
|
||
|
||
<!-- 其他部分保持不变... --> |