ali_ai_learn_web/src/components/SkeletonCard.vue

<template>
  <div class="skeleton-card" :style="{ width: width, borderRadius: radius }">
    <!-- 封面骨架 -->
    <div class="skeleton" :style="{ height: imageHeight }"></div>
    <!-- 内容骨架 -->
    <div class="skeleton-body" :style="{ padding: bodyPadding }">
      <!-- 时间行 -->
      <div class="skeleton skeleton-line" style="width: 40%; height: 14px; margin-bottom: 10px;"></div>
      <!-- 标题 -->
      <div class="skeleton skeleton-line" style="width: 90%; height: 18px; margin-bottom: 8px;"></div>
      <div class="skeleton skeleton-line" style="width: 70%; height: 18px; margin-bottom: 12px;"></div>
      <!-- 描述 -->
      <div class="skeleton skeleton-line" style="width: 100%; height: 13px; margin-bottom: 16px;"></div>
      <!-- 作者行 -->
      <div class="skeleton-row">
        <div class="skeleton skeleton-avatar"></div>
        <div class="skeleton skeleton-line" style="width: 80px; height: 14px;"></div>
        <div style="flex: 1;"></div>
        <div class="skeleton skeleton-line" style="width: 60px; height: 14px;"></div>
      </div>
      <!-- 按钮行 -->
      <div class="skeleton-row" style="margin-top: 12px; gap: 8px;">
        <div class="skeleton skeleton-btn"></div>
        <div class="skeleton skeleton-btn"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  width: {
    type: String,
    default: '345px',
  },
  imageHeight: {
    type: String,
    default: '204px',
  },
  bodyPadding: {
    type: String,
    default: '16px',
  },
  radius: {
    type: String,
    default: '12px',
  },
})
</script>

<style scoped>
.skeleton-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  overflow: hidden;
}

.skeleton-body {
  background: white;
}

.skeleton-line {
  display: block;
  border-radius: 4px;
}

.skeleton-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-btn {
  flex: 1;
  height: 36px;
  border-radius: 6px;
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>