2026-09-29

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>房树人心理评估报告 · 示例预览</title>
<style>
:root {
--bg: #f6f3ee;
--card: #fffdf9;
--ink: #2a2622;
--muted: #7a7268;
--line: #e8e0d4;
--accent: #3d6b5a;
--accent-soft: #e7f0ec;
--warm: #c47a3a;
--warm-soft: #f8efe4;
--risk: #9a5b3c;
--risk-bg: #f7ebe3;
}

• { box-sizing: border-box; }
  body {
  margin: 0;
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  background:
  radial-gradient(1200px 600px at 10% -10%, #efe6d8 0%, transparent 55%),
  radial-gradient(900px 500px at 100% 0%, #e4eee8 0%, transparent 50%),
  var(--bg);
  color: var(--ink);
  line-height: 1.65;
  }
  .phone {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 12px 14px 40px;
  }
  .nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px 14px;
  color: var(--muted);
  font-size: 14px;
  }
  .nav b { color: var(--ink); font-weight: 600; }
  .hero {
  background: linear-gradient(145deg, #2f5648 0%, #3d6b5a 48%, #4a7d68 100%);
  color: #f7faf8;
  border-radius: 18px;
  padding: 22px 18px 18px;
  box-shadow: 0 10px 28px rgba(45, 80, 65, 0.22);
  }
  .hero .tag {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  margin-bottom: 10px;
  }
  .hero h1 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.02em;
  }
  .hero p { margin: 0; opacity: 0.9; font-size: 13px; }
  .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  }
  .chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.14);
  }
  .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-top: 12px;
  }
  .card h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 650;
  }
  .risk {
  background: var(--risk-bg);
  border-color: #efd5c4;
  }
  .risk .badge {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  background: var(--risk);
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  }
  .risk p { margin: 0; color: #5c4030; font-size: 14px; }
  .kind-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  }
  .kind-head span {
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
  }
  .picks {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #faf7f2;
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
  }
  .picks strong { color: var(--ink); font-weight: 600; }
  ul {
  margin: 0;
  padding-left: 18px;
  }
  li { margin: 4px 0; font-size: 14px; }
  .section-lead {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 10px;
  }
  .advice li { margin-bottom: 8px; }
  .disclaimer {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f3efe8;
  }
  .foot {
  text-align: center;
  margin-top: 18px;
  font-size: 11px;
  color: #a3988c;
  }
  .demo-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--warm-soft);
  color: #7a5230;
  font-size: 12px;
  border: 1px dashed #e2c8a8;
  }
  </style>
  </head>
  <body>
  <div class="phone">
  <div class="nav">我的 › <b>房树人心理评估报告</b></div>

  <div class="hero">
  <div class="tag">示例预览 · 非真实孩子数据</div>
  <h1>房树人心理评估报告</h1>
  <p>基于魔法森林装搭互动生成的家庭观察参考</p>
  <div class="meta">
  <span class="chip">完整度：完整（房·树·人已提交）</span>
  <span class="chip">场景：魔法森林</span>
  </div>
  </div>

  <div class="demo-note">
  本页为产品示意：假设孩子随机装齐「门完全开放 + 大玻璃窗 + 轻柔冒烟烟囱」的房子、「开放树冠 + 大叶片 + 成熟果实」的树、「全身有脚正面像 + 普通五官」的人偶后点提交，由服务端按房树人材料库映射并 AI 改写后的家长可读报告。
  </div>

  <div class="card risk">
  <div class="badge">建议多加关心 · 轻度关注</div>
  <p>从这次装搭选择来看，整体偏温暖、愿意连接，没有明显需要紧张的信号。仍建议您在日常里多留一点倾听与陪伴的时间；若某段时间孩子情绪起伏较大，可以更耐心一些地陪伴。</p>
  </div>

  <div class="card">
  <h2>一句话总览</h2>
  <p class="section-lead" style="color:var(--ink);font-size:15px;">
  孩子在魔法森林里搭出的小屋、树与小人，整体呈现出「愿意靠近、有生机、自我比较完整」的画面。更像是在表达：我可以和外界互动，也希望被温柔看见。
  </p>
  </div>

  <div class="card">
  <div class="kind-head">
  <h2 style="margin:0">房子 · 家庭与安全感</h2>
  <span>已提交</span>
  </div>
  <div class="picks">
  本次随机选材示意：<strong>门完全开放</strong>、<strong>大片玻璃窗</strong>、<strong>烟囱轻柔冒烟</strong>
  </div>
  <ul>
  <li>开放的门，常被理解为更愿意与外界往来，交往上可能比较直接、少设防。</li>
  <li>通透的大窗，更像「愿意被人了解一点」，也带着对美感与明亮感的偏好。</li>
  <li>轻柔的炊烟，往往给人家庭温暖、情绪可以慢慢散开的感觉。</li>
  </ul>
  </div>

  <div class="card">
  <div class="kind-head">
  <h2 style="margin:0">树 · 成长与活力</h2>
  <span>已提交</span>
  </div>
  <div class="picks">
  本次随机选材示意：<strong>开放式树冠</strong>、<strong>大叶片</strong>、<strong>成熟果实</strong>
  </div>
  <ul>
  <li>开放的树冠，常对应「和人相处比较直截了当」，不喜欢绕弯。</li>
  <li>较大的叶片，可能带着一点依赖与从众的舒适感，也更容易相处。</li>
  <li>成熟的果实，更像对「阶段性收获」有感觉，知道有些事情正在长大、结果。</li>
  </ul>
  </div>

  <div class="card">
  <div class="kind-head">
  <h2 style="margin:0">人偶 · 自我表达</h2>
  <span>已提交</span>
  </div>
  <div class="picks">
  本次随机选材示意：<strong>全身像有脚</strong>、<strong>正面像</strong>、<strong>五官齐套</strong>
  </div>
  <ul>
  <li>全身且有脚，通常说明自我边界比较清楚，站得住一点。</li>
  <li>正面朝向，更愿意被看见、也愿意了解自己或他人。</li>
  <li>五官完整，互动器官「都在场」，沟通通道是打开的。</li>
  </ul>
  </div>

  <div class="card">
  <h2>给家长的小建议</h2>
  <ul class="advice">
  <li><strong>接住热情：</strong>孩子若主动分享、主动靠近，先接住这份开放，少用审问式追问。</li>
  <li><strong>留一点独处空间：</strong>开放不等于没有边界。可以和孩子约定「什么时候可以聊，什么时候先自己待会儿」。</li>
  <li><strong>看见成长：</strong>用具体小事肯定「你今天把一件事做完了」，呼应树上的「果实感」。</li>
  </ul>
  </div>

  <div class="disclaimer">
  本报告基于孩子在魔法森林中的装搭互动，参考房树人观察框架与互动素材库生成，仅供家庭理解与陪伴参考，不构成医疗或心理诊断。示例页中的选材与文案均为演示。
  </div>

  <div class="foot">Pocket · 房树人心理评估报告 · H5 示意</div>
  </div>
  </body>
  </html>