<template> 
   <SkeletonBase> 
     <view class="skeleton-banner"></view> 
     
     <view class="skeleton-entry"> 
       <view v-for="i in 4" :key="i" class="skeleton-entry-item"> 
         <view class="skeleton-icon"></view> 
         <view class="skeleton-text"></view> 
       </view> 
     </view> 
     
     <view class="skeleton-section"> 
       <view class="skeleton-section-title"></view> 
       <view v-for="i in 3" :key="i" class="skeleton-course-item"> 
         <view class="skeleton-course-img"></view> 
         <view class="skeleton-course-info"> 
           <view class="skeleton-course-title"></view> 
           <view class="skeleton-course-desc"></view> 
         </view> 
       </view> 
     </view> 
   </SkeletonBase> 
 </template> 
 
 <script setup> 
 import SkeletonBase from './SkeletonBase.vue' 
 </script> 
 
 <style lang="scss" scoped> 
 .skeleton-banner { 
   height: 300rpx; 
   background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
   background-size: 200% 100%; 
   animation: shimmer 1.5s infinite; 
   margin: 20rpx; 
   border-radius: 20rpx; 
 } 
 
 .skeleton-entry { 
   display: flex; 
   justify-content: space-around; 
   padding: 30rpx 20rpx; 
 } 
 
 .skeleton-entry-item { 
   display: flex; 
   flex-direction: column; 
   align-items: center; 
   gap: 12rpx; 
 } 
 
 .skeleton-icon { 
   width: 80rpx; 
   height: 80rpx; 
   background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
   background-size: 200% 100%; 
   animation: shimmer 1.5s infinite; 
   border-radius: 40rpx; 
 } 
 
 .skeleton-text { 
   width: 60rpx; 
   height: 24rpx; 
   background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
   background-size: 200% 100%; 
   animation: shimmer 1.5s infinite; 
   border-radius: 12rpx; 
 } 
 
 .skeleton-section { 
   padding: 20rpx; 
 } 
 
 .skeleton-section-title { 
   height: 40rpx; 
   width: 200rpx; 
   background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
   background-size: 200% 100%; 
   animation: shimmer 1.5s infinite; 
   border-radius: 8rpx; 
   margin-bottom: 24rpx; 
 } 
 
 .skeleton-course-item { 
   display: flex; 
   gap: 20rpx; 
   margin-bottom: 24rpx; 
   padding: 20rpx; 
   background: #fff; 
   border-radius: 20rpx; 
 } 
 
 .skeleton-course-img { 
   width: 160rpx; 
   height: 160rpx; 
   background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
   background-size: 200% 100%; 
   animation: shimmer 1.5s infinite; 
   border-radius: 16rpx; 
 } 
 
 .skeleton-course-info { 
   flex: 1; 
   display: flex; 
   flex-direction: column; 
   gap: 16rpx; 
 } 
 
 .skeleton-course-title { 
   height: 36rpx; 
   width: 80%; 
   background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
   background-size: 200% 100%; 
   animation: shimmer 1.5s infinite; 
   border-radius: 8rpx; 
 } 
 
 .skeleton-course-desc { 
   height: 28rpx; 
   width: 60%; 
   background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
   background-size: 200% 100%; 
   animation: shimmer 1.5s infinite; 
   border-radius: 8rpx; 
 } 
 
 @keyframes shimmer { 
   0% { background-position: 200% 0; } 
   100% { background-position: -200% 0; } 
 } 
 </style>