359 lines
17 KiB
HTML
359 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>云南智慧牛产业平台 - 数字化驱动畜牧业未来</title>
|
||
<!-- Bootstrap 3 -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="css/animate.min.css" rel="stylesheet">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
|
||
<!--[if lt IE 9]>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-default navbar-fixed-top">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
|
||
<span class="sr-only">切换导航</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<a class="navbar-brand" href="index.html">云南智慧牛产业平台</a>
|
||
</div>
|
||
|
||
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||
<ul class="nav navbar-nav navbar-right">
|
||
<li class="active"><a href="index.html">首页</a></li>
|
||
<li><a href="solutions.html">解决方案</a></li>
|
||
<li><a href="news.html">新闻中心</a></li>
|
||
<li><a href="about.html">关于我们</a></li>
|
||
<li><a href="help.html">帮助中心</a></li>
|
||
<li><a href="contact.html">联系我们</a></li>
|
||
<li><a href="#" class="btn btn-primary navbar-btn" style="margin-left: 10px;">登录 / 注册</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 轮播图 (Hero Section) -->
|
||
<div id="carousel-hero" class="carousel slide" data-ride="carousel">
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#carousel-hero" data-slide-to="0" class="active"></li>
|
||
<li data-target="#carousel-hero" data-slide-to="1"></li>
|
||
<li data-target="#carousel-hero" data-slide-to="2"></li>
|
||
</ol>
|
||
<div class="carousel-inner" role="listbox">
|
||
<div class="item active" style="background-image: url('images/hero-1.jpg');">
|
||
<div class="carousel-overlay"></div>
|
||
<div class="carousel-caption">
|
||
<h1 class="animated fadeInDown">云南智慧牛产业平台</h1>
|
||
<p class="animated fadeInUp delay-1s">数字化驱动畜牧业未来，打造全产业链智慧生态</p>
|
||
<p class="animated fadeInUp delay-2s"><a class="btn btn-lg btn-primary" href="#" role="button">立即体验</a> <a class="btn btn-lg btn-default" href="#" role="button" style="background: transparent; color: white; border: 2px solid white;">了解更多</a></p>
|
||
</div>
|
||
</div>
|
||
<div class="item" style="background-image: url('images/hero-2.jpg');">
|
||
<div class="carousel-overlay"></div>
|
||
<div class="carousel-caption">
|
||
<h1 class="animated fadeInDown">智慧养殖解决方案</h1>
|
||
<p class="animated fadeInUp delay-1s">物联网+大数据，让养殖更轻松、更高效</p>
|
||
<p class="animated fadeInUp delay-2s"><a class="btn btn-lg btn-primary" href="solutions.html" role="button">查看方案</a></p>
|
||
</div>
|
||
</div>
|
||
<div class="item" style="background-image: url('images/hero-3.jpg');">
|
||
<div class="carousel-overlay"></div>
|
||
<div class="carousel-caption">
|
||
<h1 class="animated fadeInDown">可信牛只交易</h1>
|
||
<p class="animated fadeInUp delay-1s">全程溯源，资金托管，让交易更放心</p>
|
||
<p class="animated fadeInUp delay-2s"><a class="btn btn-lg btn-primary" href="#" role="button">进入交易大厅</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a class="left carousel-control" href="#carousel-hero" role="button" data-slide="prev">
|
||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||
<span class="sr-only">上一张</span>
|
||
</a>
|
||
<a class="right carousel-control" href="#carousel-hero" role="button" data-slide="next">
|
||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||
<span class="sr-only">下一张</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 平台简介 -->
|
||
<section class="section-container text-center">
|
||
<div class="container">
|
||
<h2 class="section-title">平台简介</h2>
|
||
<div class="section-divider"></div>
|
||
<div class="row">
|
||
<div class="col-md-8 col-md-offset-2">
|
||
<p class="lead text-muted">
|
||
<span class="text-primary">云南智慧牛产业平台</span>（原彩云牛畜牧管理系统）致力于通过物联网、大数据、人工智能等先进技术，为畜牧业提供从养殖、交易、金融到监管的全方位数字化解决方案。
|
||
</p>
|
||
<p class="text-muted">我们旨在提升管理效率，降低运营成本，保障食品安全，推动产业升级，助力云南肉牛产业高质量发展。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心服务 -->
|
||
<section class="section-container bg-gray">
|
||
<div class="container">
|
||
<div class="text-center">
|
||
<h2 class="section-title">核心服务</h2>
|
||
<p class="section-subtitle">打造全产业链闭环服务体系</p>
|
||
<div class="section-divider"></div>
|
||
</div>
|
||
<div class="row" style="margin-top: 40px;">
|
||
<div class="col-sm-6 col-md-3">
|
||
<div class="service-card hover-lift">
|
||
<div class="service-icon-wrapper" style="background: linear-gradient(135deg, #409EFF 0%, #3a8ee6 100%);">
|
||
<i class="glyphicon glyphicon-dashboard service-icon"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h3>智慧养殖</h3>
|
||
<p>牛只档案、健康监测、繁殖管理、饲料管理，实现精细化养殖。</p>
|
||
<a href="solutions.html?tab=farming" class="btn btn-link">查看详情 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-md-3">
|
||
<div class="service-card hover-lift">
|
||
<div class="service-icon-wrapper" style="background: linear-gradient(135deg, #67C23A 0%, #5daf34 100%);">
|
||
<i class="glyphicon glyphicon-shopping-cart service-icon"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h3>牛只交易</h3>
|
||
<p>在线交易大厅、价格行情、供需匹配、安全支付，让交易更便捷。</p>
|
||
<a href="solutions.html?tab=trading" class="btn btn-link">查看详情 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-md-3">
|
||
<div class="service-card hover-lift">
|
||
<div class="service-icon-wrapper" style="background: linear-gradient(135deg, #E6A23C 0%, #cf9236 100%);">
|
||
<i class="glyphicon glyphicon-yen service-icon"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h3>金融服务</h3>
|
||
<p>活体抵押贷款、养殖保险、风险评估，解决资金难题。</p>
|
||
<a href="solutions.html?tab=finance" class="btn btn-link">查看详情 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-md-3">
|
||
<div class="service-card hover-lift">
|
||
<div class="service-icon-wrapper" style="background: linear-gradient(135deg, #F56C6C 0%, #dd6161 100%);">
|
||
<i class="glyphicon glyphicon-stats service-icon"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h3>政府监管</h3>
|
||
<p>数据上报、合规检查、疫情预警、追溯体系，助力精准监管。</p>
|
||
<a href="solutions.html?tab=government" class="btn btn-link">查看详情 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 平台数据 -->
|
||
<section class="section-container data-section">
|
||
<div class="container">
|
||
<div class="text-center text-white">
|
||
<h2 class="section-title text-white">平台数据</h2>
|
||
<div class="section-divider bg-white"></div>
|
||
</div>
|
||
<div class="row" style="margin-top: 40px;">
|
||
<div class="col-md-6">
|
||
<div class="row">
|
||
<div class="col-xs-6 text-center data-item wow fadeInUp" data-wow-delay="0.2s">
|
||
<div class="number" data-symbol="+">1200</div>
|
||
<div class="label">入驻企业</div>
|
||
</div>
|
||
<div class="col-xs-6 text-center data-item wow fadeInUp" data-wow-delay="0.4s">
|
||
<div class="number" data-symbol="+">50000</div>
|
||
<div class="label">在栏牛只</div>
|
||
</div>
|
||
<div class="col-xs-6 text-center data-item wow fadeInUp" data-wow-delay="0.6s">
|
||
<div class="number">350000000</div>
|
||
<div class="label">累计交易额</div>
|
||
</div>
|
||
<div class="col-xs-6 text-center data-item wow fadeInUp" data-wow-delay="0.8s">
|
||
<div class="number" data-symbol="%">100</div>
|
||
<div class="label">安全溯源</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div id="main-chart" style="width: 100%; height: 350px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 底部 Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<h3>联系我们</h3>
|
||
<p>电话：400-888-8888</p>
|
||
<p>邮箱：contact@caiyunniu.com</p>
|
||
<p>地址：云南省昆明市高新技术产业开发区</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<h3>快速链接</h3>
|
||
<ul class="list-unstyled">
|
||
<li><a href="about.html">关于平台</a></li>
|
||
<li><a href="solutions.html">核心服务</a></li>
|
||
<li><a href="help.html">帮助中心</a></li>
|
||
<li><a href="contact.html">联系我们</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<h3>关注我们</h3>
|
||
<p>微信公众号：云南智慧牛</p>
|
||
<p>获取最新行业资讯和平台动态</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom text-center">
|
||
<p>© 2025 云南智慧牛产业平台 版权所有</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Back to Top -->
|
||
<div id="back-to-top" title="回到顶部">
|
||
<i class="glyphicon glyphicon-chevron-up"></i>
|
||
</div>
|
||
|
||
<!-- Scripts -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
|
||
<script src="js/wow.min.js"></script>
|
||
<script>
|
||
// Initialize WOW.js
|
||
new WOW().init();
|
||
|
||
// Smooth Scroll
|
||
$(document).ready(function(){
|
||
// Counter Animation
|
||
$('.data-item .number').each(function () {
|
||
$(this).prop('Counter',0).animate({
|
||
Counter: $(this).text().replace(/,/g, '').replace(/\+/g, '')
|
||
}, {
|
||
duration: 2500,
|
||
easing: 'swing',
|
||
step: function (now) {
|
||
var text = Math.ceil(now).toLocaleString();
|
||
if($(this).data('symbol')) {
|
||
text += $(this).data('symbol');
|
||
}
|
||
$(this).text(text);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Add smooth scrolling to all links
|
||
$("a").on('click', function(event) {
|
||
if (this.hash !== "") {
|
||
event.preventDefault();
|
||
var hash = this.hash;
|
||
$('html, body').animate({
|
||
scrollTop: $(hash).offset().top
|
||
}, 800, function(){
|
||
window.location.hash = hash;
|
||
});
|
||
}
|
||
});
|
||
|
||
// Back to Top Button
|
||
$(window).scroll(function() {
|
||
if ($(this).scrollTop() > 300) {
|
||
$('#back-to-top').fadeIn();
|
||
} else {
|
||
$('#back-to-top').fadeOut();
|
||
}
|
||
});
|
||
|
||
$('#back-to-top').click(function() {
|
||
$('html, body').animate({scrollTop: 0}, 800);
|
||
return false;
|
||
});
|
||
|
||
// Navbar Scroll Effect
|
||
$(window).scroll(function() {
|
||
if ($(this).scrollTop() > 50) {
|
||
$('.navbar-default').addClass('navbar-scrolled');
|
||
} else {
|
||
$('.navbar-default').removeClass('navbar-scrolled');
|
||
}
|
||
});
|
||
});
|
||
|
||
// ECharts 初始化
|
||
var chartDom = document.getElementById('main-chart');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
option = {
|
||
title: {
|
||
text: '月度交易额趋势',
|
||
textStyle: { color: '#fff' },
|
||
left: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||
axisLabel: { color: '#fff' },
|
||
axisLine: { lineStyle: { color: '#fff' } }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: { color: '#fff' },
|
||
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
|
||
},
|
||
series: [
|
||
{
|
||
name: '交易额 (万元)',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [1200, 1320, 1010, 1340, 2900, 3500],
|
||
itemStyle: { color: '#409EFF' },
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
|
||
{ offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
|
||
])
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
|
||
// 响应式图表
|
||
window.addEventListener('resize', function() {
|
||
myChart.resize();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |