<template>
  <div class="user-profile">
    <div class="box-center">
      <div class="user-bio">
        <div class="user-education user-bio-section">
          <div class="user-bio-section-header">
            <svg-icon icon-class="user" />
            <span>头像</span>
          </div>
          <div class="user-bio-section-body">
            <div class="text-center">
              <el-avatar :size="100" :src="user.avatar || require('@/assets/images/profile.jpg')" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  user: {
    type: Object,
    required: true
  }
})
</script>

<style lang="scss" scoped>
.user-profile {
  .box-center {
    margin: 0 auto;
    display: table;
  }

  .user-bio {
    margin-top: 20px;
    color: #606266;

    .user-bio-section {
      margin-bottom: 15px;

      .user-bio-section-header {
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }
}
</style> 