dan-testing.html 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="DAN专业心智测评——发展性神经认知评估,覆盖认知、心理、行为、学习、智力、青春期、职业7大报告包,科学评估孩子成长阶段,AI分析天赋倾向与发展潜力,纳入五维成长档案。">
  7. <meta property="og:title" content="DAN专业心智测评 · 产品介绍 — 浠艾福">
  8. <meta property="og:description" content="发展性神经认知评估,7大报告包按年龄精准匹配,从认知到职业规划全维度评估,AI生成个性化成长方案。">
  9. <meta property="og:type" content="article">
  10. <title>DAN专业心智测评 · 产品介绍 — 浠艾福</title>
  11. <style>
  12. :root{--bg-card:#FFF;--bg-alt:#f0fdfa;--text-primary:#1a202c;--text-secondary:#4a5568;--text-muted:#718096;--accent:#0d9488;--accent-light:#ccfbf1;--blue:#1a5276;--blue-light:#eaf4fb;--green:#27ae60;--green-light:#f0fff4;--orange:#d35400;--orange-light:#fff4e6;--purple:#7c3aed;--purple-light:#f3e8ff;--teal:#0d9488;--teal-light:#ccfbf1;--rose:#e11d48;--rose-light:#fff1f2;--font:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;--max-width:900px;--radius:12px;--shadow:0 4px 20px rgba(0,0,0,0.08);}
  13. *{margin:0;padding:0;box-sizing:border-box}
  14. body{font-family:var(--font);background:#f8fafc;color:var(--text-primary);line-height:1.8;font-size:16px}
  15. .container{max-width:var(--max-width);margin:0 auto;padding:2rem 1.5rem}
  16. .hero{background:linear-gradient(135deg,#0a0e27 0%,#2a1a4e 40%,#7c3aed 100%);color:#fff;padding:5rem 1.5rem 3.5rem;text-align:center;position:relative;overflow:hidden;min-height:45vh;display:flex;align-items:center;justify-content:center}
  17. .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(124,58,237,0.15) 0%,transparent 50%)}
  18. .hero-content{position:relative;z-index:1;max-width:720px;margin:0 auto}
  19. .hero-badge{display:inline-block;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border-radius:999px;padding:0.5rem 1.5rem;font-size:0.85rem;font-weight:500;margin-bottom:1.2rem;color:white}
  20. .hero h1{font-size:2.2rem;font-weight:700;margin-bottom:0.8rem;line-height:1.3;color:white}
  21. .hero p{font-size:1rem;opacity:0.85;max-width:600px;margin:0 auto;line-height:1.7;color:white}
  22. .hero-stats{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-top:1.5rem}
  23. .hero-stat{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:0.8rem 1.2rem;text-align:center;min-width:120px}
  24. .hero-stat .num{font-size:1.6rem;font-weight:700;display:block;color:white}
  25. .hero-stat .label{font-size:0.72rem;opacity:0.8;color:white}
  26. section{padding:2rem 0}
  27. section:nth-child(even){background:var(--bg-alt)}
  28. h2{font-size:1.4rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary)}
  29. h3{font-size:1.1rem;font-weight:600;margin:1.2rem 0 0.6rem;color:var(--text-primary)}
  30. p{margin-bottom:0.8rem;color:var(--text-secondary);line-height:1.9;font-size:0.95rem}
  31. strong{color:var(--text-primary)}
  32. .card{background:white;border-radius:var(--radius);padding:1.5rem;margin-bottom:1.2rem;box-shadow:var(--shadow);border-left:4px solid var(--accent)}
  33. .card.blue{border-left-color:var(--blue)}.card.green{border-left-color:var(--green)}.card.orange{border-left-color:var(--orange)}.card.purple{border-left-color:var(--purple)}.card.teal{border-left-color:var(--teal)}
  34. .card h3{margin-top:0}.card p:last-child{margin-bottom:0}
  35. .highlight-box{background:var(--accent-light);border-radius:var(--radius);padding:1.25rem 1.5rem;margin:1.2rem 0;border-left:4px solid var(--accent)}
  36. .highlight-box p{margin-bottom:0.5rem}.highlight-box p:last-child{margin-bottom:0}
  37. .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
  38. .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin:1rem 0}
  39. .feature-card{background:white;border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);border:1px solid #e2e8f0;text-align:center}
  40. .feature-card .icon{font-size:2rem;margin-bottom:0.5rem;display:block}
  41. .feature-card h4{font-size:1rem;font-weight:700;margin-bottom:0.4rem}
  42. .feature-card p{font-size:0.85rem;color:var(--text-muted);margin-bottom:0;line-height:1.5}
  43. .step-list{list-style:none;counter-reset:step}
  44. .step-list li{counter-increment:step;padding:0.8rem 0 0.8rem 2.5rem;position:relative;border-bottom:1px solid #e2e8f0;font-size:0.95rem;color:var(--text-secondary)}
  45. .step-list li:last-child{border-bottom:none}
  46. .step-list li::before{content:counter(step);position:absolute;left:0;top:0.8rem;width:1.8rem;height:1.8rem;background:var(--accent);color:#fff;border-radius:50%;font-size:0.8rem;font-weight:700;display:flex;align-items:center;justify-content:center}
  47. .faq-item{padding:1rem 0;border-bottom:1px solid #e2e8f0}
  48. .faq-item:last-child{border-bottom:none}
  49. .faq-q{font-weight:600;color:var(--text-primary);margin-bottom:0.4rem;font-size:0.95rem}
  50. .faq-a{font-size:0.9rem;color:var(--text-secondary);line-height:1.7}
  51. .cta-box{text-align:center;background:linear-gradient(135deg,#0a0e27,#2a1a4e);border-radius:var(--radius);padding:2.5rem;margin:2rem 0;color:#fff}
  52. .cta-box h3{color:#fff;font-size:1.3rem;margin-bottom:0.5rem}
  53. .cta-box p{color:rgba(255,255,255,0.6);margin-bottom:1.5rem;font-size:0.95rem}
  54. .cta-btn{display:inline-block;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;padding:0.8rem 2.5rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:1rem;transition:all .2s}
  55. .cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,0.3)}
  56. .cta-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.3);margin-left:1rem}
  57. .cta-btn.secondary:hover{background:rgba(255,255,255,0.1);box-shadow:none}
  58. .section-tag{display:inline-block;font-size:0.8rem;font-weight:600;letter-spacing:0.05em;margin-bottom:0.5rem;color:var(--accent)}
  59. .site-footer{background:#1a1a3e;color:#fff;padding:2rem 0 0;margin-top:2rem}
  60. .footer-inner{max-width:900px;margin:0 auto;padding:0 1.5rem 1.5rem;text-align:center}
  61. .footer-inner p{color:rgba(255,255,255,0.5);font-size:0.8rem}
  62. /* 报告包卡片 */
  63. .pkg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1rem 0}
  64. .pkg-card{background:white;border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);border:1px solid #e2e8f0;border-top:4px solid var(--accent)}
  65. .pkg-card.purple{border-top-color:var(--purple)}.pkg-card.blue{border-top-color:var(--blue)}.pkg-card.green{border-top-color:var(--green)}.pkg-card.orange{border-top-color:var(--orange)}.pkg-card.teal{border-top-color:var(--teal)}
  66. .pkg-card .pkg-tag{display:inline-block;background:var(--accent-light);color:#0f766e;font-size:0.72rem;font-weight:700;padding:0.15rem 0.6rem;border-radius:999px;margin-bottom:0.4rem}
  67. .pkg-card.purple .pkg-tag{background:var(--purple-light);color:var(--purple)}
  68. .pkg-card.blue .pkg-tag{background:var(--blue-light);color:var(--blue)}
  69. .pkg-card.green .pkg-tag{background:var(--green-light);color:var(--green)}
  70. .pkg-card.orange .pkg-tag{background:var(--orange-light);color:var(--orange)}
  71. .pkg-card .pkg-age{font-size:0.75rem;color:var(--text-muted);margin-bottom:0.4rem}
  72. .pkg-card h4{font-size:1rem;font-weight:700;margin-bottom:0.4rem}
  73. .pkg-card p{font-size:0.85rem;color:var(--text-secondary);margin-bottom:0;line-height:1.6}
  74. /* 套餐价格卡片 */
  75. .plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.5rem 0}
  76. .plan-card{background:white;border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;box-shadow:var(--shadow);border:2px solid #e2e8f0;position:relative;cursor:pointer;transition:all .2s}
  77. .plan-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
  78. .plan-card.hot{border-color:var(--purple)}
  79. .plan-card.hot::before{content:'最受欢迎';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;font-size:0.7rem;font-weight:600;padding:0.2rem 0.8rem;border-radius:999px;white-space:nowrap}
  80. .plan-card .plan-name{font-size:0.95rem;font-weight:700;color:var(--text-primary);margin-bottom:0.2rem}
  81. .plan-card .plan-sub{font-size:0.75rem;color:var(--text-muted);margin-bottom:0.8rem}
  82. .plan-card .plan-price{font-size:2rem;font-weight:800;color:var(--accent);margin-bottom:0.6rem}
  83. .plan-card.purple-card .plan-price{color:var(--purple)}
  84. .plan-card .plan-price small{font-size:0.85rem;font-weight:400;color:var(--text-muted)}
  85. .plan-card .plan-feats{list-style:none;text-align:left;font-size:0.8rem;color:var(--text-secondary);line-height:1.9}
  86. .plan-card .plan-feats li{padding-left:1.2rem;position:relative}
  87. .plan-card .plan-feats li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}
  88. .plan-card.purple-card .plan-feats li::before{color:var(--purple)}
  89. .plan-btn{display:block;width:100%;margin-top:1rem;padding:0.55rem;background:linear-gradient(135deg,#0d9488,#14b8a6);color:#fff;border:none;border-radius:8px;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all .2s}
  90. .plan-card.purple-card .plan-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
  91. .plan-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,184,166,0.3)}
  92. .plan-card.purple-card .plan-btn:hover{box-shadow:0 4px 12px rgba(124,58,237,0.3)}
  93. /* 组合说明 */
  94. .combo-box{background:white;border:1px dashed var(--accent);border-radius:var(--radius);padding:1.25rem 1.5rem;margin:1.2rem 0;font-size:0.9rem;color:var(--text-secondary)}
  95. .combo-box strong{color:var(--accent)}
  96. .combo-box .combo-row{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.4rem}
  97. .combo-chip{display:inline-block;background:var(--accent-light);color:#0f766e;border-radius:6px;padding:0.2rem 0.7rem;font-size:0.8rem;font-weight:600}
  98. .combo-chip.purple{background:var(--purple-light);color:var(--purple)}
  99. .combo-arrow{color:var(--text-muted);font-weight:700}
  100. /* 底部固定支付栏 */
  101. .sticky-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-top:1px solid #e2e8f0;padding:0.8rem 1.5rem;z-index:999;display:flex;align-items:center;justify-content:space-between;box-shadow:0 -4px 20px rgba(0,0,0,0.06)}
  102. .sticky-bar .price{font-size:1.5rem;font-weight:800;color:var(--purple)}
  103. .sticky-bar .orig{font-size:0.85rem;color:var(--text-muted);text-decoration:line-through;margin-left:0.5rem}
  104. .sticky-bar .label{font-size:0.8rem;color:var(--text-muted);margin-bottom:0.1rem}
  105. .sticky-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:8px;padding:0.7rem 2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
  106. .sticky-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,0.3)}
  107. body{padding-bottom:70px}
  108. @media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}.pkg-grid{grid-template-columns:1fr}.plan-grid{grid-template-columns:1fr 1fr}.hero-stats{flex-direction:column;align-items:center}}
  109. @media(max-width:480px){.plan-grid{grid-template-columns:1fr}}
  110. </style>
  111. <link rel="stylesheet" href="../css/mobile.css">
  112. </head>
  113. <body>
  114. <div class="hero">
  115. <div class="hero-content">
  116. <div class="hero-badge">🧠 专业心智测评 · 科学认识孩子</div>
  117. <h1>DAN 专业心智测评</h1>
  118. <p>发展性神经认知评估(Developmental Assessment of Neurocognition)——<br>科学评估孩子的认知、心理、行为与成长潜力,从根源读懂孩子</p>
  119. <div class="hero-stats">
  120. <div class="hero-stat"><span class="num">7大</span><span class="label">报告包类型</span></div>
  121. <div class="hero-stat"><span class="num">2个</span><span class="label">年龄段精准匹配</span></div>
  122. <div class="hero-stat"><span class="num">4档</span><span class="label">灵活套餐组合</span></div>
  123. </div>
  124. </div>
  125. </div>
  126. <section>
  127. <div class="container">
  128. <h2>什么是 DAN 专业心智测评?</h2>
  129. <p>DAN(Developmental Assessment of Neurocognition,发展性神经认知评估)是一项面向儿童与青少年的专业心智测评体系,通过标准化评估工具,系统测量孩子的<b>认知能力、心理状态、行为模式、学习品质、智力结构、青春期挑战与职业倾向</b>,帮助家长科学认识孩子的成长阶段与发展潜力。</p>
  130. <p>测评结果由专业测评师解读,结合 AI 智能分析,生成个性化成长报告,并自动纳入孩子的<b>五维成长档案</b>,为家庭教育与成长规划提供数据支撑。</p>
  131. <div class="highlight-box">
  132. <p><strong>核心价值:</strong>不是"贴标签",而是"找方向"。DAN 测评用科学数据回答三个关键问题——孩子现在处于什么发展阶段?优势与短板在哪里?接下来应该如何规划?</p>
  133. </div>
  134. </div>
  135. </section>
  136. <section>
  137. <div class="container">
  138. <h2>7 大报告包 · 按年龄精准匹配</h2>
  139. <p>DAN 测评提供 7 类面向家庭的报告包,覆盖 4-18 岁全成长阶段。每个报告包针对该年龄段的核心发展议题,评估内容各有侧重:</p>
  140. <h3>🧒 10 岁前 · 认知与行为奠基期</h3>
  141. <div class="pkg-grid">
  142. <div class="pkg-card blue">
  143. <span class="pkg-tag">A1 · 认知</span>
  144. <div class="pkg-age">适用:10 岁前 | 儿童核心认知发展</div>
  145. <h4>核心认知能力评估</h4>
  146. <p>6 大认知维度:感知觉、注意力、记忆力、推理能力、空间能力、加工速度,全面评估儿童认知发展水平。</p>
  147. </div>
  148. <div class="pkg-card teal">
  149. <span class="pkg-tag">B2 · 行为</span>
  150. <div class="pkg-age">适用:10 岁前 | 儿童自我与家庭教养</div>
  151. <h4>自我概念与行为评估</h4>
  152. <p>自我概念 6 维(行为表现、能力与学校、躯体外貌、情绪状态、合群、幸福与满足)+ 儿童行为 8 维(品行、情绪、学习、社交、生活习惯、多动、刻板、拖延)。</p>
  153. </div>
  154. </div>
  155. <h3>🧑 10-18 岁 · 心理与能力发展期</h3>
  156. <div class="pkg-grid">
  157. <div class="pkg-card purple">
  158. <span class="pkg-tag">A2 · 心</span>
  159. <div class="pkg-age">适用:10-18 岁 | 心理健康评估</div>
  160. <h4>心理与人格评估</h4>
  161. <p>大五人格、社会关系、情绪状态、综合能力四大维度,深入理解孩子的心理特质与情绪管理能力。</p>
  162. </div>
  163. <div class="pkg-card orange">
  164. <span class="pkg-tag">B4 · 智</span>
  165. <div class="pkg-age">适用:10-18 岁 | 智力与自驱力</div>
  166. <h4>自我概念与成长型思维</h4>
  167. <p>自我概念、成长型思维、自驱力三大维度,评估孩子的内在动力系统与自主学习潜能。</p>
  168. </div>
  169. <div class="pkg-card green">
  170. <span class="pkg-tag">B3 · 学习</span>
  171. <div class="pkg-age">适用:10-18 岁 | 核心学习能力</div>
  172. <h4>学习能力诊断</h4>
  173. <p>执行功能 3 维(抑制控制、工作记忆、认知灵活性)+ 学习动机 3 维 + 学习策略 3 维,精准定位学习问题根源。</p>
  174. </div>
  175. <div class="pkg-card blue">
  176. <span class="pkg-tag">B5 · 青春期</span>
  177. <div class="pkg-age">适用:10-18 岁 | 青春期挑战</div>
  178. <h4>青春期情绪与人际评估</h4>
  179. <p>情绪调节策略(认知重评、表达抑制)+ 人际关系指南针 19 个子维度,帮助孩子平稳度过青春期。</p>
  180. </div>
  181. <div class="pkg-card purple">
  182. <span class="pkg-tag">B6 · 职业</span>
  183. <div class="pkg-age">适用:10-18 岁 | 职业发展探索</div>
  184. <h4>职业兴趣与价值观评估</h4>
  185. <p>Holland 职业兴趣 6 型 + 职业价值观评估,提前发现孩子的职业倾向,为选科与专业规划提供参考。</p>
  186. </div>
  187. </div>
  188. <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">* 另有 C1 校园标准版报告(含核心认知、大五人格、自驱力、自我概念综合评估),面向学校等机构,不面向家庭零售。</p>
  189. </div>
  190. </section>
  191. <section>
  192. <div class="container">
  193. <h2>套餐选择 · 按需组合</h2>
  194. <p>DAN 测评采用"报告包自由组合"模式,根据孩子所处阶段与关注重点,选择不同的包数组合:</p>
  195. <div class="combo-box">
  196. <div style="font-weight:700;margin-bottom:0.6rem;color:var(--text-primary)">🧩 组合规则</div>
  197. <div class="combo-row"><span class="combo-chip">A1 认知</span><span class="combo-chip">B2 行为</span><span style="font-size:0.8rem;color:var(--text-muted)">→ 面向 <strong>10 岁前</strong>孩子的发展问题</span></div>
  198. <div class="combo-row"><span class="combo-chip purple">A2 心</span><span class="combo-chip purple">B4 智</span><span class="combo-arrow">→</span><span class="combo-chip">B3 学习</span><span class="combo-chip">B5 青春期</span><span class="combo-chip">B6 职业</span><span style="font-size:0.8rem;color:var(--text-muted)">→ 面向 <strong>10-18 岁</strong>孩子</span></div>
  199. <div style="font-size:0.8rem;color:var(--text-muted)">💡 两包组合以 <strong>A2 心 + B4 智</strong> 为黄金组合;三包可在两包基础上加选 B3 学习 / B5 青春期 / B6 职业;不同包类型面向不同阶段孩子的不同问题。</div>
  200. </div>
  201. <div class="plan-grid">
  202. <div class="plan-card" onclick="openPlan('单包套餐','699',69900,'1 个报告包','A1 认知 或 B2 行为(10 岁前)','A2 心 或 B4 智(10-18 岁)')">
  203. <div class="plan-name">单包套餐</div>
  204. <div class="plan-sub">1 个报告包</div>
  205. <div class="plan-price">¥699</div>
  206. <ul class="plan-feats">
  207. <li>任选 1 个报告包</li>
  208. <li>10 岁前:A1 认知 / B2 行为</li>
  209. <li>10-18 岁:A2 心 / B4 智</li>
  210. <li>专业报告 + AI 分析</li>
  211. <li>纳入成长档案</li>
  212. </ul>
  213. <button class="plan-btn">选择此套餐</button>
  214. </div>
  215. <div class="plan-card hot purple-card" onclick="openPlan('双包组合','1280',128000,'2 个报告包','A2 心 + B4 智(黄金组合)','10 岁前可选 A1 + B2')">
  216. <div class="plan-name">双包组合</div>
  217. <div class="plan-sub">2 个报告包</div>
  218. <div class="plan-price">¥1,280</div>
  219. <ul class="plan-feats">
  220. <li>A2 心 + B4 智 黄金组合</li>
  221. <li>10 岁前:A1 + B2 组合</li>
  222. <li>心理 × 智力 双维度交叉</li>
  223. <li>专业报告 + AI 分析</li>
  224. <li>规划师初步解读</li>
  225. </ul>
  226. <button class="plan-btn">选择此套餐</button>
  227. </div>
  228. <div class="plan-card purple-card" onclick="openPlan('三包进阶','1860',186000,'3 个报告包','A2 心 + B4 智 + 加选 1 包','可加选:B3 学习 / B5 青春期 / B6 职业')">
  229. <div class="plan-name">三包进阶</div>
  230. <div class="plan-sub">3 个报告包</div>
  231. <div class="plan-price">¥1,860</div>
  232. <ul class="plan-feats">
  233. <li>A2 心 + B4 智 基础</li>
  234. <li>加选 B3 学习 / B5 青春期 / B6 职业</li>
  235. <li>覆盖学习问题或成长议题</li>
  236. <li>专业报告 + AI 分析</li>
  237. <li>规划师深度解读</li>
  238. </ul>
  239. <button class="plan-btn">选择此套餐</button>
  240. </div>
  241. <div class="plan-card" onclick="openPlan('四包旗舰','2390',239000,'4 个报告包','A2 心 + B4 智 + 加选 2 包','全面评估孩子成长状态')">
  242. <div class="plan-name">四包旗舰</div>
  243. <div class="plan-sub">4 个报告包</div>
  244. <div class="plan-price">¥2,390</div>
  245. <ul class="plan-feats">
  246. <li>A2 心 + B4 智 基础</li>
  247. <li>加选 2 个报告包</li>
  248. <li>全面覆盖成长关键议题</li>
  249. <li>专业报告 + AI 分析</li>
  250. <li>规划师 1 对 1 深度解读</li>
  251. </ul>
  252. <button class="plan-btn">选择此套餐</button>
  253. </div>
  254. </div>
  255. </div>
  256. </section>
  257. <section>
  258. <div class="container">
  259. <h2>测评流程</h2>
  260. <ol class="step-list">
  261. <li><strong>选择套餐</strong> — 根据孩子年龄与关注重点,选择适合的报告包组合套餐</li>
  262. <li><strong>在线下单</strong> — 填写孩子信息完成支付,专业规划师将在 24 小时内与您联系</li>
  263. <li><strong>预约测评</strong> — 规划师根据孩子情况安排测评时间与方式(线下 / 线上)</li>
  264. <li><strong>完成测评</strong> — 由专业测评师执行标准化评估,记录测评数据与孩子快照</li>
  265. <li><strong>获取报告</strong> — 生成专业测评报告,AI 分析 + 规划师解读,明确优势与成长建议</li>
  266. <li><strong>纳入档案</strong> — 测评结果自动纳入五维成长档案,持续追踪成长变化</li>
  267. </ol>
  268. </div>
  269. </section>
  270. <section>
  271. <div class="container">
  272. <h2>谁需要做 DAN 测评?</h2>
  273. <div class="grid-2">
  274. <div class="card purple">
  275. <h3>👶 10 岁前的孩子</h3>
  276. <p>注意力不集中、坐不住、语言发展慢、社交退缩?A1 认知 + B2 行为双包评估,及早发现认知与行为发展问题,抓住干预黄金期。</p>
  277. </div>
  278. <div class="card teal">
  279. <h3>🧑 10-18 岁的青少年</h3>
  280. <p>学习动力不足、情绪波动大、青春期叛逆、对未来迷茫?A2 心 + B4 智黄金组合,读懂心理状态与内在动力,科学引导成长。</p>
  281. </div>
  282. <div class="card green">
  283. <h3>📚 学习困难的孩子</h3>
  284. <p>成绩不理想、偏科、作业拖拉?B3 学习包精准诊断执行功能与学习策略问题,找到"学不进去"的真正原因。</p>
  285. </div>
  286. <div class="card blue">
  287. <h3>🎯 即将选科/升学的孩子</h3>
  288. <p>面临新高考选科、职业方向选择?B6 职业包通过 Holland 职业兴趣测评,提前发现天赋倾向,规划更从容。</p>
  289. </div>
  290. </div>
  291. </div>
  292. </section>
  293. <section>
  294. <div class="container">
  295. <h2>产品优势</h2>
  296. <div class="grid-3">
  297. <div class="feature-card">
  298. <span class="icon">🎯</span>
  299. <h4>科学评估体系</h4>
  300. <p>标准化神经认知评估工具,覆盖认知、心理、行为、学习、智力、青春期、职业 7 大领域。</p>
  301. </div>
  302. <div class="feature-card">
  303. <span class="icon">🤖</span>
  304. <h4>AI 智能分析</h4>
  305. <p>测评数据由 AI 自动分析,识别发展轨迹与潜在问题,生成个性化成长建议。</p>
  306. </div>
  307. <div class="feature-card">
  308. <span class="icon">👨‍🏫</span>
  309. <h4>规划师解读</h4>
  310. <p>专业成长规划师 1 对 1 解读报告,把数据翻译成可执行的养育方案。</p>
  311. </div>
  312. <div class="feature-card">
  313. <span class="icon">📊</span>
  314. <h4>成长档案联动</h4>
  315. <p>测评结果自动纳入五维成长档案,多期测评数据对比,成长轨迹一目了然。</p>
  316. </div>
  317. <div class="feature-card">
  318. <span class="icon">🧩</span>
  319. <h4>灵活组合</h4>
  320. <p>4 档套餐自由组合报告包,按需选择,不花冤枉钱。</p>
  321. </div>
  322. <div class="feature-card">
  323. <span class="icon">🔒</span>
  324. <h4>隐私保护</h4>
  325. <p>测评数据严格加密存储,仅用于成长评估与规划服务,保障家庭隐私安全。</p>
  326. </div>
  327. </div>
  328. </div>
  329. </section>
  330. <section>
  331. <div class="container">
  332. <h2>常见问题</h2>
  333. <div class="faq-item">
  334. <div class="faq-q">不同年龄段怎么选套餐?</div>
  335. <div class="faq-a">10 岁前建议选择 A1 认知 + B2 行为(单包或双包组合);10-18 岁以 A2 心 + B4 智为黄金组合,可按需加选 B3 学习、B5 青春期、B6 职业,最多 4 包。</div>
  336. </div>
  337. <div class="faq-item">
  338. <div class="faq-q">测评在哪里做?</div>
  339. <div class="faq-a">由专业测评师执行,支持线下到店测评与线上测评两种方式。下单后规划师会根据孩子情况与您协商安排。</div>
  340. </div>
  341. <div class="faq-item">
  342. <div class="faq-q">报告多久能出?</div>
  343. <div class="faq-a">测评完成后约 3-5 个工作日出具专业报告,含 AI 分析与规划师解读,电子版在线查看。</div>
  344. </div>
  345. <div class="faq-item">
  346. <div class="faq-q">测评结果会进成长档案吗?</div>
  347. <div class="faq-a">会的。DAN 测评结果自动纳入孩子的五维成长档案,后续复测可对比成长变化,形成持续追踪。</div>
  348. </div>
  349. <div class="faq-item">
  350. <div class="faq-q">可以只测一个维度吗?</div>
  351. <div class="faq-a">可以。699 元单包套餐即可选择任一报告包(10 岁前 A1/B2,10-18 岁 A2/B4)。如需更全面评估,建议选择双包及以上组合。</div>
  352. </div>
  353. </div>
  354. </section>
  355. <div class="container">
  356. <div class="cta-box">
  357. <h3>科学认识孩子,从 DAN 开始</h3>
  358. <p>选择适合的套餐,让专业测评告诉你孩子真正的成长状态</p>
  359. <a class="cta-btn" href="#plans" onclick="event.preventDefault();document.querySelector('.plan-grid').scrollIntoView({behavior:'smooth'})">查看套餐</a>
  360. <a class="cta-btn secondary" href="#contact">扫码咨询</a>
  361. </div>
  362. </div>
  363. <!-- 底部固定购买栏 -->
  364. <div class="sticky-bar">
  365. <div>
  366. <div class="label">DAN 专业心智测评</div>
  367. <div><span class="price">¥699</span><span class="orig">起</span></div>
  368. </div>
  369. <button class="sticky-btn" onclick="document.querySelector('.plan-grid').scrollIntoView({behavior:'smooth'})">立即选购</button>
  370. </div>
  371. <!-- Order Form Modal -->
  372. <div id="orderForm" style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity 0.2s;" onclick="if(event.target===this){this.style.visibility='hidden';this.style.opacity='0'}">
  373. <div style="background:#fff;border-radius:16px;padding:2rem;max-width:420px;width:90%;position:relative;">
  374. <button style="position:absolute;top:12px;right:12px;background:none;border:none;font-size:24px;cursor:pointer;color:#999" onclick="var f=document.getElementById('orderForm');f.style.visibility='hidden';f.style.opacity='0'">×</button>
  375. <h3 id="orderTitle" style="margin-bottom:1.2rem;font-size:1.2rem;">DAN 专业心智测评 · 下单</h3>
  376. <div style="margin-bottom:1rem">
  377. <label style="display:block;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">家长姓名</label>
  378. <input id="orderName" type="text" placeholder="请输入您的姓名" style="width:100%;padding:0.6rem 0.8rem;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;box-sizing:border-box">
  379. </div>
  380. <div style="margin-bottom:1rem">
  381. <label style="display:block;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">手机号</label>
  382. <input id="orderPhone" type="tel" placeholder="请输入手机号" style="width:100%;padding:0.6rem 0.8rem;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;box-sizing:border-box">
  383. </div>
  384. <div style="margin-bottom:1rem">
  385. <label style="display:block;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">孩子年龄</label>
  386. <select id="orderChildAge" style="width:100%;padding:0.6rem 0.8rem;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;box-sizing:border-box;background:#fff">
  387. <option value="">请选择孩子年龄段</option>
  388. <option value="0-10">10 岁前</option>
  389. <option value="10-18">10-18 岁</option>
  390. </select>
  391. </div>
  392. <div style="margin-bottom:1rem;padding:0.8rem;background:#f0fdfa;border-radius:8px;display:flex;justify-content:space-between;align-items:center">
  393. <span style="font-size:0.9rem;color:var(--text-secondary)">已选套餐</span>
  394. <span id="orderPlanName" style="font-size:0.9rem;font-weight:600;color:var(--text-primary)">单包套餐</span>
  395. </div>
  396. <div style="margin-bottom:1.2rem;padding:0.8rem;background:#f0fdfa;border-radius:8px;display:flex;justify-content:space-between;align-items:center">
  397. <span style="font-size:0.9rem;color:var(--text-secondary)">合计</span>
  398. <span id="orderAmount" style="font-size:1.5rem;font-weight:800;color:#7c3aed">¥699</span>
  399. </div>
  400. <button id="payBtn" onclick="submitOrder()" style="width:100%;padding:0.8rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer">微信支付</button>
  401. <p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.8rem;text-align:center">支付由微信支付安全处理 · 支付后规划师将在 24 小时内联系您确认测评安排</p>
  402. </div>
  403. </div>
  404. <!-- 扫码咨询 -->
  405. <div id="contact" class="container" style="text-align:center;padding-top:0">
  406. <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:0.8rem">扫码咨询,了解更多</p>
  407. <img src="../img/yan.png" alt="咨询二维码" style="width:160px;height:160px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
  408. </div>
  409. <footer class="site-footer">
  410. <div class="footer-inner">
  411. <p>本测评仅用于成长评估与教育参考,不构成医疗诊断。如有健康问题,请咨询专业医生。</p>
  412. <p style="margin-top:4px;font-size:0.75rem;color:rgba(255,255,255,0.3)">© 2026 浠艾福 CareFamily</p>
  413. </div>
  414. </footer>
  415. <script>
  416. var _selectedPlan = { name: '单包套餐', priceLabel: '¥699', amount: 69900 };
  417. function openPlan(name, priceLabel, amount) {
  418. _selectedPlan = { name: name, priceLabel: priceLabel, amount: amount };
  419. document.getElementById('orderTitle').textContent = 'DAN 专业心智测评 · 下单';
  420. document.getElementById('orderPlanName').textContent = name + '(' + priceLabel + ')';
  421. document.getElementById('orderAmount').textContent = priceLabel;
  422. var f = document.getElementById('orderForm');
  423. f.style.visibility = 'visible';
  424. f.style.opacity = '1';
  425. }
  426. function submitOrder() {
  427. var name = document.getElementById('orderName').value.trim();
  428. var phone = document.getElementById('orderPhone').value.trim();
  429. var age = document.getElementById('orderChildAge').value;
  430. if (!name) { alert('请输入家长姓名'); return; }
  431. if (!phone || !/^1\d{10}$/.test(phone)) { alert('请输入正确的手机号'); return; }
  432. if (!age) { alert('请选择孩子年龄段'); return; }
  433. var btn = document.getElementById('payBtn');
  434. btn.disabled = true;
  435. btn.textContent = '提交中...';
  436. var orderNo = 'DAN' + Date.now() + Math.random().toString(36).substr(2,4).toUpperCase();
  437. window._orderContact = { name: name, phone: phone, age: age };
  438. window._plan = _selectedPlan;
  439. fetch('/api/payment/wechat/native', {
  440. method: 'POST',
  441. headers: { 'Content-Type': 'application/json' },
  442. body: JSON.stringify({
  443. orderNo: orderNo,
  444. description: 'DAN专业心智测评-' + _selectedPlan.name,
  445. amount: _selectedPlan.amount,
  446. contactName: name,
  447. contactPhone: phone,
  448. contactAddress: '孩子年龄段:' + age
  449. })
  450. })
  451. .then(function(r) { return r.json(); })
  452. .then(function(data) {
  453. if (data.code === 200 && data.data && data.data.codeUrl) {
  454. document.getElementById('orderForm').style.visibility = 'hidden';
  455. document.getElementById('orderForm').style.opacity = '0';
  456. showQrCode(data.data.codeUrl, orderNo);
  457. } else {
  458. alert('下单失败: ' + (data.message || ''));
  459. btn.disabled = false;
  460. btn.textContent = '微信支付';
  461. }
  462. })
  463. .catch(function() {
  464. alert('网络请求失败');
  465. btn.disabled = false;
  466. btn.textContent = '微信支付';
  467. });
  468. }
  469. function isWechatBrowser() {
  470. return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
  471. }
  472. function showQrCode(codeUrl, orderNo) {
  473. var c = window._orderContact || {};
  474. var p = window._plan || { name: 'DAN专业心智测评', priceLabel: '¥699' };
  475. var div = document.createElement('div');
  476. div.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center';
  477. div.onclick = function(e) { if (e.target === this) this.remove(); };
  478. div.innerHTML = '<div style="background:#fff;border-radius:16px;padding:2rem;text-align:center;max-width:340px">' +
  479. '<h3 style="margin-bottom:0.8rem;font-size:1.1rem;">请使用微信扫码支付</h3>' +
  480. '<div style="background:#f0fdfa;border-radius:8px;padding:0.8rem;margin-bottom:0.8rem;text-align:left">' +
  481. '<div style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">DAN 专业心智测评 · ' + p.name + '</div>' +
  482. '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.3rem">' +
  483. '<span style="font-size:0.8rem;color:var(--text-muted)">' + (c.age === '0-10' ? '10 岁前' : '10-18 岁') + '</span>' +
  484. '<span style="font-size:1.1rem;font-weight:700;color:#7c3aed">' + p.priceLabel + '</span>' +
  485. '</div>' +
  486. '<div style="border-top:1px dashed #e2e8f0;margin:0.5rem 0;padding-top:0.5rem;font-size:0.8rem;color:var(--text-muted)">' +
  487. '<div>联系人: ' + (c.name || '') + '</div>' +
  488. '<div>手机号: ' + (c.phone || '') + '</div>' +
  489. '</div>' +
  490. '</div>' +
  491. '<div style="width:200px;height:200px;margin:0 auto 0.8rem;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden">' +
  492. '<img src="/api/payment/qrcode?text=' + encodeURIComponent(codeUrl) + '" alt="支付二维码" style="width:200px;height:200px">' +
  493. '</div>' +
  494. '<p style="font-size:0.8rem;color:#999">' + (isWechatBrowser() ? '请截图保存二维码 → 打开微信扫一扫 → 从相册选择' : '打开微信「扫一扫」完成支付') + '</p>' +
  495. '<button onclick="this.closest(\'div[style]\').remove()" style="margin-top:0.8rem;padding:0.5rem 2rem;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer">取消支付</button>' +
  496. '</div>';
  497. document.body.appendChild(div);
  498. var pollTimer = setInterval(function() {
  499. fetch('/api/payment/wechat/status', {
  500. method: 'POST',
  501. headers: { 'Content-Type': 'application/json' },
  502. body: JSON.stringify({ orderNo: orderNo })
  503. })
  504. .then(function(r) { return r.json(); })
  505. .then(function(data) {
  506. if (data.code === 200 && data.data === true) {
  507. clearInterval(pollTimer);
  508. div.innerHTML = '<div style="background:#fff;border-radius:16px;padding:2rem;text-align:center;max-width:320px">' +
  509. '<div style="font-size:3rem;margin-bottom:0.5rem">✅</div>' +
  510. '<h3 style="color:#7c3aed;font-size:1.2rem;margin-bottom:0.5rem">支付成功!</h3>' +
  511. '<div style="background:#f0fdfa;border-radius:8px;padding:0.8rem;margin-bottom:1rem;text-align:left">' +
  512. '<div style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">DAN 专业心智测评 · ' + p.name + '</div>' +
  513. '<div style="display:flex;justify-content:space-between;align-items:center">' +
  514. '<span style="font-size:0.8rem;color:var(--text-muted)">已付款</span>' +
  515. '<span style="font-size:1.1rem;font-weight:700;color:#7c3aed">' + p.priceLabel + '</span>' +
  516. '</div>' +
  517. '</div>' +
  518. '<p style="font-size:0.85rem;color:#999;margin-bottom:0.5rem">专业规划师将在 24 小时内与您联系</p>' +
  519. '<p style="font-size:0.75rem;color:#bbb">窗口将在 3 秒后自动关闭</p>' +
  520. '</div>';
  521. setTimeout(function() { div.remove(); }, 3000);
  522. }
  523. })
  524. .catch(function() {});
  525. }, 3000);
  526. setTimeout(function() { clearInterval(pollTimer); }, 120000);
  527. }
  528. </script>
  529. </body>
  530. </html>