517 lines
28 KiB
HTML
517 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>新闻动态 - 活牛采购智能数字化系统</title>
|
||
<meta name="description" content="获取活牛采购智能数字化系统的最新动态、行业新闻和技术更新，了解养殖数字化领域的最新发展趋势和公司进展。">
|
||
|
||
<!-- Bootstrap 5 CSS -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Bootstrap Icons -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
|
||
<!-- Font Awesome -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
||
<!-- AOS Animation -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||
<!-- 自定义样式 -->
|
||
<link href="css/custom.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||
<div class="container">
|
||
<a class="navbar-brand fw-bold" href="index.html">活牛采购智能数字化系统</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="index.html">首页</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="product.html">产品介绍</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="cases.html">客户案例</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="news.html">新闻动态</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="about.html">关于我们</a>
|
||
</li>
|
||
<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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</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>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-dark text-white py-5">
|
||
<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>
|
||
</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>
|
||
</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
|
||
});
|
||
|
||
// 新闻筛选功能
|
||
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> |