liaoxg
/
cfc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
							<!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:64px auto 0; 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; }
    .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 .2s, transform .2s; }
    .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 .kb-more-btn { font-size:0.75rem; font-weight:700; color:var(--m-color); cursor:pointer; opacity:0.5; transition:opacity .2s; user-select:none; margin-left:auto; }
    .kb-marker .kb-more-btn:hover { opacity:1; }
    .kb-marker .kb-hidden-items { display:none; position:absolute; top:0; z-index:3; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-radius:12px; padding:10px 14px; border:1.5px solid var(--m-color); box-shadow:0 4px 16px rgba(0,0,0,0.06); min-width:170px; max-width:220px; pointer-events:auto; }

    .kb-marker--right .kb-hidden-items { left:100%; }
    .kb-marker--left .kb-hidden-items { right:100%; }
    .kb-marker-card a, .kb-hidden-items 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 .2s; }
    .kb-marker-card a:last-child, .kb-hidden-items a:last-child { border-bottom:none; }
    .kb-marker-card a:hover, .kb-hidden-items a:hover { color:var(--m-color,var(--color-primary)); }
    .kb-marker-card a .ma-icon, .kb-hidden-items a .ma-icon { font-size:1rem; flex-shrink:0; }
    .kb-marker-card a .ma-title, .kb-hidden-items a .ma-title { flex:1; min-width:0; }
    .kb-marker-card a .ma-arrow, .kb-hidden-items a .ma-arrow { flex-shrink:0; font-size:0.75rem; opacity:0.3; transition:transform .2s; }
    .kb-marker-card a:hover .ma-arrow, .kb-hidden-items a:hover .ma-arrow { transform:translateX(3px); opacity:0.7; }
    .kb-marker-card .ma-coming, .kb-hidden-items .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>

  <!-- Footer (shared) -->
  <div id="footer-placeholder"></div>
  <script src="js/footer.js"></script>

  <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:'articles/geo-faq-1-allergy.html' },
        { icon:'🛡️', title:'儿童免疫力提升3大关键步骤', desc:'从肠道微生态、营养支持与睡眠节律三个维度系统提升自护力。', url:'articles/geo-faq-3-immunity.html' },
        { icon:'🌊', title:'微塑料对家庭健康的隐形危害', desc:'揭秘微塑料如何影响肠道菌群与激素系统及家庭防护策略。', url:'articles/plastic-health.html' },
        { icon:'🩺', title:'2型糖尿病：慢性炎症驱动的β细胞凋亡', desc:'从慢性炎症、肠道菌群与胰岛素抵抗角度解析2型糖尿病的发生机制与主动干预策略。', url:'articles/diabetes.html' },
        { icon:'🦴', title:'骨质疏松：骨骼健康的主动管理', desc:'骨质疏松的症-病-因分析与主动健康干预五步法，从营养运动到药物管理。', url:'articles/osteoporosis.html' },
        { icon:'🧬', title:'癌症预防：科学筛查与主动健康', desc:'癌症的发病机制与危险因素解析，提供主动健康五步干预策略降低患癌风险。', url:'articles/cancer.html' },
        { icon:'🧠', title:'阿尔茨海默病：认识认知衰退的早期信号', desc:'从神经炎症、肠道菌群与肠-脑轴角度解析阿尔茨海默病的发生机制与主动干预策略。', url:'articles/alzheimer.html' },
        { icon:'🍎', title:'精准营养：每个家庭的健康基石', desc:'基于个体代谢特征定制真正适合家人的膳食方案。', coming:true },
        { icon:'🚰', title:'自来水中的隐形威胁', desc:'自来水中抗生素、雌激素与内分泌干扰物污染全解析及对肠道菌群的影响。', url:'articles/tap-water-pollution.html' }
      ],
      wisdom: [
        { icon:'🧠', title:'注意力不集中，先查肠道再谈训练', desc:'肠道菌群通过肠-脑轴影响注意力与认知功能，科学认知从根源入手。', url:'articles/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:'当78%的孩子觉得父母不关心自己的感受，而100%的家长都认为自己非常关心孩子——这道鸿沟，到底在哪里？', url:'articles/parent-child-relationship.html' },
        { icon:'💑', title:'夫妻关系：从合伙人到同行者', desc:'结婚多年，对话浓缩成了"事务清单"。你们像两个优秀的合伙人，但少了什么？', url:'articles/marriage-relationship.html' },
        { icon:'🧰', title:'家庭关系实用工具箱', desc:'家庭会议、三明治沟通法、关系能量账户——三个经过验证的方法，明天就能用。', url:'articles/family-toolbox.html' }
      ],
      heart: [
        { icon:'❤️', title:'心脑血管疾病：从症-病-因到主动健康干预', desc:'心脑血管疾病的症状识别、发病机制与主动健康五步干预，科学守护心血管健康。', url:'articles/cardio-cerebro.html' },
        { icon:'💛', title:'亲子沟通：如何听懂孩子的心', desc:'从共情力到非暴力沟通，帮助家长走进孩子的内心世界。', coming:true },
        { icon:'🕊️', title:'儿童情绪管理：从认知到调节', desc:'理解各年龄段情绪发展规律，掌握实用的情绪疏导方法。', coming:true }
      ]
    };

    var MARKER_POS = {
      brain: { top:'1%', side:'left', offset:'55%' },
      heart: { top:'21%', side:'right', offset:'52%' },
      gut:   { top:'36%', side:'left', offset:'53%' },
      hands: { top:'52%', side:'right', offset:'65%' },
      feet:  { top:'71%', 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 sideCls = pos.side==='left' ? 'kb-marker--right' : 'kb-marker--left';
        var m = document.createElement('div');
        m.className = 'kb-marker ' + sideCls;
        m.style.cssText = 'top:'+pos.top+';'+(pos.side==='left'?'left:'+pos.offset:'right:'+pos.offset);
        m.style.setProperty('--m-color', d.color);
        var card = document.createElement('div');
        card.className = 'kb-marker-card';
        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>';
        var maxVis = 3, hiddenDiv = null;
        if (arts.length > maxVis) {
          var moreBtn = document.createElement('span');
          moreBtn.className = 'kb-more-btn';
          moreBtn.textContent = '>>';
          hd.appendChild(moreBtn);
          hiddenDiv = document.createElement('div');
          hiddenDiv.className = 'kb-hidden-items';
          m.appendChild(hiddenDiv);
          (function(h,d){ var t=null; h.onmouseenter=function(){ if(t){clearTimeout(t);t=null} d.style.display='block'; }; h.onmouseleave=function(){ if(!t){t=setTimeout(function(){ if(!d.matches(':hover')){ d.style.display='none'; } t=null; },500);} }; d.onmouseenter=function(){ if(t){clearTimeout(t);t=null} d.style.display='block'; }; d.onmouseleave=function(){ if(!t){t=setTimeout(function(){ if(!h.matches(':hover')){ d.style.display='none'; } t=null; },500);} }; })(hd, hiddenDiv);
        }
        card.appendChild(hd);
        for (var j = 0; j < arts.length; j++) {
          var a = arts[j], el, container = card;
          if (j >= maxVis && hiddenDiv) container = hiddenDiv;
          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">\u2192</span>';
          }
          container.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>