/* 侧边栏 */ .course-details { position: fixed; top:0; right:-360px; width:360px; height:100%; background:#fff; box-shadow:-2px 0 10px rgba(0,0,0,.1); transition:right .3s ease; padding:16px; overflow:auto; z-index: 1000; } .course-details.open { right:0; } .details-header { display:flex; justify-content:space-between; align-items:center; } .close-btn { border:none; background:transparent; font-size:22px; cursor:pointer; } /* 主体布局 */ .lesson-editor { display:flex; height: calc(100vh - 20px); gap: 12px; padding: 12px; } .outline { width: 280px; border:1px solid #eee; border-radius:10px; padding:10px; overflow:auto; background:#fafafa; } .outline-header { font-weight:700; margin-bottom:8px; } #outline-tree { list-style:none; padding-left:0; } #outline-tree li { margin:4px 0; cursor:pointer; } #outline-tree .lvl1 { font-weight:700; } #outline-tree .lvl2 { margin-left:12px; } #outline-tree .lvl3 { margin-left:24px; } #outline-tree li.active { background:#eaf6ff; border-radius:6px; padding:2px 6px; } .editor-pane { flex:1; display:flex; flex-direction:column; min-width:0; border:1px solid #eee; border-radius:10px; } .editor-tabs { display:flex; align-items:center; gap:8px; padding:8px; border-bottom:1px solid #eee; } .tab-btn { border:1px solid #ddd; background:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; } .tab-btn.active { background:#f0f8ff; border-color:#a0c4ff; } .actions { margin-left:auto; } .actions button { padding:6px 12px; border:none; border-radius:8px; background:#4CAF50; color:#fff; cursor:pointer; } .tab-content { flex:1; padding:8px; } .tab { display:none; height:100%; } .tab.active { display:block; height:100%; } textarea { width:100%; height: calc(100vh - 180px); border:1px solid #ddd; border-radius:8px; padding:10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; box-sizing:border-box; resize: vertical; }