# 会员站详情面板

瀑布流 + 右侧详情面板：标题栏、图、提示词、标签、底部 dock（上一个 / 下一个 / 下一步）。

```html
<div style="height:100%;position:relative;overflow:hidden">
  <div class="xxd-grid" style="--grid-min:160px;padding:16px"><a class="xxd-card" href="#"><div class="xxd-card__media" style="--ratio:3/4;background:#d65f32"><div class="xxd-card__marks"><span class="xxd-dot" style="background:#ff3f6d"></span></div></div><div class="xxd-card__body"><p class="xxd-card__title">编辑式海报 001</p><span class="xxd-card__meta">xxd-panel-001</span></div></a><a class="xxd-card" href="#"><div class="xxd-card__media" style="--ratio:3/4;background:#3b74b8"><div class="xxd-card__marks"><span class="xxd-dot" style="background:#ff3f6d"></span></div></div><div class="xxd-card__body"><p class="xxd-card__title">编辑式海报 002</p><span class="xxd-card__meta">xxd-panel-002</span></div></a><a class="xxd-card" href="#"><div class="xxd-card__media" style="--ratio:3/4;background:#5a8a3c"><div class="xxd-card__marks"><span class="xxd-dot" style="background:#ff3f6d"></span></div></div><div class="xxd-card__body"><p class="xxd-card__title">编辑式海报 003</p><span class="xxd-card__meta">xxd-panel-003</span></div></a><a class="xxd-card" href="#"><div class="xxd-card__media" style="--ratio:3/4;background:#7b61b0"><div class="xxd-card__marks"><span class="xxd-dot" style="background:#ff3f6d"></span></div></div><div class="xxd-card__body"><p class="xxd-card__title">编辑式海报 004</p><span class="xxd-card__meta">xxd-panel-004</span></div></a><a class="xxd-card" href="#"><div class="xxd-card__media" style="--ratio:3/4;background:#c98a1a"><div class="xxd-card__marks"><span class="xxd-dot" style="background:#ff3f6d"></span></div></div><div class="xxd-card__body"><p class="xxd-card__title">编辑式海报 005</p><span class="xxd-card__meta">xxd-panel-005</span></div></a><a class="xxd-card" href="#"><div class="xxd-card__media" style="--ratio:3/4;background:#2a8a7a"><div class="xxd-card__marks"><span class="xxd-dot" style="background:#ff3f6d"></span></div></div><div class="xxd-card__body"><p class="xxd-card__title">编辑式海报 006</p><span class="xxd-card__meta">xxd-panel-006</span></div></a></div>
  <aside class="xxd-panel" data-open style="position:absolute" aria-label="提示词详情">
    <div class="xxd-panel__head"><h2 class="xxd-panel__title">编辑式海报 001</h2><button class="xxd-btn" data-variant="ghost" data-icon-only aria-label="复制提示词" data-tooltip="复制提示词"><i data-xxd-icon="Copy" data-size="16"></i></button><button class="xxd-btn" data-variant="ghost" data-icon-only aria-label="关闭"><i data-xxd-icon="X" data-size="16"></i></button></div>
    <div class="xxd-panel__body"><div class="xxd-card__media" style="--ratio:4/3;background:#d65f32;border-radius:var(--r-md)"></div>
      <div class="xxd-prose" style="margin-top:16px"><h3>提示词</h3><p>克制的编辑式粗野主义：纸色背景、清晰的黑线、干净的无衬线字、密但好读的中文。</p></div>
      <div class="xxd-cluster" style="margin-top:12px"><button class="xxd-chip" aria-pressed="true">海报</button><button class="xxd-chip">编辑式</button></div>
    </div>
    <footer class="xxd-dock" style="position:static"><div class="xxd-dock__status">2,410 次使用</div><div class="xxd-dock__tools"><button class="xxd-btn" data-variant="ghost" data-icon-only data-size="sm" aria-label="上一个"><i data-xxd-icon="ChevronLeft" data-size="16"></i></button><button class="xxd-btn" data-variant="ghost" data-icon-only data-size="sm" aria-label="下一个"><i data-xxd-icon="ChevronRight" data-size="16"></i></button></div><div class="xxd-dock__primary"><button class="xxd-btn" data-variant="primary" data-size="sm">用这个风格生成</button></div></footer>
  </aside>
</div>
```