From 451bab4a96104d0cfe50868012a3c97404b7b0ee Mon Sep 17 00:00:00 2001 From: ylweng Date: Thu, 21 Aug 2025 03:22:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(website):=20=E4=BC=98=E5=8C=96=E6=96=B0?= =?UTF-8?q?=E9=97=BB=E8=BD=AE=E6=92=AD=E5=8A=9F=E8=83=BD=E5=B9=B6=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E5=AF=BC=E8=88=AA=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/website/about.html | 198 +++++++++++++++ frontend/website/css/style.css | 15 ++ frontend/website/data.html | 434 +++++++++++++++++++++++++++++++++ frontend/website/index.html | 27 +- frontend/website/js/main.js | 59 ++++- frontend/website/news.html | 246 +++++++++++++++++++ 6 files changed, 960 insertions(+), 19 deletions(-) create mode 100644 frontend/website/about.html create mode 100644 frontend/website/data.html create mode 100644 frontend/website/news.html diff --git a/frontend/website/about.html b/frontend/website/about.html new file mode 100644 index 0000000..cad354a --- /dev/null +++ b/frontend/website/about.html @@ -0,0 +1,198 @@ + + + + + + 关于我们 - 锡林郭勒盟畜牧数字化管理平台 + + + + + + + + + + + + +
+ + +
+
+
+

关于我们

+

锡林郭勒盟畜牧数字化管理平台致力于推动畜牧业现代化发展

+
+ +
+
+

平台简介

+

锡林郭勒盟畜牧数字化管理平台是由锡林郭勒盟政府主导建设的现代化畜牧业管理平台。我们运用先进的数字化技术，为畜牧业全产业链提供智能化解决方案。

+

平台整合了养殖管理、疫病防控、质量追溯、市场交易等多个模块，实现了畜牧业生产、经营、管理和服务的数字化转型。

+

我们的目标是打造全国领先的畜牧业数字化管理示范平台，为锡林郭勒盟建设绿色农畜产品生产加工基地提供有力支撑。

+
+
+ 平台概览 +
+
+ +
+
+

我们的使命

+

推动锡林郭勒盟畜牧业高质量发展，提升畜牧业生产效率和产品质量，保障食品安全，促进牧民增收。

+

通过数字化技术赋能传统畜牧业，实现精准养殖、智能管理和科学决策，打造现代化畜牧业新模式。

+

构建完善的畜牧业全产业链数字化生态，推动畜牧业与信息技术深度融合，引领行业发展。

+
+
+ 我们的使命 +
+
+ +
+

核心团队

+

我们拥有一支由行业专家、技术精英和管理人才组成的多元化团队

+ +
+
+
+
+
+ +
+

张明华

+

技术总监

+

10年畜牧业信息化建设经验，主导多个省级数字化农业项目

+
+
+
+ +
+
+
+
+ +
+

李雪梅

+

产品经理

+

专注于畜牧业数字化产品设计，擅长用户需求分析和体验优化

+
+
+
+ +
+
+
+
+ +
+

王建国

+

运营总监

+

畜牧业专家，熟悉行业政策法规，具有丰富的项目运营经验

+
+
+
+
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/frontend/website/css/style.css b/frontend/website/css/style.css index f323830..df9e5b7 100644 --- a/frontend/website/css/style.css +++ b/frontend/website/css/style.css @@ -68,6 +68,21 @@ body { opacity: 0.1; } +/* 轮播指示器样式 */ +.carousel-indicators button { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #ccc; + border: none; + margin: 0 5px; + transition: background-color 0.3s ease; +} + +.carousel-indicators button.active { + background-color: var(--grass-green); +} + /* 响应式调整 */ @media (max-width: 768px) { .hero-section { diff --git a/frontend/website/data.html b/frontend/website/data.html new file mode 100644 index 0000000..e6d1748 --- /dev/null +++ b/frontend/website/data.html @@ -0,0 +1,434 @@ + + + + + + 数据看板 - 锡林郭勒盟畜牧数字化管理平台 + + + + + + + + + + + + + + +
+ + +
+
+
+

畜牧业数据看板

+

实时掌握锡林郭勒盟畜牧业发展动态

+
+ + +
+
+
+
+ +

120万

+

牛存栏量

+
+
+
+ +
+
+
+ +

85万

+

羊存栏量

+
+
+
+ +
+
+
+ +

2.8亿

+

年产值(元)

+
+
+
+ +
+
+
+ +

1.2万

+

牧户数

+
+
+
+
+ + +
+
+
+
+

牲畜存栏量统计

+
+ +
+
+
+
+ +
+
+
+

牧草产量与价格

+
+ +
+
+
+
+
+ +
+
+
+
+

月度牛肉产量趋势

+
+ +
+
+
+
+ +
+
+
+

畜牧业收入分布

+
+ +
+
+
+
+
+ + +
+
+

各旗县畜牧业数据对比

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
旗县牛存栏量(万头)羊存栏量(万只)马存栏量(万匹)年产值(万元)同比增长率
锡林浩特市35.228.68.38600+5.2%
二连浩特市22.818.45.15400+3.8%
阿巴嘎旗18.615.24.74200-1.2%
苏尼特左旗15.412.83.93800+2.5%
苏尼特右旗12.910.73.23100+4.1%
+
+
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/website/index.html b/frontend/website/index.html index c483aa5..f9d0794 100644 --- a/frontend/website/index.html +++ b/frontend/website/index.html @@ -76,17 +76,17 @@
  • - + 数据看板
  • - - 行业动态 + + 新闻资讯
  • - + 关于我们
    • @@ -292,7 +292,8 @@

    了解畜牧业最新政策与市场资讯

    -
    +
    +
    新闻图片1 @@ -306,7 +307,8 @@
    -
    + +
    新闻图片2
    @@ -319,7 +321,8 @@
    -
    + +
    新闻图片3
    @@ -461,11 +464,11 @@

    快速链接

    diff --git a/frontend/website/js/main.js b/frontend/website/js/main.js index 964a022..df40cbf 100644 --- a/frontend/website/js/main.js +++ b/frontend/website/js/main.js @@ -28,20 +28,65 @@ document.addEventListener('DOMContentLoaded', function() { }); // 新闻轮播 - const newsItems = document.querySelectorAll('#news .card'); + const newsContainer = document.querySelector('#news .row'); + const newsItems = document.querySelectorAll('#news .col-md-4'); + if (newsItems.length > 0) { + // 创建轮播指示器 + const indicatorsContainer = document.createElement('div'); + indicatorsContainer.className = 'carousel-indicators d-flex justify-content-center mt-3'; + + // 为每个新闻项创建指示器 + newsItems.forEach((item, index) => { + const indicator = document.createElement('button'); + indicator.type = 'button'; + indicator.className = index === 0 ? 'active' : ''; + indicator.setAttribute('data-bs-target', '#news'); + indicator.setAttribute('data-bs-slide-to', index.toString()); + + indicator.addEventListener('click', () => { + showNews(index); + }); + + indicatorsContainer.appendChild(indicator); + }); + + // 将指示器添加到新闻区域 + newsContainer.parentNode.insertBefore(indicatorsContainer, newsContainer.nextSibling); + let currentIndex = 0; - function showNextNews() { - newsItems[currentIndex].classList.remove('active'); - currentIndex = (currentIndex + 1) % newsItems.length; - newsItems[currentIndex].classList.add('active'); + function showNews(index) { + // 隐藏所有新闻项 + newsItems.forEach(item => { + item.classList.remove('d-block'); + item.classList.add('d-none'); + }); + + // 显示指定新闻项 + newsItems[index].classList.remove('d-none'); + newsItems[index].classList.add('d-block'); + + // 更新指示器 + const indicators = indicatorsContainer.querySelectorAll('button'); + indicators.forEach((indicator, i) => { + if (i === index) { + indicator.classList.add('active'); + } else { + indicator.classList.remove('active'); + } + }); + + currentIndex = index; } // 初始化第一个新闻项 - newsItems[0].classList.add('active'); + showNews(0); // 每5秒自动轮播 - setInterval(showNextNews, 5000); + setInterval(() => { + const nextIndex = (currentIndex + 1) % newsItems.length; + showNews(nextIndex); + }, 5000); } }); \ No newline at end of file diff --git a/frontend/website/news.html b/frontend/website/news.html new file mode 100644 index 0000000..49272ff --- /dev/null +++ b/frontend/website/news.html @@ -0,0 +1,246 @@ + + + + + + 新闻资讯 - 锡林郭勒盟畜牧数字化管理平台 + + + + + + + + + + + + +
    + + +
    +
    +
    +

    行业动态

    +

    了解畜牧业最新政策与市场资讯

    +
    + +
    + +
    +
    + + + + + +
    +
    +
    + +
    + +
    +
    + 新闻图片1 +
    + 政策解读 +

    锡林郭勒盟出台畜牧业数字化发展三年规划

    +

    2025-08-15

    +

    规划提出到2027年实现全盟畜牧业数字化覆盖率90%以上，建设完善的畜牧业数字化管理体系...

    + 阅读全文 +
    +
    +
    + + +
    +
    + 新闻图片2 +
    + 市场动态 +

    优质牛肉价格连续三月上涨

    +

    2025-08-10

    +

    受市场需求增加影响，优质牛肉价格环比上涨8.5%，养殖户收益显著提升...

    + 阅读全文 +
    +
    +
    + + +
    +
    + 新闻图片3 +
    + 技术前沿 +

    区块链技术在畜牧业追溯系统中的应用

    +

    2025-08-05

    +

    新型区块链技术可实现牲畜从养殖到餐桌的全流程追溯，保障食品安全...

    + 阅读全文 +
    +
    +
    + + +
    +
    + 新闻图片4 +
    + 行业报告 +

    2025年上半年锡林郭勒盟畜牧业发展报告

    +

    2025-07-20

    +

    报告显示，上半年全盟畜牧业总产值同比增长6.8%，数字化转型成效显著...

    + 阅读全文 +
    +
    +
    + + +
    +
    + 新闻图片5 +
    + 政策解读 +

    国家出台草原生态保护补助奖励政策

    +

    2025-07-15

    +

    新政将为锡林郭勒盟牧民提供每亩草原生态补偿，促进可持续发展...

    + 阅读全文 +
    +
    +
    + + +
    +
    + 新闻图片6 +
    + 市场动态 +

    锡林郭勒盟羊肉获欧盟有机认证

    +

    2025-07-10

    +

    本地优质羊肉成功获得欧盟有机食品认证，将扩大出口市场...

    + 阅读全文 +
    +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    + + +
    +
    +
    +
    +

    + + 锡林郭勒盟畜牧数字化管理平台 +

    +

    + 打造现代化畜牧业全产业链数字化管理平台，推动锡林郭勒盟畜牧业高质量发展。 +

    +
    + + + +
    +
    + +
    +

    快速链接

    + +
    + +
    +

    联系我们

    +
      +
    • + + 内蒙古自治区锡林郭勒盟锡林浩特市 +
      • +
    • + + 0479-8888888 +
      • +
    • + + contact@xlxumu.com +
      • +
    +
    +
    + +
    + +
    +

    + © 2025 锡林郭勒盟畜牧数字化管理平台. 保留所有权利 | + 隐私政策 | + 使用条款 +

    +
    +
    +
    + + + + + + + \ No newline at end of file