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

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

    /* 主容器布局 */
    .container-wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    /* 侧边栏样式 */
    #date-sidebar {
        width: 240px;
        min-width: 240px;
        background: #f8f9fa;
        border-right: 1px solid #e0e0e0;
        height: 100%;
        overflow-y: auto;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    #date-sidebar.collapsed {
        transform: translateX(-100%);
        width: 0;
        min-width: 0;
        border-right: none;
    }

    /* 侧边栏头部 */
    .sidebar-header {
        padding: 12px 16px;
        background: #f0f2f5;
        border-bottom: 1px solid #e0e0e0;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    .sidebar-header i {
        margin-right: 8px;
        color: #555;
    }

    /* 侧边栏内容 */
    .sidebar-content {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
    }

    /* 树形导航样式 */
    .nav-sidebar {
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    .nav-sidebar .nav-item {
        position: relative;
    }

    .nav-sidebar .nav-link {
        display: flex;
        align-items: center;
        padding: 8px 16px 8px 24px;
        color: #333;
        text-decoration: none;
        transition: all 0.2s;
        font-size: 13px;
    }

    .nav-sidebar .nav-link:hover {
        background-color: #e6f7ff;
    }

    .nav-sidebar .nav-link .fa {
        margin-right: 8px;
        width: 16px;
        text-align: center;
        font-size: 14px;
    }

    .nav-sidebar .children {
        padding-left: 24px;
        display: none;
    }

    .nav-sidebar .expanded > .children {
        display: block;
    }

    .nav-sidebar .has-children > .nav-link:after {
        content: "\f078";
        font-family: "FontAwesome";
        position: absolute;
        right: 16px;
        top: 10px;
        font-size: 10px;
        transition: transform 0.2s;
        color: #666;
    }

    .nav-sidebar .has-children.expanded > .nav-link:after {
        transform: rotate(180deg);
    }

    .nav-sidebar .active > .nav-link {
        background-color: #e6f7ff;
        color: #1890ff;
        font-weight: 500;
    }

    .nav-sidebar .nav-header {
        padding: 8px 16px;
        font-size: 12px;
        color: #666;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* 内容区域 */
    .content-area {
        flex: 1;
        height: 100%;
        overflow: auto;
        padding: 16px;
        background: #fff;
        transition: all 0.3s ease;
    }

    /* 侧边栏切换按钮 */
    .sidebar-toggle {
        position: absolute;
        left: 240px;
        top: 16px;
        z-index: 100;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-left: none;
        border-radius: 0 4px 4px 0;
        padding: 6px 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    }

    .sidebar-toggle:hover {
        background: #f5f5f5;
    }

    #date-sidebar.collapsed + .sidebar-toggle {
        left: 0;
    }

    #date-sidebar.collapsed + .sidebar-toggle i {
        transform: rotate(180deg);
    }

    /* 加载状态 */
    .loading-text {
        color: #999;
        justify-content: center;
    }

    .loading-text .fa {
        margin-right: 8px;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        #date-sidebar:not(.collapsed) {
            position: absolute;
            z-index: 1000;
            height: 100%;
            box-shadow: 2px 0 8px rgba(0,0,0,0.15);
        }

        .sidebar-toggle {
            display: none;
        }
    }
</style>

<div class="container-wrapper">
    <!-- 左侧日期侧边栏 -->
    <div id="date-sidebar">
        <div class="sidebar-header">
            <span><i class="fa fa-calendar"></i> 发货日期</span>
        </div>
        <div class="sidebar-content">
            <ul class="nav nav-sidebar" id="date-nav">
                <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>

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

    <!-- 右侧内容区域 -->
    <div class="content-area" id="contentArea">
        <div class="panel panel-default panel-intro">
            <div class="panel-body">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">
                            <div id="toolbar" class="toolbar">
                                <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}">
                                    <i class="fa fa-refresh"></i> 刷新
                                </a>
                            </div>
                            <table id="table3"
                                   class="table table-striped table-bordered table-hover table-nowrap"
                                   data-operate-edit=""
                                   data-operate-del="{:$auth->check('deliver/dispatch_del')}"
                                   width="100%">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table" style="margin:0px 30px;">
            <div id="printcode"></div>
        </div>
    </div>
</div>