168 lines
8.0 KiB
PHP
168 lines
8.0 KiB
PHP
<main class="main-content">
|
||
<div class="container">
|
||
<!-- 文章模块 -->
|
||
<div class="core-block core-module" id="opencourse" style="order: 3;">
|
||
<div class="module-header">
|
||
<div>
|
||
<div class="ModuleTitle_titleWrapper">
|
||
<h3 class="ModuleTitle_title">站点新闻</h3>
|
||
<div class="ModuleTitle_subtitle">新鲜资讯 尽在掌握</div>
|
||
</div>
|
||
</div>
|
||
<div class="more-btn">更多</div>
|
||
</div>
|
||
<div class="product-list">
|
||
<div class="opencourse product-item">
|
||
<div class="video"><img data-v-4477fdbc=""
|
||
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"><!----></div>
|
||
<div class="introduction">
|
||
<div class="title">闪客 · 怎么理解 AI？</div>
|
||
<div class="subtitle">闪客 | B 站知名科普 UP 主</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="desc">1025人学过</div>
|
||
<!-- <div class="btn">观看： 123人</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="opencourse product-item">
|
||
<div class="video"><img data-v-4477fdbc=""
|
||
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">多模态对话引擎实战</div>
|
||
<div class="subtitle">吴桐 | 网易云信音视频技术负责人，流媒体首席架构师</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="desc">380人学过</div>
|
||
<!-- <div class="btn">观看： 123人</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="opencourse product-item">
|
||
<div class="video"><img data-v-4477fdbc=""
|
||
src="https://static001.geekbang.org/resource/image/4y/da/4yyfb232bfbfbdcc6ed827c16b04a9da.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
|
||
alt="" class="cover"><!----></div>
|
||
<div class="introduction">
|
||
<div class="title">极客视点</div>
|
||
<div class="subtitle">极客时间 | 编辑部</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="desc">12.4w人学过</div>
|
||
<!-- <div class="btn">观看： 123人</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="opencourse product-item">
|
||
<div class="video"><img data-v-4477fdbc=""
|
||
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">周志明的软件架构课</div>
|
||
<div class="subtitle">周志明 | 博士，远光软件研究院院长，《深入理解Java虚拟机》《凤凰架构》等书作者</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="desc">6.0w人学过</div>
|
||
<!-- <div class="btn">观看： 123人</div>d -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文章模块 -->
|
||
<div class="core-block core-module" id="opencourse" style="order: 3;">
|
||
<div class="module-header">
|
||
<div>
|
||
<div class="ModuleTitle_titleWrapper">
|
||
<h3 class="ModuleTitle_title">技术文章</h3>
|
||
<div class="tab-container">
|
||
<div class="tab-header">
|
||
<div class="tab-item active" data-tab="all">全部</div>
|
||
{foreach $articleList as $cateName => $articles}
|
||
<div class="tab-item" data-tab="{$cateName}">{$cateName}</div>
|
||
{/foreach}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="more-btn">更多</div>
|
||
</div>
|
||
<div class="product-list">
|
||
<!-- 全部文章 -->
|
||
<div class="tab-content active" data-tab="all">
|
||
{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>
|
||
|
||
<!-- 分类文章 -->
|
||
{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="{$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}
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 获取所有tab项和内容
|
||
const tabItems = document.querySelectorAll('.tab-item');
|
||
const tabContents = document.querySelectorAll('.tab-content');
|
||
|
||
// 为每个tab项添加点击事件
|
||
tabItems.forEach(tab => {
|
||
tab.addEventListener('click', function () {
|
||
// 移除所有active类
|
||
tabItems.forEach(item => item.classList.remove('active'));
|
||
tabContents.forEach(content => content.classList.remove('active'));
|
||
|
||
// 添加active类到当前点击的tab
|
||
this.classList.add('active');
|
||
|
||
// 显示对应的内容
|
||
const tabName = this.getAttribute('data-tab');
|
||
const activeContent = document.querySelector(`.tab-content[data-tab="${tabName}"]`);
|
||
if (activeContent) {
|
||
activeContent.classList.add('active');
|
||
}
|
||
|
||
// 添加切换动画效果
|
||
activeContent.style.opacity = '0';
|
||
setTimeout(() => {
|
||
activeContent.style.opacity = '1';
|
||
}, 50);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</script> |