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

更新前端展示页

Browse Source
This commit is contained in:
李志强 2025-06-19 17:40:02 +08:00
parent 8e96995e1c
commit 10d5d90dd5
3 changed files with 166 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,11 +44,17 @@
<div class="game-info"> <div class="game-info">
<div class="title">Free</div> <div class="title">Free</div>
<div class="infos"> <div class="infos">
<div class="infoitem"><span>更新时间：</span><?php echo date('Y-m-d', $game['create_time']); ?></div> <div class="infoitem"><span>更新时间：</span><span
<div class="infoitem"><span>所属分类：</span><?php echo $cateName; ?></div> class="infoitem-value"><?php echo date('Y-m-d', $game['create_time']); ?></span>
<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><span
<div class="infoitem"><span>下载：</span><?php echo $game['downloads']; ?></div> class="infoitem-value"><?php echo $cateName; ?></span></div>
<div class="infoitem"><span>程序编号：</span><span
class="infoitem-value"><?php echo $game['number']; ?></span></div>
<div class="infoitem"><span>查看：</span><span
class="infoitem-value"><?php echo $game['views']; ?></span></div>
<div class="infoitem"><span>下载：</span><span
class="infoitem-value"><?php echo $game['downloads']; ?></span></div>
</div> </div>
</div> </div>
</div> </div>
@ -143,7 +149,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) {
@ -153,10 +159,10 @@
// 获取游戏详情 // 获取游戏详情
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) {
@ -195,13 +201,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 => { .then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error('网络响应失败'); throw new Error('网络响应失败');
@ -236,7 +242,7 @@
//复制分享码 //复制分享码
const codeBtn = document.getElementById('codeBtn'); const codeBtn = document.getElementById('codeBtn');
if (codeBtn) { if (codeBtn) {
codeBtn.addEventListener('click', function() { codeBtn.addEventListener('click', function () {
const code = '<?php echo $game['code']; ?>'; const code = '<?php echo $game['code']; ?>';
if (code) { if (code) {
// 创建一个临时输入框 // 创建一个临时输入框
@ -266,7 +272,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 {
@ -275,7 +281,7 @@
}); });
// 点击返回顶部 // 点击返回顶部
goToTop.addEventListener('click', function() { goToTop.addEventListener('click', function () {
window.scrollTo({ window.scrollTo({
top: 0, top: 0,
behavior: 'smooth' behavior: 'smooth'
@ -286,13 +292,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) {
@ -705,6 +711,14 @@
.disclaimer-content p { .disclaimer-content p {
margin-bottom: 0; margin-bottom: 0;
} }
.infoitem-value {
border: 1px #0d6efd dashed;
padding: 3px 6px;
font-size: 13px;
background-color: #0081ff12;
border-radius: 5px;
}
</style> </style>
{include file="component/foot" /} {include file="component/foot" /}

177
app/index/view/resources/detail.php
View File

@ -20,52 +20,80 @@
<div class="detail-main"> <div class="detail-main">
<div class="detail-top"> <div class="detail-top">
<div class="detail-top-card"> <div class="detail-top-left">
<div class="detail-top-card-left"> <div class="detail-top-card">
<div class="article-cover"> <div class="detail-top-card-left">
<img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>"> <div class="article-cover">
<!-- <img src="https://www.yunzer.cn/storage/uploads/20250523/b75a51fa606fd3a18261a6ea283d35fe.jpg" alt=""> --> <img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>">
</div> <!-- <img src="https://www.yunzer.cn/storage/uploads/20250523/b75a51fa606fd3a18261a6ea283d35fe.jpg" alt=""> -->
</div>
<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> </div>
<div class="detail-top-card-right-middle"> <div class="detail-top-card-right">
<div class="game-info"> <!-- <div class="detail-top-card-right-top">
<div class="title">Free</div> <div class="collect-btn">
<div class="infos"> <button class="btn btn-primary" id="collectBtn"
<div class="infoitem"><span>更新时间：</span><?php echo date('Y-m-d', $game['create_time']); ?></div> data-game-id="<?php echo $game['id']; ?>">
<div class="infoitem"><span>所属分类：</span><?php echo $cateName; ?></div> <i class="fa-solid fa-heart"></i> 收藏
<div class="infoitem"><span>程序编号：</span><?php echo $game['number']; ?></div> </button>
<div class="infoitem"><span>查看：</span><?php echo $game['views']; ?></div> </div>
<div class="infoitem"><span>下载：</span><?php echo $game['downloads']; ?></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 style="display: flex;">
<div class="infoitem">
<span>程序编号：</span>
<span class="infoitem-value"><?php echo $game['number']; ?></span>
</div>
<div class="infoitem">
<span>所属分类：</span>
<span class="infoitem-value"><?php echo $cateName; ?></span>
</div>
</div>
<div style="display: flex;">
<div class="infoitem">
<span>更新时间：</span>
<span
class="infoitem-value"><?php echo date('Y-m-d', $game['create_time']); ?></span>
</div>
<div class="infoitem">
<span>查看：</span>
<span class="infoitem-value"><?php echo $game['views']; ?></span>
<span>次</span>
</div>
<div class="infoitem">
<span>下载：</span>
<span class="infoitem-value"><?php echo $game['downloads']; ?></span>
<span>次</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> <div class="detail-top-card-right-bottom">
<div class="detail-top-card-right-bottom"> <div class="game-actions1">
<div class="game-actions1"> <div style="display: flex;gap: 30px;}">
<div style="display: flex;gap: 30px;}"> <button id="downloadBtn" class="btn btn-primary">
<button id="downloadBtn" class="btn btn-primary"> <i class="fa-solid fa-download"></i> 立即下载
<i class="fa-solid fa-download"></i> 立即下载 </button>
</button> <button id="codeBtn" class="codebtn">
<button id="codeBtn" class="codebtn"> <i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?>
<i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?> </button>
</button> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="detail-top-right">
这里放个人信息
</div>
</div> </div>
<div class="detail-middle"> <div class="detail-middle">
<div class="detial-middle-left"> <div class="detial-middle-left">
@ -143,7 +171,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) {
@ -153,10 +181,10 @@
// 获取游戏详情 // 获取游戏详情
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) {
@ -195,13 +223,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 => { .then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error('网络响应失败'); throw new Error('网络响应失败');
@ -236,7 +264,7 @@
//复制分享码 //复制分享码
const codeBtn = document.getElementById('codeBtn'); const codeBtn = document.getElementById('codeBtn');
if (codeBtn) { if (codeBtn) {
codeBtn.addEventListener('click', function() { codeBtn.addEventListener('click', function () {
const code = '<?php echo $game['code']; ?>'; const code = '<?php echo $game['code']; ?>';
if (code) { if (code) {
// 创建一个临时输入框 // 创建一个临时输入框
@ -266,7 +294,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 {
@ -275,7 +303,7 @@
}); });
// 点击返回顶部 // 点击返回顶部
goToTop.addEventListener('click', function() { goToTop.addEventListener('click', function () {
window.scrollTo({ window.scrollTo({
top: 0, top: 0,
behavior: 'smooth' behavior: 'smooth'
@ -286,13 +314,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) {
@ -356,6 +384,17 @@
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
justify-content: space-between;
}
.detail-top-left {
width: 70%;
}
.detail-top-right {
width: 30%;
border-left: 1px solid #eee ;
margin: 20px;
} }
.detail-top-card { .detail-top-card {
@ -368,9 +407,10 @@
.detail-top-card img { .detail-top-card img {
width: 400px; width: 350px;
height: auto; height: 260px;
border-radius: 8px; border-radius: 8px;
object-fit: cover;
overflow: hidden; overflow: hidden;
} }
@ -384,8 +424,7 @@
.detail-top-card-right-top { .detail-top-card-right-top {
display: flex; display: flex;
justify-content: flex-end; margin-top: 25px;
align-items: center;
} }
.detail-top-card-right-middle {} .detail-top-card-right-middle {}
@ -398,7 +437,7 @@
} }
.detail-top-card-right-middle .game-info .title { .detail-top-card-right-middle .game-info .title {
font-size: 40px; font-size: 30px;
font-weight: 700; font-weight: 700;
color: #42d697; color: #42d697;
margin-bottom: 15px; margin-bottom: 15px;
@ -406,10 +445,12 @@
.detail-top-card-right-middle .game-info .infos { .detail-top-card-right-middle .game-info .infos {
display: flex; display: flex;
flex-direction: column;
gap: 20px;
} }
.detail-top-card-right-middle .game-info .infos .infoitem { .detail-top-card-right-middle .game-info .infos .infoitem {
margin-right: 60px; margin-right: 40px;
} }
.detail-top-card-right-middle .game-info .infos .infoitem span { .detail-top-card-right-middle .game-info .infos .infoitem span {
@ -705,6 +746,14 @@
.disclaimer-content p { .disclaimer-content p {
margin-bottom: 0; margin-bottom: 0;
} }
.infoitem-value {
border: 1px #0d6efd dashed;
padding: 3px 6px;
font-size: 13px;
background-color: #0081ff12;
border-radius: 5px;
}
</style> </style>
{include file="component/foot" /} {include file="component/foot" /}

17
app/index/view/resources/list.php
View File

@ -19,7 +19,7 @@
<div class="resource-card"> <div class="resource-card">
<div class="card-image"> <div class="card-image">
<img src="{$resource.icon|default='/static/images/default-resource.jpg'}" <img src="{$resource.icon|default='/static/images/default-resource.jpg'}"
alt="{$resource.name}"> alt="{$resource.title}">
<div class="image-overlay"></div> <div class="image-overlay"></div>
</div> </div>
<div class="card-content"> <div class="card-content">
@ -27,7 +27,7 @@
<span class="resource-number">{$resource.number}</span> <span class="resource-number">{$resource.number}</span>
<time class="create-date">{$resource.create_time|date="Y-m-d"}</time> <time class="create-date">{$resource.create_time|date="Y-m-d"}</time>
</div> </div>
<h3 class="resource-title">{$resource.name}</h3> <h3 class="resource-title">{$resource.title}</h3>
<div class="card-footer"> <div class="card-footer">
<div class="resource-stats"> <div class="resource-stats">
<span class="stat-item"> <span class="stat-item">
@ -186,6 +186,15 @@
margin: 0 0 15px; margin: 0 0 15px;
color: #333; color: #333;
line-height: 1.4; line-height: 1.4;
border-top: 1px solid #f0f0f0;
padding-top: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
max-height: 3.2em;
} }
.card-footer { .card-footer {
@ -283,11 +292,11 @@
.resource-grid { .resource-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.modern-title { .modern-title {
font-size: 1.8rem; font-size: 1.8rem;
} }
.modern-subtitle { .modern-subtitle {
font-size: 1rem; font-size: 1rem;
} }