<template>
  <view class="">
    <!-- 食品类型分类 -->
    <view class="food-type-section mt-36rpx">
      <view class="food-type-list">
        <view
            v-for="i in 5"
            :key="i"
            class="food-type-item-skeleton skeleton-item"
        ></view>
      </view>
    </view>

    <view class="flex-center-sb px-30rpx mb-36rpx">
      <view class="w-200rpx h-36rpx rounded-8rpx skeleton-item"></view>
      <view class="flex items-center gap-20rpx">
        <view class="w-200rpx h-64rpx rounded-64rpx px-24rpx skeleton-item"></view>
        <view class="w-200rpx h-64rpx rounded-64rpx px-24rpx skeleton-item"></view>
      </view>
    </view>

    <view class="px-30rpx">
      <template v-for="(item, index) in 5">
         <view  :class="[index === 0 ? '' : 'mt-52rpx']" class="flex items-center">
           <view class="skeleton-item w-210rpx h-200rpx mr-28rpx shrink-0 rounded-24rpx"></view>
          <view class="w-full py-10rpx h-200rpx flex flex-col justify-between flex-1">
            <view class="w-100% h-36rpx rounded-8rpx skeleton-item"></view>
            <view class="w-50% h-36rpx rounded-8rpx skeleton-item"></view>
            <view class="w-60% h-36rpx rounded-8rpx skeleton-item"></view>
          </view>
         </view>
      </template>
    </view>
  </view>
</template>
<script>
export default {
  name: 'FoodSkeleton',
};
</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;
  }
}

// 食品类型分类
.food-type-section {
  padding: 22rpx 30rpx;

  .food-type-list {
    display: flex;
    gap: 20rpx;
    overflow-x: auto;

    .food-type-item-skeleton {
      flex-shrink: 0;
      width: 112rpx;
      height: 112rpx;
      border-radius: 56rpx;
    }
  }
}
</style>