5 lines
2.4 KiB
HTML
5 lines
2.4 KiB
HTML
|
<article class="card responsive-preview" data-card="responsive-preview" style="--card-accent:#5865c7">
|
||
|
|
<h2 class="card-heading" data-text="title">一份内容，
|
||
|
|
在不同屏幕上自然展开。</h2>
|
||
|
|
<div class="card-stage"><div class="size-scene"><div class="size-frame size-frame-0"><div class="size-frame-bar"><i></i><span data-text="labels.0">原始画面</span></div><svg viewBox="0 0 300 180" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path class="preview-land-back" d="M0 98C54 85 56 30 118 42s76 75 182-10V180H0Z"/><path class="preview-land-front" d="M0 147C62 48 114 127 169 75s83 27 131 0V180H0Z"/><g class="preview-contours" fill="none"><path d="M-10 160C62 61 114 140 169 88s83 27 145-6M-10 174C62 75 114 154 169 102s83 27 145-6M-10 188C62 89 114 168 169 116s83 27 145-6M-10 202C62 103 114 182 169 130s83 27 145-6"/></g><circle cx="244" cy="37" r="14" class="preview-sun"/></svg></div><div class="size-frame size-frame-1"><div class="size-frame-bar"><i></i><span data-text="labels.1">宽屏</span></div><svg viewBox="0 0 300 180" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path class="preview-land-back" d="M0 98C54 85 56 30 118 42s76 75 182-10V180H0Z"/><path class="preview-land-front" d="M0 147C62 48 114 127 169 75s83 27 131 0V180H0Z"/><g class="preview-contours" fill="none"><path d="M-10 160C62 61 114 140 169 88s83 27 145-6M-10 174C62 75 114 154 169 102s83 27 145-6M-10 188C62 89 114 168 169 116s83 27 145-6M-10 202C62 103 114 182 169 130s83 27 145-6"/></g><circle cx="244" cy="37" r="14" class="preview-sun"/></svg></div><div class="size-frame size-frame-2"><div class="size-frame-bar"><i></i><span data-text="labels.2">手机</span></div><svg viewBox="0 0 300 180" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><path class="preview-land-back" d="M0 98C54 85 56 30 118 42s76 75 182-10V180H0Z"/><path class="preview-land-front" d="M0 147C62 48 114 127 169 75s83 27 131 0V180H0Z"/><g class="preview-contours" fill="none"><path d="M-10 160C62 61 114 140 169 88s83 27 145-6M-10 174C62 75 114 154 169 102s83 27 145-6M-10 188C62 89 114 168 169 116s83 27 145-6M-10 202C62 103 114 182 169 130s83 27 145-6"/></g><circle cx="244" cy="37" r="14" class="preview-sun"/></svg></div></div><div class="size-toolbar"><span data-text="description">保留主体，重新安排取景。</span><button type="button" class="size-toggle" aria-pressed="true">收起尺寸 <span aria-hidden="true">↗</span></button></div></div>
|
||
|
|
</article>
|