docs(website): 重构关于页面布局和内容

- 更新页面布局,优化导航栏和面包屑导航
- 重新组织页面内容,突出公司使命和价值观
- 添加发展历程和核心团队介绍
- 更新合作伙伴展示方式
- 调整页脚内容,增加社交媒体链接
This commit is contained in:
2025-09-10 20:09:58 +08:00
parent 59cfe620fe
commit a9209b9c75
38 changed files with 10067 additions and 1989 deletions

View File

@@ -50,557 +50,331 @@
<a class="nav-link" href="contact.html">联系我们</a>
</li>
</ul>
<div class="ms-3">
<a href="contact.html" class="btn btn-primary">免费试用</a>
</div>
</div>
</div>
</nav>
<!-- 页面内容 -->
<main>
<!-- 英雄区域 -->
<section class="hero-section bg-dark text-white py-5 mt-5">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-8 mx-auto text-center">
<h1 class="display-4 fw-bold mb-4">关于我们</h1>
<p class="lead mb-4">致力于用科技赋能传统养殖行业,打造智能化的活牛采购数字化平台</p>
<!-- 面包屑导航 -->
<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="py-5">
<div class="container">
<div class="row align-items-center mb-5">
<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.html" class="btn btn-primary btn-lg me-3">
<i class="fas fa-rocket me-2"></i>免费试用
</a>
<a href="cases.html" class="btn btn-outline-primary btn-lg">
<i class="fas fa-users me-2"></i>客户案例
</a>
</div>
</div>
<div class="col-lg-6">
<img src="images/about-banner.jpg" alt="关于我们" class="img-fluid rounded shadow" loading="lazy">
</div>
</div>
</section>
</div>
</section>
<!-- 公司介绍 -->
<section class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6" data-aos="fade-right">
<h2 class="fw-bold text-dark mb-4">公司简介</h2>
<p class="text-muted mb-4">
活牛采购智能数字化系统成立于2018年是一家专注于为养殖行业提供数字化采购解决方案的科技公司。
我们深耕畜牧行业多年,深刻理解传统采购模式的痛点和挑战。
</p>
<p class="text-muted mb-4">
通过结合物联网、大数据分析和人工智能技术,我们开发了一套完整的活牛采购数字化管理系统,
帮助养殖企业实现采购流程的标准化、透明化和智能化。
</p>
<div class="row">
<div class="col-6">
<div class="d-flex align-items-center mb-3">
<div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
<i class="fas fa-users fs-4 text-primary"></i>
</div>
<div>
<div class="h4 fw-bold text-dark mb-0">200+</div>
<small class="text-muted">企业客户</small>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center mb-3">
<div class="bg-success bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
<i class="fas fa-cow fs-4 text-success"></i>
</div>
<div>
<div class="h4 fw-bold text-dark mb-0">50,000+</div>
<small class="text-muted">年交易牛只</small>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center mb-3">
<div class="bg-warning bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
<i class="fas fa-map-marker-alt fs-4 text-warning"></i>
</div>
<div>
<div class="h4 fw-bold text-dark mb-0">15+</div>
<small class="text-muted">省份覆盖</small>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center mb-3">
<div class="bg-info bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
<i class="fas fa-award fs-4 text-info"></i>
</div>
<div>
<div class="h4 fw-bold text-dark mb-0">10+</div>
<small class="text-muted">行业专利</small>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="placeholder-image bg-primary bg-opacity-10 rounded-3 p-5 text-center">
<i class="fas fa-building fs-1 text-primary mb-3"></i>
<h5 class="text-dark">公司总部</h5>
<p class="text-muted mb-0">北京市朝阳区科技园区</p>
</div>
</div>
</div>
</div>
</section>
<!-- 使命愿景 -->
<section class="py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4" data-aos="fade-up">
<div class="text-center p-4">
<div class="bg-primary bg-opacity-10 p-4 rounded-circle d-inline-block mb-3 feature-icon">
<i class="fas fa-bullseye fs-2 text-primary"></i>
</div>
<h4 class="fw-bold text-dark mb-3">我们的使命</h4>
<p class="text-muted">
通过数字化技术推动传统养殖行业转型升级,
让每一头牛的采购都更加智能、高效、透明。
</p>
</div>
</div>
<div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="100">
<div class="text-center p-4">
<div class="bg-success bg-opacity-10 p-4 rounded-circle d-inline-block mb-3 feature-icon">
<i class="fas fa-eye fs-2 text-success"></i>
</div>
<h4 class="fw-bold text-dark mb-3">我们的愿景</h4>
<p class="text-muted">
成为全球领先的畜牧行业数字化解决方案提供商,
构建智慧养殖新生态。
</p>
</div>
</div>
<div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="200">
<div class="text-center p-4">
<div class="bg-warning bg-opacity-10 p-4 rounded-circle d-inline-block mb-3 feature-icon">
<i class="fas fa-handshake fs-2 text-warning"></i>
</div>
<h4 class="fw-bold text-dark mb-3">我们的价值观</h4>
<p class="text-muted">
客户至上、技术创新、诚信务实、合作共赢,
为行业发展创造持续价值。
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 团队介绍 -->
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-12 text-center mb-5">
<h2 class="fw-bold text-dark mb-3">核心团队</h2>
<p class="text-muted">汇聚行业专家和技术精英,为您提供专业服务</p>
</div>
</div>
<div class="row g-4">
<!-- 团队成员1 -->
<div class="col-lg-3 col-md-6" data-aos="fade-up">
<div class="card border-0 shadow-sm h-100 text-center team-card">
<div class="team-avatar mx-auto mt-4">
<div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
<i class="fas fa-user-tie fs-1 text-primary"></i>
</div>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-1">张明</h5>
<span class="text-primary small mb-2 d-block">创始人 & CEO</span>
<p class="text-muted small">
15年畜牧行业经验前某大型养殖集团采购总监
深刻理解行业痛点。
</p>
<div class="social-links">
<a href="#" class="text-muted me-2"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<!-- 团队成员2 -->
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="card border-0 shadow-sm h-100 text-center team-card">
<div class="team-avatar mx-auto mt-4">
<div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
<i class="fas fa-laptop-code fs-1 text-success"></i>
</div>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-1">李华</h5>
<span class="text-success small mb-2 d-block">CTO</span>
<p class="text-muted small">
前BAT技术专家10年大数据和AI研发经验
主导系统架构设计。
</p>
<div class="social-links">
<a href="#" class="text-muted me-2"><i class="fab fa-github"></i></a>
<a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<!-- 团队成员3 -->
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
<div class="card border-0 shadow-sm h-100 text-center team-card">
<div class="team-avatar mx-auto mt-4">
<div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
<i class="fas fa-chart-line fs-1 text-warning"></i>
</div>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-1">王芳</h5>
<span class="text-warning small mb-2 d-block">运营总监</span>
<p class="text-muted small">
8年互联网运营经验擅长用户增长和客户成功
负责整体运营策略。
</p>
<div class="social-links">
<a href="#" class="text-muted me-2"><i class="fab fa-weixin"></i></a>
<a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<!-- 团队成员4 -->
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
<div class="card border-0 shadow-sm h-100 text-center team-card">
<div class="team-avatar mx-auto mt-4">
<div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
<i class="fas fa-graduation-cap fs-1 text-info"></i>
</div>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-1">陈教授</h5>
<span class="text-info small mb-2 d-block">首席科学家</span>
<p class="text-muted small">
农业大学生物科技教授,畜牧专家,
负责技术研发和标准制定。
</p>
<div class="social-links">
<a href="#" class="text-muted me-2"><i class="fas fa-book"></i></a>
<a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-12 text-center">
<a href="#" class="btn btn-outline-primary">查看完整团队</a>
</div>
</div>
</div>
</section>
<!-- 发展历程 -->
<section class="py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-12 text-center mb-5">
<h2 class="fw-bold text-dark mb-3">发展历程</h2>
<p class="text-muted">从初创到行业领先的成长轨迹</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="timeline">
<!-- 时间线项目1 -->
<div class="timeline-item" data-aos="fade-right">
<div class="timeline-date">2018.06</div>
<div class="timeline-content">
<h5 class="fw-bold text-dark">公司成立</h5>
<p class="text-muted mb-0">在北京正式注册成立,开始产品研发</p>
</div>
</div>
<!-- 时间线项目2 -->
<div class="timeline-item" data-aos="fade-left">
<div class="timeline-date">2019.03</div>
<div class="timeline-content">
<h5 class="fw-bold text-dark">首版发布</h5>
<p class="text-muted mb-0">推出第一代活牛采购管理系统</p>
</div>
</div>
<!-- 时间线项目3 -->
<div class="timeline-item" data-aos="fade-right">
<div class="timeline-date">2020.01</div>
<div class="timeline-content">
<h5 class="fw-bold text-dark">A轮融资</h5>
<p class="text-muted mb-0">获得千万级A轮融资加速市场扩张</p>
</div>
</div>
<!-- 时间线项目4 -->
<div class="timeline-item" data-aos="fade-left">
<div class="timeline-date">2021.08</div>
<div class="timeline-content">
<h5 class="fw-bold text-dark">用户突破</h5>
<p class="text-muted mb-0">服务客户超过100家年交易牛只破万</p>
</div>
</div>
<!-- 时间线项目5 -->
<div class="timeline-item" data-aos="fade-right">
<div class="timeline-date">2022.12</div>
<div class="timeline-content">
<h5 class="fw-bold text-dark">技术升级</h5>
<p class="text-muted mb-0">发布AI智能评估系统获得多项专利</p>
</div>
</div>
<!-- 时间线项目6 -->
<div class="timeline-item" data-aos="fade-left">
<div class="timeline-date">2023.06</div>
<div class="timeline-content">
<h5 class="fw-bold text-dark">全国布局</h5>
<p class="text-muted mb-0">业务覆盖全国15个省份成为行业标杆</p>
</div>
</div>
<!-- 时间线项目7 -->
<div class="timeline-item" data-aos="fade-right">
<div class="timeline-date">2024.01</div>
<div class="timeline-content">
<h5 class="fw-bold text-dark">生态构建</h5>
<p class="text-muted mb-0">启动智慧养殖生态平台建设</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 合作伙伴 -->
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-12 text-center mb-5">
<h2 class="fw-bold text-dark mb-3">合作伙伴</h2>
<p class="text-muted">与行业领先企业共同推动养殖数字化发展</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up">
<div class="partner-logo bg-light rounded-3 p-4 text-center">
<i class="fas fa-university fs-2 text-muted"></i>
<p class="small text-muted mb-0 mt-2">农业大学</p>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="100">
<div class="partner-logo bg-light rounded-3 p-4 text-center">
<i class="fas fa-hospital fs-2 text-muted"></i>
<p class="small text-muted mb-0 mt-2">兽医研究所</p>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="200">
<div class="partner-logo bg-light rounded-3 p-4 text-center">
<i class="fas fa-industry fs-2 text-muted"></i>
<p class="small text-muted mb-0 mt-2">牧业集团</p>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="300">
<div class="partner-logo bg-light rounded-3 p-4 text-center">
<i class="fas fa-truck fs-2 text-muted"></i>
<p class="small text-muted mb-0 mt-2">物流公司</p>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="400">
<div class="partner-logo bg-light rounded-3 p-4 text-center">
<i class="fas fa-money-bill-wave fs-2 text-muted"></i>
<p class="small text-muted mb-0 mt-2">金融机构</p>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="500">
<div class="partner-logo bg-light rounded-3 p-4 text-center">
<i class="fas fa-cloud fs-2 text-muted"></i>
<p class="small text-muted mb-0 mt-2">云服务商</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA区域 -->
<section class="py-5 bg-primary text-white">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<h3 class="fw-bold mb-3">加入我们,共创未来</h3>
<p class="mb-4">我们正在寻找志同道合的伙伴,一起用科技改变传统养殖行业</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="contact.html" class="btn btn-light btn-lg px-4">加入团队</a>
</div>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="text-white py-5">
<!-- 公司使命 -->
<section class="py-5 bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
<p class="text-light">
专业的数字化采购管理解决方案,
为养殖企业提供全流程的采购数字化服务。
</p>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">产品</h6>
<ul class="list-unstyled">
<li><a href="product.html" class="text-light text-decoration-none">产品介绍</a></li>
<li><a href="solutions.html" class="text-light text-decoration-none">解决方案</a></li>
<li><a href="#" class="text-light text-decoration-none">价格方案</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">资源</h6>
<ul class="list-unstyled">
<li><a href="cases.html" class="text-light text-decoration-none">客户案例</a></li>
<li><a href="news.html" class="text-light text-decoration-none">新闻动态</a></li>
<li><a href="#" class="text-light text-decoration-none">帮助文档</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">公司</h6>
<ul class="list-unstyled">
<li><a href="about.html" class="text-light text-decoration-none">关于我们</a></li>
<li><a href="contact.html" class="text-light text-decoration-none">联系我们</a></li>
<li><a href="#" class="text-light text-decoration-none">加入我们</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">联系信息</h6>
<div class="text-light">
<p class="mb-1"><i class="fas fa-phone me-2"></i> 15927219038(周经理)</p>
<p class="mb-1"><i class="fas fa-envelope me-2"></i> service@aiotagro.com</p>
<p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 武汉光谷软件园F2栋</p>
</div>
</div>
</div>
<hr class="my-4">
<div class="row align-items-center">
<div class="col-md-6">
<p class="text-light mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
</div>
<div class="col-md-6 text-md-end">
<div class="d-flex justify-content-md-end">
<a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
<a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
<a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
<div class="col-lg-8 mx-auto text-center">
<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">
<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">
<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">
<i class="fas fa-hands-helping"></i>
</div>
<h5>客户至上</h5>
<p class="text-muted">以客户为中心,提供卓越服务体验</p>
</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-lg-10 mx-auto">
<div class="timeline">
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-seedling"></i>
</div>
<div class="timeline-content">
<h5>2018年</h5>
<p>公司成立,专注于畜牧行业数字化解决方案研发</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-laptop-code"></i>
</div>
<div class="timeline-content">
<h5>2019年</h5>
<p>发布首款活牛采购管理系统V1.0,服务首批客户</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-users"></i>
</div>
<div class="timeline-content">
<h5>2020年</h5>
<p>客户数量突破100家覆盖全国主要畜牧区域</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-cloud"></i>
</div>
<div class="timeline-content">
<h5>2021年</h5>
<p>系统全面上云,支持多端协同,用户体验大幅提升</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-award"></i>
</div>
<div class="timeline-content">
<h5>2022年</h5>
<p>荣获"畜牧科技创新奖"服务客户数量突破500家</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-rocket"></i>
</div>
<div class="timeline-content">
<h5>2023年</h5>
<p>发布V3.0版本引入AI智能采购建议功能</p>
</div>
</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">核心团队</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">
<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>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<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>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<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>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0">
<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>
</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-6 col-md-4 col-lg-2">
<div class="partner-logo text-center p-4">
<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">
<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">
<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">
<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">
<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">
<img src="images/partner6.png" alt="合作伙伴6" class="img-fluid" style="max-height: 60px;">
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-5">
<div class="container">
<div class="card bg-primary text-white border-0 shadow">
<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>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4 mb-lg-0">
<h5 class="footer-title">活牛采购智能数字化系统</h5>
<p>专业的活牛采购全流程数字化管理解决方案,提升采购效率,降低经营风险。</p>
<div class="d-flex">
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">产品</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="product.html">功能介绍</a></li>
<li class="mb-2"><a href="solutions.html">解决方案</a></li>
<li class="mb-2"><a href="cases.html">客户案例</a></li>
<li class="mb-2"><a href="news.html">更新日志</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">支持</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#">帮助中心</a></li>
<li class="mb-2"><a href="#">在线客服</a></li>
<li class="mb-2"><a href="#">开发者文档</a></li>
<li class="mb-2"><a href="#">合作伙伴</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4">
<h5 class="footer-title">联系我们</h5>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区xxx街道xxx号</li>
<li class="mb-2"><i class="fas fa-phone me-2"></i> 400-xxx-xxxx</li>
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@example.com</li>
</ul>
</div>
</div>
<div class="copyright text-center">
<p>&copy; 2023 活牛采购智能数字化系统. 保留所有权利。</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<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: 1000,
once: true,
offset: 100
});
</script>
<!-- 返回顶部按钮 -->
<button class="back-to-top" aria-label="返回顶部">
<i class="fas fa-arrow-up"></i>
</button>
<style>
.team-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}
.timeline {
position: relative;
padding-left: 3rem;
}
.timeline::before {
content: '';
position: absolute;
left: 1.5rem;
top: 0;
bottom: 0;
width: 2px;
background: var(--bs-primary);
}
.timeline-item {
position: relative;
margin-bottom: 2rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: -3rem;
top: 0.5rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--bs-primary);
border: 3px solid white;
box-shadow: 0 0 0 3px var(--bs-primary);
}
.timeline-date {
position: absolute;
left: -8rem;
top: 0;
width: 6rem;
text-align: right;
font-weight: 600;
color: var(--bs-primary);
}
.timeline-content {
background: white;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.partner-logo {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.partner-logo:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}
.placeholder-image {
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<!-- Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- AOS Animation -->
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
<!-- 自定义脚本 -->
<script src="js/main.js"></script>
</body>
</html>

View File

@@ -53,451 +53,308 @@
<a class="nav-link" href="contact.html">联系我们</a>
</li>
</ul>
<div class="ms-3">
<a href="contact.html" class="btn btn-primary">免费试用</a>
</div>
</div>
</div>
</nav>
<!-- 页面内容 -->
<main>
<!-- 英雄区域 -->
<section class="hero-section bg-dark text-white py-5 mt-5">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-8 mx-auto text-center">
<h1 class="display-4 fw-bold mb-4">客户成功案例</h1>
<p class="lead mb-4">见证我们如何帮助客户实现采购数字化转型升级,提升业务效率和盈利能力</p>
</div>
</div>
</div>
</section>
<!-- 面包屑导航 -->
<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="py-4 bg-white">
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex flex-wrap justify-content-center gap-2">
<button class="btn btn-outline-primary active" data-filter="all">全部案例</button>
<button class="btn btn-outline-primary" data-filter="large">大型企业</button>
<button class="btn btn-outline-primary" data-filter="medium">中型企业</button>
<button class="btn btn-outline-primary" data-filter="small">小型企业</button>
<button class="btn btn-outline-primary" data-filter="beef">肉牛养殖</button>
<button class="btn btn-outline-primary" data-filter="dairy">奶牛牧场</button>
<button class="btn btn-outline-primary" data-filter="trade">贸易服务</button>
</div>
</div>
</div>
</div>
</section>
<!-- 案例展示 -->
<section class="py-5">
<div class="container">
<div class="row g-4" id="cases-container">
<!-- 案例1 -->
<div class="col-lg-4 col-md-6 case-item" data-category="large beef" data-aos="fade-up">
<div class="card h-100 border-0 shadow-sm case-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-primary bg-opacity-10 d-flex align-items-center justify-content-center feature-icon" style="height: 200px;">
<i class="fas fa-building fs-1 text-primary"></i>
</div>
<span class="position-absolute top-0 end-0 m-3 badge bg-primary">大型企业</span>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-2">内蒙古草原牧业集团</h5>
<span class="badge bg-light text-dark mb-3">肉牛养殖 · 年采购5000+头</span>
<p class="text-muted mb-3">通过系统实现采购流程标准化采购效率提升40%成本降低15%</p>
<div class="case-stats mb-3">
<div class="d-flex justify-content-between small text-muted">
<span><i class="fas fa-arrow-up text-success me-1"></i> 效率 +40%</span>
<span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -15%</span>
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 3.2倍</span>
</div>
</div>
<div class="testimonial bg-light p-3 rounded mb-3">
<p class="mb-0 small text-muted">"系统帮助我们实现了采购全流程数字化,现在我们可以实时追踪每头牛的状态,大大提升了管理效率。"</p>
<div class="d-flex align-items-center mt-2">
<div class="avatar-placeholder bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 30px; height: 30px;">
<i class="fas fa-user text-primary fs-6"></i>
</div>
<div>
<span class="small fw-bold">张总</span>
<span class="small d-block text-muted">采购总监</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 案例2 -->
<div class="col-lg-4 col-md-6 case-item" data-category="medium dairy" data-aos="fade-up" data-aos-delay="100">
<div class="card h-100 border-0 shadow-sm case-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-success bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-tractor fs-1 text-success"></i>
</div>
<span class="position-absolute top-0 end-0 m-3 badge bg-success">中型企业</span>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-2">河北优牧乳业</h5>
<span class="badge bg-light text-dark mb-3">奶牛牧场 · 年采购2000头</span>
<p class="text-muted mb-3">数字化管理育种牛只采购奶牛品质提升20%产奶量增加15%</p>
<div class="case-stats mb-3">
<div class="d-flex justify-content-between small text-muted">
<span><i class="fas fa-arrow-up text-success me-1"></i> 品质 +20%</span>
<span><i class="fas fa-arrow-up text-success me-1"></i> 产量 +15%</span>
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 2.8倍</span>
</div>
</div>
<div class="testimonial bg-light p-3 rounded mb-3">
<p class="mb-0 small text-muted">"系统的数据分析功能帮助我们筛选出最优质的育种牛只,现在我们的奶牛品质和产奶量都有了显著提升。"</p>
<div class="d-flex align-items-center mt-2">
<div class="avatar-placeholder bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
<i class="fas fa-user text-success fs-6"></i>
</div>
<div>
<span class="small fw-bold">李经理</span>
<span class="small d-block text-muted">牧场负责人</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 案例3 -->
<div class="col-lg-4 col-md-6 case-item" data-category="small trade" data-aos="fade-up" data-aos-delay="200">
<div class="card h-100 border-0 shadow-sm case-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-warning bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-handshake fs-1 text-warning"></i>
</div>
<span class="position-absolute top-0 end-0 m-3 badge bg-warning">小型企业</span>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-2">山东牛贸中介服务</h5>
<span class="badge bg-light text-dark mb-3">贸易服务 · 年交易3000头</span>
<p class="text-muted mb-3">通过平台实现买卖双方高效匹配交易成功率提升50%,佣金收入翻倍</p>
<div class="case-stats mb-3">
<div class="d-flex justify-content-between small text-muted">
<span><i class="fas fa-arrow-up text-success me-1"></i> 成功率 +50%</span>
<span><i class="fas fa-arrow-up text-success me-1"></i> 收入 +100%</span>
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 4.1倍</span>
</div>
</div>
<div class="testimonial bg-light p-3 rounded mb-3">
<p class="mb-0 small text-muted">"这个系统彻底改变了我们的业务模式,现在我们可以同时处理多个交易,客户满意度大幅提升。"</p>
<div class="d-flex align-items-center mt-2">
<div class="avatar-placeholder bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
<i class="fas fa-user text-warning fs-6"></i>
</div>
<div>
<span class="small fw-bold">王总</span>
<span class="small d-block text-muted">创始人</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 案例4 -->
<div class="col-lg-4 col-md-6 case-item" data-category="medium beef" data-aos="fade-up" data-aos-delay="300">
<div class="card h-100 border-0 shadow-sm case-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-info bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-industry fs-1 text-info"></i>
</div>
<span class="position-absolute top-0 end-0 m-3 badge bg-info">中型企业</span>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-2">河南美味肉制品</h5>
<span class="badge bg-light text-dark mb-3">肉牛加工 · 年采购1500头</span>
<p class="text-muted mb-3">实现从采购到加工的全程追溯产品质量提升30%客户投诉减少80%</p>
<div class="case-stats mb-3">
<div class="d-flex justify-content-between small text-muted">
<span><i class="fas fa-arrow-up text-success me-1"></i> 质量 +30%</span>
<span><i class="fas fa-arrow-down text-danger me-1"></i> 投诉 -80%</span>
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 3.5倍</span>
</div>
</div>
<div class="testimonial bg-light p-3 rounded mb-3">
<p class="mb-0 small text-muted">"追溯系统让我们的产品质量有了保障,现在客户可以扫描二维码了解每块肉的来源,信任度大大提升。"</p>
<div class="d-flex align-items-center mt-2">
<div class="avatar-placeholder bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
<i class="fas fa-user text-info fs-6"></i>
</div>
<div>
<span class="small fw-bold">赵厂长</span>
<span class="small d-block text-muted">生产总监</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 案例5 -->
<div class="col-lg-4 col-md-6 case-item" data-category="large dairy" data-aos="fade-up" data-aos-delay="400">
<div class="card h-100 border-0 shadow-sm case-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-purple bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-seedling fs-1 text-purple"></i>
</div>
<span class="position-absolute top-0 end-0 m-3 badge bg-purple">大型企业</span>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-2">宁夏现代牧业</h5>
<span class="badge bg-light text-dark mb-3">综合养殖 · 年采购8000头</span>
<p class="text-muted mb-3">多牧场统一管理平台运营成本降低25%管理效率提升60%</p>
<div class="case-stats mb-3">
<div class="d-flex justify-content-between small text-muted">
<span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -25%</span>
<span><i class="fas fa-arrow-up text-success me-1"></i> 效率 +60%</span>
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 4.3倍</span>
</div>
</div>
<div class="testimonial bg-light p-3 rounded mb-3">
<p class="mb-0 small text-muted">"系统帮助我们实现了多个牧场的统一管理,现在我们可以实时掌握各牧场的运营状况,决策更加科学。"</p>
<div class="d-flex align-items-center mt-2">
<div class="avatar-placeholder bg-purple bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
<i class="fas fa-user text-purple fs-6"></i>
</div>
<div>
<span class="small fw-bold">陈总</span>
<span class="small d-block text-muted">运营副总裁</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 案例6 -->
<div class="col-lg-4 col-md-6 case-item" data-category="small beef" data-aos="fade-up" data-aos-delay="500">
<div class="card h-100 border-0 shadow-sm case-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-orange bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-home fs-1 text-orange"></i>
</div>
<span class="position-absolute top-0 end-0 m-3 badge bg-orange">小型企业</span>
</div>
<div class="card-body">
<h5 class="fw-bold text-dark mb-2">四川家庭农场</h5>
<span class="badge bg-light text-dark mb-3">家庭养殖 · 年采购500头</span>
<p class="text-muted mb-3">小规模养殖数字化入门方案管理成本降低40%养殖效益提升35%</p>
<div class="case-stats mb-3">
<div class="d-flex justify-content-between small text-muted">
<span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -40%</span>
<span><i class="fas fa-arrow-up text-success me-1"></i> 效益 +35%</span>
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 2.5倍</span>
</div>
</div>
<div class="testimonial bg-light p-3 rounded mb-3">
<p class="mb-0 small text-muted">"作为家庭农场,我们原本担心数字化门槛太高,但这个系统非常容易上手,现在我们的养殖效益明显提升了。"</p>
<div class="d-flex align-items-center mt-2">
<div class="avatar-placeholder bg-orange bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
<i class="fas fa-user text-orange fs-6"></i>
</div>
<div>
<span class="small fw-bold">刘先生</span>
<span class="small d-block text-muted">农场主</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 数据统计 -->
<div class="row mt-5 pt-5" data-aos="fade-up">
<div class="col-12 text-center mb-5">
<h3 class="fw-bold text-dark mb-3">客户成功数据</h3>
<p class="text-muted">基于200+企业客户的真实使用数据统计</p>
<!-- 客户案例 -->
<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>
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="100">
<div class="display-4 fw-bold text-primary mb-2">85%</div>
<p class="text-muted">客户续约率</p>
<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="card-body">
<span class="badge bg-primary mb-2">大型企业</span>
<h5 class="card-title">XX牧业集团采购数字化转型</h5>
<p class="card-text">通过实施活牛采购智能数字化系统该集团实现了采购流程标准化采购效率提升40%。</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="card-body">
<span class="badge bg-success mb-2">中型企业</span>
<h5 class="card-title">YY生态牧场采购管理升级</h5>
<p class="card-text">该牧场通过系统化管理采购流程,显著降低了采购风险,提升了供应商管理效率。</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="card-body">
<span class="badge bg-info mb-2">贸易商</span>
<h5 class="card-title">ZZ活牛贸易平台业务优化</h5>
<p class="card-text">贸易商通过系统实现了多方交易协调,显著提升了交易效率和资金安全性。</p>
<a href="#case-detail-3" class="btn btn-outline-primary">查看详情</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="200">
<div class="display-4 fw-bold text-success mb-2">3.2倍</div>
<p class="text-muted">平均投资回报率</p>
<!-- 案例详情 -->
<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>
<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>
</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>
</div>
</div>
<h4 class="mt-4">客户评价</h4>
<blockquote class="blockquote">
<p>"活牛采购智能数字化系统的实施,彻底改变了我们传统的采购管理模式。现在我们可以实时掌握采购全流程,大大提升了管理效率和决策水平。"</p>
<footer class="blockquote-footer">XX牧业集团采购总监</footer>
</blockquote>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="300">
<div class="display-4 fw-bold text-warning mb-2">45%</div>
<p class="text-muted">平均效率提升</p>
<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>
<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>
</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>
</div>
</div>
<h4 class="mt-4">客户评价</h4>
<blockquote class="blockquote">
<p>"系统帮助我们建立了科学的采购管理体系,不仅降低了成本,更重要的是提升了产品质量控制水平,为我们的生态养殖理念提供了有力支撑。"</p>
<footer class="blockquote-footer">YY生态牧场总经理</footer>
</blockquote>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="400">
<div class="display-4 fw-bold text-info mb-2">20%</div>
<p class="text-muted">平均成本降低</p>
<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>
<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>
</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>
</div>
</div>
<h4 class="mt-4">客户评价</h4>
<blockquote class="blockquote">
<p>"数字化系统让我们的贸易业务更加透明高效,多方协调变得轻松简单,客户满意度大幅提升。这正是我们一直在寻找的解决方案。"</p>
<footer class="blockquote-footer">ZZ活牛贸易平台运营总监</footer>
</blockquote>
</div>
</div>
</div>
</div>
</section>
</section>
<!-- CTA区域 -->
<section class="py-5 bg-primary text-white">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<h3 class="fw-bold mb-3">Ready to see similar results?</h3>
<p class="mb-4">加入200+成功企业的行列,开启您的数字化采购转型之旅</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="contact.html" class="btn btn-light btn-lg px-4">立即咨询</a>
</div>
<!-- CTA -->
<section class="py-5">
<div class="container">
<div class="card bg-primary text-white border-0 shadow">
<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>
</div>
</section>
</main>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white py-5">
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
<p class="text-light">
专业的数字化采购管理解决方案,
为养殖企业提供全流程的采购数字化服务。
</p>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">产品</h6>
<ul class="list-unstyled">
<li><a href="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
<li><a href="solutions.html" class="text-muted text-decoration-none">解决方案</a></li>
<li><a href="#" class="text-muted text-decoration-none">价格方案</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">资源</h6>
<ul class="list-unstyled">
<li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
<li><a href="news.html" class="text-muted text-decoration-none">新闻动态</a></li>
<li><a href="#" class="text-muted text-decoration-none">帮助文档</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">公司</h6>
<ul class="list-unstyled">
<li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
<li><a href="contact.html" class="text-muted text-decoration-none">联系我们</a></li>
<li><a href="#" class="text-muted text-decoration-none">加入我们</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">联系信息</h6>
<div class="text-muted">
<p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
<p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
<p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
<div class="col-lg-4 mb-4 mb-lg-0">
<h5 class="footer-title">活牛采购智能数字化系统</h5>
<p>专业的活牛采购全流程数字化管理解决方案,提升采购效率,降低经营风险。</p>
<div class="d-flex">
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">产品</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="product.html">功能介绍</a></li>
<li class="mb-2"><a href="solutions.html">解决方案</a></li>
<li class="mb-2"><a href="cases.html">客户案例</a></li>
<li class="mb-2"><a href="news.html">更新日志</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">支持</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#">帮助中心</a></li>
<li class="mb-2"><a href="#">在线客服</a></li>
<li class="mb-2"><a href="#">开发者文档</a></li>
<li class="mb-2"><a href="#">合作伙伴</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4">
<h5 class="footer-title">联系我们</h5>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区xxx街道xxx号</li>
<li class="mb-2"><i class="fas fa-phone me-2"></i> 400-xxx-xxxx</li>
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@example.com</li>
</ul>
</div>
</div>
<hr class="my-4">
<div class="row align-items-center">
<div class="col-md-6">
<p class="text-muted mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
</div>
<div class="col-md-6 text-md-end">
<div class="d-flex justify-content-md-end">
<a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
<a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
<a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
</div>
</div>
<div class="copyright text-center">
<p>&copy; 2023 活牛采购智能数字化系统. 保留所有权利。</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- 返回顶部按钮 -->
<button class="back-to-top" aria-label="返回顶部">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- AOS Animation -->
<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: 1000,
once: true,
offset: 100
});
// 案例筛选功能
document.addEventListener('DOMContentLoaded', function() {
const filterButtons = document.querySelectorAll('[data-filter]');
const caseItems = document.querySelectorAll('.case-item');
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// 移除所有active状态
filterButtons.forEach(btn => btn.classList.remove('active'));
// 添加当前active状态
this.classList.add('active');
const filterValue = this.getAttribute('data-filter');
caseItems.forEach(item => {
if (filterValue === 'all') {
item.style.display = 'block';
} else {
const categories = item.getAttribute('data-category').split(' ');
if (categories.includes(filterValue)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
}
});
});
});
});
</script>
<style>
.bg-purple { background-color: #6f42c1 !important; }
.bg-orange { background-color: #fd7e14 !important; }
.text-purple { color: #6f42c1 !important; }
.text-orange { color: #fd7e14 !important; }
.case-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}
.placeholder-image {
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
}
.avatar-placeholder {
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
}
</style>
</body>
</html>

View File

@@ -59,75 +59,110 @@
</div>
</nav>
<!-- 页面头部 -->
<section class="bg-primary py-5 mt-5">
<div class="container py-5">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<h1 class="display-4 fw-bold text-white mb-4">联系我们</h1>
<p class="lead text-white-50 mb-0">
我们期待为您提供专业的数字化采购解决方案,立即联系获取产品演示和报价
</p>
</div>
</div>
<!-- 面包屑导航 -->
<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>
</section>
</nav>
<!-- 联系信息 -->
<!-- 联系我们 -->
<section class="py-5">
<div class="container">
<div class="row g-5">
<!-- 联系表单 -->
<div class="col-lg-8">
<div class="card border-0 shadow-lg">
<div class="card-body p-5">
<h3 class="fw-bold text-dark mb-4">发送咨询</h3>
<p class="text-muted mb-4">填写以下信息,我们的专业顾问会尽快联系您</p>
<div class="text-center mb-5">
<h1 class="display-5 fw-bold mb-4">联系我们</h1>
<p class="lead">我们随时准备为您提供帮助,欢迎通过以下方式联系我们</p>
</div>
<div class="row g-4">
<!-- 联系方式 -->
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-map-marker-alt"></i>
</div>
<h5 class="card-title">公司地址</h5>
<p class="card-text">北京市朝阳区xxx街道xxx号<br>邮编100000</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon mx-auto mb-4">
<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>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-envelope"></i>
</div>
<h5 class="card-title">电子邮箱</h5>
<p class="card-text">商务合作info@example.com<br>技术支持support@example.com</p>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-6">
<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 fw-bold">姓名 *</label>
<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 fw-bold">公司名称</label>
<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 fw-bold">手机号 *</label>
<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 fw-bold">邮箱 *</label>
<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="interest" class="form-label fw-bold">您感兴趣的是</label>
<select class="form-select" id="interest">
<option value="">请选择...</option>
<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="quote">报价咨询</option>
<option value="cooperation">合作洽谈</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 fw-bold">详细需求 *</label>
<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">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="agree" required>
<label class="form-check-label text-muted" for="agree">
我同意隐私政策和服务条款
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary btn-lg w-100">
<i class="bi bi-send me-2"></i>发送咨询
<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>
@@ -135,81 +170,18 @@
</div>
</div>
</div>
<!-- 联系信息 -->
<div class="col-lg-4">
<div class="sticky-top" style="top: 100px;">
<div class="card border-0 shadow-lg">
<div class="card-body p-4">
<h4 class="fw-bold text-dark mb-4">联系信息</h4>
<div class="d-flex align-items-center mb-4">
<div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
<i class="bi bi-telephone text-primary fs-5"></i>
</div>
<div>
<h6 class="fw-bold mb-0">联系电话</h6>
<p class="text-light mb-0">15927219038(周经理)</p>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
<i class="bi bi-envelope text-success fs-5"></i>
</div>
<div>
<h6 class="fw-bold mb-0">商务邮箱</h6>
<p class="text-light mb-0">service@aiotagro.com</p>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
<i class="bi bi-geo-alt text-warning fs-5"></i>
</div>
<div>
<h6 class="fw-bold mb-0">公司地址</h6>
<p class="text-light mb-0">武汉光谷软件园F2栋</p>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
<i class="bi bi-clock text-info fs-5"></i>
</div>
<div>
<h6 class="fw-bold mb-0">工作时间</h6>
<p class="text-light mb-0">周一至周五 9:00-18:00</p>
</div>
</div>
<hr>
<h6 class="fw-bold mb-3">关注我们</h6>
<div class="d-flex gap-3">
<a href="#" class="text-primary fs-4">
<i class="bi bi-wechat"></i>
</a>
<a href="#" class="text-primary fs-4">
<i class="bi bi-weibo"></i>
</a>
<a href="#" class="text-primary fs-4">
<i class="bi bi-linkedin"></i>
</a>
</div>
<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>
</div>
</div>
<!-- 快速联系卡片 -->
<div class="card border-0 shadow-lg mt-4">
<div class="card-body p-4 text-center bg-dark">
<h6 class="fw-bold mb-3 text-light">急需技术支持?</h6>
<p class="text-light small mb-3">
我们的技术团队提供7×24小时紧急支持服务
</p>
<a href="tel:400-123-4567" class="btn btn-outline-light btn-sm w-100">
<i class="bi bi-telephone me-2"></i>紧急联系
</a>
<div class="mt-4">
<h5>工作时间</h5>
<p>周一至周五9:00 - 18:00</p>
<p>周六至周日10:00 - 16:00</p>
</div>
</div>
</div>
@@ -218,24 +190,62 @@
</div>
</section>
<!-- 地图区域 -->
<section class="bg-light py-5">
<!-- 常见问题 -->
<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">
<div class="col-12">
<div class="card border-0 shadow-lg">
<div class="card-body p-0">
<div class="ratio ratio-21x9">
<!-- 这里可以嵌入实际的地图 -->
<div class="d-flex align-items-center justify-content-center bg-primary bg-opacity-10">
<div class="text-center">
<i class="bi bi-map text-primary fs-1 mb-3"></i>
<h5 class="fw-bold text-dark">公司位置地图</h5>
<p class="text-muted">北京市朝阳区科技园区创新大厦A座12层</p>
<a href="#" class="btn btn-primary btn-sm">
<i class="bi bi-geo-alt me-2"></i>查看详细地图
</a>
</div>
<div class="col-lg-8 mx-auto">
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
如何获取产品演示?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
<div class="accordion-body">
您可以通过填写上方联系表单选择"产品演示"主题我们的销售顾问将在24小时内与您联系并安排演示。您也可以直接致电我们的客服热线400-xxx-xxxx。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
系统支持哪些设备访问?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
我们的系统支持PC端和移动端访问包括Windows、Mac、iOS、Android等主流操作系统。同时我们也提供微信小程序版本方便您随时处理业务。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
如何进行系统部署?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
我们提供云部署和本地部署两种方式。云部署由我们负责运维您只需通过浏览器访问即可本地部署需要您的IT团队配合我们提供全程技术支持。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour">
系统安全性如何保障?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
我们采用多层安全防护机制包括数据加密传输、访问权限控制、定期安全审计等。同时通过了ISO27001信息安全管理体系认证确保您的数据安全。
</div>
</div>
</div>
@@ -245,60 +255,79 @@
</div>
</section>
<!-- CTA -->
<section class="py-5">
<div class="container">
<div class="card bg-primary text-white border-0 shadow">
<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>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-light py-5">
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
<p class="text-light">
专业的数字化采购管理解决方案,
助力养殖企业提升采购效率和经济效益。
</p>
<div class="col-lg-4 mb-4 mb-lg-0">
<h5 class="footer-title">活牛采购智能数字化系统</h5>
<p>专业的活牛采购全流程数字化管理解决方案,提升采购效率,降低经营风险。</p>
<div class="d-flex">
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">产品</h6>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">产品</h5>
<ul class="list-unstyled">
<li><a href="product.html" class="text-light text-decoration-none">功能特性</a></li>
<li><a href="solutions.html" class="text-light text-decoration-none">解决方案</a></li>
<li class="mb-2"><a href="product.html">功能介绍</a></li>
<li class="mb-2"><a href="solutions.html">解决方案</a></li>
<li class="mb-2"><a href="cases.html">客户案例</a></li>
<li class="mb-2"><a href="news.html">更新日志</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">资源</h6>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">支持</h5>
<ul class="list-unstyled">
<li><a href="cases.html" class="text-light text-decoration-none">客户案例</a></li>
<li><a href="#" class="text-light text-decoration-none">文档中心</a></li>
<li class="mb-2"><a href="#">帮助中心</a></li>
<li class="mb-2"><a href="#">在线客服</a></li>
<li class="mb-2"><a href="#">开发者文档</a></li>
<li class="mb-2"><a href="#">合作伙伴</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<h6 class="fw-bold mb-3">联系我们</h6>
<ul class="list-unstyled text-light">
<li><i class="bi bi-telephone me-2"></i> 400-123-4567</li>
<li><i class="bi bi-envelope me-2"></i> info@niumall.com</li>
<div class="col-lg-4 col-md-4">
<h5 class="footer-title">联系我们</h5>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区xxx街道xxx号</li>
<li class="mb-2"><i class="fas fa-phone me-2"></i> 400-xxx-xxxx</li>
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@example.com</li>
</ul>
</div>
</div>
<hr class="my-4 bg-secondary">
<div class="row align-items-center">
<div class="col-md-6">
<p class="text-light mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
</div>
<div class="col-md-6 text-md-end">
<a href="#" class="text-light text-decoration-none me-3">隐私政策</a>
<a href="#" class="text-light text-decoration-none">服务条款</a>
</div>
<div class="copyright text-center">
<p>&copy; 2023 活牛采购智能数字化系统. 保留所有权利。</p>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button class="back-to-top" aria-label="返回顶部">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- AOS Animation -->
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
<!-- 自定义脚本 -->
<script src="js/main.js"></script>
</body>
</html>

View File

@@ -49,469 +49,310 @@
<li class="nav-item">
<a class="nav-link" href="contact.html">联系我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">帮助</a>
</li>
</ul>
<div class="ms-3">
<a href="contact.html" class="btn btn-primary">免费试用</a>
</div>
</div>
</div>
</nav>
<!-- 页面内容 -->
<main>
<!-- 英雄区域 -->
<section class="hero-section bg-dark text-white py-5 mt-5">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-8 mx-auto text-center">
<h1 class="display-4 fw-bold mb-4">新闻动态</h1>
<p class="lead mb-4">了解最新的行业资讯、产品更新和公司动态</p>
<!-- 搜索框 -->
<div class="col-lg-6 mx-auto">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索新闻..." id="newsSearch">
<button class="btn btn-outline-light" type="button">
<i class="fas fa-search"></i>
</button>
<!-- 面包屑导航 -->
<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="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>
<div class="row g-4">
<!-- 新闻1 -->
<div class="col-12">
<div class="card border-0">
<div class="row g-0">
<div class="col-md-4">
<img src="images/news1.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-primary mb-2">产品更新</span>
<h3 class="card-title">活牛采购智能数字化系统V3.0正式发布</h3>
<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年10月15日
<i class="far fa-user ms-3 me-1"></i> 产品经理
</small>
<a href="#news-detail-1" class="btn btn-outline-primary">阅读更多</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻2 -->
<div class="col-12">
<div class="card border-0">
<div class="row g-0">
<div class="col-md-4">
<img src="images/news2.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-success mb-2">行业资讯</span>
<h3 class="card-title">数字化转型推动畜牧业高质量发展</h3>
<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-user ms-3 me-1"></i> 行业分析师
</small>
<a href="#news-detail-2" class="btn btn-outline-primary">阅读更多</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻3 -->
<div class="col-12">
<div class="card border-0">
<div class="row g-0">
<div class="col-md-4">
<img src="images/news3.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-info mb-2">客户案例</span>
<h3 class="card-title">XX牧业集团成功实施采购数字化项目</h3>
<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-user ms-3 me-1"></i> 客户成功部
</small>
<a href="#news-detail-3" class="btn btn-outline-primary">阅读更多</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 更多新闻 -->
<div class="col-12">
<div class="card border-0">
<div class="card-body">
<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-user ms-3 me-1"></i> 技术团队
</small>
<a href="#" class="btn btn-outline-primary">阅读更多</a>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card border-0">
<div class="card-body">
<h4 class="card-title">荣获"2023年度畜牧科技创新奖"</h4>
<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-user ms-3 me-1"></i> 市场部
</small>
<a href="#" class="btn btn-outline-primary">阅读更多</a>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card border-0">
<div class="card-body">
<h4 class="card-title">与YY农业大学建立产学研合作关系</h4>
<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-user ms-3 me-1"></i> 合作发展部
</small>
<a href="#" class="btn btn-outline-primary">阅读更多</a>
</div>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<nav aria-label="新闻分页" class="mt-5">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
</li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
</section>
<!-- 新闻详情 -->
<section id="news-detail-1" class="py-5 bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<article>
<span class="badge bg-primary mb-3">产品更新</span>
<h1 class="display-6 mb-4">活牛采购智能数字化系统V3.0正式发布</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-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>
<h4 class="mt-4">主要更新内容</h4>
<h5 class="mt-3">1. 智能采购建议</h5>
<p>基于历史数据和市场趋势分析,系统能够为用户提供智能采购建议,包括采购时机、数量预测、价格趋势等,帮助用户做出更明智的采购决策。</p>
<h5 class="mt-3">2. 移动端优化</h5>
<p>针对移动设备进行了全面优化,界面更加简洁直观,操作更加流畅便捷。无论您是在牧场、运输途中还是办公室,都能轻松管理采购流程。</p>
<h5 class="mt-3">3. 数据可视化</h5>
<p>新增丰富的数据可视化功能,通过图表形式直观展示采购数据、成本分析、供应商绩效等关键指标,让数据更有价值。</p>
<h5 class="mt-3">4. 性能优化</h5>
<p>对系统架构进行了优化,提升了数据处理能力和响应速度,即使在高峰期也能保持流畅运行。</p>
<h4 class="mt-4">用户反馈</h4>
<blockquote class="blockquote">
<p>"V3.0版本的智能采购建议功能非常实用,帮助我们更好地把握市场时机,降低了采购成本。"</p>
<footer class="blockquote-footer">某大型牧业集团采购经理</footer>
</blockquote>
<div class="alert alert-info mt-4">
<h5>如何升级</h5>
<p>现有用户可登录系统后台进行在线升级,新用户可直接访问官网下载最新版本。如有任何疑问,请联系我们的技术支持团队。</p>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- 新闻分类 -->
<section class="py-4 bg-white">
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex flex-wrap justify-content-center gap-2">
<button class="btn btn-outline-primary active" data-category="all">全部</button>
<button class="btn btn-outline-primary" data-category="company">公司动态</button>
<button class="btn btn-outline-primary" data-category="industry">行业新闻</button>
<button class="btn btn-outline-primary" data-category="technology">技术更新</button>
<button class="btn btn-outline-primary" data-category="event">活动预告</button>
</div>
</div>
<!-- CTA -->
<section class="py-5">
<div class="container">
<div class="card bg-primary text-white border-0 shadow">
<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>
</div>
</section>
<!-- 新闻列表 -->
<section class="py-5">
<div class="container">
<div class="row" id="news-container">
<!-- 新闻1 -->
<div class="col-lg-6 mb-4 news-item" data-category="company" data-aos="fade-up">
<div class="card border-0 shadow-sm h-100 news-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-newspaper fs-1 text-primary"></i>
</div>
<span class="position-absolute top-0 start-0 m-3 badge bg-primary">公司动态</span>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-03-15</small>
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 1,245</small>
</div>
<h5 class="fw-bold text-dark mb-3">活牛采购智能数字化系统完成B轮融资加速全国市场布局</h5>
<p class="text-muted mb-3">
公司宣布完成数千万元B轮融资由某知名投资机构领投老股东跟投。
本轮融资将用于产品研发、市场拓展和团队建设。
</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#" class="btn btn-outline-primary btn-sm">阅读全文</a>
<div class="d-flex">
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 86</a>
<a href="#" class="text-muted"><i class="far fa-comment"></i> 23</a>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻2 -->
<div class="col-lg-6 mb-4 news-item" data-category="industry" data-aos="fade-up" data-aos-delay="100">
<div class="card border-0 shadow-sm h-100 news-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-success bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-chart-line fs-1 text-success"></i>
</div>
<span class="position-absolute top-0 start-0 m-3 badge bg-success">行业新闻</span>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-03-10</small>
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 892</small>
</div>
<h5 class="fw-bold text-dark mb-3">2024年中国畜牧行业数字化发展趋势报告发布</h5>
<p class="text-muted mb-3">
最新行业报告显示数字化采购管理系统渗透率预计将从目前的15%提升至30%
市场规模将突破百亿元。
</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#" class="btn btn-outline-success btn-sm">阅读全文</a>
<div class="d-flex">
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 64</a>
<a href="#" class="text-muted"><i class="far fa-comment"></i> 18</a>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻3 -->
<div class="col-lg-6 mb-4 news-item" data-category="technology" data-aos="fade-up" data-aos-delay="200">
<div class="card border-0 shadow-sm h-100 news-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-info bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-robot fs-1 text-info"></i>
</div>
<span class="position-absolute top-0 start-0 m-3 badge bg-info">技术更新</span>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-03-05</small>
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 1,567</small>
</div>
<h5 class="fw-bold text-dark mb-3">AI智能牛只评估系统V2.0正式上线准确率提升至95%</h5>
<p class="text-muted mb-3">
新一代AI评估系统采用深度学习算法大幅提升牛只品质评估准确率
同时新增健康监测和生长预测功能。
</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#" class="btn btn-outline-info btn-sm">阅读全文</a>
<div class="d-flex">
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 128</a>
<a href="#" class="text-muted"><i class="far fa-comment"></i> 45</a>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻4 -->
<div class="col-lg-6 mb-4 news-item" data-category="event" data-aos="fade-up" data-aos-delay="300">
<div class="card border-0 shadow-sm h-100 news-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-warning bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-calendar-alt fs-1 text-warning"></i>
</div>
<span class="position-absolute top-0 start-0 m-3 badge bg-warning">活动预告</span>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-04-10</small>
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 734</small>
</div>
<h5 class="fw-bold text-dark mb-3">2024智慧养殖创新峰会将于4月在北京举行</h5>
<p class="text-muted mb-3">
峰会聚焦数字化养殖、智能采购、产业链协同等热点话题,
邀请行业专家、企业代表共同探讨发展趋势。
</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#" class="btn btn-outline-warning btn-sm">立即报名</a>
<div class="d-flex">
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 92</a>
<a href="#" class="text-muted"><i class="far fa-comment"></i> 31</a>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻5 -->
<div class="col-lg-6 mb-4 news-item" data-category="company" data-aos="fade-up" data-aos-delay="400">
<div class="card border-0 shadow-sm h-100 news-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-purple bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-award fs-1 text-purple"></i>
</div>
<span class="position-absolute top-0 start-0 m-3 badge bg-purple">公司动态</span>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-02-28</small>
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 987</small>
</div>
<h5 class="fw-bold text-dark mb-3">荣获"2024年度畜牧科技创新企业"称号</h5>
<p class="text-muted mb-3">
在2024中国畜牧产业创新大会上公司凭借数字化采购解决方案
获得行业权威认可。
</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#" class="btn btn-outline-purple btn-sm">阅读全文</a>
<div class="d-flex">
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 105</a>
<a href="#" class="text-muted"><i class="far fa-comment"></i> 28</a>
</div>
</div>
</div>
</div>
</div>
<!-- 新闻6 -->
<div class="col-lg-6 mb-4 news-item" data-category="technology" data-aos="fade-up" data-aos-delay="500">
<div class="card border-0 shadow-sm h-100 news-card">
<div class="card-img-top position-relative">
<div class="placeholder-image bg-orange bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
<i class="fas fa-mobile-alt fs-1 text-orange"></i>
</div>
<span class="position-absolute top-0 start-0 m-3 badge bg-orange">技术更新</span>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-02-20</small>
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 1,203</small>
</div>
<h5 class="fw-bold text-dark mb-3">移动端APP全新升级支持离线操作和实时同步</h5>
<p class="text-muted mb-3">
新版本移动端应用优化用户体验,新增离线数据采集功能,
即使在网络信号较差的牧场也能正常使用。
</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#" class="btn btn-outline-orange btn-sm">阅读全文</a>
<div class="d-flex">
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 142</a>
<a href="#" class="text-muted"><i class="far fa-comment"></i> 37</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="row mt-5">
<div class="col-12">
<nav aria-label="News pagination">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">上一页</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<!-- 订阅区域 -->
<section class="py-5 bg-light">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h3 class="fw-bold text-dark mb-3">订阅我们的新闻动态</h3>
<p class="text-muted mb-4">及时获取最新行业资讯、产品更新和活动信息</p>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="email" class="form-control" placeholder="请输入您的邮箱" aria-label="Email">
<button class="btn btn-primary" type="button">订阅</button>
</div>
<small class="text-muted">我们承诺不会泄露您的邮箱信息</small>
</div>
</div>
</div>
</section>
</main>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white py-5">
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
<p class="text-muted">
专业的数字化采购管理解决方案,
为养殖企业提供全流程的采购数字化服务。
</p>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">产品</h6>
<ul class="list-unstyled">
<li><a href="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
<li><a href="solutions.html" class="text-muted text-decoration-none">解决方案</a></li>
<li><a href="#" class="text-muted text-decoration-none">价格方案</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">资源</h6>
<ul class="list-unstyled">
<li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
<li><a href="news.html" class="text-muted text-decoration-none">新闻动态</a></li>
<li><a href="#" class="text-muted text-decoration-none">帮助文档</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">公司</h6>
<ul class="list-unstyled">
<li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
<li><a href="contact.html" class="text-muted text-decoration-none">联系我们</a></li>
<li><a href="#" class="text-muted text-decoration-none">加入我们</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">联系信息</h6>
<div class="text-muted">
<p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
<p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
<p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
<div class="col-lg-4 mb-4 mb-lg-0">
<h5 class="footer-title">活牛采购智能数字化系统</h5>
<p>专业的活牛采购全流程数字化管理解决方案,提升采购效率,降低经营风险。</p>
<div class="d-flex">
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">产品</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="product.html">功能介绍</a></li>
<li class="mb-2"><a href="solutions.html">解决方案</a></li>
<li class="mb-2"><a href="cases.html">客户案例</a></li>
<li class="mb-2"><a href="news.html">更新日志</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">支持</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#">帮助中心</a></li>
<li class="mb-2"><a href="#">在线客服</a></li>
<li class="mb-2"><a href="#">开发者文档</a></li>
<li class="mb-2"><a href="#">合作伙伴</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4">
<h5 class="footer-title">联系我们</h5>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区xxx街道xxx号</li>
<li class="mb-2"><i class="fas fa-phone me-2"></i> 400-xxx-xxxx</li>
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@example.com</li>
</ul>
</div>
</div>
<hr class="my-4">
<div class="row align-items-center">
<div class="col-md-6">
<p class="text-muted mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
</div>
<div class="col-md-6 text-md-end">
<div class="d-flex justify-content-md-end">
<a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
<a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
<a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
</div>
</div>
<div class="copyright text-center">
<p>&copy; 2023 活牛采购智能数字化系统. 保留所有权利。</p>
</div>
</div>
</footer>
</div>
</footer>
<!-- JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- 返回顶部按钮 -->
<button class="back-to-top" aria-label="返回顶部">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- AOS Animation -->
<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: 1000,
once: true,
offset: 100
});
// 新闻筛选功能
document.addEventListener('DOMContentLoaded', function() {
const filterButtons = document.querySelectorAll('[data-category]');
const newsItems = document.querySelectorAll('.news-item');
const searchInput = document.getElementById('newsSearch');
// 分类筛选
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// 移除所有active状态
filterButtons.forEach(btn => btn.classList.remove('active'));
// 添加当前active状态
this.classList.add('active');
const category = this.getAttribute('data-category');
newsItems.forEach(item => {
if (category === 'all') {
item.style.display = 'block';
} else {
const itemCategory = item.getAttribute('data-category');
if (itemCategory === category) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
}
});
});
});
// 搜索功能
searchInput.addEventListener('input', function() {
const searchText = this.value.toLowerCase();
newsItems.forEach(item => {
const title = item.querySelector('h5').textContent.toLowerCase();
const content = item.querySelector('p').textContent.toLowerCase();
if (title.includes(searchText) || content.includes(searchText)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
</script>
<style>
.news-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}
.placeholder-image {
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
}
.bg-purple { background-color: #6f42c1 !important; }
.bg-orange { background-color: #fd7e14 !important; }
.text-purple { color: #6f42c1 !important; }
.text-orange { color: #fd7e14 !important; }
.btn-outline-purple {
color: #6f42c1;
border-color: #6f42c1;
}
.btn-outline-purple:hover {
color: white;
background-color: #6f42c1;
border-color: #6f42c1;
}
.btn-outline-orange {
color: #fd7e14;
border-color: #fd7e14;
}
.btn-outline-orange:hover {
color: white;
background-color: #fd7e14;
border-color: #fd7e14;
}
.pagination .page-item.active .page-link {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.pagination .page-link {
color: var(--bs-primary);
}
.pagination .page-link:hover {
color: var(--bs-primary);
background-color: var(--bs-primary-bg-subtle);
}
</style>
</body>
</html>

View File

@@ -59,171 +59,146 @@
</div>
</nav>
<!-- 页面头部 -->
<section class="hero-section bg-dark text-white py-5 mt-5">
<div class="container py-5">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<h1 class="display-4 fw-bold mb-4">产品功能特性</h1>
<p class="lead mb-0">
全面覆盖活牛采购全流程,从供应商管理到财务结算的一站式数字化解决方案
</p>
<!-- 面包屑导航 -->
<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="py-5">
<div class="container">
<div class="row align-items-center mb-5">
<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.html" class="btn btn-primary btn-lg me-3">
<i class="fas fa-rocket me-2"></i>免费试用
</a>
<a href="#features" class="btn btn-outline-primary btn-lg">
<i class="fas fa-info-circle me-2"></i>查看详情
</a>
</div>
</div>
<div class="col-lg-6">
<img src="images/product-banner.jpg" alt="产品介绍" class="img-fluid rounded shadow" loading="lazy">
</div>
</div>
</div>
</section>
<!-- 功能模块介绍 -->
<section class="py-5">
<!-- 核心功能 -->
<section id="features" class="py-5 bg-dark">
<div class="container">
<div class="row g-5">
<!-- 供应商管理 -->
<div class="col-lg-6">
<div class="card h-100 border-0 shadow-lg">
<div class="card-body p-5">
<div class="text-center mb-4">
<div class="feature-icon bg-primary bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
<i class="fas fa-users text-primary"></i>
</div>
<h3 class="fw-bold text-dark">供应商管理</h3>
<p class="text-muted">完善的供应商评估和管理体系</p>
</div>
<ul class="list-unstyled">
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>供应商档案管理</strong>完整的供应商信息数据库
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>资质审核:</strong>在线审核供应商资质和认证
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>绩效评估:</strong>基于历史交易的供应商评分系统
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>黑名单管理:</strong>不良供应商预警和屏蔽机制
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>合作记录:</strong>完整的合作历史和数据统计
</li>
<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-4">
<div class="card h-100 border-0">
<div class="feature-icon">
<i class="fas fa-users"></i>
</div>
<div class="card-body">
<h5 class="card-title">供应商管理</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>
<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-lg-6">
<div class="card h-100 border-0 shadow-lg">
<div class="card-body p-5">
<div class="text-center mb-4">
<div class="feature-icon bg-success bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
<i class="fas fa-shopping-cart text-success"></i>
</div>
<h3 class="fw-bold text-dark">采购流程管理</h3>
<p class="text-muted">标准化的SOP采购流程控制</p>
</div>
<ul class="list-unstyled">
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>需求计划:</strong>智能需求预测和采购计划制定
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>询价比价:</strong>多供应商在线询价和比价
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>订单管理:</strong>电子化订单创建、审批和执行
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>合同管理:</strong>电子合同签署和管理
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>进度跟踪:</strong>实时采购进度监控和预警
</li>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0">
<div class="feature-icon">
<i class="fas fa-clipboard-list"></i>
</div>
<div class="card-body">
<h5 class="card-title">采购计划</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>
<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-lg-6">
<div class="card h-100 border-0 shadow-lg">
<div class="card-body p-5">
<div class="text-center mb-4">
<div class="feature-icon bg-warning bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
<i class="fas fa-map-marker-alt text-warning"></i>
</div>
<h3 class="fw-bold text-dark">运输跟踪</h3>
<p class="text-muted">全程可视化的运输监控系统</p>
</div>
<ul class="list-unstyled">
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>GPS定位</strong>实时车辆位置追踪
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>视频监控:</strong>运输过程实时视频监控
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>温度监控:</strong>车厢环境温度实时监测
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>异常预警:</strong>运输异常自动预警和通知
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>电子围栏:</strong>预设路线偏离预警
</li>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0">
<div class="feature-icon">
<i class="fas fa-search"></i>
</div>
<div class="card-body">
<h5 class="card-title">质检系统</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>
<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-lg-6">
<div class="card h-100 border-0 shadow-lg">
<div class="card-body p-5">
<div class="text-center mb-4">
<div class="feature-icon bg-info bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
<i class="fas fa-coins text-info"></i>
</div>
<h3 class="fw-bold text-dark">财务结算</h3>
<p class="text-muted">自动化财务对账和结算系统</p>
</div>
<ul class="list-unstyled">
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>对账管理:</strong>自动化对账和差异处理
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>发票管理:</strong>电子发票上传和验证
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>支付管理:</strong>多方式支付和资金流水管理
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>成本分析:</strong>采购成本统计和分析报表
</li>
<li class="mb-3">
<i class="bi bi-check-circle-fill text-success me-2"></i>
<strong>税务管理:</strong>税务合规性检查和申报
</li>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0">
<div class="feature-icon">
<i class="fas fa-truck"></i>
</div>
<div class="card-body">
<h5 class="card-title">运输跟踪</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>
<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-4">
<div class="card h-100 border-0">
<div class="feature-icon">
<i class="fas fa-file-invoice-dollar"></i>
</div>
<div class="card-body">
<h5 class="card-title">财务结算</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>
<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-4">
<div class="card h-100 border-0">
<div class="feature-icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="card-body">
<h5 class="card-title">数据分析</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>
<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>
@@ -233,108 +208,130 @@
</section>
<!-- 技术优势 -->
<section class="bg-light py-5">
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center mb-5">
<h2 class="display-5 fw-bold text-dark mb-4">技术优势</h2>
<p class="lead text-muted">基于先进技术架构,确保系统稳定可靠</p>
</div>
<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="col-md-6 col-lg-3">
<div class="text-center">
<i class="bi bi-shield-check text-primary fs-1 mb-3"></i>
<h5 class="fw-bold">安全可靠</h5>
<p class="text-muted">多重安全防护机制,数据加密存储,确保业务安全</p>
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-bolt"></i>
</div>
<h5>高性能架构</h5>
<p class="text-muted">采用微服务架构,支持高并发访问,确保系统稳定运行</p>
</div>
</div>
<div class="col-md-4">
<div class="col-md-6 col-lg-3">
<div class="text-center">
<i class="bi bi-lightning-charge text-success fs-1 mb-3"></i>
<h5 class="fw-bold">高性能</h5>
<p class="text-muted">分布式架构设计,支持高并发访问,响应迅速</p>
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-shield-alt"></i>
</div>
<h5>安全可靠</h5>
<p class="text-muted">多重安全防护机制,保障数据安全和隐私保护</p>
</div>
</div>
<div class="col-md-4">
<div class="col-md-6 col-lg-3">
<div class="text-center">
<i class="bi bi-arrows-fullscreen text-warning fs-1 mb-3"></i>
<h5 class="fw-bold">可扩展</h5>
<p class="text-muted">模块化设计,支持功能灵活扩展,适应业务发展</p>
<div class="feature-icon mx-auto mb-4">
<i class="fas fa-mobile-alt"></i>
</div>
<h5>移动支持</h5>
<p class="text-muted">响应式设计支持PC端和移动端访问</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-plug"></i>
</div>
<h5>开放接口</h5>
<p class="text-muted">提供丰富的API接口支持与第三方系统集成</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA区域 -->
<section class="py-5 bg-primary">
<!-- CTA -->
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<h2 class="display-5 fw-bold text-white mb-4">立即体验专业采购管理系统</h2>
<p class="lead text-white-50 mb-4">
免费试用30天体验数字化采购带来的效率提升
</p>
<a href="contact.html" class="btn btn-light btn-lg px-5">
<i class="bi bi-rocket-takeoff me-2"></i>开始免费试用
</a>
<div class="card bg-primary text-white border-0 shadow">
<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>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-light py-5">
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
<p class="text-muted">
专业的数字化采购管理解决方案,
助力养殖企业提升采购效率和经济效益。
</p>
<div class="col-lg-4 mb-4 mb-lg-0">
<h5 class="footer-title">活牛采购智能数字化系统</h5>
<p>专业的活牛采购全流程数字化管理解决方案,提升采购效率,降低经营风险。</p>
<div class="d-flex">
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">产品</h6>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">产品</h5>
<ul class="list-unstyled">
<li><a href="product.html" class="text-muted text-decoration-none">功能特性</a></li>
<li><a href="solutions.html" class="text-muted text-decoration-none">解决方案</a></li>
<li class="mb-2"><a href="product.html">功能介绍</a></li>
<li class="mb-2"><a href="solutions.html">解决方案</a></li>
<li class="mb-2"><a href="cases.html">客户案例</a></li>
<li class="mb-2"><a href="news.html">更新日志</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">资源</h6>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">支持</h5>
<ul class="list-unstyled">
<li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
<li><a href="#" class="text-muted text-decoration-none">文档中心</a></li>
<li class="mb-2"><a href="#">帮助中心</a></li>
<li class="mb-2"><a href="#">在线客服</a></li>
<li class="mb-2"><a href="#">开发者文档</a></li>
<li class="mb-2"><a href="#">合作伙伴</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<h6 class="fw-bold mb-3">联系我们</h6>
<ul class="list-unstyled text-muted">
<li><i class="bi bi-telephone me-2"></i> 15927219038(周经理)</li>
<li><i class="bi bi-envelope me-2"></i> service@aiotagro.com</li>
<div class="col-lg-4 col-md-4">
<h5 class="footer-title">联系我们</h5>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区xxx街道xxx号</li>
<li class="mb-2"><i class="fas fa-phone me-2"></i> 400-xxx-xxxx</li>
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@example.com</li>
</ul>
</div>
</div>
<hr class="my-4 bg-secondary">
<div class="row align-items-center">
<div class="col-md-6">
<p class="text-muted mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
</div>
<div class="copyright text-center">
<p>&copy; 2023 活牛采购智能数字化系统. 保留所有权利。</p>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button class="back-to-top" aria-label="返回顶部">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- AOS Animation -->
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
<!-- 自定义脚本 -->
<script src="js/main.js"></script>
</body>
</html>

View File

@@ -53,259 +53,263 @@
<a class="nav-link" href="contact.html">联系我们</a>
</li>
</ul>
<div class="ms-3">
<a href="contact.html" class="btn btn-primary">免费试用</a>
</div>
</div>
</div>
</nav>
<!-- 页面内容 -->
<main>
<!-- 英雄区域 -->
<section class="hero-section bg-dark text-white py-5 mt-5">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-8 mx-auto text-center">
<h1 class="display-4 fw-bold mb-4">专业解决方案</h1>
<p class="lead mb-4">针对不同行业特点和企业规模,提供定制化的活牛采购数字化管理解决方案</p>
</div>
</div>
</div>
</section>
<!-- 行业解决方案 -->
<section class="py-5">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold text-dark mb-3">按行业细分解决方案</h2>
<p class="text-muted">针对不同养殖行业的特殊需求,提供专业定制的数字化解决方案</p>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6" data-aos="fade-up">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center p-4">
<div class="feature-icon bg-primary bg-opacity-10 p-3 rounded-circle d-inline-block mb-3" style="width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto;">
<i class="fas fa-cow text-primary"></i>
</div>
<h5 class="fw-bold text-dark mb-3">肉牛养殖企业</h5>
<p class="text-muted">专注于肉牛育肥和屠宰加工环节的采购管理,优化饲料采购和出栏计划</p>
<ul class="text-start text-muted small">
<li>育肥牛只采购管理</li>
<li>饲料和兽药采购优化</li>
<li>出栏计划和销售对接</li>
<li>成本控制和效益分析</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center p-4">
<div class="feature-icon bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3" style="width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto;">
<i class="fas fa-seedling text-success"></i>
</div>
<h5 class="fw-bold text-dark mb-3">奶牛牧场</h5>
<p class="text-muted">针对奶牛养殖的特殊需求,优化育种牛只采购和牧场设备采购管理</p>
<ul class="text-start text-muted small">
<li>优质奶牛育种采购</li>
<li>牧场设备和设施采购</li>
<li>饲草料采购优化</li>
<li>奶制品生产配套</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center p-4">
<div class="feature-icon bg-warning bg-opacity-10 p-3 rounded-circle d-inline-block mb-3" style="width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto;">
<i class="fas fa-handshake text-warning"></i>
</div>
<h5 class="fw-bold text-dark mb-3">贸易中介服务</h5>
<p class="text-muted">为牛只贸易商提供完整的采购中介服务解决方案,提升交易效率</p>
<ul class="text-start text-muted small">
<li>买卖双方匹配服务</li>
<li>交易流程数字化管理</li>
<li>资金结算和安全保障</li>
<li>客户关系维护工具</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 企业规模解决方案 -->
<section class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold text-dark mb-3">按企业规模定制方案</h2>
<p class="text-muted">根据企业规模和采购需求,提供灵活可扩展的数字化解决方案</p>
</div>
<div class="row g-4">
<div class="col-lg-6" data-aos="fade-right">
<div class="card h-100 border-0 shadow">
<div class="card-body p-5">
<h4 class="fw-bold text-primary mb-4">中小型养殖企业</h4>
<div class="d-flex align-items-center mb-4">
<div class="feature-icon bg-primary bg-opacity-10 p-3 rounded-circle d-inline-block me-3" style="width: 50px; height: 50px; font-size: 1.25rem;">
<i class="fas fa-users text-primary"></i>
</div>
<div>
<h6 class="fw-bold mb-0">标准版解决方案</h6>
<small class="text-muted">适合年采购量100-1000头的企业</small>
</div>
</div>
<ul class="list-unstyled mb-4">
<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>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>标准报表和分析</li>
</ul>
<div class="text-center">
<span class="h4 text-dark fw-bold">¥9,800</span>
<span class="text-muted d-block">/年</span>
<a href="contact.html" class="btn btn-primary mt-3">立即咨询</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="card h-100 border-0 shadow">
<div class="card-body p-5">
<h4 class="fw-bold text-primary mb-4">大型养殖集团</h4>
<div class="d-flex align-items-center mb-4">
<div class="feature-icon bg-success bg-opacity-10 p-3 rounded-circle d-inline-block me-3" style="width: 50px; height: 50px; font-size: 1.25rem;">
<i class="fas fa-building text-success"></i>
</div>
<div>
<h6 class="fw-bold mb-0">企业版解决方案</h6>
<small class="text-muted">适合年采购量1000头以上的企业</small>
</div>
</div>
<ul class="list-unstyled mb-4">
<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>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>API集成服务</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>专属技术支持</li>
</ul>
<div class="text-center">
<span class="h4 text-dark fw-bold">定制报价</span>
<span class="text-muted d-block">根据需求定制</span>
<a href="contact.html" class="btn btn-success mt-3">获取定制方案</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA区域 -->
<section class="py-5 bg-primary text-white">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<h3 class="fw-bold mb-3">寻找适合您的解决方案?</h3>
<p class="mb-4">我们的专家团队将为您提供个性化的咨询和方案定制服务</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="contact.html" class="btn btn-light btn-lg px-4">立即咨询</a>
</div>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-dark text-white py-5">
<!-- 面包屑导航 -->
<nav aria-label="breadcrumb" class="pt-5 mt-5">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h5 class="fw-bold mb-3">活牛采购智能数字化系统</h5>
<p class="text-light">
专业的数字化采购管理解决方案,
为养殖企业提供全流程的采购数字化服务。
</p>
<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="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>
<div class="row g-4 mb-5">
<div class="col-md-6 col-lg-4">
<div class="card solution-card h-100 border-0">
<div class="card-body">
<div class="feature-icon mb-4 mx-auto">
<i class="fas fa-building"></i>
</div>
<h5 class="card-title text-center">大型养殖企业</h5>
<p class="card-text">针对年采购量超过1000头的大型养殖企业提供集团化采购管理解决方案。</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>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">产品</h6>
<ul class="list-unstyled">
<li><a href="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
<li><a href="solutions.html" class="text-muted text-decoration-none">解决方案</a></li>
<li><a href="#" class="text-muted text-decoration-none">价格方案</a></li>
</ul>
<div class="col-md-6 col-lg-4">
<div class="card solution-card h-100 border-0">
<div class="card-body">
<div class="feature-icon 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>
<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>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">资源</h6>
<ul class="list-unstyled">
<li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
<li><a href="news.html" class="text-muted text-decoration-none">新闻动态</a></li>
<li><a href="#" class="text-muted text-decoration-none">帮助文档</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">公司</h6>
<ul class="list-unstyled">
<li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
<li><a href="contact.html" class="text-muted text-decoration-none">联系我们</a></li>
<li><a href="#" class="text-muted text-decoration-none">加入我们</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6 class="fw-bold mb-3">联系信息</h6>
<div class="text-muted">
<p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
<p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
<p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
<div class="col-md-6 col-lg-4">
<div class="card solution-card h-100 border-0">
<div class="card-body">
<div class="feature-icon mb-4 mx-auto">
<i class="fas fa-exchange-alt"></i>
</div>
<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>
<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>
</div>
</div>
<hr class="my-4">
<div class="row align-items-center">
<div class="col-md-6">
<p class="text-muted mb-0">&copy; 2024 活牛采购智能数字化系统. 保留所有权利.</p>
<div class="row align-items-center mt-5">
<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>
</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>
<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>
</div>
<div class="col-md-6 text-md-end">
<div class="d-flex justify-content-md-end">
<a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
<a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
<a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
<div class="col-lg-6">
<img src="images/solution-banner.jpg" alt="解决方案优势" class="img-fluid rounded shadow" loading="lazy">
</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">实施流程</h2>
<p class="text-muted">标准化实施流程,确保项目成功交付</p>
</div>
<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>
<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>
<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>
<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>
<h5>持续优化</h5>
<p class="text-muted">根据使用反馈,持续优化系统功能</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-5">
<div class="container">
<div class="card bg-primary text-white border-0 shadow">
<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>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4 mb-lg-0">
<h5 class="footer-title">活牛采购智能数字化系统</h5>
<p>专业的活牛采购全流程数字化管理解决方案,提升采购效率,降低经营风险。</p>
<div class="d-flex">
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">产品</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="product.html">功能介绍</a></li>
<li class="mb-2"><a href="solutions.html">解决方案</a></li>
<li class="mb-2"><a href="cases.html">客户案例</a></li>
<li class="mb-2"><a href="news.html">更新日志</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">支持</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#">帮助中心</a></li>
<li class="mb-2"><a href="#">在线客服</a></li>
<li class="mb-2"><a href="#">开发者文档</a></li>
<li class="mb-2"><a href="#">合作伙伴</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4">
<h5 class="footer-title">联系我们</h5>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区xxx街道xxx号</li>
<li class="mb-2"><i class="fas fa-phone me-2"></i> 400-xxx-xxxx</li>
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@example.com</li>
</ul>
</div>
</div>
<div class="copyright text-center">
<p>&copy; 2023 活牛采购智能数字化系统. 保留所有权利。</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- 返回顶部按钮 -->
<button class="back-to-top" aria-label="返回顶部">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- AOS Animation -->
<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: 1000,
once: true,
offset: 100
});
</script>
</body>
</html>