更新资源展示，前后端

app/index/view/resources/detail.php

@@ -1,4 +1,9 @@
 {include file="component/head" /}
+<link href="__STATIC__/css/lightbox.min.css" rel="stylesheet">
+<link href="__CSS__/swiper-bundle.min.css" rel="stylesheet">
+<script src="__JS__/jquery.min.js"></script>
+<script src="__JS__/lightbox.min.js"></script>
+<script src="__JS__/swiper-bundle.min.js"></script>
 {include file="component/header-simple" /}
 <div class="main">
     <div class="main-top">
@@ -24,8 +29,35 @@
                 <div class="detail-top-card">
                     <div class="detail-top-card-left">
                         <div class="article-cover">
-                            <img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>">
-                            <!-- <img src="https://www.yunzer.cn/storage/uploads/20250523/b75a51fa606fd3a18261a6ea283d35fe.jpg" alt=""> -->
+                            <div class="swiper game-swiper">
+                                <div class="swiper-wrapper">
+                                    {php}
+                                    // 兼容字符串和数组
+                                    $images = isset($game['images']) ? $game['images'] : [];
+                                    if (is_string($images)) {
+                                    $images = explode(',', $images);
+                                    }
+                                    $images = array_filter($images); // 移除空值
+                                    if (empty($images) && !empty($game['icon'])) {
+                                    $images = [$game['icon']];
+                                    }
+                                    {/php}
+                                    {volist name="images" id="image"}
+                                    <div class="swiper-slide">
+                                        <a href="<?php $img = trim($image, ', ');
+                                        echo (strpos($img, 'http') === 0 ? $img : request()->domain() . $img); ?>"
+                                            data-lightbox="game-gallery">
+                                            <img src="<?php $img = trim($image, ', ');
+                                            echo (strpos($img, 'http') === 0 ? $img : request()->domain() . $img); ?>"
+                                                alt="<?php echo $game['title']; ?>">
+                                        </a>
+                                    </div>
+                                    {/volist}
+                                </div>
+                                <div class="swiper-button-prev"></div>
+                                <div class="swiper-button-next"></div>
+                                <div class="swiper-pagination"></div>
+                            </div>
                         </div>
                     </div>
                     <div class="detail-top-card-right">
@@ -92,7 +124,7 @@
                 </div>
             </div>
             <div class="detail-top-right">
-这里放个人信息
+                这里放个人信息
             </div>
         </div>
         <div class="detail-middle">
@@ -135,7 +167,7 @@
                     <!-- 相关游戏 -->
                     <?php if (!empty($relatedGames)): ?>
                         <div class="related-games">
-                            <h3>相关游戏</h3>
+                            <h3>相关资源</h3>
                             <div class="game-list">
                                 <?php foreach ($relatedGames as $related): ?>
                                     <div class="game-item"
@@ -172,6 +204,7 @@
 <script>
     // 页面加载完成后执行
     document.addEventListener('DOMContentLoaded', function () {
+
         // 获取游戏ID
         const gameId = new URLSearchParams(window.location.search).get('id');
         if (!gameId) {
@@ -261,6 +294,40 @@
             });
         }
 
+
+        const swiper = new Swiper('.game-swiper', {
+            slidesPerView: 1,
+            spaceBetween: 30,
+            loop: true,
+            autoplay: {
+                delay: 3000,
+                disableOnInteraction: false,
+            },
+            pagination: {
+                el: '.swiper-pagination',
+                clickable: true,
+            },
+            navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            },
+        });
+
+        // 初始化 Lightbox
+        lightbox.option({
+            'resizeDuration': 200,
+            'wrapAround': true,
+            'albumLabel': "图片 %1 / %2",
+            'fadeDuration': 300,
+            'imageFadeDuration': 300,
+            'positionFromTop': 100,
+            'maxWidth': 1200,
+            'maxHeight': 800,
+            'disableScrolling': true,
+            'showImageNumberLabel': true,
+            'alwaysShowNavOnTouchDevices': true
+        });
+
         //复制分享码
         const codeBtn = document.getElementById('codeBtn');
         if (codeBtn) {
@@ -292,23 +359,21 @@
 
         // 返回顶部功能
         const goToTop = document.getElementById('goToTop');
-
-        // 监听滚动事件
-        window.addEventListener('scroll', function () {
-            if (window.pageYOffset > 300) {
-                goToTop.classList.add('show');
-            } else {
-                goToTop.classList.remove('show');
-            }
-        });
-
-        // 点击返回顶部
-        goToTop.addEventListener('click', function () {
-            window.scrollTo({
-                top: 0,
-                behavior: 'smooth'
+        if (goToTop) {
+            window.addEventListener('scroll', function () {
+                if (window.pageYOffset > 300) {
+                    goToTop.classList.add('show');
+                } else {
+                    goToTop.classList.remove('show');
+                }
             });
-        });
+            goToTop.addEventListener('click', function () {
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            });
+        }
     });
 
     // 更新游戏访问次数
@@ -393,7 +458,7 @@
 
     .detail-top-right {
         width: 30%;
-        border-left: 1px solid #eee ;
+        border-left: 1px solid #eee;
         margin: 20px;
     }
 
@@ -754,6 +819,25 @@
         background-color: #0081ff12;
         border-radius: 5px;
     }
+
+    .detail-top-card-left {
+        width: 350px;
+    }
+
+    .swiper .swiper-button-prev,
+    .swiper .swiper-button-next {
+        color: #3881fd;
+        background: rgba(255, 255, 255, 0.9);
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .swiper .swiper-button-prev:after,
+    .swiper .swiper-button-next:after {
+        font-size: 18px;
+    }
 </style>
 
 {include file="component/foot" /}