<template>
  <view class="home-skeleton bg-#F6F6F6">
    <view class="pt-65rpx">

      <!-- 营业数据骨架屏 -->
      <view class="mx-30rpx rounded-30rpx bg-white px-20rpx pt-30rpx pb-28rpx mb-26rpx">
        <view class="flex items-center mb-48rpx">
          <view class="w-40rpx h-40rpx rounded-8rpx skeleton-item"></view>
          <view class="w-150rpx h-30rpx ml-10rpx skeleton-item"></view>
        </view>
        <view class="grid grid-cols-3 gap-y-47rpx">
          <template v-for="item in 6" :key="item">
            <view class="flex flex-col items-center">
              <view class="w-80rpx h-34rpx mb-20rpx skeleton-item"></view>
              <view class="w-120rpx h-22rpx skeleton-item"></view>
            </view>
          </template>
        </view>
      </view>

      <!-- 广告图片骨架屏 -->
      <view class="mx-30rpx my-26rpx h-218rpx rounded-16rpx skeleton-item"></view>

      <!-- 营销工具骨架屏 -->
      <view class="px-30rpx py-36rpx bg-white mb-26rpx">
        <view class="w-180rpx h-36rpx mb-48rpx skeleton-item"></view>
        <view class="grid grid-cols-4 gap-x-20rpx">
          <template v-for="item in 4" :key="item">
            <view class="flex flex-col items-center">
              <view class="w-52rpx h-52rpx rounded-12rpx mb-24rpx skeleton-item"></view>
              <view class="w-80rpx h-20rpx skeleton-item"></view>
            </view>
          </template>
        </view>
      </view>

      <!-- 订单列表骨架屏 -->
      <view class="pt-10rpx pb-36rpx bg-white mb-37rpx">
        <!-- Tab 骨架屏 -->
        <view class="flex px-30rpx mb-34rpx">
          <template v-for="item in 3" :key="item">
            <view class="w-120rpx h-30rpx mr-40rpx skeleton-item"></view>
          </template>
        </view>

        <!-- 日期选择器骨架屏 -->
        <view class="px-30rpx mb-28rpx">
          <view class="flex items-center gap-28rpx">
            <template v-for="item in 5" :key="item">
              <view class="w-140rpx h-56rpx rounded-56rpx skeleton-item"></view>
            </template>
          </view>
        </view>

        <!-- 订单项骨架屏 -->
        <view class="px-30rpx">
          <view class="bg-#F6F6F6 px-20rpx py-28rpx rounded-16rpx">
            <template v-for="item in 2" :key="item">
              <view class="w-full p-20rpx rounded-16rpx bg-white mb-10rpx last:mb-0">
                <view class="flex items-center justify-between mb-20rpx">
                  <view class="w-150rpx h-24rpx skeleton-item"></view>
                  <view class="w-80rpx h-24rpx skeleton-item"></view>
                </view>
                <view class="flex items-center justify-between mb-20rpx">
                  <view class="w-200rpx h-20rpx skeleton-item"></view>
                  <view class="w-100rpx h-20rpx skeleton-item"></view>
                </view>
                <view class="flex items-center justify-between mb-20rpx">
                  <view class="w-180rpx h-20rpx skeleton-item"></view>
                  <view class="w-120rpx h-20rpx skeleton-item"></view>
                </view>
                <view class="flex items-center justify-between">
                  <view class="w-160rpx h-20rpx skeleton-item"></view>
                  <view class="w-120rpx h-56rpx rounded-56rpx skeleton-item"></view>
                </view>
              </view>
            </template>
            <view class="w-128rpx h-40rpx rounded-40rpx mx-auto mt-24rpx skeleton-item"></view>
          </view>
        </view>
      </view>

      <!-- 底部结束语骨架屏 -->
      <view class="px-104rpx flex-center-sb pb-37rpx">
        <view class="w-150rpx h-16rpx skeleton-item"></view>
        <view class="w-120rpx h-24rpx mx-20rpx skeleton-item"></view>
        <view class="w-150rpx h-16rpx skeleton-item"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 骨架屏组件
</script>

<style scoped lang="scss">
.home-skeleton {
  min-height: 100vh;
}
</style>