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>
    /* ========== Knowledge Base - 100vh Single Page ========== */
    :root {
      --kb-body: #FF8C42;
      --kb-wisdom: #6366F1;
      --kb-wealth: #F59E0B;
      --kb-action: #10B981;
      --kb-heart: #FF6B9D;
    }

    html.knowledge-page, .knowledge-page body {
      height: 100vh;
      overflow: hidden;
    }
    .knowledge-page body {
      display: flex;
      flex-direction: column;
      background: #FAFBFC;
    }

    /* ---- Background silhouettes ---- */
    .kb-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .kb-bg svg {
      position: absolute;
      height: 70vh;
      width: auto;
      opacity: 0.06;
      color: #4A5568;
    }
    .kb-bg-solo {
      left: -4%;
      bottom: 5%;
    }
    .kb-bg-group {
      right: -4%;
      top: 10%;
      height: 55vh;
    }
    @media (max-width: 768px) {
      .kb-bg svg { opacity: 0.04; }
      .kb-bg-solo { left: -20%; bottom: 0; height: 50vh; }
      .kb-bg-group { right: -20%; top: 5%; height: 40vh; }
    }
    @media (max-width: 480px) {
      .kb-bg-solo { left: -40%; }
      .kb-bg-group { right: -30%; }
    }

    /* ---- Main layout ---- */
    .kb-main {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 var(--space-lg);
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
    }

    /* ---- Header ---- */
    .kb-header {
      text-align: center;
      padding: var(--space-xl) 0 var(--space-lg);
      flex-shrink: 0;
    }
    .kb-header h1 {
      font-size: 2.2rem;
      font-weight: 800;
      color: var(--color-text-primary);
      margin-bottom: var(--space-xs);
      letter-spacing: 0.02em;
    }
    .kb-header p {
      font-size: var(--font-size-small);
      color: var(--color-text-secondary);
      line-height: 1.6;
    }

    /* ---- Desktop cards (flex row, all visible) ---- */
    .kb-desktop {
      display: flex;
      gap: var(--space-md);
      flex: 1;
      padding-bottom: var(--space-lg);
      min-height: 0;
    }
    .kb-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-light);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    }
    .kb-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
    }
    .kb-card-head {
      padding: var(--space-md) var(--space-md) var(--space-sm);
      border-bottom: 2px solid var(--color-border-light);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
    .kb-card-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .kb-card-name {
      font-size: 1.05rem;
      font-weight: 800;
      line-height: 1.2;
    }
    .kb-card-body {
      padding: var(--space-sm) var(--space-md) var(--space-md);
      overflow-y: auto;
      flex: 1;
    }
    .kb-card-body a {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) 0;
      text-decoration: none;
      color: var(--color-text-secondary);
      border-bottom: 1px solid var(--color-border-light);
      transition: color var(--transition-fast);
      font-size: var(--font-size-small);
      line-height: 1.4;
    }
    .kb-card-body a:last-child {
      border-bottom: none;
    }
    .kb-card-body a:hover {
      color: var(--color-primary);
    }
    .kb-card-body a .kb-a-icon {
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .kb-card-body a .kb-a-title {
      flex: 1;
      min-width: 0;
    }
    .kb-card-body a .kb-a-arrow {
      flex-shrink: 0;
      font-size: 0.85rem;
      opacity: 0.4;
      transition: transform var(--transition-fast), opacity var(--transition-fast);
    }
    .kb-card-body a:hover .kb-a-arrow {
      transform: translateX(3px);
      opacity: 0.8;
    }
    .kb-card-body .kb-coming {
      opacity: 0.55;
      cursor: default;
      border-bottom-color: var(--color-border-light);
      position: relative;
    }
    .kb-card-body .kb-coming:hover {
      color: var(--color-text-secondary);
    }
    .kb-card-body .kb-coming:hover .kb-a-arrow {
      transform: none;
      opacity: 0.4;
    }
    .kb-coming-badge {
      font-size: 0.68rem;
      color: var(--color-text-muted);
      background: var(--color-bg-secondary);
      padding: 0.15em 0.5em;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }

    /* ---- Mobile tabs + article list ---- */
    .kb-mobile {
      display: none;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      padding-bottom: var(--space-md);
    }
    .kb-tabs {
      display: flex;
      gap: var(--space-xs);
      padding: 0 0 var(--space-sm);
      flex-shrink: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .kb-tabs::-webkit-scrollbar { display: none; }
    .kb-tab {
      flex-shrink: 0;
      padding: 0.5em 1.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);
      line-height: 1.3;
      font-family: inherit;
    }
    .kb-tab:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }
    .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: 0 var(--space-xs);
    }
    .kb-article-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-article-item:last-child { margin-bottom: 0; }
    .kb-article-item:active {
      box-shadow: var(--shadow-sm);
      border-color: var(--color-primary);
    }
    .kb-article-item .kb-a-icon { font-size: 1.3rem; flex-shrink: 0; }
    .kb-article-item .kb-a-info { flex: 1; min-width: 0; }
    .kb-article-item .kb-a-info h4 {
      font-size: 0.9375rem;
      font-weight: 700;
      margin-bottom: 0.15em;
      line-height: 1.3;
    }
    .kb-article-item .kb-a-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-mobile-coming {
      opacity: 0.6;
      pointer-events: none;
    }
    .kb-mobile-coming .kb-a-info h4::after {
      content: "即将上线";
      font-size: 0.68rem;
      color: var(--color-text-muted);
      background: var(--color-bg-secondary);
      padding: 0.15em 0.5em;
      border-radius: var(--radius-full);
      margin-left: 0.5em;
      font-weight: 400;
    }

    /* ---- Footer ---- */
    .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); }

    /* ---- Responsive ---- */
    @media (max-width: 900px) {
      .kb-card-name { font-size: 0.95rem; }
      .kb-card-body a { font-size: 0.8125rem; }
    }

    @media (max-width: 768px) {
      .kb-desktop { display: none; }
      .kb-mobile { display: flex; }
      .kb-header { padding: var(--space-md) 0; }
      .kb-header h1 { font-size: 1.6rem; }
      .kb-main { padding: 0 var(--space-md); }
    }

    @media (max-width: 480px) {
      .kb-header h1 { font-size: 1.4rem; }
      .kb-tabs { gap: 4px; }
      .kb-tab { padding: 0.4em 0.85em; font-size: 0.875rem; }
    }

    /* Hide scroll indicator from old pages if present */
    .scroll-indicator { display: none; }
  </style>
</head>
<body class="knowledge-page">

  <!-- ==================== Navigation ==================== -->
  <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>

  <!-- ==================== Background Silhouettes ==================== -->
  <div class="kb-bg" aria-hidden="true">
    <!-- Solo figure: inner cultivation (身·智·心) -->
    <svg class="kb-bg-solo" viewBox="0 0 120 280" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
      <ellipse cx="60" cy="24" rx="16" ry="18"/>
      <path d="M44,42 L76,42 C76,42 84,90 80,122 L40,122 C36,90 44,42 44,42 Z"/>
      <path d="M44,58 L16,96 L26,104 L48,72"/>
      <path d="M76,58 L104,96 L94,104 L72,72"/>
      <path d="M46,122 L34,270 L50,270 L54,122 Z"/>
      <path d="M66,122 L70,270 L86,270 L74,122 Z"/>
    </svg>
    <!-- Group figures: external relationships (行·富) -->
    <svg class="kb-bg-group" viewBox="0 0 280 260" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
      <g transform="translate(8,58) scale(0.55)">
        <ellipse cx="60" cy="24" rx="16" ry="18"/>
        <path d="M44,42 L76,42 C76,42 84,90 80,122 L40,122 C36,90 44,42 44,42 Z"/>
        <path d="M44,58 L16,96 L26,104 L48,72"/>
        <path d="M76,58 L104,96 L94,104 L72,72"/>
        <path d="M46,122 L34,270 L50,270 L54,122 Z"/>
        <path d="M66,122 L70,270 L86,270 L74,122 Z"/>
      </g>
      <g transform="translate(95,20) scale(0.78)">
        <ellipse cx="60" cy="24" rx="16" ry="18"/>
        <path d="M44,42 L76,42 C76,42 84,90 80,122 L40,122 C36,90 44,42 44,42 Z"/>
        <path d="M44,58 L16,96 L26,104 L48,72"/>
        <path d="M76,58 L104,96 L94,104 L72,72"/>
        <path d="M46,122 L34,270 L50,270 L54,122 Z"/>
        <path d="M66,122 L70,270 L86,270 L74,122 Z"/>
      </g>
      <g transform="translate(185,50) scale(0.64)">
        <ellipse cx="60" cy="24" rx="16" ry="18"/>
        <path d="M44,42 L76,42 C76,42 84,90 80,122 L40,122 C36,90 44,42 44,42 Z"/>
        <path d="M44,58 L16,96 L26,104 L48,72"/>
        <path d="M76,58 L104,96 L94,104 L72,72"/>
        <path d="M46,122 L34,270 L50,270 L54,122 Z"/>
        <path d="M66,122 L70,270 L86,270 L74,122 Z"/>
      </g>
    </svg>
  </div>

  <!-- ==================== Main Content ==================== -->
  <div class="kb-main">

    <!-- Header -->
    <div class="kb-header">
      <h1>成长百科</h1>
      <p>科学育儿 · 从了解开始 — 围绕 <strong>身 · 智 · 富 · 行 · 心</strong> 五大维度</p>
    </div>

    <!-- ===== Desktop Layout ===== -->
    <div class="kb-desktop" id="kbDesktop">
      <!-- Cards injected by JS -->
    </div>

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

    <!-- Footer -->
    <div class="kb-footer">
      <a href="index.html">返回首页</a> &nbsp;·&nbsp; &copy; 2026 亿图腾（北京）科技有限公司
    </div>
  </div>

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

    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 }
      ]
    };

    /* ===== Build Desktop Cards ===== */
    (function buildDesktop() {
      var container = document.getElementById('kbDesktop');
      var html = '';
      for (var i = 0; i < DIMS.length; i++) {
        var d = DIMS[i];
        var arts = ARTICLES[d.key] || [];
        html += '<div class="kb-card">';
        html += '<div class="kb-card-head">';
        html += '<span class="kb-card-dot" style="background:' + d.color + '"></span>';
        html += '<span class="kb-card-name" style="color:' + d.color + '">' + d.label + ' · ' + d.subtitle + '</span>';
        html += '</div>';
        html += '<div class="kb-card-body">';
        for (var j = 0; j < arts.length; j++) {
          var a = arts[j];
          if (a.coming) {
            html += '<div class="kb-coming">';
            html += '<span class="kb-a-icon">' + a.icon + '</span>';
            html += '<span class="kb-a-title">' + a.title + '</span>';
            html += '<span class="kb-coming-badge">即将上线</span>';
            html += '</div>';
          } else {
            html += '<a href="' + a.url + '">';
            html += '<span class="kb-a-icon">' + a.icon + '</span>';
            html += '<span class="kb-a-title">' + a.title + '</span>';
            html += '<span class="kb-a-arrow">→</span>';
            html += '</a>';
          }
        }
        html += '</div></div>';
      }
      container.innerHTML = html;
    })();

    /* ===== Build Mobile Tabs ===== */
    var activeDim = 'body';

    function buildTabs() {
      var container = document.getElementById('kbTabs');
      var html = '';
      for (var i = 0; i < DIMS.length; i++) {
        var d = DIMS[i];
        var active = d.key === activeDim ? ' active' : '';
        html += '<button class="kb-tab' + active + '" style="--tab-color:' + d.color + '" data-dim="' + d.key + '" onclick="switchTab(\'' + d.key + '\')">' + d.label + '</button>';
      }
      container.innerHTML = html;
    }

    function renderArticles(dimKey) {
      var container = document.getElementById('kbArticles');
      var arts = ARTICLES[dimKey] || [];
      var html = '';
      for (var i = 0; i < arts.length; i++) {
        var a = arts[i];
        if (a.coming) {
          html += '<div class="kb-article-item kb-mobile-coming">';
          html += '<span class="kb-a-icon">' + a.icon + '</span>';
          html += '<div class="kb-a-info"><h4>' + a.title + '</h4><p>' + a.desc + '</p></div>';
          html += '</div>';
        } else {
          html += '<a href="' + a.url + '" class="kb-article-item">';
          html += '<span class="kb-a-icon">' + a.icon + '</span>';
          html += '<div class="kb-a-info"><h4>' + a.title + '</h4><p>' + a.desc + '</p></div>';
          html += '<span style="color:var(--color-text-muted);font-size:0.9rem">→</span>';
          html += '</a>';
        }
      }
      container.innerHTML = html;
    }

    function switchTab(dimKey) {
      activeDim = dimKey;
      // Update active tab
      var tabs = document.querySelectorAll('#kbTabs .kb-tab');
      for (var i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active');
        if (tabs[i].getAttribute('data-dim') === dimKey) {
          tabs[i].classList.add('active');
        }
      }
      renderArticles(dimKey);
    }

    buildTabs();
    renderArticles(activeDim);
  </script>

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