LeonMMcoset/leonapp
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

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

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

2
app.php
View File

@@ -212,6 +212,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['rating'])) {
</div>
<div class="col-md-6">
<h2>评分分布</h2>
<div id="ratingChartSkeleton" class="skeleton-chart"></div>
<canvas id="ratingChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('ratingChart').getContext('2d');
@@ -297,6 +298,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['rating'])) {
}
}
});
document.getElementById('ratingChartSkeleton').style.display = 'none';
</script>
</div>
<div class="col-md-6">

2
developer_apps.php
View File

@@ -90,7 +90,7 @@ $resultApps = $conn->query($sqlApps);
$image = $resultImage ? $resultImage->fetch_assoc() : null;
$imagePath = $image ? $image['image_path'] : 'default-app.png';
?>
<img src="<?php echo $imagePath; ?>" class="card-img-top" alt="<?php echo htmlspecialchars($app['name']); ?>">
<div class="card-body">
<h5 class="card-title"><?php echo htmlspecialchars($app['name']); ?></h5>
<p class="card-text"><?php echo htmlspecialchars(substr($app['description'], 0, 100)); ?>...</p>

4
index.php
View File

@@ -173,7 +173,7 @@ if (!isset($conn) || !$conn instanceof mysqli) {
while ($row = $recommendResult->fetch_assoc()) {
echo '<div class="col-md-3 mb-4">';
echo '<div class="card blur-bg">';
echo '<img src="images/default.png" class="card-img-top" alt="'. htmlspecialchars($row['name']) . '">';
echo '<div class="card-body">';
echo '<h5 class="card-title">'. htmlspecialchars($row['name']) . '</h5>';
echo '<p class="card-text">'. substr(htmlspecialchars($row['description']), 0, 100) . '...</p>';
@@ -280,7 +280,7 @@ if (!isset($conn) || !$conn instanceof mysqli) {
while ($row = $result->fetch_assoc()) {
echo '<div class="col-md-3 mb-4">';
echo '<div class="card blur-bg">';
echo '<img src="images/default.png" class="card-img-top" alt="'. $row['name'] . '">';
echo '<div class="card-body">';
echo '<h5 class="card-title">'. $row['name'] . '</h5>';
echo '<p class="card-text">'. substr($row['description'], 0, 100) . '...</p>';

27
styles.css
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;
}

2
tags.php
View File

@@ -135,7 +135,7 @@ $tagResult = $conn->query("SELECT id, name FROM tags ORDER BY name");
<?php while ($row = $result->fetch_assoc()): ?>
<div class="col-md-3 mb-4">
<div class="card blur-bg">
<img src="images/default.png" class="card-img-top" alt="<?php echo $row['name']; ?>">
<div class="card-body">
<h5 class="card-title"><?php echo $row['name']; ?></h5>
<p class="card-text"><?php echo substr($row['description'], 0, 100); ?>...</p>