|
|
@@ -3,10 +3,10 @@
|
|
|
<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 name="description" content="浠艾福成长百科 — 围绕身·智·富·行·心五大维度，用科学知识为每个家庭的健康成长保驾护航。">
|
|
|
+ <meta name="keywords" content="浠艾福,成长百科,育儿知识,五维能量,亲子教育">
|
|
|
<meta property="og:title" content="成长百科 — 浠艾福主动健康学院">
|
|
|
- <meta property="og:description" 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">
|
|
|
@@ -21,8 +21,336 @@
|
|
|
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>
|
|
|
+<body class="knowledge-page">
|
|
|
|
|
|
<!-- ==================== Navigation ==================== -->
|
|
|
<header class="site-header" id="header">
|
|
|
@@ -44,356 +372,200 @@
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
- <!-- ==================== Knowledge Hero ==================== -->
|
|
|
- <section class="k-hero" id="hero">
|
|
|
- <div class="k-hero-bg"></div>
|
|
|
- <div class="container k-hero-inner">
|
|
|
- <div class="k-hero-content">
|
|
|
- <span class="k-hero-badge">浠艾福 · 成长百科</span>
|
|
|
- <h1 class="k-hero-title">
|
|
|
- 科学育儿 <span class="highlight">从了解开始</span>
|
|
|
- </h1>
|
|
|
- <p class="k-hero-desc">
|
|
|
- 围绕 <strong>身 · 心 · 智 · 行 · 富</strong> 五大维度，
|
|
|
- 从专业视角了解孩子每个阶段的发展规律，
|
|
|
- 用科学知识为每个家庭的成长保驾护航。
|
|
|
- </p>
|
|
|
- <div class="k-hero-actions">
|
|
|
- <a href="#inner" class="btn btn-primary">探索内修力量</a>
|
|
|
- <a href="#outer" class="btn btn-outline">发现外达智慧</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="k-hero-visual">
|
|
|
- <!-- Hero illustration: Simplified 5-pointed star wheel showing dimensions -->
|
|
|
- <svg viewBox="0 0 280 280" width="280" height="280" xmlns="http://www.w3.org/2000/svg">
|
|
|
- <defs>
|
|
|
- <radialGradient id="kgGlow" cx="50%" cy="50%" r="50%">
|
|
|
- <stop offset="0%" stop-color="#4A9BD7" stop-opacity="0.06"/>
|
|
|
- <stop offset="100%" stop-color="#4A9BD7" stop-opacity="0"/>
|
|
|
- </radialGradient>
|
|
|
- </defs>
|
|
|
- <circle cx="140" cy="140" r="120" fill="url(#kgGlow)"/>
|
|
|
- <!-- 5 dimension nodes in pentagon -->
|
|
|
- <circle cx="140" cy="60" r="22" fill="#5D4037" opacity="0.12"/>
|
|
|
- <text x="140" y="66" text-anchor="middle" font-size="16" font-weight="700" fill="#5D4037">身</text>
|
|
|
- <circle cx="215" cy="120" r="22" fill="#EF4444" opacity="0.12"/>
|
|
|
- <text x="215" y="126" text-anchor="middle" font-size="16" font-weight="700" fill="#EF4444">心</text>
|
|
|
- <circle cx="186" cy="210" r="22" fill="#C0A060" opacity="0.12"/>
|
|
|
- <text x="186" y="216" text-anchor="middle" font-size="16" font-weight="700" fill="#C0A060">智</text>
|
|
|
- <circle cx="94" cy="210" r="22" fill="#10B981" opacity="0.12"/>
|
|
|
- <text x="94" y="216" text-anchor="middle" font-size="16" font-weight="700" fill="#10B981">行</text>
|
|
|
- <circle cx="65" cy="120" r="22" fill="#0EA5E9" opacity="0.12"/>
|
|
|
- <text x="65" y="126" text-anchor="middle" font-size="16" font-weight="700" fill="#0EA5E9">富</text>
|
|
|
- <!-- 相生 连接线 -->
|
|
|
- <path d="M140 82 Q 180 100 215 120" stroke="#5D4037" stroke-width="1.5" fill="none" opacity="0.2"/>
|
|
|
- <path d="M215 142 Q 210 180 186 210" stroke="#EF4444" stroke-width="1.5" fill="none" opacity="0.2"/>
|
|
|
- <path d="M186 188 Q 140 200 94 210" stroke="#C0A060" stroke-width="1.5" fill="none" opacity="0.2"/>
|
|
|
- <path d="M94 188 Q 70 160 65 120" stroke="#10B981" stroke-width="1.5" fill="none" opacity="0.2"/>
|
|
|
- <path d="M65 98 Q 85 72 140 82" stroke="#0EA5E9" stroke-width="1.5" fill="none" opacity="0.2"/>
|
|
|
- <text x="140" y="150" text-anchor="middle" font-size="26" font-weight="800" fill="#4A9BD7" opacity="0.15">家</text>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
+ <!-- ==================== 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>
|
|
|
- <div class="scroll-indicator">
|
|
|
- <span>向下探索</span>
|
|
|
- <div class="scroll-arrow"></div>
|
|
|
+
|
|
|
+ <!-- ===== Desktop Layout ===== -->
|
|
|
+ <div class="kb-desktop" id="kbDesktop">
|
|
|
+ <!-- Cards injected by JS -->
|
|
|
</div>
|
|
|
- </section>
|
|
|
|
|
|
- <!-- ==================== 内修 · 身·心·智 ==================== -->
|
|
|
- <section class="section section-knowledge" id="inner">
|
|
|
- <div class="container">
|
|
|
- <div class="k-section-header" style="--k-color:#8D6E63">
|
|
|
- <div class="k-section-icon">
|
|
|
- <!-- 修身、心、智 · 一人三辉 SVG -->
|
|
|
- <svg viewBox="0 0 120 240" width="90" height="180" xmlns="http://www.w3.org/2000/svg">
|
|
|
- <!-- 底座光晕 -->
|
|
|
- <ellipse cx="60" cy="228" rx="36" ry="5" fill="#8D6E63" opacity="0.12"/>
|
|
|
- <!-- 双腿（身·棕色） -->
|
|
|
- <path d="M52 156 L 42 225" stroke="#8D6E63" stroke-width="9" stroke-linecap="round" fill="none"/>
|
|
|
- <path d="M68 156 L 78 225" stroke="#8D6E63" stroke-width="9" stroke-linecap="round" fill="none"/>
|
|
|
- <!-- 躯干（心·红色） -->
|
|
|
- <path d="M48 82 Q 40 118 48 160 Q 60 172 72 160 Q 80 118 72 82" fill="#EF4444" opacity="0.25" stroke="#EF4444" stroke-width="2.5"/>
|
|
|
- <!-- 内圈心 -->
|
|
|
- <path d="M54 105 C 42 92 42 78 54 78 C 62 78 60 90 60 95 C 60 90 58 78 66 78 C 78 78 78 92 66 105 Z" fill="#EF4444" opacity="0.45"/>
|
|
|
- <!-- 左臂 -->
|
|
|
- <path d="M48 88 Q 28 100 22 120" stroke="#EF4444" stroke-width="7" stroke-linecap="round" fill="none" opacity="0.3"/>
|
|
|
- <!-- 右臂 -->
|
|
|
- <path d="M72 88 Q 92 100 98 120" stroke="#EF4444" stroke-width="7" stroke-linecap="round" fill="none" opacity="0.3"/>
|
|
|
- <!-- 头部（智·金色） -->
|
|
|
- <circle cx="60" cy="52" r="28" fill="#C0A060" opacity="0.2" stroke="#C0A060" stroke-width="2.5"/>
|
|
|
- <!-- 头部光芒 -->
|
|
|
- <g stroke="#C0A060" stroke-width="2" stroke-linecap="round" opacity="0.3">
|
|
|
- <line x1="60" y1="14" x2="60" y2="20"/>
|
|
|
- <line x1="42" y1="22" x2="46" y2="27"/>
|
|
|
- <line x1="78" y1="22" x2="74" y2="27"/>
|
|
|
- <line x1="32" y1="44" x2="24" y2="44"/>
|
|
|
- <line x1="88" y1="44" x2="96" y2="44"/>
|
|
|
- </g>
|
|
|
- <!-- 五角星（智慧） -->
|
|
|
- <polygon points="60,34 63,43 72,43 65,48 67,57 60,52 53,57 55,48 48,43 57,43" fill="#C0A060" opacity="0.5"/>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
- <div class="k-section-text">
|
|
|
- <span class="k-section-tag" style="background:rgba(141,110,99,0.12);color:#8D6E63">内修</span>
|
|
|
- <h2 class="k-section-title">身 · 心 · 智</h2>
|
|
|
- <p class="k-section-desc">
|
|
|
- 一个人最内核的力量来自<strong>身体</strong>的健康根基、<strong>内心</strong>的情绪滋养
|
|
|
- 与<strong>智慧</strong>的持续成长。三者互为支撑，构成完整人格的基石。
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- ===== Mobile Layout ===== -->
|
|
|
+ <div class="kb-mobile" id="kbMobile">
|
|
|
+ <div class="kb-tabs" id="kbTabs"></div>
|
|
|
+ <div class="kb-articles" id="kbArticles"></div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 身 articles -->
|
|
|
- <div class="k-dim-section" style="--k-color:#5D4037;--k-bg:#F5EFEB">
|
|
|
- <div class="k-dim-header">
|
|
|
- <span class="k-dim-dot" style="background:#5D4037"></span>
|
|
|
- <h3 class="k-dim-name">身</h3>
|
|
|
- <span class="k-dim-sub">根基永固 · 主动健康</span>
|
|
|
- </div>
|
|
|
- <div class="k-article-grid">
|
|
|
- <a href="geo-faq-1-allergy.html" class="k-article-card">
|
|
|
- <div class="k-article-icon">🌿</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>孩子过敏反复不好，根源可能在肠道</h4>
|
|
|
- <p>从肠道菌群-免疫-过敏三角关系出发，解析儿童过敏的深层原因与科学调理方案。</p>
|
|
|
- </div>
|
|
|
- <span class="k-article-arrow">→</span>
|
|
|
- </a>
|
|
|
- <a href="geo-faq-3-immunity.html" class="k-article-card">
|
|
|
- <div class="k-article-icon">🛡️</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>儿童免疫力提升3大关键步骤</h4>
|
|
|
- <p>从肠道微生态、营养支持与睡眠节律三个维度，系统提升孩子的自护力。</p>
|
|
|
- </div>
|
|
|
- <span class="k-article-arrow">→</span>
|
|
|
- </a>
|
|
|
- <a href="plastic-health.html" class="k-article-card">
|
|
|
- <div class="k-article-icon">🌊</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>微塑料对家庭健康的隐形危害</h4>
|
|
|
- <p>揭秘微塑料如何影响肠道菌群与激素系统，以及家庭可操作的防护策略。</p>
|
|
|
- </div>
|
|
|
- <span class="k-article-arrow">→</span>
|
|
|
- </a>
|
|
|
- <a class="k-article-card k-article-card--coming">
|
|
|
- <div class="k-article-icon">🍎</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>精准营养：每个家庭的健康基石</h4>
|
|
|
- <p>基于个体代谢特征与肠道菌群数据，定制真正适合家人的膳食方案。</p>
|
|
|
- <span class="k-coming-badge">即将上线</span>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- Footer -->
|
|
|
+ <div class="kb-footer">
|
|
|
+ <a href="index.html">返回首页</a> · © 2026 亿图腾（北京）科技有限公司
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 心 articles -->
|
|
|
- <div class="k-dim-section" style="--k-color:#EF4444;--k-bg:#FEF2F2">
|
|
|
- <div class="k-dim-header">
|
|
|
- <span class="k-dim-dot" style="background:#EF4444"></span>
|
|
|
- <h3 class="k-dim-name">心</h3>
|
|
|
- <span class="k-dim-sub">大爱相随 · 情感滋养</span>
|
|
|
- </div>
|
|
|
- <div class="k-article-grid">
|
|
|
- <a class="k-article-card k-article-card--coming">
|
|
|
- <div class="k-article-icon">💛</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>亲子沟通：如何听懂孩子的心</h4>
|
|
|
- <p>从共情力到非暴力沟通，帮助家长走进孩子的内心世界。</p>
|
|
|
- <span class="k-coming-badge">即将上线</span>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- <a class="k-article-card k-article-card--coming">
|
|
|
- <div class="k-article-icon">🕊️</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>儿童情绪管理：从认知到调节</h4>
|
|
|
- <p>理解各年龄段情绪发展规律，掌握实用的情绪疏导方法。</p>
|
|
|
- <span class="k-coming-badge">即将上线</span>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </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:'大爱相随 · 情感滋养' }
|
|
|
+ ];
|
|
|
|
|
|
- <!-- 智 articles -->
|
|
|
- <div class="k-dim-section" style="--k-color:#C0A060;--k-bg:#F9F4EC">
|
|
|
- <div class="k-dim-header">
|
|
|
- <span class="k-dim-dot" style="background:#C0A060"></span>
|
|
|
- <h3 class="k-dim-name">智</h3>
|
|
|
- <span class="k-dim-sub">赋能未来 · 智慧启迪</span>
|
|
|
- </div>
|
|
|
- <div class="k-article-grid">
|
|
|
- <a href="geo-faq-2-attention.html" class="k-article-card">
|
|
|
- <div class="k-article-icon">🧠</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>注意力不集中，先查肠道再谈训练</h4>
|
|
|
- <p>肠道菌群通过肠-脑轴影响注意力与认知功能，科学认知从根源入手。</p>
|
|
|
- </div>
|
|
|
- <span class="k-article-arrow">→</span>
|
|
|
- </a>
|
|
|
- <a class="k-article-card k-article-card--coming">
|
|
|
- <div class="k-article-icon">📖</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>成长型思维：帮助孩子拥抱挑战</h4>
|
|
|
- <p>从心理学研究出发，培养孩子面对困难时不放弃的核心信念。</p>
|
|
|
- <span class="k-coming-badge">即将上线</span>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
+ 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 }
|
|
|
+ ]
|
|
|
+ };
|
|
|
|
|
|
- <!-- ==================== 外达 · 行·富 ==================== -->
|
|
|
- <section class="section section-knowledge section-knowledge-alt" id="outer">
|
|
|
- <div class="container">
|
|
|
- <div class="k-section-header" style="--k-color:#10B981">
|
|
|
- <div class="k-section-icon">
|
|
|
- <!-- 行、富 · 多人共舞 SVG -->
|
|
|
- <svg viewBox="0 0 180 200" width="135" height="150" xmlns="http://www.w3.org/2000/svg">
|
|
|
- <!-- 底座 -->
|
|
|
- <ellipse cx="90" cy="190" rx="80" ry="6" fill="#10B981" opacity="0.08"/>
|
|
|
- <!-- 左侧人物（行·绿色） -->
|
|
|
- <g>
|
|
|
- <circle cx="45" cy="36" r="18" fill="#10B981" opacity="0.2" stroke="#10B981" stroke-width="2"/>
|
|
|
- <path d="M36 52 Q 32 70 36 98 Q 45 106 54 98 Q 58 70 54 52" fill="#10B981" opacity="0.2" stroke="#10B981" stroke-width="2.2"/>
|
|
|
- <path d="M36 78 L 16 96" stroke="#10B981" stroke-width="5" stroke-linecap="round" opacity="0.3"/>
|
|
|
- <path d="M54 78 L 74 96" stroke="#10B981" stroke-width="5" stroke-linecap="round" opacity="0.3"/>
|
|
|
- <path d="M40 100 L 28 185" stroke="#10B981" stroke-width="7" stroke-linecap="round" fill="none"/>
|
|
|
- <path d="M50 100 L 62 185" stroke="#10B981" stroke-width="7" stroke-linecap="round" fill="none"/>
|
|
|
- </g>
|
|
|
- <!-- 中间人物（行·绿色，稍小） -->
|
|
|
- <g>
|
|
|
- <circle cx="90" cy="40" r="16" fill="#10B981" opacity="0.15" stroke="#10B981" stroke-width="1.8"/>
|
|
|
- <path d="M82 54 Q 78 70 82 94 Q 90 100 98 94 Q 102 70 98 54" fill="#10B981" opacity="0.15" stroke="#10B981" stroke-width="1.8"/>
|
|
|
- <path d="M82 68 L 66 88" stroke="#10B981" stroke-width="4" stroke-linecap="round" opacity="0.25"/>
|
|
|
- <path d="M98 68 L 114 88" stroke="#10B981" stroke-width="4" stroke-linecap="round" opacity="0.25"/>
|
|
|
- <path d="M84 95 L 78 185" stroke="#10B981" stroke-width="6" stroke-linecap="round" fill="none"/>
|
|
|
- <path d="M96 95 L 102 185" stroke="#10B981" stroke-width="6" stroke-linecap="round" fill="none"/>
|
|
|
- </g>
|
|
|
- <!-- 右侧人物（富·蓝色） -->
|
|
|
- <g>
|
|
|
- <circle cx="138" cy="36" r="18" fill="#0EA5E9" opacity="0.2" stroke="#0EA5E9" stroke-width="2"/>
|
|
|
- <path d="M128 54 Q 124 70 128 100 Q 138 108 148 100 Q 152 70 148 54" fill="#0EA5E9" opacity="0.2" stroke="#0EA5E9" stroke-width="2.2"/>
|
|
|
- <!-- 高举右臂（代表创富/向上） -->
|
|
|
- <path d="M148 70 L 164 44" stroke="#0EA5E9" stroke-width="5" stroke-linecap="round" opacity="0.35"/>
|
|
|
- <path d="M128 74 L 108 90" stroke="#0EA5E9" stroke-width="5" stroke-linecap="round" opacity="0.3"/>
|
|
|
- <path d="M132 102 L 124 185" stroke="#0EA5E9" stroke-width="7" stroke-linecap="round" fill="none"/>
|
|
|
- <path d="M144 102 L 152 185" stroke="#0EA5E9" stroke-width="7" stroke-linecap="round" fill="none"/>
|
|
|
- <!-- 财富符号（右上） -->
|
|
|
- <circle cx="170" cy="38" r="10" fill="#0EA5E9" opacity="0.12" stroke="#0EA5E9" stroke-width="1.5"/>
|
|
|
- <text x="170" y="42" text-anchor="middle" font-size="12" font-weight="700" fill="#0EA5E9">¥</text>
|
|
|
- </g>
|
|
|
- <!-- 牵手连接线 -->
|
|
|
- <path d="M55 80 Q 72 74 82 78" stroke="#10B981" stroke-width="2" fill="none" opacity="0.3" stroke-dasharray="4,3"/>
|
|
|
- <path d="M98 78 Q 116 74 128 74" stroke="#0EA5E9" stroke-width="2" fill="none" opacity="0.3" stroke-dasharray="4,3"/>
|
|
|
- <!-- 标注文字 -->
|
|
|
- <text x="45" y="16" text-anchor="middle" font-size="10" font-weight="700" fill="#10B981" opacity="0.6">行</text>
|
|
|
- <text x="138" y="16" text-anchor="middle" font-size="10" font-weight="700" fill="#0EA5E9" opacity="0.6">富</text>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
- <div class="k-section-text">
|
|
|
- <span class="k-section-tag" style="background:rgba(16,185,129,0.12);color:#10B981">外达</span>
|
|
|
- <h2 class="k-section-title">行 · 富</h2>
|
|
|
- <p class="k-section-desc">
|
|
|
- 一个人与外界的连接体现在<strong>行为</strong>的和谐与<strong>财富</strong>的创造。
|
|
|
- 人际关系滋养生命，价值创造赋予意义，二者让家庭的能量向外流动、生生不息。
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ /* ===== 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;
|
|
|
+ })();
|
|
|
|
|
|
- <!-- 行 articles -->
|
|
|
- <div class="k-dim-section" style="--k-color:#10B981;--k-bg:#ECFDF5">
|
|
|
- <div class="k-dim-header">
|
|
|
- <span class="k-dim-dot" style="background:#10B981"></span>
|
|
|
- <h3 class="k-dim-name">行</h3>
|
|
|
- <span class="k-dim-sub">人际和谐 · 知行合一</span>
|
|
|
- </div>
|
|
|
- <div class="k-article-grid">
|
|
|
- <a class="k-article-card k-article-card--coming">
|
|
|
- <div class="k-article-icon">🤝</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>如何培养孩子的社交能力</h4>
|
|
|
- <p>从家庭互动到同伴交往，帮助孩子建立积极健康的人际关系模式。</p>
|
|
|
- <span class="k-coming-badge">即将上线</span>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- <a class="k-article-card k-article-card--coming">
|
|
|
- <div class="k-article-icon">🏕️</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>亲子户外活动：在自然中成长</h4>
|
|
|
- <p>走出室内，用大自然的力量滋养孩子的身体与心灵。</p>
|
|
|
- <span class="k-coming-badge">即将上线</span>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ /* ===== Build Mobile Tabs ===== */
|
|
|
+ var activeDim = 'body';
|
|
|
|
|
|
- <!-- 富 articles -->
|
|
|
- <div class="k-dim-section" style="--k-color:#0EA5E9;--k-bg:#ECFEFF">
|
|
|
- <div class="k-dim-header">
|
|
|
- <span class="k-dim-dot" style="background:#0EA5E9"></span>
|
|
|
- <h3 class="k-dim-name">富</h3>
|
|
|
- <span class="k-dim-sub">利他创富 · 价值创造</span>
|
|
|
- </div>
|
|
|
- <div class="k-article-grid">
|
|
|
- <a class="k-article-card k-article-card--coming">
|
|
|
- <div class="k-article-icon">💡</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>从小培养孩子的财商思维</h4>
|
|
|
- <p>零花钱管理、目标储蓄与价值交换，让财商教育融入日常生活。</p>
|
|
|
- <span class="k-coming-badge">即将上线</span>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- <a class="k-article-card k-article-card--coming">
|
|
|
- <div class="k-article-icon">🌱</div>
|
|
|
- <div class="k-article-info">
|
|
|
- <h4>家庭创客生态：利他中的财富</h4>
|
|
|
- <p>在利他分享中创造价值，探索适合家庭的第二收入曲线。</p>
|
|
|
- <span class="k-coming-badge">即将上线</span>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ 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;
|
|
|
+ }
|
|
|
|
|
|
- <div class="k-footer-cta">
|
|
|
- <p>微信搜索「<strong>浠艾福</strong>」小程序，获取更多专业成长知识</p>
|
|
|
- <a href="index.html" class="btn btn-outline">返回首页</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
+ 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;
|
|
|
+ }
|
|
|
|
|
|
- <!-- ==================== Footer ==================== -->
|
|
|
- <footer class="site-footer">
|
|
|
- <div class="container">
|
|
|
- <div class="footer-inner">
|
|
|
- <div class="footer-brand">
|
|
|
- <img src="logo.png" alt="浠艾福" class="footer-logo-img" width="48" height="48">
|
|
|
- <span class="logo-text">浠艾福</span>
|
|
|
- <span class="logo-tag">主动健康</span>
|
|
|
- <p>以 AI 科技赋能每个家庭，让健康与幸福触手可及。</p>
|
|
|
- </div>
|
|
|
- <div class="footer-links">
|
|
|
- <div class="footer-col">
|
|
|
- <h4>导航</h4>
|
|
|
- <ul>
|
|
|
- <li><a href="index.html">首页</a></li>
|
|
|
- <li><a href="knowledge.html">成长百科</a></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="footer-col">
|
|
|
- <h4>联系方式</h4>
|
|
|
- <ul class="footer-contact">
|
|
|
- <li><a href="tel:010-58733188">010-58733188</a></li>
|
|
|
- <li><a href="mailto:contact@etotem.com.cn">contact@etotem.com.cn</a></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="footer-bottom">
|
|
|
- <p>© 2026 亿图腾（北京）科技有限公司. All rights reserved.</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </footer>
|
|
|
+ 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>
|
