aiotagro/xlxumu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(database): 更新数据库设计规范和核心数据表结构

Browse Source 
- 新增数据库基础规范、API映射规范、安全规范等详细设计要求- 增加读写分离、分库分表、数据生命周期管理等策略说明
- 新建核心业务表结构，包括用户表、贷款申请表、保险申请表等
- 优化索引设计，提高查询效率
This commit is contained in:
mapleaf
2025-08-19 22:04:18 +08:00
parent 1dbfbebd05
commit 47c67ff704
70 changed files with 104406 additions and 825 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
frontend/website/css/style.css
View File

@@ -1,200 +1,80 @@
/* 锡林郭勒盟安格斯牛平台官网样式 */
/* 基础样式重置 */
:root {
--primary-color: #4CAF50;
--secondary-color: #388E3C;
--accent-color: #FF9800;
--light-color: #f5f5f5;
--dark-color: #333;
--text-color: #333;
--border-radius: 4px;
--box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
--grass-green: #2e8b57;
--golden-yellow: #ffd700;
--dark-green: #1e5631;
--light-gold: #ffec80;
}
body {
font-family: 'Arial', sans-serif;
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: #fff;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
/* 蒙古族风格装饰元素 */
.gold-pattern {
background-image: url('../images/gold-pattern.png');
background-repeat: repeat-x;
height: 10px;
}
/* 头部样式 */
header {
background-color: var(--primary-color);
color: white;
padding: 1rem 0;
box-shadow: var(--box-shadow);
/* 导航栏增强 */
.navbar {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
header h1 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
.navbar.scrolled {
background-color: var(--dark-green) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
nav ul {
display: flex;
list-style: none;
/* 英雄区域动画 */
.hero-section {
animation: fadeIn 1.5s ease-in-out;
}
nav ul li {
margin-right: 1.5rem;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
nav ul li a:hover {
color: var(--light-color);
}
/* 主要内容区域 */
main {
min-height: calc(100vh - 140px);
}
/* 英雄区域 */
.hero {
background: linear-gradient(rgba(76, 175, 80, 0.8), rgba(56, 142, 60, 0.9)), url('../images/hero-bg.jpg') no-repeat center center/cover;
color: white;
text-align: center;
padding: 4rem 0;
}
.hero h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 1rem;
}
.btn {
display: inline-block;
padding: 0.8rem 1.5rem;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
}
.btn.primary {
background-color: var(--accent-color);
color: white;
}
.btn.primary:hover {
background-color: #F57C00;
transform: translateY(-2px);
}
.btn.secondary {
background-color: transparent;
color: white;
border: 2px solid white;
}
.btn.secondary:hover {
background-color: white;
color: var(--primary-color);
transform: translateY(-2px);
}
/* 特色功能区域 */
.features {
padding: 4rem 0;
background-color: var(--light-color);
}
.features h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 3rem;
color: var(--primary-color);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 功能卡片增强 */
.feature-card {
background: white;
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
text-align: center;
transition: transform 0.3s;
border-radius: 12px;
overflow: hidden;
}
.feature-card:hover {
transform: translateY(-5px);
.feature-card .card-body {
position: relative;
z-index: 1;
}
.feature-card h3 {
color: var(--primary-color);
margin-bottom: 1rem;
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--grass-green), var(--dark-green));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
/* 页脚 */
footer {
background-color: var(--dark-color);
color: white;
text-align: center;
padding: 1.5rem 0;
.feature-card:hover::before {
opacity: 0.1;
}
/* 响应式设计 */
/* 响应式调整 */
@media (max-width: 768px) {
header h1 {
font-size: 1.5rem;
.hero-section {
min-height: 50vh;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin: 0.5rem 0;
}
.hero h2 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.feature-grid {
grid-template-columns: 1fr;
.display-3 {
font-size: 2.5rem;
}
}

BIN
frontend/website/images/grassland-banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

BIN
frontend/website/images/news-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
frontend/website/images/news-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
frontend/website/images/news-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1000 KiB

536
frontend/website/index.html
View File

@@ -3,67 +3,507 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锡林郭勒盟安格斯牛数字化管理平台</title>
<title>锡林郭勒盟畜牧数字化管理平台</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css">
<!-- 自定义CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Chart.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<!-- Chart.js CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<style>
:root {
--grass-green: #2e8b57;
--golden-yellow: #ffd700;
}
.hero-section {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('images/grassland-banner.jpg') no-repeat center center;
background-size: cover;
min-height: 60vh;
color: white;
}
.feature-card {
transition: all 0.3s ease;
border: 2px solid var(--golden-yellow);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.gold-border {
border: 3px solid var(--golden-yellow);
}
</style>
</head>
<body>
<header>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-success sticky-top gold-border">
<div class="container">
<h1>锡林郭勒盟安格斯牛数字化管理平台</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
<a class="navbar-brand fs-3 fw-bold" href="#">
<i class="bi bi-cloud-sun-fill me-2"></i>
锡林郭勒盟畜牧数字化管理平台
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<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 active" href="#home">
<i class="bi bi-house-door me-1"></i> 首页
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">
<i class="bi bi-stack me-1"></i> 平台功能
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#data">
<i class="bi bi-bar-chart-line me-1"></i> 数据看板
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news">
<i class="bi bi-newspaper me-1"></i> 行业动态
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">
<i class="bi bi-info-circle me-1"></i> 关于我们
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
</nav>
<main>
<section id="home" class="hero">
<div class="container">
<h2>推动畜牧业数字化转型</h2>
<p>打造锡林郭勒盟安格斯牛全产业链数字化管理平台</p>
<div class="cta-buttons">
<a href="#" class="btn primary">平台入口</a>
<a href="#" class="btn secondary">了解详情</a>
</div>
<!-- 英雄区域 -->
<section id="home" class="hero-section d-flex align-items-center">
<div class="container text-center text-white">
<h1 class="display-3 fw-bold mb-4">
畜牧数字化 赋能新牧区
</h1>
<p class="lead fs-4 mb-5">
打造锡林郭勒盟现代化畜牧业全产业链数字化管理平台
</p>
<div class="d-flex justify-content-center gap-4">
<a href="#features" class="btn btn-success btn-lg px-4 py-2">
<i class="bi bi-play-circle me-2"></i> 平台演示
</a>
<a href="#contact" class="btn btn-outline-light btn-lg px-4 py-2">
<i class="bi bi-telephone me-2"></i> 联系我们
</a>
</div>
</section>
</div>
</section>
<section id="features" class="features">
<div class="container">
<h2>平台特色</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>养殖管理</h3>
<p>全流程数字化养殖管理，提升养殖效率</p>
</div>
<div class="feature-card">
<h3>交易撮合</h3>
<p>安全可靠的活牛交易平台，保障交易双方权益</p>
</div>
<div class="feature-card">
<h3>金融监管</h3>
<p>银行与保险机构数字化监管，降低金融风险</p>
</div>
<div class="feature-card">
<h3>政府监管</h3>
<p>政府数字化监管平台，提升监管效率</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<!-- 功能展示区 -->
<section id="features" class="py-5 bg-light">
<div class="container">
<p>&copy; 2025 锡林郭勒盟安格斯牛数字化管理平台. 保留所有权利.</p>
<div class="text-center mb-5">
<h2 class="fw-bold display-5 mb-3">
<i class="bi bi-stars text-success me-2"></i>
核心功能
</h2>
<p class="lead text-muted">六大数字化管理模块助力畜牧业现代化发展</p>
</div>
<div class="row g-4">
<!-- 养殖管理 -->
<div class="col-md-6 col-lg-4">
<div class="card feature-card h-100">
<div class="card-body text-center p-4">
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
<i class="bi bi-egg-fill fs-1 text-success"></i>
</div>
<h3 class="h4">数字化养殖管理</h3>
<p class="text-muted">
全生命周期档案管理
饲喂计划与健康监测
电子耳标追溯系统
</p>
<a href="#" class="btn btn-outline-success">查看详情</a>
</div>
</div>
</div>
<!-- 活体抵押 -->
<div class="col-md-6 col-lg-4">
<div class="card feature-card h-100">
<div class="card-body text-center p-4">
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
<i class="bi bi-cash-coin fs-1 text-success"></i>
</div>
<h3 class="h4">活体抵押贷款</h3>
<p class="text-muted">
银行监管系统对接
资产评估与风险控制
贷款全流程数字化
</p>
<a href="#" class="btn btn-outline-success">查看详情</a>
</div>
</div>
</div>
<!-- 保险监管 -->
<div class="col-md-6 col-lg-4">
<div class="card feature-card h-100">
<div class="card-body text-center p-4">
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
<i class="bi bi-shield-check fs-1 text-success"></i>
</div>
<h3 class="h4">养殖保险监管</h3>
<p class="text-muted">
保险产品数字化对接
理赔流程透明化
风险预警系统
</p>
<a href="#" class="btn btn-outline-success">查看详情</a>
</div>
</div>
</div>
<!-- 政府监管 -->
<div class="col-md-6 col-lg-4">
<div class="card feature-card h-100">
<div class="card-body text-center p-4">
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
<i class="bi bi-building fs-1 text-success"></i>
</div>
<h3 class="h4">政府监管平台</h3>
<p class="text-muted">
畜牧业数据可视化
政策法规发布
产业分析报告
</p>
<a href="#" class="btn btn-outline-success">查看详情</a>
</div>
</div>
</div>
<!-- 活牛交易 -->
<div class="col-md-6 col-lg-4">
<div class="card feature-card h-100">
<div class="card-body text-center p-4">
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
<i class="bi bi-cart-check fs-1 text-success"></i>
</div>
<h3 class="h4">线上活牛交易</h3>
<p class="text-muted">
电子交易平台
质量认证体系
物流跟踪系统
</p>
<a href="#" class="btn btn-outline-success">查看详情</a>
</div>
</div>
</div>
<!-- 牛肉商城 -->
<div class="col-md-6 col-lg-4">
<div class="card feature-card h-100">
<div class="card-body text-center p-4">
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
<i class="bi bi-shop fs-1 text-success"></i>
</div>
<h3 class="h4">优质牛肉商城</h3>
<p class="text-muted">
品牌直销平台
质量追溯系统
冷链物流对接
</p>
<a href="#" class="btn btn-outline-success">查看详情</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 数据可视化区 -->
<section id="data" class="py-5 bg-white">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold display-5 mb-3">
<i class="bi bi-bar-chart-line text-success me-2"></i>
畜牧业数据看板
</h2>
<p class="lead text-muted">实时掌握锡林郭勒盟畜牧业发展动态</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h3 class="h4 text-center mb-4">牲畜存栏量统计</h3>
<div class="ratio ratio-16x9">
<canvas id="livestockChart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h3 class="h4 text-center mb-4">牧草产量与价格</h3>
<div class="ratio ratio-16x9">
<canvas id="forageChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a href="#" class="btn btn-success px-4">
<i class="bi bi-arrow-right-circle me-2"></i> 查看更多数据
</a>
</div>
</div>
</section>
<!-- 新闻动态区 -->
<section id="news" class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold display-5 mb-3">
<i class="bi bi-newspaper text-success me-2"></i>
行业动态
</h2>
<p class="lead text-muted">了解畜牧业最新政策与市场资讯</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100">
<img src="images/news-1.jpg" class="card-img-top" alt="新闻图片1">
<div class="card-body">
<span class="badge bg-success mb-2">政策解读</span>
<h3 class="h5">锡林郭勒盟出台畜牧业数字化发展三年规划</h3>
<p class="text-muted small">2025-08-15</p>
<p class="card-text">规划提出到2027年实现全盟畜牧业数字化覆盖率90%以上...</p>
<a href="#" class="btn btn-link p-0 text-success">阅读全文 <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<img src="images/news-2.jpg" class="card-img-top" alt="新闻图片2">
<div class="card-body">
<span class="badge bg-success mb-2">市场动态</span>
<h3 class="h5">安格斯牛肉价格连续三月上涨</h3>
<p class="text-muted small">2025-08-10</p>
<p class="card-text">受市场需求增加影响，优质安格斯牛肉价格环比上涨8.5%...</p>
<a href="#" class="btn btn-link p-0 text-success">阅读全文 <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<img src="images/news-3.jpg" class="card-img-top" alt="新闻图片3">
<div class="card-body">
<span class="badge bg-success mb-2">技术前沿</span>
<h3 class="h5">区块链技术在畜牧业追溯系统中的应用</h3>
<p class="text-muted small">2025-08-05</p>
<p class="card-text">新型区块链技术可实现牲畜从养殖到餐桌的全流程追溯...</p>
<a href="#" class="btn btn-link p-0 text-success">阅读全文 <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a href="#" class="btn btn-outline-success px-4">
<i class="bi bi-collection me-2"></i> 查看更多新闻
</a>
</div>
</div>
</section>
<!-- 畜牧业数据看板 -->
<script>
// 牲畜存栏量统计图表
const livestockCtx = document.getElementById('livestockChart');
new Chart(livestockCtx, {
type: 'bar',
data: {
labels: ['牛', '羊', '马', '骆驼'],
datasets: [{
label: '存栏量(万头)',
data: [120, 85, 32, 8],
backgroundColor: [
'rgba(54, 162, 235, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(255, 159, 64, 0.7)',
'rgba(153, 102, 255, 0.7)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: '牲畜存栏量统计'
}
}
}
});
// 牧草产量与价格图表
const forageCtx = document.getElementById('forageChart');
new Chart(forageCtx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [
{
label: '产量(万吨)',
data: [12, 19, 15, 22, 28, 35],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
yAxisID: 'y'
},
{
label: '价格(元/吨)',
data: [1800, 1750, 1850, 1900, 1950, 2000],
borderColor: 'rgb(255, 159, 64)',
backgroundColor: 'rgba(255, 159, 64, 0.2)',
yAxisID: 'y1'
}
]
},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false
},
plugins: {
title: {
display: true,
text: '牧草产量与价格趋势'
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
title: {
display: true,
text: '产量(万吨)'
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: {
display: true,
text: '价格(元/吨)'
},
grid: {
drawOnChartArea: false
}
}
}
}
});
</script>
<!-- 页脚 -->
<footer id="contact" class="bg-success text-white py-5">
<div class="container">
<div class="row g-4">
<div class="col-lg-4">
<h3 class="h4 mb-4">
<i class="bi bi-cloud-sun-fill me-2"></i>
锡林郭勒盟畜牧数字化管理平台
</h3>
<p>
打造现代化畜牧业全产业链数字化管理平台，推动锡林郭勒盟畜牧业高质量发展。
</p>
<div class="d-flex gap-3">
<a href="#" class="text-white fs-4"><i class="bi bi-wechat"></i></a>
<a href="#" class="text-white fs-4"><i class="bi bi-weibo"></i></a>
<a href="#" class="text-white fs-4"><i class="bi bi-youtube"></i></a>
</div>
</div>
<div class="col-lg-4">
<h3 class="h4 mb-4">快速链接</h3>
<ul class="list-unstyled">
<li class="mb-2"><a href="#home" class="text-white text-decoration-none">平台首页</a></li>
<li class="mb-2"><a href="#features" class="text-white text-decoration-none">核心功能</a></li>
<li class="mb-2"><a href="#data" class="text-white text-decoration-none">数据看板</a></li>
<li class="mb-2"><a href="#news" class="text-white text-decoration-none">行业动态</a></li>
<li class="mb-2"><a href="#about" class="text-white text-decoration-none">关于我们</a></li>
</ul>
</div>
<div class="col-lg-4">
<h3 class="h4 mb-4">联系我们</h3>
<ul class="list-unstyled">
<li class="mb-2">
<i class="bi bi-geo-alt-fill me-2"></i>
内蒙古自治区锡林郭勒盟锡林浩特市
</li>
<li class="mb-2">
<i class="bi bi-telephone-fill me-2"></i>
0479-8888888
</li>
<li class="mb-2">
<i class="bi bi-envelope-fill me-2"></i>
contact@xlxumu.com
</li>
</ul>
</div>
</div>
<hr class="my-4 opacity-25">
<div class="text-center">
<p class="mb-0">
© 2025 锡林郭勒盟畜牧数字化管理平台. 保留所有权利 |
<a href="#" class="text-white text-decoration-none">隐私政策</a> |
<a href="#" class="text-white text-decoration-none">使用条款</a>
</p>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义JS -->
<script src="js/main.js"></script>
</body>
</html>

95
frontend/website/js/main.js
View File

@@ -1,64 +1,47 @@
// 锡林郭勒盟安格斯牛平台官网JavaScript
// 导航栏滚动效果
document.addEventListener('DOMContentLoaded', function() {
// 平滑滚动效果
const links = document.querySelectorAll('a[href^="#"]');
links.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 70,
behavior: 'smooth'
});
}
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 70,
behavior: 'smooth'
});
}
});
});
// 新闻轮播
const newsItems = document.querySelectorAll('#news .card');
if (newsItems.length > 0) {
let currentIndex = 0;
// 简单的移动端菜单切换
const mobileMenuButton = document.createElement('button');
mobileMenuButton.classList.add('mobile-menu-toggle');
mobileMenuButton.innerHTML = '☰';
mobileMenuButton.setAttribute('aria-label', '切换菜单');
const header = document.querySelector('header');
const nav = document.querySelector('nav');
if (header && nav) {
header.insertBefore(mobileMenuButton, nav);
mobileMenuButton.addEventListener('click', function() {
nav.classList.toggle('active');
});
function showNextNews() {
newsItems[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % newsItems.length;
newsItems[currentIndex].classList.add('active');
}
// 添加一些简单的交互效果
const featureCards = document.querySelectorAll('.feature-card');
// 初始化第一个新闻项
newsItems[0].classList.add('active');
featureCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.2)';
});
card.addEventListener('mouseleave', function() {
this.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
});
});
});
// 简单的表单验证示例
function validateForm(form) {
// 这里可以添加表单验证逻辑
console.log('表单验证');
return true;
}
// 页面加载完成后的初始化
window.addEventListener('load', function() {
console.log('锡林郭勒盟安格斯牛平台官网加载完成');
// 每5秒自动轮播
setInterval(showNextNews, 5000);
}
});