<template>
  <view class="mine-skeleton">
    <!-- 用户信息区域 -->
    <view class="user-info-section flex-center-sb">
        <view class="user-name-skeleton skeleton-item"></view>
      <view class="user-avatar-skeleton skeleton-item"></view>
    </view>

    <!-- 统计卡片区域 -->
    <view class="stats-section">
      <view class="stats-list">
        <view 
          v-for="i in 3" 
          :key="i" 
          class="stat-card-skeleton skeleton-item"
        >
          <view class="stat-number-skeleton skeleton-item"></view>
          <view class="stat-label-skeleton skeleton-item"></view>
        </view>
      </view>
    </view>

    <!-- 会员横幅区域 -->
    <view class="member-banner-section">
      <view class="member-banner-skeleton skeleton-item">
        <view class="banner-content">
          <view class="banner-title-skeleton skeleton-item"></view>
          <view class="banner-subtitle-skeleton skeleton-item"></view>
        </view>
        <view class="banner-icon-skeleton skeleton-item"></view>
      </view>
    </view>

    <!-- 菜单列表区域 -->
    <view class="menu-section">
      <view class="menu-list">
        <view 
          v-for="i in 9" 
          :key="i" 
          class="menu-item-skeleton"
        >
          <view class="menu-icon-skeleton skeleton-item"></view>
          <view class="menu-text-skeleton skeleton-item"></view>
          <view class="menu-arrow-skeleton skeleton-item"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 个人主页骨架屏组件
</script>

<style scoped lang="scss">
// 通用骨架屏样式
.skeleton-item {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

// 闪烁动画
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.mine-skeleton {
  background-color: #fff;
  padding: 0 30rpx;
}

// 用户信息区域
.user-info-section {
  padding: 36rpx 0 0; 
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  .user-avatar-skeleton {
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
  }
  
  .user-name-skeleton {
    width: 233rpx;
    height: 56rpx;
    border-radius: 8rpx;
  }
}

// 统计卡片区域
.stats-section {
  padding: 90rpx 0 0;
  
  .stats-list {
    display: flex;
    gap: 36rpx;
    
    .stat-card-skeleton {
      flex: 1;
      height: 194rpx;
      border-radius: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20rpx;
      
      .stat-number-skeleton {
        width: 80rpx;
        height: 44rpx;
        border-radius: 6rpx;
      }
      
      .stat-label-skeleton {
        width: 120rpx;
        height: 28rpx;
        border-radius: 6rpx;
      }
    }
  }
}

// 会员横幅区域
.member-banner-section {
  padding: 40rpx 0 0;
  
  .member-banner-skeleton {
    width: 690rpx;
    height: 152rpx;
    border-radius: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28rpx;
    
    .banner-content {
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      
      .banner-title-skeleton {
        width: 457rpx;
        height: 57rpx;
        border-radius: 8rpx;
      }
      
      .banner-subtitle-skeleton {
        width: 497rpx;
        height: 48rpx;
        border-radius: 6rpx;
      }
    }
    
    .banner-icon-skeleton {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
  }
}

// 菜单列表区域
.menu-section {
  padding: 80rpx 0 0;
  
  .menu-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    
    .menu-item-skeleton {
      display: flex;
      align-items: center;
      padding: 22rpx 0;
    //   border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .menu-icon-skeleton {
        width: 44rpx;
        height: 44rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .menu-text-skeleton {
        flex: 1;
        height: 30rpx;
        border-radius: 6rpx;
      }
      
      .menu-arrow-skeleton {
        width: 22rpx;
        height: 30rpx;
        border-radius: 4rpx;
        margin-left: 20rpx;
      }
    }
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .stats-list {
    flex-direction: column;
    gap: 20rpx;
  }
  
  .member-banner-skeleton {
    flex-direction: column;
    gap: 20rpx;
    padding: 20rpx;
    
    .banner-content {
      align-items: center;
      text-align: center;
    }
  }
}
</style> 