<template>
  <view class="search-skeleton pt-88rpx">
    <!-- 头部区域 -->
    <view class="header-section">
      <view class="back-button-skeleton skeleton-item"></view>
      <view class="search-bar-skeleton skeleton-item"></view>
    </view>
    
    <!-- 最近搜索区域 -->
    <view class="recent-section">
      <view class="section-title-skeleton skeleton-item"></view>
      <view class="recent-list">
        <view 
          v-for="i in 3" 
          :key="i" 
          class="recent-item-skeleton skeleton-item"
        ></view>
      </view>
    </view>
    
    <!-- 热门分类区域 -->
    <view class="popular-section">
      <view class="section-title-skeleton skeleton-item"></view>
      <template v-for="item in 6">
        <view class="flex items-center h-144rpx">
          <view class="w-64rpx h-64rpx mr-28rpx rounded-50% skeleton-item"></view>
          <view class="w-420rpx h-60rpx rounded-10rpx skeleton-item"></view>
        </view>
      </template>
    </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;
  }
}

.search-skeleton {
  background-color: #fff;
  min-height: 100vh;
}

// 状态栏
.status-bar {
  height: 88rpx;
  width: 100%;
}

// 头部区域
.header-section {
  padding: 0 30rpx 40rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  .back-button-skeleton {
    width: 44rpx;
    height: 44rpx;
    border-radius: 22rpx;
  }
  
  .search-bar-skeleton {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
  }
}

// 最近搜索区域
.recent-section {
  padding: 0 30rpx 40rpx;
  
  .section-title-skeleton {
    width: 200rpx;
    height: 40rpx;
    border-radius: 8rpx;
    margin-bottom: 30rpx;
  }
  
  .recent-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .recent-item-skeleton {
      height: 60rpx;
      border-radius: 8rpx;
    }
  }
}

// 热门分类区域
.popular-section {
  padding: 40rpx 30rpx 0;
  
  .section-title-skeleton {
    width: 300rpx;
    height: 40rpx;
    border-radius: 8rpx;
    margin-bottom: 30rpx;
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .category-grid {
    grid-template-columns: 1fr;
  }
}
</style> 