docs(website): 重构关于页面布局和内容
- 更新页面布局，优化导航栏和面包屑导航 - 重新组织页面内容，突出公司使命和价值观 - 添加发展历程和核心团队介绍 - 更新合作伙伴展示方式 - 调整页脚内容，增加社交媒体链接
This commit is contained in:
@@ -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">© 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>© 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>
|
||||
Reference in New Issue
Block a user