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

- 新增数据库基础规范、API映射规范、安全规范等详细设计要求- 增加读写分离、分库分表、数据生命周期管理等策略说明
- 新建核心业务表结构，包括用户表、贷款申请表、保险申请表等
- 优化索引设计，提高查询效率

frontend/dashboard/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "farming-management",
+  "name": "dashboard",
   "version": "1.0.0",
-  "description": "锡林郭勒盟安格斯牛养殖管理系统",
+  "description": "锡林郭勒盟安格斯牛养殖产业大屏可视化系统",
   "author": "xlxumu team",
   "private": true,
   "scripts": {
@@ -10,16 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.0",
-    "vue-router": "^4.0.0",
     "ant-design-vue": "^3.0.0",
+    "echarts": "^5.0.0",
     "pinia": "^2.0.0",
-    "echarts": "^5.0.0"
+    "vue": "^3.2.0",
+    "vue-router": "^4.0.0"
   },
   "devDependencies": {
+    "@types/node": "^18.0.0",
     "@vitejs/plugin-vue": "^3.0.0",
-    "vite": "^3.0.0",
     "typescript": "^4.0.0",
-    "@types/node": "^18.0.0"
+    "vite": "^3.0.0"
   }
-}
+}

frontend/dashboard/src/App.vue

@@ -13,5 +13,36 @@ export default {
 <style>
 #app {
   height: 100vh;
+  font-family: 'Arial', sans-serif;
+  background: #0a1929;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(76, 175, 80, 0.5);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(76, 175, 80, 0.8);
 }
 </style>

frontend/dashboard/src/main.js

@@ -6,10 +6,12 @@ import router from './router'
 import 'ant-design-vue/dist/antd.css'
 import './styles/global.css'
 
+// DataV组件按需引入，避免Vue 3兼容性问题
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
 app.use(Antd)
 
+
 app.mount('#app')

frontend/dashboard/src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Dashboard from '@/views/Dashboard.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Dashboard',
+    component: Dashboard
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

frontend/dashboard/src/styles/global.css

@@ -4,10 +4,10 @@
   --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);
+  --dark-color: #0a1929;
+  --text-color: #ffffff;
+  --border-radius: 8px;
+  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
 * {
@@ -17,81 +17,91 @@
 }
 
 body {
-  font-family: 'Arial', sans-serif;
+  font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
   line-height: 1.6;
   color: var(--text-color);
-  background-color: #fff;
+  background-color: var(--dark-color);
+  overflow: hidden;
+}
+
+#app {
+  height: 100vh;
+  background: linear-gradient(135deg, #0c2d48, #145da0);
 }
 
 .container {
-  max-width: 1200px;
+  max-width: 100%;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 0;
 }
 
 /* 通用按钮样式 */
 .btn {
   display: inline-block;
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1.5rem;
   border-radius: var(--border-radius);
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s;
   border: none;
   cursor: pointer;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-color);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn:hover {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .btn-primary {
-  background-color: var(--primary-color);
+  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
   color: white;
+  font-weight: bold;
 }
 
 .btn-primary:hover {
-  background-color: var(--secondary-color);
-}
-
-.btn-secondary {
-  background-color: var(--accent-color);
-  color: white;
-}
-
-.btn-secondary:hover {
-  background-color: #F57C00;
-}
-
-/* 通用卡片样式 */
-.card {
-  background: white;
-  padding: 1.5rem;
-  border-radius: var(--border-radius);
+  background: linear-gradient(45deg, var(--secondary-color), #2E7D32);
+  transform: translateY(-2px);
   box-shadow: var(--box-shadow);
-  margin-bottom: 1.5rem;
 }
 
-/* 通用表单样式 */
-.form-group {
-  margin-bottom: 1rem;
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
 
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
 }
 
-.form-group input,
-.form-group select,
-.form-group textarea {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ddd;
-  border-radius: var(--border-radius);
-  font-size: 1rem;
+::-webkit-scrollbar-thumb {
+  background: rgba(76, 175, 80, 0.5);
+  border-radius: 4px;
 }
 
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .container {
-    padding: 0 10px;
-  }
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(76, 175, 80, 0.8);
+}
+
+/* DataV组件样式覆盖 */
+.dv-border-box-content {
+  padding: 10px;
+}
+
+.dv-scroll-board .header {
+  color: #4CAF50 !important;
+  background: rgba(76, 175, 80, 0.1) !important;
+}
+
+.dv-scroll-board .row {
+  color: #fff !important;
+  background: rgba(255, 255, 255, 0.05) !important;
+}
+
+.dv-scroll-board .row:hover {
+  background: rgba(76, 175, 80, 0.2) !important;
 }

frontend/dashboard/src/views/Dashboard.vue

@@ -0,0 +1,605 @@
+<template>
+  <div class="dashboard">
+    <div class="dashboard-container">
+      <!-- 头部标题区域 -->
+      <div class="dashboard-header">
+        <div class="header-decoration left"></div>
+        <div class="header-title">
+          <h1>锡林郭勒盟安格斯牛养殖产业数据大屏</h1>
+        </div>
+        <div class="header-decoration right"></div>
+        
+        <div class="header-info">
+          <span>实时数据更新时间: {{ currentTime }}</span>
+        </div>
+      </div>
+
+      <!-- 主要内容区域 -->
+      <div class="dashboard-main">
+        <!-- 左侧区域 -->
+        <div class="left-section">
+          <!-- 关键指标 -->
+          <div class="metric-cards">
+            <div class="metric-card" v-for="(metric, index) in keyMetrics" :key="index">
+              <div class="metric-border">
+                <div class="metric-content">
+                  <div class="metric-title">{{ metric.title }}</div>
+                  <div class="metric-value">{{ metric.value }}</div>
+                  <div class="metric-change" :class="metric.change > 0 ? 'positive' : 'negative'">
+                    {{ metric.change > 0 ? '↑' : '↓' }} {{ Math.abs(metric.change) }}%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 区域分布图表 -->
+          <div class="chart-container">
+            <div class="chart-border">
+              <div class="chart-title">区域养殖分布</div>
+              <div ref="regionChart" class="chart-wrapper"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 中间区域 -->
+        <div class="center-section">
+          <!-- 核心数据 -->
+          <div class="center-top">
+            <div class="center-border">
+              <div class="center-content">
+                <div class="total-count">
+                  <div class="count-title">养殖总数</div>
+                  <div class="count-value">12,860</div>
+                  <div class="count-unit">头</div>
+                </div>
+                <div class="growth-rate">
+                  <div class="rate-title">同比增长</div>
+                  <div class="rate-value positive">+5.2%</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 中心图表 -->
+          <div class="center-middle">
+            <div class="center-chart-border">
+              <div class="chart-title">养殖规模趋势</div>
+              <div ref="breedingChart" class="chart-wrapper"></div>
+            </div>
+          </div>
+
+          <!-- 风险预警 -->
+          <div class="center-bottom">
+            <div class="center-border">
+              <div class="risk-content">
+                <div class="risk-title">风险预警</div>
+                <div class="risk-list">
+                  <div class="risk-item" v-for="(risk, index) in riskData" :key="index">
+                    <div class="risk-time">{{ risk.time }}</div>
+                    <div class="risk-type">{{ risk.type }}</div>
+                    <div class="risk-desc">{{ risk.desc }}</div>
+                    <div class="risk-status" :class="risk.status">{{ risk.status }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧区域 -->
+        <div class="right-section">
+          <!-- 交易数据 -->
+          <div class="chart-container">
+            <div class="chart-border">
+              <div class="chart-title">交易数据分析</div>
+              <div ref="transactionChart" class="chart-wrapper"></div>
+            </div>
+          </div>
+
+          <!-- 雷达图 -->
+          <div class="chart-container">
+            <div class="chart-border">
+              <div class="chart-title">综合风险评估</div>
+              <div ref="riskRadarChart" class="chart-wrapper"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部信息 -->
+      <div class="dashboard-footer">
+        <div class="footer-decoration left"></div>
+        <div class="footer-content">
+          <p>锡林郭勒盟安格斯牛养殖产业数字化管理平台</p>
+        </div>
+        <div class="footer-decoration right"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+export default {
+  name: 'Dashboard',
+  setup() {
+    const currentTime = ref(new Date().toLocaleString())
+    const breedingChart = ref(null)
+    const transactionChart = ref(null)
+    const regionChart = ref(null)
+    const riskRadarChart = ref(null)
+    
+    let breedingChartInstance = null
+    let transactionChartInstance = null
+    let regionChartInstance = null
+    let riskRadarChartInstance = null
+    let timer = null
+
+    // 关键指标数据
+    const keyMetrics = ref([
+      { title: '本月交易额', value: '¥860万', change: 5.7 },
+      { title: '平均体重', value: '420kg', change: 0.8 },
+      { title: '疫苗接种率', value: '98.6%', change: 2.1 },
+      { title: '风险事件', value: '12起', change: -15.2 }
+    ])
+
+    // 风险数据
+    const riskData = ref([
+      { time: '08-19 10:23', type: '健康问题', desc: '某牧场发现疑似疫情', status: '处理中' },
+      { time: '08-19 09:45', type: '环境异常', desc: '气温过高，注意防暑', status: '已处理' },
+      { time: '08-19 08:30', type: '交易风险', desc: '一笔交易存在争议', status: '处理中' },
+      { time: '08-18 16:15', type: '运输风险', desc: '运输路线受阻', status: '已处理' }
+    ])
+
+    // 初始化图表
+    const initCharts = () => {
+      // 养殖规模趋势图
+      breedingChartInstance = echarts.init(breedingChart.value)
+      breedingChartInstance.setOption({
+        title: { text: '' },
+        tooltip: { trigger: 'axis' },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月']
+        },
+        yAxis: { type: 'value' },
+        series: [{
+          data: [8200, 9100, 10500, 11200, 12100, 12860],
+          type: 'line',
+          smooth: true,
+          itemStyle: { color: '#4CAF50' },
+          areaStyle: { color: 'rgba(76, 175, 80, 0.3)' }
+        }]
+      })
+
+      // 交易数据分析图
+      transactionChartInstance = echarts.init(transactionChart.value)
+      transactionChartInstance.setOption({
+        tooltip: { trigger: 'item' },
+        legend: { bottom: '0' },
+        series: [{
+          type: 'pie',
+          radius: ['40%', '70%'],
+          data: [
+            { value: 335, name: '线上交易' },
+            { value: 310, name: '线下交易' },
+            { value: 234, name: '跨区域交易' },
+            { value: 135, name: '本地交易' }
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }]
+      })
+
+      // 区域分布图
+      regionChartInstance = echarts.init(regionChart.value)
+      regionChartInstance.setOption({
+        tooltip: { trigger: 'item' },
+        xAxis: {
+          type: 'category',
+          data: ['东乌旗', '西乌旗', '锡市', '镶黄旗', '正蓝旗', '太仆寺旗']
+        },
+        yAxis: { type: 'value' },
+        series: [{
+          data: [1200, 1800, 2400, 1600, 2100, 1900],
+          type: 'bar',
+          itemStyle: { color: '#388E3C' }
+        }]
+      })
+
+      // 风险雷达图
+      riskRadarChartInstance = echarts.init(riskRadarChart.value)
+      riskRadarChartInstance.setOption({
+        title: { text: '' },
+        tooltip: { trigger: 'item' },
+        radar: {
+          indicator: [
+            { name: '健康问题', max: 100 },
+            { name: '交易风险', max: 100 },
+            { name: '环境异常', max: 100 },
+            { name: '运输风险', max: 100 },
+            { name: '市场波动', max: 100 }
+          ]
+        },
+        series: [{
+          type: 'radar',
+          data: [{
+            value: [60, 30, 50, 20, 40],
+            name: '风险指数',
+            itemStyle: { color: '#FF9800' },
+            areaStyle: { color: 'rgba(255, 152, 0, 0.3)' }
+          }]
+        }]
+      })
+    }
+
+    // 更新时间
+    const updateTime = () => {
+      currentTime.value = new Date().toLocaleString()
+    }
+
+    // 窗口大小改变时重绘图表
+    const resizeCharts = () => {
+      if (breedingChartInstance) breedingChartInstance.resize()
+      if (transactionChartInstance) transactionChartInstance.resize()
+      if (regionChartInstance) regionChartInstance.resize()
+      if (riskRadarChartInstance) riskRadarChartInstance.resize()
+    }
+
+    onMounted(() => {
+      initCharts()
+      timer = setInterval(updateTime, 1000)
+      window.addEventListener('resize', resizeCharts)
+    })
+
+    onBeforeUnmount(() => {
+      clearInterval(timer)
+      window.removeEventListener('resize', resizeCharts)
+      if (breedingChartInstance) breedingChartInstance.dispose()
+      if (transactionChartInstance) transactionChartInstance.dispose()
+      if (regionChartInstance) regionChartInstance.dispose()
+      if (riskRadarChartInstance) riskRadarChartInstance.dispose()
+    })
+
+    return {
+      currentTime,
+      keyMetrics,
+      riskData,
+      breedingChart,
+      transactionChart,
+      regionChart,
+      riskRadarChart
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dashboard {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #0f2027, #20555d, #2c5364);
+  color: #fff;
+  overflow: hidden;
+}
+
+.dashboard-container {
+  position: relative;
+  height: 100vh;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.dashboard-header {
+  height: 100px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.header-decoration {
+  width: 200px;
+  height: 40px;
+  position: relative;
+}
+
+.header-decoration::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #4CAF50, transparent);
+}
+
+.header-title {
+  flex: 1;
+  text-align: center;
+}
+
+.header-title h1 {
+  font-size: 32px;
+  font-weight: bold;
+  margin: 0;
+  background: linear-gradient(to right, #4CAF50, #8BC34A);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-align: center;
+}
+
+.header-info {
+  font-size: 16px;
+  color: #ccc;
+}
+
+.dashboard-main {
+  display: flex;
+  height: calc(100% - 180px);
+  gap: 20px;
+}
+
+.left-section, .right-section {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.center-section {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.metric-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  height: 30%;
+}
+
+.metric-card {
+  height: 100%;
+}
+
+.metric-border {
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metric-content {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.metric-title {
+  font-size: 16px;
+  color: #ccc;
+  margin-bottom: 10px;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  color: #4CAF50;
+}
+
+.metric-change {
+  font-size: 14px;
+}
+
+.metric-change.positive {
+  color: #4CAF50;
+}
+
+.metric-change.negative {
+  color: #f44336;
+}
+
+.chart-container {
+  flex: 1;
+}
+
+.chart-border {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.center-top {
+  height: 20%;
+}
+
+.center-middle {
+  height: 50%;
+}
+
+.center-bottom {
+  height: 30%;
+}
+
+.center-border, .center-chart-border {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.center-content {
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.total-count {
+  text-align: center;
+}
+
+.count-title {
+  font-size: 18px;
+  color: #ccc;
+  margin-bottom: 10px;
+}
+
+.count-value {
+  font-size: 40px;
+  font-weight: bold;
+  color: #4CAF50;
+}
+
+.count-unit {
+  font-size: 16px;
+  color: #ccc;
+}
+
+.growth-rate {
+  text-align: center;
+}
+
+.rate-title {
+  font-size: 18px;
+  color: #ccc;
+  margin-bottom: 10px;
+}
+
+.rate-value {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.rate-value.positive {
+  color: #4CAF50;
+}
+
+.risk-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.risk-title {
+  font-size: 18px;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.risk-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.risk-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.risk-time {
+  width: 15%;
+  font-size: 14px;
+  color: #ccc;
+}
+
+.risk-type {
+  width: 20%;
+  font-size: 14px;
+}
+
+.risk-desc {
+  flex: 1;
+  font-size: 14px;
+  padding: 0 10px;
+}
+
+.risk-status {
+  width: 15%;
+  font-size: 14px;
+  text-align: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.risk-status.处理中 {
+  background: rgba(255, 152, 0, 0.2);
+  color: #FF9800;
+}
+
+.risk-status.已处理 {
+  background: rgba(76, 175, 80, 0.2);
+  color: #4CAF50;
+}
+
+.chart-title {
+  font-size: 18px;
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+.chart-wrapper {
+  height: calc(100% - 40px);
+}
+
+.dashboard-footer {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  margin-top: 20px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+}
+
+.footer-decoration {
+  width: 300px;
+  height: 5px;
+  position: relative;
+}
+
+.footer-decoration::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #4CAF50, transparent);
+}
+
+.footer-content {
+  text-align: center;
+  font-size: 18px;
+  color: #4CAF50;
+}
+</style>

frontend/dashboard/vite.config.js

@@ -20,9 +20,5 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/api/, '')
       }
     }
-  },
-  build: {
-    outDir: 'dist',
-    assetsDir: 'assets'
   }
 })

frontend/website/css/style.css

@@ -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;
   }
 }

frontend/website/index.html

@@ -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>

frontend/website/js/main.js

@@ -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);
+  }
 });