<template>
  <div class="personal-center-banner">
    <!-- 骨架屏 -->
    <div v-if="isLoading" class="banner-skeleton">
      <div class="skeleton-content-container">
        <!-- 用户头像骨架 -->
        <div class="user-avatar-skeleton">
          <div class="avatar-placeholder"></div>
        </div>
        
        <!-- 用户信息骨架 -->
        <div class="user-info-skeleton">
          <div class="username-skeleton"></div>
          <div class="user-id-skeleton"></div>
          <div class="vip-status-skeleton"></div>
        </div>
      </div>
    </div>
    
    <!-- 实际内容 -->
    <div v-else class="banner-content">
      <!-- 内容容器，跟随Header和PersonalCenter的布局逻辑 -->
      <div class="content-container">
        <!-- 用户头像 -->
        <div 
          class="user-avatar"
          @click="handleAvatarClick"
          @mouseenter="showAvatarTooltip = true"
          @mouseleave="showAvatarTooltip = false"
        >
          <img 
            :src="getAvatarUrl()"
            :alt="getUserDisplayName() + '的头像'"
            @error="handleAvatarError"
          />
          <!-- 悬浮遮罩层 -->
          <div class="avatar-overlay" v-show="showAvatarTooltip">
            <el-icon class="edit-icon"><Edit /></el-icon>
          </div>
          <!-- 悬浮提示 -->
          <div v-if="showAvatarTooltip" class="avatar-tooltip">
            <span>点击更改信息</span>
          </div>
        </div>
        
        <!-- 用户信息 -->
        <div class="user-info">
          <div class="username">{{ getUserDisplayName() }}</div>
          <div class="user-id">ID: {{ getUserID() }}</div>
          
          <!-- VIP状态 -->
          <div class="vip-status">
            <div class="vip-info">
              <div class="vip-icon">
                <img :src="vipIconUrl" :alt="vipIconAlt" />
              </div>
              <span class="vip-text">{{ getVipText() }}</span>
            </div>
            <el-button 
              class="vip-btn"
              @click="handleSubscribe"
            >
              {{ getVipButtonText() }}
            </el-button>
          </div>
          

        </div>
      </div>
    </div>

    <!-- 用户信息修改弹窗 -->
    <UserProfileModal
      v-model:visible="showProfileModal"
      :user-info="profileUserInfo"
      @save="handleProfileSave"
    />
  </div>
</template>

<script setup>
import { useUserStore } from '../store/user'
import { useRouter } from 'vue-router'
import { computed, ref, onMounted } from 'vue'
import UserProfileModal from './UserProfileModal.vue'
import { getCurrentUser } from '../api/user'
import { handleAuthFailure } from '../utils/auth'
import { Edit } from '@element-plus/icons-vue'

const userStore = useUserStore()
const router = useRouter()

// 骨架屏状态
const isLoading = ref(true)

// 头像悬浮提示状态
const showAvatarTooltip = ref(false)

// 用户信息修改弹窗状态
const showProfileModal = ref(false)

// 获取用户信息
const userInfo = computed(() => userStore.getUserInfo)

// VIP图标URL
const vipIconUrl = computed(() => {
  if (!userInfo.value || !userInfo.value.role) {
    return new URL('../assets/User_Vip/no_vip.svg', import.meta.url).href
  }
  switch (userInfo.value.role) {
    case 2: // VIP
      return new URL('../assets/User_Vip/vip.svg', import.meta.url).href
    case 3: // SVIP
      return new URL('../assets/User_Vip/svip.svg', import.meta.url).href
    case 1: // 普通用户
    default:
      return new URL('../assets/User_Vip/no_vip.svg', import.meta.url).href
  }
})

// VIP图标alt文本
const vipIconAlt = computed(() => {
  if (!userInfo.value || !userInfo.value.role) {
    return '普通用户'
  }
  switch (userInfo.value.role) {
    case 2:
      return 'VIP用户'
    case 3:
      return 'SVIP用户'
    case 1:
    default:
      return '普通用户'
  }
})

// 更新用户信息的函数
const updateUserInfo = async () => {
  try {
    console.log('PersonalCenterBanner: 开始获取最新用户信息')
    const response = await getCurrentUser()
    console.log('PersonalCenterBanner: API响应数据:', response)
    
    if (response.code === 200) {
      console.log('PersonalCenterBanner: 更新用户信息到store:', response.data)
      userStore.updateUserInfo(response.data)
      console.log('PersonalCenterBanner: 用户信息已更新到store')
    } else if (response.code === 500) {
      // 特别处理500错误
      console.error('PersonalCenterBanner: /me接口返回500错误:', response.message)
      handleAuthFailure(router, response.message || '请重新登录')
    } else {
      console.error('PersonalCenterBanner: 获取用户信息失败:', response.message)
    }
  } catch (error) {
    console.error('PersonalCenterBanner: 更新用户信息失败:', error)
    
    // 检查是否是500错误
    if (error.response && error.response.status === 500) {
      console.error('PersonalCenterBanner: 捕获到/me接口500错误')
      const errorMessage = error.response.data?.message || '请重新登录'
      handleAuthFailure(router, errorMessage)
    } else if (error.response && error.response.status === 401) {
      // 401错误说明认证失败
      console.error('PersonalCenterBanner: 捕获到401认证错误')
      handleAuthFailure(router, '请重新登录')
    }
  }
}

// 准备传递给UserProfileModal的用户信息
const profileUserInfo = computed(() => {
  if (!userInfo.value) {
    return {
      username: '',
      phone: '',
      realName: '',
      email: '',
      avatar: '',
      isVerified: false
    }
  }
  
  return {
    username: userInfo.value.username || '',
    phone: userInfo.value.phone || '',
    realName: userInfo.value.realName || '',
    email: userInfo.value.email || '',
    avatar: userInfo.value.avatarUrl || '',
    isVerified: userInfo.value.isVerified || false
  }
})

// 处理头像点击
const handleAvatarClick = () => {
  showProfileModal.value = true
}

// 处理用户信息保存
const handleProfileSave = async (updatedUserInfo) => {
  // 这里可以调用API更新用户信息
  console.log('保存用户信息:', updatedUserInfo)
  
  // 直接使用传递过来的更新后的用户信息，不需要再次获取
  if (updatedUserInfo) {
    console.log('使用更新后的用户信息:', updatedUserInfo)
    // 用户信息已经在UserProfileModal中更新了，这里不需要重复操作
  }
}

// 获取用户显示名称
const getUserDisplayName = () => {
  if (!userInfo.value) return '昵称昵称昵称'
  return userInfo.value.username || userInfo.value.phone || '昵称昵称昵称'
}

// 获取用户ID
const getUserID = () => {
  console.log('PersonalCenterBanner: getUserID被调用，当前userInfo:', userInfo.value)
  
  if (!userInfo.value) {
    console.log('PersonalCenterBanner: 用户信息为空，返回默认ID')
    return ''
  }
  
  const userId = userInfo.value.id || ''
  console.log('PersonalCenterBanner: 获取到的用户ID:', userId)
  return userId
}

// 获取头像URL
const getAvatarUrl = () => {
  if (!userInfo.value || !userInfo.value.avatarUrl) {
    return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjcwIiBjeT0iNzAiIHI9IjcwIiBmaWxsPSIjRjVGNUY1Ii8+CjxjaXJjbGUgY3g9IjcwIiBjeT0iNjAiIHI9IjE1IiBmaWxsPSIjQ0NDQ0NDIi8+CjxjaXJjbGUgY3g9IjcwIiBjeT0iODAiIHI9IjIwIiBmaWxsPSIjQ0NDQ0NDIi8+Cjwvc3ZnPgo='
  }
  return userInfo.value.avatarUrl
}

// 处理头像加载错误
const handleAvatarError = (event) => {
  event.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjcwIiBjeT0iNzAiIHI9IjcwIiBmaWxsPSIjRjVGNUY1Ii8+CjxjaXJjbGUgY3g9IjcwIiBjeT0iNjAiIHI9IjE1IiBmaWxsPSIjQ0NDQ0NDIi8+CjxjaXJjbGUgY3g9IjcwIiBjeT0iODAiIHI9IjIwIiBmaWxsPSIjQ0NDQ0NDIi8+Cjwvc3ZnPgo='
}

// 获取VIP过期时间
const getVipExpiryTime = computed(() => {
  if (!userInfo.value?.membershipExpiresAt) return null
  return new Date(userInfo.value.membershipExpiresAt)
})

// 格式化过期时间
const getVipExpiryText = computed(() => {
  if (!getVipExpiryTime.value) return null
  
  const expiry = getVipExpiryTime.value
  const now = new Date()
  
  if (expiry <= now) {
    return '已过期'
  }
  
  // 格式化为 YYYY/M/D-HH:mm:ss
  const year = expiry.getFullYear()
  const month = expiry.getMonth() + 1
  const day = expiry.getDate()
  const hours = expiry.getHours().toString().padStart(2, '0')
  const minutes = expiry.getMinutes().toString().padStart(2, '0')
  const seconds = expiry.getSeconds().toString().padStart(2, '0')
  
  return `${year}/${month}/${day}-${hours}:${minutes}:${seconds}`
})

// 获取VIP文本
const getVipText = () => {
  if (userInfo.value?.role === 3) {
    const expiryText = getVipExpiryText.value
    if (expiryText === '已过期') {
      return '您是SVIP会员 已过期'
    }
    return `您是SVIP会员 有效期至: ${expiryText}`
  } else if (userInfo.value?.role === 2) {
    const expiryText = getVipExpiryText.value
    if (expiryText === '已过期') {
      return '您是VIP会员 已过期'
    }
    return `您是VIP会员 有效期至: ${expiryText}`
  }
  return '加入VIP计划'
}

// 获取VIP按钮文本
const getVipButtonText = () => {
  if (userInfo.value?.role === 2 || userInfo.value?.role === 3) {
    return '去查看'
  }
  return '去订阅'
}

// 格式化余额
const formatBalance = (balance) => {
  if (!balance && balance !== 0) {
    return '0'
  }
  return parseFloat(balance).toFixed(0)
}

// 处理订阅VIP
const handleSubscribe = () => {
  router.push('/membership')
}

// 处理使用积分
const handleUsePoints = () => {
  // 这里可以添加跳转到积分使用页面的逻辑
  console.log('跳转到积分使用页面')
}

// 组件挂载时模拟加载
onMounted(async () => {
  console.log('PersonalCenterBanner: 组件挂载，开始获取用户信息')
  
  // 先获取最新用户信息
  await updateUserInfo()
  
  // 然后设置加载状态
  setTimeout(() => {
    isLoading.value = false
    console.log('PersonalCenterBanner: 组件加载完成，当前用户信息:', userInfo.value)
  }, 1000)
})


</script>

<style scoped>
.personal-center-banner {
  width: 100%;
  max-width: 100vw;
  height: 350px;  background: url(https://oss-1818ai-user-img-1302947942.cos.ap-guangzhou.myqcloud.com/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83.png);

  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0 clamp(20px, 3vw, 80px); /* 🎯 与Header保持一致的响应式padding */
  box-sizing: border-box;
}

/* Banner内容容器 */
.banner-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* 内容容器，跟随PersonalCenter布局逻辑 */
.content-container {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1400px;
  margin-left: clamp(85px, 7vw, 110px); /* 🎯 与PersonalCenter content-inner保持一致 */
  padding-top: 60px;
}

/* 用户头像 */
.user-avatar {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 1);
  overflow: hidden;
  z-index: 3;
  cursor: pointer;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 头像遮罩层 */
.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 4;
}

.edit-icon {
  font-size: 32px;
  color: white;
}

/* 头像悬浮提示 */
.avatar-tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

.avatar-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

/* 头像点击效果 */
.user-avatar:hover {
  transform: scale(1.05);
}

/* 用户信息 */
.user-info {
  position: relative;
  color: white;
  z-index: 3;
  flex: 1;
  min-width: 0;
}

.username {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: left;
}

.user-id {
  font-size: 16px;
  margin-bottom: 16px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-align: left;
}

/* 🎯 PC端大屏幕 - 与Header 1501px+一致 */
@media (min-width: 1501px) {
  .personal-center-banner {
    padding: 0 clamp(20px, 3vw, 80px); /* 🎯 与Header完全一致 */
  }
  
  .content-container,
  .skeleton-content-container {
    margin-left: clamp(85px, 7vw, 110px); /* 🎯 响应式左边距，与Header导航栏子项对齐 */
    gap: clamp(15px, 2vw, 25px);
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: clamp(120px, 10vw, 140px);
    height: clamp(120px, 10vw, 140px);
  }
  
  .username {
    font-size: clamp(20px, 2vw, 24px);
  }
  
  .user-id {
    font-size: clamp(14px, 1.2vw, 16px);
  }
  
  .vip-text {
    font-size: clamp(12px, 1vw, 14px);
  }
}

/* VIP状态 */
.vip-status {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  min-width: 300px;
}

.vip-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}

.vip-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vip-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.vip-text {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: white;
}

.vip-btn {
  background-color: transparent;
  border-color: rgba(255, 224, 153, 1);
  color: rgba(255, 224, 153, 1);
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  padding: 4px 12px;
  height: 28px;
}

.vip-btn:hover {
  background-color: rgba(255, 119, 8, 1);
  border-color: rgba(255, 119, 8, 1);
  color: rgba(255, 224, 153, 1);
}

/* 积分余额 */
.points-balance {
  display: flex;
  align-items: center;
  min-width: 300px;
}

.points-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}

.points-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.points-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.points-text {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: white;
}

.points-btn {
  background-color: transparent;
  border-color: rgba(168, 98, 43, 1);
  color: rgba(168, 98, 43, 1);
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  padding: 4px 12px;
  height: 28px;
}

.points-btn:hover {
  background-color: rgba(168, 98, 43, 0.1);
  border-color: rgba(168, 98, 43, 1);
  color: rgba(168, 98, 43, 1);
}

/* 骨架屏样式 */
.banner-skeleton {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* 骨架屏内容容器 */
.skeleton-content-container {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1400px;
  margin-left: clamp(85px, 7vw, 110px); /* 🎯 与实际内容保持一致 */
  padding-top: 60px;
}

.user-avatar-skeleton {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  z-index: 3;
  flex-shrink: 0;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

.user-info-skeleton {
  position: relative;
  z-index: 3;
  flex: 1;
  min-width: 0;
}

.username-skeleton {
  width: 120px;
  height: 24px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

.user-id-skeleton {
  width: 100px;
  height: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 16px;
}

.vip-status-skeleton {
  width: 300px;
  height: 28px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

/* 桌面端各断点 - 与Header同步 */
@media (max-width: 1600px) {
  .personal-center-banner {
    padding: 0 35px; /* 🎯 与Header一致 */
  }
  
  .content-container,
  .skeleton-content-container {
    margin-left: 98px; /* 🎯 适配1600px断点，与导航栏子项视觉对齐 */
    gap: 18px;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 130px;
    height: 130px;
  }
  
  .username {
    font-size: 22px;
  }
  
  .user-id {
    font-size: 15px;
  }
  
  .vip-text {
    font-size: 12px;
  }
}

@media (max-width: 1500px) {
  .personal-center-banner {
    padding: 0 20px; /* 🎯 与Header一致 */
  }
  
  .content-container,
  .skeleton-content-container {
    margin-left: 50px; /* 🎯 移动端导航隐藏，减少左边距 */
    gap: 15px;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 125px;
    height: 125px;
  }
  
  .username {
    font-size: 21px;
  }
  
  .user-id {
    font-size: 14px;
  }
  
  .vip-text {
    font-size: 13px;
  }
}

@media (max-width: 1400px) {
  .personal-center-banner {
    padding: 0 30px; /* 🎯 与Header一致 */
  }
  
  .content-container,
  .skeleton-content-container {
    margin-left: 95px; /* 🎯 适配1400px断点，与导航栏子项视觉对齐 */
    gap: 16px;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 120px;
    height: 120px;
  }
  
  .username {
    font-size: 20px;
  }
  
  .user-id {
    font-size: 14px;
  }
}

@media (max-width: 1200px) {
  .personal-center-banner {
    padding: 0 25px; /* 🎯 与Header一致 */
  }
  
  .content-container,
  .skeleton-content-container {
    margin-left: 90px; /* 🎯 适配1200px断点，与导航栏子项视觉对齐 */
    gap: 15px;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 115px;
    height: 115px;
  }
  
  .username {
    font-size: 19px;
  }
  
  .user-id {
    font-size: 13px;
  }
  
  .vip-text {
    font-size: 12px;
  }
}

@media (max-width: 900px) {
  .personal-center-banner {
    padding: 0 15px; /* 🎯 与Header一致 */
  }
  
  .content-container,
  .skeleton-content-container {
    margin-left: 30px; /* 🎯 中屏尺寸，减少左边距 */
    gap: 12px;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 110px;
    height: 110px;
  }
  
  .username {
    font-size: 18px;
  }
  
  .user-id {
    font-size: 13px;
  }
  
  .vip-text {
    font-size: 12px;
  }
  
  .vip-btn {
    padding: 3px 10px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .personal-center-banner {
    padding: 0 15px; /* 🎯 与Header一致 */
    height: 360px; /* 🎯 增加高度，适配更大的padding-top */
  }
  
  .content-container,
  .skeleton-content-container {
    flex-direction: column; /* 移动端垂直布局 */
    text-align: center;
    margin-left: 0; /* 🎯 移动端重置左边距 */
    gap: 15px;
    padding-top: 80px; /* 🎯 增加顶部间距，避免被Header遮盖 */
    align-items: center;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 100px;
    height: 100px;
  }
  
  .user-info,
  .user-info-skeleton {
    text-align: center;
    width: 100%;
  }
  
  .username {
    font-size: 18px;
  }
  
  .user-id {
    font-size: 13px;
  }
  
  .vip-status {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .vip-text {
    font-size: 12px;
  }
  
  .vip-btn {
    padding: 4px 12px;
    font-size: 11px;
    height: 26px;
  }
}

@media (max-width: 576px) {
  .personal-center-banner {
    padding: 0 12px; /* 🎯 与Header一致 */
    height: 340px; /* 🎯 增加高度，适配更大的padding-top */
  }
  
  .content-container,
  .skeleton-content-container {
    padding-top: 75px; /* 🎯 增加顶部间距，避免被Header遮盖 */
    gap: 12px;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 90px;
    height: 90px;
  }
  
  .username {
    font-size: 16px;
  }
  
  .user-id {
    font-size: 12px;
  }
  
  .vip-text {
    font-size: 11px;
  }
  
  .vip-btn {
    padding: 3px 10px;
    font-size: 10px;
    height: 24px;
  }
}

@media (max-width: 500px) {
  .personal-center-banner {
    padding: 0 12px; /* 与Header的500px断点对齐 */
    height: 350px; /* 🎯 增加高度，适配Header双行布局和更大的padding-top */
  }
  
  .content-container,
  .skeleton-content-container {
    padding-top: 110px; /* 🎯 500px以下Header可能是双行布局，需要更多间距 */
    gap: 10px;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 85px;
    height: 85px;
  }
  
  .username {
    font-size: 15px;
  }
  
  .user-id {
    font-size: 11px;
  }
  
  .vip-status {
    flex-direction: column;
    gap: 6px;
  }
  
  .vip-info {
    justify-content: center;
  }
  
  .vip-text {
    font-size: 10px;
  }
  
  .vip-btn {
    padding: 3px 8px;
    font-size: 9px;
    height: 22px;
    align-self: center;
    min-width: 50px;
  }
}

@media (max-width: 480px) {
  .personal-center-banner {
    padding: 0 10px; /* 与Header的480px断点对齐 */
    height: 330px; /* 🎯 增加高度，适配更大的padding-top */
  }
  
  .content-container,
  .skeleton-content-container {
    padding-top: 95px; /* 🎯 增加顶部间距，避免被Header遮盖 */
    gap: 8px;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 80px;
    height: 80px;
    border-width: 3px; /* 减少边框厚度 */
  }
  
  .username {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .user-id {
    font-size: 10px;
    margin-bottom: 12px;
  }
  
  .vip-status {
    gap: 4px;
  }
  
  .vip-text {
    font-size: 9px;
  }
  
  .vip-btn {
    padding: 2px 6px;
    font-size: 8px;
    height: 20px;
    min-width: 45px;
  }
}

@media (max-width: 360px) {
  .personal-center-banner {
    padding: 0 8px;
    height: 315px; /* 🎯 增加高度，适配更大的padding-top */
  }
  
  .content-container,
  .skeleton-content-container {
    padding-top: 90px; /* 🎯 增加顶部间距，避免被Header遮盖 */
    gap: 6px;
  }
  
  .user-avatar,
  .user-avatar-skeleton {
    width: 75px;
    height: 75px;
    border-width: 2px;
  }
  
  .username {
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  .user-id {
    font-size: 9px;
    margin-bottom: 10px;
  }
  
  .vip-status {
    gap: 3px;
  }
  
  .vip-text {
    font-size: 8px;
    max-width: 200px;
    word-break: break-word;
  }
  
  .vip-btn {
    padding: 2px 5px;
    font-size: 7px;
    height: 18px;
    min-width: 40px;
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 添加线性渐变遮罩层 */
.personal-center-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  z-index: 1;
}
</style> 