<template>
  <view class="cooking-machine-skeleton bg-#fff">
    <!-- 主图骨架屏 -->
    <view class="w-750rpx h-750rpx skeleton-item"></view>
    
    <!-- 固定头部骨架屏 -->
    <view class="fixed top-0 left-0 z-9 w-full px-30rpx pt-16rpx">
      <!-- 状态栏占位 -->
      <view class="w-full h-44rpx"></view>
      <!-- 返回按钮骨架屏 -->
      <view class="w-48rpx h-48rpx rounded-8rpx skeleton-item"></view>
    </view>

    <!-- 内容区域骨架屏 -->
    <view class="px-30rpx py-28rpx">
      <!-- 产品标题骨架屏 -->
      <view class="w-500rpx h-40rpx mb-28rpx skeleton-item"></view>
      
      <!-- 销量骨架屏 -->
      <view class="w-300rpx h-28rpx mb-64rpx skeleton-item"></view>
      
      <!-- 分段控制器骨架屏 -->
      <view class="w-374rpx h-60rpx rounded-30rpx mb-36rpx skeleton-item"></view>
      
      <!-- 详细描述骨架屏 -->
      <view class="space-y-16rpx">
        <!-- 概述标题 -->
        <view class="w-120rpx h-30rpx skeleton-item"></view>
        
        <!-- 描述文本行 -->
        <template v-for="item in 5" :key="item">
          <view 
            class="skeleton-item"
            :class="[
              item % 4 === 0 ? 'w-200rpx' : item % 3 === 0 ? 'w-600rpx' : 'w-680rpx',
              'h-30rpx'
            ]"
          ></view>
        </template>
        
        <!-- 主要类型与形态标题 -->
        <view class="w-280rpx h-30rpx mt-32rpx skeleton-item"></view>
      </view>
    </view>

    <!-- 底部按钮骨架屏 -->
    <view class="fixed bottom-0 left-0 w-full px-30rpx pb-30rpx">
      <view class="w-full h-88rpx rounded-44rpx skeleton-item"></view>
    </view>
    
    <!-- 底部安全区域 -->
    <view class="h-200rpx"></view>
  </view>
</template>

<script setup lang="ts">
// 炒菜机页面骨架屏组件
</script>

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