cfc/web/knowledge.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="浠艾福成长百科 — 围绕身·智·富·行·心五大维度，用科学知识为每个家庭的健康成长保驾护航。">
  <meta name="keywords" content="浠艾福,成长百科,育儿知识,五维能量,亲子教育">
  <meta property="og:title" content="成长百科 — 浠艾福主动健康学院">
  <meta property="og:description" content="围绕身·智·富·行·心五大维度，用科学知识为每个家庭的健康成长保驾护航。">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.etotem.com.cn/knowledge.html">
  <meta name="theme-color" content="#4A9BD7">
  <title>成长百科 — 浠艾福主动健康学院</title>
  <link rel="stylesheet" href="css/style.css">

  <!-- Microsoft Clarity -->
  <script>
    (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "xj4p74ra9m");
  </script>

  <style>
    :root {
      --c-body: #FF8C42;
      --c-wisdom: #6366F1;
      --c-wealth: #F59E0B;
      --c-action: #10B981;
      --c-heart: #FF6B9D;
    }
    html.kb-page, .kb-page body { height: 100vh; overflow: hidden; }
    .kb-page body { display: flex; flex-direction: column; background: linear-gradient(135deg, #FAFBFC 0%, #F0F4F8 100%); }

    .kb-main { flex:1; display:flex; flex-direction:column; max-width:1200px; width:100%; margin:0 auto; padding:0 var(--space-lg); overflow:hidden; position:relative; z-index:1; }
    .kb-header { text-align:center; flex-shrink:0; padding:var(--space-lg) 0 var(--space-md); }
    .kb-header h1 { font-size:2rem; font-weight:800; color:var(--color-text-primary); margin-bottom:2px; }
    .kb-header p { font-size:var(--font-size-small); color:var(--color-text-secondary); }

    .kb-body-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding-bottom:var(--space-md); min-height:0; position:relative; }
    .kb-body-inner { position:relative; width:100%; max-width:700px; height:100%; display:flex; align-items:center; justify-content:center; }
    .kb-body-img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--radius-lg); box-shadow:0 8px 40px rgba(74,155,215,0.08); }

    .kb-marker { position:absolute; z-index:2; pointer-events:none; }
    .kb-marker-card { pointer-events:auto; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:12px; padding:10px 14px; border:1.5px solid var(--m-color,var(--color-border-light)); box-shadow:0 4px 16px rgba(0,0,0,0.06); min-width:170px; max-width:220px; transition:box-shadow var(--transition-fast), transform var(--transition-fast); }
    .kb-marker-card:hover { box-shadow:0 6px 24px rgba(0,0,0,0.10); transform:translateY(-1px); }
    .kb-marker-dot { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--m-color); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.15); top:50%; margin-top:-6px; pointer-events:none; }
    .kb-marker--right .kb-marker-dot { left:-6px; }
    .kb-marker--left .kb-marker-dot { right:-6px; }
    .kb-marker-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--color-border-light); }
    .kb-marker-label { font-size:0.8125rem; font-weight:700; color:var(--m-color,var(--color-text-primary)); }
    .kb-marker-card a { display:flex; align-items:center; gap:6px; padding:5px 0; text-decoration:none; color:var(--color-text-secondary); font-size:0.8125rem; line-height:1.3; border-bottom:1px solid var(--color-border-light); transition:color var(--transition-fast); }
    .kb-marker-card a:last-child { border-bottom:none; }
    .kb-marker-card a:hover { color:var(--m-color,var(--color-primary)); }
    .kb-marker-card a .ma-icon { font-size:1rem; flex-shrink:0; }
    .kb-marker-card a .ma-title { flex:1; min-width:0; }
    .kb-marker-card a .ma-arrow { flex-shrink:0; font-size:0.75rem; opacity:0.3; transition:transform var(--transition-fast); }
    .kb-marker-card a:hover .ma-arrow { transform:translateX(3px); opacity:0.7; }
    .kb-marker-card .ma-coming { opacity:0.5; cursor:default; pointer-events:none; font-size:0.75rem; padding:4px 0; }

    .kb-m-pos-brain  { top:13%; left:56%; }
    .kb-m-pos-heart  { top:33%; right:54%; }
    .kb-m-pos-body   { top:48%; left:54%; }
    .kb-m-pos-wealth { top:64%; right:54%; }
    .kb-m-pos-action { top:82%; left:54%; }

    .kb-footer { flex-shrink:0; text-align:center; padding:var(--space-sm) 0; font-size:var(--font-size-tiny); color:var(--color-text-muted); border-top:1px solid var(--color-border-light); }
    .kb-footer a { color:var(--color-text-muted); text-decoration:none; }
    .kb-footer a:hover { color:var(--color-primary); }

    .kb-mobile { display:none; }

    @media (max-width:768px) {
      .kb-body-wrap { display:none; }
      .kb-mobile { display:flex; flex-direction:column; flex:1; min-height:0; }
      .kb-header { padding:var(--space-md) 0 var(--space-sm); }
      .kb-header h1 { font-size:1.5rem; }
      .kb-tabs { display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-shrink:0; padding:0 0 var(--space-sm); }
      .kb-tabs::-webkit-scrollbar { display:none; }
      .kb-tab { flex-shrink:0; padding:0.45em 1em; font-size:0.9375rem; font-weight:700; border:2px solid var(--color-border-light); border-radius:var(--radius-full); background:#fff; color:var(--color-text-secondary); cursor:pointer; transition:all var(--transition-fast); font-family:inherit; line-height:1.3; }
      .kb-tab:hover { border-color:var(--tab-color,var(--color-primary)); color:var(--tab-color); }
      .kb-tab.active { border-color:var(--tab-color,var(--color-primary)); background:color-mix(in srgb, var(--tab-color,var(--color-primary)) 10%, white); color:var(--tab-color,var(--color-primary)); }
      .kb-articles { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--space-sm); }
      .kb-a-item { display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-md); background:#fff; border-radius:var(--radius-md); border:1px solid var(--color-border-light); text-decoration:none; color:var(--color-text-primary); margin-bottom:var(--space-sm); transition:box-shadow var(--transition-fast), border-color var(--transition-fast); }
      .kb-a-item:last-child { margin-bottom:0; }
      .kb-a-item:active { box-shadow:var(--shadow-sm); border-color:var(--color-primary); }
      .kb-a-item .ai-icon { font-size:1.3rem; flex-shrink:0; }
      .kb-a-item .ai-info { flex:1; min-width:0; }
      .kb-a-item .ai-info h4 { font-size:0.9375rem; font-weight:700; margin-bottom:0.15em; line-height:1.3; }
      .kb-a-item .ai-info p { font-size:0.8125rem; color:var(--color-text-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
      .kb-a-coming { opacity:0.55; pointer-events:none; }
    }
    @media (max-width:480px) {
      .kb-header h1 { font-size:1.3rem; }
      .kb-main { padding:0 var(--space-md); }
      .kb-tab { padding:0.35em 0.8em; font-size:0.875rem; }
    }
    .scroll-indicator { display:none; }
  </style>
</head>
<body class="kb-page">

  <header class="site-header" id="header">
    <div class="container header-inner">
      <a href="index.html" class="logo">
        <img src="logo.png" alt="浠艾福" class="logo-img" width="36" height="36">
        <span class="logo-text">浠艾福</span>
        <span class="logo-tag">主动健康</span>
      </a>
      <button class="nav-toggle" id="navToggle" aria-label="切换导航"><span></span><span></span><span></span></button>
      <nav class="nav" id="nav">
        <ul class="nav-list">
          <li><a href="index.html" class="nav-link">首页</a></li>
          <li><a href="knowledge.html" class="nav-link active">成长百科</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div class="kb-main">
    <div class="kb-header">
      <h1>成长百科</h1>
      <p>身 · 智 · 富 · 行 · 心 — 科学育儿，从了解自己开始</p>
    </div>

    <div class="kb-body-wrap" id="kbDesktop">
      <div class="kb-body-inner" id="kbBodyInner">
        <img src="img/human-body.png" alt="人体五维成长百科" class="kb-body-img" id="kbBodyImg">
      </div>
    </div>

    <div class="kb-mobile" id="kbMobile">
      <div class="kb-tabs" id="kbTabs"></div>
      <div class="kb-articles" id="kbArticles"></div>
    </div>

    <div class="kb-footer">
      <a href="index.html">返回首页</a> &nbsp;·&nbsp; &copy; 2026 浠艾福主动健康研究院
    </div>
  </div>

  <script>
    var DIMS = [
      { key:'body',   label:'身', color:'#FF8C42', subtitle:'根基永固 · 主动健康', bodyPart:'gut' },
      { key:'wisdom', label:'智', color:'#6366F1', subtitle:'赋能未来 · 智慧启迪', bodyPart:'brain' },
      { key:'wealth', label:'富', color:'#F59E0B', subtitle:'利他创富 · 价值创造', bodyPart:'hands' },
      { key:'action', label:'行', color:'#10B981', subtitle:'人际和谐 · 知行合一', bodyPart:'feet' },
      { key:'heart',  label:'心', color:'#FF6B9D', subtitle:'大爱相随 · 情感滋养', bodyPart:'heart' }
    ];

    var ARTICLES = {
      body: [
        { icon:'🌿', title:'孩子过敏反复不好，根源可能在肠道', desc:'从肠道菌群-免疫-过敏三角关系出发，解析儿童过敏的深层原因。', url:'geo-faq-1-allergy.html' },
        { icon:'🛡️', title:'儿童免疫力提升3大关键步骤', desc:'从肠道微生态、营养支持与睡眠节律三个维度系统提升自护力。', url:'geo-faq-3-immunity.html' },
        { icon:'🌊', title:'微塑料对家庭健康的隐形危害', desc:'揭秘微塑料如何影响肠道菌群与激素系统及家庭防护策略。', url:'plastic-health.html' },
        { icon:'🍎', title:'精准营养：每个家庭的健康基石', desc:'基于个体代谢特征定制真正适合家人的膳食方案。', coming:true }
      ],
      wisdom: [
        { icon:'🧠', title:'注意力不集中，先查肠道再谈训练', desc:'肠道菌群通过肠-脑轴影响注意力与认知功能，科学认知从根源入手。', url:'geo-faq-2-attention.html' },
        { icon:'📖', title:'成长型思维：帮助孩子拥抱挑战', desc:'从心理学研究出发，培养孩子面对困难时不放弃的核心信念。', coming:true }
      ],
      wealth: [
        { icon:'💡', title:'从小培养孩子的财商思维', desc:'零花钱管理、目标储蓄与价值交换，让财商教育融入日常生活。', coming:true },
        { icon:'🌱', title:'家庭创客生态：利他中的财富', desc:'在利他分享中创造价值，探索适合家庭的第二收入曲线。', coming:true }
      ],
      action: [
        { icon:'🤝', title:'如何培养孩子的社交能力', desc:'从家庭互动到同伴交往，帮助孩子建立积极健康的人际关系。', coming:true },
        { icon:'🏕️', title:'亲子户外活动：在自然中成长', desc:'走出室内，用大自然的力量滋养孩子的身体与心灵。', coming:true }
      ],
      heart: [
        { icon:'💛', title:'亲子沟通：如何听懂孩子的心', desc:'从共情力到非暴力沟通，帮助家长走进孩子的内心世界。', coming:true },
        { icon:'🕊️', title:'儿童情绪管理：从认知到调节', desc:'理解各年龄段情绪发展规律，掌握实用的情绪疏导方法。', coming:true }
      ]
    };

    var MARKER_POS = {
      brain: { top:'11%', side:'left', offset:'55%' },
      heart: { top:'31%', side:'right', offset:'52%' },
      gut:   { top:'46%', side:'left', offset:'53%' },
      hands: { top:'62%', side:'right', offset:'52%' },
      feet:  { top:'81%', side:'left', offset:'53%' }
    };

    (function buildDesktop() {
      var c = document.getElementById('kbBodyInner');
      for (var i = 0; i < DIMS.length; i++) {
        var d = DIMS[i], pos = MARKER_POS[d.bodyPart], arts = ARTICLES[d.key] || [];
        var m = document.createElement('div');
        m.className = 'kb-marker';
        m.style.cssText = 'top:'+pos.top+';'+(pos.side==='left'?'left:'+pos.offset:'right:'+pos.offset);
        var side = pos.side==='left' ? 'kb-marker--right' : 'kb-marker--left';
        var card = document.createElement('div');
        card.className = 'kb-marker-card '+side;
        card.style.setProperty('--m-color', d.color);
        var hd = document.createElement('div');
        hd.className = 'kb-marker-head';
        hd.innerHTML = '<span class="kb-marker-label">'+d.label+' · '+d.subtitle+'</span>';
        card.appendChild(hd);
        for (var j = 0; j < arts.length; j++) {
          var a = arts[j], el;
          if (a.coming) {
            el = document.createElement('div');
            el.className = 'ma-coming';
            el.innerHTML = '<span class="ma-icon">'+a.icon+'</span><span class="ma-title">'+a.title+' 即将上线</span>';
          } else {
            el = document.createElement('a');
            el.href = a.url;
            el.innerHTML = '<span class="ma-icon">'+a.icon+'</span><span class="ma-title">'+a.title+'</span><span class="ma-arrow">→</span>';
          }
          card.appendChild(el);
        }
        var dot = document.createElement('div');
        dot.className = 'kb-marker-dot';
        dot.style.background = d.color;
        card.appendChild(dot);
        m.appendChild(card);
        c.appendChild(m);
      }
    })();

    var activeDim = 'body';
    function buildTabs() {
      var c = document.getElementById('kbTabs'), h = '';
      for (var i = 0; i < DIMS.length; i++) {
        var d = DIMS[i];
        h += '<button class="kb-tab'+(d.key===activeDim?' active':'')+'" style="--tab-color:'+d.color+'" data-dim="'+d.key+'" onclick="switchTab(\''+d.key+'\')">'+d.label+'</button>';
      }
      c.innerHTML = h;
    }
    function renderArticles(k) {
      var c = document.getElementById('kbArticles'), arts = ARTICLES[k] || [], h = '';
      for (var i = 0; i < arts.length; i++) {
        var a = arts[i];
        if (a.coming) {
          h += '<div class="kb-a-item kb-a-coming"><span class="ai-icon">'+a.icon+'</span><div class="ai-info"><h4>'+a.title+'</h4><p>'+a.desc+'</p></div></div>';
        } else {
          h += '<a href="'+a.url+'" class="kb-a-item"><span class="ai-icon">'+a.icon+'</span><div class="ai-info"><h4>'+a.title+'</h4><p>'+a.desc+'</p></div><span style="color:var(--color-text-muted);font-size:0.9rem">→</span></a>';
        }
      }
      c.innerHTML = h;
    }
    function switchTab(k) { activeDim=k; var t=document.querySelectorAll('#kbTabs .kb-tab'); for(var i=0;i<t.length;i++){t[i].classList.remove('active');if(t[i].getAttribute('data-dim')===k)t[i].classList.add('active');} renderArticles(k); }
    buildTabs(); renderArticles(activeDim);

    document.getElementById('navToggle').addEventListener('click',function(){document.getElementById('nav').classList.toggle('nav-open');this.classList.toggle('active');});
  </script>
</body>
</html>