80 lines
2.6 KiB
HTML
80 lines
2.6 KiB
HTML
<!--
|
|
Layout: content
|
|
标准内容页 — 最通用的布局，标题 + 要点列表
|
|
Agent 替换内容，可自由调整要点数量（3-4 个带描述为佳，最多 5 个纯标题条目）
|
|
|
|
⚠️ 溢出红线：content-list 受 grid 1fr 约束，4+ 条带完整描述极易溢出。
|
|
超出时：缩短描述、减少条目数、或拆分为多页。
|
|
禁止在 content-list 外额外包裹容器。内容直接落在页面背景上。
|
|
-->
|
|
<section class="slide slide--content" data-slide="{{N}}">
|
|
<h2 class="content-title">{{页面标题}}</h2>
|
|
<ul class="content-list">
|
|
<li>
|
|
<strong>{{要点标题}}</strong>
|
|
<span>{{要点说明}}</span>
|
|
</li>
|
|
<li>
|
|
<strong>{{要点标题}}</strong>
|
|
<span>{{要点说明}}</span>
|
|
</li>
|
|
<li>
|
|
<strong>{{要点标题}}</strong>
|
|
<span>{{要点说明}}</span>
|
|
</li>
|
|
<!-- Agent 根据内容增减 li -->
|
|
</ul>
|
|
</section>
|
|
|
|
<style>
|
|
.slide--content {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
align-items: start;
|
|
padding-top: var(--spacing-xl);
|
|
}
|
|
.slide--content .content-title {
|
|
font-size: var(--font-size-heading);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
.slide--content .content-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
min-height: 0; /* grid 子元素必须，允许收缩 */
|
|
overflow: hidden; /* 安全兜底：超出时隐藏而非撑破 */
|
|
}
|
|
.slide--content .content-list li {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-left: 3px solid var(--color-primary);
|
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
/* 不加 background/shadow — 内容直接落在页面背景上 */
|
|
}
|
|
.slide--content .content-list li strong {
|
|
font-size: var(--font-size-body);
|
|
color: var(--color-text);
|
|
}
|
|
.slide--content .content-list li span {
|
|
font-size: var(--font-size-small);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
/* ── 5+ 条目自动收紧（:has() 防御性布局）── */
|
|
.slide--content .content-list:has(> li:nth-child(5)) {
|
|
gap: var(--spacing-xs); /* 间距收紧 */
|
|
}
|
|
.slide--content .content-list:has(> li:nth-child(5)) li {
|
|
padding: var(--spacing-xs) var(--spacing-md); /* 条目内边距缩小 */
|
|
}
|
|
.slide--content .content-list:has(> li:nth-child(6)) {
|
|
font-size: 0.9em; /* 6+ 条目字号缩小 */
|
|
}
|
|
.slide--content .content-list:has(> li:nth-child(7)) {
|
|
font-size: 0.82em; /* 7+ 条目进一步缩小 */
|
|
}
|
|
</style>
|