yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改游戏下载详情页面样式

Browse Source
This commit is contained in:
云泽网 2025-05-26 00:38:46 +08:00
parent 60b092e4dc
commit 57b414cd19
1 changed files with 298 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

420
app/index/view/game/detail.php
View File

@ -1,85 +1,137 @@
{include file="component/head" /} {include file="component/head" /}
{include file="component/header-simple" /} {include file="component/header-simple" /}
<div class="main"> <div class="main">
<div class="location"> <div class="main-top">
<div class="container"> <div class="main-top-main">
<div class="location-item"> <div class="main-title">
<a href="/">首页</a> <?php echo $game['title']; ?>
<span>></span> </div>
<a href="/index/game/list" id="cateLink"><?php echo $cateName; ?></a> <div class="location">
<div class="container">
<div class="location-item">
<a href="/">首页</a>
<span>></span>
<a href="/index/game/list" id="cateLink"><?php echo $cateName; ?></a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="game-detail"> <div class="detail-main">
<div class="game-info"> <div class="detail-top">
<div class="game-header"> <div class="detail-top-card">
<h1 class="game-title"><?php echo $game['title']; ?></h1> <div class="detail-top-card-left">
<div class="game-meta"> <div class="article-cover">
<span class="game-category"><?php echo $cateName; ?></span> <img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>">
<span class="game-views"><i class="fa-solid fa-eye"></i> <?php echo $game['views']; ?> </span> <!-- <img src="https://www.yunzer.cn/storage/uploads/20250523/b75a51fa606fd3a18261a6ea283d35fe.jpg" alt=""> -->
<span class="game-downloads"><i class="fa-solid fa-download"></i> <span </div>
id="gameDownloads"><?php echo $game['downloads']; ?></span> </span>
</div> </div>
</div> <div class="detail-top-card-right">
<div class="game-content"> <div class="detail-top-card-right-top">
<div class="game-cover"> <div class="collect-btn">
<img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>" <button class="btn btn-primary" id="collectBtn" data-game-id="<?php echo $game['id']; ?>">
alt="<?php echo $game['title']; ?>"> <i class="fa-solid fa-heart"></i> 收藏
</div> </button>
<div class="game-desc"> </div>
<?php echo $game['content']; ?> <div class="report-btn">
</div> <button class="btn btn-primary" id="reportBtn" style="margin-left: 20px;">
</div> <i class="fa-solid fa-flag"></i> 举报
<div class="game-actions"> </button>
<div style="display: flex;gap: 30px;}"> </div>
<button id="downloadBtn" class="btn btn-primary"> </div>
<i class="fa-solid fa-download"></i> 立即下载 <div class="detail-top-card-right-middle">
</button> <div class="game-info">
<button id="codeBtn" class="codebtn"> <div class="title">Free</div>
<i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?> <div class="infos">
</button> <div class="infoitem"><span>更新时间：</span><?php echo date('Y-m-d', $game['create_time']); ?></div>
</div> <div class="infoitem"><span>所属分类：</span><?php echo $cateName; ?></div>
</div> <div class="infoitem"><span>程序编号：</span><?php echo $game['number']; ?></div>
</div> <div class="infoitem"><span>查看：</span><?php echo $game['views']; ?></div>
<div class="infoitem"><span>下载：</span><?php echo $game['downloads']; ?></div>
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<?php echo $config['disclaimers'] ?>
</div>
</div>
</div>
<div class="game-navigation">
<div class="prev-game" id="prevGame">
</div>
<div class="next-game" id="nextGame">
</div>
</div>
<!-- 相关游戏 -->
<?php if (!empty($relatedGames)): ?>
<div class="related-games">
<h3>相关游戏</h3>
<div class="game-list">
<?php foreach ($relatedGames as $related): ?>
<div class="game-item"
onclick="window.location.href='/index/game/detail?id=<?php echo $related['id']; ?>'">
<div class="game-cover">
<img src="<?php echo $related['icon'] ?: '/static/images/default-game.png'; ?>"
alt="<?php echo $related['title']; ?>">
</div>
<div class="game-info">
<h4 class="game-title-1"><?php echo $related['title']; ?></h4>
</div> </div>
</div> </div>
<?php endforeach; ?> </div>
<div class="detail-top-card-right-bottom">
<div class="game-actions1">
<div style="display: flex;gap: 30px;}">
<button id="downloadBtn" class="btn btn-primary">
<i class="fa-solid fa-download"></i> 立即下载
</button>
<button id="codeBtn" class="codebtn">
<i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?>
</button>
</div>
</div>
</div>
</div> </div>
</div> </div>
<?php endif; ?> </div>
<div class="detail-middle">
<div class="detial-middle-left">
<div class="game-detail">
<div class="game-info">
<div class="game-content">
<div class="game-desc">
<?php echo $game['content']; ?>
</div>
</div>
<div class="game-actions">
<div style="display: flex;gap: 30px;}">
<button id="downloadBtn" class="btn btn-primary">
<i class="fa-solid fa-download"></i> 立即下载
</button>
<button id="codeBtn" class="codebtn">
<i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?>
</button>
</div>
</div>
</div>
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<?php echo $config['disclaimers'] ?>
</div>
</div>
</div>
<div class="game-navigation">
<div class="prev-game" id="prevGame">
</div>
<div class="next-game" id="nextGame">
</div>
</div>
<!-- 相关游戏 -->
<?php if (!empty($relatedGames)): ?>
<div class="related-games">
<h3>相关游戏</h3>
<div class="game-list">
<?php foreach ($relatedGames as $related): ?>
<div class="game-item"
onclick="window.location.href='/index/game/detail?id=<?php echo $related['id']; ?>'">
<div class="game-cover">
<img src="<?php echo $related['icon'] ?: '/static/images/default-game.png'; ?>"
alt="<?php echo $related['title']; ?>">
</div>
<div class="game-info">
<h4 class="game-title-1"><?php echo $related['title']; ?></h4>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
<div class="detial-middle-right">
</div>
</div>
</div> </div>
</div> </div>
<!-- 返回顶部按钮 --> <!-- 返回顶部按钮 -->
@ -91,7 +143,7 @@
<script> <script>
// 页面加载完成后执行 // 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function() {
// 获取游戏ID // 获取游戏ID
const gameId = new URLSearchParams(window.location.search).get('id'); const gameId = new URLSearchParams(window.location.search).get('id');
if (!gameId) { if (!gameId) {
@ -101,41 +153,41 @@
// 获取游戏详情 // 获取游戏详情
fetch('/index/game/detail?id=' + gameId, { fetch('/index/game/detail?id=' + gameId, {
headers: { headers: {
'X-Requested-With': 'XMLHttpRequest' 'X-Requested-With': 'XMLHttpRequest'
} }
}) })
.then(response => response.json()) .then(response => response.json())
.then(result => { .then(result => {
if (result.code === 1) { if (result.code === 1) {
// 渲染上一篇 // 渲染上一篇
const prevGame = document.getElementById('prevGame'); const prevGame = document.getElementById('prevGame');
if (result.data.prevGame) { if (result.data.prevGame) {
prevGame.innerHTML = ` prevGame.innerHTML = `
<a href="/index/game/detail?id=${result.data.prevGame.id}"> <a href="/index/game/detail?id=${result.data.prevGame.id}">
<i class="fa fa-arrow-left"></i> 上一篇：${result.data.prevGame.title} <i class="fa fa-arrow-left"></i> 上一篇：${result.data.prevGame.title}
</a> </a>
`; `;
} else { } else {
prevGame.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>'; prevGame.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
} }
// 渲染下一篇 // 渲染下一篇
const nextGame = document.getElementById('nextGame'); const nextGame = document.getElementById('nextGame');
if (result.data.nextGame) { if (result.data.nextGame) {
nextGame.innerHTML = ` nextGame.innerHTML = `
<a href="/index/game/detail?id=${result.data.nextGame.id}"> <a href="/index/game/detail?id=${result.data.nextGame.id}">
下一篇：${result.data.nextGame.title} <i class="fa fa-arrow-right"></i> 下一篇：${result.data.nextGame.title} <i class="fa fa-arrow-right"></i>
</a> </a>
`; `;
} else { } else {
nextGame.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>'; nextGame.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
}
} }
} })
}) .catch(error => {
.catch(error => { console.error('获取游戏详情失败:', error);
console.error('获取游戏详情失败:', error); });
});
// 更新访问次数 // 更新访问次数
updateGameViews(gameId); updateGameViews(gameId);
@ -143,13 +195,13 @@
// 下载功能 // 下载功能
const downloadBtn = document.getElementById('downloadBtn'); const downloadBtn = document.getElementById('downloadBtn');
if (downloadBtn) { if (downloadBtn) {
downloadBtn.addEventListener('click', function () { downloadBtn.addEventListener('click', function() {
fetch('/index/game/downloadurl?id=' + gameId, { fetch('/index/game/downloadurl?id=' + gameId, {
method: 'GET', method: 'GET',
headers: { headers: {
'X-Requested-With': 'XMLHttpRequest' 'X-Requested-With': 'XMLHttpRequest'
} }
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.code === 1) { if (data.code === 1) {
@ -185,7 +237,7 @@
tempInput.value = code; tempInput.value = code;
document.body.appendChild(tempInput); document.body.appendChild(tempInput);
tempInput.select(); tempInput.select();
try { try {
// 尝试使用传统的复制方法 // 尝试使用传统的复制方法
document.execCommand('copy'); document.execCommand('copy');
@ -207,7 +259,7 @@
const goToTop = document.getElementById('goToTop'); const goToTop = document.getElementById('goToTop');
// 监听滚动事件 // 监听滚动事件
window.addEventListener('scroll', function () { window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) { if (window.pageYOffset > 300) {
goToTop.classList.add('show'); goToTop.classList.add('show');
} else { } else {
@ -216,7 +268,7 @@
}); });
// 点击返回顶部 // 点击返回顶部
goToTop.addEventListener('click', function () { goToTop.addEventListener('click', function() {
window.scrollTo({ window.scrollTo({
top: 0, top: 0,
behavior: 'smooth' behavior: 'smooth'
@ -227,13 +279,13 @@
// 更新游戏访问次数 // 更新游戏访问次数
function updateGameViews(gameId) { function updateGameViews(gameId) {
fetch('/index/game/updateViews', { fetch('/index/game/updateViews', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest' 'X-Requested-With': 'XMLHttpRequest'
}, },
body: 'id=' + gameId body: 'id=' + gameId
}) })
.then(response => response.json()) .then(response => response.json())
.then(result => { .then(result => {
if (result.code === 1) { if (result.code === 1) {
@ -250,14 +302,137 @@
</script> </script>
<style> <style>
.location { .main-top {
width: 100%;
height: 400px;
background-color: #0081ff;
/* background: url('/static/images/top-bg.jpg') no-repeat center center; */
position: relative;
}
.main-top-card {
max-width: 1400px;
margin: 0 auto;
margin-top: 30px;
border-radius: 8px;
background-color: #fff;
height: 300px;
}
.main-top-main {
max-width: 1400px;
margin: 0 auto;
padding-top: 50px;
display: flex;
justify-content: space-between;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 1;
}
.main-top-main .main-title {
font-size: 30px;
font-weight: 700;
max-width: 1000px; max-width: 1000px;
color: #fff;
}
.detail-top {
max-width: 1400px;
/* height: 300px; */
margin: 30px auto; margin: 30px auto;
position: relative;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
display: flex;
}
.detail-top-card {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.detail-top-card img {
width: 400px;
height: auto;
border-radius: 8px;
overflow: hidden;
}
.detail-top-card-right {
/* height: 230px; */
display: flex;
width: 100%;
margin-left: 20px;
flex-direction: column;
}
.detail-top-card-right-top {
display: flex;
justify-content: flex-end;
align-items: center;
}
.detail-top-card-right-middle {}
.detail-top-card-right-middle .game-info {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.detail-top-card-right-middle .game-info .title {
font-size: 40px;
font-weight: 700;
color: #42d697;
margin-bottom: 15px;
}
.detail-top-card-right-middle .game-info .infos {
display: flex;
}
.detail-top-card-right-middle .game-info .infos .infoitem {
margin-right: 60px;
}
.detail-top-card-right-middle .game-info .infos .infoitem span {
color: #7d879c;
}
.detail-middle {
max-width: 1400px;
margin: 0 auto;
}
.detail-main {
position: relative;
top: -200px;
left: 0;
width: 100%;
z-index: 2;
}
.location {
color: #fff;
display: flex;
align-items: center;
}
.location a {
color: #fff !important;
} }
.game-detail { .game-detail {
max-width: 1000px;
margin: 30px auto;
padding: 50px; padding: 50px;
background: #fff; background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@ -343,6 +518,11 @@
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.game-actions1 {
display: flex;
margin: 20px 0;
}
.game-navigation { .game-navigation {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -369,7 +549,7 @@
.btn { .btn {
/* background: #f57005; */ /* background: #f57005; */
color: #fff; color: #fff;
padding: 15px 30px; padding: 5px 15px;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -380,8 +560,8 @@
transform: translateY(-2px); transform: translateY(-2px);
} }
.codebtn{ .codebtn {
color:#0d6efd; color: #0d6efd;
padding: 15px 30px; padding: 15px 30px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #0d6efd; border: 1px solid #0d6efd;
@ -398,7 +578,7 @@
margin: 40px 0; margin: 40px 0;
} }
.related-games h3{ .related-games h3 {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
margin-bottom: 20px; margin-bottom: 20px;
@ -497,10 +677,6 @@
} }
} }
.location-item a {
color: #000 !important;
}
.disclaimers { .disclaimers {
color: #b1b1b1; color: #b1b1b1;
width: 80%; width: 80%;