cfc/.superpowers/brainstorm/440090-1778940565/content/layout-variants.html

<h2>B 方案细化：布局与风格</h2>
<p class="subtitle">房子+爱心+树苗，蓝紫配色。选择你喜欢的布局</p>

<div class="options">
  <div class="option" data-choice="a" onclick="toggleSelect(this)">
    <div class="letter">A</div>
    <div class="content">
      <h3>竖向布局 — Logo在上</h3>
      <div style="text-align:center;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;margin:8px 0;">
        <div style="display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:rgba(255,255,255,0.2);border-radius:20px;">
          <span style="font-size:48px;">🏡</span>
        </div>
        <div style="margin-top:8px;color:#fff;font-weight:bold;font-size:20px;">知行益家</div>
        <div style="color:rgba(255,255,255,0.8);font-size:12px;">家庭·成长·未来</div>
      </div>
      <p style="color:#666;font-size:14px;">适合小程序头像、App icon</p>
    </div>
  </div>

  <div class="option" data-choice="b" onclick="toggleSelect(this)">
    <div class="letter">B</div>
    <div class="content">
      <h3>横向布局 — 图标在左</h3>
      <div style="display:flex;align-items:center;gap:16px;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;margin:8px 0;">
        <div style="display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:rgba(255,255,255,0.2);border-radius:16px;flex-shrink:0;">
          <span style="font-size:40px;">🏡</span>
        </div>
        <div style="text-align:left;">
          <div style="color:#fff;font-weight:bold;font-size:22px;">知行益家</div>
          <div style="color:rgba(255,255,255,0.8);font-size:12px;">家庭·成长·未来</div>
        </div>
      </div>
      <p style="color:#666;font-size:14px;">适合网页 header、小程序导航栏</p>
    </div>
  </div>

  <div class="option" data-choice="c" onclick="toggleSelect(this)">
    <div class="letter">C</div>
    <div class="content">
      <h3>纯图形 — 无文字</h3>
      <div style="text-align:center;padding:16px;">
        <div style="display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;">
          <span style="font-size:56px;">🏡</span>
        </div>
      </div>
      <p style="color:#666;font-size:14px;">适合 favicon、小尺寸场景</p>
    </div>
  </div>
</div>

<div style="margin-top:24px;padding:16px;background:#f0f4ff;border-radius:12px;">
  <p style="font-size:14px;"><strong>关于图形细化</strong> — 最终 logo 图形不是 emoji，而是将房子、爱心、树苗融合为一个简洁的矢量图形：</p>
  <ul style="font-size:14px;color:#666;">
    <li>🏠 房子的屋顶采用蓝紫渐变</li>
    <li>💜 房子正面融入一颗爱心（代表家庭的爱）</li>
    <li>🌱 房子底部或旁边有一片新芽（代表孩子的成长）</li>
    <li>⭐ 屋顶上方可加一颗小星星（代表积分成就）</li>
  </ul>
</div>