dekun
88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
{# 系统说明: docs/系统说明.md + h2 目录 #}
|
|
<div class="system-guide-page full">
|
|
<div class="card system-guide-card">
|
|
<div class="system-guide-head">
|
|
<h2 style="margin:0">系统说明</h2>
|
|
<p class="muted" style="margin:6px 0 0;font-size:.85rem">操作与逻辑按章节混排。默认不在顶栏显示；可在系统设置 → 导航显示中打开。</p>
|
|
</div>
|
|
<div class="system-guide-layout">
|
|
{% if system_guide_toc %}
|
|
<aside class="system-guide-toc" aria-label="章节目录">
|
|
<div class="system-guide-toc-title">目录</div>
|
|
<nav>
|
|
{% for item in system_guide_toc %}
|
|
<a href="#{{ item.id }}">{{ item.title }}</a>
|
|
{% endfor %}
|
|
</nav>
|
|
</aside>
|
|
{% endif %}
|
|
<article class="system-guide-body prose">
|
|
{{ system_guide_html|safe }}
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.system-guide-page { grid-column: 1 / -1; }
|
|
.system-guide-card { padding: 16px 18px 28px; }
|
|
.system-guide-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
|
|
gap: 18px;
|
|
margin-top: 14px;
|
|
align-items: start;
|
|
}
|
|
.system-guide-toc {
|
|
position: sticky;
|
|
top: 8px;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(127,127,127,.25);
|
|
border-radius: 8px;
|
|
background: rgba(127,127,127,.06);
|
|
max-height: calc(100vh - 120px);
|
|
overflow: auto;
|
|
}
|
|
.system-guide-toc-title {
|
|
font-size: .78rem;
|
|
font-weight: 600;
|
|
opacity: .75;
|
|
margin-bottom: 8px;
|
|
}
|
|
.system-guide-toc a {
|
|
display: block;
|
|
font-size: .84rem;
|
|
line-height: 1.35;
|
|
padding: 5px 0;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
opacity: .9;
|
|
}
|
|
.system-guide-toc a:hover { opacity: 1; text-decoration: underline; }
|
|
.system-guide-body { min-width: 0; line-height: 1.65; font-size: .92rem; }
|
|
.system-guide-body h1 { font-size: 1.35rem; margin: 0 0 12px; }
|
|
.system-guide-body h2 { font-size: 1.12rem; margin: 22px 0 10px; padding-top: 4px; scroll-margin-top: 12px; }
|
|
.system-guide-body h3 { font-size: 1rem; margin: 16px 0 8px; }
|
|
.system-guide-body p, .system-guide-body li { margin: 0 0 8px; }
|
|
.system-guide-body ul, .system-guide-body ol { padding-left: 1.35em; margin: 0 0 10px; }
|
|
.system-guide-body table { border-collapse: collapse; width: 100%; margin: 10px 0 14px; font-size: .86rem; }
|
|
.system-guide-body th, .system-guide-body td {
|
|
border: 1px solid rgba(127,127,127,.35);
|
|
padding: 7px 9px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
.system-guide-body code {
|
|
font-family: ui-monospace, Consolas, monospace;
|
|
font-size: .86em;
|
|
padding: 1px 4px;
|
|
border-radius: 4px;
|
|
background: rgba(127,127,127,.12);
|
|
}
|
|
.system-guide-body hr { border: 0; border-top: 1px solid rgba(127,127,127,.28); margin: 18px 0; }
|
|
@media (max-width: 820px) {
|
|
.system-guide-layout { grid-template-columns: 1fr; }
|
|
.system-guide-toc { position: static; max-height: none; }
|
|
.system-guide-toc nav { display: flex; flex-wrap: wrap; gap: 4px 12px; }
|
|
}
|
|
</style>
|