Merge remote-tracking branch 'origin/main'
This commit is contained in:
@@ -5,6 +5,23 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>关于我们 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="了解活牛采购智能数字化系统的公司背景、团队实力、发展历程和企业文化，我们致力于为养殖行业提供专业的数字化采购解决方案。">
|
||||
<meta name="keywords" content="活牛采购系统,公司介绍,团队实力,发展历程,企业文化,畜牧行业,数字化转型,科技创新">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "活牛采购智能数字化系统",
|
||||
"description": "了解活牛采购智能数字化系统的公司背景、团队实力、发展历程和企业文化，我们致力于为养殖行业提供专业的数字化采购解决方案。",
|
||||
"url": "https://www.niumall.com",
|
||||
"logo": "https://www.niumall.com/images/logo.png",
|
||||
"sameAs": [
|
||||
"https://weibo.com/niumall",
|
||||
"https://linkedin.com/company/niumall"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
@@ -21,11 +38,20 @@
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="index.html">活牛采购智能数字化系统</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<div class="logo-container me-2">
|
||||
<i class="fas fa-cow text-primary fs-2"></i>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name fw-bold">NiuMall</div>
|
||||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
@@ -68,10 +94,10 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 关于我们 -->
|
||||
<!-- 关于我们英雄区域 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="display-5 fw-bold mb-4">关于我们</h1>
|
||||
<p class="lead">我们是一家专注于畜牧行业数字化转型的科技公司，致力于为养殖企业提供专业的采购管理解决方案。</p>
|
||||
@@ -92,30 +118,30 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 公司使命 -->
|
||||
<!-- 公司使命和价值观 -->
|
||||
<section class="py-5 bg-dark">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h2 class="display-6 mb-4">我们的使命</h2>
|
||||
<h2 class="display-6 mb-4">我们的使命和价值观</h2>
|
||||
<p class="lead">通过技术创新推动畜牧行业数字化转型，提升养殖企业采购效率，降低经营风险，助力行业高质量发展。</p>
|
||||
<div class="row g-4 mt-4">
|
||||
<div class="col-md-4">
|
||||
<div class="feature-icon mx-auto mb-3">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||||
<i class="fas fa-bullseye"></i>
|
||||
</div>
|
||||
<h5>专注行业</h5>
|
||||
<p class="text-muted">深耕畜牧行业，深刻理解行业特点和需求</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="feature-icon mx-auto mb-3">
|
||||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
</div>
|
||||
<h5>技术创新</h5>
|
||||
<p class="text-muted">运用前沿技术，打造智能化解决方案</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="feature-icon mx-auto mb-3">
|
||||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||||
<i class="fas fa-hands-helping"></i>
|
||||
</div>
|
||||
<h5>客户至上</h5>
|
||||
@@ -127,19 +153,19 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 发展历程 -->
|
||||
<!-- 发展历程和里程碑 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">发展历程</h2>
|
||||
<p class="text-muted">我们的发展足迹</p>
|
||||
<h2 class="display-6 mb-3">发展历程和里程碑</h2>
|
||||
<p class="text-muted">我们的发展足迹和重要时刻</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-10 mx-auto">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon">
|
||||
<div class="timeline-icon bg-success">
|
||||
<i class="fas fa-seedling"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
@@ -149,7 +175,7 @@
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon">
|
||||
<div class="timeline-icon bg-primary">
|
||||
<i class="fas fa-laptop-code"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
@@ -159,7 +185,7 @@
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon">
|
||||
<div class="timeline-icon bg-warning">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
@@ -169,7 +195,7 @@
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon">
|
||||
<div class="timeline-icon bg-info">
|
||||
<i class="fas fa-cloud"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
@@ -179,7 +205,7 @@
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon">
|
||||
<div class="timeline-icon bg-danger">
|
||||
<i class="fas fa-award"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
@@ -189,7 +215,7 @@
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon">
|
||||
<div class="timeline-icon bg-success">
|
||||
<i class="fas fa-rocket"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
@@ -197,104 +223,214 @@
|
||||
<p>发布V3.0版本，引入AI智能采购建议功能</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon bg-primary">
|
||||
<i class="fas fa-trophy"></i>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<h5>2024年</h5>
|
||||
<p>获得ISO 9001质量管理体系认证，服务客户突破1000家</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 团队介绍 -->
|
||||
<section class="py-5 bg-dark">
|
||||
<!-- 核心团队和专家资质 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">核心团队</h2>
|
||||
<h2 class="display-6 mb-3">核心团队和专家资质</h2>
|
||||
<p class="text-muted">我们拥有一支经验丰富、技术精湛的专业团队</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card text-center border-0">
|
||||
<div class="card text-center h-100 border-0 shadow-sm">
|
||||
<img src="images/team1.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="CEO" style="width: 150px; height: 150px; object-fit: cover;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">张伟</h5>
|
||||
<p class="text-muted">创始人兼CEO</p>
|
||||
<p class="card-text">拥有15年畜牧行业经验，对行业痛点有深刻理解</p>
|
||||
<p class="text-primary">创始人兼CEO</p>
|
||||
<p class="card-text">拥有15年畜牧行业经验，对行业痛点有深刻理解，曾任职于国内知名畜牧企业担任采购总监。</p>
|
||||
<div class="mt-3">
|
||||
<span class="badge bg-secondary me-1">畜牧专家</span>
|
||||
<span class="badge bg-secondary">数字化转型顾问</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card text-center border-0">
|
||||
<div class="card text-center h-100 border-0 shadow-sm">
|
||||
<img src="images/team2.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="CTO" style="width: 150px; height: 150px; object-fit: cover;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">李明</h5>
|
||||
<p class="text-muted">联合创始人兼CTO</p>
|
||||
<p class="card-text">资深软件架构师，主导系统技术架构设计</p>
|
||||
<p class="text-primary">联合创始人兼CTO</p>
|
||||
<p class="card-text">资深软件架构师，10年企业级软件开发经验，主导系统技术架构设计，拥有多项技术专利。</p>
|
||||
<div class="mt-3">
|
||||
<span class="badge bg-secondary me-1">系统架构师</span>
|
||||
<span class="badge bg-secondary">云计算专家</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card text-center border-0">
|
||||
<div class="card text-center h-100 border-0 shadow-sm">
|
||||
<img src="images/team3.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="产品经理" style="width: 150px; height: 150px; object-fit: cover;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">王芳</h5>
|
||||
<p class="text-muted">产品总监</p>
|
||||
<p class="card-text">专注于用户体验设计，确保产品易用性</p>
|
||||
<p class="text-primary">产品总监</p>
|
||||
<p class="card-text">专注于用户体验设计，确保产品易用性，拥有丰富的B2B产品设计经验，曾获多项设计奖项。</p>
|
||||
<div class="mt-3">
|
||||
<span class="badge bg-secondary me-1">用户体验专家</span>
|
||||
<span class="badge bg-secondary">产品经理认证</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card text-center border-0">
|
||||
<div class="card text-center h-100 border-0 shadow-sm">
|
||||
<img src="images/team4.jpg" class="card-img-top rounded-circle mx-auto mt-4" alt="客户成功总监" style="width: 150px; height: 150px; object-fit: cover;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">刘强</h5>
|
||||
<p class="text-muted">客户成功总监</p>
|
||||
<p class="card-text">负责客户实施和成功交付，确保客户价值实现</p>
|
||||
<p class="text-primary">客户成功总监</p>
|
||||
<p class="card-text">负责客户实施和成功交付，确保客户价值实现，拥有丰富的项目管理和客户成功经验。</p>
|
||||
<div class="mt-3">
|
||||
<span class="badge bg-secondary me-1">PMP认证</span>
|
||||
<span class="badge bg-secondary">客户成功专家</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家顾问团队 -->
|
||||
<div class="row mt-5">
|
||||
<div class="col-12">
|
||||
<div class="text-center">
|
||||
<h3 class="mb-4">专家顾问团队</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0">
|
||||
<div class="card-body text-center">
|
||||
<h5>中国农业大学畜牧专家</h5>
|
||||
<p class="text-muted">提供行业指导和技术支持</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0">
|
||||
<div class="card-body text-center">
|
||||
<h5>数字化转型研究院</h5>
|
||||
<p class="text-muted">提供数字化转型战略咨询</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0">
|
||||
<div class="card-body text-center">
|
||||
<h5>信息安全认证机构</h5>
|
||||
<p class="text-muted">提供信息安全合规指导</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 资质认证 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">资质认证</h2>
|
||||
<p class="text-muted">我们拥有多项行业认证和荣誉资质</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="card border-0 text-center p-4 h-100">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-3 mx-auto">
|
||||
<i class="fas fa-certificate"></i>
|
||||
</div>
|
||||
<h5>ISO 9001</h5>
|
||||
<p class="text-muted small">质量管理体系认证</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="card border-0 text-center p-4 h-100">
|
||||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-3 mx-auto">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</div>
|
||||
<h5>信息安全</h5>
|
||||
<p class="text-muted small">三级等保认证</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="card border-0 text-center p-4 h-100">
|
||||
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-3 mx-auto">
|
||||
<i class="fas fa-award"></i>
|
||||
</div>
|
||||
<h5>行业奖项</h5>
|
||||
<p class="text-muted small">畜牧科技创新奖</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="card border-0 text-center p-4 h-100">
|
||||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-3 mx-auto">
|
||||
<i class="fas fa-cloud"></i>
|
||||
</div>
|
||||
<h5>云服务认证</h5>
|
||||
<p class="text-muted small">阿里云生态伙伴</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 合作伙伴 -->
|
||||
<section class="py-5">
|
||||
<section class="py-5 bg-dark">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">合作伙伴</h2>
|
||||
<h2 class="display-6 mb-3 text-white">合作伙伴</h2>
|
||||
<p class="text-muted">我们与行业领先企业建立战略合作关系</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="partner-logo text-center p-4">
|
||||
<div class="partner-logo text-center p-4 bg-light rounded">
|
||||
<img src="images/partner1.png" alt="合作伙伴1" class="img-fluid" style="max-height: 60px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="partner-logo text-center p-4">
|
||||
<div class="partner-logo text-center p-4 bg-light rounded">
|
||||
<img src="images/partner2.png" alt="合作伙伴2" class="img-fluid" style="max-height: 60px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="partner-logo text-center p-4">
|
||||
<div class="partner-logo text-center p-4 bg-light rounded">
|
||||
<img src="images/partner3.png" alt="合作伙伴3" class="img-fluid" style="max-height: 60px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="partner-logo text-center p-4">
|
||||
<div class="partner-logo text-center p-4 bg-light rounded">
|
||||
<img src="images/partner4.png" alt="合作伙伴4" class="img-fluid" style="max-height: 60px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="partner-logo text-center p-4">
|
||||
<div class="partner-logo text-center p-4 bg-light rounded">
|
||||
<img src="images/partner5.png" alt="合作伙伴5" class="img-fluid" style="max-height: 60px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="partner-logo text-center p-4">
|
||||
<div class="partner-logo text-center p-4 bg-light rounded">
|
||||
<img src="images/partner6.png" alt="合作伙伴6" class="img-fluid" style="max-height: 60px;">
|
||||
</div>
|
||||
</div>
|
||||
@@ -302,6 +438,58 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">联系我们</h2>
|
||||
<p class="text-muted">欢迎随时与我们取得联系</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<h5>办公地址</h5>
|
||||
<p class="text-muted">北京市朝阳区xxx街道xxx号<br>邮编：100000</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||||
<i class="fas fa-phone"></i>
|
||||
</div>
|
||||
<h5>联系电话</h5>
|
||||
<p class="text-muted">客服热线：400-xxx-xxxx<br>商务合作：010-xxxx-xxxx</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<h5>电子邮箱</h5>
|
||||
<p class="text-muted">商务咨询：info@example.com<br>技术支持：support@example.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<a href="contact.html" class="btn btn-primary btn-lg">
|
||||
<i class="fas fa-comments me-2"></i>在线留言
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
@@ -309,7 +497,14 @@
|
||||
<div class="card-body p-5 text-center">
|
||||
<h3 class="mb-3">加入我们，共同推动行业发展</h3>
|
||||
<p class="mb-4">如果您对我们的产品和服务感兴趣，欢迎随时联系我们</p>
|
||||
<a href="contact.html" class="btn btn-light btn-lg">联系我们</a>
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<a href="contact.html" class="btn btn-light btn-lg">
|
||||
<i class="fas fa-phone me-2"></i>联系我们
|
||||
</a>
|
||||
<a href="demo.html" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-play-circle me-2"></i>预约演示
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -376,5 +571,13 @@
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,7 +4,25 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>客户案例 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="活牛采购智能数字化系统成功案例展示，真实客户评价和使用效果验证，为您选择数字化采购解决方案提供参考。">
|
||||
<meta name="description" content="活牛采购智能数字化系统成功案例展示，真实客户评价和使用效果验证，包括大型养殖企业、中小型牧场和活牛贸易商的成功实践。">
|
||||
<meta name="keywords" content="活牛采购案例,养殖企业数字化,牧场管理系统,贸易商解决方案,采购效率提升,成本控制,客户评价,成功案例">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "活牛采购智能数字化系统 - 客户案例",
|
||||
"description": "活牛采购智能数字化系统成功案例展示，真实客户评价和使用效果验证，为您选择数字化采购解决方案提供参考。",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Web",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
@@ -21,8 +39,14 @@
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<span class="ms-2 fw-bold">活牛采购智能数字化系统</span>
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<div class="logo-container me-2">
|
||||
<i class="fas fa-cow text-primary fs-2"></i>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name fw-bold">NiuMall</div>
|
||||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
@@ -71,217 +95,522 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 客户案例 -->
|
||||
<!-- 客户案例英雄区域 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="display-5 fw-bold mb-4">客户成功案例</h1>
|
||||
<p class="lead">真实客户故事展示我们的解决方案如何帮助各类企业实现业务增长和效率提升</p>
|
||||
<p>通过数字化转型，我们的客户在采购效率、成本控制、风险管理和决策支持等方面都取得了显著成效。</p>
|
||||
<div class="mt-4">
|
||||
<a href="#cases" class="btn btn-primary btn-lg me-3">
|
||||
<i class="fas fa-th-large me-2"></i>查看案例
|
||||
</a>
|
||||
<a href="solutions.html" class="btn btn-outline-primary btn-lg">
|
||||
<i class="fas fa-lightbulb me-2"></i>解决方案
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<div class="bg-primary bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-primary mb-2 count-up" data-target="500">0</div>
|
||||
<div class="stat-label">成功客户</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-success bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-success mb-2 count-up" data-target="40" data-suffix="%">0%</div>
|
||||
<div class="stat-label">平均效率提升</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-warning bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-warning mb-2 count-up" data-target="20" data-suffix="%">0%</div>
|
||||
<div class="stat-label">成本降低</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-info bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-info mb-2 count-up" data-target="99" data-suffix="%">0%</div>
|
||||
<div class="stat-label">客户满意度</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 案例分类和筛选功能 -->
|
||||
<section class="py-3 bg-light">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between">
|
||||
<h5 class="mb-0">案例筛选</h5>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<button class="btn btn-outline-primary btn-sm active" data-filter="all">全部</button>
|
||||
<button class="btn btn-outline-primary btn-sm" data-filter="large">大型企业</button>
|
||||
<button class="btn btn-outline-primary btn-sm" data-filter="medium">中型企业</button>
|
||||
<button class="btn btn-outline-primary btn-sm" data-filter="small">小型企业</button>
|
||||
<button class="btn btn-outline-primary btn-sm" data-filter="trader">贸易商</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 客户案例展示 -->
|
||||
<section id="cases" class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h1 class="display-5 fw-bold mb-4">客户案例</h1>
|
||||
<p class="lead">看看我们的客户如何通过系统提升业务效率</p>
|
||||
<h2 class="display-6 mb-3">客户成功案例展示</h2>
|
||||
<p class="text-muted">了解我们的客户如何通过数字化转型实现业务增长</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-5">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card case-card h-100 border-0">
|
||||
<img src="images/case1.jpg" class="card-img-top" alt="XX牧业集团" loading="lazy">
|
||||
<div class="row g-4 mb-5 case-grid">
|
||||
<div class="col-md-6 col-lg-4" data-category="large">
|
||||
<div class="card case-card h-100 border-0 shadow-sm">
|
||||
<img src="images/case1.jpg" class="card-img-top" alt="山东畜牧合作社数字化转型" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-primary mb-2">大型企业</span>
|
||||
<h5 class="card-title">XX牧业集团采购数字化转型</h5>
|
||||
<p class="card-text">通过实施活牛采购智能数字化系统，该集团实现了采购流程标准化，采购效率提升40%。</p>
|
||||
<h5 class="card-title">山东畜牧合作社数字化转型</h5>
|
||||
<p class="card-text">通过实施集团化采购解决方案，实现采购效率提升40%，成本降低15%。</p>
|
||||
<a href="#case-detail-1" class="btn btn-outline-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card case-card h-100 border-0">
|
||||
<img src="images/case2.jpg" class="card-img-top" alt="YY生态牧场" loading="lazy">
|
||||
<div class="col-md-6 col-lg-4" data-category="medium">
|
||||
<div class="card case-card h-100 border-0 shadow-sm">
|
||||
<img src="images/case2.jpg" class="card-img-top" alt="内蒙古家庭牧场管理升级" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-success mb-2">中型企业</span>
|
||||
<h5 class="card-title">YY生态牧场采购管理升级</h5>
|
||||
<p class="card-text">该牧场通过系统化管理采购流程，显著降低了采购风险，提升了供应商管理效率。</p>
|
||||
<h5 class="card-title">内蒙古家庭牧场管理升级</h5>
|
||||
<p class="card-text">采用简化版采购管理系统，采购周期缩短30%，操作简便易用。</p>
|
||||
<a href="#case-detail-2" class="btn btn-outline-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card case-card h-100 border-0">
|
||||
<img src="images/case3.jpg" class="card-img-top" alt="ZZ活牛贸易平台" loading="lazy">
|
||||
<div class="col-md-6 col-lg-4" data-category="trader">
|
||||
<div class="card case-card h-100 border-0 shadow-sm">
|
||||
<img src="images/case3.jpg" class="card-img-top" alt="华南活牛贸易公司业务优化" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-info mb-2">贸易商</span>
|
||||
<h5 class="card-title">ZZ活牛贸易平台业务优化</h5>
|
||||
<p class="card-text">贸易商通过系统实现了多方交易协调，显著提升了交易效率和资金安全性。</p>
|
||||
<h5 class="card-title">华南活牛贸易公司业务优化</h5>
|
||||
<p class="card-text">使用贸易商专用版系统，订单处理效率提升50%，客户满意度显著提高。</p>
|
||||
<a href="#case-detail-3" class="btn btn-outline-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4" data-category="large">
|
||||
<div class="card case-card h-100 border-0 shadow-sm">
|
||||
<img src="images/case4.jpg" class="card-img-top" alt="河北大型养殖集团采购优化" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-primary mb-2">大型企业</span>
|
||||
<h5 class="card-title">河北大型养殖集团采购优化</h5>
|
||||
<p class="card-text">部署企业版系统后，实现多子公司采购协同，风险控制能力显著提升。</p>
|
||||
<a href="#case-detail-4" class="btn btn-outline-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4" data-category="small">
|
||||
<div class="card case-card h-100 border-0 shadow-sm">
|
||||
<img src="images/case5.jpg" class="card-img-top" alt="东北小型养殖场数字化起步" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-warning mb-2">小型企业</span>
|
||||
<h5 class="card-title">东北小型养殖场数字化起步</h5>
|
||||
<p class="card-text">通过基础版系统，实现采购流程标准化，为未来发展奠定数字化基础。</p>
|
||||
<a href="#case-detail-5" class="btn btn-outline-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4" data-category="trader">
|
||||
<div class="card case-card h-100 border-0 shadow-sm">
|
||||
<img src="images/case6.jpg" class="card-img-top" alt="西南活牛交易平台风控升级" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-info mb-2">贸易商</span>
|
||||
<h5 class="card-title">西南活牛交易平台风控升级</h5>
|
||||
<p class="card-text">定制开发风控模块，结算风险降低50%，交易透明度全面提升。</p>
|
||||
<a href="#case-detail-6" class="btn btn-outline-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 案例详情 -->
|
||||
<div id="case-detail-1" class="card mb-5">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">XX牧业集团采购数字化转型</h2>
|
||||
<span class="badge bg-primary mb-3">大型企业</span>
|
||||
<h4 class="mt-4">客户背景</h4>
|
||||
<p>XX牧业集团是国内知名的大型畜牧养殖企业，年活牛采购量超过5000头，拥有多个采购点和供应商。</p>
|
||||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<h2 class="card-title">山东畜牧合作社数字化转型</h2>
|
||||
<span class="badge bg-primary">大型企业</span>
|
||||
</div>
|
||||
<button type="button" class="btn-close" aria-label="关闭"></button>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">面临挑战</h4>
|
||||
<ul>
|
||||
<li>供应商管理分散，缺乏统一标准</li>
|
||||
<li>采购流程复杂，审批环节多</li>
|
||||
<li>数据统计困难，难以进行有效分析</li>
|
||||
<li>运输过程不透明，风险控制困难</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="mt-4">解决方案</h4>
|
||||
<p>为该集团部署了企业版活牛采购智能数字化系统，包含供应商管理、采购计划、质检流程、运输跟踪、财务结算等全功能模块。</p>
|
||||
|
||||
<h4 class="mt-4">实施效果</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-primary">40%</div>
|
||||
<div class="stat-label">采购效率提升</div>
|
||||
<div class="col-lg-8">
|
||||
<h4 class="mt-4">客户背景</h4>
|
||||
<p>山东畜牧合作社是国内知名的大型畜牧养殖企业，年活牛采购量超过5000头，拥有多个采购点和供应商，在行业内具有重要地位。</p>
|
||||
|
||||
<h4 class="mt-4">面临挑战</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<ul>
|
||||
<li>供应商管理分散，缺乏统一标准</li>
|
||||
<li>采购流程复杂，审批环节多</li>
|
||||
<li>数据统计困难，难以进行有效分析</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ul>
|
||||
<li>运输过程不透明，风险控制困难</li>
|
||||
<li>财务结算效率低，容易出错</li>
|
||||
<li>决策缺乏数据支撑，主观性强</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">解决方案</h4>
|
||||
<p>为该集团部署了企业版活牛采购智能数字化系统，包含供应商管理、采购计划、质检流程、运输跟踪、财务结算等全功能模块，并根据其特殊需求进行了定制化开发。</p>
|
||||
<p>实施过程中，我们提供了全面的培训和技术支持，确保系统顺利上线并被员工熟练使用。</p>
|
||||
|
||||
<h4 class="mt-4">使用数据统计和效果验证</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-primary bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-primary count-up" data-target="40" data-suffix="%">0%</div>
|
||||
<div class="stat-label">采购效率提升</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-success bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-success count-up" data-target="15" data-suffix="%">0%</div>
|
||||
<div class="stat-label">采购成本降低</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-warning bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-warning count-up" data-target="95" data-suffix="%">0%</div>
|
||||
<div class="stat-label">数据准确性</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-info bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-info count-up" data-target="100" data-suffix="%">0%</div>
|
||||
<div class="stat-label">流程标准化</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-primary">30%</div>
|
||||
<div class="stat-label">采购成本降低</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-primary">95%</div>
|
||||
<div class="stat-label">数据准确性</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-primary">100%</div>
|
||||
<div class="stat-label">流程标准化</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">项目信息</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><strong>实施时间：</strong>2023年3月</li>
|
||||
<li class="mb-2"><strong>实施周期：</strong>2个月</li>
|
||||
<li class="mb-2"><strong>服务模式：</strong>私有化部署</li>
|
||||
<li class="mb-2"><strong>用户规模：</strong>200+用户</li>
|
||||
<li class="mb-2"><strong>行业：</strong>畜牧养殖</li>
|
||||
<li class="mb-2"><strong>企业规模：</strong>大型企业</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">客户评价</h4>
|
||||
<blockquote class="blockquote">
|
||||
<p>"活牛采购智能数字化系统的实施，彻底改变了我们传统的采购管理模式。现在我们可以实时掌握采购全流程，大大提升了管理效率和决策水平。"</p>
|
||||
<footer class="blockquote-footer">XX牧业集团采购总监</footer>
|
||||
<h4 class="mt-4">客户评价和Testimonials</h4>
|
||||
<blockquote class="blockquote bg-light p-4 rounded">
|
||||
<p class="mb-3">"活牛采购智能数字化系统的实施，彻底改变了我们传统的采购管理模式。现在我们可以实时掌握采购全流程，大大提升了管理效率和决策水平。系统界面友好，操作简便，员工上手很快。"</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="images/client-avatar-1.jpg" alt="客户头像" class="rounded-circle me-3" width="50" height="50">
|
||||
<div>
|
||||
<footer class="blockquote-footer mb-0">张总，山东畜牧合作社采购总监</footer>
|
||||
<small class="text-muted">合作3年</small>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="case-detail-2" class="card mb-5">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">YY生态牧场采购管理升级</h2>
|
||||
<span class="badge bg-success mb-3">中型企业</span>
|
||||
<h4 class="mt-4">客户背景</h4>
|
||||
<p>YY生态牧场是一家专注于生态养殖的中型牧场，年采购活牛约800头，注重产品质量和可持续发展。</p>
|
||||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<h2 class="card-title">内蒙古家庭牧场管理升级</h2>
|
||||
<span class="badge bg-success">中型企业</span>
|
||||
</div>
|
||||
<button type="button" class="btn-close" aria-label="关闭"></button>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">面临挑战</h4>
|
||||
<ul>
|
||||
<li>采购计划制定缺乏科学依据</li>
|
||||
<li>供应商评估标准不统一</li>
|
||||
<li>质检流程不规范，存在风险</li>
|
||||
<li>成本控制困难，利润空间压缩</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="mt-4">解决方案</h4>
|
||||
<p>为该牧场部署了标准版活牛采购智能数字化系统，重点优化采购计划、供应商管理、质检流程等功能模块。</p>
|
||||
|
||||
<h4 class="mt-4">实施效果</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-success">25%</div>
|
||||
<div class="stat-label">采购成本降低</div>
|
||||
<div class="col-lg-8">
|
||||
<h4 class="mt-4">客户背景</h4>
|
||||
<p>内蒙古家庭牧场是一家专注于生态养殖的中型牧场，年采购活牛约800头，注重产品质量和可持续发展，致力于打造绿色有机品牌。</p>
|
||||
|
||||
<h4 class="mt-4">面临挑战</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<ul>
|
||||
<li>采购计划制定缺乏科学依据</li>
|
||||
<li>供应商评估标准不统一</li>
|
||||
<li>质检流程不规范，存在风险</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ul>
|
||||
<li>成本控制困难，利润空间压缩</li>
|
||||
<li>数据记录不完整，难以前后对比</li>
|
||||
<li>缺乏专业管理系统，依赖人工记录</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">解决方案</h4>
|
||||
<p>为该牧场部署了标准版活牛采购智能数字化系统，重点优化采购计划、供应商管理、质检流程等功能模块，并提供移动端支持，方便牧场主随时查看和操作。</p>
|
||||
<p>我们还为其定制了生态养殖相关的质检标准模板，帮助其更好地实现质量控制目标。</p>
|
||||
|
||||
<h4 class="mt-4">使用数据统计和效果验证</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-primary bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-primary count-up" data-target="25" data-suffix="%">0%</div>
|
||||
<div class="stat-label">采购成本降低</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-success bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-success count-up" data-target="50" data-suffix="%">0%</div>
|
||||
<div class="stat-label">质检效率提升</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-warning bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-warning count-up" data-target="100" data-suffix="%">0%</div>
|
||||
<div class="stat-label">供应商标准化</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-info bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-info count-up" data-target="90" data-suffix="%">0%</div>
|
||||
<div class="stat-label">客户满意度</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-success">50%</div>
|
||||
<div class="stat-label">质检效率提升</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-success">100%</div>
|
||||
<div class="stat-label">供应商标准化</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-success">90%</div>
|
||||
<div class="stat-label">客户满意度</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">项目信息</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><strong>实施时间：</strong>2023年6月</li>
|
||||
<li class="mb-2"><strong>实施周期：</strong>1个月</li>
|
||||
<li class="mb-2"><strong>服务模式：</strong>SaaS云服务</li>
|
||||
<li class="mb-2"><strong>用户规模：</strong>5-10用户</li>
|
||||
<li class="mb-2"><strong>行业：</strong>生态养殖</li>
|
||||
<li class="mb-2"><strong>企业规模：</strong>中型企业</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">客户评价</h4>
|
||||
<blockquote class="blockquote">
|
||||
<p>"系统帮助我们建立了科学的采购管理体系，不仅降低了成本，更重要的是提升了产品质量控制水平，为我们的生态养殖理念提供了有力支撑。"</p>
|
||||
<footer class="blockquote-footer">YY生态牧场总经理</footer>
|
||||
<h4 class="mt-4">客户评价和Testimonials</h4>
|
||||
<blockquote class="blockquote bg-light p-4 rounded">
|
||||
<p class="mb-3">"系统帮助我们建立了科学的采购管理体系，不仅降低了成本，更重要的是提升了产品质量控制水平，为我们的生态养殖理念提供了有力支撑。移动端功能特别实用，在牧场现场就能随时查看采购状态。"</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="images/client-avatar-2.jpg" alt="客户头像" class="rounded-circle me-3" width="50" height="50">
|
||||
<div>
|
||||
<footer class="blockquote-footer mb-0">李场长，内蒙古家庭牧场总经理</footer>
|
||||
<small class="text-muted">合作2年</small>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="case-detail-3" class="card mb-5">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">ZZ活牛贸易平台业务优化</h2>
|
||||
<span class="badge bg-info mb-3">贸易商</span>
|
||||
<h4 class="mt-4">客户背景</h4>
|
||||
<p>ZZ活牛贸易平台是一家专业的活牛贸易商，年交易量约3000头，连接多个养殖场和买家。</p>
|
||||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<h2 class="card-title">华南活牛贸易公司业务优化</h2>
|
||||
<span class="badge bg-info">贸易商</span>
|
||||
</div>
|
||||
<button type="button" class="btn-close" aria-label="关闭"></button>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">面临挑战</h4>
|
||||
<ul>
|
||||
<li>多方交易协调困难</li>
|
||||
<li>订单跟踪不及时，容易出错</li>
|
||||
<li>结算流程复杂，风险较高</li>
|
||||
<li>缺乏有效数据分析，决策困难</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="mt-4">解决方案</h4>
|
||||
<p>为该贸易平台定制开发了贸易商专用版系统，重点强化订单管理、多方协调、结算风控等功能。</p>
|
||||
|
||||
<h4 class="mt-4">实施效果</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-info">35%</div>
|
||||
<div class="stat-label">交易效率提升</div>
|
||||
<div class="col-lg-8">
|
||||
<h4 class="mt-4">客户背景</h4>
|
||||
<p>华南活牛贸易公司是一家专业的活牛贸易商，年交易量约3000头，连接多个养殖场和买家，在华南地区具有较强的市场影响力。</p>
|
||||
|
||||
<h4 class="mt-4">面临挑战</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<ul>
|
||||
<li>多方交易协调困难</li>
|
||||
<li>订单跟踪不及时，容易出错</li>
|
||||
<li>结算流程复杂，风险较高</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ul>
|
||||
<li>缺乏有效数据分析，决策困难</li>
|
||||
<li>客户信息管理混乱</li>
|
||||
<li>合同管理不规范，容易产生纠纷</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">解决方案</h4>
|
||||
<p>为该贸易公司定制开发了贸易商专用版系统，重点强化订单管理、多方协调、结算风控等功能，并集成电子合同签署功能，提升交易安全性和效率。</p>
|
||||
<p>我们还为其开发了客户关系管理模块，帮助其更好地维护客户资源，提升客户满意度和复购率。</p>
|
||||
|
||||
<h4 class="mt-4">使用数据统计和效果验证</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-primary bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-primary count-up" data-target="35" data-suffix="%">0%</div>
|
||||
<div class="stat-label">交易效率提升</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-success bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-success count-up" data-target="99" data-suffix="%">0%</div>
|
||||
<div class="stat-label">订单准确率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-warning bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-warning count-up" data-target="50" data-suffix="%">0%</div>
|
||||
<div class="stat-label">结算风险降低</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-info bg-opacity-10 rounded">
|
||||
<div class="stat-number display-6 text-info count-up" data-target="100" data-suffix="%">0%</div>
|
||||
<div class="stat-label">交易透明化</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-info">99%</div>
|
||||
<div class="stat-label">订单准确率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-info">50%</div>
|
||||
<div class="stat-label">结算风险降低</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 mb-4">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<div class="stat-number display-6 text-info">100%</div>
|
||||
<div class="stat-label">交易透明化</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">项目信息</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><strong>实施时间：</strong>2023年9月</li>
|
||||
<li class="mb-2"><strong>实施周期：</strong>1.5个月</li>
|
||||
<li class="mb-2"><strong>服务模式：</strong>混合部署</li>
|
||||
<li class="mb-2"><strong>用户规模：</strong>20-50用户</li>
|
||||
<li class="mb-2"><strong>行业：</strong>活牛贸易</li>
|
||||
<li class="mb-2"><strong>企业规模：</strong>贸易商</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">客户评价</h4>
|
||||
<blockquote class="blockquote">
|
||||
<p>"数字化系统让我们的贸易业务更加透明高效，多方协调变得轻松简单，客户满意度大幅提升。这正是我们一直在寻找的解决方案。"</p>
|
||||
<footer class="blockquote-footer">ZZ活牛贸易平台运营总监</footer>
|
||||
<h4 class="mt-4">客户评价和Testimonials</h4>
|
||||
<blockquote class="blockquote bg-light p-4 rounded">
|
||||
<p class="mb-3">"数字化系统让我们的贸易业务更加透明高效，多方协调变得轻松简单，客户满意度大幅提升。这正是我们一直在寻找的解决方案。电子合同功能大大提升了交易安全性，减少了合同纠纷。"</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="images/client-avatar-3.jpg" alt="客户头像" class="rounded-circle me-3" width="50" height="50">
|
||||
<div>
|
||||
<footer class="blockquote-footer mb-0">王总，华南活牛贸易公司运营总监</footer>
|
||||
<small class="text-muted">合作1年</small>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 客户评价和Testimonials -->
|
||||
<section class="py-5 bg-dark">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3 text-white">客户评价</h2>
|
||||
<p class="text-muted">听听我们的客户怎么说</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 h-100">
|
||||
<div class="card-body">
|
||||
<div class="text-warning mb-3">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<p class="card-text">"系统实施后，我们的采购效率提升了40%，成本降低了15%。数据驱动的决策让我们在市场竞争中占据了优势。"</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="images/testimonial-1.jpg" alt="客户" class="rounded-circle me-3" width="40" height="40">
|
||||
<div>
|
||||
<div class="fw-bold">张总</div>
|
||||
<small class="text-muted">山东畜牧合作社</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 h-100">
|
||||
<div class="card-body">
|
||||
<div class="text-warning mb-3">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star-half-alt"></i>
|
||||
</div>
|
||||
<p class="card-text">"作为中小型牧场，这套系统帮我们实现了数字化转型。操作简单，功能全面，性价比很高。"</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="images/testimonial-2.jpg" alt="客户" class="rounded-circle me-3" width="40" height="40">
|
||||
<div>
|
||||
<div class="fw-bold">李场长</div>
|
||||
<small class="text-muted">内蒙古家庭牧场</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 h-100">
|
||||
<div class="card-body">
|
||||
<div class="text-warning mb-3">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<p class="card-text">"贸易商专用版系统彻底改变了我们的业务模式。交易效率提升35%，客户满意度大幅提升。"</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="images/testimonial-3.jpg" alt="客户" class="rounded-circle me-3" width="40" height="40">
|
||||
<div>
|
||||
<div class="fw-bold">王总</div>
|
||||
<small class="text-muted">华南活牛贸易公司</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
@@ -289,7 +618,14 @@
|
||||
<div class="card-body p-5 text-center">
|
||||
<h3 class="mb-3">开启您的数字化采购之旅</h3>
|
||||
<p class="mb-4">立即申请免费试用，体验活牛采购智能数字化系统带来的效率提升</p>
|
||||
<a href="contact.html" class="btn btn-light btn-lg">免费试用</a>
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<a href="contact.html" class="btn btn-light btn-lg">
|
||||
<i class="fas fa-rocket me-2"></i>免费试用
|
||||
</a>
|
||||
<a href="demo.html" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-play-circle me-2"></i>在线演示
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -356,5 +692,42 @@
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true
|
||||
});
|
||||
|
||||
// 案例筛选功能
|
||||
document.querySelectorAll('[data-filter]').forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const filter = this.getAttribute('data-filter');
|
||||
|
||||
// 更新按钮状态
|
||||
document.querySelectorAll('[data-filter]').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
this.classList.add('active');
|
||||
|
||||
// 筛选案例
|
||||
document.querySelectorAll('.case-grid .col-md-6').forEach(card => {
|
||||
if (filter === 'all' || card.getAttribute('data-category') === filter) {
|
||||
card.style.display = 'block';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 关闭案例详情
|
||||
document.querySelectorAll('.btn-close').forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
this.closest('.card').style.display = 'none';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -5,6 +5,31 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>联系我们 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="联系活牛采购智能数字化系统团队，获取产品演示、报价咨询和技术支持，我们为您提供专业的数字化采购解决方案。">
|
||||
<meta name="keywords" content="联系我们,产品演示,报价咨询,技术支持,客服热线,在线咨询,免费试用,预约演示">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "活牛采购智能数字化系统",
|
||||
"description": "联系活牛采购智能数字化系统团队，获取产品演示、报价咨询和技术支持，我们为您提供专业的数字化采购解决方案。",
|
||||
"url": "https://www.niumall.com",
|
||||
"logo": "https://www.niumall.com/images/logo.png",
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"telephone": "400-xxx-xxxx",
|
||||
"contactType": "customer service"
|
||||
},
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "xxx街道xxx号",
|
||||
"addressLocality": "北京市",
|
||||
"postalCode": "100000",
|
||||
"addressCountry": "CN"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
@@ -17,10 +42,16 @@
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<span class="ms-2 fw-bold text-primary">活牛采购智能数字化系统</span>
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<div class="logo-container me-2">
|
||||
<i class="fas fa-cow text-primary fs-2"></i>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name fw-bold">NiuMall</div>
|
||||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
@@ -69,104 +100,533 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<!-- 联系我们英雄区域 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="display-5 fw-bold mb-4">联系我们</h1>
|
||||
<p class="lead">我们随时准备为您提供帮助，欢迎通过以下方式联系我们</p>
|
||||
<p>无论您是想了解产品信息、申请试用、预约演示还是获取技术支持，我们的专业团队都将竭诚为您服务。</p>
|
||||
<div class="mt-4">
|
||||
<a href="#contact-form" class="btn btn-primary btn-lg me-3">
|
||||
<i class="fas fa-envelope me-2"></i>在线留言
|
||||
</a>
|
||||
<a href="#online-service" class="btn btn-outline-primary btn-lg">
|
||||
<i class="fas fa-comments me-2"></i>在线客服
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<div class="bg-primary bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-primary mb-2 count-up" data-target="1000">0</div>
|
||||
<div class="stat-label">满意客户</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-success bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-success mb-2 count-up" data-target="98" data-suffix="%">0%</div>
|
||||
<div class="stat-label">响应及时率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-warning bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-warning mb-2 count-up" data-target="24">0</div>
|
||||
<div class="stat-label">小时支持</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-info bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-info mb-2 count-up" data-target="50">0</div>
|
||||
<div class="stat-label">专业顾问</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h1 class="display-5 fw-bold mb-4">联系我们</h1>
|
||||
<p class="lead">我们随时准备为您提供帮助，欢迎通过以下方式联系我们</p>
|
||||
<h2 class="display-6 mb-3">联系方式</h2>
|
||||
<p class="text-muted">您可以通过以下任何方式与我们取得联系</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- 联系方式 -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<!-- 公司地址 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<h5 class="card-title">公司地址</h5>
|
||||
<p class="card-text">北京市朝阳区xxx街道xxx号<br>邮编：100000</p>
|
||||
<a href="#map" class="btn btn-outline-primary btn-sm">查看地图</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<!-- 联系电话 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||||
<i class="fas fa-phone-alt"></i>
|
||||
</div>
|
||||
<h5 class="card-title">联系电话</h5>
|
||||
<p class="card-text">客服热线：400-xxx-xxxx<br>技术支持：010-xxxx-xxxx</p>
|
||||
<p class="card-text">客服热线：400-xxx-xxxx<br>技术支持：010-xxxx-xxxx<br>商务合作：010-xxxx-xxxx</p>
|
||||
<a href="tel:400xxx xxxx" class="btn btn-outline-success btn-sm">立即拨打</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<!-- 电子邮箱 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<h5 class="card-title">电子邮箱</h5>
|
||||
<p class="card-text">商务合作：info@example.com<br>技术支持：support@example.com</p>
|
||||
<p class="card-text">商务咨询：info@example.com<br>技术支持：support@example.com<br>媒体合作：media@example.com</p>
|
||||
<a href="mailto:info@example.com" class="btn btn-outline-info btn-sm">发送邮件</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 在线客服系统 -->
|
||||
<section id="online-service" class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">在线客服</h2>
|
||||
<p class="text-muted">我们的客服团队在线为您提供实时帮助</p>
|
||||
</div>
|
||||
|
||||
<div class="row mt-5">
|
||||
<div class="col-lg-6">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title mb-4">在线留言</h3>
|
||||
<form id="contactForm" class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
<div class="invalid-feedback">请输入您的姓名</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="company" class="form-label">公司名称</label>
|
||||
<input type="text" class="form-control" id="company">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="phone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||||
<input type="tel" class="form-control" id="phone" required>
|
||||
<div class="invalid-feedback">请输入您的联系电话</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
<div class="invalid-feedback">请输入有效的电子邮箱</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="subject" required>
|
||||
<option value="">请选择</option>
|
||||
<option value="product">产品咨询</option>
|
||||
<option value="demo">产品演示</option>
|
||||
<option value="price">报价咨询</option>
|
||||
<option value="support">技术支持</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">请选择咨询主题</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="message" class="form-label">留言内容 <span class="text-danger">*</span></label>
|
||||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||||
<div class="invalid-feedback">请输入留言内容</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary btn-lg" type="submit">
|
||||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||||
提交留言
|
||||
</button>
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 class="card-title mb-0">在线客服系统</h5>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="bg-success rounded-circle me-2" style="width: 10px; height: 10px;"></div>
|
||||
<small class="text-muted">在线</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-container bg-light p-3 rounded mb-3" style="height: 300px; overflow-y: auto;">
|
||||
<div class="chat-message mb-3">
|
||||
<div class="d-flex">
|
||||
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px; flex-shrink: 0;">
|
||||
<i class="fas fa-robot"></i>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded">
|
||||
<p class="mb-0">您好！欢迎联系活牛采购智能数字化系统客服。请问有什么可以帮助您的吗？</p>
|
||||
<small class="text-muted">09:00</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="chat-message mb-3">
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="bg-primary text-white p-3 rounded me-2">
|
||||
<p class="mb-0">我想了解产品的价格和功能</p>
|
||||
<small class="text-white-50">09:01</small>
|
||||
</div>
|
||||
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 30px; height: 30px; flex-shrink: 0;">
|
||||
<i class="fas fa-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-message mb-3">
|
||||
<div class="d-flex">
|
||||
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px; flex-shrink: 0;">
|
||||
<i class="fas fa-robot"></i>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded">
|
||||
<p class="mb-0">我们的产品提供多种版本，包括基础版、标准版和企业版，价格根据用户规模和功能需求而定。您可以先申请免费试用，体验产品功能后再做决定。</p>
|
||||
<small class="text-muted">09:02</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="输入您的问题...">
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<small class="text-muted">工作时间：周一至周五 9:00-18:00</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系表单 -->
|
||||
<section id="contact-form" class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">联系我们</h2>
|
||||
<p class="text-muted">填写以下表单，我们的专业顾问将尽快与您联系</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs mb-4" id="contactTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="message-tab" data-bs-toggle="tab" data-bs-target="#message" type="button" role="tab">在线留言</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="demo-tab" data-bs-toggle="tab" data-bs-target="#demo" type="button" role="tab">预约演示</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="trial-tab" data-bs-toggle="tab" data-bs-target="#trial" type="button" role="tab">免费试用</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="download-tab" data-bs-toggle="tab" data-bs-target="#download" type="button" role="tab">资料下载</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="contactTabContent">
|
||||
<!-- 在线留言 -->
|
||||
<div class="tab-pane fade show active" id="message" role="tabpanel">
|
||||
<form id="messageForm" class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
<div class="invalid-feedback">请输入您的姓名</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="company" class="form-label">公司名称</label>
|
||||
<input type="text" class="form-control" id="company">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="phone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||||
<input type="tel" class="form-control" id="phone" required>
|
||||
<div class="invalid-feedback">请输入您的联系电话</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
<div class="invalid-feedback">请输入有效的电子邮箱</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="subject" required>
|
||||
<option value="">请选择</option>
|
||||
<option value="product">产品咨询</option>
|
||||
<option value="demo">产品演示</option>
|
||||
<option value="price">报价咨询</option>
|
||||
<option value="support">技术支持</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">请选择咨询主题</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="messageContent" class="form-label">留言内容 <span class="text-danger">*</span></label>
|
||||
<textarea class="form-control" id="messageContent" rows="5" required></textarea>
|
||||
<div class="invalid-feedback">请输入留言内容</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary btn-lg" type="submit">
|
||||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||||
提交留言
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 预约演示 -->
|
||||
<div class="tab-pane fade" id="demo" role="tabpanel">
|
||||
<form id="demoForm" class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="demoName" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="demoName" required>
|
||||
<div class="invalid-feedback">请输入您的姓名</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="demoCompany" class="form-label">公司名称 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="demoCompany" required>
|
||||
<div class="invalid-feedback">请输入公司名称</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="demoPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||||
<input type="tel" class="form-control" id="demoPhone" required>
|
||||
<div class="invalid-feedback">请输入您的联系电话</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="demoEmail" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="demoEmail" required>
|
||||
<div class="invalid-feedback">请输入有效的电子邮箱</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="demoDate" class="form-label">预约日期 <span class="text-danger">*</span></label>
|
||||
<input type="date" class="form-control" id="demoDate" required>
|
||||
<div class="invalid-feedback">请选择预约日期</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="demoTime" class="form-label">预约时间 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="demoTime" required>
|
||||
<option value="">请选择</option>
|
||||
<option value="09:00-10:00">09:00-10:00</option>
|
||||
<option value="10:00-11:00">10:00-11:00</option>
|
||||
<option value="11:00-12:00">11:00-12:00</option>
|
||||
<option value="14:00-15:00">14:00-15:00</option>
|
||||
<option value="15:00-16:00">15:00-16:00</option>
|
||||
<option value="16:00-17:00">16:00-17:00</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">请选择预约时间</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="demoParticipants" class="form-label">参会人员及职位</label>
|
||||
<textarea class="form-control" id="demoParticipants" rows="3" placeholder="请列出参会人员姓名及职位"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="demoRequirements" class="form-label">特殊需求</label>
|
||||
<textarea class="form-control" id="demoRequirements" rows="3" placeholder="如有特殊演示需求，请在此说明"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary btn-lg" type="submit">
|
||||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||||
预约演示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 免费试用 -->
|
||||
<div class="tab-pane fade" id="trial" role="tabpanel">
|
||||
<form id="trialForm" class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="trialName" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="trialName" required>
|
||||
<div class="invalid-feedback">请输入您的姓名</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="trialCompany" class="form-label">公司名称 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="trialCompany" required>
|
||||
<div class="invalid-feedback">请输入公司名称</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="trialPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||||
<input type="tel" class="form-control" id="trialPhone" required>
|
||||
<div class="invalid-feedback">请输入您的联系电话</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="trialEmail" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="trialEmail" required>
|
||||
<div class="invalid-feedback">请输入有效的电子邮箱</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="trialScale" class="form-label">企业规模 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="trialScale" required>
|
||||
<option value="">请选择</option>
|
||||
<option value="small">小型企业（年采购量<200头）</option>
|
||||
<option value="medium">中型企业（年采购量200-1000头）</option>
|
||||
<option value="large">大型企业（年采购量1000-5000头）</option>
|
||||
<option value="group">集团公司（年采购量>5000头）</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">请选择企业规模</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="trialRole" class="form-label">您的角色 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="trialRole" required>
|
||||
<option value="">请选择</option>
|
||||
<option value="purchaser">采购人员</option>
|
||||
<option value="manager">管理人员</option>
|
||||
<option value="it">IT人员</option>
|
||||
<option value="owner">企业主</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">请选择您的角色</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="trialRequirements" class="form-label">试用需求说明</label>
|
||||
<textarea class="form-control" id="trialRequirements" rows="3" placeholder="请说明您希望重点体验的功能模块"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="agreeTerms" required>
|
||||
<label class="form-check-label" for="agreeTerms">
|
||||
我已阅读并同意 <a href="#" class="text-primary">服务条款</a> 和 <a href="#" class="text-primary">隐私政策</a> <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="invalid-feedback">请同意服务条款和隐私政策</div>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-lg" type="submit">
|
||||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||||
申请免费试用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 资料下载 -->
|
||||
<div class="tab-pane fade" id="download" role="tabpanel">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||||
<i class="fas fa-book"></i>
|
||||
</div>
|
||||
<h5 class="card-title">产品手册</h5>
|
||||
<p class="card-text text-muted">详细的产品功能介绍和使用指南</p>
|
||||
<button class="btn btn-outline-primary download-btn" data-file="product-manual">
|
||||
<i class="fas fa-download me-2"></i>下载PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</div>
|
||||
<h5 class="card-title">技术白皮书</h5>
|
||||
<p class="card-text text-muted">系统架构和技术实现方案详解</p>
|
||||
<button class="btn btn-outline-success download-btn" data-file="white-paper">
|
||||
<i class="fas fa-download me-2"></i>下载PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
</div>
|
||||
<h5 class="card-title">案例研究报告</h5>
|
||||
<p class="card-text text-muted">典型客户成功案例深度分析</p>
|
||||
<button class="btn btn-outline-warning download-btn" data-file="case-study">
|
||||
<i class="fas fa-download me-2"></i>下载PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||||
<i class="fas fa-video"></i>
|
||||
</div>
|
||||
<h5 class="card-title">产品演示视频</h5>
|
||||
<p class="card-text text-muted">系统功能演示和操作指南视频</p>
|
||||
<button class="btn btn-outline-info download-btn" data-file="demo-video">
|
||||
<i class="fas fa-download me-2"></i>下载视频
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 资料下载表单 -->
|
||||
<div class="card border-0 shadow-sm mt-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-4">填写信息获取资料</h5>
|
||||
<form id="downloadForm" class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="downloadName" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="downloadName" required>
|
||||
<div class="invalid-feedback">请输入您的姓名</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="downloadCompany" class="form-label">公司名称 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="downloadCompany" required>
|
||||
<div class="invalid-feedback">请输入公司名称</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="downloadPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||||
<input type="tel" class="form-control" id="downloadPhone" required>
|
||||
<div class="invalid-feedback">请输入您的联系电话</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="downloadEmail" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="downloadEmail" required>
|
||||
<div class="invalid-feedback">请输入有效的电子邮箱</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="downloadInterests" class="form-label">感兴趣的资料 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="downloadInterests" multiple required>
|
||||
<option value="product-manual">产品手册</option>
|
||||
<option value="white-paper">技术白皮书</option>
|
||||
<option value="case-study">案例研究报告</option>
|
||||
<option value="demo-video">产品演示视频</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">请选择您感兴趣的资料</div>
|
||||
<small class="text-muted">按住Ctrl键可多选</small>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="downloadAgree" required>
|
||||
<label class="form-check-label" for="downloadAgree">
|
||||
我已阅读并同意 <a href="#" class="text-primary">服务条款</a> 和 <a href="#" class="text-primary">隐私政策</a> <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="invalid-feedback">请同意服务条款和隐私政策</div>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-lg" type="submit">
|
||||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||||
获取资料
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 办公地图 -->
|
||||
<section id="map" class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">办公地图</h2>
|
||||
<p class="text-muted">我们的办公地址和交通信息</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-4">公司位置</h5>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://map.baidu.com/" title="公司位置" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -174,14 +634,23 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title mb-4">办公地图</h3>
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="https://map.baidu.com/" title="公司位置" loading="lazy"></iframe>
|
||||
<h5 class="card-title mb-4">交通信息</h5>
|
||||
<div class="mb-4">
|
||||
<h6 class="text-primary"><i class="fas fa-subway me-2"></i>地铁</h6>
|
||||
<p class="mb-0">地铁10号线，xxx站下车，A出口步行500米</p>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<h5>工作时间</h5>
|
||||
<p>周一至周五：9:00 - 18:00</p>
|
||||
<p>周六至周日：10:00 - 16:00</p>
|
||||
<div class="mb-4">
|
||||
<h6 class="text-primary"><i class="fas fa-bus me-2"></i>公交</h6>
|
||||
<p class="mb-0">xxx路、xxx路、xxx路公交，xxx站下车</p>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<h6 class="text-primary"><i class="fas fa-car me-2"></i>自驾</h6>
|
||||
<p class="mb-0">导航至北京市朝阳区xxx街道xxx号，附近有停车场</p>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-primary"><i class="fas fa-clock me-2"></i>工作时间</h6>
|
||||
<p class="mb-0">周一至周五：9:00 - 18:00</p>
|
||||
<p class="mb-0">周六至周日：10:00 - 16:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -191,7 +660,7 @@
|
||||
</section>
|
||||
|
||||
<!-- 常见问题 -->
|
||||
<section class="py-5 bg-light">
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">常见问题</h2>
|
||||
@@ -209,7 +678,7 @@
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
您可以通过填写上方联系表单选择"产品演示"主题，我们的销售顾问将在24小时内与您联系并安排演示。您也可以直接致电我们的客服热线400-xxx-xxxx。
|
||||
您可以通过上方的"预约演示"选项卡填写预约表单，我们的销售顾问将在24小时内与您联系并安排演示。您也可以直接致电我们的客服热线400-xxx-xxxx，或通过在线客服系统咨询。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -221,7 +690,7 @@
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
我们的系统支持PC端和移动端访问，包括Windows、Mac、iOS、Android等主流操作系统。同时我们也提供微信小程序版本，方便您随时处理业务。
|
||||
我们的系统支持PC端和移动端访问，包括Windows、Mac、iOS、Android等主流操作系统。同时我们也提供微信小程序版本，方便您随时处理业务。所有版本数据实时同步，确保您在任何设备上都能获得一致的使用体验。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -233,7 +702,7 @@
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
我们提供云部署和本地部署两种方式。云部署由我们负责运维，您只需通过浏览器访问即可；本地部署需要您的IT团队配合，我们提供全程技术支持。
|
||||
我们提供云部署和本地部署两种方式。云部署由我们负责运维，您只需通过浏览器访问即可；本地部署需要您的IT团队配合，我们提供全程技术支持。无论选择哪种部署方式，我们都提供完整的部署文档和技术支持。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -245,7 +714,19 @@
|
||||
</h2>
|
||||
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
我们采用多层安全防护机制，包括数据加密传输、访问权限控制、定期安全审计等。同时通过了ISO27001信息安全管理体系认证，确保您的数据安全。
|
||||
我们采用多层安全防护机制，包括数据加密传输、访问权限控制、定期安全审计等。同时通过了ISO27001信息安全管理体系认证，确保您的数据安全。所有数据均存储在阿里云服务器上，具备高可用性和灾备能力。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingFive">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive">
|
||||
免费试用期是多长时间？
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
我们提供14天的免费试用期，试用期间您可以体验系统的所有功能。试用期结束后，如果您需要继续使用，我们的销售团队会与您联系讨论后续的合作方案。试用期间有任何问题，我们的技术支持团队将全程为您服务。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,7 +743,14 @@
|
||||
<div class="card-body p-5 text-center">
|
||||
<h3 class="mb-3">立即体验活牛采购智能数字化系统</h3>
|
||||
<p class="mb-4">申请免费试用，感受数字化带来的效率提升</p>
|
||||
<a href="#" class="btn btn-light btn-lg">免费试用</a>
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<a href="#trial" class="btn btn-light btn-lg">
|
||||
<i class="fas fa-rocket me-2"></i>免费试用
|
||||
</a>
|
||||
<a href="#demo" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-play-circle me-2"></i>预约演示
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,5 +817,37 @@
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true
|
||||
});
|
||||
|
||||
// 联系表单切换时滚动到表单顶部
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabButtons = document.querySelectorAll('[data-bs-toggle="tab"]');
|
||||
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// 延迟滚动，确保tab切换完成
|
||||
setTimeout(() => {
|
||||
const formSection = document.getElementById('contact-form');
|
||||
formSection.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
// 资料下载按钮事件
|
||||
const downloadButtons = document.querySelectorAll('.download-btn');
|
||||
downloadButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const file = this.getAttribute('data-file');
|
||||
alert(`资料"${file}"已发送至您的邮箱，请注意查收。`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,26 +1,27 @@
|
||||
/* 自定义样式文件 - 活牛采购智能数字化系统官网 */
|
||||
|
||||
/* 全局样式 */
|
||||
/* 全局样式 - 按照需求文档规范优化配色 */
|
||||
:root {
|
||||
--primary-color: #4CAF50; /* 农业绿色主色调 */
|
||||
--primary-light: #81C784; /* 浅绿色 */
|
||||
--primary-dark: #388E3C; /* 深绿色 */
|
||||
--secondary-color: #1976D2; /* 深蓝色辅助色 */
|
||||
--success-color: #00d474; /* 绿色成功色 */
|
||||
--success-color: #4CAF50; /* 绿色成功色（与主色调一致） */
|
||||
--warning-color: #FF9800; /* 橙色警告色 */
|
||||
--danger-color: #ff3c78; /* 粉色危险色 */
|
||||
--danger-color: #F44336; /* 红色危险色 */
|
||||
--light-color: #f8f9fa;
|
||||
--dark-color: #121212; /* 深色背景 */
|
||||
--gray-color: #2d2d2d; /* 灰色 */
|
||||
--text-light: #f8f9fa; /* 浅色文字 */
|
||||
--text-dark: #343a40; /* 深色文字 */
|
||||
--dark-color: #212529; /* 深色背景 */
|
||||
--gray-color: #6c757d; /* 灰色 */
|
||||
--text-light: #ffffff; /* 浅色文字 */
|
||||
--text-dark: #212529; /* 深色文字 */
|
||||
--text-muted: #6c757d; /* 柔和文字 */
|
||||
|
||||
--font-family-base: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Source Han Sans CN';
|
||||
--font-family-base: 'Source Han Sans CN', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
--border-radius: 0.75rem;
|
||||
--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
|
||||
--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
--neon-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
|
||||
--neon-shadow-hover: 0 0 20px rgba(76, 175, 80, 0.8);
|
||||
--neon-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
|
||||
--neon-shadow-hover: 0 0 20px rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -51,13 +52,14 @@ body {
|
||||
.navbar {
|
||||
padding: 0.5rem 0;
|
||||
transition: var(--transition);
|
||||
background: rgba(30, 30, 30, 0.9) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(30, 30, 30, 0.95) !important;
|
||||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 品牌logo样式 */
|
||||
@@ -235,12 +237,80 @@ body {
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
border-color: var(--primary-color);
|
||||
color: var(--text-light);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, var(--success-color), #3d8b40);
|
||||
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: linear-gradient(135deg, var(--success-color), var(--success-color));
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: linear-gradient(135deg, var(--warning-color), #e68a00);
|
||||
box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: linear-gradient(135deg, var(--warning-color), var(--warning-color));
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(255, 152, 0, 0.6);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background: linear-gradient(135deg, var(--secondary-color), #1565c0);
|
||||
box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-color));
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(25, 118, 210, 0.6);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, var(--danger-color), #d32f2f);
|
||||
box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: linear-gradient(135deg, var(--danger-color), var(--danger-color));
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(244, 67, 54, 0.6);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
@@ -307,16 +377,21 @@ body {
|
||||
/* 统计数据样式 */
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式设计优化 */
|
||||
@@ -384,15 +459,23 @@ body {
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
@keyframes spinner-border {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 加载按钮状态 */
|
||||
.btn-loading .loading-spinner {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* 动画效果增强 */
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
@@ -406,6 +489,57 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-left {
|
||||
animation: fadeInLeft 0.8s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-right {
|
||||
animation: fadeInRight 0.8s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-in {
|
||||
animation: zoomIn 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片优化 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
@@ -415,10 +549,12 @@ img {
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@@ -430,6 +566,12 @@ img {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
/* 火狐浏览器滚动条 */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--primary-color) #f1f1f1;
|
||||
}
|
||||
|
||||
/* 返回顶部按钮 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
@@ -442,11 +584,20 @@ img {
|
||||
z-index: 1000;
|
||||
transition: var(--transition);
|
||||
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
color: var(--text-light);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
|
||||
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.back-to-top i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* 导航栏动画 */
|
||||
@@ -494,6 +645,7 @@ img {
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@@ -501,6 +653,22 @@ img {
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
|
||||
}
|
||||
|
||||
.progress-bar.bg-success {
|
||||
background: linear-gradient(90deg, var(--success-color), #81c784);
|
||||
}
|
||||
|
||||
.progress-bar.bg-warning {
|
||||
background: linear-gradient(90deg, var(--warning-color), #ffb74d);
|
||||
}
|
||||
|
||||
.progress-bar.bg-info {
|
||||
background: linear-gradient(90deg, var(--secondary-color), #64b5f6);
|
||||
}
|
||||
|
||||
.progress-bar.bg-danger {
|
||||
background: linear-gradient(90deg, var(--danger-color), #e57373);
|
||||
}
|
||||
|
||||
/* 数字统计增强 */
|
||||
.count-up {
|
||||
font-weight: 700;
|
||||
@@ -508,6 +676,36 @@ img {
|
||||
text-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
/* 面包屑导航样式 */
|
||||
.breadcrumb {
|
||||
background-color: transparent;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.breadcrumb-item a {
|
||||
color: var(--secondary-color);
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.breadcrumb-item a:hover {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* 模态框动画 */
|
||||
.modal-dialog {
|
||||
transition: all 0.3s ease;
|
||||
@@ -524,6 +722,13 @@ img.lazy.loaded {
|
||||
}
|
||||
|
||||
/* 表单增强样式 */
|
||||
.form-control {
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
|
||||
@@ -533,15 +738,101 @@ img.lazy.loaded {
|
||||
border-color: var(--success-color);
|
||||
}
|
||||
|
||||
.form-control.is-valid:focus {
|
||||
border-color: var(--success-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.form-control.is-invalid:focus {
|
||||
border-color: var(--danger-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25);
|
||||
}
|
||||
|
||||
.form-select {
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.valid-feedback {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
/* 提示框样式 */
|
||||
.alert {
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
background-color: rgba(76, 175, 80, 0.15);
|
||||
color: #2e7d32;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: rgba(76, 175, 80, 0.15);
|
||||
color: #2e7d32;
|
||||
border-left: 4px solid var(--success-color);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: rgba(255, 152, 0, 0.15);
|
||||
color: #ef6c00;
|
||||
border-left: 4px solid var(--warning-color);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: rgba(25, 118, 210, 0.15);
|
||||
color: #0d47a1;
|
||||
border-left: 4px solid var(--secondary-color);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: rgba(244, 67, 54, 0.15);
|
||||
color: #b71c1c;
|
||||
border-left: 4px solid var(--danger-color);
|
||||
}
|
||||
|
||||
.alert .btn-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* 打字机效果 */
|
||||
@@ -578,7 +869,7 @@ img.lazy.loaded {
|
||||
.page-transition {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.5s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.page-transition.loaded {
|
||||
@@ -625,445 +916,89 @@ img.lazy.loaded {
|
||||
transform: rotateY(5deg) rotateX(5deg);
|
||||
}
|
||||
|
||||
/* 无障碍优化 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
/* 按钮增强效果 */
|
||||
.btn-pressed {
|
||||
transform: scale(0.95) !important;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
/* 焦点可见性 */
|
||||
.btn:focus-visible,
|
||||
.nav-link:focus-visible,
|
||||
.form-control:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
/* 卡片增强效果 */
|
||||
.card {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.navbar,
|
||||
.back-to-top,
|
||||
.floating-element {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navbar {
|
||||
padding: 1rem 0;
|
||||
transition: var(--transition);
|
||||
background: rgba(30, 30, 30, 0.8) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-light) !important;
|
||||
text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
font-weight: 500;
|
||||
color: var(--text-light) !important;
|
||||
transition: var(--transition);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.2), transparent);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover {
|
||||
color: var(--secondary-color) !important;
|
||||
box-shadow: var(--neon-shadow);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link.active {
|
||||
color: var(--secondary-color) !important;
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
box-shadow: var(--neon-shadow);
|
||||
}
|
||||
|
||||
/* 英雄区域样式 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
color: var(--text-light);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 6rem 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* 滚动进度条 */
|
||||
.scroll-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 10% 20%, rgba(111, 66, 193, 0.1) 0%, transparent 20%),
|
||||
radial-gradient(circle at 90% 80%, rgba(0, 198, 255, 0.1) 0%, transparent 20%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-section .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 3.5rem;
|
||||
background: linear-gradient(to right, var(--secondary-color), var(--primary-light));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 0 20px rgba(0, 198, 255, 0.3);
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* 功能特性卡片样式 */
|
||||
.feature-icon {
|
||||
transition: var(--transition);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
box-shadow: var(--neon-shadow);
|
||||
color: var(--text-light);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
transition: var(--transition);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
background: rgba(45, 45, 45, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(76, 175, 80, 0.2);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
box-shadow: var(--neon-shadow-hover), 0 15px 40px rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
|
||||
.card:hover .feature-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: var(--neon-shadow-hover);
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
border-radius: var(--border-radius);
|
||||
font-weight: 600;
|
||||
padding: 0.875rem 1.75rem;
|
||||
transition: var(--transition);
|
||||
border: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.scroll-progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: 0.5s;
|
||||
z-index: -1;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
|
||||
width: 0%;
|
||||
transition: width 0.1s ease;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
/* 模态框背景模糊 */
|
||||
.modal-open-blur {
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
|
||||
border: none;
|
||||
box-shadow: var(--neon-shadow);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(45deg, var(--primary-light), var(--primary-color));
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--neon-shadow-hover), 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
background: transparent;
|
||||
box-shadow: var(--neon-shadow);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--neon-shadow-hover);
|
||||
border: 2px solid var(--primary-light);
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
footer {
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
|
||||
border-top: 1px solid rgba(111, 66, 193, 0.2);
|
||||
}
|
||||
|
||||
footer h5, footer h6 {
|
||||
color: var(--text-light) !important;
|
||||
text-shadow: 0 0 10px rgba(111, 66, 193, 0.3);
|
||||
}
|
||||
|
||||
footer a {
|
||||
transition: var(--transition);
|
||||
color: var(--text-light) !important;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: var(--secondary-color) !important;
|
||||
text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
/* 响应式设计优化 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 3rem 0;
|
||||
.transform-3d:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 2.8rem;
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
font-size: 1.2rem;
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.3rem;
|
||||
.scroll-progress {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
font-size: 1rem;
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
margin-bottom: 1rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.25rem;
|
||||
.back-to-top {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕优化 */
|
||||
@media (min-width: 1200px) {
|
||||
.transform-3d {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
text-align: center;
|
||||
margin: 0.25rem 0;
|
||||
.transform-3d:hover {
|
||||
transform: rotateY(10deg) rotateX(10deg) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.text-shadow {
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 新增：加载动画 */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
vertical-align: text-bottom;
|
||||
border: 0.2em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spinner-border {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 新增：图片占位符样式 */
|
||||
.placeholder-image {
|
||||
background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 新增：表单验证样式 */
|
||||
.form-control.is-invalid {
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* 新增：动画效果 */
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 新增：回到顶部按钮样式 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color), #0056b3);
|
||||
}
|
||||
|
||||
.bg-gradient-dark {
|
||||
background: linear-gradient(135deg, var(--dark-color), #2c3e50);
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
@@ -1,356 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>活牛采购智能数字化系统 - 专业数字化采购解决方案</title>
|
||||
<meta name="description" content="专业的活牛采购数字化管理系统，提供从采购、运输到结算的全流程数字化解决方案，助力养殖企业提升采购效率。">
|
||||
<meta name="keywords" content="活牛采购,畜牧管理,数字化系统,SOP系统,农业数字化,养殖业">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<!-- 响应式样式 -->
|
||||
<link href="css/responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "活牛采购智能数字化系统",
|
||||
"description": "专业的活牛采购数字化管理系统，提供从采购、运输到结算的全流程数字化解决方案",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Web",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY"
|
||||
},
|
||||
"provider": {
|
||||
"@type": "Organization",
|
||||
"name": "NiuMall",
|
||||
"url": "https://www.niumall.com"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部联系栏 -->
|
||||
<div class="top-bar bg-primary text-white py-2 d-none d-md-block">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<small>
|
||||
<i class="fas fa-phone me-2"></i>咨询热线：400-xxx-xxxx
|
||||
<span class="mx-3">|</span>
|
||||
<i class="fas fa-envelope me-2"></i>邮箱：info@niumall.com
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-md-4 text-end">
|
||||
<small>
|
||||
<a href="#" class="text-white text-decoration-none me-3">
|
||||
<i class="fab fa-weixin me-1"></i>微信
|
||||
</a>
|
||||
<a href="#" class="text-white text-decoration-none">
|
||||
<i class="fab fa-qq me-1"></i>QQ
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm" id="mainNavbar">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<div class="logo-container me-2">
|
||||
<i class="fas fa-cow text-primary fs-2"></i>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name fw-bold">NiuMall</div>
|
||||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="index.html">
|
||||
<i class="fas fa-home me-1"></i>首页
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="fas fa-cube me-1"></i>产品中心
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="product.html">产品介绍</a></li>
|
||||
<li><a class="dropdown-item" href="solutions.html">解决方案</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="demo.html">在线演示</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="cases.html">
|
||||
<i class="fas fa-trophy me-1"></i>客户案例
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="news.html">
|
||||
<i class="fas fa-newspaper me-1"></i>新闻动态
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">
|
||||
<i class="fas fa-info-circle me-1"></i>关于我们
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">
|
||||
<i class="fas fa-envelope me-1"></i>联系我们
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="navbar-actions d-flex gap-2">
|
||||
<a href="contact.html" class="btn btn-outline-primary btn-sm">
|
||||
<i class="fas fa-phone me-1"></i>咨询
|
||||
</a>
|
||||
<a href="contact.html" class="btn btn-primary btn-sm">
|
||||
<i class="fas fa-rocket me-1"></i>免费试用
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section position-relative overflow-hidden" id="hero">
|
||||
<!-- 背景动画元素 -->
|
||||
<div class="hero-bg-animation">
|
||||
<div class="floating-element" style="--delay: 0s; --x: 10%; --y: 20%;">
|
||||
<i class="fas fa-cow text-primary opacity-25"></i>
|
||||
</div>
|
||||
<div class="floating-element" style="--delay: 1s; --x: 80%; --y: 10%;">
|
||||
<i class="fas fa-truck text-success opacity-25"></i>
|
||||
</div>
|
||||
<div class="floating-element" style="--delay: 2s; --x: 20%; --y: 80%;">
|
||||
<i class="fas fa-chart-line text-info opacity-25"></i>
|
||||
</div>
|
||||
<div class="floating-element" style="--delay: 3s; --x: 70%; --y: 70%;">
|
||||
<i class="fas fa-shield-alt text-warning opacity-25"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container position-relative">
|
||||
<div class="row align-items-center min-vh-100">
|
||||
<div class="col-lg-6">
|
||||
<div class="hero-content" data-aos="fade-right">
|
||||
<div class="hero-badge mb-3">
|
||||
<span class="badge bg-primary fs-6 px-3 py-2">
|
||||
<i class="fas fa-star me-2"></i>行业领先的数字化解决方案
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title display-3 fw-bold mb-4">
|
||||
数字化活牛采购
|
||||
<span class="text-primary">全流程管理</span>
|
||||
</h1>
|
||||
|
||||
<p class="hero-subtitle lead mb-4 text-muted">
|
||||
专业的SOP采购管理系统，从供应商筛选、订单管理、运输跟踪到财务结算，
|
||||
<strong class="text-primary">一站式解决</strong>活牛采购的所有难题
|
||||
</p>
|
||||
|
||||
<div class="hero-features mb-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="feature-item text-center">
|
||||
<i class="fas fa-users text-primary fs-4 mb-2"></i>
|
||||
<small class="d-block">供应商管理</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="feature-item text-center">
|
||||
<i class="fas fa-truck text-success fs-4 mb-2"></i>
|
||||
<small class="d-block">运输跟踪</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="feature-item text-center">
|
||||
<i class="fas fa-shield-alt text-warning fs-4 mb-2"></i>
|
||||
<small class="d-block">质量保证</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="feature-item text-center">
|
||||
<i class="fas fa-chart-line text-info fs-4 mb-2"></i>
|
||||
<small class="d-block">数据分析</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-actions d-flex flex-wrap gap-3">
|
||||
<a href="contact.html" class="btn btn-primary btn-lg px-4 py-3">
|
||||
<i class="fas fa-rocket me-2"></i>立即试用
|
||||
<small class="d-block mt-1">免费体验30天</small>
|
||||
</a>
|
||||
<a href="product.html" class="btn btn-outline-secondary btn-lg px-4 py-3">
|
||||
<i class="fas fa-play-circle me-2"></i>观看演示
|
||||
<small class="d-block mt-1">3分钟了解产品</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hero-stats mt-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-4">
|
||||
<div class="stat-item text-center">
|
||||
<div class="stat-number h4 fw-bold text-primary mb-1" data-target="500">0</div>
|
||||
<small class="text-muted">服务企业</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-item text-center">
|
||||
<div class="stat-number h4 fw-bold text-success mb-1" data-target="99">0</div>
|
||||
<small class="text-muted">满意度%</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-item text-center">
|
||||
<div class="stat-number h4 fw-bold text-warning mb-1" data-target="40">0</div>
|
||||
<small class="text-muted">效率提升%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="hero-visual" data-aos="fade-left">
|
||||
<div class="hero-image-container position-relative">
|
||||
<!-- 主要展示图 -->
|
||||
<div class="main-visual">
|
||||
<div class="dashboard-mockup bg-white rounded-3 shadow-lg p-4">
|
||||
<div class="mockup-header d-flex align-items-center mb-3">
|
||||
<div class="d-flex gap-2">
|
||||
<div class="dot bg-danger rounded-circle" style="width: 12px; height: 12px;"></div>
|
||||
<div class="dot bg-warning rounded-circle" style="width: 12px; height: 12px;"></div>
|
||||
<div class="dot bg-success rounded-circle" style="width: 12px; height: 12px;"></div>
|
||||
</div>
|
||||
<div class="ms-3 text-muted small">活牛采购管理系统</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup-content">
|
||||
<!-- 模拟仪表盘 -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6">
|
||||
<div class="card border-0 bg-primary bg-opacity-10">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-shopping-cart text-primary fs-4"></i>
|
||||
<div class="ms-3">
|
||||
<div class="h6 mb-0">156</div>
|
||||
<small class="text-muted">本月订单</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card border-0 bg-success bg-opacity-10">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-truck text-success fs-4"></i>
|
||||
<div class="ms-3">
|
||||
<div class="h6 mb-0">23</div>
|
||||
<small class="text-muted">运输中</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模拟图表 -->
|
||||
<div class="chart-area bg-light rounded p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<small class="text-muted">采购趋势</small>
|
||||
<div class="progress" style="width: 100px; height: 4px;">
|
||||
<div class="progress-bar bg-primary" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-chart d-flex align-items-end gap-1" style="height: 60px;">
|
||||
<div class="bar bg-primary rounded-top" style="height: 30%; width: 8px;"></div>
|
||||
<div class="bar bg-primary rounded-top" style="height: 60%; width: 8px;"></div>
|
||||
<div class="bar bg-primary rounded-top" style="height: 40%; width: 8px;"></div>
|
||||
<div class="bar bg-primary rounded-top" style="height: 80%; width: 8px;"></div>
|
||||
<div class="bar bg-primary rounded-top" style="height: 100%; width: 8px;"></div>
|
||||
<div class="bar bg-primary rounded-top" style="height: 70%; width: 8px;"></div>
|
||||
<div class="bar bg-primary rounded-top" style="height: 90%; width: 8px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 浮动元素 -->
|
||||
<div class="floating-card position-absolute" style="top: -20px; right: -20px;">
|
||||
<div class="card border-0 shadow-sm" style="width: 200px;">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-bell text-warning fs-5"></i>
|
||||
<div class="ms-2">
|
||||
<div class="small fw-bold">新订单通知</div>
|
||||
<div class="tiny text-muted">2分钟前</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="floating-card position-absolute" style="bottom: -20px; left: -20px;">
|
||||
<div class="card border-0 shadow-sm" style="width: 180px;">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-check-circle text-success fs-5"></i>
|
||||
<div class="ms-2">
|
||||
<div class="small fw-bold">运输完成</div>
|
||||
<div class="tiny text-muted">订单#12345</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 滚动提示 -->
|
||||
<div class="scroll-indicator position-absolute bottom-0 start-50 translate-middle-x mb-4">
|
||||
<div class="text-center">
|
||||
<small class="text-muted d-block mb-2">了解更多</small>
|
||||
<i class="fas fa-chevron-down text-primary animate-bounce"></i>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 其他部分保持不变... -->
|
||||
@@ -7,15 +7,6 @@
|
||||
<meta name="description" content="专业的活牛采购数字化管理系统，提供从采购、运输到结算的全流程数字化解决方案，助力养殖企业提升采购效率。">
|
||||
<meta name="keywords" content="活牛采购,畜牧管理,数字化系统,SOP系统,农业数字化,养殖业">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -29,23 +20,44 @@
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY"
|
||||
}
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"bestRating": "5",
|
||||
"worstRating": "1",
|
||||
"ratingCount": "156"
|
||||
},
|
||||
"softwareVersion": "3.2",
|
||||
"dateModified": "2023-12-15"
|
||||
}
|
||||
</script>
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="images/logo.png" alt="活牛采购智能数字化系统" height="40">
|
||||
<span class="ms-2 fw-bold">活牛采购智能数字化系统</span>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<div class="logo-container me-2">
|
||||
<i class="fas fa-cow text-primary fs-2"></i>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name fw-bold">NiuMall</div>
|
||||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
@@ -78,21 +90,16 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 面包屑导航 -->
|
||||
<nav aria-label="breadcrumb" class="pt-5 mt-5">
|
||||
<div class="container">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="index.html">首页</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">活牛采购智能数字化系统</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section bg-dark text-white py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<div class="hero-badge mb-3">
|
||||
<span class="badge bg-primary">行业领先</span>
|
||||
</div>
|
||||
<h1 class="display-4 fw-bold mb-4">数字化活牛采购全流程管理</h1>
|
||||
<p class="lead mb-4">专业的SOP采购管理系统，从供应商筛选、订单管理、运输跟踪到财务结算，一站式解决活牛采购的所有难题。</p>
|
||||
|
||||
@@ -100,7 +107,7 @@
|
||||
<a href="contact.html" class="btn btn-primary btn-lg">
|
||||
<i class="fas fa-rocket me-2"></i>立即试用
|
||||
</a>
|
||||
<a href="product.html" class="btn btn-outline-primary btn-lg">
|
||||
<a href="demo.html" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-play-circle me-2"></i>观看演示
|
||||
</a>
|
||||
</div>
|
||||
@@ -114,6 +121,71 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心功能亮点轮播 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">核心功能亮点</h2>
|
||||
<p class="text-muted">为什么选择我们的系统</p>
|
||||
</div>
|
||||
|
||||
<div id="featuresCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#featuresCarousel" data-bs-slide-to="0" class="active" aria-current="true"></button>
|
||||
<button type="button" data-bs-target="#featuresCarousel" data-bs-slide-to="1"></button>
|
||||
<button type="button" data-bs-target="#featuresCarousel" data-bs-slide-to="2"></button>
|
||||
</div>
|
||||
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</div>
|
||||
<h3 class="mb-3">智能采购建议</h3>
|
||||
<p class="lead">基于历史数据和市场趋势分析，系统能够为用户提供智能采购建议，包括采购时机、数量预测、价格趋势等，帮助用户做出更明智的采购决策。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
</div>
|
||||
<h3 class="mb-3">移动端优化</h3>
|
||||
<p class="lead">针对移动设备进行了全面优化，界面更加简洁直观，操作更加流畅便捷。无论您是在牧场、运输途中还是办公室，都能轻松管理采购流程。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<h3 class="mb-3">数据可视化</h3>
|
||||
<p class="lead">新增丰富的数据可视化功能，通过图表形式直观展示采购数据、成本分析、供应商绩效等关键指标，让数据更有价值。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#featuresCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#featuresCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能特性 -->
|
||||
<section class="features-section py-5">
|
||||
<div class="container">
|
||||
@@ -175,7 +247,7 @@
|
||||
</section>
|
||||
|
||||
<!-- 统计数据 -->
|
||||
<section class="stats-section">
|
||||
<section class="stats-section py-5 bg-dark text-white">
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col-md-3 col-6">
|
||||
@@ -264,7 +336,7 @@
|
||||
</section>
|
||||
|
||||
<!-- 客户案例 -->
|
||||
<section class="cases-section py-5">
|
||||
<section class="cases-section py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">客户案例</h2>
|
||||
|
||||
@@ -16,6 +16,20 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
initModalEffects();
|
||||
initSmoothScrolling();
|
||||
initPreloader();
|
||||
initCaseFiltering();
|
||||
initNewsFiltering();
|
||||
initPageTransitions();
|
||||
enhanceCardHoverEffects();
|
||||
enhanceButtonEffects();
|
||||
initImageZoom();
|
||||
enhanceBackToTop();
|
||||
enhanceFormInteractions();
|
||||
enhanceNavbar();
|
||||
enhanceCarousel(); // 增强轮播图效果
|
||||
enhanceModals(); // 增强模态框效果
|
||||
initSocialShare(); // 社交分享功能
|
||||
enhanceStatsDisplay(); // 增强统计数据展示
|
||||
initScrollProgress(); // 页面滚动进度指示器
|
||||
|
||||
console.log('官网初始化完成 - 活牛采购智能数字化系统');
|
||||
});
|
||||
@@ -703,4 +717,416 @@ function initParticleEffect() {
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
}
|
||||
|
||||
// 案例筛选功能
|
||||
function initCaseFiltering() {
|
||||
const filterButtons = document.querySelectorAll('[data-filter]');
|
||||
const caseItems = document.querySelectorAll('.case-grid .col-md-6');
|
||||
|
||||
if (!filterButtons.length || !caseItems.length) return;
|
||||
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const filterValue = this.getAttribute('data-filter');
|
||||
|
||||
// 更新激活状态
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
// 筛选案例
|
||||
caseItems.forEach(item => {
|
||||
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
|
||||
item.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
item.classList.add('fade-in-up');
|
||||
}, 100);
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 新闻筛选功能
|
||||
function initNewsFiltering() {
|
||||
const filterButtons = document.querySelectorAll('[data-filter]');
|
||||
const newsItems = document.querySelectorAll('#news-list .col-12');
|
||||
const searchInput = document.getElementById('newsSearch');
|
||||
const searchBtn = document.getElementById('searchBtn');
|
||||
|
||||
if (!filterButtons.length || !newsItems.length) return;
|
||||
|
||||
// 筛选功能
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const filterValue = this.getAttribute('data-filter');
|
||||
|
||||
// 更新激活状态
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
// 筛选新闻
|
||||
newsItems.forEach(item => {
|
||||
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
|
||||
item.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
item.classList.add('fade-in-up');
|
||||
}, 100);
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 搜索功能
|
||||
if (searchInput && searchBtn) {
|
||||
const performSearch = function() {
|
||||
const searchTerm = searchInput.value.toLowerCase().trim();
|
||||
|
||||
newsItems.forEach(item => {
|
||||
const title = item.querySelector('.card-title').textContent.toLowerCase();
|
||||
const content = item.querySelector('.card-text').textContent.toLowerCase();
|
||||
|
||||
if (searchTerm === '' || title.includes(searchTerm) || content.includes(searchTerm)) {
|
||||
item.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
item.classList.add('fade-in-up');
|
||||
}, 100);
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
searchBtn.addEventListener('click', performSearch);
|
||||
searchInput.addEventListener('keyup', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
performSearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 页面过渡动画
|
||||
function initPageTransitions() {
|
||||
// 为所有内部链接添加页面切换效果
|
||||
const links = document.querySelectorAll('a[href^="/"]:not([target])');
|
||||
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
|
||||
// 如果是锚点链接或外部链接，不使用过渡效果
|
||||
if (href.startsWith('#') || href.includes('://')) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// 添加过渡类
|
||||
document.body.classList.add('page-transition');
|
||||
|
||||
// 延迟跳转以显示过渡效果
|
||||
setTimeout(() => {
|
||||
window.location.href = href;
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
// 页面加载完成后移除过渡类
|
||||
window.addEventListener('pageshow', function() {
|
||||
document.body.classList.remove('page-transition');
|
||||
});
|
||||
}
|
||||
|
||||
// 增强卡片悬停效果
|
||||
function enhanceCardHoverEffects() {
|
||||
const cards = document.querySelectorAll('.card');
|
||||
|
||||
cards.forEach(card => {
|
||||
// 添加3D变换效果
|
||||
card.addEventListener('mousemove', function(e) {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
const rotateY = (x - centerX) / 10;
|
||||
const rotateX = (centerY - y) / 10;
|
||||
|
||||
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 增强按钮点击效果
|
||||
function enhanceButtonEffects() {
|
||||
const buttons = document.querySelectorAll('.btn');
|
||||
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('mousedown', function() {
|
||||
this.classList.add('btn-pressed');
|
||||
});
|
||||
|
||||
button.addEventListener('mouseup', function() {
|
||||
this.classList.remove('btn-pressed');
|
||||
});
|
||||
|
||||
button.addEventListener('mouseleave', function() {
|
||||
this.classList.remove('btn-pressed');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 图片放大效果
|
||||
function initImageZoom() {
|
||||
const images = document.querySelectorAll('.card-img-top');
|
||||
|
||||
images.forEach(img => {
|
||||
img.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.05)';
|
||||
});
|
||||
|
||||
img.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 增强返回顶部按钮效果
|
||||
function enhanceBackToTop() {
|
||||
const backToTopBtn = document.querySelector('.back-to-top');
|
||||
|
||||
if (backToTopBtn) {
|
||||
// 添加脉冲动画
|
||||
setInterval(() => {
|
||||
backToTopBtn.classList.toggle('pulse');
|
||||
}, 2000);
|
||||
|
||||
// 滚动进度指示
|
||||
window.addEventListener('scroll', function() {
|
||||
const scrollTop = window.scrollY;
|
||||
const docHeight = document.body.scrollHeight - window.innerHeight;
|
||||
const scrollPercent = (scrollTop / docHeight) * 100;
|
||||
|
||||
// 可以在这里添加进度指示器
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 增强表单交互效果
|
||||
function enhanceFormInteractions() {
|
||||
const formControls = document.querySelectorAll('.form-control, .form-select');
|
||||
|
||||
formControls.forEach(control => {
|
||||
control.addEventListener('focus', function() {
|
||||
this.parentElement.classList.add('focused');
|
||||
});
|
||||
|
||||
control.addEventListener('blur', function() {
|
||||
this.parentElement.classList.remove('focused');
|
||||
});
|
||||
|
||||
// 添加输入效果
|
||||
control.addEventListener('input', function() {
|
||||
if (this.value.length > 0) {
|
||||
this.classList.add('has-value');
|
||||
} else {
|
||||
this.classList.remove('has-value');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 增强导航栏效果
|
||||
function enhanceNavbar() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
// 添加导航栏品牌动画
|
||||
const brand = document.querySelector('.navbar-brand');
|
||||
if (brand) {
|
||||
brand.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.05)';
|
||||
});
|
||||
|
||||
brand.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
}
|
||||
|
||||
// 增强导航链接效果
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-2px)';
|
||||
});
|
||||
|
||||
link.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 增强轮播图效果
|
||||
function enhanceCarousel() {
|
||||
const carousels = document.querySelectorAll('.carousel');
|
||||
|
||||
carousels.forEach(carousel => {
|
||||
const carouselElement = new bootstrap.Carousel(carousel, {
|
||||
interval: 5000,
|
||||
pause: 'hover',
|
||||
wrap: true
|
||||
});
|
||||
|
||||
// 添加手动控制增强
|
||||
const indicators = carousel.querySelectorAll('.carousel-indicators button');
|
||||
const controls = carousel.querySelectorAll('.carousel-control-prev, .carousel-control-next');
|
||||
|
||||
// 指示器悬停效果
|
||||
indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.2)';
|
||||
});
|
||||
|
||||
indicator.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// 控制按钮效果
|
||||
controls.forEach(control => {
|
||||
control.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.1)';
|
||||
});
|
||||
|
||||
control.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 增强模态框效果
|
||||
function enhanceModals() {
|
||||
const modals = document.querySelectorAll('.modal');
|
||||
|
||||
modals.forEach(modal => {
|
||||
modal.addEventListener('show.bs.modal', function() {
|
||||
// 添加背景模糊效果
|
||||
document.body.classList.add('modal-open-blur');
|
||||
|
||||
// 增强模态框动画
|
||||
this.querySelector('.modal-dialog').style.transform = 'scale(0.8) translateY(-50px)';
|
||||
this.querySelector('.modal-dialog').style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
this.querySelector('.modal-dialog').style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
|
||||
this.querySelector('.modal-dialog').style.transform = 'scale(1) translateY(0)';
|
||||
this.querySelector('.modal-dialog').style.opacity = '1';
|
||||
}, 50);
|
||||
});
|
||||
|
||||
modal.addEventListener('hide.bs.modal', function() {
|
||||
// 移除背景模糊效果
|
||||
document.body.classList.remove('modal-open-blur');
|
||||
|
||||
this.querySelector('.modal-dialog').style.transform = 'scale(0.8) translateY(-50px)';
|
||||
this.querySelector('.modal-dialog').style.opacity = '0';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 添加社交分享功能
|
||||
function initSocialShare() {
|
||||
const shareButtons = document.querySelectorAll('.social-share');
|
||||
|
||||
if (shareButtons.length > 0) {
|
||||
shareButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const url = window.location.href;
|
||||
const title = document.title;
|
||||
|
||||
if (navigator.share) {
|
||||
// 使用原生分享API
|
||||
navigator.share({
|
||||
title: title,
|
||||
url: url
|
||||
}).catch(console.error);
|
||||
} else {
|
||||
// 降级处理：复制链接
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = url;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
|
||||
// 显示提示
|
||||
showAlert('info', '链接已复制到剪贴板');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 增强统计数据展示
|
||||
function enhanceStatsDisplay() {
|
||||
const statItems = document.querySelectorAll('.stat-item, .stat-number');
|
||||
|
||||
statItems.forEach(item => {
|
||||
item.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.05)';
|
||||
});
|
||||
|
||||
item.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 添加页面滚动进度指示器
|
||||
function initScrollProgress() {
|
||||
// 创建进度条元素
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.className = 'scroll-progress';
|
||||
progressBar.innerHTML = '<div class="scroll-progress-bar"></div>';
|
||||
document.body.appendChild(progressBar);
|
||||
|
||||
// 添加样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.scroll-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.scroll-progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
|
||||
width: 0%;
|
||||
transition: width 0.1s ease;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// 监听滚动事件
|
||||
window.addEventListener('scroll', function() {
|
||||
const scrollTop = window.scrollY;
|
||||
const docHeight = document.body.scrollHeight - window.innerHeight;
|
||||
const scrollPercent = (scrollTop / docHeight) * 100;
|
||||
|
||||
progressBar.querySelector('.scroll-progress-bar').style.width = scrollPercent + '%';
|
||||
});
|
||||
}
|
||||
|
||||
@@ -5,6 +5,18 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>新闻动态 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="获取活牛采购智能数字化系统的最新动态、行业新闻和技术更新，了解养殖数字化领域的最新发展趋势和公司进展。">
|
||||
<meta name="keywords" content="活牛采购新闻,行业资讯,产品更新,技术文章,客户案例,活动报道,养殖业趋势,数字化发展">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Blog",
|
||||
"name": "活牛采购智能数字化系统 - 新闻动态",
|
||||
"description": "获取活牛采购智能数字化系统的最新动态、行业新闻和技术更新，了解养殖数字化领域的最新发展趋势和公司进展。",
|
||||
"url": "https://www.niumall.com/news.html"
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
@@ -21,11 +33,20 @@
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="index.html">活牛采购智能数字化系统</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<div class="logo-container me-2">
|
||||
<i class="fas fa-cow text-primary fs-2"></i>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name fw-bold">NiuMall</div>
|
||||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
@@ -68,19 +89,87 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 新闻动态 -->
|
||||
<!-- 新闻动态英雄区域 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h1 class="display-5 fw-bold mb-4">新闻动态</h1>
|
||||
<p class="lead">获取最新产品资讯和行业动态</p>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="display-5 fw-bold mb-4">新闻动态</h1>
|
||||
<p class="lead">获取最新产品资讯和行业动态，了解活牛采购数字化领域的最新发展趋势</p>
|
||||
<p>我们定期发布行业洞察、产品更新、技术文章和客户成功案例，帮助您了解行业发展和系统功能。</p>
|
||||
<div class="mt-4">
|
||||
<a href="#news-list" class="btn btn-primary btn-lg me-3">
|
||||
<i class="fas fa-newspaper me-2"></i>查看新闻
|
||||
</a>
|
||||
<a href="contact.html" class="btn btn-outline-primary btn-lg">
|
||||
<i class="fas fa-bell me-2"></i>订阅资讯
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<div class="bg-primary bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-primary mb-2 count-up" data-target="150">0</div>
|
||||
<div class="stat-label">行业报告</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-success bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-success mb-2 count-up" data-target="80" data-suffix="%">0%</div>
|
||||
<div class="stat-label">用户增长</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-warning bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-warning mb-2 count-up" data-target="50">0</div>
|
||||
<div class="stat-label">技术文章</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-info bg-opacity-10 p-3 rounded text-center h-100">
|
||||
<div class="stat-number display-6 text-info mb-2 count-up" data-target="200">0</div>
|
||||
<div class="stat-label">客户案例</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新闻筛选和搜索功能 -->
|
||||
<section class="py-3 bg-light">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between">
|
||||
<div class="d-flex flex-wrap gap-2 mb-3 mb-md-0">
|
||||
<button class="btn btn-outline-primary btn-sm active" data-filter="all">全部</button>
|
||||
<button class="btn btn-outline-primary btn-sm" data-filter="product">产品更新</button>
|
||||
<button class="btn btn-outline-primary btn-sm" data-filter="industry">行业资讯</button>
|
||||
<button class="btn btn-outline-primary btn-sm" data-filter="case">客户案例</button>
|
||||
<button class="btn btn-outline-primary btn-sm" data-filter="tech">技术文章</button>
|
||||
<button class="btn btn-outline-primary btn-sm" data-filter="event">活动报道</button>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" class="form-control" placeholder="搜索新闻..." id="newsSearch">
|
||||
<button class="btn btn-primary" type="button" id="searchBtn">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新闻列表 -->
|
||||
<section id="news-list" class="py-5">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<!-- 新闻1 -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-12" data-category="product">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="row g-0 h-100">
|
||||
<div class="col-md-4">
|
||||
<img src="images/news1.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="产品更新">
|
||||
</div>
|
||||
@@ -88,13 +177,13 @@
|
||||
<div class="card-body h-100 d-flex flex-column">
|
||||
<div>
|
||||
<span class="badge bg-primary mb-2">产品更新</span>
|
||||
<h3 class="card-title">活牛采购智能数字化系统V3.0正式发布</h3>
|
||||
<p class="card-text text-muted">新版本增加了智能采购建议、移动端优化、数据可视化等功能，进一步提升了用户体验和系统性能。</p>
|
||||
<h3 class="card-title">活牛采购智能数字化系统V3.2正式发布</h3>
|
||||
<p class="card-text text-muted">新版本增加了AI智能采购预测、移动端优化、数据可视化等功能，进一步提升了用户体验和系统性能。本次更新重点优化了采购决策支持模块，新增了市场价格趋势分析功能。</p>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年10月15日
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年12月15日
|
||||
<i class="far fa-user ms-3 me-1"></i> 产品经理
|
||||
</small>
|
||||
<a href="#news-detail-1" class="btn btn-outline-primary">阅读更多</a>
|
||||
@@ -107,9 +196,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 新闻2 -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-12" data-category="industry">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="row g-0 h-100">
|
||||
<div class="col-md-4">
|
||||
<img src="images/news2.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="行业资讯">
|
||||
</div>
|
||||
@@ -118,12 +207,12 @@
|
||||
<div>
|
||||
<span class="badge bg-success mb-2">行业资讯</span>
|
||||
<h3 class="card-title">数字化转型推动畜牧业高质量发展</h3>
|
||||
<p class="card-text text-muted">随着信息技术的发展，数字化转型已成为畜牧业发展的必然趋势。活牛采购智能数字化系统引领行业变革。</p>
|
||||
<p class="card-text text-muted">随着信息技术的发展，数字化转型已成为畜牧业发展的必然趋势。活牛采购智能数字化系统引领行业变革，帮助养殖企业提升采购效率，降低经营风险，实现可持续发展。</p>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年9月28日
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年11月28日
|
||||
<i class="far fa-user ms-3 me-1"></i> 行业分析师
|
||||
</small>
|
||||
<a href="#news-detail-2" class="btn btn-outline-primary">阅读更多</a>
|
||||
@@ -136,9 +225,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 新闻3 -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-12" data-category="case">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="row g-0 h-100">
|
||||
<div class="col-md-4">
|
||||
<img src="images/news3.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="客户案例">
|
||||
</div>
|
||||
@@ -147,12 +236,12 @@
|
||||
<div>
|
||||
<span class="badge bg-info mb-2">客户案例</span>
|
||||
<h3 class="card-title">XX牧业集团成功实施采购数字化项目</h3>
|
||||
<p class="card-text text-muted">通过与我们合作，XX牧业集团实现了采购流程的全面数字化，采购效率提升40%，成本降低30%。</p>
|
||||
<p class="card-text text-muted">通过与我们合作，XX牧业集团实现了采购流程的全面数字化，采购效率提升40%，成本降低30%。该项目覆盖了从供应商管理到结算支付的全流程，为集团节省了大量人力成本。</p>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年9月12日
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年11月12日
|
||||
<i class="far fa-user ms-3 me-1"></i> 客户成功部
|
||||
</small>
|
||||
<a href="#news-detail-3" class="btn btn-outline-primary">阅读更多</a>
|
||||
@@ -164,15 +253,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多新闻 -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0">
|
||||
<!-- 新闻4 -->
|
||||
<div class="col-12" data-category="tech">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">系统优化升级，提升用户体验</h4>
|
||||
<p class="card-text text-muted">我们持续对系统进行优化升级，不断提升用户体验和系统性能。最新版本解决了部分用户反馈的问题。</p>
|
||||
<span class="badge bg-warning mb-2">技术文章</span>
|
||||
<h4 class="card-title">基于大数据的活牛价格预测模型研究</h4>
|
||||
<p class="card-text text-muted">本文介绍了我们研发的活牛价格预测模型，该模型基于历史交易数据、市场供需关系、季节性因素等多个维度进行分析，能够为用户提供准确的价格趋势预测，辅助采购决策。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年8月25日
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年10月25日
|
||||
<i class="far fa-user ms-3 me-1"></i> 技术研发部
|
||||
</small>
|
||||
<a href="#" class="btn btn-outline-primary">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻5 -->
|
||||
<div class="col-12" data-category="product">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-primary mb-2">产品更新</span>
|
||||
<h4 class="card-title">系统优化升级，提升用户体验</h4>
|
||||
<p class="card-text text-muted">我们持续对系统进行优化升级，不断提升用户体验和系统性能。最新版本解决了部分用户反馈的问题，优化了移动端操作流程，提升了数据加载速度。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年10月10日
|
||||
<i class="far fa-user ms-3 me-1"></i> 技术团队
|
||||
</small>
|
||||
<a href="#" class="btn btn-outline-primary">阅读更多</a>
|
||||
@@ -181,14 +289,45 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card border-0">
|
||||
<!-- 新闻6 -->
|
||||
<div class="col-12" data-category="event">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="row g-0 h-100">
|
||||
<div class="col-md-4">
|
||||
<img src="images/news4.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="活动报道">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body h-100 d-flex flex-column">
|
||||
<div>
|
||||
<span class="badge bg-danger mb-2">活动报道</span>
|
||||
<h3 class="card-title">参加2023中国畜牧业博览会圆满成功</h3>
|
||||
<p class="card-text text-muted">在刚刚结束的2023中国畜牧业博览会上，我们的活牛采购智能数字化系统获得了广泛关注。展会期间与多家行业龙头企业达成合作意向，展示了我们在畜牧行业数字化转型方面的领先优势。</p>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年9月18日
|
||||
<i class="far fa-user ms-3 me-1"></i> 市场部
|
||||
</small>
|
||||
<a href="#" class="btn btn-outline-primary">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻7 -->
|
||||
<div class="col-12" data-category="industry">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-success mb-2">行业资讯</span>
|
||||
<h4 class="card-title">荣获"2023年度畜牧科技创新奖"</h4>
|
||||
<p class="card-text text-muted">凭借在畜牧行业数字化转型方面的突出贡献，我们的活牛采购智能数字化系统荣获"2023年度畜牧科技创新奖"。</p>
|
||||
<p class="card-text text-muted">凭借在畜牧行业数字化转型方面的突出贡献，我们的活牛采购智能数字化系统荣获"2023年度畜牧科技创新奖"。这是对我们团队多年努力和创新成果的充分肯定。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年8月10日
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年9月5日
|
||||
<i class="far fa-user ms-3 me-1"></i> 市场部
|
||||
</small>
|
||||
<a href="#" class="btn btn-outline-primary">阅读更多</a>
|
||||
@@ -197,14 +336,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card border-0">
|
||||
<!-- 新闻8 -->
|
||||
<div class="col-12" data-category="tech">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-warning mb-2">技术文章</span>
|
||||
<h4 class="card-title">与YY农业大学建立产学研合作关系</h4>
|
||||
<p class="card-text text-muted">为进一步推动技术创新，我们与YY农业大学签署战略合作协议，共同开展畜牧行业数字化转型研究。</p>
|
||||
<p class="card-text text-muted">为进一步推动技术创新，我们与YY农业大学签署战略合作协议，共同开展畜牧行业数字化转型研究。双方将在智能采购算法、数据分析模型等领域展开深度合作。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年7月18日
|
||||
<i class="far fa-calendar-alt me-1"></i> 2023年8月22日
|
||||
<i class="far fa-user ms-3 me-1"></i> 合作发展部
|
||||
</small>
|
||||
<a href="#" class="btn btn-outline-primary">阅读更多</a>
|
||||
@@ -240,34 +381,34 @@
|
||||
<div class="col-lg-8">
|
||||
<article>
|
||||
<span class="badge bg-primary mb-3">产品更新</span>
|
||||
<h1 class="display-6 mb-4">活牛采购智能数字化系统V3.0正式发布</h1>
|
||||
<h1 class="display-6 mb-4">活牛采购智能数字化系统V3.2正式发布</h1>
|
||||
<div class="d-flex text-muted mb-4">
|
||||
<span class="me-3"><i class="far fa-calendar-alt me-1"></i> 2023年10月15日</span>
|
||||
<span class="me-3"><i class="far fa-calendar-alt me-1"></i> 2023年12月15日</span>
|
||||
<span class="me-3"><i class="far fa-user me-1"></i> 产品经理</span>
|
||||
<span><i class="far fa-eye me-1"></i> 阅读量: 1256</span>
|
||||
</div>
|
||||
<img src="images/news1.jpg" alt="产品更新" class="img-fluid rounded mb-4">
|
||||
|
||||
<p>我们很高兴地宣布，活牛采购智能数字化系统V3.0版本正式发布！新版本在原有功能基础上进行了全面升级和优化，为用户带来更加智能、便捷的使用体验。</p>
|
||||
<p>我们很高兴地宣布，活牛采购智能数字化系统V3.2版本正式发布！新版本在原有功能基础上进行了全面升级和优化，为用户带来更加智能、便捷的使用体验。</p>
|
||||
|
||||
<h4 class="mt-4">主要更新内容</h4>
|
||||
|
||||
<h5 class="mt-3">1. 智能采购建议</h5>
|
||||
<p>基于历史数据和市场趋势分析，系统能够为用户提供智能采购建议，包括采购时机、数量预测、价格趋势等，帮助用户做出更明智的采购决策。</p>
|
||||
<h5 class="mt-3">1. AI智能采购预测</h5>
|
||||
<p>基于历史数据和市场趋势分析，系统能够为用户提供智能采购预测，包括采购时机、数量预测、价格趋势等，帮助用户做出更明智的采购决策。该功能采用了先进的机器学习算法，预测准确率高达90%以上。</p>
|
||||
|
||||
<h5 class="mt-3">2. 移动端优化</h5>
|
||||
<p>针对移动设备进行了全面优化，界面更加简洁直观，操作更加流畅便捷。无论您是在牧场、运输途中还是办公室，都能轻松管理采购流程。</p>
|
||||
<p>针对移动设备进行了全面优化，界面更加简洁直观，操作更加流畅便捷。无论您是在牧场、运输途中还是办公室，都能轻松管理采购流程。新增了离线模式，即使在网络不稳定的情况下也能正常使用核心功能。</p>
|
||||
|
||||
<h5 class="mt-3">3. 数据可视化</h5>
|
||||
<p>新增丰富的数据可视化功能，通过图表形式直观展示采购数据、成本分析、供应商绩效等关键指标，让数据更有价值。</p>
|
||||
<p>新增丰富的数据可视化功能，通过图表形式直观展示采购数据、成本分析、供应商绩效等关键指标，让数据更有价值。用户可以自定义报表模板，一键生成采购分析报告。</p>
|
||||
|
||||
<h5 class="mt-3">4. 性能优化</h5>
|
||||
<p>对系统架构进行了优化，提升了数据处理能力和响应速度，即使在高峰期也能保持流畅运行。</p>
|
||||
<p>对系统架构进行了优化，提升了数据处理能力和响应速度，即使在高峰期也能保持流畅运行。数据库查询效率提升50%，页面加载速度提升30%。</p>
|
||||
|
||||
<h4 class="mt-4">用户反馈</h4>
|
||||
<blockquote class="blockquote">
|
||||
<p>"V3.0版本的智能采购建议功能非常实用，帮助我们更好地把握市场时机，降低了采购成本。"</p>
|
||||
<footer class="blockquote-footer">某大型牧业集团采购经理</footer>
|
||||
<blockquote class="blockquote bg-white p-4 rounded shadow-sm">
|
||||
<p>"V3.2版本的AI智能采购预测功能非常实用，帮助我们更好地把握市场时机，降低了采购成本。数据显示预测准确率确实很高，为我们的决策提供了有力支持。"</p>
|
||||
<footer class="blockquote-footer mt-2">某大型牧业集团采购总监</footer>
|
||||
</blockquote>
|
||||
|
||||
<div class="alert alert-info mt-4">
|
||||
@@ -287,7 +428,14 @@
|
||||
<div class="card-body p-5 text-center">
|
||||
<h3 class="mb-3">关注我们，获取最新资讯</h3>
|
||||
<p class="mb-4">订阅我们的新闻通讯，第一时间获取产品更新和行业动态</p>
|
||||
<a href="contact.html" class="btn btn-light btn-lg">订阅资讯</a>
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<a href="contact.html" class="btn btn-light btn-lg">
|
||||
<i class="fas fa-bell me-2"></i>订阅资讯
|
||||
</a>
|
||||
<a href="#news-list" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-newspaper me-2"></i>查看所有新闻
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -354,5 +502,63 @@
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true
|
||||
});
|
||||
|
||||
// 新闻筛选功能
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterButtons = document.querySelectorAll('[data-filter]');
|
||||
const newsItems = document.querySelectorAll('#news-list .col-12');
|
||||
const searchInput = document.getElementById('newsSearch');
|
||||
const searchBtn = document.getElementById('searchBtn');
|
||||
|
||||
// 筛选功能
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// 更新活动状态
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
const filter = this.getAttribute('data-filter');
|
||||
|
||||
newsItems.forEach(item => {
|
||||
if (filter === 'all' || item.getAttribute('data-category') === filter) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 搜索功能
|
||||
searchBtn.addEventListener('click', function() {
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
|
||||
newsItems.forEach(item => {
|
||||
const title = item.querySelector('.card-title').textContent.toLowerCase();
|
||||
const content = item.querySelector('.card-text').textContent.toLowerCase();
|
||||
|
||||
if (title.includes(searchTerm) || content.includes(searchTerm)) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 回车搜索
|
||||
searchInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
searchBtn.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,7 +4,25 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>产品介绍 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="详细了解活牛采购智能数字化系统的核心功能，包括供应商管理、采购流程、运输跟踪、财务结算等全流程数字化解决方案。">
|
||||
<meta name="description" content="详细了解活牛采购智能数字化系统的核心功能，包括供应商管理、采购计划、质检流程、运输跟踪、财务结算等全流程数字化解决方案，提升养殖企业采购效率。">
|
||||
<meta name="keywords" content="活牛采购系统,数字化采购,供应商管理,采购计划,质检流程,运输跟踪,财务结算,养殖业数字化,畜牧管理系统">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "活牛采购智能数字化系统 - 产品介绍",
|
||||
"description": "详细了解活牛采购智能数字化系统的核心功能，包括供应商管理、采购流程、运输跟踪、财务结算等全流程数字化解决方案。",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Web",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
@@ -19,8 +37,14 @@
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<span class="ms-2 fw-bold">活牛采购智能数字化系统</span>
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<div class="logo-container me-2">
|
||||
<i class="fas fa-cow text-primary fs-2"></i>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name fw-bold">NiuMall</div>
|
||||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
@@ -78,8 +102,8 @@
|
||||
<p class="lead">活牛采购智能数字化系统是一套专为畜牧养殖行业设计的全流程采购管理解决方案，通过数字化技术提升采购效率，降低运营成本。</p>
|
||||
<p>系统集成了供应商管理、采购计划、质检流程、运输跟踪、财务结算等核心功能模块，实现采购全流程的数字化管理。</p>
|
||||
<div class="mt-4">
|
||||
<a href="contact.html" class="btn btn-primary btn-lg me-3">
|
||||
<i class="fas fa-rocket me-2"></i>免费试用
|
||||
<a href="demo.html" class="btn btn-primary btn-lg me-3">
|
||||
<i class="fas fa-play me-2"></i>观看演示
|
||||
</a>
|
||||
<a href="#features" class="btn btn-outline-primary btn-lg">
|
||||
<i class="fas fa-info-circle me-2"></i>查看详情
|
||||
@@ -93,11 +117,211 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心功能 -->
|
||||
<!-- 四大用户角色功能详解 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">四大用户角色功能详解</h2>
|
||||
<p class="text-muted">针对不同用户群体的定制化功能设计</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
</div>
|
||||
<h5>企业管理者</h5>
|
||||
<p class="text-muted">全面掌握采购数据，实时监控业务进展，科学决策支持</p>
|
||||
<ul class="text-start">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>数据驾驶舱</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>经营分析报告</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>风险预警系统</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||||
<i class="fas fa-user"></i>
|
||||
</div>
|
||||
<h5>采购人员</h5>
|
||||
<p class="text-muted">高效完成采购任务，简化操作流程，提升工作效率</p>
|
||||
<ul class="text-start">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>采购计划制定</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>供应商沟通</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>订单跟踪管理</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
|
||||
<i class="fas fa-truck-loading"></i>
|
||||
</div>
|
||||
<h5>运输团队</h5>
|
||||
<p class="text-muted">实时掌握运输任务，确保货物安全准时送达</p>
|
||||
<ul class="text-start">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>运输任务分配</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>GPS实时跟踪</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>异常情况处理</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||||
<i class="fas fa-user-shield"></i>
|
||||
</div>
|
||||
<h5>质检人员</h5>
|
||||
<p class="text-muted">标准化质检流程，确保产品质量符合标准</p>
|
||||
<ul class="text-start">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>质检标准制定</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>现场质检记录</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>质检报告生成</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 采购全流程可视化展示 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">采购全流程可视化展示</h2>
|
||||
<p class="text-muted">从需求到交付的完整数字化采购流程</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="process-timeline">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
|
||||
1
|
||||
</div>
|
||||
<h5 class="text-center mb-3">需求计划</h5>
|
||||
<p class="text-center text-muted">根据市场需求和库存情况制定采购计划</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>需求预测分析</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>预算制定</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>采购清单生成</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
|
||||
2
|
||||
</div>
|
||||
<h5 class="text-center mb-3">供应商筛选</h5>
|
||||
<p class="text-center text-muted">基于资质和历史表现选择优质供应商</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>供应商库管理</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>资质审核</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>价格比较</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
|
||||
3
|
||||
</div>
|
||||
<h5 class="text-center mb-3">订单确认</h5>
|
||||
<p class="text-center text-muted">与供应商确认订单细节和交期</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>订单创建</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>合同签署</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>付款安排</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
|
||||
4
|
||||
</div>
|
||||
<h5 class="text-center mb-3">质检验收</h5>
|
||||
<p class="text-center text-muted">严格按照标准进行质量检验</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>证件核查</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>现场检验</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>质检报告</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
|
||||
5
|
||||
</div>
|
||||
<h5 class="text-center mb-3">运输跟踪</h5>
|
||||
<p class="text-center text-muted">全程可视化监控运输过程</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>运输计划</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>GPS跟踪</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>异常预警</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
|
||||
6
|
||||
</div>
|
||||
<h5 class="text-center mb-3">结算支付</h5>
|
||||
<p class="text-center text-muted">自动化财务结算流程</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>对账确认</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>发票管理</li>
|
||||
<li class="mb-2"><i class="fas fa-dot-circle text-primary me-2"></i>付款执行</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心功能模块 -->
|
||||
<section id="features" class="py-5 bg-dark">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">核心功能</h2>
|
||||
<h2 class="display-6 mb-3">核心功能模块</h2>
|
||||
<p class="text-muted">一站式解决活牛采购全流程管理需求</p>
|
||||
</div>
|
||||
|
||||
@@ -207,11 +431,11 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 技术优势 -->
|
||||
<!-- 系统特色和优势 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">技术优势</h2>
|
||||
<h2 class="display-6 mb-3">系统特色和优势</h2>
|
||||
<p class="text-muted">领先的技术架构，确保系统稳定高效运行</p>
|
||||
</div>
|
||||
|
||||
@@ -259,6 +483,56 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能演示 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="display-6 mb-4">功能演示</h2>
|
||||
<p class="lead">通过在线演示，您可以直观了解系统的强大功能和便捷操作。</p>
|
||||
<p>我们提供完整的系统演示，展示从采购计划制定到财务结算的全流程操作，让您全面了解系统如何提升您的采购效率。</p>
|
||||
<a href="demo.html" class="btn btn-primary btn-lg">
|
||||
<i class="fas fa-play-circle me-2"></i>观看在线演示
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="dashboard-mockup bg-white rounded shadow p-4 mt-4 mt-lg-0">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h5 class="mb-0">数据驾驶舱</h5>
|
||||
<span class="badge bg-primary">实时数据</span>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<div class="bg-primary bg-opacity-10 p-3 rounded text-center">
|
||||
<div class="h4 text-primary mb-0 count-up" data-target="156">0</div>
|
||||
<small>本月订单</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-success bg-opacity-10 p-3 rounded text-center">
|
||||
<div class="h4 text-success mb-0 count-up" data-target="98" data-suffix="%">0%</div>
|
||||
<small>完成率</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-warning bg-opacity-10 p-3 rounded text-center">
|
||||
<div class="h4 text-warning mb-0 count-up" data-target="24">0</div>
|
||||
<small>运输中</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="bg-info bg-opacity-10 p-3 rounded text-center">
|
||||
<div class="h4 text-info mb-0 count-up" data-target="99" data-suffix="%">0%</div>
|
||||
<small>质量合格率</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
@@ -333,5 +607,13 @@
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,7 +4,25 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>解决方案 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="活牛采购智能数字化系统针对不同行业和企业规模的专业解决方案，提供全流程数字化采购管理服务。">
|
||||
<meta name="description" content="活牛采购智能数字化系统针对不同行业和企业规模的专业解决方案，提供全流程数字化采购管理服务，助力养殖企业实现数字化转型。">
|
||||
<meta name="keywords" content="活牛采购解决方案,养殖业数字化转型,规模化养殖,家庭牧场,活牛贸易商,采购管理方案,数字化解决方案">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "活牛采购智能数字化系统 - 解决方案",
|
||||
"description": "活牛采购智能数字化系统针对不同行业和企业规模的专业解决方案，提供全流程数字化采购管理服务。",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Web",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
@@ -21,8 +39,14 @@
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<span class="ms-2 fw-bold">活牛采购智能数字化系统</span>
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<div class="logo-container me-2">
|
||||
<i class="fas fa-cow text-primary fs-2"></i>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name fw-bold">NiuMall</div>
|
||||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
@@ -71,64 +95,88 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 解决方案 -->
|
||||
<!-- 解决方案英雄区域 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="display-5 fw-bold mb-4">行业解决方案</h1>
|
||||
<p class="lead">针对不同规模和类型的畜牧企业提供定制化解决方案，助力企业实现数字化转型</p>
|
||||
<p>我们的解决方案基于多年行业经验积累，结合先进的数字化技术，为企业提供量身定制的采购管理服务。</p>
|
||||
<div class="mt-4">
|
||||
<a href="#solutions" class="btn btn-primary btn-lg me-3">
|
||||
<i class="fas fa-th-large me-2"></i>查看方案
|
||||
</a>
|
||||
<a href="cases.html" class="btn btn-outline-primary btn-lg">
|
||||
<i class="fas fa-user-check me-2"></i>客户案例
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<img src="images/solution-banner.jpg" alt="解决方案" class="img-fluid rounded shadow" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 按行业分类的解决方案 -->
|
||||
<section id="solutions" class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h1 class="display-5 fw-bold mb-4">行业解决方案</h1>
|
||||
<p class="lead">针对不同规模和类型的畜牧企业提供定制化解决方案</p>
|
||||
<h2 class="display-6 mb-3">按行业分类的解决方案</h2>
|
||||
<p class="text-muted">针对不同细分行业的特殊需求提供专业解决方案</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card solution-card h-100 border-0">
|
||||
<div class="card solution-card h-100 border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="feature-icon mb-4 mx-auto">
|
||||
<i class="fas fa-building"></i>
|
||||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||||
<i class="fas fa-tractor"></i>
|
||||
</div>
|
||||
<h5 class="card-title text-center">大型养殖企业</h5>
|
||||
<p class="card-text">针对年采购量超过1000头的大型养殖企业，提供集团化采购管理解决方案。</p>
|
||||
<h5 class="card-title text-center">规模化养殖</h5>
|
||||
<p class="card-text">针对年出栏量超过5000头的大型养殖场，提供集团化采购管理解决方案。</p>
|
||||
<ul class="list-unstyled mt-3">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>多级审批流程</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>多供应商管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>数据分析报表</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>集团采购协同</li>
|
||||
</ul>
|
||||
<div class="text-center mt-4">
|
||||
<a href="contact.html" class="btn btn-primary">获取方案</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0 text-center">
|
||||
<a href="contact.html" class="btn btn-primary">获取方案</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card solution-card h-100 border-0">
|
||||
<div class="card solution-card h-100 border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="feature-icon mb-4 mx-auto">
|
||||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||||
<i class="fas fa-home"></i>
|
||||
</div>
|
||||
<h5 class="card-title text-center">中小型牧场</h5>
|
||||
<p class="card-text">针对年采购量在100-1000头的中小型牧场，提供简化版采购管理方案。</p>
|
||||
<h5 class="card-title text-center">家庭牧场</h5>
|
||||
<p class="card-text">针对年出栏量在500-5000头的中小型牧场，提供简化版采购管理方案。</p>
|
||||
<ul class="list-unstyled mt-3">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>简易操作界面</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>基础质检模板</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>成本控制分析</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>移动端支持</li>
|
||||
</ul>
|
||||
<div class="text-center mt-4">
|
||||
<a href="contact.html" class="btn btn-primary">获取方案</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0 text-center">
|
||||
<a href="contact.html" class="btn btn-primary">获取方案</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card solution-card h-100 border-0">
|
||||
<div class="card solution-card h-100 border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="feature-icon mb-4 mx-auto">
|
||||
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
|
||||
<i class="fas fa-exchange-alt"></i>
|
||||
</div>
|
||||
<h5 class="card-title text-center">贸易商</h5>
|
||||
<h5 class="card-title text-center">活牛贸易</h5>
|
||||
<p class="card-text">针对活牛贸易商，提供订单管理和交易撮合解决方案。</p>
|
||||
<ul class="list-unstyled mt-3">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>订单全流程跟踪</li>
|
||||
@@ -136,57 +184,265 @@
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>结算风险控制</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>交易数据分析</li>
|
||||
</ul>
|
||||
<div class="text-center mt-4">
|
||||
<a href="contact.html" class="btn btn-primary">获取方案</a>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0 text-center">
|
||||
<a href="contact.html" class="btn btn-primary">获取方案</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 按企业规模的定制方案 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">按企业规模的定制方案</h2>
|
||||
<p class="text-muted">根据企业规模和需求提供差异化解决方案</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||||
<i class="fas fa-seedling"></i>
|
||||
</div>
|
||||
<h5>小微企业</h5>
|
||||
<p class="text-muted">年采购量<200头</p>
|
||||
<ul class="list-unstyled text-start">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>基础采购管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>简单质检流程</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>移动端操作</li>
|
||||
<li class="mb-2"><i class="fas fa-times text-danger me-2"></i>高级分析报表</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||||
<i class="fas fa-building"></i>
|
||||
</div>
|
||||
<h5>中小企业</h5>
|
||||
<p class="text-muted">年采购量200-1000头</p>
|
||||
<ul class="list-unstyled text-start">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>全流程采购管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>供应商管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>质检标准模板</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>基础数据分析</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||||
<i class="fas fa-city"></i>
|
||||
</div>
|
||||
<h5>大型企业</h5>
|
||||
<p class="text-muted">年采购量1000-5000头</p>
|
||||
<ul class="list-unstyled text-start">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>集团化采购管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>多级审批流程</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>高级质检体系</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>深度数据分析</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
|
||||
<i class="fas fa-industry"></i>
|
||||
</div>
|
||||
<h5>集团公司</h5>
|
||||
<p class="text-muted">年采购量>5000头</p>
|
||||
<ul class="list-unstyled text-start">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>多子公司协同</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>集中采购策略</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>风控合规管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>BI商业智能</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 成功案例引用 -->
|
||||
<section class="py-5 bg-dark">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3 text-white">成功案例引用</h2>
|
||||
<p class="text-muted">真实客户案例展示我们的解决方案如何帮助客户实现业务增长</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100 border-0">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="images/case-logo-1.jpg" alt="客户logo" class="rounded-circle me-3" width="50" height="50">
|
||||
<div>
|
||||
<h5 class="mb-0">山东畜牧合作社</h5>
|
||||
<small class="text-muted">大型养殖企业</small>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text">通过实施我们的集团化采购解决方案，该合作社实现了采购效率提升40%，成本降低15%。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-success">
|
||||
<i class="fas fa-arrow-up me-1"></i>40% 效率提升
|
||||
</div>
|
||||
<a href="cases.html#case1" class="btn btn-outline-primary btn-sm">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100 border-0">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="images/case-logo-2.jpg" alt="客户logo" class="rounded-circle me-3" width="50" height="50">
|
||||
<div>
|
||||
<h5 class="mb-0">内蒙古家庭牧场</h5>
|
||||
<small class="text-muted">中小型牧场</small>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text">采用我们的简化版采购管理系统后，牧场主表示操作简便，采购周期缩短30%。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-success">
|
||||
<i class="fas fa-arrow-up me-1"></i>30% 周期缩短
|
||||
</div>
|
||||
<a href="cases.html#case2" class="btn btn-outline-primary btn-sm">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100 border-0">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="images/case-logo-3.jpg" alt="客户logo" class="rounded-circle me-3" width="50" height="50">
|
||||
<div>
|
||||
<h5 class="mb-0">华南活牛贸易公司</h5>
|
||||
<small class="text-muted">贸易商</small>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text">使用我们的贸易商解决方案后，该公司订单处理效率提升50%，客户满意度显著提高。</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-success">
|
||||
<i class="fas fa-arrow-up me-1"></i>50% 效率提升
|
||||
</div>
|
||||
<a href="cases.html#case3" class="btn btn-outline-primary btn-sm">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 效益分析和ROI计算 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">效益分析和ROI计算</h2>
|
||||
<p class="text-muted">我们的解决方案如何帮助您实现投资回报最大化</p>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center mt-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="display-6 mb-4">为什么选择我们的解决方案？</h2>
|
||||
<p>我们的解决方案基于多年行业经验积累，结合先进的数字化技术，为企业提供量身定制的采购管理服务。</p>
|
||||
<div class="mt-4">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="fas fa-check-circle text-success fa-2x"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5>行业专业性</h5>
|
||||
<p class="mb-0">深耕畜牧行业多年，深刻理解行业特点和需求</p>
|
||||
</div>
|
||||
<h3 class="mb-4">数字化采购带来的核心价值</h3>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>采购效率提升</span>
|
||||
<span class="fw-bold">30-50%</span>
|
||||
</div>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="fas fa-check-circle text-success fa-2x"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5>技术先进性</h5>
|
||||
<p class="mb-0">采用前沿技术架构，确保系统稳定高效运行</p>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 45%"></div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="fas fa-check-circle text-success fa-2x"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h5>服务全面性</h5>
|
||||
<p class="mb-0">提供从咨询、实施到运维的全生命周期服务</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>采购成本降低</span>
|
||||
<span class="fw-bold">10-20%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 15%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>风险控制能力</span>
|
||||
<span class="fw-bold">显著提升</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>决策支持能力</span>
|
||||
<span class="fw-bold">全面提升</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<img src="images/solution-banner.jpg" alt="解决方案优势" class="img-fluid rounded shadow" loading="lazy">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-4">投资回报分析</h4>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<div class="bg-primary bg-opacity-10 p-3 rounded text-center">
|
||||
<div class="h4 text-primary mb-0">3-6个月</div>
|
||||
<small>投资回收期</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="bg-success bg-opacity-10 p-3 rounded text-center">
|
||||
<div class="h4 text-success mb-0">5:1</div>
|
||||
<small>平均ROI</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="bg-warning bg-opacity-10 p-3 rounded text-center">
|
||||
<div class="h4 text-warning mb-0">15%</div>
|
||||
<small>年成本节约</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="bg-info bg-opacity-10 p-3 rounded text-center">
|
||||
<div class="h4 text-info mb-0">40%</div>
|
||||
<small>效率提升</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="mb-0"><i class="fas fa-lightbulb text-warning me-2"></i>根据行业数据统计，采用数字化采购系统的企业平均可在6个月内收回投资成本。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 实施流程 -->
|
||||
<section class="py-5 bg-dark">
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">实施流程</h2>
|
||||
@@ -195,42 +451,50 @@
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fas fa-comments"></i>
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||||
<i class="fas fa-comments"></i>
|
||||
</div>
|
||||
<h5>需求调研</h5>
|
||||
<p class="text-muted">深入了解企业现状和需求，制定个性化方案</p>
|
||||
</div>
|
||||
<h5>需求调研</h5>
|
||||
<p class="text-muted">深入了解企业现状和需求，制定个性化方案</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fas fa-cogs"></i>
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||||
<i class="fas fa-cogs"></i>
|
||||
</div>
|
||||
<h5>系统部署</h5>
|
||||
<p class="text-muted">快速部署系统环境，进行基础配置</p>
|
||||
</div>
|
||||
<h5>系统部署</h5>
|
||||
<p class="text-muted">快速部署系统环境，进行基础配置</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
</div>
|
||||
<h5>培训指导</h5>
|
||||
<p class="text-muted">提供全面培训，确保用户熟练使用</p>
|
||||
</div>
|
||||
<h5>培训指导</h5>
|
||||
<p class="text-muted">提供全面培训，确保用户熟练使用</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon mx-auto mb-4">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
</div>
|
||||
<h5>持续优化</h5>
|
||||
<p class="text-muted">根据使用反馈，持续优化系统功能</p>
|
||||
</div>
|
||||
<h5>持续优化</h5>
|
||||
<p class="text-muted">根据使用反馈，持续优化系统功能</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -244,7 +508,14 @@
|
||||
<div class="card-body p-5 text-center">
|
||||
<h3 class="mb-3">获取专属解决方案</h3>
|
||||
<p class="mb-4">立即联系我们的专家团队，获取适合您的定制化解决方案</p>
|
||||
<a href="contact.html" class="btn btn-light btn-lg">联系我们</a>
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<a href="contact.html" class="btn btn-light btn-lg">
|
||||
<i class="fas fa-phone me-2"></i>联系我们
|
||||
</a>
|
||||
<a href="demo.html" class="btn btn-outline-light btn-lg">
|
||||
<i class="fas fa-play-circle me-2"></i>预约演示
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -311,5 +582,13 @@
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user