新增决策展示大屏

public/index.html

@@ -8,14 +8,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-    <!-- 高德地图API配置 -->
-    <script type="text/javascript">
-      window._AMapSecurityConfig = {
-        securityJsCode: "YOUR_SECURITY_CODE", // 请替换为真实的安全密钥（可选）
-      };
-    </script>
-    <!-- 请将YOUR_AMAP_KEY替换为您的高德地图API密钥 -->
-    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=YOUR_AMAP_KEY&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MapType"></script>
+    <!-- 高德地图API配置（由 vue-amap 统一管理） -->
 	  <style>
     html,
     body,

src/assets/styles/variables.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 250px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/main.js

@@ -65,6 +65,12 @@ VueAMap.initAMapApiLoader({
   uiVersion: '1.0.11'
 })
 
+// 添加全局调试信息
+console.log('VueAMap 初始化完成')
+window.addEventListener('load', () => {
+  console.log('页面完全加载，AMap状态:', typeof AMap)
+})
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

src/router/index.js

@@ -119,6 +119,13 @@ export const constantRoutes = [
         meta: { title: '农机监控汇总', activeMenu: '/base/machines' }
       }
     ]
+  },
+  {
+    path: '/agri-digital/dashboard',
+    component: () => import('@/views/agri-digital/dashboard'),
+    name: 'AgriDigitalDashboard',
+    hidden: true,
+    meta: { title: '农业数字化决策大屏' }
   }
 ]
 

src/views/agri-digital/dashboard.vue

@@ -0,0 +1,3552 @@
+<template>
+  <div class="agriculture-dashboard">
+    <!-- 优化的顶部导航 -->
+    <header class="page-header">
+      <div class="header-container">
+        <!-- 左侧：Logo + 标题 -->
+        <div class="header-left">
+          <div class="logo-container">
+            <img src="/logo.png" alt="爱智农logo" class="logo-img">
+          </div>
+          <div class="title-group">
+            <h1 class="main-title">爱智农·农智云图</h1>
+            <p class="sub-title">数智驱动 · 成果汇聚 · 决策支撑</p>
+          </div>
+        </div>
+        
+        <!-- 中间：占位 -->
+        <div class="header-center"></div>
+        
+        <!-- 右侧：天气 + 更新时间 -->
+        <div class="header-right">
+          <div class="info-panel">
+            <div class="weather-section">
+              <span class="weather-label">萧县</span>
+              <span class="weather-status">多云</span>
+              <span class="weather-temp">24°C</span>
+            </div>
+            <div class="divider"></div>
+            <div class="refresh-section">
+              <span class="refresh-label">数据更新</span>
+              <span class="refresh-time"><span class="refresh-timer">{{refreshTimer}}</span>秒前</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="main-container">
+      <!-- 第一部分：平台成效展示 -->
+      <section class="dashboard-section">
+        <div class="section-header">
+          <h2 class="section-title-new">农业数智化指数总览</h2>
+          <p class="section-description-new">多源数据汇聚，洞察农业发展趋势</p>
+          <div class="guide-line"></div>
+        </div>
+        
+        <div class="main-content">
+          <!-- 核心指标 -->
+          <div class="hero-stats">
+            <div class="data-cards-grid">
+              <div v-for="(card, index) in dataCards" :key="index" class="data-card">
+                <div class="data-card-label">{{card.label}}</div>
+                <div class="data-card-value">{{card.value}}{{card.suffix}}</div>
+                <div class="data-card-change">
+                  <span class="change-arrow">{{card.arrow}}</span>
+                  <span class="change-text">{{card.change}}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 农业数据指标卡片 -->
+          <div class="metrics-container">
+            <!-- 第一组：农业生产成效数据 -->
+            <div class="metrics-group">
+              <h3 class="metrics-group-title">农业生产成效</h3>
+              <div class="metrics-grid">
+                <div v-for="(metric, index) in productionMetrics" :key="index" class="metric-card fade-in-up">
+                  <div class="metric-icon" v-html="metric.icon"></div>
+                  <div class="metric-value-section">
+                    <div class="metric-number-group">
+                      <span class="metric-number">{{metric.number}}</span>
+                      <span class="metric-unit">{{metric.unit}}</span>
+                    </div>
+                    <div class="metric-name">{{metric.name}}</div>
+                  </div>
+                  <div class="metric-info">
+                    <div class="metric-arrow" v-html="metric.arrowIcon"></div>
+                    <span class="metric-info-text">{{metric.infoText}}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 第二组：效率与成本优化数据 -->
+            <div class="metrics-group">
+              <h3 class="metrics-group-title">效率与成本优化</h3>
+              <div class="metrics-grid">
+                <div v-for="(metric, index) in efficiencyMetrics" :key="index" class="metric-card fade-in-up">
+                  <div class="metric-icon" v-html="metric.icon"></div>
+                  <div class="metric-value-section">
+                    <div class="metric-number-group">
+                      <span class="metric-number percentage">{{metric.number}}</span>
+                      <span class="metric-unit">{{metric.unit}}</span>
+                    </div>
+                    <div class="metric-name">{{metric.name}}</div>
+                  </div>
+                  <div class="metric-info">
+                    <div class="metric-arrow" v-html="metric.arrowIcon"></div>
+                    <span class="metric-info-text">{{metric.infoText}}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 雷达图 -->
+          <div class="radar-chart-section">
+            <div class="radar-section-header">
+              <h3 class="radar-section-title">平台成效指标雷达图</h3>
+            </div>
+            
+            <div class="radar-unified-card">
+              <div class="radar-card-subtitle">各项指标对比情况一览</div>
+              
+              <div class="radar-chart-content">
+                <div id="platformEffectChart" class="radar-chart-container"></div>
+                <div class="radar-metrics-display">
+                  <div v-for="(item, index) in radarMetrics" :key="index" class="radar-metric-item">
+                    <span class="radar-metric-label">{{item.label}}</span>
+                    <span class="radar-metric-value">{{item.value}}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 第二部分：示范区管理展示 -->
+      <section class="dashboard-section">
+        <div class="section-header">
+          <h2 class="section-title-new">示范区管理展示</h2>
+          <p class="section-description-new">展示农业示范基地的分布地图与典型案例，体现科技农业示范引领作用</p>
+          <div class="guide-line"></div>
+        </div>
+        
+        <div class="main-content">
+          <div class="demo-showcase-container">
+            <div class="demo-content-grid" style="display: grid !important; grid-template-columns: 60% 40% !important; gap: 1.5rem !important; width: 100% !important;">
+              <!-- 左侧：示范区分布地图 -->
+              <div class="demo-map-card" style="width: 100% !important; min-width: 0 !important;">
+                <div class="demo-map-header">
+                  <h3 class="demo-card-title">示范区分布地图</h3>
+                </div>
+                <div class="demo-map-content">
+                  <!-- 高德地图容器 -->
+                  <div id="amapContainer" class="amap-container"></div>
+                  </div>
+                </div>
+                              <!-- 右侧：典型示范案例 -->
+              <div class="demo-cases-card" style="width: 100% !important; min-width: 0 !important;">
+              <div class="demo-cases-header">
+                <h3 class="demo-card-title">典型示范案例</h3>
+              </div>
+              <div class="demo-cases-content">
+                <div class="cases-swiper-container">
+                  <!-- 自定义导航按钮 -->
+                  <div class="custom-carousel-nav">
+                    <button class="nav-btn nav-btn-prev" @click="prevCase">
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </button>
+                    <button class="nav-btn nav-btn-next" @click="nextCase">
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </button>
+                  </div>
+                  
+                  <el-carousel 
+                    ref="casesCarousel"
+                    height="700px" 
+                    direction="horizontal" 
+                    :autoplay="autoplayEnabled" 
+                    :interval="5000"
+                    arrow="never"
+                    :pause-on-hover="true">
+                    <el-carousel-item v-for="(caseItem, index) in demoCases" :key="index">
+                      <div class="case-card">
+                        <!-- 基地基本信息 -->
+                        <div class="case-header">
+                          <h4 class="case-title">{{caseItem.title}}</h4>
+                          <div class="case-location">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M21 10C21 17 12 23 12 23S3 17 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10Z" stroke="#10B981" stroke-width="2"/>
+                              <circle cx="12" cy="10" r="3" stroke="#10B981" stroke-width="2"/>
+                            </svg>
+                            <span>{{caseItem.location}}</span>
+                          </div>
+                        </div>
+                        
+                        <!-- 设备统计 -->
+                        <div class="case-stats">
+                          <div v-for="(stat, idx) in caseItem.stats" :key="idx" class="stat-item">
+                            <div class="stat-icon" v-html="stat.icon"></div>
+                            <div class="stat-data">
+                              <div class="stat-number">{{stat.number}}</div>
+                              <div class="stat-label">{{stat.label}}</div>
+                            </div>
+                          </div>
+                        </div>
+                        
+                        <!-- 基地亮点 -->
+                        <div class="case-highlights">
+                          <div class="highlights-title">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M12 2L15.09 8.26L22 9L15.09 9.74L12 16L8.91 9.74L2 9L8.91 8.26L12 2Z" stroke="#10B981" stroke-width="2" fill="#10B981"/>
+                            </svg>
+                            <span>基地亮点</span>
+                          </div>
+                          <div class="highlights-content">
+                            {{ caseItem.highlights }}
+                          </div>
+                        </div>
+                        
+                        <!-- 核心技术方案 -->
+                        <div class="case-technologies">
+                          <div class="technologies-title">
+                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z" stroke="#10B981" stroke-width="2" fill="#10B981"/>
+                              </svg>
+                              <span>核心技术方案</span>
+                            </div>
+                          <div class="technologies-content">
+                            <ul class="technologies-list">
+                              <li v-for="(tech, techIdx) in caseItem.technologies" :key="techIdx" class="technology-item">
+                                {{ tech }}
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                        
+                        <!-- 阶段成果 -->
+                        <div class="case-results">
+                          <div class="results-title">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#D1D5DB" stroke-width="2"/>
+                            </svg>
+                            <span>阶段成果</span>
+                          </div>
+                          <div class="results-content">
+                            <ul class="results-list">
+                              <li v-for="(result, resultIdx) in caseItem.results" :key="resultIdx" class="result-item">
+                                {{ result }}
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </el-carousel-item>
+                  </el-carousel>
+
+              </div>
+            </div>
+          </div>
+              </div>
+
+
+          </div>
+        </div>
+      </section>
+
+      <!-- 第三部分：区域排行分析 -->
+      <section class="dashboard-section">
+        <div class="section-header">
+          <h2 class="section-title-new">区域排行分析</h2>
+          <p class="section-description-new">按种植作物产量、农机覆盖率、设备覆盖率等维度进行排行分析，展现区域发展差异</p>
+          <div class="guide-line"></div>
+        </div>
+        
+        <div class="main-content">
+          <div class="chart-grid">
+          <!-- 农作物产量排行 -->
+          <div class="modern-card chart-card">
+            <div class="flex justify-between items-center mb-4">
+              <h3 class="chart-title">农作物产量排行</h3>
+              <div class="switch-tabs">
+                <div 
+                  v-for="crop in cropTypes" 
+                  :key="crop.key"
+                  :class="['switch-tab', { active: activeCrop === crop.key }]" 
+                  @click="switchCrop(crop.key)">
+                  {{crop.name}}
+                </div>
+              </div>
+            </div>
+            <div id="cropYieldChart" class="chart-container"></div>
+          </div>
+
+          <!-- 农机覆盖率排行 -->
+          <div class="modern-card chart-card">
+            <h3 class="chart-title">农机覆盖率排行</h3>
+            <div class="ranking-list">
+              <div v-for="(item, index) in machineRanking" :key="index" class="ranking-item">
+                <div :class="['ranking-number', getRankingClass(index)]">{{index + 1}}</div>
+                <div class="ranking-info">
+                  <div class="ranking-name">{{item.name}}</div>
+                  <div class="ranking-detail">{{item.detail}}</div>
+                </div>
+                <div class="ranking-value">
+                  <div class="ranking-score">{{item.score}}</div>
+                  <div class="ranking-unit">{{item.unit}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 设备覆盖率排行 -->
+          <div class="modern-card chart-card">
+            <h3 class="chart-title">IoT设备覆盖率排行</h3>
+            <div id="deviceCoverageChart" class="chart-container"></div>
+          </div>
+
+          <!-- 数字化作业占比 -->
+          <div class="modern-card chart-card">
+            <div class="flex justify-between items-center mb-4">
+              <h3 class="chart-title">数字化作业占比</h3>
+              <div class="switch-tabs">
+                <div 
+                  v-for="period in timePeriods" 
+                  :key="period.key"
+                  :class="['switch-tab', { active: activePeriod === period.key }]" 
+                  @click="switchPeriod(period.key)">
+                  {{period.name}}
+                </div>
+              </div>
+            </div>
+            <div id="digitalWorkChart" class="chart-container"></div>
+          </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- 页脚 -->
+    <footer class="page-footer">
+      <div class="main-container">
+        <div class="footer-content">
+          <div class="footer-left">
+            <span>Copyright © 2023-2025 All rights reserved.</span>
+          </div>
+          <div class="footer-center">
+            <span>皖ICP备20230431号-8</span>
+            <span class="separator">|</span>
+            <span>数据更新时间: {{currentTime}}</span>
+          </div>
+          <div class="footer-right">
+            <span>Powered by 爱智农智慧农业平台 本产品与合和智行及其代理商均无任何关系。</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'AgricultureDashboard',
+  data() {
+    return {
+      refreshTimer: 20,
+      currentTime: '',
+      activeCrop: 'wheat',
+      activePeriod: 'year',
+      autoplayEnabled: true,
+      
+      // 高德地图相关
+      amapInstance: null,
+      amapMarkers: [],
+      
+      // 图表实例
+      digitalChart: null,
+      
+      // 示范区地图数据
+      demoMapData: [
+        {
+          name: '萧县龙河智慧葡萄园',
+          location: '萧县 · 龙河镇',
+          position: [116.944469, 34.215942], // 萧县龙河镇坐标
+          area: '680亩',
+          devices: '32台设备',
+          onlineRate: '98.5%',
+          crops: '阳光玫瑰、葡萄病害AI识别',
+          status: 'active',
+          highlights: '集成智能滴灌与精准施肥技术，打造数字化葡萄种植示范标杆',
+          technologies: ['智能滴灌控制系统', '葡萄病害AI识别'],
+          results: ['葡萄品质提升42%', '用水量减少35%', '病害率下降65%']
+        },
+        {
+          name: '淮北相山生态葡萄园',
+          location: '淮北市 · 相山区',
+          position: [116.798576, 33.971707], // 淮北相山区坐标
+          area: '590亩',
+          devices: '28台设备',
+          onlineRate: '96.8%',
+          crops: '有机葡萄种植、生态友好型',
+          status: 'active',
+          highlights: '专注有机葡萄种植，构建生态友好型现代葡萄产业体系',
+          technologies: ['土壤养分监测', '气象环境预警'],
+          results: ['有机认证率100%', '产值增长46%', '示范带动2万亩']
+        },
+        {
+          name: '徐州贾汪精品葡萄园',
+          location: '徐州市 · 贾汪区',
+          position: [117.455654, 34.440046], // 徐州贾汪区坐标
+          area: '720亩',
+          devices: '38台设备',
+          onlineRate: '95.2%',
+          crops: '智能化管理、无人机技术',
+          status: 'planned',
+          highlights: '全程智能化管理模式，整合无人机技术与智能大棚系统',
+          technologies: ['无人机植保作业', '智能大棚控制'],
+          results: ['机械化率95%', '葡萄糖度提升25%', '采摘效率增长38%']
+        }
+      ],
+      
+      // 数据卡片
+      dataCards: [
+        { label: '数字化覆盖率', value: '68.3', suffix: '%', arrow: '↗', change: '+12.3% 较去年' },
+        { label: '覆盖农户数', value: '5,240', suffix: '', arrow: '↗', change: '+8.7% 较去年' },
+        { label: '覆盖农田面积', value: '13.2', suffix: ' 万亩', arrow: '↗', change: '+15.2% 较去年' },
+        { label: '接入农机数量', value: '182', suffix: '', arrow: '↗', change: '+23.1% 较去年' },
+        { label: '设备在线率', value: '91.7', suffix: '%', arrow: '↗', change: '+2.1% 较去年' }
+      ],
+      
+              // 生产成效指标
+        productionMetrics: [
+          {
+            icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="7" height="7" stroke="#28B86F" stroke-width="2" fill="none" stroke-linejoin="round"/><rect x="14" y="3" width="7" height="7" stroke="#28B86F" stroke-width="2" fill="none" stroke-linejoin="round"/><rect x="14" y="14" width="7" height="7" stroke="#28B86F" stroke-width="2" fill="none" stroke-linejoin="round"/><rect x="3" y="14" width="7" height="7" stroke="#28B86F" stroke-width="2" fill="none" stroke-linejoin="round"/></svg>',
+            number: '458.7',
+            unit: '万亩次',
+            name: '作业总面积',
+            arrowIcon: '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 3L8 13M8 3L4 7M8 3L12 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+            infoText: '较去年同期 +18.5%'
+          },
+          {
+            icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" stroke="#28B86F" stroke-width="2" fill="rgba(40, 184, 111, 0.1)" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" stroke="#28B86F" stroke-width="2" fill="none"/></svg>',
+            number: '1,247',
+            unit: '万立方米',
+            name: '累计节水',
+            arrowIcon: '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 3L8 13M8 3L4 7M8 3L12 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+            infoText: '节水率 32.6%'
+          },
+          {
+            icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" stroke="#28B86F" stroke-width="2" fill="none" stroke-linejoin="round"/><path d="M5 3v4" stroke="#28B86F" stroke-width="2" stroke-linecap="round"/><path d="M19 17v4" stroke="#28B86F" stroke-width="2" stroke-linecap="round"/><path d="M3 5h4" stroke="#28B86F" stroke-width="2" stroke-linecap="round"/><path d="M17 19h4" stroke="#28B86F" stroke-width="2" stroke-linecap="round"/></svg>',
+            number: '3,456',
+            unit: '吨',
+            name: '累计节肥',
+            arrowIcon: '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 3L8 13M8 3L4 7M8 3L12 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+            infoText: '节肥率 28.3%'
+          }
+        ],
+      
+              // 效率成本指标
+        efficiencyMetrics: [
+          {
+            icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="#28B86F" stroke-width="2" fill="rgba(40, 184, 111, 0.1)" stroke-linejoin="round"/></svg>',
+            number: '42.3',
+            unit: '%',
+            name: '作业效率提升',
+            arrowIcon: '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 3L8 13M8 3L4 7M8 3L12 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+            infoText: '较去年同期提升 15.6%'
+          },
+          {
+            icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" stroke="#28B86F" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+            number: '26.8',
+            unit: '%',
+            name: '作业成本降低',
+            arrowIcon: '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 13L8 3M8 13L4 9M8 13L12 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+            infoText: '每亩节省成本 45.2 元'
+          },
+          {
+            icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" stroke="#28B86F" stroke-width="2" fill="rgba(40, 184, 111, 0.1)" stroke-linejoin="round"/></svg>',
+            number: '31.2',
+            unit: '%',
+            name: '燃料消耗减少',
+            arrowIcon: '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 13L8 3M8 13L4 9M8 13L12 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+            infoText: '累计节约燃油 2,146 升'
+          }
+        ],
+      
+      // 雷达图数据
+      radarMetrics: [
+        { label: '农机数字化率', value: '89.5%' },
+        { label: '农事智能化率', value: '76.3%' },
+        { label: '作业管理合规率', value: '94.2%' },
+        { label: '作业过程可视化率', value: '82.7%' },
+        { label: '农机利用率', value: '88.9%' }
+      ],
+      
+      // 示范案例
+      demoCases: [
+        {
+          title: '萧县龙河智慧葡萄园',
+          location: '萧县 · 龙河镇',
+          highlights: '集成智能滴灌与精准施肥技术，打造数字化葡萄种植示范标杆。',
+          stats: [
+            {
+              icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12V8a8 8 0 0 1 16 0v4M6 12h12l-1 7H7l-1-7Z" stroke="#10B981" stroke-width="2"/></svg>',
+              number: '32',
+              label: '智能农机'
+            },
+            {
+              icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3" stroke="#10B981" stroke-width="2"/><path d="M12 1v6m0 6v6m11-7h-6m-6 0H1" stroke="#10B981" stroke-width="2"/></svg>',
+              number: '218',
+              label: 'IoT设备'
+            }
+          ],
+          technologies: ['智能滴灌控制系统', '葡萄病害AI识别'],
+          results: ['葡萄品质提升42%', '用水量减少35%', '病害率下降65%']
+        },
+        {
+          title: '淮北相山生态葡萄园',
+          location: '淮北市 · 相山区',
+          highlights: '专注有机葡萄种植，构建生态友好型现代葡萄产业体系。',
+          stats: [
+            {
+              icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12V8a8 8 0 0 1 16 0v4M6 12h12l-1 7H7l-1-7Z" stroke="#10B981" stroke-width="2"/></svg>',
+              number: '28',
+              label: '智能农机'
+            },
+            {
+              icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3" stroke="#10B981" stroke-width="2"/><path d="M12 1v6m0 6v6m11-7h-6m-6 0H1" stroke="#10B981" stroke-width="2"/></svg>',
+              number: '186',
+              label: 'IoT设备'
+            }
+          ],
+          technologies: ['土壤养分监测', '气象环境预警'],
+          results: ['有机认证率100%', '产值增长46%', '示范带动2万亩']
+        },
+        {
+          title: '徐州贾汪精品葡萄园',
+          location: '徐州市 · 贾汪区',
+          highlights: '全程智能化管理模式，整合无人机技术与智能大棚系统。',
+          stats: [
+            {
+              icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12V8a8 8 0 0 1 16 0v4M6 12h12l-1 7H7l-1-7Z" stroke="#10B981" stroke-width="2"/></svg>',
+              number: '38',
+              label: '智能农机'
+            },
+            {
+              icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3" stroke="#10B981" stroke-width="2"/><path d="M12 1v6m0 6v6m11-7h-6m-6 0H1" stroke="#10B981" stroke-width="2"/></svg>',
+              number: '245',
+              label: 'IoT设备'
+            }
+          ],
+          technologies: ['无人机植保作业', '智能大棚控制'],
+          results: ['机械化率95%', '葡萄糖度提升25%', '采摘效率增长38%']
+        }
+      ],
+      
+      // 作物类型
+      cropTypes: [
+        { key: 'wheat', name: '小麦' },
+        { key: 'rice', name: '水稻' },
+        { key: 'corn', name: '玉米' }
+      ],
+      
+      // 时间周期
+      timePeriods: [
+        { key: 'year', name: '年度' },
+        { key: 'quarter', name: '季度' }
+      ],
+      
+      // 农机覆盖率排行
+      machineRanking: [
+        { name: '萧县', detail: '每千亩农机数: 15.8台', score: '98.5%', unit: '作业覆盖率' },
+        { name: '砀山县', detail: '每千亩农机数: 14.2台', score: '96.8%', unit: '作业覆盖率' },
+        { name: '埇桥区', detail: '每千亩农机数: 13.7台', score: '94.2%', unit: '作业覆盖率' },
+        { name: '灵璧县', detail: '每千亩农机数: 12.3台', score: '91.5%', unit: '作业覆盖率' },
+        { name: '泗县', detail: '每千亩农机数: 11.8台', score: '89.7%', unit: '作业覆盖率' }
+      ]
+    }
+  },
+  
+  mounted() {
+    this.updateCurrentTime()
+    this.initTimers()
+    this.initCharts()
+    this.initNumberAnimations()
+    
+    // 初始化高德地图 - 延迟执行确保 VueAMap 完全加载
+    console.log('页面mounted，准备初始化地图...')
+    setTimeout(() => {
+      console.log('开始尝试初始化地图...')
+      this.initAMap()
+    }, 3000)
+    
+    // 确保页面可以正常滚动
+    document.body.style.overflow = 'auto'
+    document.body.style.overflowX = 'hidden'
+    document.body.style.margin = '0'
+    document.body.style.padding = '0'
+  },
+  
+  beforeDestroy() {
+    this.clearTimers()
+    
+    // 清理高德地图资源
+    if (this.amapInstance) {
+      if (this.amapMarkers.length > 0) {
+        this.amapInstance.remove(this.amapMarkers)
+      }
+      this.amapInstance.destroy()
+    }
+    
+    // 清理图表实例
+    if (this.digitalChart) {
+      this.digitalChart.dispose()
+    }
+    
+    // 恢复默认样式
+    document.body.style.overflow = ''
+    document.body.style.overflowX = ''
+    document.body.style.margin = ''
+    document.body.style.padding = ''
+  },
+  
+  methods: {
+    // 初始化定时器
+    initTimers() {
+      this.refreshInterval = setInterval(() => {
+        this.refreshTimer++
+      }, 1000)
+      
+      this.resetInterval = setInterval(() => {
+        this.refreshTimer = 0
+      }, 300000) // 5分钟重置
+      
+      // 每分钟更新一次时间
+      this.timeUpdateInterval = setInterval(() => {
+        this.updateCurrentTime()
+      }, 60000)
+    },
+    
+    // 更新当前时间
+    updateCurrentTime() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}`
+    },
+    
+    // 清除定时器
+    clearTimers() {
+      if (this.refreshInterval) {
+        clearInterval(this.refreshInterval)
+      }
+      if (this.resetInterval) {
+        clearInterval(this.resetInterval)
+      }
+      if (this.timeUpdateInterval) {
+        clearInterval(this.timeUpdateInterval)
+      }
+    },
+    
+    // 获取排名样式类
+    getRankingClass(index) {
+      if (index === 0) return 'top1'
+      if (index === 1) return 'top2'
+      if (index === 2) return 'top3'
+      return 'other'
+    },
+    
+    // 切换作物类型
+    switchCrop(cropType) {
+      this.activeCrop = cropType
+      this.updateCropChart(cropType)
+    },
+    
+    // 切换时间周期
+    switchPeriod(period) {
+      this.activePeriod = period
+      this.updateDigitalChart(period)
+    },
+    
+
+    
+    // 查看更多案例
+    handleMoreCases() {
+      this.$message.info('查看更多案例功能待实现')
+    },
+    
+    // 轮播控制方法
+    prevCase() {
+      if (this.$refs.casesCarousel) {
+        this.$refs.casesCarousel.prev()
+      }
+    },
+    
+    nextCase() {
+      if (this.$refs.casesCarousel) {
+        this.$refs.casesCarousel.next()
+      }
+    },
+    
+    // 初始化图表
+    initCharts() {
+      this.$nextTick(() => {
+        this.initRadarChart()
+        // this.initMapChart() - 已移除ECharts地图，使用高德地图
+        this.initCropChart()
+        this.initDeviceChart()
+        this.initDigitalChart()
+      })
+    },
+    
+    // 初始化数字动画
+    initNumberAnimations() {
+      this.$nextTick(() => {
+        // 数据卡片数字动画
+        this.dataCards.forEach((card, index) => {
+          const element = document.querySelector(`.data-card:nth-child(${index + 1}) .data-card-value`)
+          if (element) {
+            this.animateNumber(element, parseFloat(card.value.replace(/,/g, '')), card.suffix)
+          }
+        })
+        
+        // 农业指标数字动画
+        this.productionMetrics.forEach((metric, index) => {
+          const element = document.querySelector(`.metrics-group:nth-child(1) .metric-card:nth-child(${index + 1}) .metric-number`)
+          if (element) {
+            this.animateNumber(element, parseFloat(metric.number.replace(/,/g, '')), '')
+          }
+        })
+        
+        this.efficiencyMetrics.forEach((metric, index) => {
+          const element = document.querySelector(`.metrics-group:nth-child(2) .metric-card:nth-child(${index + 1}) .metric-number`)
+          if (element) {
+            this.animateNumber(element, parseFloat(metric.number.replace(/,/g, '')), '')
+          }
+        })
+      })
+    },
+    
+    // 数字动画方法
+    animateNumber(element, target, suffix = '') {
+      if (!element) return
+      
+      let step = 0
+      const timer = setInterval(() => {
+        step++
+        const current = (target / 50) * step
+        
+        let value
+        if (target >= 1000) {
+          value = Math.floor(current).toLocaleString('zh-CN')
+        } else if (target >= 100) {
+          value = Math.floor(current).toString()
+        } else {
+          value = current.toFixed(1)
+        }
+        
+        element.textContent = value + suffix
+        
+        if (step >= 50) {
+          clearInterval(timer)
+          if (target >= 1000) {
+            element.textContent = target.toLocaleString('zh-CN') + suffix
+          } else if (target >= 100) {
+            element.textContent = target.toString() + suffix
+          } else {
+            element.textContent = target.toFixed(1) + suffix
+          }
+        }
+      }, 30)
+    },
+    
+    // 初始化雷达图
+    initRadarChart() {
+      if (!echarts || !document.getElementById('platformEffectChart')) return
+      
+      const chart = echarts.init(document.getElementById('platformEffectChart'))
+      chart.setOption({
+        backgroundColor: '#ffffff',
+        tooltip: {
+          backgroundColor: 'rgba(59, 180, 74, 0.95)',
+          borderColor: '#3BB44A',
+          borderWidth: 2,
+          textStyle: { 
+            color: '#fff',
+            fontSize: 13,
+            fontWeight: 500
+          }
+        },
+        radar: {
+          indicator: [
+            { name: '农机数字化率', max: 100 },
+            { name: '农事智能化率', max: 100 },
+            { name: '作业管理合规率', max: 100 },
+            { name: '作业过程可视化率', max: 100 },
+            { name: '农机利用率', max: 100 }
+          ],
+          shape: 'polygon',
+          splitNumber: 5,
+          radius: '70%',
+          axisName: {
+              color: '#374151',
+              fontSize: 13,
+              fontWeight: 600
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#dcfce7',
+              width: 2
+            }
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(240, 253, 244, 0.4)', 'rgba(255, 255, 255, 0.8)']
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#4ECB73',
+              width: 2
+            }
+          }
+        },
+        series: [{
+          type: 'radar',
+          data: [{
+            value: [89.5, 76.3, 94.2, 82.7, 88.9],
+            name: '当前指标',
+            areaStyle: {
+              color: 'rgba(59, 180, 74, 0.15)'
+            },
+            lineStyle: {
+              color: '#3BB44A',
+              width: 4
+            },
+            symbol: 'circle',
+            symbolSize: 12,
+            itemStyle: {
+              color: '#3BB44A',
+              borderColor: '#ffffff',
+              borderWidth: 3
+            }
+          }]
+        }]
+      })
+    },
+    
+    // 初始化高德地图
+    initAMap() {
+      // 显示加载状态
+      this.showMapLoadingStatus()
+      
+      // 等待 VueAMap 初始化完成
+      this.$nextTick(() => {
+        // 检查容器是否存在
+        const container = document.getElementById('amapContainer')
+        if (!container) {
+          console.error('地图容器未找到')
+          return
+        }
+
+        // 等待高德地图API加载完成
+        setTimeout(() => {
+          console.log('检查AMap全局对象:', typeof AMap)
+          console.log('AMap对象:', AMap)
+          
+          // 检查高德地图API是否加载
+          if (typeof AMap === 'undefined') {
+            console.warn('高德地图API未加载，等待更长时间...')
+            setTimeout(() => this.initAMap(), 2000)
+            return
+          }
+
+          try {
+            console.log('开始初始化高德地图...')
+            
+            // 清空容器
+            container.innerHTML = ''
+            
+            // 初始化高德地图
+            this.amapInstance = new AMap.Map('amapContainer', {
+              zoom: 9,
+              center: [116.944469, 34.215942], // 以萧县为中心
+              mapStyle: 'amap://styles/whitesmoke',
+              viewMode: '2D',
+              resizeEnable: true
+            })
+
+            // 等待地图加载完成
+            this.amapInstance.on('complete', () => {
+              console.log('示范区地图加载完成')
+              
+              // 添加地图控件
+              this.amapInstance.addControl(new AMap.Scale())
+              this.amapInstance.addControl(new AMap.ToolBar({
+                position: 'RB'
+              }))
+              
+              // 确保地图正确填充容器
+              setTimeout(() => {
+                this.amapInstance.getSize()
+                this.amapInstance.setFitView()
+              }, 100)
+              
+              // 添加示范区标记
+              this.addDemoMarkers()
+            })
+
+            // 添加错误处理
+            this.amapInstance.on('error', (error) => {
+              console.error('地图加载错误:', error)
+            })
+            
+          } catch (error) {
+            console.error('地图初始化失败:', error)
+          }
+        }, 1000) // 等待1秒让VueAMap完全初始化
+      })
+    },
+
+    // 添加示范区标记
+    addDemoMarkers() {
+      // 清除之前的标记
+      if (this.amapMarkers.length > 0) {
+        this.amapInstance.remove(this.amapMarkers)
+        this.amapMarkers = []
+      }
+
+      this.demoMapData.forEach((demo, index) => {
+        // 创建标记
+        const marker = new AMap.Marker({
+          position: demo.position,
+          title: demo.name
+        })
+
+        // 创建自定义HTML标记元素
+        const markerContent = document.createElement('div')
+        markerContent.style.cssText = `
+          width: 24px;
+          height: 24px;
+          background: ${demo.status === 'active' ? '#3BB44A' : '#f59e0b'};
+          border: 3px solid white;
+          border-radius: 50%;
+          box-shadow: 0 3px 8px rgba(0,0,0,0.3);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: all 0.3s ease;
+        `
+        
+        // 添加田地图标
+        const fieldIcon = document.createElement('div')
+        fieldIcon.style.cssText = `
+          width: 10px;
+          height: 10px;
+          background: white;
+          border-radius: 2px;
+          opacity: 0.9;
+        `
+        markerContent.appendChild(fieldIcon)
+        
+        marker.setContent(markerContent)
+        marker.setOffset(new AMap.Pixel(-12, -12))
+
+        // 创建信息窗体
+        const infoWindow = new AMap.InfoWindow({
+          isCustom: true,
+          content: this.createInfoWindowContent(demo),
+          offset: new AMap.Pixel(0, -5)
+        })
+
+        // 鼠标悬浮事件
+        markerContent.addEventListener('mouseenter', () => {
+          markerContent.style.transform = 'scale(1.2)'
+          markerContent.style.boxShadow = '0 5px 15px rgba(0,0,0,0.4)'
+          infoWindow.open(this.amapInstance, marker.getPosition())
+        })
+
+        markerContent.addEventListener('mouseleave', () => {
+          markerContent.style.transform = 'scale(1)'
+          markerContent.style.boxShadow = '0 3px 8px rgba(0,0,0,0.3)'
+          setTimeout(() => {
+            infoWindow.close()
+          }, 300)
+        })
+
+        this.amapMarkers.push(marker)
+      })
+
+      // 添加标记到地图
+      this.amapInstance.add(this.amapMarkers)
+
+      // 自适应显示所有示范区
+      const bounds = new AMap.Bounds()
+      this.demoMapData.forEach(demo => {
+        bounds.extend(demo.position)
+      })
+      this.amapInstance.setBounds(bounds, false, [50, 50, 50, 50])
+    },
+
+    // 创建信息窗体内容
+    createInfoWindowContent(demo) {
+      const statusColor = demo.status === 'active' ? '#3BB44A' : '#f59e0b'
+      const statusBg = demo.status === 'active' ? '#ecfdf5' : '#fefbf3'
+      const statusText = demo.status === 'active' ? '运行中' : '规划中'
+      
+      return `
+        <div style="
+          padding: 0; 
+          margin: 0; 
+          min-width: 320px; 
+          position: relative;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        ">
+          <!-- 主悬浮框 -->
+          <div style="
+            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+            border-radius: 16px;
+            box-shadow: 0 12px 32px rgba(0,0,0,0.15);
+            border: 1px solid #e2e8f0;
+            overflow: hidden;
+            position: relative;
+            margin-bottom: 10px;
+          ">
+            <div style="
+              background: linear-gradient(135deg, ${statusColor} 0%, ${statusColor}dd 100%);
+              padding: 18px 22px;
+              color: white;
+              position: relative;
+            ">
+              <div style="
+                position: absolute;
+                top: -12px;
+                right: -12px;
+                width: 48px;
+                height: 48px;
+                background: rgba(255,255,255,0.1);
+                border-radius: 50%;
+              "></div>
+              <h4 style="
+                margin: 0; 
+                font-size: 18px; 
+                font-weight: 600;
+                text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+                margin-bottom: 4px;
+              ">${demo.name}</h4>
+              <div style="
+                font-size: 13px; 
+                opacity: 0.9;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+              ">
+                <span>${demo.location}</span>
+                <span style="
+                  background: rgba(255,255,255,0.2);
+                  padding: 2px 8px;
+                  border-radius: 12px;
+                  font-size: 11px;
+                  font-weight: 500;
+                ">${statusText}</span>
+              </div>
+            </div>
+            <div style="padding: 20px;">
+              <div style="
+                color: #475569; 
+                font-size: 14px; 
+                line-height: 1.5;
+                margin-bottom: 16px;
+              ">${demo.highlights}</div>
+              
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;">
+                <div style="text-align: center; padding: 12px; background: #f1f5f9; border-radius: 10px;">
+                  <div style="font-size: 18px; font-weight: 700; color: #1e293b; margin-bottom: 4px;">${demo.area}</div>
+                  <div style="font-size: 11px; color: #64748b;">种植面积</div>
+                </div>
+                <div style="text-align: center; padding: 12px; background: ${statusBg}; border-radius: 10px;">
+                  <div style="font-size: 18px; font-weight: 700; color: ${statusColor}; margin-bottom: 4px;">${demo.onlineRate}</div>
+                  <div style="font-size: 11px; color: #64748b;">设备在线率</div>
+                </div>
+              </div>
+              
+              <div style="margin-bottom: 12px;">
+                <div style="font-size: 12px; color: #64748b; margin-bottom: 8px; font-weight: 500;">核心技术</div>
+                <div style="display: flex; flex-wrap: wrap; gap: 6px;">
+                  ${demo.technologies.map(tech => `
+                    <span style="
+                      background: #e0f2fe;
+                      color: #0369a1;
+                      padding: 4px 8px;
+                      border-radius: 6px;
+                      font-size: 11px;
+                      font-weight: 500;
+                    ">${tech}</span>
+                  `).join('')}
+                </div>
+              </div>
+              
+              <div>
+                <div style="font-size: 12px; color: #64748b; margin-bottom: 8px; font-weight: 500;">主要成效</div>
+                <div style="display: flex; flex-wrap: wrap; gap: 6px;">
+                  ${demo.results.map(result => `
+                    <span style="
+                      background: #f0fdf4;
+                      color: #166534;
+                      padding: 4px 8px;
+                      border-radius: 6px;
+                      font-size: 11px;
+                      font-weight: 500;
+                    ">${result}</span>
+                  `).join('')}
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 自定义三角箭头 -->
+          <div style="
+            position: absolute;
+            bottom: -14px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 14px solid transparent;
+            border-right: 14px solid transparent;
+            border-top: 14px solid #cbd5e1;
+            z-index: 1;
+            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+          "></div>
+          <div style="
+            position: absolute;
+            bottom: -12px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 12px solid transparent;
+            border-right: 12px solid transparent;
+            border-top: 12px solid #ffffff;
+            z-index: 2;
+          "></div>
+        </div>
+      `
+    },
+
+    // 显示地图加载状态
+    showMapLoadingStatus() {
+      const mapElement = document.getElementById('amapContainer')
+      if (!mapElement) return
+      
+      mapElement.innerHTML = `
+        <div style="
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          background: #f8fafc;
+          color: #666;
+          text-align: center;
+          padding: 20px;
+        ">
+          <div style="
+            width: 40px;
+            height: 40px;
+            border: 4px solid #e5e7eb;
+            border-top: 4px solid #3BB44A;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 16px;
+          "></div>
+          <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">正在加载高德地图...</div>
+          <div style="font-size: 14px; color: #9ca3af;">请稍候，地图资源加载中</div>
+        </div>
+        <style>
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        </style>
+      `
+    },
+    
+    // ECharts地图已移除，使用高德地图替代
+    initMapChart() {
+      // 不再使用ECharts地图，已替换为高德地图
+      console.log('ECharts地图功能已禁用，使用高德地图')
+    },
+    
+    // 初始化作物产量图
+    initCropChart() {
+      if (!echarts || !document.getElementById('cropYieldChart')) return
+      
+      this.cropChart = echarts.init(document.getElementById('cropYieldChart'))
+      this.updateCropChart('wheat')
+    },
+    
+    // 更新作物产量图
+    updateCropChart(cropType) {
+      if (!this.cropChart) return
+      
+      const cropData = {
+        wheat: {
+          categories: ['萧县', '砀山县', '埇桥区', '灵璧县', '泗县', '濉溪县'],
+          values: [15800, 14200, 13100, 12300, 11500, 10800]
+        },
+        rice: {
+          categories: ['埇桥区', '萧县', '灵璧县', '砀山县', '泗县', '濉溪县'],
+          values: [8900, 8200, 7800, 7300, 6800, 6200]
+        },
+        corn: {
+          categories: ['砀山县', '萧县', '埇桥区', '灵璧县', '濉溪县', '泗县'],
+          values: [22300, 20800, 19500, 18200, 16900, 15600]
+        }
+      }
+      
+      const data = cropData[cropType]
+      this.cropChart.setOption({
+        backgroundColor: '#ffffff',
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.8)',
+          borderColor: '#16a34a',
+          textStyle: { color: '#fff' }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: data.categories,
+          axisLine: { lineStyle: { color: '#e5e7eb' } },
+          axisLabel: { 
+            color: '#6b7280',
+            interval: 0,
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { lineStyle: { color: '#e5e7eb' } },
+          axisLabel: { color: '#6b7280' },
+          splitLine: { lineStyle: { color: '#f3f4f6' } }
+        },
+        series: [{
+          type: 'bar',
+          data: data.values,
+          itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#22c55e' },
+              { offset: 1, color: '#16a34a' }
+            ]),
+            borderRadius: [6, 6, 0, 0]
+          }
+        }]
+      })
+    },
+    
+    // 初始化设备覆盖率图
+    initDeviceChart() {
+      if (!echarts || !document.getElementById('deviceCoverageChart')) return
+      
+      const chart = echarts.init(document.getElementById('deviceCoverageChart'))
+      chart.setOption({
+        backgroundColor: '#ffffff',
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.8)',
+          borderColor: '#16a34a',
+          textStyle: { color: '#fff' }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['萧县', '砀山县', '埇桥区', '灵璧县', '泗县', '濉溪县'],
+          axisLine: { lineStyle: { color: '#e5e7eb' } },
+          axisLabel: { 
+            color: '#6b7280',
+            interval: 0,
+            rotate: 45
+          }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '设备数量(个/千亩)',
+            position: 'left',
+            axisLine: { lineStyle: { color: '#e5e7eb' } },
+            axisLabel: { color: '#6b7280' },
+            splitLine: { lineStyle: { color: '#f3f4f6' } }
+          },
+          {
+            type: 'value',
+            name: '在线率(%)',
+            position: 'right',
+            axisLine: { lineStyle: { color: '#e5e7eb' } },
+            axisLabel: { color: '#6b7280' }
+          }
+        ],
+        series: [
+          {
+            name: '设备密度',
+            type: 'bar',
+            yAxisIndex: 0,
+            data: [23.5, 21.8, 19.2, 18.6, 17.3, 16.1],
+            itemStyle: {
+                              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#22c55e' },
+                { offset: 1, color: '#16a34a' }
+              ]),
+              borderRadius: [4, 4, 0, 0]
+            }
+          },
+          {
+            name: '在线率',
+            type: 'line',
+            yAxisIndex: 1,
+            data: [98.5, 97.2, 96.8, 95.3, 94.7, 93.2],
+            lineStyle: { color: '#f59e0b', width: 3 },
+            itemStyle: { color: '#f59e0b' },
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 6
+          }
+        ]
+      })
+    },
+    
+    // 初始化数字化作业图
+    initDigitalChart() {
+      if (!echarts || !document.getElementById('digitalWorkChart')) return
+      
+      this.digitalChart = echarts.init(document.getElementById('digitalWorkChart'))
+      this.updateDigitalChart('year')
+    },
+    
+    // 更新数字化作业图
+    updateDigitalChart(period) {
+      if (!this.digitalChart) return
+      
+      const digitalData = {
+        year: {
+          data: [89.5, 86.2, 82.7, 79.3, 76.8, 73.5],
+          title: '年度数字化作业占比'
+        },
+        quarter: {
+          data: [92.3, 88.7, 85.1, 81.6, 78.2, 75.8],
+          title: '季度数字化作业占比'
+        }
+      }
+      
+      const currentData = digitalData[period]
+      this.digitalChart.setOption({
+        backgroundColor: '#ffffff',
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.8)',
+          borderColor: '#16a34a',
+          textStyle: { color: '#fff' },
+          formatter: function(params) {
+            return `${params[0].name}<br/>${currentData.title}: ${params[0].value}%`
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['萧县', '砀山县', '埇桥区', '灵璧县', '泗县', '濉溪县'],
+          axisLine: { lineStyle: { color: '#e5e7eb' } },
+          axisLabel: { 
+            color: '#6b7280',
+            interval: 0,
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'value',
+          max: 100,
+          axisLine: { lineStyle: { color: '#e5e7eb' } },
+          axisLabel: { 
+            color: '#6b7280',
+            formatter: '{value}%'
+          },
+          splitLine: { lineStyle: { color: '#f3f4f6' } }
+        },
+        series: [{
+          type: 'bar',
+          data: currentData.data,
+          itemStyle: {
+            color: function(params) {
+              const colors = [
+                '#16a34a', '#22c55e', '#4ade80', 
+                '#86efac', '#bbf7d0', '#dcfce7'
+              ]
+              return colors[params.dataIndex]
+            },
+            borderRadius: [6, 6, 0, 0]
+          },
+          label: {
+            show: true,
+            position: 'top',
+            color: '#374151',
+            formatter: '{c}%',
+            fontWeight: 600
+          }
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.agriculture-dashboard {
+  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+  background: linear-gradient(135deg, #f8fffe 0%, #f0fdf4 30%, #ecfdf5 70%, #f7fee7 100%);
+  color: #1f2937;
+  min-height: 100vh;
+  line-height: 1.6;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.main-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 32px;
+  overflow-x: hidden;
+}
+
+/* 优化页头样式 */
+.page-header {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
+  border-bottom: 1px solid #e5f3e6;
+  box-shadow: 0 4px 24px rgba(76, 175, 80, 0.08);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding: 24px 0;
+}
+
+.header-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 左侧：Logo + 标题 */
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.logo-container {
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-img {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.main-title {
+  font-size: 3rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.sub-title {
+  color: #4b5563;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+/* 中间：占位 */
+.header-center {
+  flex: 1;
+}
+
+/* 右侧：天气 + 更新时间 */
+.header-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.info-panel {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 12px;
+  padding: 12px 20px;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: all 0.3s ease;
+}
+
+.info-panel:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(36, 179, 107, 0.2);
+}
+
+.weather-section, .refresh-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.divider {
+  width: 1px;
+  height: 20px;
+  background: rgba(153, 153, 153, 0.3);
+  margin: 0 16px;
+}
+
+.weather-label, .refresh-label {
+  font-size: 13px;
+  color: #999;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+.weather-status {
+  font-size: 13px;
+  color: #444;
+  font-weight: 500;
+}
+
+.weather-temp {
+  font-size: 14px;
+  color: #24B36B;
+  font-weight: 600;
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.refresh-time {
+  font-size: 13px;
+  color: #444;
+  font-weight: 500;
+}
+
+.refresh-timer {
+  color: #24B36B;
+  font-weight: 600;
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+/* 页脚样式 */
+.page-footer {
+  padding: 24px 0;
+  color: #6b7280;
+  font-size: 0.75rem;
+  border-top: 1px solid #e5e7eb;
+  background: #f8f9fa;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  min-height: 24px;
+}
+
+.footer-left {
+  flex-shrink: 0;
+}
+
+.footer-center {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  justify-content: center;
+}
+
+.footer-right {
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.footer-left span,
+.footer-center span,
+.footer-right span {
+  color: #666;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.separator {
+  color: #ccc;
+  font-weight: 300;
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .footer-content {
+    flex-direction: column;
+    text-align: center;
+    gap: 8px;
+  }
+  
+  .footer-left,
+  .footer-center,
+  .footer-right {
+    flex: none;
+    text-align: center;
+  }
+  
+  .footer-center {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 640px) {
+  .page-footer {
+    font-size: 0.7rem;
+    padding: 16px 0;
+  }
+  
+  .footer-content {
+    gap: 6px;
+  }
+  
+  .footer-center {
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .separator {
+    display: none;
+  }
+}
+
+/* 统一的section样式 */
+.dashboard-section {
+  margin-bottom: 4rem;
+  padding-bottom: 2rem;
+}
+
+.section-header {
+  margin-bottom: 0;
+  text-align: center;
+  background: #FAFFFB;
+  padding: 4rem 2rem 4rem;
+  max-width: 1920px;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  box-shadow: 0 2px 16px rgba(36, 179, 107, 0.04);
+  overflow: hidden;
+}
+
+/* 清爽的标题样式 */
+.section-title-clean {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0 0 8px 0;
+  text-align: center;
+  letter-spacing: 0.02em;
+  line-height: 1.2;
+}
+
+.section-description-clean {
+  color: #666666;
+  font-size: 0.9rem;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+.section-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 40px;
+  background: radial-gradient(ellipse at center, rgba(36, 179, 107, 0.06) 0%, transparent 70%);
+  z-index: 1;
+}
+
+.section-title-new {
+  font-size: 36px;
+  font-weight: 700;
+  color: #24B36B;
+  margin: 0 0 24px 0;
+  letter-spacing: 0.02em;
+  line-height: 1.2;
+  animation: fadeInUp 0.8s ease-out both;
+}
+
+.section-description-new {
+  color: #888;
+  font-size: 15px;
+  font-weight: 400;
+  margin: 0 0 32px 0;
+  line-height: 1.6;
+  letter-spacing: 0.01em;
+  animation: fadeInUp 1s ease-out 0.3s both;
+}
+
+.guide-line {
+  width: 150px;
+  height: 2px;
+  background: linear-gradient(to right, transparent 0%, rgba(36, 179, 107, 0.3) 50%, transparent 100%);
+  margin: 0 auto;
+  border-radius: 1px;
+  opacity: 1;
+  animation: fadeInLine 1.2s ease-out;
+}
+
+.section-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.section-description {
+  color: #6b7280;
+  font-size: 1rem;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+/* 优化卡片样式 */
+.modern-card {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid rgba(16, 185, 129, 0.15);
+  box-shadow: 
+    0 4px 16px rgba(16, 185, 129, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.modern-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 
+    0 12px 32px rgba(16, 185, 129, 0.12),
+    0 6px 16px rgba(0, 0, 0, 0.06);
+  border-color: rgba(16, 185, 129, 0.25);
+}
+
+/* 主内容区域优化 */
+.main-content {
+  background: #ffffff;
+  padding: 2rem;
+  margin: 0;
+  position: relative;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+/* 核心统计区域优化 */
+.hero-stats {
+  background: linear-gradient(145deg, #ffffff 0%, #fefffe 100%);
+  border-radius: 28px;
+  padding: 3rem;
+  margin: 0 auto 4rem;
+  border: none;
+  box-shadow: 
+    0 24px 64px rgba(22, 163, 74, 0.10),
+    0 16px 32px rgba(22, 163, 74, 0.08),
+    0 8px 16px rgba(0, 0, 0, 0.04);
+  position: relative;
+  z-index: 10;
+  animation: fadeInUp 1.2s ease-out 0.6s both;
+  max-width: 1184px;
+  overflow: hidden;
+}
+
+.hero-stats::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -20%;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(22, 163, 74, 0.05) 0%, transparent 70%);
+  border-radius: 50%;
+  z-index: -1;
+}
+
+/* 数据卡片网格布局 */
+.data-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 1rem;
+  width: 100%;
+  perspective: 1000px;
+  margin-bottom: 1rem;
+}
+
+/* 数据卡片样式 */
+.data-card {
+  background: #FAFAFA;
+  border-radius: 20px;
+  padding: 2.5rem 2rem;
+  text-align: center;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 
+    0 8px 24px rgba(0, 0, 0, 0.06),
+    0 4px 12px rgba(0, 0, 0, 0.04),
+    0 1px 6px rgba(0, 0, 0, 0.02);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.data-card:hover {
+  transform: translateY(-6px) scale(1.02);
+  box-shadow: 
+    0 24px 48px rgba(0, 0, 0, 0.12),
+    0 16px 32px rgba(0, 0, 0, 0.08),
+    0 8px 16px rgba(0, 0, 0, 0.04),
+    0 0 0 1px rgba(40, 184, 111, 0.06);
+}
+
+.data-card:active {
+  transform: translateY(-2px) scale(1.01);
+  transition: all 0.15s ease;
+}
+
+/* 微妙发光效果 */
+.data-card-value:hover {
+  text-shadow: 0 2px 8px rgba(0, 128, 0, 0.3);
+}
+
+/* 指标名称 */
+.data-card-label {
+  color: #4A4A4A;
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin-bottom: 1.8rem;
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+  text-align: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+/* 主数值 */
+.data-card-value {
+  font-size: 1.8rem;
+  font-weight: 900;
+  color: #28B86F;
+  margin-bottom: 1.5rem;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  font-family: 'Poppins', 'DM Mono', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  text-shadow: 0 2px 6px rgba(0, 128, 0, 0.2);
+  position: relative;
+  background: linear-gradient(135deg, #28B86F 0%, #56D49C 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 同比增长容器 */
+.data-card-change {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  background: #F0FDF6;
+  border: 1px solid rgba(40, 199, 111, 0.12);
+  padding: 0.5rem 1rem;
+  border-radius: 12px;
+  margin-top: auto;
+  transition: all 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+}
+
+.data-card-change::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, 
+    transparent, 
+    rgba(255, 255, 255, 0.3), 
+    transparent
+  );
+  transition: left 0.5s ease;
+}
+
+.data-card:hover .data-card-change {
+  background: #ECFDF5;
+  border-color: rgba(40, 199, 111, 0.18);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.data-card:hover .data-card-change::before {
+  left: 100%;
+}
+
+/* 箭头样式 */
+.change-arrow {
+  font-size: 0.9rem;
+  color: #28B86F;
+  font-weight: 600;
+  line-height: 1;
+  text-shadow: none;
+}
+
+/* 增长文字 */
+.change-text {
+  font-size: 0.8rem;
+  color: #28B86F;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  text-shadow: none;
+}
+
+/* 农业数据指标卡片设计 */
+.metrics-container {
+  margin: 3rem 0;
+  max-width: 1184px;
+  margin: 3rem auto;
+  padding: 0 20px;
+}
+
+/* 分组标题 */
+.metrics-group-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
+  text-align: center;
+  margin-bottom: 2rem;
+  position: relative;
+}
+
+.metrics-group-title::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: #3BB44A;
+  border-radius: 2px;
+}
+
+/* 卡片网格布局 */
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* 现代化卡片样式 */
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 32px 24px;
+  text-align: center;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 
+    0 4px 20px rgba(59, 180, 74, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  min-height: 240px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.metric-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 
+    0 12px 32px rgba(59, 180, 74, 0.15),
+    0 8px 24px rgba(0, 0, 0, 0.08);
+  border-color: rgba(59, 180, 74, 0.2);
+}
+
+/* 图标样式 - 优化为与demo匹配的精美样式 */
+.metric-icon {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, rgba(40, 184, 111, 0.1) 0%, rgba(80, 210, 155, 0.1) 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  color: #28B86F;
+  box-shadow: 0 2px 8px rgba(40, 184, 111, 0.12);
+  position: relative;
+  border: 1px solid rgba(40, 184, 111, 0.15);
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.metric-icon:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(40, 184, 111, 0.20);
+  background: linear-gradient(135deg, rgba(40, 184, 111, 0.15) 0%, rgba(80, 210, 155, 0.15) 100%);
+  border-color: rgba(40, 184, 111, 0.25);
+}
+
+.metric-icon svg {
+  width: 24px;
+  height: 24px;
+  stroke-width: 2;
+  stroke: currentColor;
+  fill: none;
+}
+
+/* 数值区域 */
+.metric-value-section {
+  flex-grow: 1;
+  margin-bottom: 20px;
+}
+
+.metric-number-group {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+/* 主数值 */
+.metric-number {
+  font-size: 2.8rem;
+  font-weight: 800;
+  color: #3BB44A;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* 百分比特别处理 */
+.metric-number.percentage {
+  font-size: 3.2rem;
+}
+
+/* 单位文字 */
+.metric-unit {
+  font-size: 1rem;
+  color: #6b7280;
+  font-weight: 500;
+  align-self: flex-end;
+  margin-bottom: 4px;
+}
+
+/* 指标名称 */
+.metric-name {
+  color: #374151;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+/* 辅助说明标签 */
+.metric-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background: rgba(59, 180, 74, 0.08);
+  border: 1px solid rgba(59, 180, 74, 0.15);
+  border-radius: 8px;
+  padding: 8px 16px;
+  margin-top: auto;
+  transition: all 0.3s ease;
+}
+
+.metric-info:hover {
+  background: rgba(59, 180, 74, 0.12);
+  border-color: rgba(59, 180, 74, 0.25);
+}
+
+/* 箭头图标 */
+.metric-arrow {
+  width: 14px;
+  height: 14px;
+  color: #3BB44A;
+  flex-shrink: 0;
+}
+
+.metric-arrow svg {
+  width: 100%;
+  height: 100%;
+  stroke-width: 2;
+}
+
+/* 说明文字 */
+.metric-info-text {
+  font-size: 0.8rem;
+  color: #3BB44A;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* 分组间距 */
+.metrics-group + .metrics-group {
+  margin-top: 4rem;
+}
+
+/* 雷达图区域 - 重新优化的统一风格 */
+.radar-chart-section {
+  margin: 3rem 0;
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 32px;
+  position: relative;
+}
+
+/* 底部背景柔化层 */
+.radar-chart-section::after {
+  content: '';
+  position: absolute;
+  bottom: -2rem;
+  left: 0;
+  right: 0;
+  height: 150px;
+  background: linear-gradient(
+    to bottom,
+    rgba(248, 255, 254, 0) 0%,
+    rgba(248, 255, 254, 0) 85%,
+    rgba(246, 252, 248, 0.3) 90%,
+    rgba(242, 249, 245, 0.5) 95%,
+    rgba(240, 247, 243, 0.7) 100%
+  );
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 白色渐变遮罩层 */
+.radar-chart-section::before {
+  content: '';
+  position: absolute;
+  bottom: -1rem;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.2) 40%,
+    rgba(255, 255, 255, 0.5) 70%,
+    rgba(255, 255, 255, 0.8) 90%,
+    rgba(255, 255, 255, 0.95) 100%
+  );
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 标题区域 */
+.radar-section-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.radar-section-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1C2438;
+  text-align: center;
+  margin: 0 0 0.75rem 0;
+  position: relative;
+  letter-spacing: 0.02em;
+  line-height: 1.2;
+}
+
+.radar-section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 48px;
+  height: 4px;
+  background: #3BB44A;
+  border-radius: 4px;
+}
+
+/* 卡片内部说明文字 */
+.radar-card-subtitle {
+  color: #8C8C8C;
+  font-size: 0.875rem;
+  margin: 0 0 1.5rem 0;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+  text-align: center;
+}
+
+/* 统一的卡片样式 */
+.radar-unified-card {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #f3f4f6;
+  box-shadow: 
+    0 12px 32px rgba(0, 0, 0, 0.10),
+    0 6px 16px rgba(0, 0, 0, 0.06),
+    0 3px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+  padding: 2.5rem 2.5rem 4rem;
+  margin-bottom: 2rem;
+  position: relative;
+  z-index: 3;
+}
+
+.radar-unified-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 
+    0 20px 48px rgba(0, 0, 0, 0.15),
+    0 10px 24px rgba(0, 0, 0, 0.10),
+    0 6px 16px rgba(0, 0, 0, 0.06);
+  border-color: #e5e7eb;
+}
+
+.radar-chart-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+  padding-bottom: 1rem;
+}
+
+.radar-chart-container {
+  height: 400px;
+  width: 100%;
+  max-width: 500px;
+}
+
+.radar-metrics-display {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 1.5rem;
+  width: 100%;
+  max-width: 800px;
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.radar-metric-item {
+  background: #ffffff;
+  border: 1px solid #f3f4f6;
+  border-radius: 12px;
+  padding: 1.5rem 1rem;
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+  box-shadow: 
+    0 4px 16px rgba(0, 0, 0, 0.06),
+    0 2px 8px rgba(0, 0, 0, 0.04),
+    0 1px 4px rgba(0, 0, 0, 0.02);
+}
+
+.radar-metric-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 
+    0 12px 32px rgba(0, 0, 0, 0.12),
+    0 6px 16px rgba(0, 0, 0, 0.08),
+    0 3px 8px rgba(0, 0, 0, 0.04);
+  border-color: #e5e7eb;
+  background: #fafafa;
+}
+
+.radar-metric-label {
+  display: block;
+  color: #4b5563;
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  line-height: 1.3;
+}
+
+.radar-metric-value {
+  display: block;
+  color: #3BB44A;
+  font-size: 1.3rem;
+  font-weight: 700;
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  letter-spacing: -0.02em;
+}
+
+/* 示范区管理展示模块 */
+.demo-showcase-section {
+  padding: 3rem 0;
+  background: linear-gradient(135deg, #f0fdf4 0%, #f6fffa 50%, #ecfdf5 100%);
+  min-height: auto;
+  position: relative;
+}
+
+.demo-showcase-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2316a34a' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
+  pointer-events: none;
+}
+
+/* 统一容器 */
+.demo-showcase-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 32px;
+  width: 100%;
+}
+
+/* 顶部标题卡片 */
+.demo-header-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
+  padding: 3rem 0 2rem;
+  text-align: center;
+  border-bottom: 1px solid rgba(16, 185, 129, 0.1);
+}
+
+.demo-main-title {
+  font-size: 2.25rem;
+  font-weight: 800;
+  color: #065f46;
+  margin: 0 0 1.25rem 0;
+  letter-spacing: 0.01em;
+  background: linear-gradient(135deg, #065f46 0%, #10b981 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.demo-main-description {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: #6b7280;
+  margin: 0;
+  line-height: 1.6;
+  max-width: 650px;
+  margin: 0 auto;
+}
+
+/* 主要内容网格 - 强制并排布局 */
+.demo-content-grid {
+  display: flex !important;
+  flex-direction: row !important;
+  gap: 1.5rem !important;
+  padding: 2.5rem 0 3rem !important;
+  align-items: stretch !important;
+  width: 100% !important;
+}
+
+/* 左侧地图卡片 */
+.demo-map-card {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid rgba(16, 185, 129, 0.15);
+  box-shadow: 
+    0 4px 16px rgba(16, 185, 129, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 6;
+  min-width: 0;
+}
+
+.demo-map-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 
+    0 12px 32px rgba(16, 185, 129, 0.12),
+    0 6px 16px rgba(0, 0, 0, 0.06);
+  border-color: rgba(16, 185, 129, 0.25);
+}
+
+.demo-map-header {
+  background: linear-gradient(135deg, #f7fef9 0%, #f1fdf5 100%);
+  padding: 1.75rem 2rem;
+  border-bottom: 1px solid rgba(22, 163, 74, 0.12);
+}
+
+.demo-map-content {
+  padding: 1.5rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.map-container {
+  flex: 1;
+  width: 100%;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.amap-container {
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  border-radius: 8px;
+  background: #f8fafc;
+  flex: 1;
+}
+
+.map-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border: 2px dashed rgba(16, 185, 129, 0.3);
+  border-radius: 8px;
+  text-align: center;
+}
+
+.placeholder-visual {
+  margin-bottom: 1.5rem;
+  opacity: 0.7;
+  transform: scale(1);
+  transition: all 0.3s ease;
+}
+
+.map-placeholder:hover .placeholder-visual {
+  opacity: 0.9;
+  transform: scale(1.05);
+}
+
+.placeholder-content {
+  text-align: center;
+}
+
+.placeholder-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.placeholder-subtitle {
+  font-size: 0.875rem;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+/* 地图控件样式 */
+.map-controls {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+.map-control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.map-control-btn {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(22, 163, 74, 0.2);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.map-control-btn:hover {
+  background: rgba(22, 163, 74, 0.1);
+  border-color: rgba(22, 163, 74, 0.3);
+  color: #16a34a;
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
+}
+
+.map-legend {
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(22, 163, 74, 0.15);
+  border-radius: 8px;
+  padding: 0.75rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-top: 1rem;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  color: #4b5563;
+  font-weight: 500;
+}
+
+.legend-item:last-child {
+  margin-bottom: 0;
+}
+
+.legend-marker {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.legend-marker.active {
+  background: #16a34a;
+}
+
+.legend-marker.planned {
+  background: #fbbf24;
+}
+
+/* 右侧典型示范案例卡片 */
+.demo-cases-card {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid rgba(16, 185, 129, 0.15);
+  box-shadow: 
+    0 4px 16px rgba(16, 185, 129, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 4;
+  min-width: 0;
+}
+
+.demo-cases-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 
+    0 12px 32px rgba(16, 185, 129, 0.12),
+    0 6px 16px rgba(0, 0, 0, 0.06);
+  border-color: rgba(16, 185, 129, 0.25);
+}
+
+.demo-cases-header {
+  background: linear-gradient(135deg, #f7fef9 0%, #f1fdf5 100%);
+  padding: 1.75rem 2rem;
+  border-bottom: 1px solid rgba(22, 163, 74, 0.12);
+}
+
+/* 统一卡片标题样式 */
+.demo-card-title {
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: #1f2937;
+  margin: 0;
+  text-align: center;
+  position: relative;
+  padding-bottom: 1rem;
+  letter-spacing: 0.02em;
+}
+
+.demo-card-title::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 56px;
+  height: 4px;
+  background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
+  border-radius: 2px;
+  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
+}
+
+.demo-cases-content {
+  padding: 2rem;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+}
+
+/* 轮播容器 */
+.cases-swiper-container {
+  position: relative;
+  flex: 1;
+  overflow: visible;
+}
+
+/* 悬浮时显示导航按钮 */
+.cases-swiper-container:hover .nav-btn {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Element UI 轮播组件样式覆盖 */
+.cases-swiper-container ::v-deep .el-carousel {
+  overflow: hidden;
+}
+
+.cases-swiper-container ::v-deep .el-carousel__container {
+  overflow: hidden;
+}
+
+.cases-swiper-container ::v-deep .el-carousel__item {
+  overflow: visible;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+/* 自定义导航按钮容器 */
+.custom-carousel-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 10;
+}
+
+/* 导航按钮基础样式 */
+.nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  color: #10B981;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(8px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: auto;
+  z-index: 15;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.nav-btn:hover {
+  background: rgba(16, 185, 129, 0.95);
+  color: white;
+  transform: translateY(-50%) scale(1.1);
+  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
+  border-color: rgba(16, 185, 129, 0.4);
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+.nav-btn:active {
+  transform: translateY(-50%) scale(1.05);
+}
+
+/* 按钮位置 */
+.nav-btn-prev {
+  left: 12px;
+}
+
+.nav-btn-next {
+  right: 12px;
+}
+
+/* 案例卡片样式 */
+.case-card {
+  background: linear-gradient(135deg, #ffffff 0%, #fafffe 100%);
+  border: 1px solid rgba(16, 185, 129, 0.1);
+  border-radius: 12px;
+  padding: 1.5rem;
+  height: 100%;
+  max-height: 680px;
+  overflow: visible;
+  box-shadow: 
+    0 2px 8px rgba(16, 185, 129, 0.06),
+    0 1px 4px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.case-card:hover {
+  border-color: rgba(22, 163, 74, 0.25);
+  box-shadow: 
+    0 6px 20px rgba(22, 163, 74, 0.12),
+    0 3px 10px rgba(0, 0, 0, 0.06);
+  transform: translateY(-1px) scale(1.002);
+}
+
+
+
+/* 案例头部信息 */
+.case-header {
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(22, 163, 74, 0.12);
+}
+
+.case-title {
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: #16a34a;
+  margin: 0 0 1rem 0;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+}
+
+.case-location {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.9rem;
+  color: #9ca3af;
+  font-weight: 500;
+}
+
+/* 设备统计 */
+.case-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.125rem 1rem;
+  background: rgba(22, 163, 74, 0.06);
+  border-radius: 10px;
+  border: 1px solid rgba(22, 163, 74, 0.12);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.stat-item:hover {
+  background: rgba(22, 163, 74, 0.1);
+  border-color: rgba(22, 163, 74, 0.25);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
+}
+
+.stat-item:hover::before {
+  opacity: 1;
+}
+
+.stat-icon {
+  flex-shrink: 0;
+  opacity: 0.85;
+  filter: drop-shadow(0 1px 2px rgba(22, 163, 74, 0.1));
+}
+
+.stat-data {
+  flex: 1;
+}
+
+.stat-number {
+  font-size: 1.375rem;
+  font-weight: 800;
+  color: #1f2937;
+  line-height: 1.1;
+  margin-bottom: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.8rem;
+  color: #4b5563;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+/* 核心技术方案样式 - 与基地亮点一致 */
+.case-technologies {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.technologies-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: #065F46;
+}
+
+.technologies-content {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #4B5563;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(16, 185, 129, 0.01) 100%);
+  border: 1px solid rgba(16, 185, 129, 0.1);
+  border-radius: 8px;
+  position: relative;
+  overflow: visible;
+}
+
+.technologies-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.technology-item {
+  position: relative;
+  padding-left: 1rem;
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+  font-size: 0.875rem;
+  color: #4B5563;
+}
+
+.technology-item:last-child {
+  margin-bottom: 0;
+}
+
+.technology-item::before {
+  content: '·';
+  position: absolute;
+  left: 0;
+  color: #16a34a;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.section-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  background: rgba(22, 163, 74, 0.04);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  user-select: none;
+  position: relative;
+}
+
+.section-toggle::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.section-toggle:hover {
+  background: rgba(22, 163, 74, 0.08);
+}
+
+.section-toggle:hover::before {
+  opacity: 1;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+/* 右侧箭头样式 */
+.toggle-icon {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0.8;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(22, 163, 74, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.section-toggle:hover .toggle-icon {
+  opacity: 1;
+  background: rgba(22, 163, 74, 0.15);
+  transform: scale(1.1);
+}
+
+.section-toggle.expanded .toggle-icon {
+  transform: rotate(180deg);
+  background: rgba(22, 163, 74, 0.2);
+}
+
+.section-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.section-content.expanded {
+  max-height: 150px;
+  overflow: visible;
+}
+
+
+
+/* 基地亮点样式 */
+.case-highlights {
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.highlights-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: #065F46;
+}
+
+.highlights-content {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #4B5563;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(16, 185, 129, 0.01) 100%);
+  border: 1px solid rgba(16, 185, 129, 0.1);
+  border-radius: 8px;
+  position: relative;
+  overflow: visible;
+}
+
+/* 阶段成果样式 - 与基地亮点一致 */
+.case-results {
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+  flex-grow: 1;
+  min-height: auto;
+  height: auto;
+}
+
+.results-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: #065F46;
+}
+
+.results-content {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #4B5563;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(16, 185, 129, 0.01) 100%);
+  border: 1px solid rgba(16, 185, 129, 0.1);
+  border-radius: 8px;
+  position: relative;
+  overflow: visible;
+}
+
+.results-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.result-item {
+  position: relative;
+  padding-left: 1rem;
+  margin-bottom: 0.8rem;
+  line-height: 1.7;
+  font-size: 0.875rem;
+  color: #4B5563;
+  padding-right: 0.5rem;
+}
+
+.result-item:last-child {
+  margin-bottom: 0;
+}
+
+.result-item::before {
+  content: '·';
+  position: absolute;
+  left: 0;
+  color: #16a34a;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+/* 查看更多按钮 */
+.cases-action {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0;
+  right: 0;
+  text-align: center;
+  background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 100%);
+  padding: 1rem 0 0.5rem;
+}
+
+.more-cases-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 2rem;
+  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
+  border: 1px solid rgba(21, 128, 61, 0.8);
+  border-radius: 12px;
+  font-size: 0.9rem;
+  color: #ffffff;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  box-shadow: 
+    0 6px 20px rgba(22, 163, 74, 0.25),
+    0 3px 10px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.more-cases-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: left 0.6s ease;
+}
+
+.more-cases-btn:hover {
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  border-color: rgba(5, 150, 105, 0.9);
+  color: #ffffff;
+  transform: translateY(-3px);
+  box-shadow: 
+    0 10px 25px rgba(22, 163, 74, 0.35),
+    0 5px 15px rgba(0, 0, 0, 0.15);
+}
+
+.more-cases-btn:hover::before {
+  left: 100%;
+}
+
+.more-cases-btn svg {
+  transition: transform 0.3s ease;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+}
+
+.more-cases-btn:hover svg {
+  transform: translateX(3px) scale(1.1);
+}
+
+.more-cases-btn:active {
+  transform: translateY(-1px);
+  box-shadow: 
+    0 6px 15px rgba(22, 163, 74, 0.3),
+    0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 图表卡片优化 */
+.chart-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 2rem;
+  margin-bottom: 3rem;
+}
+
+.chart-card {
+  padding: 2.5rem 2.5rem 3rem;
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 1.5rem;
+  text-align: center;
+  position: relative;
+  padding-bottom: 0.75rem;
+  letter-spacing: 0.01em;
+}
+
+.chart-title::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 48px;
+  height: 2px;
+  background: #3BB44A;
+  border-radius: 1px;
+}
+
+.chart-container {
+  height: 350px;
+  width: 100%;
+  flex: 1;
+}
+
+/* 排行榜优化 */
+.ranking-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1;
+  justify-content: space-between;
+}
+
+.ranking-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
+  border: 1px solid #f3f4f6;
+  border-radius: 16px;
+  transition: all 0.3s ease;
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.ranking-item:hover {
+  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
+  border-color: #dcfce7;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(76, 175, 80, 0.1);
+}
+
+.ranking-number {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1rem;
+  margin-right: 1rem;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.ranking-number.top1 {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  color: #ffffff;
+  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.4);
+}
+
+
+
+.ranking-number.top2 {
+  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
+  color: #374151;
+  box-shadow: 0 8px 24px rgba(229, 231, 235, 0.4);
+}
+
+.ranking-number.top3 {
+  background: linear-gradient(135deg, #d97706, #b45309);
+  color: #ffffff;
+  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.4);
+}
+
+.ranking-number.other {
+  background: #f3f4f6;
+  color: #6b7280;
+  border: 2px solid #e5e7eb;
+}
+
+.ranking-info {
+  flex: 1;
+}
+
+.ranking-name {
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 0.5rem;
+  font-size: 1.1rem;
+}
+
+.ranking-detail {
+  font-size: 0.9rem;
+  color: #6b7280;
+}
+
+.ranking-value {
+  text-align: right;
+}
+
+.ranking-score {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #16a34a;
+  margin-bottom: 0.25rem;
+}
+
+.ranking-unit {
+  font-size: 0.8rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+/* 切换标签优化 */
+.switch-tabs {
+  display: flex;
+  background: #f9fafb;
+  border-radius: 16px;
+  padding: 0.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid #f3f4f6;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.switch-tab {
+  flex: 1;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 0.95rem;
+  font-weight: 600;
+  position: relative;
+}
+
+.switch-tab.active {
+  background: #16a34a;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
+  transform: translateY(-1px);
+}
+
+.switch-tab:not(.active) {
+  color: #6b7280;
+}
+
+.switch-tab:not(.active):hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+/* Flex utility classes */
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+/* 动画效果优化 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLine {
+  from {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.fade-in-up:nth-child(1) { animation-delay: 0.2s; }
+.fade-in-up:nth-child(2) { animation-delay: 0.4s; }
+.fade-in-up:nth-child(3) { animation-delay: 0.6s; }
+.fade-in-up:nth-child(4) { animation-delay: 0.8s; }
+.fade-in-up:nth-child(5) { animation-delay: 1.0s; }
+
+/* 大屏优化 */
+@media (min-width: 1440px) {
+  .hero-stats {
+    max-width: 1336px;
+    padding: 3.5rem;
+  }
+  
+  .metrics-container {
+    max-width: 1336px;
+    padding: 0 24px;
+  }
+  
+  .metrics-grid {
+    gap: 32px;
+  }
+  
+  .metric-card {
+    padding: 40px 32px;
+    min-height: 280px;
+  }
+  
+  .metric-icon {
+    width: 52px;
+    height: 52px;
+    margin-bottom: 24px;
+    background: linear-gradient(135deg, rgba(40, 184, 111, 0.12) 0%, rgba(80, 210, 155, 0.12) 100%);
+    border-radius: 14px;
+    box-shadow: 0 3px 12px rgba(40, 184, 111, 0.15);
+    border: 1px solid rgba(40, 184, 111, 0.18);
+  }
+  
+  .metric-icon svg {
+    width: 26px;
+    height: 26px;
+  }
+  
+  .metric-number {
+    font-size: 3.2rem;
+  }
+  
+  .metric-number.percentage {
+    font-size: 3.6rem;
+  }
+  
+  .metric-unit {
+    font-size: 1.1rem;
+  }
+  
+  .metric-name {
+    font-size: 1.1rem;
+  }
+  
+  .metric-info-text {
+    font-size: 0.85rem;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 1400px) {
+  .data-cards-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+}
+
+@media (max-width: 1200px) {
+  .hero-stats {
+    max-width: 100%;
+    padding: 2.5rem;
+  }
+  
+  .metrics-container {
+    max-width: 100%;
+    padding: 0 16px;
+  }
+  
+  .chart-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .metrics-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+  }
+}
+
+@media (max-width: 400px) {
+  .demo-content-grid {
+    flex-direction: column !important;
+    gap: 2rem;
+  }
+  
+  .main-container {
+    padding: 16px;
+  }
+  
+  .hero-stats {
+    padding: 2rem;
+    margin: 0 auto 2rem;
+  }
+  
+  .metrics-container {
+    padding: 0 10px;
+  }
+  
+  .header-container {
+    flex-direction: column;
+    gap: 20px;
+    align-items: flex-start;
+  }
+  
+  .main-title {
+    font-size: 2rem;
+  }
+  
+  .sub-title {
+    font-size: 0.95rem;
+  }
+  
+  .data-cards-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.2rem;
+  }
+  
+  .metrics-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    padding: 0 10px;
+  }
+  
+  .radar-metrics-display {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .data-cards-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .metrics-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    padding: 0 5px;
+  }
+  
+  .radar-metrics-display {
+    grid-template-columns: 1fr;
+    gap: 0.8rem;
+  }
+}
+</style>

src/views/index.vue

@@ -35,6 +35,9 @@
         <el-button icon="el-icon-refresh" type="success" size="medium" @click="refreshData">
           刷新数据
         </el-button>
+        <el-button icon="el-icon-monitor" type="warning" size="medium" @click="goToDigitalDashboard" style="font-weight: bold;">
+          🚀 农业数字化决策大屏
+        </el-button>
       </div>
     </header>
 
@@ -426,6 +429,12 @@ export default {
       this.directInitCharts();
     },
     
+    goToDigitalDashboard() {
+      // 使用新标签页打开农业数字化决策大屏（无菜单版本）
+      const baseUrl = window.location.origin;
+      window.open(`${baseUrl}/agri-digital/dashboard`, '_blank');
+    },
+    
     getCurrentFarmDescription() {
       const currentSelection = this.getCurrentSelection();