<template>
  <view class="">
    <!-- 筛选工具 -->
    <view class="filter-section">
      <view class="filter-list">
        <view
            v-for="i in 4"
            :key="i"
            class="filter-item-skeleton skeleton-item"
        ></view>
      </view>
    </view>

    <!-- All Merchants 区域 -->
    <view class="all-merchants-section">
      <view class="section-title-skeleton skeleton-item"></view>
      <view class="merchant-card-skeleton skeleton-item"></view>
      <view class="w-264rpx h-36rpx rounded-8rpx mt-20rpx skeleton-item"></view>
      <view class="w-264rpx h-36rpx rounded-8rpx mt-20rpx skeleton-item"></view>

      <view class="merchant-card-skeleton skeleton-item mt-20rpx"></view>
    </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;
  }
}

// 筛选工具
.filter-section {
  padding: 32rpx 30rpx;

  .filter-list {
    display: flex;
    gap: 20rpx;

    .filter-item-skeleton {
      flex: 1;
      height: 64rpx;
      border-radius: 32rpx;
    }
  }
}

// All Merchants 区域
.all-merchants-section {
  padding: 36rpx 30rpx 0rpx;

  .section-title-skeleton {
    width: 224rpx;
    height: 36rpx;
    border-radius: 8rpx;
    margin-bottom: 32rpx;
  }

  .merchant-card-skeleton {
    width: 690rpx;
    height: 766rpx;
    border-radius: 24rpx;
  }
}
</style>