refactor(UI): 移除卡片图片并添加骨架屏动画

移除多个页面中的默认卡片图片以简化UI
在评分图表区域添加骨架屏加载动画,提升用户体验
This commit is contained in:
2025-07-07 19:29:09 +08:00
parent 04c14f9648
commit 5ff5b53ed4
5 changed files with 33 additions and 4 deletions

View File

@@ -128,4 +128,31 @@ body {
.age-rating svg {
width: 20px;
height: 20px;
}
/* 骨架屏加载动画 */
.skeleton-chart {
width: 400px;
height: 200px;
background: #f0f0f0;
border-radius: 4px;
position: relative;
overflow: hidden;
}
@keyframes shimmer {
0% { background-position: -468px 0 }
100% { background-position: 468px 0 }
}
.skeleton-chart::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0) 100%);
animation: shimmer 2s infinite;
}