<template>
  <div class="map-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">
            <Location />
          </el-icon>
          <p>情绪地图功能开发中...</p>
          <p class="text-sm mt-2">这里将集成高德地图API，支持情绪地点标记</p>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style scoped>
.map-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  background-attachment: fixed;
}

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