<template>
  <div class="user-demo">
    <h1>用户信息组件示例</h1>
    
    <div class="section">
      <h2>基本使用</h2>
      <div class="example">
        <UserMeta :id="1" />
      </div>
    </div>
    
    <div class="section">
      <h2>多个用户展示</h2>
      <div class="users-grid">
        <div v-for="userId in [1, 2, 3, 11]" :key="userId" class="user-card">
          <UserMeta :id="userId" />
          <div class="card-content">
            <p>这是用户ID为 {{ userId }} 的内容区域</p>
            <p class="hint">将鼠标悬停在用户信息上查看详情</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserMeta from '../components/UserMeta.vue'

export default {
  name: 'UserDemo',
  components: {
    UserMeta
  }
}
</script>

<style scoped>
.user-demo {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

h1, h2 {
  color: #333;
}

h1 {
  text-align: center;
  margin-bottom: 40px;
}

.section {
  margin-bottom: 40px;
}

h2 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.example {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.user-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.user-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-content {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.hint {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
  font-style: italic;
}
</style> 