更改游戏下载详情页面样式
This commit is contained in:
云泽网
parent
60b092e4dc
commit
57b414cd19
@ -1,85 +1,137 @@
|
||||
{include file="component/head" /}
|
||||
{include file="component/header-simple" /}
|
||||
<div class="main">
|
||||
<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 class="main-top">
|
||||
<div class="main-top-main">
|
||||
<div class="main-title">
|
||||
<?php echo $game['title']; ?>
|
||||
</div>
|
||||
<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 class="game-detail">
|
||||
<div class="game-info">
|
||||
<div class="game-header">
|
||||
<h1 class="game-title"><?php echo $game['title']; ?></h1>
|
||||
<div class="game-meta">
|
||||
<span class="game-category"><?php echo $cateName; ?></span>
|
||||
<span class="game-views"><i class="fa-solid fa-eye"></i> <?php echo $game['views']; ?> </span>
|
||||
<span class="game-downloads"><i class="fa-solid fa-download"></i> <span
|
||||
id="gameDownloads"><?php echo $game['downloads']; ?></span> </span>
|
||||
<div class="detail-main">
|
||||
<div class="detail-top">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-content">
|
||||
<div class="game-cover">
|
||||
<img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>"
|
||||
alt="<?php echo $game['title']; ?>">
|
||||
</div>
|
||||
<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 class="detail-top-card-right">
|
||||
<div class="detail-top-card-right-top">
|
||||
<div class="collect-btn">
|
||||
<button class="btn btn-primary" id="collectBtn" data-game-id="<?php echo $game['id']; ?>">
|
||||
<i class="fa-solid fa-heart"></i> 收藏
|
||||
</button>
|
||||
</div>
|
||||
<div class="report-btn">
|
||||
<button class="btn btn-primary" id="reportBtn" style="margin-left: 20px;">
|
||||
<i class="fa-solid fa-flag"></i> 举报
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-top-card-right-middle">
|
||||
<div class="game-info">
|
||||
<div class="title">Free</div>
|
||||
<div class="infos">
|
||||
<div class="infoitem"><span>更新时间：</span><?php echo date('Y-m-d', $game['create_time']); ?></div>
|
||||
<div class="infoitem"><span>所属分类：</span><?php echo $cateName; ?></div>
|
||||
<div class="infoitem"><span>程序编号：</span><?php echo $game['number']; ?></div>
|
||||
<div class="infoitem"><span>查看：</span><?php echo $game['views']; ?></div>
|
||||
<div class="infoitem"><span>下载：</span><?php echo $game['downloads']; ?></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>
|
||||
<?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>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
@ -91,7 +143,7 @@
|
||||
|
||||
<script>
|
||||
// 页面加载完成后执行
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 获取游戏ID
|
||||
const gameId = new URLSearchParams(window.location.search).get('id');
|
||||
if (!gameId) {
|
||||
@ -101,41 +153,41 @@
|
||||
|
||||
// 获取游戏详情
|
||||
fetch('/index/game/detail?id=' + gameId, {
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.code === 1) {
|
||||
// 渲染上一篇
|
||||
const prevGame = document.getElementById('prevGame');
|
||||
if (result.data.prevGame) {
|
||||
prevGame.innerHTML = `
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.code === 1) {
|
||||
// 渲染上一篇
|
||||
const prevGame = document.getElementById('prevGame');
|
||||
if (result.data.prevGame) {
|
||||
prevGame.innerHTML = `
|
||||
<a href="/index/game/detail?id=${result.data.prevGame.id}">
|
||||
<i class="fa fa-arrow-left"></i> 上一篇：${result.data.prevGame.title}
|
||||
</a>
|
||||
`;
|
||||
} else {
|
||||
prevGame.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
|
||||
}
|
||||
} else {
|
||||
prevGame.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
|
||||
}
|
||||
|
||||
// 渲染下一篇
|
||||
const nextGame = document.getElementById('nextGame');
|
||||
if (result.data.nextGame) {
|
||||
nextGame.innerHTML = `
|
||||
// 渲染下一篇
|
||||
const nextGame = document.getElementById('nextGame');
|
||||
if (result.data.nextGame) {
|
||||
nextGame.innerHTML = `
|
||||
<a href="/index/game/detail?id=${result.data.nextGame.id}">
|
||||
下一篇：${result.data.nextGame.title} <i class="fa fa-arrow-right"></i>
|
||||
</a>
|
||||
`;
|
||||
} else {
|
||||
nextGame.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
|
||||
} else {
|
||||
nextGame.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取游戏详情失败:', error);
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取游戏详情失败:', error);
|
||||
});
|
||||
|
||||
// 更新访问次数
|
||||
updateGameViews(gameId);
|
||||
@ -143,13 +195,13 @@
|
||||
// 下载功能
|
||||
const downloadBtn = document.getElementById('downloadBtn');
|
||||
if (downloadBtn) {
|
||||
downloadBtn.addEventListener('click', function () {
|
||||
downloadBtn.addEventListener('click', function() {
|
||||
fetch('/index/game/downloadurl?id=' + gameId, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.code === 1) {
|
||||
@ -207,7 +259,7 @@
|
||||
const goToTop = document.getElementById('goToTop');
|
||||
|
||||
// 监听滚动事件
|
||||
window.addEventListener('scroll', function () {
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.pageYOffset > 300) {
|
||||
goToTop.classList.add('show');
|
||||
} else {
|
||||
@ -216,7 +268,7 @@
|
||||
});
|
||||
|
||||
// 点击返回顶部
|
||||
goToTop.addEventListener('click', function () {
|
||||
goToTop.addEventListener('click', function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
@ -227,13 +279,13 @@
|
||||
// 更新游戏访问次数
|
||||
function updateGameViews(gameId) {
|
||||
fetch('/index/game/updateViews', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: 'id=' + gameId
|
||||
})
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: 'id=' + gameId
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.code === 1) {
|
||||
@ -250,14 +302,137 @@
|
||||
</script>
|
||||
|
||||
<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;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-top {
|
||||
max-width: 1400px;
|
||||
/* height: 300px; */
|
||||
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 {
|
||||
max-width: 1000px;
|
||||
margin: 30px auto;
|
||||
padding: 50px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
@ -343,6 +518,11 @@
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.game-actions1 {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.game-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -369,7 +549,7 @@
|
||||
.btn {
|
||||
/* background: #f57005; */
|
||||
color: #fff;
|
||||
padding: 15px 30px;
|
||||
padding: 5px 15px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
@ -380,8 +560,8 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.codebtn{
|
||||
color:#0d6efd;
|
||||
.codebtn {
|
||||
color: #0d6efd;
|
||||
padding: 15px 30px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #0d6efd;
|
||||
@ -398,7 +578,7 @@
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.related-games h3{
|
||||
.related-games h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
@ -497,10 +677,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.location-item a {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.disclaimers {
|
||||
color: #b1b1b1;
|
||||
width: 80%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user