/* 分栏布局容器 */ .split-layout { display: flex; width: 100%; align-items: flex-start; } /* 横向布局(左右分栏) */ .split-layout-horizontal { flex-direction: row; } /* 纵向布局(上下分栏) */ .split-layout-vertical { flex-direction: column; } /* 主内容区 */ .split-layout-main { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; } /* 扩展信息区 */ .split-layout-extend { flex-shrink: 0; background: #ffffff; } /* 右侧扩展区(横向布局) */ .split-layout-extend-right { height: 693px; overflow-y: auto; overflow-x: hidden; position: sticky; top: 16px; padding-right: 4px; } /* 顶部扩展区(纵向布局) */ .split-layout-extend-top { width: 100%; } /* 滚动条样式(横向布局右侧扩展区) */ .split-layout-extend-right::-webkit-scrollbar { width: 6px; } .split-layout-extend-right::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 3px; } .split-layout-extend-right::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; } .split-layout-extend-right::-webkit-scrollbar-thumb:hover { background: #bfbfbf; } /* 响应式:小屏幕时隐藏右侧扩展区 */ @media (max-width: 1200px) { .split-layout-extend-right { display: none; } }