nongxiaoyu/pages/dashboard/index.vue

<template>
  <view class="dashboard-container">
    <!-- 顶部信息卡片 - 更现代化的设计 -->
    <view class="header-card">
      <view class="header-left">
        <view class="welcome-section">
          <text class="welcome-text">您好，{{ userData.nickname }}</text>
          <view class="plot-info">
            <text class="plot-label">当前地块：</text>
            <text class="plot-name">{{ userData.selectedPlot }}</text>
            <view class="switch-plot-btn" @click="handleSwitchPlot">
              <u-icon name="arrow-down-fill" color="#ffffff" size="14"></u-icon>
              <text>切换</text>
            </view>
          </view>
        </view>
      </view>
      <view class="header-right">
        <view class="user-avatar" @click="navigateToProfile">
          <view class="avatar-svg">
            <svg width="100%" height="100%" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- 背景圆 -->
              <circle cx="45" cy="45" r="45" fill="#E1F5E9"/>
              
              <!-- 背景装饰 - 农作物图案 -->
              <path d="M15 35C15 35 25 25 35 35C45 45 65 25 75 35" stroke="#4CAF50" stroke-width="2" stroke-opacity="0.3"/>
              <path d="M20 30L20 40" stroke="#4CAF50" stroke-width="2" stroke-opacity="0.3"/>
              <path d="M35 30L35 45" stroke="#4CAF50" stroke-width="2" stroke-opacity="0.3"/>
              <path d="M50 30L50 40" stroke="#4CAF50" stroke-width="2" stroke-opacity="0.3"/>
              <path d="M65 30L65 45" stroke="#4CAF50" stroke-width="2" stroke-opacity="0.3"/>
              
              <!-- 人形轮廓 -->
              <circle cx="45" cy="35" r="15" fill="#4CAF50"/>
              <path d="M25 82C25 67 34 55 45 55C56 55 65 67 65 82H25Z" fill="#4CAF50"/>
              
              <!-- 帽子 - 农夫草帽 -->
              <path d="M25 30C25 30 35 20 45 20C55 20 65 30 65 30C65 30 55 25 45 25C35 25 25 30 25 30Z" fill="#8BC34A"/>
              
              <!-- 装饰细节 -->
              <circle cx="38" cy="32" r="2" fill="white" fill-opacity="0.7"/>
              <circle cx="52" cy="32" r="2" fill="white" fill-opacity="0.7"/>
              <path d="M40 40C40 40 43 42 45 42C47 42 50 40 50 40" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
              
              <!-- 麦穗装饰 -->
              <path d="M70 15C70 15 75 20 75 25" stroke="#8BC34A" stroke-width="1.5" stroke-linecap="round"/>
              <path d="M73 18L77 20" stroke="#8BC34A" stroke-width="1.5" stroke-linecap="round"/>
              <path d="M72 22L76 24" stroke="#8BC34A" stroke-width="1.5" stroke-linecap="round"/>
              
              <path d="M20 15C20 15 15 20 15 25" stroke="#8BC34A" stroke-width="1.5" stroke-linecap="round"/>
              <path d="M17 18L13 20" stroke="#8BC34A" stroke-width="1.5" stroke-linecap="round"/>
              <path d="M18 22L14 24" stroke="#8BC34A" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
          </view>
        </view>
      </view>
    </view>

    <!-- 核心数据指标 - 科技感设计 -->
    <view class="stats-grid">
      <view class="stat-card" v-for="(stat, index) in coreStats" :key="index">
        <view class="stat-content">
          <text class="stat-value">{{ stat.value }}</text>
          <text class="stat-label">{{ stat.label }}</text>
        </view>
      </view>
    </view>

    <!-- 农事活动卡片 - 使用线性进度条 -->
    <view class="section-card">
      <view class="card-header">
        <view class="card-title">
          <view class="title-icon">
            <view class="icon-dot"></view>
          </view>
          <text class="title-text">近期农事活动</text>
        </view>
        <view class="more-link" @click="navigateToAllActivities">
          <text>更多</text>
          <u-icon name="arrow-right" color="#4CAF50" size="14"></u-icon>
        </view>
      </view>
      <view class="card-body">
        <view class="activity-header">
          <view class="activity-header-right">
            <text class="header-title">任务名称</text>
            <text class="header-executor">执行人</text>
            <text class="header-date">计划日期</text>
            <view class="header-action"></view>
          </view>
        </view>
        <view v-for="(item, index) in farmData.recentActivities" :key="index" 
              class="activity-item" @click="navigateToActivity(item)">
          <view class="activity-right">
            <view class="activity-content">
              <text class="activity-title">{{ item.title }}</text>
            </view>
            <text class="activity-executor">{{ item.executor }}</text>
            <text class="activity-date">{{ item.date }}</text>
            <view class="activity-action">
              <u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 天气和农情预测 - 更现代化的信息图表 -->
    <view class="section-card weather-card">
      <view class="card-header">
        <view class="card-title">
          <view class="title-icon">
            <view class="icon-dot"></view>
          </view>
          <text class="title-text">天气与农情</text>
        </view>
      </view>
      <view class="card-body">
        <view class="weather-main">
          <view class="weather-top">
            <view class="weather-left">
              <view class="weather-icon-large">
                <!-- 自定义的晴朗天气图标 -->
                <svg width="48" height="48" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="sun-icon">
                  <!-- 光晕效果 -->
                  <circle cx="100" cy="100" r="65" fill="rgba(255, 193, 7, 0.1)" />
                  <!-- 主太阳圆形 -->
                  <circle cx="100" cy="100" r="45" fill="#FFC107"/>
                  <!-- 放射光芒 - 主要 -->
                  <line x1="100" y1="25" x2="100" y2="5" stroke="#FFC107" stroke-width="8" stroke-linecap="round"/>
                  <line x1="100" y1="195" x2="100" y2="175" stroke="#FFC107" stroke-width="8" stroke-linecap="round"/>
                  <line x1="25" y1="100" x2="5" y2="100" stroke="#FFC107" stroke-width="8" stroke-linecap="round"/>
                  <line x1="195" y1="100" x2="175" y2="100" stroke="#FFC107" stroke-width="8" stroke-linecap="round"/>
                  <!-- 内部细节 -->
                  <circle cx="100" cy="100" r="35" fill="#FF9800"/>
                </svg>
              </view>
              <view class="weather-info">
                <view class="temp-row">
                  <view class="temp-display">
                    <text class="weather-temp">{{ weatherData.temperature }}</text>
                    <text class="temp-unit">°C</text>
                  </view>
                  <text class="weather-desc">{{ weatherData.description }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <view class="weather-advice">
            <view class="advice-header">
              <text class="advice-title">今日农事建议：</text>
              <u-icon name="account" color="#666666" size="32"></u-icon>
            </view>
            <text class="advice-content">{{ weatherData.advice }}</text>
          </view>
        </view>
        
        <view class="weather-metrics">
          <view class="metric-item">
            <text class="metric-label">湿度</text>
            <text class="metric-value">{{ weatherData.humidity }}%</text>
          </view>
          <view class="metric-divider"></view>
          <view class="metric-item">
            <text class="metric-label">风力</text>
            <text class="metric-value">{{ weatherData.windLevel }}级</text>
          </view>
          <view class="metric-divider"></view>
          <view class="metric-item">
            <text class="metric-label">降水</text>
            <text class="metric-value">{{ weatherData.rainfall }}mm</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 统计卡片区域 -->
    <view class="stats-section">
      <view class="stats-grid">
        <!-- 本月作业情况 -->
        <view class="stat-card">
          <view class="card-header">
            <view class="icon-badge">
              <text class="icon">📊</text>
            </view>
            <text class="card-title">本月作业情况</text>
          </view>
          <view class="card-content">
            <view class="main-stats">
              <view class="stat-item">
                <text class="number">36</text>
                <text class="label">作业次数</text>
              </view>
              <view class="stat-item">
                <text class="number">128</text>
                <text class="label">作业面积(亩)</text>
              </view>
            </view>
            <view class="sub-info">
              <text class="emoji">🌾</text>
              <text class="info-text">主要作物：小麦、玉米</text>
            </view>
          </view>
        </view>

        <!-- 农机使用情况 -->
        <view class="stat-card">
          <view class="card-header">
            <view class="icon-badge">
              <text class="icon">🚜</text>
            </view>
            <text class="card-title">农机使用情况</text>
          </view>
          <view class="card-content">
            <view class="main-stats">
              <view class="stat-item">
                <text class="number">172</text>
                <text class="label">总使用时长(小时)</text>
              </view>
              <view class="stat-item">
                <text class="number">75%</text>
                <text class="label">计划完成率</text>
              </view>
            </view>
            <view class="sub-info">
              <text class="emoji">🛠</text>
              <text class="info-text">设备：无人拖拉机、播种机</text>
            </view>
          </view>
        </view>

        <!-- 灌溉与施肥数据 -->
        <view class="stat-card">
          <view class="card-header">
            <view class="icon-badge">
              <text class="icon">💧</text>
            </view>
            <text class="card-title">灌溉与施肥数据</text>
          </view>
          <view class="card-content">
            <view class="main-stats">
              <view class="stat-item">
                <text class="number">85</text>
                <text class="label">灌溉面积(亩)</text>
              </view>
              <view class="stat-item">
                <text class="number">230</text>
                <text class="label">用水量(m³)</text>
              </view>
            </view>
            <view class="sub-info">
              <text class="emoji">🌱</text>
              <text class="info-text">本月施肥次数：12次</text>
            </view>
          </view>
        </view>

        <!-- 病虫害处理情况 -->
        <view class="stat-card">
          <view class="card-header">
            <view class="icon-badge">
              <text class="icon">🐛</text>
            </view>
            <text class="card-title">病虫害处理情况</text>
          </view>
          <view class="card-content">
            <view class="main-stats">
              <view class="stat-item">
                <text class="number">4/5</text>
                <text class="label">处理进度</text>
              </view>
              <view class="stat-item">
                <view class="progress-circle">
                  <text class="progress-text">80%</text>
                </view>
                <text class="label">完成率</text>
              </view>
            </view>
            <view class="sub-info warning">
              <text class="emoji">⚠️</text>
              <text class="info-text">待处理：1个预警</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 用户数据
const userData = ref({
  nickname: '张三',
  selectedPlot: '南地块'
});

// 地块选择
const showPlotSelector = ref(false);
const availablePlots = ref([
  { name: '南地块', id: 1 },
  { name: '西北区域', id: 2 },
  { name: '稻田', id: 3 },
  { name: '东区试验田', id: 4 },
  { name: '温室大棚', id: 5 }
]);

// 农场数据
const farmData = ref({
  plotCount: 5,
  deviceCount: 12,
  deviceOnlineRate: 85,
  taskCompletionRate: 76,
  recentActivities: [
    { title: '稻田水稻施肥', date: '2023-05-15', status: 'pending', id: 1, executor: '李四' },
    { title: '南地块除草', date: '2023-05-12', status: 'completed', id: 2, executor: '王五' },
    { title: '西北区域杀虫', date: '2023-05-08', status: 'completed', id: 3, executor: '张三' }
  ]
});

// 核心数据指标
const coreStats = computed(() => [
  { 
    label: '地块总数', 
    value: farmData.value.plotCount, 
    icon: 'map', 
    bgColor: 'linear-gradient(135deg, #4CAF50, #2E7D32)'
  },
  { 
    label: '设备数量', 
    value: farmData.value.deviceCount, 
    icon: 'setting', 
    bgColor: 'linear-gradient(135deg, #42A5F5, #1976D2)'
  },
  { 
    label: '设备在线率', 
    value: farmData.value.deviceOnlineRate + '%', 
    icon: 'wifi', 
    bgColor: 'linear-gradient(135deg, #26C6DA, #00838F)'
  },
  { 
    label: '农事完成率', 
    value: farmData.value.taskCompletionRate + '%', 
    icon: 'checkmark-circle', 
    bgColor: 'linear-gradient(135deg, #66BB6A, #388E3C)'
  }
]);

// 天气数据
const weatherData = ref({
  temperature: 28,
  description: '晴朗',
  humidity: 65,
  windLevel: 3,
  rainfall: 0,
  advice: '今日适宜进行春玉米防虫作业，注意水分管理。'
});

// 统计数据
const statsData = ref({
  operation: {
    workCount: 36,
    workArea: 128,
    mainCrops: ['小麦', '玉米']
  },
  machine: {
    totalHours: 172,
    mainEquipment: ['无人拖拉机', '播种机']
  },
  irrigation: {
    irrigationArea: 85,
    fertilizationCount: 12,
    waterUsage: 230
  },
  pest: {
    totalReports: 5,
    handled: 4,
    pending: 1
  }
});

// 方法
const handleShowMap = () => {
  uni.navigateTo({
    url: '/pages/map/index'
  });
};

const navigateToProfile = () => {
  uni.navigateTo({
    url: '/pages/profile/index'
  });
};

const handleSwitchPlot = () => {
  showPlotSelector.value = true;
};

const selectPlot = (plot) => {
  userData.value.selectedPlot = plot.name;
  showPlotSelector.value = false;
  
  // 实际应用中，这里需要重新加载当前地块的数据
  uni.showToast({
    title: `已切换到${plot.name}`,
    icon: 'none'
  });
};

const navigateToActivity = (activity) => {
  uni.navigateTo({
    url: `/pages/activity/detail?id=${activity.id}`
  });
};

const navigateToAllActivities = () => {
  uni.navigateTo({
    url: '/pages/activity/list'
  });
};

// 获取统计数据
const fetchStatsData = async () => {
  try {
    // 实际项目中替换为API调用
    // const response = await api.getStatsData();
    // statsData.value = response.data;
    console.log('统计数据加载成功');
  } catch (error) {
    console.error('获取统计数据失败', error);
    uni.showToast({
      title: '数据加载失败',
      icon: 'none'
    });
  }
};

// 页面加载
onMounted(() => {
  fetchStatsData();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 30rpx 20rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}

// 顶部信息卡片
.header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 16rpx rgba(76, 175, 80, 0.2);
  
  .header-left {
    flex: 1;
  }
  
  .header-right {
    display: flex;
    align-items: center;
  }
  
  .user-avatar {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    
    .avatar-svg {
      width: 100%;
      height: 100%;
    }
  }
  
  .welcome-text {
    font-size: 38rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 12rpx;
  }
  
  .plot-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    .plot-label {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      margin-right: 4rpx;
    }
    
    .plot-name {
      font-size: 28rpx;
      color: #ffffff;
      font-weight: 500;
      margin-right: 16rpx;
    }
    
    .switch-plot-btn {
      display: flex;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 30rpx;
      padding: 4rpx 16rpx;
      margin-left: 8rpx;
      
      text {
        font-size: 24rpx;
        color: #ffffff;
        margin-left: 4rpx;
      }
    }
  }
}

// 核心数据指标网格
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 24rpx;
  
  .stat-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .stat-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      
      .stat-value {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .stat-label {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

// 卡片通用样式
.section-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 24rpx;
  overflow: hidden;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 24rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .card-title {
      display: flex;
      align-items: center;
      
      .title-icon {
        display: flex;
        align-items: center;
        margin-right: 12rpx;
        
        .icon-dot {
          width: 12rpx;
          height: 12rpx;
          border-radius: 6rpx;
          background-color: #4CAF50;
        }
      }
      
      .title-text {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .more-link {
      display: flex;
      align-items: center;
      
      text {
        font-size: 24rpx;
        color: #4CAF50;
        margin-right: 6rpx;
      }
    }
  }
  
  .card-body {
    padding: 0;
    border: 1rpx solid rgba(76, 175, 80, 0.15);
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.03);
    
    .activity-item:not(:last-child) {
      position: relative;
      
      &:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1rpx;
        background-color: #f2f2f2;
      }
    }
  }
}

// 活动标题行
.activity-header {
  display: flex;
  margin-bottom: 0;
  padding-bottom: 18rpx;
  padding-top: 18rpx;
  border-bottom: 1rpx solid rgba(76, 175, 80, 0.1);
  background-color: rgba(76, 175, 80, 0.07);
  border-radius: 8rpx 8rpx 0 0;
  
  .activity-header-right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-title {
      flex: 1.5;
      font-size: 28rpx;
      color: #4CAF50;
      font-weight: bold;
      padding-left: 30rpx;
      text-align: left;
    }
    
    .header-executor {
      font-size: 28rpx;
      color: #4CAF50;
      font-weight: bold;
      width: 180rpx;
      text-align: center;
    }
    
    .header-date {
      font-size: 28rpx;
      color: #4CAF50;
      font-weight: bold;
      min-width: 250rpx;
      text-align: center;
      margin-right: 20rpx;
    }
    
    .header-action {
      width: 36rpx;
    }
  }
}

// 农事活动列表
.activity-item {
  display: flex;
  margin-bottom: 0;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f2f2f2;
  height: 60rpx;
  
  &:last-child {
    border-bottom-left-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
  }
  
  .activity-right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
    border-bottom: none;
    height: 100%;
    
    .activity-content {
      flex: 1.5;
      padding-left: 30rpx;
      height: 100%;
      display: flex;
      align-items: center;
      
      .activity-title {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        text-align: left;
        line-height: 1.4;
      }
    }
    
    .activity-executor {
      font-size: 28rpx;
      color: #666;
      width: 180rpx;
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .activity-date {
      font-size: 28rpx;
      color: #999;
      text-align: center;
      margin-right: 20rpx;
      min-width: 250rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .activity-action {
      width: 36rpx;
    }
  }
}

// 天气卡片
.weather-card {
  .card-body {
    padding: 0;
    background: #ffffff;
    border-radius: 12rpx;
    overflow: hidden;
  }

  .weather-main {
    padding: 30rpx;
  }

  .weather-top {
    display: flex;
    margin-bottom: 0;
  }

  .weather-left {
    display: flex;
    align-items: flex-start;
    gap: 20rpx;
  }

  .weather-icon-large {
    width: 48rpx;
    height: 48rpx;
    margin-top: 6rpx;
    flex-shrink: 0;
  }

  .weather-info {
    .temp-row {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .temp-display {
        display: flex;
        align-items: flex-start;
        
        .weather-temp {
          font-size: 48rpx;
          font-weight: 500;
          color: #333;
          line-height: 1;
        }
        
        .temp-unit {
          font-size: 24rpx;
          color: #666;
          margin-top: 6rpx;
          margin-left: 2rpx;
        }
      }
      
      .weather-desc {
        font-size: 28rpx;
        color: #666;
        margin-top: 4rpx;
      }
    }
  }

  .weather-advice {
    background: #F8FFF9;
    border: 2rpx solid rgba(76, 175, 80, 0.15);
    border-radius: 12rpx;
    padding: 24rpx;
    margin-top: 24rpx;
    
    .advice-header {
      display: flex;
      align-items: center;
      gap: 8rpx;
      margin-bottom: 12rpx;
      
      .advice-title {
        font-size: 28rpx;
        color: #4CAF50;
        font-weight: 500;
      }
    }
    
    .advice-content {
      font-size: 26rpx;
      color: #333;
      line-height: 1.5;
    }
  }
}

.weather-metrics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-top: 2rpx solid #f5f5f5;
  
  .metric-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .metric-label {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 8rpx;
    }
    
    .metric-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }

  .metric-divider {
    width: 2rpx;
    height: 40rpx;
    background: #f0f0f0;
    margin: 0 20rpx;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6rpx);
  }
}

@keyframes rainDrop {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2rpx);
  }
}

// 地块选择弹出层
.plot-selector {
  background-color: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  
  .plot-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .plot-selector-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .plot-selector-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 30rpx;
    
    .plot-selector-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.active {
        .plot-name {
          color: #4CAF50;
          font-weight: bold;
        }
      }
      
      .plot-name {
        font-size: 30rpx;
        color: #333;
      }
    }
  }
}

.stats-section {
  margin: 40rpx 32rpx;
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40rpx 32rpx;
  }

  .stat-card {
    background: #FAFAFA;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
    min-height: 320rpx;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2rpx);
      box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.08);
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 32rpx;
      gap: 16rpx;
      
      .icon-badge {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--primary-color, #4CAF50), var(--primary-dark, #2E7D32));
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        
        .icon {
          font-size: 24rpx;
        }
      }
      
      .card-title {
        font-size: 32rpx;
        color: #333;
        font-weight: 600;
      }
    }

    .card-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .main-stats {
        display: flex;
        justify-content: space-around;
        gap: 24rpx;
        margin-bottom: 32rpx;
        
        .stat-item {
          flex: 1;
          text-align: center;
          
          .number {
            font-size: 48rpx;
            font-weight: 600;
            color: #333;
            line-height: 1.5;
            display: block;
            animation: numberChange 0.5s ease-out;
          }
          
          .label {
            font-size: 24rpx;
            color: #999;
            line-height: 1.5;
            display: block;
            margin-top: 8rpx;
          }

          .progress-circle {
            width: 96rpx;
            height: 96rpx;
            margin: 0 auto;
            border-radius: 50%;
            background: conic-gradient(
              var(--primary-color, #4CAF50) 80%,
              #f0f0f0 80%
            );
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            &::after {
              content: '';
              position: absolute;
              width: 80rpx;
              height: 80rpx;
              background: #FAFAFA;
              border-radius: 50%;
            }

            .progress-text {
              font-size: 28rpx;
              font-weight: 600;
              color: #333;
              z-index: 1;
            }
          }
        }
      }

      .sub-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        padding: 16rpx;
        background: rgba(0, 0, 0, 0.02);
        border-radius: 12rpx;
        
        .emoji {
          font-size: 28rpx;
        }
        
        .info-text {
          font-size: 24rpx;
          color: #666;
          line-height: 1.5;
        }

        &.warning {
          background: rgba(255, 167, 38, 0.1);
          .info-text {
            color: #F57C00;
          }
        }
      }
    }
  }
}

@keyframes numberChange {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>