更新资源编辑

app/index/view/program/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="location">
@@ -24,6 +29,23 @@
                 </div>
             </div>
 
+            <div class="program-show">
+                <div class="swiper program-swiper">
+                    <div class="swiper-wrapper">
+                        {volist name="program.images" id="image"}
+                        <div class="swiper-slide">
+                            <a href="{$image}" data-lightbox="program-images" data-title="{$program.title}">
+                                <img src="{$image}" alt="{$program.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 class="program-content">
                 {$program.content|raw}
             </div>
@@ -898,5 +920,161 @@
         border-radius: 8px;
         border: none;
     }
+
+    .program-show {
+        margin: 20px 0;
+        background: #fff;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+    }
+
+    .program-swiper {
+        width: 100%;
+        height: 400px;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .program-swiper .swiper-slide {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #f8f9fa;
+    }
+
+    .program-swiper .swiper-slide img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        cursor: zoom-in;
+        transition: transform 0.3s ease;
+    }
+
+    .program-swiper .swiper-slide img:hover {
+        transform: scale(1.02);
+    }
+
+    .program-swiper .swiper-button-prev,
+    .program-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);
+    }
+
+    .program-swiper .swiper-button-prev:after,
+    .program-swiper .swiper-button-next:after {
+        font-size: 18px;
+    }
+
+    .program-swiper .swiper-pagination-bullet {
+        background: #3881fd;
+        opacity: 0.5;
+    }
+
+    .program-swiper .swiper-pagination-bullet-active {
+        opacity: 1;
+    }
+
+    /* Lightbox 样式优化 */
+    .lb-nav a.lb-prev,
+    .lb-nav a.lb-next {
+        opacity: 0.8;
+        background: none !important;
+    }
+
+    .lb-nav a.lb-prev:after {
+        content: '\f104';
+        font-family: 'Font Awesome 5 Free';
+        font-weight: 900;
+        font-size: 30px;
+        color: #fff;
+        text-shadow: 0 0 3px rgba(0,0,0,0.5);
+    }
+
+    .lb-nav a.lb-next:after {
+        content: '\f105';
+        font-family: 'Font Awesome 5 Free';
+        font-weight: 900;
+        font-size: 30px;
+        color: #fff;
+        text-shadow: 0 0 3px rgba(0,0,0,0.5);
+    }
+
+    .lb-closeContainer {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+    }
+
+    .lb-close {
+        opacity: 0.8;
+        transition: opacity 0.3s ease;
+        background: none !important;
+    }
+
+    .lb-close:after {
+        content: '\f00d';
+        font-family: 'Font Awesome 5 Free';
+        font-weight: 900;
+        font-size: 30px;
+        color: #fff;
+        text-shadow: 0 0 3px rgba(0,0,0,0.5);
+    }
+
+    .lb-close:hover {
+        opacity: 1;
+    }
+
+    .lb-data .lb-caption {
+        font-size: 14px;
+        font-weight: normal;
+    }
+
+    .lb-data .lb-number {
+        font-size: 12px;
+        color: #999;
+    }
 </style>
+
+<script>
+    // 初始化 Swiper
+    document.addEventListener('DOMContentLoaded', function() {
+        const swiper = new Swiper('.program-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
+        });
+    });
+</script>
 {include file="component/foot" /}