yunzer/app/index/view/component/main.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>
                                <div class="tab-item" data-tab="frontend">前端</div>
                                <div class="tab-item" data-tab="backend">后端</div>
                                <div class="tab-item" data-tab="mobile">移动端</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="more-btn">更多</div>
            </div>
            <div class="product-list">
                <!-- 全部课程 -->
                <div class="tab-content active" data-tab="all">
                    <!-- 原有的课程列表内容 -->
                    <div class="opencourse product-item">
                        <!-- ... 原有内容 ... -->
                    </div>
                    <!-- ... 其他课程项 ... -->
                </div>

                <!-- 前端课程 -->
                <div class="tab-content" data-tab="frontend">
                    <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">
                        </div>
                        <div class="introduction">
                            <div class="title">Vue.js 实战教程</div>
                            <div class="subtitle">张老师 | 资深前端工程师</div>
                        </div>
                        <div class="bottom">
                            <div class="desc">2.5w人学过</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>
                    <!-- 可以添加更多移动端课程 -->
                </div>
            </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>