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