<template>
  <view class="skeleton-card">
    <view class="image-skel"></view>
    <view class="meta-skel">
      <view class="line short"></view>
      <view class="line"></view>
      <view class="line tiny"></view>
    </view>
  </view>
</template>

<script lang="uts">
export default { }
</script>

<style scoped>
.skeleton-card { display:flex; gap:16rpx; padding:16rpx; background:#fff; border-radius:16rpx }
.image-skel { width:320rpx; height:320rpx; background:linear-gradient(90deg,#f0f0f0,#e8e8e8); border-radius:12rpx }
.meta-skel { flex:1; display:flex; flex-direction:column; justify-content:space-between }
.line { height:28rpx; background:linear-gradient(90deg,#f0f0f0,#e8e8e8); border-radius:8rpx; margin-bottom:12rpx }
.line.short { width:50% }
.line.tiny { width:30%; height:20rpx }
</style>
