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

feat(UI): 为平台信息添加Font Awesome图标

Browse Source 
在developer_apps.php和tags.php中为平台信息添加对应的Font Awesome图标，提升UI视觉效果。同时在index.php和tags.php中添加Font Awesome的CDN引用。
This commit is contained in:
Leonmmcoset
2025-07-12 21:52:15 +08:00
parent fd133066d7
commit 0bd6725f35
3 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
developer_apps.php
View File

@@ -160,8 +160,24 @@ $resultApps = $conn->query($sqlApps);
// 获取应用适用平台
$platforms = json_decode($app['platforms'], true);
echo '<p class="card-text">标签: '. implode(', ', $tags) . '</p>';
echo '<p class="card-text">平台: '. implode(', ', $platforms) . '</p>';
<?php echo '<p class="card-text">标签: '. implode(', ', $tags) . '</p>';
echo '<p class="card-text">平台: ';
foreach ($platforms as $platform) {
$icon = '';
if ($platform === 'Windows') {
$icon = '<i class="fab fa-windows"></i>';
} elseif ($platform === 'macOS') {
$icon = '<i class="fab fa-apple"></i>';
} elseif ($platform === 'Linux') {
$icon = '<i class="fab fa-linux"></i>';
} elseif ($platform === 'iOS') {
$icon = '<i class="fab fa-app-store-ios"></i>';
} elseif ($platform === 'Android') {
$icon = '<i class="fab fa-android"></i>';
}
echo " <span class='d-inline-flex align-items-center'>$icon $platform</span>";
}
echo '</p>';
?>
<p class="card-text">
<small class="text-muted">

4
index.php
View File

@@ -31,6 +31,8 @@ if (!isset($conn) || !$conn instanceof mysqli) {
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 自定义CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Fluent Design 模糊效果 -->
<style>
@@ -160,6 +162,8 @@ $announcement = $announcementResult && $announcementResult->num_rows > 0 ? $anno
</div>
<!-- <p>网站占用量: <?php echo formatBytes($websiteSpace); ?></p> -->
<br>
<!-- 这里可添加平台信息展示，参考 app.php 样式 -->
<form method="get" action="index.php" class="mb-4" onsubmit="return validateSearch();">
<script>
function validateSearch() {

20
tags.php
View File

@@ -76,6 +76,8 @@ $tagResult = $conn->query("SELECT id, name FROM tags ORDER BY name");
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 自定义CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Fluent Design 模糊效果 -->
<style>
.blur-bg {
@@ -160,7 +162,23 @@ $tagResult = $conn->query("SELECT id, name FROM tags ORDER BY name");
$platforms = json_decode($row['platforms'], true);
echo ' 标签: '. implode(', ', $tags) . '<br>';
$platforms = $platforms ?? [];
echo ' 平台: '. implode(', ', $platforms) . '<br>';
echo ' 平台: ';
foreach ($platforms as $platform) {
$icon = '';
if ($platform === 'Windows') {
$icon = '<i class="fab fa-windows"></i>';
} elseif ($platform === 'macOS') {
$icon = '<i class="fab fa-apple"></i>';
} elseif ($platform === 'Linux') {
$icon = '<i class="fab fa-linux"></i>';
} elseif ($platform === 'iOS') {
$icon = '<i class="fab fa-app-store-ios"></i>';
} elseif ($platform === 'Android') {
$icon = '<i class="fab fa-android"></i>';
}
echo " <span class='d-inline-flex align-items-center'>$icon $platform</span>";
}
echo '<br>';
echo ' 评分: '. round($row['avg_rating'], 1) . '/5<br>';
echo '';
?>