ym.7in6.com/application/admin/view/deliver/apply.html

<style>
    /* 默认背景颜色 */
    .table tbody tr.selected {
        background-color: yellow !important;
    }
    .table-detail tbody tr.selected {
        background-color: yellow !important;
    }

    /* 布局样式 */
    .container-wrapper {
        display: flex;
        width: 100%;
        position: relative;
    }
    #date-sidebar {
        width: 200px;
        background: #f8f9fa;
        border-right: 1px solid #dee2e6;
        height: 64vh;
        overflow-y: auto;
        transition: all 0.3s ease;
    }
    #date-sidebar.collapsed {
        width: 0;
        overflow: hidden;
        border-right: none;
    }
    .content-area {
        flex: 1;
        padding: 15px;
        overflow-y: auto;
        transition: all 0.3s ease;
    }
    .sidebar-toggle {
        position: absolute;
        left: 200px;
        top: 0px;
        z-index: 1000;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-left: none;
        border-radius: 0 4px 4px 0;
        padding: 5px 10px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    #date-sidebar.collapsed + .sidebar-toggle {
        left: 0;
    }

    /* 树形导航样式 */
    .nav-sidebar {
        padding-left: 0;
        list-style: none;
    }
    .nav-sidebar .nav-item {
        position: relative;
    }
    .nav-sidebar .nav-link {
        display: block;
        padding: 8px 15px;
        color: #333;
        text-decoration: none;
        transition: all 0.2s;
    }
    .nav-sidebar .nav-link:hover {
        background-color: #e9ecef;
    }
    .nav-sidebar .nav-link .fa {
        margin-right: 5px;
        width: 15px;
        text-align: center;
    }
    .nav-sidebar .children {
        padding-left: 20px;
        display: none;
    }
    .nav-sidebar .expanded > .children {
        display: block;
    }
    .nav-sidebar .has-children > .nav-link:after {
        content: "\f054";
        font-family: "FontAwesome";
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 12px;
        transition: transform 0.2s;
    }
    .nav-sidebar .has-children.expanded > .nav-link:after {
        transform: rotate(90deg);
    }
    .nav-sidebar .active > .nav-link {
        background-color: #e9ecef;
        font-weight: bold;
    }

</style>

<div class="container-wrapper">
    <!-- 左侧日期侧边栏 -->
    <div id="date-sidebar">
        <div class="sidebar-header" style="padding: 10px 15px; background: #e9ecef; font-weight: bold;">
<!--            <i class="fa fa-calendar"></i> 发货日期-->
        </div>
        <ul class="nav nav-sidebar" id="date-nav">
            <!-- 数据将通过JavaScript动态加载 -->
            <li class="nav-item">
                <a href="javascript:;" class="nav-link loading-text">
                    <i class="fa fa-spinner fa-spin"></i> 加载中...
                </a>
            </li>
        </ul>
    </div>

    <!-- 展开/收缩按钮 -->
    <div class="sidebar-toggle" id="sidebarToggle">
        <i class="fa fa-chevron-left"></i>
    </div>

    <!-- 右侧内容区域 -->
    <div class="content-area" id="contentArea">
        <!-- 内容保持不变 -->
        <div class="row" style="font-size: 12px;">
            <div class="panel panel-default panel-intro">
                <div class="panel-body">
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade active in row" id="one">
                            <div class="widget-body no-padding">
                                <table id="table2" class="table table-striped table-bordered table-hover table-nowrap"
                                       data-operate-edit=""
                                       data-search="false" data-show-toggle="false"
                                       data-show-columns="false" data-show-export="false"
                                       data-common-search="false"
                                       data-operate-del="{:$auth->check('deliver/apply_del')}"
                                       style="height: 300px;"
                                       width="100%">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="font-size: 12px;">
            <div class="panel panel-default panel-intro">
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade active in row" id="two">
                            <div class="widget-body no-padding">
                                <div id="toolbar2" class="toolbar">
                                    <a href="javascript:;" class="btn btn-primary" id="addPalletBtn" title="新增">
                                        <i class="fa fa-plus"></i> 新增
                                    </a>
                                </div>
                                <table id="table-detail"
                                       class="table table-striped table-bordered table-hover"
                                       data-search="false" data-show-toggle="false"
                                       data-show-columns="false" data-show-export="false"
                                       data-common-search="false"
                                       width="100%">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>