91 lines
2.5 KiB
HTML
91 lines
2.5 KiB
HTML
<!--
|
|
Layout: comparison
|
|
对比页 — 两个方案/产品/概念的优劣对比
|
|
Agent 填充两侧内容，可自由调整对比项数量
|
|
-->
|
|
<section class="slide slide--comparison" data-slide="{{N}}">
|
|
<h2 class="comp-title">{{页面标题}}</h2>
|
|
<div class="comp-grid">
|
|
<div class="comp-side comp-side--a">
|
|
<h3 class="comp-heading">{{方案A名称}}</h3>
|
|
<ul class="comp-list">
|
|
<li>{{对比项}}</li>
|
|
<li>{{对比项}}</li>
|
|
<li>{{对比项}}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="comp-vs">VS</div>
|
|
<div class="comp-side comp-side--b">
|
|
<h3 class="comp-heading">{{方案B名称}}</h3>
|
|
<ul class="comp-list">
|
|
<li>{{对比项}}</li>
|
|
<li>{{对比项}}</li>
|
|
<li>{{对比项}}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.slide--comparison {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
align-items: start;
|
|
}
|
|
.slide--comparison .comp-title {
|
|
font-size: var(--font-size-heading);
|
|
margin-bottom: var(--spacing-md);
|
|
text-align: center;
|
|
}
|
|
.slide--comparison .comp-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr; /* 左 | VS | 右，grid 保证两侧等高 */
|
|
gap: var(--spacing-md);
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
.slide--comparison .comp-side {
|
|
background: var(--color-surface);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-md);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.slide--comparison .comp-side--a {
|
|
border-top: 3px solid var(--color-primary);
|
|
}
|
|
.slide--comparison .comp-side--b {
|
|
border-top: 3px solid var(--color-accent);
|
|
}
|
|
.slide--comparison .comp-heading {
|
|
font-size: var(--font-size-subheading);
|
|
font-weight: 700;
|
|
margin-bottom: var(--spacing-md);
|
|
text-align: center;
|
|
}
|
|
.slide--comparison .comp-side--a .comp-heading { color: var(--color-primary); }
|
|
.slide--comparison .comp-side--b .comp-heading { color: var(--color-accent); }
|
|
.slide--comparison .comp-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
.slide--comparison .comp-list li {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
font-size: var(--font-size-body);
|
|
color: var(--color-text-secondary);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.slide--comparison .comp-list li:last-child { border-bottom: none; }
|
|
.slide--comparison .comp-vs {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--font-size-subheading);
|
|
font-weight: 800;
|
|
color: var(--color-text-secondary);
|
|
opacity: 0.3;
|
|
}
|
|
</style>
|