<template>
  <view class="mine-container">
    <!-- 顶部个人信息栏 -->
    <view class="header-section">
      <view class="user-info">
        <view class="avatar">
          <uni-icons type="person-filled" size="40" color="#ffffff"></uni-icons>
        </view>
        <view class="user-details">
          <text class="user-name">{{ userInfo.name }}</text>
          <text class="user-id">ID: {{ userInfo.userId }}</text>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-section">
      <view class="info-card">
        <view class="info-item">
          <text class="info-label">手机号</text>
          <text class="info-value">{{ userInfo.phone }}</text>
        </view>
        <view class="info-divider"></view>
        <view class="info-item">
          <text class="info-label">邮箱</text>
          <text class="info-value">{{ userInfo.email }}</text>
        </view>
        <view class="info-divider"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 模拟个人信息
const userInfo = ref({
  name: '智聪',
  userId: '10001',
  phone: '138****5678',
  email: 'qdintc@126.com'
})
</script>

<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f5f7fa;
}

.mine-container {
  width: 100%;
  height: 100vh;
  background-color: #f5f7fa;
  overflow-y: auto;

  .header-section {
    padding: 40rpx 32rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .user-info {
      display: flex;
      align-items: center;
      
      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50rpx;
        background: rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 24rpx;
      }
      
      .user-details {
        flex: 1;
        
        .user-name {
          display: block;
          color: #ffffff;
          font-size: 32rpx;
          font-weight: 600;
          margin-bottom: 8rpx;
        }
        
        .user-id {
          color: rgba(255, 255, 255, 0.8);
          font-size: 24rpx;
        }
      }
    }
  }

  .content-section {
    padding: 32rpx;
    
    .info-card {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 0;
        
        .info-label {
          color: #666;
          font-size: 28rpx;
        }
        
        .info-value {
          color: #333;
          font-size: 28rpx;
        }
      }
      
      .info-divider {
        height: 1rpx;
        background-color: #f0f0f0;
      }
    }
  }
}
</style>
