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

同步更改

Browse Source
This commit is contained in:
hero920103
2025-08-09 23:49:50 +08:00
parent 8e96995e1c
commit 5a5f64b8c8
243 changed files with 1536 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index/view/articles/index.php
+84 -61
View File
@@ -23,7 +23,8 @@
</h3>
<ul class="category-menu">
{volist name="cate.subCategories" id="subCategory"}
<li class="menu-item {$cate.id == $subCategory.id ? 'active' : ''}" data-cateid="{$subCategory.id}">
<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>
@@ -38,38 +39,42 @@
<div class="article-grid" id="articleList">
{volist name="cate.subCategories" id="subCategory"}
{if $cate.id == $subCategory.id}
{if !empty($subCategory.list)}
{volist name="subCategory.list" id="article"}
<article class="article-card">
<div class="card-image">
<img src="{$article.image}" alt="{$article.title}">
<div class="image-overlay"></div>
</div>
<div class="card-content">
<div class="meta-info">
<span class="category-tag">${article.category_name || '未分类'}</span>
<time class="publish-date">${article.create_time || ''}</time>
</div>
<h3 class="article-title">${article.title}</h3>
<div class="card-footer">
<div class="stats">
<span class="views"><i class="layui-icon layui-icon-eye"></i> ${article.views || 0}</span>
<span class="likes"><i class="layui-icon layui-icon-praise"></i> ${article.likes || 0}</span>
</div>
<a href="/index/articles/detail?id=${article.id}" class="read-more">阅读更多</a>
</div>
</div>
</article>
{/volist}
{else}
<div class="empty-state">
<div class="empty-icon">
<i class="layui-icon layui-icon-template-1"></i>
</div>
<h4>暂无文章</h4>
<p>当前分类下没有找到相关文章</p>
{if !empty($subCategory.list)}
{volist name="subCategory.list" id="article"}
<article class="article-card">
<div class="card-image">
<img src="{$article.image}" alt="{$article.title}">
<div class="image-overlay"></div>
</div>
<div class="card-content">
<div class="meta-info">
<!-- <span class="category-tag">${article.category_name || '未分类'}</span> -->
<time class="publish-date">{:date('Y-m-d', $article['create_time'])}</time>
</div>
{/if}
<a href="/index/articles/detail?id=${article.id}">
<h3 class="article-title">${article.title}</h3>
</a>
<div class="card-footer">
<div class="stats">
<span class="views"><i class="layui-icon layui-icon-eye"></i> ${article.views ||
0}</span>
<span class="likes"><i class="layui-icon layui-icon-praise"></i> ${article.likes ||
0}</span>
</div>
</div>
</div>
</article>
{/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>
@@ -82,25 +87,25 @@
</div>
<script>
layui.use(['laypage', 'jquery'], function(){
layui.use(['laypage', 'jquery'], function () {
var laypage = layui.laypage;
var $ = layui.jquery;
// 分类切换
$('.menu-item').on('click', function() {
$('.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() {
$(document).ready(function () {
var $firstMenuItem = $('.menu-item').first();
if ($firstMenuItem.length > 0) {
$firstMenuItem.click();
@@ -116,14 +121,14 @@
cate: cateid,
page: page
},
beforeSend: function() {
beforeSend: function () {
$('#articleList').html('<div class="loading-state"><i class="layui-icon layui-icon-loading"></i>加载中...</div>');
},
success: function(res) {
if(res.code === 1) {
success: function (res) {
if (res.code === 1) {
var html = '';
if(res.data.articles && res.data.articles.length > 0) {
res.data.articles.forEach(function(article) {
if (res.data.articles && res.data.articles.length > 0) {
res.data.articles.forEach(function (article) {
html += `<article class="article-card">
<div class="card-image">
<img src="${article.image}" alt="${article.title}">
@@ -131,16 +136,19 @@
</div>
<div class="card-content">
<div class="meta-info">
<span class="category-tag">${article.category_name || '未分类'}</span>
<time class="publish-date">${article.create_time || ''}</time>
</div>
<h3 class="article-title">${article.title}</h3>
<a href="/index/articles/detail?id=${article.id}" class="read-more">
<h3 class="article-title">${article.title}</h3>
</a>
<div class="card-footer">
<div class="stats">
<span class="views"><i class="layui-icon layui-icon-eye"></i> ${article.views || 0}</span>
<span class="likes"><i class="layui-icon layui-icon-praise"></i> ${article.likes || 0}</span>
</div>
<a href="/index/articles/detail?id=${article.id}" class="read-more">阅读更多</a>
<div class="times">
<time class="publish-date">${article.create_time ? new Date(article.create_time * 1000).toLocaleDateString() : ''}</time>
</div>
</div>
</div>
</article>`;
@@ -155,7 +163,7 @@
</div>`;
}
$('#articleList').html(html);
// 渲染分页
laypage.render({
elem: 'pagination',
@@ -164,8 +172,8 @@
curr: res.data.current_page || 1,
theme: '#1E9FFF',
layout: ['prev', 'page', 'next'],
jump: function(obj, first) {
if(!first) {
jump: function (obj, first) {
if (!first) {
loadArticles(cateid, obj.curr);
}
}
@@ -318,7 +326,7 @@
}
.card-image {
height: 180px;
height: 135px;
position: relative;
overflow: hidden;
}
@@ -350,10 +358,16 @@
flex-direction: column;
}
.card-content .read-more h3:hover {
color: #1E9FFF !important;
transition: all ease .5s;
font-weight:700;
}
.meta-info {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
/* margin-bottom: 12px; */
font-size: 0.85rem;
color: #666;
}
@@ -398,12 +412,16 @@
}
.stats {
font-size: 0.85rem;
color: #999;
display: flex;
gap: 15px;
}
.times,
.stats {
font-size: 0.85rem;
color: #999;
}
.stats i {
margin-right: 3px;
}
@@ -429,7 +447,7 @@
margin-top: 40px;
}
.layui-laypage a,
.layui-laypage a,
.layui-laypage span {
border-radius: 4px !important;
margin: 0 3px !important;
@@ -491,8 +509,13 @@
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 响应式设计 */
@@ -500,12 +523,12 @@
.modern-layout {
grid-template-columns: 1fr;
}
.modern-sidebar {
position: static;
margin-bottom: 30px;
}
.article-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
@@ -515,7 +538,7 @@
.modern-header {
padding: 60px 0 40px;
}
.modern-title {
font-size: 2rem;
}
@@ -525,11 +548,11 @@
.article-grid {
grid-template-columns: 1fr;
}
.modern-title {
font-size: 1.8rem;
}
.modern-subtitle {
font-size: 1rem;
}