更新资源展示，前后端
This commit is contained in:
parent
7aa55a7c1c
commit
3a20b76d4a
@ -1053,4 +1053,12 @@ class YunzeradminController extends Base
|
||||
}
|
||||
return json(['code' => 1, 'msg' => '请求方法无效']);
|
||||
}
|
||||
|
||||
//获取推送内容Articles和Resources
|
||||
//https://www.yunzer.cn/index/articles/detail?id=30
|
||||
//https://www.yunzer.cn/index/program/index?cateid=2
|
||||
//https://www.yunzer.cn/index/game/index?cateid=8
|
||||
//https://www.yunzer.cn/index/resources/detail?id=3
|
||||
|
||||
|
||||
}
|
||||
@ -97,29 +97,41 @@
|
||||
</button>
|
||||
<div class="image-preview-container" id="imagePreview">
|
||||
{if condition="isset($resource.images) && !empty($resource.images)"}
|
||||
{if condition="strpos($resource.images, ',') !== false"}
|
||||
{volist name="resource.images|explode=',',true" id="image"}
|
||||
<div class="image-preview-item" data-src="{$image}">
|
||||
<img src="{$image}" alt="已上传图片">
|
||||
<div class="image-preview-overlay">
|
||||
<button type="button" class="delete-image">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="image-filename">{$image|basename}</p>
|
||||
<div class="image-list-table">
|
||||
<table class="layui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="100" align="center">缩略图</th>
|
||||
<th width="40" align="center">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{php}
|
||||
// 处理图片字符串，正确拆分逗号分隔的路径
|
||||
$imageArray = [];
|
||||
if (isset($resource['images']) && !empty($resource['images'])) {
|
||||
$imageArray = explode(',', $resource['images']);
|
||||
$imageArray = array_map('trim', $imageArray); // 去除每个路径的前后空格
|
||||
$imageArray = array_filter($imageArray); // 过滤空值
|
||||
}
|
||||
{/php}
|
||||
{volist name="imageArray" id="image"}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="image-thumbnail" onclick="previewImage('<?php echo (strpos($image, 'http') === 0 ? $image : request()->domain() . $image); ?>')">
|
||||
<img src="<?php echo (strpos($image, 'http') === 0 ? $image : request()->domain() . $image); ?>" alt="缩略图">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="layui-btn layui-btn-danger layui-btn-xs delete-image" data-src="{$image}">
|
||||
<i class="fas fa-trash"></i> 删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/volist}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/volist}
|
||||
{else}
|
||||
<div class="image-preview-item" data-src="{$resource.images}">
|
||||
<img src="{$resource.images}" alt="已上传图片">
|
||||
<div class="image-preview-overlay">
|
||||
<button type="button" class="delete-image">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="image-filename">{$resource.images|basename}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="upload-progress" id="imageProgress" style="display: none;">
|
||||
@ -685,6 +697,19 @@
|
||||
updateImagesInput();
|
||||
}
|
||||
});
|
||||
|
||||
// 图片预览功能
|
||||
window.previewImage = function(imageUrl) {
|
||||
layer.photos({
|
||||
photos: {
|
||||
"data": [{
|
||||
"src": imageUrl,
|
||||
"alt": "图片预览"
|
||||
}]
|
||||
},
|
||||
anim: 5
|
||||
});
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -820,4 +845,28 @@
|
||||
.container-right {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
/* 图片列表表格样式 */
|
||||
.image-list-table {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.image-thumbnail {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.image-thumbnail:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.image-thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
@ -496,7 +496,7 @@
|
||||
});
|
||||
|
||||
return `
|
||||
<div class="opencourse product-item" onclick="window.open('/index/program/detail?id=${program.id || ''}', '_blank')">
|
||||
<div class="opencourse product-item" onclick="window.open('/index/resources/detail?id=${program.id || ''}', '_blank')">
|
||||
<div class="video">
|
||||
<img src="${program.icon || ''}" alt="" class="cover">
|
||||
</div>
|
||||
@ -576,7 +576,7 @@
|
||||
if (!game) return '';
|
||||
|
||||
return `
|
||||
<div class="opencourse product-item" onclick="window.open('/index/game/detail?id=${game.id || ''}', '_blank')">
|
||||
<div class="opencourse product-item" onclick="window.open('/index/resources/detail?id=${game.id || ''}', '_blank')">
|
||||
<div class="video">
|
||||
<img src="${game.icon || '/static/images/default-game.png'}" alt="" class="cover">
|
||||
</div>
|
||||
|
||||
@ -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" /}
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:2:{s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\resources\edit.php";i:1749890456;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
|
||||
<?php /*a:2:{s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\resources\edit.php";i:1751596893;s:61:"E:\Demos\DemoOwns\PHP\yunzer\app\admin\view\public\header.php";i:1746849526;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@ -192,7 +192,10 @@
|
||||
<div class="image-preview-container" id="imagePreview">
|
||||
<?php if(isset($resource['images']) && !empty($resource['images'])): if(strpos($resource['images'], ',') !== false): if(is_array(explode($resource['images'],',',true)) || explode($resource['images'],',',true) instanceof \think\Collection || explode($resource['images'],',',true) instanceof \think\Paginator): $i = 0; $__LIST__ = explode($resource['images'],',',true);if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$image): $mod = ($i % 2 );++$i;?>
|
||||
<div class="image-preview-item" data-src="<?php echo htmlentities((string) $image); ?>">
|
||||
<img src="<?php echo htmlentities((string) $image); ?>" alt="已上传图片">
|
||||
<img src="<?php
|
||||
$img = trim($image, ', ');
|
||||
echo (strpos($img, 'http') === 0 ? $img : request()->domain() . $img);
|
||||
?>" alt="已上传图片">
|
||||
<div class="image-preview-overlay">
|
||||
<button type="button" class="delete-image">
|
||||
<i class="fas fa-trash"></i>
|
||||
@ -202,7 +205,10 @@
|
||||
</div>
|
||||
<?php endforeach; endif; else: echo "" ;endif; else: ?>
|
||||
<div class="image-preview-item" data-src="<?php echo htmlentities((string) $resource['images']); ?>">
|
||||
<img src="<?php echo htmlentities((string) $resource['images']); ?>" alt="已上传图片">
|
||||
<img src="<?php
|
||||
$img = trim($resource['images'], ', ');
|
||||
echo (strpos($img, 'http') === 0 ? $img : request()->domain() . $img);
|
||||
?>" alt="已上传图片">
|
||||
<div class="image-preview-overlay">
|
||||
<button type="button" class="delete-image">
|
||||
<i class="fas fa-trash"></i>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:4:{s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\index\index.php";i:1746865108;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header.php";i:1749258723;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\main.php";i:1749541813;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1749170849;}*/ ?>
|
||||
<?php /*a:4:{s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\index\index.php";i:1746865108;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header.php";i:1749258723;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\main.php";i:1751594350;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1749170849;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
@ -1422,7 +1422,7 @@ $loginStatus = [
|
||||
});
|
||||
|
||||
return `
|
||||
<div class="opencourse product-item" onclick="window.open('/index/program/detail?id=${program.id || ''}', '_blank')">
|
||||
<div class="opencourse product-item" onclick="window.open('/index/resources/detail?id=${program.id || ''}', '_blank')">
|
||||
<div class="video">
|
||||
<img src="${program.icon || ''}" alt="" class="cover">
|
||||
</div>
|
||||
@ -1502,7 +1502,7 @@ $loginStatus = [
|
||||
if (!game) return '';
|
||||
|
||||
return `
|
||||
<div class="opencourse product-item" onclick="window.open('/index/game/detail?id=${game.id || ''}', '_blank')">
|
||||
<div class="opencourse product-item" onclick="window.open('/index/resources/detail?id=${game.id || ''}', '_blank')">
|
||||
<div class="video">
|
||||
<img src="${game.icon || '/static/images/default-game.png'}" alt="" class="cover">
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php /*a:5:{s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\program\detail.php";i:1749460944;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\head.php";i:1747617129;s:71:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header-simple.php";i:1749258723;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1749170849;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\foot.php";i:1747616844;}*/ ?>
|
||||
<?php /*a:5:{s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\program\detail.php";i:1749891766;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\head.php";i:1747617129;s:71:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header-simple.php";i:1749258723;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1749170849;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\foot.php";i:1747616844;}*/ ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
@ -955,6 +955,8 @@ $loginStatus = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div style="font-size:24px;font-weight:bolder;margin-bottom:30px;">资源展示</div> -->
|
||||
|
||||
<div class="program-show">
|
||||
<div class="swiper program-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
@ -979,6 +981,8 @@ $loginStatus = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="font-size:24px;font-weight:bolder;margin-bottom:30px;">资源简介</div>
|
||||
|
||||
<div class="program-content">
|
||||
<?php echo $program['content']; ?>
|
||||
</div>
|
||||
@ -1496,7 +1500,9 @@ $loginStatus = [
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
margin-bottom: 30px;
|
||||
margin: 30px 0;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
@ -1914,6 +1920,7 @@ $loginStatus = [
|
||||
|
||||
.program-show {
|
||||
margin: 20px 0;
|
||||
margin-bottom: 60px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
@ -2021,7 +2028,7 @@ $loginStatus = [
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 14px;
|
||||
font-size: 1.3rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user