<template>
  <div class="profile-page">
    <div class="container mx-auto px-4 py-8">
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">个人中心</h1>
        <p class="text-gray-600">管理个人信息，查看情绪档案</p>
      </div>
      <div class="card">
        <div class="text-center text-gray-500 py-12">
          <el-icon class="text-4xl mb-4">
            <User />
          </el-icon>
          <p>个人中心功能开发中...</p>
          <p class="text-sm mt-2">这里将展示用户信息、情绪统计等内容</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User } from '@element-plus/icons-vue'
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
  background-attachment: fixed;
}

.profile-page .container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
</style> 