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