<template>
  <view class="recipe-skeleton">
    <!-- 顶部图片区域 -->
    <view class="image-section skeleton-item"></view>
    
    <!-- 返回按钮 -->
    <view class="back-button-container">
      <view class="back-button skeleton-item"></view>
    </view>
    
    <!-- 状态栏 -->
    <view class="status-bar skeleton-item"></view>
    
    <!-- 内容卡片 -->
    <view class="content-card">
      <!-- 标题区域 -->
      <view class="title-section">
        <view class="recipe-icon skeleton-item"></view>
        <view class="recipe-title skeleton-item"></view>
      </view>
      
      <!-- 材料区域 -->
      <view class="ingredients-section">
        <view class="section-title skeleton-item"></view>
        <view class="ingredients-content">
          <view 
            v-for="i in 4" 
            :key="i" 
            class="ingredient-line skeleton-item"
          ></view>
        </view>
      </view>
      
      <!-- 视频预览区域 -->
      <view class="video-preview skeleton-item"></view>
      
      <!-- 做法区域 -->
      <view class="steps-section">
        <view class="section-title skeleton-item"></view>
        <view class="steps-content">
          <view 
            v-for="i in 8" 
            :key="i" 
            class="step-line skeleton-item"
          ></view>
        </view>
      </view>
      
      <!-- 收藏按钮 -->
      <view class="favorite-button skeleton-item"></view>
      
      <!-- 点赞提示 -->
      <view class="like-hint skeleton-item"></view>
      
      <!-- 用户头像列表 -->
      <view class="user-avatars">
        <view 
          v-for="i in 5" 
          :key="i" 
          class="user-avatar skeleton-item"
        ></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 菜谱详情骨架屏组件
</script>

<style scoped lang="scss">
.recipe-skeleton {
  background-color: #fff;
  min-height: 100vh;
  position: relative;
}

// 顶部图片区域
.image-section {
  width: 750rpx;
  height: 750rpx;
  position: relative;
}

// 返回按钮
.back-button-container {
  position: absolute;
  top: 104rpx;
  left: 30rpx;
  z-index: 10;
  
  .back-button {
    width: 48rpx;
    height: 48rpx;
    border-radius: 24rpx;
  }
}

// 状态栏
.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 88rpx;
}

// 内容卡片
.content-card {
  position: relative;
  margin-top: -68rpx;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #fff;
  padding: 0 30rpx;
  min-height: 1000rpx;
}

// 标题区域
.title-section {
  display: flex;
  align-items: center;
  padding-top: 40rpx;
  margin-bottom: 40rpx;
  
  .recipe-icon {
    width: 44rpx;
    height: 44rpx;
    border-radius: 22rpx;
    margin-right: 12rpx;
  }
  
  .recipe-title {
    width: 237rpx;
    height: 36rpx;
    border-radius: 8rpx;
  }
}

// 材料区域
.ingredients-section {
  margin-bottom: 40rpx;
  
  .section-title {
    width: 120rpx;
    height: 30rpx;
    border-radius: 6rpx;
    margin-bottom: 20rpx;
  }
  
  .ingredients-content {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .ingredient-line {
      width: 100%;
      height: 30rpx;
      border-radius: 6rpx;
    }
  }
}

// 视频预览区域
.video-preview {
  width: 690rpx;
  height: 360rpx;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
}

// 做法区域
.steps-section {
  margin-bottom: 40rpx;
  
  .section-title {
    width: 120rpx;
    height: 30rpx;
    border-radius: 6rpx;
    margin-bottom: 20rpx;
  }
  
  .steps-content {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .step-line {
      width: 100%;
      height: 30rpx;
      border-radius: 6rpx;
    }
  }
}

// 收藏按钮
.favorite-button {
  width: 310rpx;
  height: 88rpx;
  border-radius: 44rpx;
  margin: 40rpx auto;
}

// 点赞提示
.like-hint {
  width: 353rpx;
  height: 24rpx;
  border-radius: 6rpx;
  margin: 30rpx auto;
}

// 用户头像列表
.user-avatars {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-bottom: 60rpx;
  
  .user-avatar {
    width: 68rpx;
    height: 68rpx;
    border-radius: 34rpx;
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .video-preview {
    height: 300rpx;
  }
}
</style>