<template>
  <view class="browse-skeleton">
    <!-- 头部标题区域 -->
    <view class="header-section">
      <view class="title-skeleton skeleton-item"></view>
      <view class="header-actions">
        <view class="action-icon-skeleton skeleton-item"></view>
        <view class="action-icon-skeleton skeleton-item"></view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar-skeleton skeleton-item"></view>
    </view>

    <!-- 精选食谱区域 -->
    <view class="selected-recipes-section">
      <view class="section-header">
        <view class="section-title-skeleton skeleton-item"></view>
        <view class="section-action-skeleton skeleton-item"></view>
      </view>
      <view class="recipes-grid">
        <view 
          v-for="i in 3" 
          :key="i" 
          class="recipe-card-skeleton skeleton-item"
        ></view>
      </view>
    </view>

    <!-- 附近美食区域 -->
    <view class="nearby-cuisine-section">
      <view class="section-title-skeleton skeleton-item"></view>
      <view class="cuisine-grid">
        <view 
          v-for="i in 8" 
          :key="i" 
          class="cuisine-card-skeleton skeleton-item"
        ></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;
  }
}

.browse-skeleton {
  background-color: #fff;
  min-height: 100vh;
  padding: 0 30rpx;
}

// 头部区域
.header-section {
  padding: 16rpx 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .title-skeleton {
    width: 200rpx;
    height: 56rpx;
    border-radius: 8rpx;
  }
  
  .header-actions {
    display: flex;
    gap: 20rpx;
    
    .action-icon-skeleton {
      width: 40rpx;
      height: 40rpx;
      border-radius: 20rpx;
    }
  }
}

// 搜索栏
.search-section {
  padding: 48rpx 0 0;
  
  .search-bar-skeleton {
    width: 690rpx;
    height: 88rpx;
    border-radius: 44rpx;
  }
}

// 精选食谱区域
.selected-recipes-section {
  padding: 56rpx 0 0;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;
    
    .section-title-skeleton {
      width: 292rpx;
      height: 36rpx;
      border-radius: 8rpx;
    }
    
    .section-action-skeleton {
      width: 64rpx;
      height: 64rpx;
      border-radius: 32rpx;
    }
  }
  
  .recipes-grid {
    display: flex;
    gap: 30rpx;
    overflow-x: auto;
    
    .recipe-card-skeleton {
      flex-shrink: 0;
      width: 310rpx;
      height: 296rpx;
      border-radius: 24rpx;
    }
  }
}

// 附近美食区域
.nearby-cuisine-section {
  padding: 62rpx 0 0;
  
  .section-title-skeleton {
    width: 252rpx;
    height: 36rpx;
    border-radius: 8rpx;
    margin-bottom: 32rpx;
  }
  
  .cuisine-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30rpx;
    
    .cuisine-card-skeleton {
      height: 186rpx;
      border-radius: 24rpx;
    }
  }
}

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