yuanlang12/openpipal/wireframe

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
  <meta name="design_doc_mode" content="canvas">
  <style>*{ box-sizing:border-box } html,body{ margin:0 }</style>
</helmet>
<!-- 方案 1A：帧 = 根的直接子元素，绝对定位 -->
<div style="position:absolute; left:80px; top:96px; width:1040px">
  <div style="font:400 15px/1 'Bradley Hand','Chalkboard SE','Segoe Print','Comic Sans MS','Kaiti SC',STKaiti,cursive; color:#5b554c; margin-bottom:12px">1A · 单栏时间线</div>
  <div data-screen-label="1A 单栏时间线" style="background:#fffdf9; border:2px dashed #3a352e; border-radius:6px; padding:28px 30px; font:400 15px/1.6 'Bradley Hand','Chalkboard SE','Segoe Print','Comic Sans MS','Kaiti SC',STKaiti,cursive; color:#3a352e">
    <div style="display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #3a352e; padding-bottom:12px; margin-bottom:22px"><span style="font-size:19px">Logo</span><span>导航 · 导航 · 导航</span></div>
    <!-- 图片位：矩形 + 两条对角线（两层 linear-gradient，内联写得下，不必写 SVG） -->
    <div style="height:200px; border:2px dashed #8a8378; border-radius:4px; margin-bottom:20px; background:linear-gradient(to top right, transparent 49.5%, #c9c3b8 49.5%, #c9c3b8 50.5%, transparent 50.5%), linear-gradient(to bottom right, transparent 49.5%, #c9c3b8 49.5%, #c9c3b8 50.5%, transparent 50.5%)"></div>
    <!-- 正文占位：灰条，不是 lorem -->
    <div style="height:12px; border-radius:6px; background:#ddd7cc; margin-bottom:9px"></div>
    <div style="height:12px; border-radius:6px; background:#ddd7cc; width:64%; margin-bottom:24px"></div>
    <div style="display:inline-block; border:2px solid #3a352e; border-radius:20px; padding:8px 20px">主操作</div>
  </div>
</div>
<div style="position:absolute; left:1280px; top:96px; width:1040px">…方案 1B：结构完全不同的第二种走法…</div>
<div style="position:absolute; left:2480px; top:96px; width:1040px">…方案 1C：第三种…</div>
</x-dc>
</body>
</html>

<div style="position:absolute; left:80px; top:96px; width:1440px">
  <div style="display:flex; gap:10px; margin-bottom:16px">
    <sc-for list="{{ tabs }}" as="tab" hint-placeholder-count="3">
      <button onClick="{{ tab.pick }}" style="padding:8px 18px; border:2px solid #3a352e; border-radius:18px; cursor:pointer; background:{{ tab.bg }}; color:{{ tab.fg }}; font:400 15px/1 'Bradley Hand','Chalkboard SE',cursive">{{ tab.name }}</button>
    </sc-for>
  </div>
  <sc-if value="{{ showA }}" hint-placeholder-val="{{ true }}"><div data-screen-label="1A 单栏时间线" style="…">…</div></sc-if>
  <sc-if value="{{ showB }}" hint-placeholder-val="{{ false }}"><div data-screen-label="1B 双栏对照" style="…">…</div></sc-if>
</div>
</x-dc>
 
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
  state = { active: 0 }
  renderVals() {
    const a = this.state.active
    const names = ['1A 单栏时间线', '1B 双栏对照', '1C 分步向导']
    return {
      tabs: names.map((name, i) => ({
        name, bg: i === a ? '#3a352e' : 'transparent', fg: i === a ? '#fffdf9' : '#3a352e',
        pick: () => this.setState({ active: i })
      })),
      showA: a === 0, showB: a === 1, showC: a === 2
    }
  }
}
</script>