ruankao/app/index/view/program/list.php

<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="program-list">
                {if empty($programs)}
                <div class="empty-state">
                    <i class="layui-icon layui-icon-face-surprised"></i>
                    <p>暂无程序</p>
                </div>
                {else}
                {volist name="programs" id="program"}
                <div class="program-item">
                    <div class="row g-0">
                        <div class="col-md-4">
                            <div class="program-image">
                                <img src="{$program.icon}" alt="{$program.title}">
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="program-content">
                                <h3 class="program-title">
                                    <a href="/index/program/detail?id={$program.id}">{$program.title}</a>
                                </h3>
                                <p class="program-desc">{$program.desc|default=''}</p>
                                <div class="program-meta">
                                    <div class="program-stats">
                                        <span><i class="layui-icon layui-icon-eye"></i> {$program.views|default=0}</span>
                                        <span><i class="layui-icon layui-icon-download-circle"></i> {$program.downloads|default=0}</span>
                                        <span><i class="layui-icon layui-icon-date"></i> {$program.create_time|date="Y-m-d"}</span>
                                    </div>
                                    <a href="/index/program/detail?id={$program.id}" class="btn-detail">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
                {/if}
            </div>

            <!-- 分页 -->
            {if !empty($programs)}
            <div class="mt-5">
                {$programs->render()|raw}
            </div>
            {/if}
        </div>
    </div>
</div>

<style>
.program-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.program-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.program-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.program-image {
    height: 200px;
    overflow: hidden;
}

.program-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.program-content {
    padding: 20px;
}

.program-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.program-title a {
    color: #333;
    text-decoration: none;
}

.program-title a:hover {
    color: #1E9FFF;
}

.program-desc {
    color: #666;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.program-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
}

.program-stats {
    display: flex;
    gap: 15px;
}

.program-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-detail {
    padding: 6px 15px;
    background: #1E9FFF;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-detail:hover {
    background: #0d8aff;
    color: #fff;
}

.category-sidebar {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.sidebar-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category-item {
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-item:hover {
    background: #f5f5f5;
}

.category-item.active {
    background: #1E9FFF;
    color: #fff;
}

.category-header {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.category-title {
    margin: 0;
    color: #333;
}

.category-desc {
    margin: 10px 0 0;
    color: #666;
}

.empty-state {
    text-align: center;
    padding: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.empty-state i {
    font-size: 48px;
    color: #999;
    margin-bottom: 15px;
}

.empty-state p {
    color: #666;
    font-size: 16px;
    margin: 0;
}
</style>

<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/program/list?cate=' + cateid;
        });
    });
</script>

        // 页面加载完成后，自动触发第一个分类的点击事件
        $(document).ready(function() {
            var $firstMenuItem = $('.category-item').first();
            if ($firstMenuItem.length > 0) {
                $firstMenuItem.click();
            }
        });
    });
</script>