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-09 23:53:34 +08:00
parent e7bcaf29f5
commit d5da3a6ea8
40 changed files with 2990 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index/view/component/main.php
+32 -54
View File
@@ -73,13 +73,13 @@
<div class="module-header">
<div>
<div class="ModuleTitle_titleWrapper">
<h3 class="ModuleTitle_title">公开课</h3>
<h3 class="ModuleTitle_title">技术文章</h3>
<div class="tab-container">
<div class="tab-header">
<div class="tab-item active" data-tab="all">全部</div>
<div class="tab-item" data-tab="frontend">前端</div>
<div class="tab-item" data-tab="backend">后端</div>
<div class="tab-item" data-tab="mobile">移动端</div>
{foreach $articleList as $cateName => $articles}
<div class="tab-item" data-tab="{$cateName}">{$cateName}</div>
{/foreach}
</div>
</div>
</div>
@@ -87,68 +87,45 @@
<div class="more-btn">更多</div>
</div>
<div class="product-list">
<!-- 全部课程 -->
<!-- 全部文章 -->
<div class="tab-content active" data-tab="all">
<!-- 原有的课程列表内容 -->
<div class="opencourse product-item">
<!-- ... 原有内容 ... -->
</div>
<!-- ... 其他课程项 ... -->
{foreach $articleList as $cateName => $articles}
{foreach $articles as $article}
<div class="opencourse product-item">
<div class="video">
<img src="{$article.image}" alt="" class="cover">
</div>
<div class="introduction">
<div class="title">{$article.title}</div>
<div class="subtitle">{$article.author}</div>
</div>
<div class="bottom">
<div class="desc">{$article.desc}</div>
</div>
</div>
{/foreach}
{/foreach}
</div>
<!-- 前端课程 -->
<div class="tab-content" data-tab="frontend">
<!-- 分类文章 -->
{foreach $articleList as $cateName => $articles}
<div class="tab-content" data-tab="{$cateName}">
{foreach $articles as $article}
<div class="opencourse product-item">
<div class="video">
<img src="https://static001.geekbang.org/resource/image/ff/b8/ff18d73bec1040abf3d7bc7bffb532b8.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover">
<img src="{$article.image}" alt="" class="cover">
</div>
<div class="introduction">
<div class="title">Vue.js 实战教程</div>
<div class="subtitle">张老师 | 资深前端工程师</div>
<div class="title">{$article.title}</div>
<div class="subtitle">{$article.author}</div>
</div>
<div class="bottom">
<div class="desc">2.5w人学过</div>
<div class="desc">{$article.desc}</div>
</div>
</div>
<!-- 可以添加更多前端课程 -->
</div>
<!-- 后端课程 -->
<div class="tab-content" data-tab="backend">
<div class="opencourse product-item">
<div class="video">
<img src="https://static001.geekbang.org/resource/image/76/cd/762ee7f34a76fbff61d20aae313833cd.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover">
</div>
<div class="introduction">
<div class="title">PHP高级开发实战</div>
<div class="subtitle">李老师 | 资深后端工程师</div>
</div>
<div class="bottom">
<div class="desc">1.8w人学过</div>
</div>
</div>
<!-- 可以添加更多后端课程 -->
</div>
<!-- 移动端课程 -->
<div class="tab-content" data-tab="mobile">
<div class="opencourse product-item">
<div class="video">
<img src="https://static001.geekbang.org/resource/image/0f/69/0f95b62cf7yy6d6yy674f090d063b669.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover">
</div>
<div class="introduction">
<div class="title">Flutter跨平台开发</div>
<div class="subtitle">王老师 | 移动端架构师</div>
</div>
<div class="bottom">
<div class="desc">1.2w人学过</div>
</div>
</div>
<!-- 可以添加更多移动端课程 -->
{/foreach}
</div>
{/foreach}
</div>
</div>
@@ -187,4 +164,5 @@
});
});
});
</script>
</script>