更新gnore规则

This commit is contained in:
李志强 2025-06-10 15:46:57 +08:00
parent c5e5cace18
commit 26c107bdc7
5 changed files with 1328 additions and 1 deletions

1
.gitignore vendored
View File

@ -3,3 +3,4 @@
/vendor
runtime
*.log
config/database.php

View File

@ -0,0 +1,710 @@
{include file="component/head" /}
{include file="component/header-simple" /}
<div class="main">
<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="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 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>
</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 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 class="go-to-top" id="goToTop">
<i class="layui-icon layui-icon-top"></i>
</div>
{include file="component/footer" /}
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 获取游戏ID
const gameId = new URLSearchParams(window.location.search).get('id');
if (!gameId) {
alert('游戏ID不存在');
return;
}
// 获取游戏详情
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 = `
<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>';
}
// 渲染下一篇
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>';
}
}
})
.catch(error => {
console.error('获取游戏详情失败:', error);
});
// 更新访问次数
updateGameViews(gameId);
// 下载功能
const downloadBtn = document.getElementById('downloadBtn');
if (downloadBtn) {
downloadBtn.addEventListener('click', function() {
fetch('/index/game/downloadurl?id=' + gameId, {
method: 'GET',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => {
if (!response.ok) {
throw new Error('网络响应失败');
}
return response.json();
})
.then(data => {
if (data.code === 1) {
const downloadsElement = document.getElementById('gameDownloads');
if (downloadsElement) {
let downloads = parseInt(downloadsElement.textContent);
downloadsElement.textContent = downloads + 1;
}
// 直接使用返回的URL
if (data.data && data.data.url) {
window.open(data.data.url, '_blank');
} else {
alert('下载地址不存在');
}
} else {
alert('下载失败:' + data.msg);
}
})
.catch(error => {
console.error('下载请求失败:', error);
alert('下载请求失败,请稍后重试');
});
});
}
//复制分享码
const codeBtn = document.getElementById('codeBtn');
if (codeBtn) {
codeBtn.addEventListener('click', function() {
const code = '<?php echo $game['code']; ?>';
if (code) {
// 创建一个临时输入框
const tempInput = document.createElement('input');
tempInput.value = code;
document.body.appendChild(tempInput);
tempInput.select();
try {
// 尝试使用传统的复制方法
document.execCommand('copy');
layer.msg('分享码已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
layer.msg('复制失败,请手动复制');
} finally {
// 移除临时输入框
document.body.removeChild(tempInput);
}
} else {
layer.msg('分享码不存在');
}
});
}
// 返回顶部功能
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'
});
});
});
// 更新游戏访问次数
function updateGameViews(gameId) {
fetch('/index/game/updateViews', {
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) {
const viewsElement = document.querySelector('.game-views');
if (viewsElement) {
viewsElement.innerHTML = `<i class="fa-solid fa-eye"></i> ${result.data.views}`;
}
}
})
.catch(error => {
console.error('更新访问次数失败:', error);
});
}
</script>
<style>
.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 {
padding: 50px;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.game-header {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.game-title {
font-size: 30px;
font-weight: 700;
color: #333;
margin-bottom: 15px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.game-title-1 {
font-size: 16px;
font-weight: 700;
color: #333;
margin-bottom: 15px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.game-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
color: #666;
font-size: 14px;
}
.game-meta span {
display: flex;
align-items: center;
}
.game-meta i {
margin-right: 5px;
}
.game-content {
line-height: 1.8;
color: #333;
font-size: 16px;
margin-bottom: 30px;
}
.game-cover {
margin-bottom: 20px;
}
.game-cover img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 8px;
}
.game-desc {
margin-bottom: 30px;
}
.game-actions {
display: flex;
justify-content: center;
gap: 40px;
margin: 30px 0;
padding: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.game-actions1 {
display: flex;
margin: 20px 0;
}
.game-navigation {
display: flex;
justify-content: space-between;
margin: 30px 0;
}
.prev-game,
.next-game {
max-width: 45%;
}
.prev-game a,
.next-game a {
color: #333 !important;
text-decoration: none;
}
.prev-game a:hover,
.next-game a:hover {
color: #f57005 !important;
transition: all 0.3s ease;
}
.btn {
/* background: #f57005; */
color: #fff;
padding: 5px 15px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
/* background: #e66600; */
transform: translateY(-2px);
}
.codebtn {
color: #0d6efd;
padding: 15px 30px;
border-radius: 8px;
border: 1px solid #0d6efd;
cursor: pointer;
transition: all 0.3s ease;
background-color: #fff;
}
.codebtn:hover {
transform: translateY(-2px);
}
.related-games {
margin: 40px 0;
}
.related-games h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.related-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.game-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.game-item {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.game-item:hover {
transform: translateY(-5px);
}
.game-item a {
text-decoration: none;
color: inherit;
}
.game-cover img {
width: 100%;
height: 150px;
object-fit: cover;
}
.game-info {
padding: 10px;
}
.go-to-top {
position: fixed;
right: 30px;
bottom: 30px;
width: 40px;
height: 40px;
background: #f57005;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.go-to-top.show {
opacity: 1;
visibility: visible;
}
.go-to-top:hover {
background: #e66600;
transform: translateY(-3px);
}
@media (max-width: 768px) {
.game-title {
font-size: 24px;
}
.game-list {
grid-template-columns: repeat(1, 1fr);
}
.game-meta {
gap: 10px;
}
.go-to-top {
right: 20px;
bottom: 20px;
width: 36px;
height: 36px;
}
}
.disclaimers {
color: #b1b1b1;
width: 80%;
margin: 20px auto;
margin-bottom: 60px;
}
.disclaimer-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}
.disclaimer-content {
font-size: 14px;
line-height: 1.6;
}
.disclaimer-content p {
margin-bottom: 0;
}
</style>
{include file="component/foot" /}

View File

@ -0,0 +1,539 @@
{include file="component/head" /}
{include file="component/header-simple" /}
<!-- 简约现代文章中心 -->
<div class="modern-games-page">
<!-- 简约标题区 -->
<div class="modern-header">
<div class="container">
<h1 class="modern-title">资源中心</h1>
<p class="modern-subtitle">网络天下资源,一站式搜索</p>
</div>
</div>
<!-- 主要内容区 -->
<div class="container">
<div class="modern-layout">
<!-- 侧边分类导航 -->
<aside class="modern-sidebar">
<div class="sidebar-card">
<h3 class="sidebar-title">
<i class="layui-icon layui-icon-list"></i>
<span>分类导航</span>
</h3>
<ul class="category-menu">
{volist name="cate.subCategories" id="subCategory"}
<li class="menu-item {$cate.id == $subCategory.id ? 'active' : ''}" data-cateid="{$subCategory.id}">
<span>{$subCategory.name}</span>
<i class="layui-icon layui-icon-right"></i>
</li>
{/volist}
</ul>
</div>
</aside>
<!-- 文章内容区 -->
<main class="modern-main">
<!-- 文章列表 -->
<div class="game-grid" id="gameList">
{volist name="cate.subCategories" id="subCategory"}
{if $cate.id == $subCategory.id}
{if !empty($subCategory.list)}
{volist name="subCategory.list" id="game"}
<game class="game-card">
<div class="card-image">
<img src="{$game.icon|default=$subCategory.icon|default='/static/images/default-game.jpg'}" alt="{$game.title}">
<div class="image-overlay"></div>
</div>
<div class="card-content">
<div class="meta-info">
<span class="category-tag">{$subCategory.name}</span>
<time class="publish-date">{$game.create_time|date="Y-m-d"}</time>
</div>
<h3 class="game-title">{$game.title}</h3>
<div class="card-footer">
<div class="stats">
<span class="views"><i class="layui-icon layui-icon-eye"></i> {$game.views|default=0}</span>
<span class="likes"><i class="layui-icon layui-icon-praise"></i> {$game.likes|default=0}</span>
</div>
<a href="/index/game/detail?id={$game.id}" class="read-more">阅读更多</a>
</div>
</div>
</game>
{/volist}
{else}
<div class="empty-state">
<div class="empty-icon">
<i class="layui-icon layui-icon-template-1"></i>
</div>
<h4>暂无文章</h4>
<p>当前分类下没有找到相关文章</p>
</div>
{/if}
{/if}
{/volist}
</div>
<!-- 分页 -->
<div class="modern-pagination" id="pagination"></div>
</main>
</div>
</div>
</div>
<script>
layui.use(['laypage', 'jquery'], function(){
var laypage = layui.laypage;
var $ = layui.jquery;
// 分类切换
$('.menu-item').on('click', function() {
var cateid = $(this).data('cateid');
var $menuItems = $('.menu-item');
// 更新选中状态
$menuItems.removeClass('active');
$(this).addClass('active');
// 加载文章
loadArticles(cateid, 1);
});
// 页面加载完成后,自动触发第一个分类的点击事件
$(document).ready(function() {
var $firstMenuItem = $('.menu-item').first();
if ($firstMenuItem.length > 0) {
$firstMenuItem.click();
}
});
// 加载文章函数
function loadArticles(cateid, page) {
$.ajax({
url: '/index/game/list',
type: 'POST',
data: {
cate: cateid,
page: page
},
beforeSend: function() {
$('#gameList').html('<div class="loading-state"><i class="layui-icon layui-icon-loading"></i>加载中...</div>');
},
success: function(res) {
if(res.code === 1) {
var html = '';
if(res.data.games && res.data.games.length > 0) {
res.data.games.forEach(function(game) {
html += `<game class="game-card">
<div class="card-image">
<img src="${game.icon || game.category_icon || '/static/images/default-game.jpg'}" alt="${game.title}">
<div class="image-overlay"></div>
</div>
<div class="card-content">
<div class="meta-info">
<span class="category-tag">${game.category_name || '未分类'}</span>
<time class="publish-date">${game.create_time || ''}</time>
</div>
<h3 class="game-title">${game.title}</h3>
<div class="card-footer">
<div class="stats">
<span class="views"><i class="layui-icon layui-icon-eye"></i> ${game.views || 0}</span>
<span class="likes"><i class="layui-icon layui-icon-praise"></i> ${game.likes || 0}</span>
</div>
<a href="/index/game/detail?id=${game.id}" class="read-more">阅读更多</a>
</div>
</div>
</game>`;
});
} else {
html = `<div class="empty-state">
<div class="empty-icon">
<i class="layui-icon layui-icon-template-1"></i>
</div>
<h4>暂无文章</h4>
<p>当前分类下没有找到相关文章</p>
</div>`;
}
$('#gameList').html(html);
// 渲染分页
laypage.render({
elem: 'pagination',
count: res.data.total || 0,
limit: res.data.per_page || 12,
curr: res.data.current_page || 1,
theme: '#1E9FFF',
layout: ['prev', 'page', 'next'],
jump: function(obj, first) {
if(!first) {
loadArticles(cateid, obj.curr);
}
}
});
}
}
});
}
});
</script>
{include file="component/footer" /}
<style>
/* 基础样式重置 */
.modern-games-page {
font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
color: #333;
line-height: 1.6;
background-color: #f9fafc;
padding-bottom: 60px;
}
/* 标题区样式 */
.modern-header {
background: linear-gradient(135deg, #1E9FFF 0%, #0d8aff 100%);
color: white;
padding: 80px 0 60px;
text-align: center;
margin-bottom: 40px;
}
.modern-title {
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 15px;
letter-spacing: 1px;
}
.modern-subtitle {
font-size: 1.1rem;
font-weight: 300;
opacity: 0.9;
margin: 0;
}
/* 布局结构 */
.modern-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 30px;
}
/* 侧边栏样式 */
.modern-sidebar {
position: sticky;
top: 30px;
align-self: start;
}
.sidebar-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
overflow: hidden;
}
.sidebar-title {
font-size: 1.1rem;
font-weight: 500;
padding: 20px;
margin: 0;
display: flex;
align-items: center;
color: #555;
border-bottom: 1px solid #f0f0f0;
}
.sidebar-title i {
margin-right: 10px;
font-size: 1.2rem;
color: #1E9FFF;
}
.category-menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu-item {
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.menu-item:hover {
background-color: #f8fafd;
color: #1E9FFF;
}
.menu-item.active {
background-color: #f0f7ff;
border-left-color: #1E9FFF;
color: #1E9FFF;
font-weight: 500;
}
.menu-item i {
font-size: 0.9rem;
color: #aaa;
}
.menu-item.active i,
.menu-item:hover i {
color: #1E9FFF;
}
/* 主内容区样式 */
.modern-main {
background: transparent;
}
/* 文章网格布局 */
.game-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 40px;
}
/* 文章卡片样式 */
.game-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.game-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
}
.card-image {
height: 180px;
position: relative;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}
.game-card:hover .card-image img {
transform: scale(1.05);
}
.card-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.meta-info {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 0.85rem;
color: #666;
}
.category-tag {
background: #f0f7ff;
color: #1E9FFF;
padding: 3px 10px;
border-radius: 4px;
font-size: 0.75rem;
}
.game-title {
font-size: 1rem;
font-weight: 500;
margin: 0 0 10px;
color: #333;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.game-excerpt {
font-size: 0.9rem;
color: #666;
margin: 0 0 20px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.stats {
font-size: 0.85rem;
color: #999;
display: flex;
gap: 15px;
}
.stats i {
margin-right: 3px;
}
.read-more {
color: #1E9FFF;
font-size: 0.9rem;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
}
.read-more:hover {
color: #0d8aff;
text-decoration: underline;
}
/* 分页样式 */
.modern-pagination {
text-align: center;
margin-top: 40px;
}
.layui-laypage a,
.layui-laypage span {
border-radius: 4px !important;
margin: 0 3px !important;
}
.layui-laypage a {
color: #666 !important;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
background-color: #1E9FFF !important;
}
/* 空状态样式 */
.empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
background: white;
border-radius: 8px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
}
.empty-icon {
font-size: 3rem;
color: #ddd;
margin-bottom: 20px;
}
.empty-icon i {
font-size: inherit;
}
.empty-state h4 {
font-size: 1.2rem;
font-weight: 400;
color: #666;
margin: 0 0 10px;
}
.empty-state p {
color: #999;
font-size: 0.95rem;
margin: 0;
}
/* 加载状态 */
.loading-state {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: #666;
}
.loading-state i {
font-size: 1.5rem;
margin-right: 10px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 响应式设计 */
@media (max-width: 992px) {
.modern-layout {
grid-template-columns: 1fr;
}
.modern-sidebar {
position: static;
margin-bottom: 30px;
}
.game-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media (max-width: 768px) {
.modern-header {
padding: 60px 0 40px;
}
.modern-title {
font-size: 2rem;
}
}
@media (max-width: 576px) {
.game-grid {
grid-template-columns: 1fr;
}
.modern-title {
font-size: 1.8rem;
}
.modern-subtitle {
font-size: 1rem;
}
}
</style>
{include file="component/foot" /}

View File

@ -0,0 +1,76 @@
<div class="container py-5">
<div class="row g-4">
<!-- 左侧分类列表 -->
<div class="col-lg-3">
<div class="category-sidebar">
<div class="sidebar-header">
<i class="layui-icon layui-icon-app"></i>
<span>文章分类</span>
</div>
<div class="category-list">
{volist name="categories" id="cate"}
<div class="category-item {$category.id == $cate.id ? 'active' : ''}" data-cateid="{$cate.id}">{$cate.name}</div>
{/volist}
</div>
</div>
</div>
<!-- 右侧文章列表 -->
<div class="col-lg-9">
{if $category}
<div class="category-header mb-4">
<h2 class="category-title">{$category.name}</h2>
<p class="category-desc">{$category.desc|default=''}</p>
</div>
{/if}
<div class="article-list">
{volist name="games" id="article"}
<div class="article-item">
<div class="row g-0">
<div class="col-md-4">
<div class="article-image">
<img src="{$article.image|default='/static/images/default.jpg'}" alt="{$article.title}">
</div>
</div>
<div class="col-md-8">
<div class="article-content">
<h3 class="article-title">
<a href="/index/game/detail?id={$article.id}">{$article.title}</a>
</h3>
<p class="article-desc">{$article.desc|default=''}</p>
<div class="article-meta">
<div class="article-stats">
<span><i class="layui-icon layui-icon-eye"></i> {$article.views|default=0}</span>
<span><i class="layui-icon layui-icon-praise"></i> {$article.likes|default=0}</span>
<span><i class="layui-icon layui-icon-date"></i> {$article.create_time|date="Y-m-d"}</span>
</div>
<a href="/index/game/detail?id={$article.id}" class="btn-detail">查看详情</a>
</div>
</div>
</div>
</div>
</div>
{/volist}
</div>
<!-- 分页 -->
<div class="mt-5">
{$games|raw}
</div>
</div>
</div>
</div>
<script>
layui.use(['layer'], function () {
var layer = layui.layer;
var $ = layui.$;
// 分类切换
$('.category-item').on('click', function() {
var cateid = $(this).data('cateid');
window.location.href = '/index/game/list?cate=' + cateid;
});
});
</script>

View File

@ -41,7 +41,8 @@ return [
// 数据库类型
'type' => env('database.type', 'mysql'),
// 服务器地址
'hostname' => env('database.hostname', '121.36.243.179'),
// 'hostname' => env('database.hostname', '121.36.243.179'),
'hostname' => env('database.hostname', '127.0.0.1'),
// 数据库名
'database' => env('database.database', 'yunzertest'),
// 用户名