.page-hero { padding: 120px 24px 40px; text-align: center; background: var(--grad-hero); } .page-hero h1 { font-family: var(--font-heading); font-size: var(--fs-hero); margin: var(--sp-lg) 0 var(--sp-sm); } .page-hero-icon { font-size: 3rem; } .visual-container { max-width: 1200px; margin: var(--sp-section) auto; padding: 0 var(--sp-lg); } .visual-layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-lg); margin-bottom: var(--sp-section); } /* 左侧知识树 */ .tree-panel { background: rgba(22,33,62,0.6); border: 1px solid var(--c-ink-border); border-radius: var(--r-lg); padding: var(--sp-lg); max-height: 800px; overflow-y: auto; } .tree-tabs { display: flex; gap: var(--sp-xs); margin-bottom: var(--sp-lg); flex-wrap: wrap; } .tree-tab { padding: 8px 16px; background: rgba(15,52,96,0.4); border: 1px solid var(--c-ink-border); border-radius: var(--r-md); color: var(--c-warm-gray); cursor: pointer; font-size: var(--fs-small); transition: all 0.2s; } .tree-tab.active { background: var(--grad-cta); color: #fff; border-color: transparent; } .tree-tab:hover:not(.active) { border-color: var(--c-origin); } .tree-content { display: none; } .tree-content.active { display: block; } .tree-category { margin-bottom: var(--sp-lg); } .tree-category-title { font-weight: 700; color: var(--c-warm-white); margin-bottom: var(--sp-sm); font-size: var(--fs-body); display: flex; align-items: center; gap: var(--sp-xs); } .tree-items { padding-left: var(--sp-md); border-left: 2px solid rgba(15,52,96,0.4); } .tree-item { padding: 8px 12px; margin-bottom: var(--sp-xs); color: var(--c-warm-gray); cursor: pointer; font-size: var(--fs-small); border-radius: var(--r-sm); transition: all 0.2s; } .tree-item:hover { background: rgba(15,52,96,0.4); color: var(--c-warm-white); } .tree-item.selected { background: var(--c-origin-glow); color: var(--c-origin); font-weight: 700; } /* 右侧可视化区 */ .visual-panel { background: rgba(22,33,62,0.6); border: 1px solid var(--c-ink-border); border-radius: var(--r-lg); padding: var(--sp-xl); } .visual-header { margin-bottom: var(--sp-lg); } .visual-title { font-family: var(--font-heading); font-size: var(--fs-h2); color: var(--c-warm-white); margin-bottom: var(--sp-md); } .visual-controls { display: flex; gap: var(--sp-md); align-items: center; flex-wrap: wrap; } .visual-type-btn { padding: 8px 16px; background: rgba(15,52,96,0.4); border: 1px solid var(--c-ink-border); border-radius: var(--r-md); color: var(--c-warm-gray); cursor: pointer; font-size: var(--fs-small); transition: all 0.2s; } .visual-type-btn.active { background: var(--c-origin-glow); color: var(--c-origin); border-color: var(--c-origin); font-weight: 700; } .visual-type-btn:hover:not(.active) { border-color: var(--c-origin); } .visual-canvas { background: #fff; border-radius: var(--r-md); padding: var(--sp-lg); min-height: 500px; margin-bottom: var(--sp-md); } .visual-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 500px; color: var(--c-warm-dim); text-align: center; } .visual-placeholder-icon { font-size: 4rem; margin-bottom: var(--sp-md); opacity: 0.5; } .visual-actions { display: flex; gap: var(--sp-md); flex-wrap: wrap; } .btn-primary { padding: 12px 28px; background: var(--grad-cta); color: #fff; border: none; border-radius: var(--r-md); font-size: var(--fs-body); font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: transform 0.2s; } .btn-primary:hover { transform: translateY(-1px); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-secondary { padding: 12px 28px; background: rgba(15,52,96,0.4); color: var(--c-warm-white); border: 1px solid var(--c-ink-border); border-radius: var(--r-md); font-size: var(--fs-body); cursor: pointer; font-family: var(--font-body); transition: all 0.2s; } .btn-secondary:hover { border-color: var(--c-origin); } .loading-overlay { position: absolute; inset: 0; background: rgba(26,26,46,0.9); display: none; align-items: center; justify-content: center; border-radius: var(--r-md); z-index: 10; } .loading-overlay.visible { display: flex; } .loading-text { color: var(--c-warm-white); font-size: var(--fs-body); } @media (max-width: 991px) { .visual-layout { grid-template-columns: 1fr; } .tree-panel { max-height: 400px; } } .quick-nav-section { background: rgba(22,33,62,0.6); border-top: 1px solid var(--c-ink-border); padding: var(--sp-xl) var(--sp-lg); margin-top: var(--sp-2xl); } .quick-nav-container { max-width: 900px; margin: 0 auto; } .quick-nav-title { font-family: var(--font-heading); color: var(--c-warm-gray); font-size: var(--fs-small); margin-bottom: var(--sp-md); text-align: center; } .quick-nav-list { display: flex; gap: var(--sp-md); flex-wrap: wrap; justify-content: center; } .quick-nav-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs); padding: var(--sp-md); background: rgba(15,52,96,0.3); border: 1px solid var(--c-ink-border); border-radius: var(--r-md); text-decoration: none; transition: all 0.2s; min-width: 100px; } .quick-nav-item:hover { border-color: var(--c-origin); transform: translateY(-2px); } .quick-nav-icon { font-size: 1.8rem; } .quick-nav-name { color: var(--c-warm-white); font-size: var(--fs-small); text-align: center; }
← 返回工具箱
🗺️

知识可视化

点击任意知识点，AI自动生成流程图、思维导图或对比表，让复杂概念一目了然

请从左侧选择知识点

📊
从左侧选择一个知识点，AI会自动生成可视化图表
AI正在生成可视化图表...