25 lines
1.1 KiB
Rust
25 lines
1.1 KiB
Rust
use dioxus::prelude::*;
|
|
|
|
/// 文章卡片骨架屏 - 模拟 PostCard 的视觉结构
|
|
/// 包含：标题行(24px bold) + 摘要2行 + 元信息行(日期+标签)
|
|
#[component]
|
|
pub fn PostCardSkeleton() -> Element {
|
|
rsx! {
|
|
article {
|
|
class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333] animate-pulse",
|
|
// 标题占位 (模拟 h2 text-2xl font-bold)
|
|
div { class: "h-7 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
|
|
// 摘要第一行
|
|
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mb-2" }
|
|
// 摘要第二行
|
|
div { class: "h-4 w-5/6 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
|
|
// 元信息行 (日期 + 标签)
|
|
div { class: "flex items-center gap-3 mt-3",
|
|
div { class: "h-3.5 w-20 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
|
|
div { class: "h-3.5 w-1 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
|
|
div { class: "h-3.5 w-16 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
|
|
}
|
|
}
|
|
}
|
|
}
|