62 lines
1.4 KiB
HTML
62 lines
1.4 KiB
HTML
<!--
|
|
Layout: image
|
|
图片页 — 图片为主体，配可选标题和说明
|
|
Agent 填充图片 URL（外部链接 / base64 / AI 生成）和文字
|
|
-->
|
|
<section class="slide slide--image" data-slide="{{N}}">
|
|
<div class="image-layout">
|
|
<div class="image-main">
|
|
<img src="{{图片URL或base64}}" alt="{{图片描述}}">
|
|
</div>
|
|
<div class="image-caption">
|
|
<h3>{{图片标题（可选）}}</h3>
|
|
<p>{{图片说明（可选）}}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.slide--image {
|
|
padding: var(--spacing-md);
|
|
justify-content: center;
|
|
}
|
|
.slide--image .image-layout {
|
|
display: flex;
|
|
gap: var(--spacing-lg);
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.slide--image .image-main {
|
|
flex: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.slide--image .image-main img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.slide--image .image-caption {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
.slide--image .image-caption h3 {
|
|
font-size: var(--font-size-subheading);
|
|
font-weight: 600;
|
|
}
|
|
.slide--image .image-caption p {
|
|
font-size: var(--font-size-body);
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.7;
|
|
}
|
|
</style>
|