<template>
  <div class="learning-data-overview">
    <h2 class="section-title">个人学习数据概览</h2>
    <div class="data-cards">
      <div class="data-card" v-for="item in dataItems" :key="item.label">
        <div class="card-icon">{{ item.icon }}</div>
        <div class="card-content">
          <div class="card-value">{{ item.value }}</div>
          <div class="card-label">{{ item.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const dataItems = ref([
  { icon: '📚', label: '学习时长', value: '0小时' },
  { icon: '✅', label: '完成任务', value: '0个' },
  { icon: '⭐', label: '获得成就', value: '0个' },
  { icon: '📖', label: '阅读文章', value: '0篇' }
]);

onMounted(() => {
  // TODO: 加载用户学习数据
});
</script>

<style lang="scss" scoped>
.learning-data-overview {
  padding: 40px;
  background: white;
  border-radius: 8px;
  margin: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #141F38;
  margin-bottom: 24px;
}

.data-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.data-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  gap: 16px;
}

.card-icon {
  font-size: 32px;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  color: #C62828;
}

.card-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}
</style>

