瀏覽代碼

web: 全站统一 footer 为共享组件 js/footer.js,移除各页面自定义 footer CSS

asus 1 月之前
父節點
當前提交
fb3b62d38a

+ 4 - 42
web/cancer.html

@@ -430,17 +430,7 @@
   .btn-outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.38); }
   .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }
 
-  /* FOOTER */
-  footer { background: #1a1a2e; color: rgba(255,255,255,0.55); padding: 3rem 1.5rem 1.8rem; font-size: 0.85rem; }
-  .footer-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 1.8rem; }
-  @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; } }
-  .footer-brand { font-size: 1rem; font-weight: 700; color: white; margin-bottom: 0.65rem; }
-  .footer-col h4 { color: white; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; }
-  .footer-col ul { list-style: none; padding: 0; }
-  .footer-col li { margin-bottom: 0.38rem; }
-  footer a { color: rgba(255,255,255,0.65); text-decoration: none; }
-  footer a:hover { color: white; }
-  .footer-bottom { max-width: var(--max-width); margin: 0 auto; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
+  /* Footer styles replaced by shared js/footer.js */
 
   /* CITATIONS */
   .citations { background: #f8f8f8; border-top: 2px solid var(--accent); padding: 3rem 0; }
@@ -1109,37 +1099,9 @@
   </div>
 </section>
 
-<!-- FOOTER -->
-<footer>
-  <div class="footer-inner">
-    <div>
-      <div class="footer-brand">🧬 浠艾福 · 主动健康学院</div>
-      <p>备案号:京ICP备14061870号-5 | 浠艾福(Care Family)出品</p>
-      <p style="margin-top:0.5rem;font-size:0.8rem;">本文内容仅供健康教育参考,不构成诊疗建议。具体诊疗请咨询专业医师。</p>
-    </div>
-    <div class="footer-col">
-      <h4>快速导航</h4>
-      <ul>
-        <li><a href="#symptoms">症状识别</a></li>
-        <li><a href="#disease">疾病定义</a></li>
-        <li><a href="#causes">发病原因</a></li>
-        <li><a href="#proactive">主动健康五步</a></li>
-      </ul>
-    </div>
-    <div class="footer-col">
-      <h4>相关阅读</h4>
-      <ul>
-        <li><a href="cardio-cerebro.html">心脑血管疾病预防</a></li>
-        <li><a href="index.html">返回首页</a></li>
-        <li><a href="https://www.etotem.com.cn" target="_blank">企业官网</a></li>
-      </ul>
-    </div>
-  </div>
-  <div class="footer-bottom">
-    <span>© 2024 浠艾福(Care Family). 京ICP备14061870号-5.</span>
-    <span>科学循证 · 主动健康</span>
-  </div>
-</footer>
+<!-- Footer (shared) -->
+<div id="footer-placeholder"></div>
+<script src="js/footer.js"></script>
 
 <!-- ══════════════════════════════════════════
      参考文献

+ 4 - 42
web/cardio-cerebro.html

@@ -430,17 +430,7 @@
   .btn-outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.38); }
   .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }
 
-  /* FOOTER */
-  footer { background: #1a1a2e; color: rgba(255,255,255,0.55); padding: 3rem 1.5rem 1.8rem; font-size: 0.85rem; }
-  .footer-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 1.8rem; }
-  @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; } }
-  .footer-brand { font-size: 1rem; font-weight: 700; color: white; margin-bottom: 0.65rem; }
-  .footer-col h4 { color: white; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; }
-  .footer-col ul { list-style: none; padding: 0; }
-  .footer-col li { margin-bottom: 0.38rem; }
-  footer a { color: rgba(255,255,255,0.65); text-decoration: none; }
-  footer a:hover { color: white; }
-  .footer-bottom { max-width: var(--max-width); margin: 0 auto; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
+  /* Footer styles replaced by shared js/footer.js */
 
   /* CITATIONS */
   .citations { background: #f8f8f8; border-top: 2px solid var(--accent); padding: 3rem 0; }
@@ -1023,37 +1013,9 @@
   </div>
 </section>
 
-<!-- FOOTER -->
-<footer>
-  <div class="footer-inner">
-    <div>
-      <div class="footer-brand">❤️ 浠艾福 · 主动健康学院</div>
-      <p>备案号:京ICP备14061870号-5 | 浠艾福(Care Family)出品</p>
-      <p style="margin-top:0.5rem;font-size:0.8rem;">本文内容仅供健康教育参考,不构成诊疗建议。具体诊疗请咨询专业医师。</p>
-    </div>
-    <div class="footer-col">
-      <h4>快速导航</h4>
-      <ul>
-        <li><a href="#symptoms">症状识别</a></li>
-        <li><a href="#disease">疾病定义</a></li>
-        <li><a href="#causes">发病原因</a></li>
-        <li><a href="#proactive">主动健康五步</a></li>
-      </ul>
-    </div>
-    <div class="footer-col">
-      <h4>相关阅读</h4>
-      <ul>
-        <li><a href="uric-acid.html">高尿酸的成因与预防</a></li>
-        <li><a href="index.html">返回首页</a></li>
-        <li><a href="https://www.etotem.com.cn" target="_blank">企业官网</a></li>
-      </ul>
-    </div>
-  </div>
-  <div class="footer-bottom">
-    <span>© 2024 浠艾福(Care Family). 京ICP备14061870号-5.</span>
-    <span>科学循证 · 主动健康</span>
-  </div>
-</footer>
+<!-- Footer (shared) -->
+<div id="footer-placeholder"></div>
+<script src="js/footer.js"></script>
 
 <!-- ══════════════════════════════════════════
      参考文献

+ 4 - 42
web/diabetes.html

@@ -430,17 +430,7 @@
   .btn-outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.38); }
   .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }
 
-  /* FOOTER */
-  footer { background: #1a1a2e; color: rgba(255,255,255,0.55); padding: 3rem 1.5rem 1.8rem; font-size: 0.85rem; }
-  .footer-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 1.8rem; }
-  @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; } }
-  .footer-brand { font-size: 1rem; font-weight: 700; color: white; margin-bottom: 0.65rem; }
-  .footer-col h4 { color: white; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; }
-  .footer-col ul { list-style: none; padding: 0; }
-  .footer-col li { margin-bottom: 0.38rem; }
-  footer a { color: rgba(255,255,255,0.65); text-decoration: none; }
-  footer a:hover { color: white; }
-  .footer-bottom { max-width: var(--max-width); margin: 0 auto; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
+  /* Footer styles replaced by shared js/footer.js */
 
   /* CITATIONS */
   .citations { background: #f8f8f8; border-top: 2px solid var(--accent); padding: 3rem 0; }
@@ -1078,37 +1068,9 @@
   </div>
 </section>
 
-<!-- FOOTER -->
-<footer>
-  <div class="footer-inner">
-    <div>
-      <div class="footer-brand">🩺 浠艾福 · 主动健康学院</div>
-      <p>备案号:京ICP备14061870号-5 | 浠艾福(Care Family)出品</p>
-      <p style="margin-top:0.5rem;font-size:0.8rem;">本文内容仅供健康教育参考,不构成诊疗建议。具体诊疗请咨询专业医师。</p>
-    </div>
-    <div class="footer-col">
-      <h4>快速导航</h4>
-      <ul>
-        <li><a href="#symptoms">症状识别</a></li>
-        <li><a href="#disease">疾病定义</a></li>
-        <li><a href="#causes">发病原因</a></li>
-        <li><a href="#proactive">主动健康五步</a></li>
-      </ul>
-    </div>
-    <div class="footer-col">
-      <h4>相关阅读</h4>
-      <ul>
-        <li><a href="cardio-cerebro.html">心脑血管疾病</a></li>
-        <li><a href="uric-acid.html">高尿酸的成因与预防</a></li>
-        <li><a href="index.html">返回首页</a></li>
-      </ul>
-    </div>
-  </div>
-  <div class="footer-bottom">
-    <span>© 2024 浠艾福(Care Family). 京ICP备14061870号-5.</span>
-    <span>科学循证 · 主动健康</span>
-  </div>
-</footer>
+<!-- Footer (shared) -->
+<div id="footer-placeholder"></div>
+<script src="js/footer.js"></script>
 <!-- ══════════════════════════════════════════
      参考文献
 ═══════════════════════════════════════════ -->

+ 4 - 58
web/geo-faq-1-allergy.html

@@ -246,7 +246,7 @@
       <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>
+        <span class="logo-tag">主动健康</span>
       </a>
       <button class="nav-toggle" id="navToggle" aria-label="切换导航">
         <span></span><span></span><span></span>
@@ -428,63 +428,9 @@
 
   </article>
 
-  <!-- ==================== 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#product">浠艾福平台</a></li>
-              <li><a href="index.html#dimensions">五维幸福</a></li>
-              <li><a href="index.html#features">核心功能</a></li>
-              <li><a href="index.html#ai-tech">AI 技术</a></li>
-            </ul>
-          </div>
-          <div class="footer-col">
-            <h4>关于</h4>
-            <ul>
-              <li><a href="index.html#about">公司介绍</a></li>
-              <li><a href="index.html#roles">平台角色</a></li>
-              <li><a href="index.html#contact">联系方式</a></li>
-            </ul>
-          </div>
-          <div class="footer-col">
-            <h4>成长百科</h4>
-            <ul>
-              <li><a href="knowledge.html">百科主页</a></li>
-              <li><a href="geo-faq-1-allergy.html">过敏与肠道菌群</a></li>
-              <li><a href="geo-faq-2-attention.html">注意力与肠道</a></li>
-              <li><a href="geo-faq-3-immunity.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>
-              <li>北京市海淀区</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div class="footer-bottom">
-        <p>&copy; 2026 浠艾福主动健康学院. All rights reserved.</p>
-        <p class="footer-legal">
-          <a href="#">隐私政策</a>
-          <a href="#">用户协议</a>
-          <span>京ICP备14061870号-5</span>
-        </p>
-      </div>
-    </div>
-  </footer>
+  <!-- Footer (shared) -->
+  <div id="footer-placeholder"></div>
+  <script src="js/footer.js"></script>
 
   <script>
     // Mobile nav toggle

+ 4 - 58
web/geo-faq-2-attention.html

@@ -257,7 +257,7 @@
       <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>
+        <span class="logo-tag">主动健康</span>
       </a>
       <button class="nav-toggle" id="navToggle" aria-label="切换导航">
         <span></span><span></span><span></span>
@@ -459,63 +459,9 @@
 
   </article>
 
-  <!-- ==================== 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#product">浠艾福平台</a></li>
-              <li><a href="index.html#dimensions">五维幸福</a></li>
-              <li><a href="index.html#features">核心功能</a></li>
-              <li><a href="index.html#ai-tech">AI 技术</a></li>
-            </ul>
-          </div>
-          <div class="footer-col">
-            <h4>关于</h4>
-            <ul>
-              <li><a href="index.html#about">公司介绍</a></li>
-              <li><a href="index.html#roles">平台角色</a></li>
-              <li><a href="index.html#contact">联系方式</a></li>
-            </ul>
-          </div>
-          <div class="footer-col">
-            <h4>成长百科</h4>
-            <ul>
-              <li><a href="knowledge.html">百科主页</a></li>
-              <li><a href="geo-faq-1-allergy.html">过敏与肠道菌群</a></li>
-              <li><a href="geo-faq-2-attention.html">注意力与肠道</a></li>
-              <li><a href="geo-faq-3-immunity.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>
-              <li>北京市海淀区</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div class="footer-bottom">
-        <p>&copy; 2026 浠艾福主动健康学院. All rights reserved.</p>
-        <p class="footer-legal">
-          <a href="#">隐私政策</a>
-          <a href="#">用户协议</a>
-          <span>京ICP备14061870号-5</span>
-        </p>
-      </div>
-    </div>
-  </footer>
+  <!-- Footer (shared) -->
+  <div id="footer-placeholder"></div>
+  <script src="js/footer.js"></script>
 
   <script>
     document.getElementById('navToggle').addEventListener('click', function() {

+ 4 - 58
web/geo-faq-3-immunity.html

@@ -257,7 +257,7 @@
       <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>
+        <span class="logo-tag">主动健康</span>
       </a>
       <button class="nav-toggle" id="navToggle" aria-label="切换导航">
         <span></span><span></span><span></span>
@@ -475,63 +475,9 @@
 
   </article>
 
-  <!-- ==================== 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#product">浠艾福平台</a></li>
-              <li><a href="index.html#dimensions">五维幸福</a></li>
-              <li><a href="index.html#features">核心功能</a></li>
-              <li><a href="index.html#ai-tech">AI 技术</a></li>
-            </ul>
-          </div>
-          <div class="footer-col">
-            <h4>关于</h4>
-            <ul>
-              <li><a href="index.html#about">公司介绍</a></li>
-              <li><a href="index.html#roles">平台角色</a></li>
-              <li><a href="index.html#contact">联系方式</a></li>
-            </ul>
-          </div>
-          <div class="footer-col">
-            <h4>成长百科</h4>
-            <ul>
-              <li><a href="knowledge.html">百科主页</a></li>
-              <li><a href="geo-faq-1-allergy.html">过敏与肠道菌群</a></li>
-              <li><a href="geo-faq-2-attention.html">注意力与肠道</a></li>
-              <li><a href="geo-faq-3-immunity.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>
-              <li>北京市海淀区</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div class="footer-bottom">
-        <p>&copy; 2026 浠艾福主动健康学院. All rights reserved.</p>
-        <p class="footer-legal">
-          <a href="#">隐私政策</a>
-          <a href="#">用户协议</a>
-          <span>京ICP备14061870号-5</span>
-        </p>
-      </div>
-    </div>
-  </footer>
+  <!-- Footer (shared) -->
+  <div id="footer-placeholder"></div>
+  <script src="js/footer.js"></script>
 
   <script>
     document.getElementById('navToggle').addEventListener('click', function() {

+ 3 - 64
web/index.html

@@ -1450,70 +1450,9 @@
     </div>
   </section>
 
-  <!-- ==================== 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 style="white-space:nowrap">以 AI 科技赋能每个家庭,让健康与幸福触手可及。</p>
-        </div>
-        <div class="footer-links">
-          <div class="footer-col">
-            <h4>产品</h4>
-            <ul>
-              <li><a href="#product">浠艾福平台</a></li>
-              <li><a href="#dimensions">五维幸福</a></li>
-              <li><a href="#features">核心功能</a></li>
-              <li><a href="#ai-tech">AI 技术</a></li>
-            </ul>
-          </div>
-          <div class="footer-col">
-            <h4>关于</h4>
-            <ul>
-              <li><a href="#about">公司介绍</a></li>
-              <li><a href="#roles">平台角色</a></li>
-              <li><a href="#contact">联系方式</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>
-              <li>北京市海淀区</li>
-            </ul>
-          </div>
-          <div class="footer-col">
-            <h4>成长百科</h4>
-            <ul>
-              <li><a href="geo-faq-1-allergy.html">过敏与肠道菌群</a></li>
-              <li><a href="geo-faq-2-attention.html">注意力与肠道</a></li>
-              <li><a href="geo-faq-3-immunity.html">免疫力提升方案</a></li>
-              <li><a href="plastic-health.html">微塑料与健康</a></li>
-              <li><a href="uric-acid.html">尿酸高的成因与调节</a></li>
-            </ul>
-          </div>
-          <div class="footer-col">
-            <h4>友情链接</h4>
-            <ul>
-              <li><a href="https://www.psychdream.org.cn/" target="_blank" rel="noopener noreferrer">双培强基工程</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div class="footer-bottom">
-        <p>&copy; 2026 浠艾福主动健康学院. All rights reserved.</p>
-        <p class="footer-legal">
-          <a href="#">隐私政策</a>
-          <a href="#">用户协议</a>
-          <span>京ICP备14061870号-5</span>
-        </p>
-      </div>
-    </div>
-  </footer>
+  <!-- Footer (shared) -->
+  <div id="footer-placeholder"></div>
+  <script src="js/footer.js"></script>
 
   <!-- ==================== Floating CTA ==================== -->
   <div class="float-cta" id="floatCta">

+ 72 - 0
web/js/footer.js

@@ -0,0 +1,72 @@
+/**
+ * Shared site footer - injected into #footer-placeholder on every page.
+ * Update this ONE file to change the footer across all pages.
+ */
+(function() {
+  var placeholder = document.getElementById('footer-placeholder');
+  if (!placeholder) return;
+  placeholder.innerHTML =
+    '<footer class="site-footer">' +
+    '  <div class="container">' +
+    '    <div class="footer-inner">' +
+    '      <div class="footer-brand">' +
+    '        <img src="logo.png" alt="\u6D50\u8272\u798F" class="footer-logo-img" width="48" height="48">' +
+    '        <span class="logo-text">\u6D50\u8272\u798F</span>' +
+    '        <span class="logo-tag">\u4E3B\u52A8\u5065\u5EB7</span>' +
+    '        <p>\u4EE5 AI \u79D1\u6280\u8D4B\u80FD\u6BCF\u4E2A\u5BB6\u5EAD\uFF0C\u8BA9\u5065\u5EB7\u4E0E\u5E78\u798F\u89E6\u624B\u53EF\u53CA\u3002</p>' +
+    '      </div>' +
+    '      <div class="footer-links">' +
+    '        <div class="footer-col">' +
+    '          <h4>\u4EA7\u54C1</h4>' +
+    '          <ul>' +
+    '            <li><a href="index.html#product">\u6D50\u8272\u798F\u5E73\u53F0</a></li>' +
+    '            <li><a href="index.html#dimensions">\u4E94\u7EF4\u5E78\u798F</a></li>' +
+    '            <li><a href="index.html#features">\u6838\u5FC3\u529F\u80FD</a></li>' +
+    '            <li><a href="index.html#ai-tech">AI \u6280\u672F</a></li>' +
+    '          </ul>' +
+    '        </div>' +
+    '        <div class="footer-col">' +
+    '          <h4>\u5173\u4E8E</h4>' +
+    '          <ul>' +
+    '            <li><a href="index.html#about">\u516C\u53F8\u4ECB\u7ECD</a></li>' +
+    '            <li><a href="index.html#roles">\u5E73\u53F0\u89D2\u8272</a></li>' +
+    '            <li><a href="index.html#contact">\u8054\u7CFB\u65B9\u5F0F</a></li>' +
+    '          </ul>' +
+    '        </div>' +
+    '        <div class="footer-col">' +
+    '          <h4>\u8054\u7CFB\u65B9\u5F0F</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>' +
+    '            <li>\u5317\u4EAC\u5E02\u6D77\u6DC0\u533A</li>' +
+    '          </ul>' +
+    '        </div>' +
+    '        <div class="footer-col">' +
+    '          <h4>\u6210\u957F\u767E\u79D1</h4>' +
+    '          <ul>' +
+    '            <li><a href="geo-faq-1-allergy.html">\u8FC7\u654F\u4E0E\u80A0\u9053\u83CC\u7FA4</a></li>' +
+    '            <li><a href="geo-faq-2-attention.html">\u6CE8\u610F\u529B\u4E0E\u80A0\u9053</a></li>' +
+    '            <li><a href="geo-faq-3-immunity.html">\u514D\u75AB\u529B\u63D0\u5347\u65B9\u6848</a></li>' +
+    '            <li><a href="plastic-health.html">\u5FAE\u5851\u6599\u4E0E\u5065\u5EB7</a></li>' +
+    '            <li><a href="uric-acid.html">\u5C3F\u9178\u9AD8\u7684\u6210\u56E0\u4E0E\u8C03\u8282</a></li>' +
+    '          </ul>' +
+    '        </div>' +
+    '        <div class="footer-col">' +
+    '          <h4>\u53CB\u60C5\u94FE\u63A5</h4>' +
+    '          <ul>' +
+    '            <li><a href="https://www.psychdream.org.cn/" target="_blank" rel="noopener noreferrer">\u53CC\u57F9\u5F3A\u57FA\u5DE5\u7A0B</a></li>' +
+    '          </ul>' +
+    '        </div>' +
+    '      </div>' +
+    '    </div>' +
+    '    <div class="footer-bottom">' +
+    '      <p>&copy; 2026 \u6D50\u8272\u798F\u4E3B\u52A8\u5065\u5EB7\u7814\u7A76\u9662. All rights reserved.</p>' +
+    '      <p class="footer-legal">' +
+    '        <a href="#">\u9690\u79C1\u653F\u7B56</a>' +
+    '        <a href="#">\u7528\u6237\u534F\u8BAE</a>' +
+    '        <span>\u4EACICP\u590714061870\u53F7-5</span>' +
+    '      </p>' +
+    '    </div>' +
+    '  </div>' +
+    '</footer>';
+})();

+ 4 - 3
web/knowledge.html

@@ -135,11 +135,12 @@
       <div class="kb-articles" id="kbArticles"></div>
     </div>
 
-    <div class="kb-footer">
-      <a href="index.html">返回首页</a> &nbsp;·&nbsp; &copy; 2026 浠艾福主动健康研究院
-    </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' },

+ 1157 - 0
web/osteoporosis.html

@@ -0,0 +1,1157 @@
+<!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="骨质疏松科学循证科普——症状识别、疾病定义、发病原因与主动健康五步干预。含DXA诊断标准、维生素D钙镁锌、骨骼肌-骨轴、运动处方与跌倒预防。">
+<meta name="keywords" content="骨质疏松,脆性骨折,DXA骨密度,维生素D,钙,跌倒预防,骨骼健康,主动健康,骨代谢,肌少症">
+<meta property="og:title" content="骨质疏松的症状、病因与主动健康干预 — 科学循证">
+<meta property="og:description" content="中国骨质疏松患者6900万,脆性骨折致死率超30%。症状识别→骨骼病理→可控病因→主动健康五步:早识别、分层管控、营养运动干预、效果评估、持续优化。">
+<meta property="og:type" content="article">
+<title>骨质疏松 · 症-病-因与主动健康干预 · 浠艾福</title>
+<style>
+  :root {
+    --bg-card: #FFFFFF;
+    --bg-alt: #f0f8f5;
+    --text-primary: #1a2e2e;
+    --text-secondary: #4a5568;
+    --text-muted: #718096;
+    --accent: #2d6a4f;
+    --accent-light: #f0fff4;
+    --blue: #1a5276;
+    --blue-light: #eaf4fb;
+    --teal: #148f77;
+    --teal-light: #e6fffa;
+    --purple: #7d3c98;
+    --purple-light: #f5eef8;
+    --orange: #d35400;
+    --orange-light: #fff4e6;
+    --yellow: #b7791f;
+    --yellow-light: #fefce8;
+    --font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+    --max-width: 1080px;
+    --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
+    --shadow-hover: 0 8px 40px rgba(0,0,0,0.12);
+    --radius: 16px;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html { scroll-behavior: smooth; }
+  body {
+    font-family: var(--font);
+    font-size: 1rem;
+    line-height: 1.8;
+    color: var(--text-primary);
+    background: #fff;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .hero {
+    position: relative;
+    background: linear-gradient(135deg, #1a2e2e 0%, #2d4a4a 40%, #3d6b6b 100%);
+    color: white;
+    padding: 6rem 1.5rem 4rem;
+    overflow: hidden;
+    min-height: 58vh;
+    display: flex;
+    align-items: center;
+  }
+  .hero::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(circle at 20% 30%, rgba(45,106,79,0.2) 0%, transparent 50%),
+      radial-gradient(circle at 80% 70%, rgba(20,143,119,0.12) 0%, transparent 50%);
+  }
+  .hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
+  .particle {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.1);
+    animation: float 8s ease-in-out infinite;
+  }
+  .particle:nth-child(1) { width:5px;height:5px;left:10%;top:20%;animation-delay:0s; }
+  .particle:nth-child(2) { width:8px;height:8px;left:28%;top:65%;animation-delay:1s;opacity:0.08; }
+  .particle:nth-child(3) { width:4px;height:4px;left:45%;top:12%;animation-delay:2s; }
+  .particle:nth-child(4) { width:3px;height:3px;left:68%;top:72%;animation-delay:0.5s; }
+  .particle:nth-child(5) { width:6px;height:6px;left:82%;top:28%;animation-delay:3s;opacity:0.06; }
+  .particle:nth-child(6) { width:4px;height:4px;left:14%;top:88%;animation-delay:1.5s; }
+  .particle:nth-child(7) { width:7px;height:7px;left:52%;top:48%;animation-delay:2.5s;opacity:0.1; }
+  @keyframes float {
+    0%,100% { transform: translateY(0) scale(1); opacity: 0.1; }
+    50% { transform: translateY(-28px) scale(1.5); opacity: 0.22; }
+  }
+  .hero-content {
+    position: relative;
+    z-index: 1;
+    max-width: var(--max-width);
+    margin: 0 auto;
+    text-align: center;
+    width: 100%;
+  }
+  .hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2);
+    backdrop-filter: blur(8px);
+    padding: 0.4rem 1rem;
+    border-radius: 100px;
+    font-size: 0.85rem;
+    margin-bottom: 1.5rem;
+  }
+  .hero h1 {
+    font-size: clamp(1.8rem, 5vw, 3rem);
+    font-weight: 800;
+    margin-bottom: 1rem;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+  }
+  .hero h1 .accent { color: #40c057; }
+  .hero-sub {
+    font-size: clamp(1rem, 2vw, 1.15rem);
+    color: rgba(255,255,255,0.8);
+    max-width: 680px;
+    margin: 0 auto 2rem;
+    line-height: 1.7;
+  }
+  .hero-stats {
+    display: flex;
+    gap: 1.5rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+  }
+  .hero-stat {
+    background: rgba(255,255,255,0.08);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 12px;
+    padding: 1rem 1.5rem;
+    text-align: center;
+    min-width: 120px;
+  }
+  .hero-stat .num { font-size: 1.9rem; font-weight: 800; color: #40c057; display: block; }
+  .hero-stat .label { font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-top: 0.2rem; }
+  .scroll-hint {
+    position: absolute;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    color: rgba(255,255,255,0.45);
+    font-size: 0.78rem;
+    text-align: center;
+    animation: bounce 2s ease-in-out infinite;
+    cursor: pointer;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3rem;
+  }
+  @keyframes bounce {
+    0%,100% { transform: translateX(-50%) translateY(0); }
+    50% { transform: translateX(-50%) translateY(8px); }
+  }
+  .scroll-arrow {
+    width: 16px; height: 16px;
+    border-right: 2px solid rgba(255,255,255,0.4);
+    border-bottom: 2px solid rgba(255,255,255,0.4);
+    transform: rotate(45deg);
+  }
+
+  .nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(255,255,255,0.96);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(0,0,0,0.06);
+    padding: 0.75rem 1.5rem;
+  }
+  .nav-inner {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+  .nav-brand {
+    font-weight: 700;
+    font-size: 0.95rem;
+    color: var(--accent);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .nav-links {
+    display: flex;
+    gap: 0.3rem;
+    flex-wrap: wrap;
+    list-style: none;
+  }
+  .nav-links a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 0.85rem;
+    padding: 0.3rem 0.7rem;
+    border-radius: 8px;
+    transition: all 0.2s;
+  }
+  .nav-links a:hover { background: var(--accent-light); color: var(--accent); }
+  .nav-links a.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
+
+  .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
+  .section { padding: 4rem 0; border-bottom: 1px solid #eee; }
+  .section:last-of-type { border-bottom: none; }
+  .section-alt { background: var(--bg-alt); }
+  .section-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-bottom: 0.75rem;
+  }
+  .section-tag.purple { color: var(--purple); }
+  .section-tag.teal { color: var(--teal); }
+  .section-tag.blue { color: var(--blue); }
+  .section-tag.orange { color: var(--orange); }
+  .section-tag.yellow { color: var(--yellow); }
+  .section-title {
+    font-size: clamp(1.4rem, 3vw, 2.1rem);
+    font-weight: 800;
+    margin-bottom: 1rem;
+    line-height: 1.3;
+  }
+  .section-intro {
+    font-size: 1.05rem;
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    max-width: 820px;
+    line-height: 1.85;
+  }
+
+  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
+  @media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
+
+  .card {
+    background: var(--bg-card);
+    border-radius: var(--radius);
+    padding: 1.75rem;
+    box-shadow: var(--shadow-card);
+    border: 1px solid rgba(0,0,0,0.04);
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
+  .card-icon { font-size: 2.4rem; margin-bottom: 0.75rem; display: block; }
+  .card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.6rem; }
+  .card p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.75; }
+  .card-accent { border-left: 4px solid var(--accent); }
+  .card-blue { border-left: 4px solid var(--blue); }
+  .card-teal { border-left: 4px solid var(--teal); }
+  .card-purple { border-left: 4px solid var(--purple); }
+  .card-orange { border-left: 4px solid var(--orange); }
+  .card-yellow { border-left: 4px solid var(--yellow); }
+
+  .stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0; }
+  .stat-block {
+    flex: 1;
+    min-width: 110px;
+    background: var(--bg-alt);
+    border-radius: 12px;
+    padding: 1.1rem 1.25rem;
+    text-align: center;
+  }
+  .stat-block .number { font-size: 1.7rem; font-weight: 800; color: var(--accent); display: block; }
+  .stat-block .number.blue { color: var(--blue); }
+  .stat-block .number.teal { color: var(--teal); }
+  .stat-block .number.purple { color: var(--purple); }
+  .stat-block .number.orange { color: var(--orange); }
+  .stat-block .number.yellow { color: var(--yellow); }
+  .stat-block .unit { font-size: 0.72rem; color: var(--text-muted); display: block; margin-top: 0.15rem; }
+  .stat-block .desc { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.35rem; }
+
+  .evidence-box {
+    background: linear-gradient(135deg, #f0fff4 0%, #fafaf5 100%);
+    border: 1px solid rgba(45,106,79,0.12);
+    border-radius: 12px;
+    padding: 1.4rem 1.7rem;
+    margin: 1.75rem 0;
+    position: relative;
+    overflow: hidden;
+  }
+  .evidence-box::before {
+    content: '🔬';
+    position: absolute;
+    top: -0.5rem;
+    right: 1rem;
+    font-size: 3.5rem;
+    opacity: 0.06;
+  }
+  .evidence-box.blue {
+    background: linear-gradient(135deg, #eaf4fb 0%, #e8f4f8 100%);
+    border-color: rgba(26,82,118,0.12);
+  }
+  .evidence-box.purple {
+    background: linear-gradient(135deg, #f5eef8 0%, #faf5ff 100%);
+    border-color: rgba(125,60,152,0.12);
+  }
+  .evidence-box.orange {
+    background: linear-gradient(135deg, #fff4e6 0%, #fffbeb 100%);
+    border-color: rgba(211,84,0,0.12);
+  }
+  .evidence-box.yellow {
+    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
+    border-color: rgba(183,121,31,0.12);
+  }
+  .evidence-box-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.65rem; flex-wrap: wrap; }
+  .evidence-box-title { font-weight: 700; font-size: 0.97rem; color: var(--accent); }
+  .evidence-box.blue .evidence-box-title { color: var(--blue); }
+  .evidence-box.purple .evidence-box-title { color: var(--purple); }
+  .evidence-box.orange .evidence-box-title { color: var(--orange); }
+  .evidence-box.yellow .evidence-box-title { color: var(--yellow); }
+  .evidence-box p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.75; margin-bottom: 0.4rem; }
+  .evidence-box p:last-child { margin-bottom: 0; }
+  .ev-tag {
+    display: inline-block;
+    font-size: 0.68rem;
+    font-weight: 700;
+    padding: 0.18rem 0.55rem;
+    border-radius: 100px;
+    background: rgba(45,106,79,0.1);
+    color: var(--accent);
+    margin-right: 0.3rem;
+    margin-top: 0.25rem;
+  }
+  .ev-tag.blue { background: rgba(26,82,118,0.1); color: var(--blue); }
+  .ev-tag.purple { background: rgba(125,60,152,0.1); color: var(--purple); }
+  .ev-tag.orange { background: rgba(211,84,0,0.1); color: var(--orange); }
+  .ev-tag.yellow { background: rgba(183,121,31,0.1); color: var(--yellow); }
+
+  .process-steps { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }
+  .process-step { display: flex; gap: 1.25rem; align-items: flex-start; }
+  .step-num {
+    flex-shrink: 0;
+    width: 2rem; height: 2rem;
+    background: var(--accent-light);
+    color: var(--accent);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    font-size: 0.88rem;
+  }
+  .step-num.blue { background: var(--blue-light); color: var(--blue); }
+  .step-num.teal { background: var(--teal-light); color: var(--teal); }
+  .step-num.purple { background: var(--purple-light); color: var(--purple); }
+  .step-num.orange { background: var(--orange-light); color: var(--orange); }
+  .step-num.yellow { background: var(--yellow-light); color: var(--yellow); }
+  .step-content h4 { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.28rem; color: var(--text-primary); }
+  .step-content p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; }
+
+  .quote-block {
+    background: var(--bg-alt);
+    border-left: 4px solid var(--accent);
+    border-radius: 0 12px 12px 0;
+    padding: 1.4rem 1.7rem;
+    margin: 1.75rem 0;
+  }
+  .quote-block.blue { border-left-color: var(--blue); }
+  .quote-block.teal { border-left-color: var(--teal); }
+  .quote-block.purple { border-left-color: var(--purple); }
+  .quote-block.orange { border-left-color: var(--orange); }
+  .quote-text { font-size: 1.02rem; font-style: italic; color: var(--text-secondary); line-height: 1.8; margin-bottom: 0.65rem; }
+  .quote-source { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
+
+  .list-styled { list-style: none; padding: 0; margin: 1rem 0; }
+  .list-styled li { padding: 0.45rem 0 0.45rem 1.7rem; position: relative; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.7; }
+  .list-styled li::before { content: '✔'; position: absolute; left: 0; color: var(--accent); font-weight: 700; font-size: 0.85rem; top: 0.45rem; }
+  .list-styled.teal li::before { color: var(--teal); }
+  .list-styled.purple li::before { color: var(--purple); }
+
+  .table-wrap { overflow-x: auto; margin: 1.5rem 0; }
+  table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
+  th { background: var(--accent-light); color: var(--accent); padding: 0.7rem 1rem; text-align: left; font-weight: 700; white-space: nowrap; }
+  th.blue { background: var(--blue-light); color: var(--blue); }
+  th.teal { background: var(--teal-light); color: var(--teal); }
+  th.purple { background: var(--purple-light); color: var(--purple); }
+  th.orange { background: var(--orange-light); color: var(--orange); }
+  td { padding: 0.7rem 1rem; border-bottom: 1px solid #eee; color: var(--text-secondary); vertical-align: top; }
+  tr:last-child td { border-bottom: none; }
+  tr:hover td { background: #fafafa; }
+
+  .step-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0; }
+  .step-flow-item {
+    background: white;
+    border: 2px solid var(--accent);
+    border-radius: 12px;
+    padding: 0.85rem 1.4rem;
+    text-align: center;
+    min-width: 150px;
+    box-shadow: var(--shadow-card);
+  }
+  .step-flow-item.blue { border-color: var(--blue); }
+  .step-flow-item.teal { border-color: var(--teal); }
+  .step-flow-item.purple { border-color: var(--purple); }
+  .step-flow-item.orange { border-color: var(--orange); }
+  .step-flow-item.yellow { border-color: var(--yellow); }
+  .step-flow-item .s-num { font-size: 0.72rem; font-weight: 700; color: var(--accent); display: block; margin-bottom: 0.2rem; }
+  .step-flow-item.blue .s-num { color: var(--blue); }
+  .step-flow-item.teal .s-num { color: var(--teal); }
+  .step-flow-item.purple .s-num { color: var(--purple); }
+  .step-flow-item.orange .s-num { color: var(--orange); }
+  .step-flow-item.yellow .s-num { color: var(--yellow); }
+  .step-flow-item .s-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); display: block; }
+  .step-flow-arrow { font-size: 1.2rem; color: #ccc; }
+
+  .cta-section {
+    background: linear-gradient(135deg, #1a2e2e 0%, #2d4a4a 100%);
+    color: white;
+    padding: 4rem 1.5rem;
+    text-align: center;
+  }
+  .cta-section h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: 0.9rem; }
+  .cta-section p { color: rgba(255,255,255,0.78); max-width: 580px; margin: 0 auto 2rem; font-size: 1rem; line-height: 1.7; }
+  .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
+  .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.72rem 1.6rem; border-radius: 100px; font-size: 0.92rem; font-weight: 700; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; }
+  .btn-primary { background: var(--accent); color: white; }
+  .btn-primary:hover { background: #236b42; transform: translateY(-1px); }
+  .btn-outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.38); }
+  .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }
+
+  /* Footer styles replaced by shared js/footer.js */
+
+  .citations { background: #f8f8f8; border-top: 2px solid var(--accent); padding: 3rem 0; }
+  .citation-card { background: white; border: 1px solid #eee; border-radius: 12px; padding: 1.2rem 1.5rem; margin-bottom: 0.9rem; }
+  .citation-card .source { font-size: 0.83rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.35rem; }
+  .citation-card .auth-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
+  .auth-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 100px; background: #f0fff4; color: var(--accent); }
+  .auth-badge.blue { background: #eaf4fb; color: var(--blue); }
+  .auth-badge.purple { background: #f5eef8; color: var(--purple); }
+  .auth-badge.orange { background: #fff4e6; color: var(--orange); }
+  .citation-card .findings { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 0.35rem; }
+  .citation-card .trans { font-size: 0.78rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.35rem; }
+  .citation-card .link { font-size: 0.78rem; color: var(--blue); text-decoration: none; }
+  .citation-card .link:hover { text-decoration: underline; }
+
+  .anchor { scroll-margin-top: 72px; }
+
+  .shot-placeholder {
+    background: linear-gradient(135deg,#f0f0f0,#e5e5e5);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 180px;
+    color: #aaa;
+    font-size: 0.85rem;
+    gap: 0.4rem;
+    margin: 1.25rem 0;
+  }
+  .shot-placeholder .shot-icon { font-size: 2.2rem; opacity: 0.35; }
+</style>
+</head>
+<body>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-particles">
+    <div class="particle"></div><div class="particle"></div><div class="particle"></div>
+    <div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div>
+  </div>
+  <div class="hero-content">
+    <div class="hero-badge">🦴 科学循证 · 主动健康</div>
+    <h1>骨质疏松<br><span class="accent">症·病·因与主动健康干预</span></h1>
+    <p class="hero-sub">中国骨质疏松患者6900万,脆性骨折致死率超30%。<br>理解骨骼衰老信号 → 掌握骨代谢病理 → 识别可控病因 → 建立主动健康五步干预闭环——<br>骨骼健康是主动健康的核心维度之一,也是晚年生活质量的最重要保障。</p>
+    <div class="hero-stats">
+      <div class="hero-stat"><span class="num">6900万</span><span class="label">骨质疏松患者</span></div>
+      <div class="hero-stat"><span class="num">2亿</span><span class="label">骨量低下人群</span></div>
+      <div class="hero-stat"><span class="num">20%</span><span class="label">髋部骨折1年死亡率</span></div>
+      <div class="hero-stat"><span class="num">40%</span><span class="label">女性一生骨折风险</span></div>
+    </div>
+  </div>
+  <a href="#symptoms" class="scroll-hint">
+    <span>开始阅读</span>
+    <div class="scroll-arrow"></div>
+  </a>
+</section>
+
+<!-- NAV -->
+<nav class="nav">
+  <div class="nav-inner">
+    <a href="index.html" class="nav-brand">🦴 浠艾福 · 主动健康学院</a>
+    <ul class="nav-links">
+      <li><a href="#symptoms">症</a></li>
+      <li><a href="#disease">病</a></li>
+      <li><a href="#causes">因</a></li>
+      <li><a href="#proactive">主动健康五步</a></li>
+      <li><a href="#citations">参考文献</a></li>
+    </ul>
+  </div>
+</nav>
+
+<!-- ══════════════════════════════════════════
+     症 · 症状识别
+═══════════════════════════════════════════ -->
+<section class="section" id="symptoms">
+  <div class="container">
+    <div class="section-tag">🔍 症 · 症状识别</div>
+    <h2 class="section-title">骨质疏松:最常见的"沉默杀手"之一</h2>
+    <p class="section-intro">
+      骨质疏松症最可怕之处在于它毫无症状——直到第一次骨折发生。骨量在无声中流失,骨微结构在悄悄退化,当疼痛出现时,疾病往往已经进展到中晚期。理解骨骼的"求救信号",是主动健康的第一步。
+    </p>
+
+    <div class="evidence-box" style="margin-bottom:1.5rem;">
+      <div class="evidence-box-header">
+        <span class="evidence-box-title">⚠️ 骨质疏松的典型症状信号</span>
+        <span class="ev-tag">早发现是关键</span>
+      </div>
+      <p>① <strong>身高缩短(>4cm)</strong>:椎体压缩性骨折的早期信号,测量身高与年轻时相比,矮4cm以上提示椎体压缩</p>
+      <p>② <strong>驼背(脊柱后凸)</strong>:多个椎体压缩性骨折导致"驼背"进行性加重,严重时影响呼吸和消化</p>
+      <p>③ <strong>慢性腰背痛</strong>:椎体压缩性骨折导致持续性背痛,久坐久站加重,平卧缓解(与肌肉劳损性疼痛不同)</p>
+      <p>④ <strong>脆性骨折</strong>:轻微外力即可导致骨折(从站立高度跌倒即骨折),最常见于椎体、髋部、腕部</p>
+      <p>⑤ <strong>牙齿脱落</strong>:下颌骨也是松质骨,骨质疏松患者牙槽骨流失加速,牙齿脱落是全身骨丢失的信号之一</p>
+    </div>
+
+    <div class="grid-3">
+      <div class="card card-accent">
+        <span class="card-icon">🦴</span>
+        <h3>椎体压缩性骨折</h3>
+        <p>最常见的骨质疏松性骨折(约占50%),多数无明显外伤史,仅因咳嗽、打喷嚏或弯腰提物即发生。表现为突发腰背部疼痛,数周后疼痛减轻,但椎体形态已不可逆。多数患者误以为是"腰肌劳损",延误诊断。</p>
+        <p style="margin-top:0.5rem;"><strong>警告:</strong>首次椎体骨折后1年内邻近椎体再骨折风险增加5倍,需积极治疗。</p>
+      </div>
+      <div class="card card-orange">
+        <span class="card-icon">🦿</span>
+        <h3>髋部骨折(股骨近端)</h3>
+        <p>最严重的骨质疏松性骨折,分为股骨颈骨折和转子间骨折。多数由站立高度跌倒引起。骨折后1年死亡率约20%(并发症:肺部感染、深静脉血栓、褥疮),50%患者永久失去独立行走能力,需长期护理。</p>
+        <p style="margin-top:0.5rem;">被称为"人生最后一次骨折"——不是因为骨折本身致命,而是因为骨折后的卧床并发症。</p>
+      </div>
+      <div class="card card-blue">
+        <span class="card-icon">🤚</span>
+        <h3>桡骨远端骨折(Colles骨折)</h3>
+        <p>跌倒时手掌撑地导致,常见于老年女性。骨折本身通过手法复位或手术可治疗,但它是全身骨骼质量下降的明确信号,提示髋部和脊柱骨折风险显著升高。骨折后需全面评估骨密度,并开始系统干预。</p>
+      </div>
+    </div>
+
+    <div class="grid-2" style="margin-top:1.5rem;">
+      <div class="card card-purple">
+        <h3>🔍 正常衰老 vs 骨质疏松信号对比</h3>
+        <table>
+          <tr><th>表现</th><th>正常衰老</th><th>骨质疏松警告</th></tr>
+          <tr><td>身高变化</td><td>缓慢下降,10年<1cm</td><td>明显缩短,>4cm提示椎体骨折</td></tr>
+          <tr><td>骨痛</td><td>无或偶有轻微酸痛</td><td>持续腰背痛,与体位相关</td></tr>
+          <tr><td>骨折史</td><td>无</td><td>轻微外伤即骨折(脆性骨折)</td></tr>
+          <tr><td>牙齿</td><td>正常随年龄变化</td><td>牙齿脱落加速,牙周炎久治不愈</td></tr>
+          <tr><td>姿势</td><td>正常直立</td><td>出现驼背(驼背角>40°)</td></tr>
+        </table>
+      </div>
+      <div class="card card-teal">
+        <h3>⚕️ 其他骨骼疾病的鉴别</h3>
+        <p><strong>骨软化症:</strong>维生素D缺乏导致骨骼矿化障碍,表现为骨骼疼痛和无力,X线可见假骨折线,与骨质疏松可通过血液检查(维生素D、血钙、ALP)鉴别。</p>
+        <p style="margin-top:0.5rem;"><strong>骨转移瘤:</strong>老年患者出现多处骨折,伴有消瘦、贫血,需排查恶性肿瘤骨转移。</p>
+        <p style="margin-top:0.5rem;"><strong>多发性骨髓瘤:</strong>中老年骨质疏松样表现,伴有贫血、肾功能异常、血钙升高,免疫球蛋白异常。</p>
+        <p style="margin-top:0.5rem;color:var(--text-muted);font-size:0.85rem;">出现上述异常信号,需尽早就诊内分泌科/骨科进行系统评估。</p>
+      </div>
+    </div>
+
+    <div class="process-steps" style="margin-top:1.5rem;">
+      <div class="process-step">
+        <div class="step-num">💡</div>
+        <div class="step-content">
+          <h4>主动健康第一步:建立骨骼健康警觉意识</h4>
+          <p>40岁以上女性和50岁以上男性,即使没有症状,也应了解自己的骨骼健康状态。建议家中常备卷尺,每年测量一次身高(与年轻时对比)。如果出现身高缩短>4cm、新发腰背痛或轻微外力后的骨折,应立即就医进行DXA骨密度检测。</p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<!-- ══════════════════════════════════════════
+     病 · 疾病定义
+═══════════════════════════════════════════ -->
+<section class="section section-alt" id="disease">
+  <div class="container">
+    <div class="section-tag teal">📖 病 · 疾病定义</div>
+    <h2 class="section-title">骨质疏松:骨吸收超过骨形成的系统性骨骼疾病</h2>
+    <p class="section-intro">
+      骨质疏松症(Osteoporosis,OP)是一种以<strong>骨量低下、骨微结构损坏、骨脆性增加、骨折易感性增高</strong>为特征的全身性骨骼疾病。WHO明确定义:骨密度(BMD)T值≤-2.5即可诊断骨质疏松;T值在-1.0至-2.5之间为骨量低下(osteopenia),是骨质疏松的前期阶段。
+    </p>
+
+    <div class="stat-row">
+      <div class="stat-block">
+        <span class="number">6900万</span>
+        <span class="unit">人</span>
+        <span class="desc">中国骨质疏松患者</span>
+      </div>
+      <div class="stat-block">
+        <span class="number blue">2亿</span>
+        <span class="unit">人</span>
+        <span class="desc">骨量低下人群</span>
+      </div>
+      <div class="stat-block">
+        <span class="number teal">40%</span>
+        <span class="unit">女性</span>
+        <span class="desc">一生骨折风险</span>
+      </div>
+      <div class="stat-block">
+        <span class="number orange">20%</span>
+        <span class="unit">髋骨骨折</span>
+        <span class="desc">1年死亡率</span>
+      </div>
+    </div>
+
+    <div class="grid-2" style="margin-top:2rem;">
+      <div class="card card-accent">
+        <h3>🔬 DXA骨密度检测:诊断金标准</h3>
+        <p>双能X线吸收测定法(Dual-energy X-ray Absorptiometry,DXA)是WHO推荐的骨质疏松诊断金标准,测量部位为<strong>腰椎(L1-L4)和股骨颈</strong>,全髋部也可作为参考。</p>
+        <table style="margin-top:0.75rem;">
+          <tr><th>分类</th><th>T值</th><th>含义</th></tr>
+          <tr><td style="color:var(--accent);font-weight:700;">正常</td><td>T ≥ -1.0</td><td>骨密度在健康年轻人范围内</td></tr>
+          <tr><td style="color:var(--yellow);font-weight:700;">骨量低下</td><td>-2.5 < T < -1.0</td><td>骨量减少,需干预防止进展</td></tr>
+          <tr><td style="color:var(--accent);font-weight:700;">骨质疏松</td><td>T ≤ -2.5</td><td>骨密度显著下降,骨折风险高</td></tr>
+          <tr><td style="color:var(--orange);font-weight:700;">严重骨质疏松</td><td>T ≤ -2.5 + 脆性骨折</td><td>已发生骨折,需积极治疗</td></tr>
+        </table>
+        <p style="margin-top:0.75rem;font-size:0.85rem;color:var(--text-muted);">注:T值是将患者BMD与健康年轻人(20-35岁)峰值骨量比较的标准差偏离值。Z值是将患者BMD与同龄人比较的数值,用于继发性骨质疏松的鉴别。</p>
+      </div>
+      <div class="card card-teal">
+        <h3>🦴 骨骼生理:骨吸收与骨形成的平衡</h3>
+        <p>骨骼是活的组织,通过<strong>骨重建</strong>(Bone Remodeling)不断更新——由破骨细胞(osteoclasts)吸收旧骨、成骨细胞(osteoblasts)形成新骨,周期约3-6个月。正常状态下两者平衡,维持骨量和强度。</p>
+        <p style="margin-top:0.5rem;"><strong>RANKL/RANK/OPG通路</strong>是骨代谢的核心调控系统:成骨细胞和骨细胞表达RANKL(核因子κB受体活化因子配体),与破骨前体细胞表面的RANK受体结合,促进破骨细胞分化和活性。骨细胞分泌OPG(骨保护素)作为诱饵受体,中和RANKL,保护骨量。</p>
+        <p style="margin-top:0.5rem;"><strong>绝经后骨质疏松</strong>的核心机制:雌激素缺乏→OPG减少→RANKL/OPG比值升高→破骨细胞过度活化→骨吸收大于骨形成→骨量快速丢失(约2-3%/年,持续5-7年)。</p>
+      </div>
+    </div>
+
+    <h3 style="font-size:1.1rem;font-weight:700;margin:2rem 0 1rem;">⚙️ 骨骼老化的三阶段</h3>
+    <div class="process-steps">
+      <div class="process-step">
+        <div class="step-num teal">①</div>
+        <div class="step-content">
+          <h4>峰值骨量期(0-30岁)——骨骼"存款"阶段</h4>
+          <p>儿童期和青春期是骨骼生长的关键时期,骨量快速增长,约在<strong>30岁左右达到峰值骨量</strong>(peak bone mass)。遗传因素决定约60-80%的峰值骨量,钙摄入、运动和维生素D等可调节因素占20-40%。峰值骨量越高,中老年后发生骨质疏松的风险越低。研究显示,峰值骨量每增加10%,骨质疏松发病年龄推迟约13年。</p>
+        </div>
+      </div>
+      <div class="process-step">
+        <div class="step-num teal">②</div>
+        <div class="step-content">
+          <h4>骨量稳定期(30-50岁)——"收支平衡"阶段</h4>
+          <p>成年前期骨形成≈骨吸收,骨量保持稳定。40岁后,无论男性还是女性,骨密度都开始以约0.5-1%/年的速度缓慢下降。女性的下降速度在围绝经期(45-55岁)显著加速,进入绝经后骨质疏松快速进展期。男性则相对缓慢,以每年0.3-0.5%的速度下降。</p>
+        </div>
+      </div>
+      <div class="process-step">
+        <div class="step-num teal">③</div>
+        <div class="step-content">
+          <h4>骨量丢失期(50岁+)——骨骼"透支"阶段</h4>
+          <p>女性绝经后雌激素急剧下降,破骨细胞活性暴增,骨吸收率超过骨形成率,骨量快速丢失。男性则与睾酮水平下降和肠道钙吸收减少有关。70岁以上老年人骨密度下降速度约2-3%/年,80岁时平均骨密度仅为峰值的约60-70%。</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="evidence-box blue" style="margin-top:1.5rem;">
+      <div class="evidence-box-header">
+        <span class="evidence-box-title">📊 骨折的危害:超越骨折本身</span>
+        <span class="ev-tag blue">流行病学数据</span>
+      </div>
+      <p><strong>髋部骨折</strong>:骨折后1年死亡率约20%(与骨折后长期卧床的并发症直接相关:肺部感染、深静脉血栓、褥疮)。约50%患者无法恢复独立行走能力,需长期护理。约30%患者在骨折后第1年内再次骨折。</p>
+      <p style="margin-top:0.5rem;"><strong>椎体骨折</strong>:首次椎体骨折后1年内邻近椎体再骨折风险增加5倍。椎体骨折后驼背进行性加重,影响呼吸(肺活量下降)和消化功能,甚至增加全因死亡率。</p>
+      <p style="margin-top:0.5rem;"><strong>腕部骨折</strong>:虽不直接危及生命,但它是全身骨骼质量下降的信号,提示髋部骨折风险同样升高。</p>
+      <p style="margin-top:0.5rem;color:var(--text-muted);font-style:italic;">关键认知:发生一次脆性骨折后,即属于"严重骨质疏松",需要积极药物治疗+生活方式干预+跌倒预防,不可掉以轻心。</p>
+    </div>
+
+    <div class="quote-block blue" style="margin-top:1.5rem;">
+      <p class="quote-text">"骨质疏松性骨折是可预防、可延、可治的疾病。关键在于:在骨折发生之前识别风险,在骨量丢失的早期开始干预,在骨折发生之后防止再次骨折。主动健康管理是骨骼健康的最优策略。"</p>
+      <span class="quote-source">— 中华医学会骨质疏松和骨矿盐疾病分会 ·《原发性骨质疏松症诊疗指南2022》</span>
+    </div>
+
+  </div>
+</section>
+
+<!-- ══════════════════════════════════════════
+     因 · 发病原因
+═══════════════════════════════════════════ -->
+<section class="section" id="causes">
+  <div class="container">
+    <div class="section-tag orange">⚡ 因 · 发病原因</div>
+    <h2 class="section-title">骨质疏松的六大可控致病因素</h2>
+    <p class="section-intro">
+      骨质疏松的危险因素分为<strong>不可改变因素</strong>(年龄、性别、遗传、种族)和<strong>可改变因素</strong>(营养、运动、疾病、药物)。研究表明,约60-80%的峰值骨量和约30-50%的骨质疏松风险由可改变因素决定。这意味着,通过主动的生活方式干预,我们完全可以在一定程度上"掌控"自己的骨骼命运。
+    </p>
+
+    <div class="evidence-box orange" style="margin-bottom:2rem;">
+      <div class="evidence-box-header">
+        <span class="evidence-box-title">📊 中国人群钙营养现状:每日缺口约600mg</span>
+        <span class="ev-tag orange">营养不良是核心可控因素</span>
+      </div>
+      <p>中国居民膳食钙摄入量平均约400mg/天,仅为成人推荐量(1000-1200mg/天)的三分之一。维生素D缺乏患病率约60-70%(北方地区>80%),是钙吸收障碍的首要原因。蛋白质摄入不足(尤其老年人)同样影响骨骼健康,约30%的中国老年人存在蛋白质摄入不足问题。</p>
+    </div>
+
+    <div class="grid-2">
+      <div>
+        <div class="card card-orange" style="margin-bottom:1.25rem;">
+          <span class="card-icon">🥛</span>
+          <h3>钙与维生素D缺乏——骨骼"建筑材料"不足</h3>
+          <p>钙是骨骼的主要矿物质成分(99%的机体钙储存在骨骼中),维生素D是钙吸收的必要条件。中国人群普遍存在双重缺乏:</p>
+          <p style="margin-top:0.5rem;"><strong>钙摄入严重不足:</strong>中国居民膳食钙摄入约400mg/天(推荐1000-1200mg/天),缺口达600-800mg/d。钙的最佳食物来源是乳制品(100ml牛奶含钙约120mg),但中国居民牛奶消费率不足30%。</p>
+          <p style="margin-top:0.5rem;"><strong>维生素D缺乏:</strong>维生素D不足[25(OH)D 20-30ng/mL]患病率约60%,维生素D缺乏[<20ng/mL]患病率约20-30%。老年人皮肤合成维生素D能力下降约75%,加之户外活动减少,是高危人群。</p>
+          <p style="margin-top:0.5rem;"><strong>机制:</strong>维生素D不足→肠道钙吸收率从30-40%降至10-15%→血钙下降→甲状旁腺激素(PTH)代偿性升高→骨吸收增加→骨量丢失。</p>
+        </div>
+
+        <div class="card card-orange" style="margin-bottom:1.25rem;">
+          <span class="card-icon">🛋️</span>
+          <h3>久坐不动——骨骼失去机械负荷刺激</h3>
+          <p>骨骼是"用进废退"的器官——机械负荷(重力+肌肉收缩)是维持骨量的必要刺激。长期卧床或失重状态(如宇航员)会导致骨量快速丢失(宇航员在太空每月骨密度下降约1-2%)。</p>
+          <p style="margin-top:0.5rem;"><strong>机制:</strong>机械负荷→骨细胞感知压力→下调RANKL、上调OPG→抑制破骨细胞活性→减少骨吸收。缺乏运动→RANKL/OPG比值升高→破骨细胞活跃→骨量丢失。</p>
+          <p style="margin-top:0.5rem;"><strong>数据:</strong>久坐人群骨折风险比经常运动者高约40%。抗阻训练(深蹲、举重)可显著增加骨密度——研究显示每周3次、每次30分钟的高强度抗阻训练,12个月后髋部骨密度增加约2-3%。</p>
+        </div>
+
+        <div class="card card-blue">
+          <span class="card-icon">🚬</span>
+          <h3>吸烟与过量饮酒——直接抑制成骨细胞</h3>
+          <p><strong>吸烟:</strong>烟草中的尼古丁直接抑制成骨细胞增殖和活性;烟雾中的一氧化碳降低骨骼血供;吸烟者肠道钙吸收减少。吸烟者髋部骨折风险比不吸烟者高约40%,且骨折后骨愈合延迟。</p>
+          <p style="margin-top:0.5rem;"><strong>过量饮酒(>3单位/天):</strong>酒精直接毒性作用于成骨细胞(抑制其活性),同时干扰钙平衡和维生素D代谢。长期大量饮酒者股骨颈骨密度比不饮酒者低约5-10%。</p>
+          <p style="margin-top:0.5rem;"><strong>但少量饮酒(<2单位/天)与骨密度的关系尚存争议</strong>——部分研究显示轻度饮酒者骨密度略高,可能与红酒中的植物雌激素有关,但不建议从不饮酒者开始饮酒来保护骨骼。</p>
+        </div>
+      </div>
+
+      <div>
+        <div class="card card-blue" style="margin-bottom:1.25rem;">
+          <span class="card-icon">💊</span>
+          <h3>药物因素:糖皮质激素——最常见的药源性骨质疏松</h3>
+          <p>长期口服糖皮质激素(泼尼松>5mg/天,持续>3个月)是药源性骨质疏松的最常见原因,影响约1-2%的总人口。机制:糖皮质激素直接作用于成骨细胞(促进凋亡)、间接促进破骨细胞活性,同时减少肠道钙吸收、增加尿钙排泄。</p>
+          <p style="margin-top:0.5rem;"><strong>关键事实:</strong>10-40%的长期使用糖皮质激素的患者会发生骨折,髋部和椎体骨折风险分别增加约2倍和5倍。骨折风险与剂量和疗程相关,但即使低剂量(泼尼松2.5-5mg/天)也会增加骨折风险。</p>
+          <p style="margin-top:0.5rem;"><strong>其他导致骨质疏松的药物:</strong>质子泵抑制剂(PPIs,长期使用降低钙吸收)、芳香化酶抑制剂(乳腺癌内分泌治疗药,抑制雌激素合成)、抗癫痫药物(苯妥英钠、苯巴比妥诱导CYP450酶,加速维生素D代谢)。</p>
+        </div>
+
+        <div class="card card-purple" style="margin-bottom:1.25rem;">
+          <span class="card-icon">🦠</span>
+          <h3>肠道菌群与骨骼健康:骨骼-肠道轴</h3>
+          <p>近年研究揭示了"骨骼-肠道轴"(Gut-Bone Axis):肠道菌群通过代谢产物影响骨骼代谢。</p>
+          <p style="margin-top:0.5rem;"><strong>SCFAs(短链脂肪酸)通路:</strong>膳食纤维(全谷物、蔬菜、水果)→肠道菌群发酵产生乙酸、丙酸、丁酸→丁酸是结肠上皮细胞和骨骼细胞的重要能量来源→丁酸通过抑制HDAC(组蛋白去乙酰化酶)调节免疫和骨代谢→促进成骨细胞活性、抑制破骨细胞分化。</p>
+          <p style="margin-top:0.5rem;"><strong>雌激素缺乏与肠道菌群:</strong>绝经后雌激素骤降→肠道通透性增加(肠漏)→LPS(脂多糖)进入血液→系统性炎症(IL-1β、IL-6、TNF-α升高)→RANKL表达增加→破骨细胞活化→骨吸收增加。研究发现:绝经后骨质疏松患者肠道菌群多样性显著降低,产丁酸菌(Roseburia、Faecalibacterium)丰度与骨密度正相关。</p>
+        </div>
+
+        <div class="card card-teal">
+          <span class="card-icon">🥩</span>
+          <h3>蛋白质与微量元素:骨骼的"辅助材料"</h3>
+          <p><strong>蛋白质:</strong>骨骼基质中约30%是蛋白质(胶原蛋白),蛋白质营养不良导致骨骼有机基质合成减少,骨脆性增加。老年人蛋白质合成能力下降,约30%中国老年人存在蛋白质摄入不足(<0.8g/kg/day),与肌少症(sarcopenia)密切相关,而肌肉是骨骼最重要的机械负荷来源。</p>
+          <p style="margin-top:0.5rem;"><strong>微量元素:</strong>镁(叶绿素、坚果中)参与骨矿化过程;锌(海产品、瘦肉中)参与骨基质蛋白合成;硅(谷物、蔬菜中)促进胶原合成和骨矿化。</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid-2" style="margin-top:1.5rem;">
+      <div class="card card-yellow">
+        <h3>🧬 不可改变因素(作为背景参考)</h3>
+        <p><strong>年龄:</strong>骨密度在30岁达到峰值后开始下降,50岁后加速,70岁以上约1/3女性会出现骨质疏松性骨折。</p>
+        <p style="margin-top:0.5rem;"><strong>性别:</strong>女性骨折风险约为男性的2倍,主要原因是:①女性峰值骨量本身低于男性约10%;②绝经后雌激素骤降导致快速骨丢失(约5-7年);③女性平均寿命更长,在低骨量状态下存活时间更长。</p>
+        <p style="margin-top:0.5rem;"><strong>遗传因素:</strong>母亲有髋部骨折史者,子女髋部骨折风险增加约2倍。主要候选基因:LRP5(Wnt信号通路,影响骨量峰值)、SOST(骨硬化蛋白基因)、VDR(维生素D受体基因多态性)。</p>
+        <p style="margin-top:0.5rem;"><strong>种族:</strong>亚裔和非裔人群骨密度低于高加索人群,骨折风险更高。</p>
+        <p style="margin-top:0.5rem;color:var(--text-muted);font-size:0.85rem;">关键:即使遗传风险高,通过积极补钙、补维生素D、运动和防跌倒,仍然可以显著降低骨折风险。</p>
+      </div>
+      <div class="card card-accent">
+        <h3>⚠️ 继发性骨质疏松:需要首先排查的因素</h3>
+        <p>约30%的男性骨质疏松和约50%的50岁以下女性骨质疏松为继发性(由其他疾病或药物引起)。以下情况需要首先排查:</p>
+        <ul class="list-styled">
+          <li><strong>内分泌疾病:</strong>甲状腺功能亢进(加速骨转换)、原发性甲状旁腺功能亢进(PTH升高溶解骨)、库欣综合征(内源性糖皮质激素过多)、性腺功能减退</li>
+          <li><strong>风湿免疫病:</strong>类风湿关节炎(炎症+糖皮质激素治疗)、强直性脊柱炎</li>
+          <li><strong>消化系统疾病:</strong>胃切除术后(钙吸收下降)、炎性肠病(克罗恩病/溃疡性结肠炎)、乳糜泻</li>
+          <li><strong>血液系统疾病:</strong>多发性骨髓瘤(骨痛+骨折+贫血)、白血病、骨转移瘤</li>
+          <li><strong>慢性肾脏病:</strong>肾功能不全→磷潴留→FGF23升高→钙吸收减少</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="process-steps" style="margin-top:1.5rem;">
+      <div class="process-step">
+        <div class="step-num orange">💡</div>
+        <div class="step-content">
+          <h4>主动健康核心认知:骨骼健康是可塑的</h4>
+          <p>骨骼是人体中可塑性最强的组织之一——即使在80岁,通过科学的营养+运动+药物治疗,骨密度仍然可以提高(虽然不如年轻时显著)。关键是:无论年龄多大,现在开始行动都比不行动好。建议每个家庭关注老年成员的骨骼健康,特别是绝经后的女性和70岁以上的男性。</p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<!-- ══════════════════════════════════════════
+     主动健康五步
+═══════════════════════════════════════════ -->
+<section class="section section-alt" id="proactive">
+  <div class="container">
+    <div class="section-tag teal">🌿 主动健康五步</div>
+    <h2 class="section-title">从识别到优化:骨骼健康的主动健康干预闭环</h2>
+    <p class="section-intro">
+      骨骼健康的主动健康核心理念是:在骨折发生之前识别风险,在骨量丢失的早期开始干预,在骨折发生之后防止再次骨折。骨骼健康的主动健康管理分为五步:<strong>提前识别 → 风险管控 → 主动干预 → 效果评估 → 持续优化</strong>,形成永不中断的闭环。
+    </p>
+
+    <div class="step-flow">
+      <div class="step-flow-item blue"><span class="s-num">STEP 01</span><span class="s-title">提前识别</span></div>
+      <span class="step-flow-arrow">→</span>
+      <div class="step-flow-item teal"><span class="s-num">STEP 02</span><span class="s-title">风险管控</span></div>
+      <span class="step-flow-arrow">→</span>
+      <div class="step-flow-item purple"><span class="s-num">STEP 03</span><span class="s-title">主动干预</span></div>
+      <span class="step-flow-arrow">→</span>
+      <div class="step-flow-item orange"><span class="s-num">STEP 04</span><span class="s-title">效果评估</span></div>
+      <span class="step-flow-arrow">→</span>
+      <div class="step-flow-item yellow"><span class="s-num">STEP 05</span><span class="s-title">持续优化</span></div>
+    </div>
+
+    <!-- STEP 01: 提前识别 -->
+    <h3 style="font-size:1.15rem;font-weight:700;margin:2rem 0 1rem;color:var(--blue);">① 提前识别——在沉默期发现骨骼健康风险</h3>
+    <p style="color:var(--text-secondary);font-size:0.95rem;line-height:1.8;margin-bottom:1.5rem;">
+      骨质疏松在早期毫无症状,但通过科学的筛查工具,我们完全可以在骨折发生之前识别风险。关键是:知道自己是否属于高危人群,并及时进行DXA检测。
+    </p>
+
+    <div class="grid-2" style="margin-bottom:1.5rem;">
+      <div>
+        <div class="card card-blue" style="margin-bottom:1.25rem;">
+          <h3>🔬 DXA骨密度检测:诊断金标准</h3>
+          <p>双能X线吸收测定法(DXA)测量腰椎和股骨颈BMD,是WHO推荐的诊断金标准。中华医学会建议以下人群进行DXA检测:</p>
+          <ul class="list-styled">
+            <li>女性≥65岁,男性≥70岁(不管有无其他危险因素)</li>
+            <li>绝经后女性及50岁以上男性,有≥1项骨质疏松危险因素</li>
+            <li>50岁以上发生脆性骨折史者(不管BMD结果如何)</li>
+            <li>正在使用糖皮质激素(泼尼松≥5mg/天≥3个月)</li>
+            <li>继发性骨质疏松高危人群(见前述疾病列表)</li>
+            <li>OSTA指数<-1的绝经后女性(计算公式:体重(kg)-年龄(岁)×0.2)</li>
+          </ul>
+          <p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);">检查费用约200-400元/次,部分地区已将DXA纳入医保,建议每1-2年复查一次。</p>
+        </div>
+
+        <div class="card card-teal">
+          <h3>📋 FRAX®骨折风险评估工具</h3>
+          <p>WHO推荐的骨折风险评估工具(https://www.sheffield.ac.uk/FRAX/),计算10年内髋部骨折和主要骨质疏松性骨折的概率。纳入因素:年龄、性别、体重、身高、骨折史(除椎体外)、父母髋部骨折史、吸烟、糖皮质激素使用、类风湿关节炎、继发性骨质疏松、饮酒(≥3单位/天)。</p>
+          <p style="margin-top:0.5rem;"><strong>治疗阈值:</strong>中国人群建议:10年髋部骨折概率≥3%或10年主要骨质疏松性骨折概率≥20%,即应开始药物治疗。</p>
+        </div>
+      </div>
+
+      <div>
+        <div class="card card-purple">
+          <h3>🔍 骨折风险自评工具</h3>
+          <p><strong>一分钟测试题(IOF)</strong>:① 父母是否曾因轻微外伤而发生髋部骨折?② 成年后是否曾因轻微外伤而发生骨折?③ 40岁后身高是否缩短超过4cm?④ 是否经常摔倒(每年超过1次)?⑤ 是否经常腹泻(吸收不良)?⑥ 是否曾服用糖皮质激素超过3个月?⑦ 是否在45岁前绝经?⑧ 是否因卵巢切除或化疗导致停经?⑨ 是否经常大量饮酒?⑩ 是否长期吸烟?以上任一问题回答"是",即提示存在较高骨折风险,建议进行DXA检测。</p>
+        </div>
+
+        <div class="card card-orange" style="margin-top:1.25rem;">
+          <h3>⚖️ 跌倒风险评估</h3>
+          <p>对于≥65岁的老年人,跌倒是骨折的直接原因。推荐以下跌倒风险评估方法:</p>
+          <ul class="list-styled">
+            <li><strong>Tinetti步态与平衡测试</strong>(Tinetti Assessment Tool):满分28分,≤19分提示高跌倒风险</li>
+            <li><strong>起立-行走计时测试(Get-Up-and-Go)</strong>:从椅子上站起、走3米、返回、坐下,≥20秒提示高跌倒风险</li>
+            <li><strong>功能性前伸测试</strong>(FRT):站立时尽量向前伸手够物,<15cm提示跌倒风险高</li>
+          </ul>
+          <p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);">跌倒风险评估应每6-12个月重复一次,动态追踪。</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="shot-placeholder">
+      <div class="shot-icon">🦴</div>
+      <span>img/ref-screenshots/osteoporosis_ref1.png</span>
+      <span style="font-size:0.78rem;">DXA骨密度检测报告示例(股骨颈T值=-2.8,诊断骨质疏松)</span>
+    </div>
+
+    <!-- STEP 02: 风险管控 -->
+    <h3 style="font-size:1.15rem;font-weight:700;margin:2rem 0 1rem;color:var(--teal);">② 风险管控——分层管理,有的放矢</h3>
+    <p style="color:var(--text-secondary);font-size:0.95rem;line-height:1.8;margin-bottom:1.5rem;">
+      骨骼健康风险管理不是一刀切,而是根据DXA检测结果和骨折风险评估进行分层,针对不同风险级别采取不同强度的干预措施。低危以生活方式干预为主;中危生活方式+活性维生素D;高危需要药物+生活方式双管齐下。
+    </p>
+
+    <div class="table-wrap" style="margin-bottom:1.5rem;">
+      <table>
+        <tr><th>风险级别</th><th>判断标准</th><th>钙+维生素D</th><th>药物治疗</th><th>干预重点</th></tr>
+        <tr><td><strong>骨量正常</strong></td><td>T ≥ -1.0</td><td>膳食补充即可</td><td>无需</td><td>保持健康生活方式</td></tr>
+        <tr><td><strong>骨量低下</strong></td><td>-2.5 < T < -1.0,无骨折史</td><td>钙1000mg+VD 800-1000IU/天</td><td>一般不需(FRAX高危者可用)</td><td>强化生活方式干预</td></tr>
+        <tr><td><strong>骨质疏松</strong></td><td>T ≤ -2.5 或 T ≤ -1.0+FRAX高危</td><td>钙1200mg+VD 1000-2000IU/天</td><td><strong>需要</strong>:双膦酸盐或地舒单抗</td><td>药物+生活方式双管</td></tr>
+        <tr><td><strong>严重骨质疏松</strong></td><td>T ≤ -2.5+脆性骨折史</td><td>钙1200mg+VD 2000IU/天</td><td><strong>需要</strong>:特立帕肽或其他促合成药</td><td>骨折后管理+防跌倒</td></tr>
+      </table>
+    </div>
+    <p style="color:var(--text-muted);font-size:0.82rem;margin-bottom:1.5rem;">参考:《原发性骨质疏松症诊疗指南2022》· 中华医学会骨质疏松和骨矿盐疾病分会</p>
+
+    <div class="grid-2" style="margin-bottom:1.5rem;">
+      <div class="card card-teal">
+        <h3>💊 抗骨质疏松药物概述</h3>
+        <p><strong>一线抗骨吸收药:双膦酸盐类</strong></p>
+        <p>阿仑膦酸钠(70mg/周,口服):抑制破骨细胞介导的骨吸收。口服方便,价格低廉,是首选药物。空腹用水送服,站立30分钟,避免反流。</p>
+        <p style="margin-top:0.5rem;"><strong>唑来膦酸(5mg/年,静脉滴注)</strong>:更强效的静脉双膦酸盐,适合口服不耐受或吸收障碍患者。输注后可能出现急性期反应(流感样症状),对肾功能有一定要求。</p>
+        <p style="margin-top:0.5rem;"><strong>地舒单抗(Denosumab,60mg/6月,皮下注射)</strong>:RANKL单克隆抗体,抑制破骨细胞生成和活性。对脆性骨折高危或双膦酸盐不耐受者是优选。注意:<strong>不能随意停药</strong>,停药后可能出现"反跳性椎体骨折",需转换为双膦酸盐。</p>
+        <p style="margin-top:0.5rem;"><strong>促骨形成药:特立帕肽(Teriparatide,20μg/天,皮下注射)</strong>:人PTH 1-34片段,直接刺激成骨细胞活性,促进骨形成。用于严重骨质疏松或骨折不愈合者,疗程最多24个月。费用较高。</p>
+        <p style="margin-top:0.5rem;"><strong>补充:</strong>维生素K2(40μg/天):促进骨钙素γ-羧化,与活性维生素D联合使用可能增强骨密度;降钙素:用于急性骨折后疼痛缓解。</p>
+      </div>
+      <div class="card card-yellow">
+        <h3>🦴 钙和维生素D的补充策略</h3>
+        <p><strong>钙的来源:</strong>膳食钙优先。最佳膳食钙来源:乳制品(牛奶、酸奶、奶酪,每100ml牛奶含钙约120mg);豆制品(豆腐、豆浆);小鱼小虾(连骨一起吃,如沙丁鱼罐头);深绿叶蔬菜(苋菜、芥蓝,每100g含钙约150-200mg,但草酸影响吸收)。</p>
+        <p style="margin-top:0.5rem;"><strong>钙补充剂:</strong>如果膳食钙不足,补充钙剂(碳酸钙或柠檬酸钙)。碳酸钙需随餐服用(胃酸帮助吸收),柠檬酸钙无需随餐,空腹服用即可。胃酸缺乏或服用PPI者建议使用柠檬酸钙。每日钙摄入总量不超过2000mg(膳食+补充剂)。</p>
+        <p style="margin-top:0.5rem;"><strong>维生素D:</strong>血清25(OH)D是评估维生素D状态的最佳指标:≥30ng/mL为充足,20-30ng/mL为不足,<20ng/mL为缺乏。中国老年人维生素D不足/缺乏患病率约60-80%,建议常规补充。补充剂量:400-800 IU/天(不足者需更高剂量1000-2000 IU/天)。定期检测25(OH)D水平(每6-12个月),调整剂量。</p>
+      </div>
+    </div>
+
+    <!-- STEP 03: 主动干预 -->
+    <h3 style="font-size:1.15rem;font-weight:700;margin:2rem 0 1rem;color:var(--purple);">③ 主动干预——可执行的骨骼健康五维策略</h3>
+    <p style="color:var(--text-secondary);font-size:0.95rem;line-height:1.8;margin-bottom:1.5rem;">
+      骨骼健康的主动干预不是笼统的"补钙",而是需要具体化、可量化、可坚持的行动方案。五个维度同时发力,效果最为显著。
+    </p>
+
+    <div class="grid-2" style="margin-bottom:1.5rem;">
+      <div>
+        <div class="card card-purple" style="margin-bottom:1.25rem;">
+          <span class="card-icon">🥗</span>
+          <h3>营养干预——骨骼健康的基石</h3>
+          <p><strong>钙+维生素D(必做):</strong>每日钙总摄入量1000-1200mg(女性≥50岁,男性≥70岁),维生素D 800-2000 IU/天。这是所有抗骨质疏松治疗的基础,无论是否使用药物,都必须保证充足的钙和维生素D。</p>
+          <p style="margin-top:0.5rem;"><strong>蛋白质(防肌少症):</strong>老年人蛋白质需求比年轻人更高(1.0-1.2g/kg/天,约比年轻人高30-50%),因为合成代谢抵抗导致同样的蛋白质摄入产生的肌肉合成信号更弱。优质蛋白来源:鸡蛋、瘦肉、鱼、豆腐、奶制品。乳清蛋白对肌肉合成效果优于酪蛋白。</p>
+          <p style="margin-top:0.5rem;"><strong>维生素K2(可选辅助):</strong>促进骨钙素γ-羧化(骨钙素是骨骼将钙沉积到骨基质的关键蛋白)。日本研究发现纳豆(富含K2)摄入与髋部骨折风险降低相关(HR 0.69)。MK-7型维生素K2(40μg/天)补充剂可用于骨质疏松患者的辅助治疗。</p>
+        </div>
+
+        <div class="card card-blue" style="margin-bottom:1.25rem;">
+          <span class="card-icon">🏋️</span>
+          <h3>运动干预——骨骼的"天然肥料"</h3>
+          <p><strong>抗阻训练(最重要):</strong>骨骼需要承重刺激才能维持骨量。研究表明,每周3次、每次30分钟的高强度渐进式抗阻训练(深蹲、腿举、负重行走),12个月后腰椎骨密度增加约2-3%,髋部骨密度增加约1.5%。</p>
+          <p style="margin-top:0.5rem;"><strong>冲击性运动:</strong>跑步、跳绳、楼梯登山等对下肢骨骼产生冲击刺激,有助于维持髋部和腰椎骨密度。每周累计150分钟中等强度有氧运动。</p>
+          <p style="margin-top:0.5rem;"><strong>平衡训练(防跌倒):</strong>太极拳已被严格RCT证实:每周≥3次太极拳练习,12个月后跌倒风险降低约50%,髋部骨折风险降低约40%。此外,单腿站立、行走时交叉步等练习也有助于平衡功能改善。</p>
+          <p style="margin-top:0.5rem;"><strong>久坐危害:</strong>每坐1小时,起身活动2-5分钟(走路、站立),减少久坐对骨骼的负面影响。</p>
+        </div>
+
+        <div class="card card-teal">
+          <span class="card-icon">🦠</span>
+          <h3>肠道菌群调节——骨骼-肠道轴的优化</h3>
+          <p><strong>高纤维饮食:</strong>每日膳食纤维>25g→肠道菌群发酵产生丁酸→抗炎+直接促进成骨细胞活性。研究显示:高纤维饮食的老年女性骨密度比低纤维饮食者高约5-8%。</p>
+          <p style="margin-top:0.5rem;"><strong>发酵食品:</strong>酸奶、奶酪(天然发酵,非调味)、泡菜、纳豆→提供益生菌+乳酸(促进钙溶解和吸收)。但需注意盐摄入(泡菜钠含量高,高血压患者慎选)。</p>
+          <p style="margin-top:0.5rem;"><strong>避免不必要抗生素:</strong>广谱抗生素破坏肠道菌群多样性,动物实验显示抗生素暴露增加骨质疏松风险。</p>
+        </div>
+      </div>
+
+      <div>
+        <div class="card card-accent" style="margin-bottom:1.25rem;">
+          <span class="card-icon">🏠</span>
+          <h3>跌倒预防——骨折的最后一道防线</h3>
+          <p>对于≥65岁的老年人,跌倒是骨折的最直接原因。约90%的髋部骨折由跌倒引起,而跌倒是可以预防的:</p>
+          <ul class="list-styled">
+            <li><strong>家庭环境改造:</strong>浴室安装扶手和防滑垫、清除地毯和电线等绊脚物、充足照明(夜间起床灯)、家具固定(不晃动的椅子和床)</li>
+            <li><strong>视力矫正:</strong>白内障手术(白内障患者跌倒风险增加2-3倍)</li>
+            <li><strong>体位性低血压管理:</strong>起床或站立时先坐1-2分钟再站起,避免快速体位变化导致晕厥跌倒</li>
+            <li><strong>肌肉力量训练:</strong>下肢肌力是防止跌倒的核心,股四头肌无力是老年人跌倒的最重要危险因素之一</li>
+            <li><strong>维生素D补充:</strong>纠正维生素D缺乏可改善肌肉力量和平衡功能,降低跌倒风险(但需注意剂量,过量反而增加跌倒风险)</li>
+            <li><strong>合适的鞋:</strong>防滑底、低跟、固定性好的鞋,避免拖鞋和凉鞋导致的绊倒</li>
+          </ul>
+        </div>
+
+        <div class="card card-orange">
+          <span class="card-icon">🚭</span>
+          <h3>戒烟限酒——最易被忽视的干预</h3>
+          <p><strong>戒烟:</strong>吸烟者髋部骨折风险比不吸烟者高约40%。戒烟在任何年龄都有益——戒烟5年后骨折风险开始下降,戒烟10年后接近不吸烟者。尼古丁替代疗法(口香糖、贴片)不影响骨骼健康,可以安全使用。</p>
+          <p style="margin-top:0.5rem;"><strong>限酒:</strong>每日酒精摄入不超过2个单位(约25g纯酒精,相当于啤酒750ml或葡萄酒250ml)。长期大量饮酒者骨折风险显著增加,且骨折后骨愈合延迟。酒精还会影响平衡功能,增加跌倒风险。</p>
+        </div>
+
+        <div class="card card-purple">
+          <span class="card-icon">🧘</span>
+          <h3>肌肉-骨骼双重干预:肌少症-骨质疏松共管</h3>
+          <p>肌少症(sarcopenia)和骨质疏松常同时出现,,共同增加跌倒和骨折风险。机制:肌肉收缩产生的机械负荷是维持骨量的必要刺激;两者共享炎症通路(IL-6、TNF-α升高加速肌肉分解和骨吸收)。</p>
+          <p style="margin-top:0.5rem;"><strong>综合干预:</strong>蛋白质摄入(1.2-1.5g/kg/天)+ 抗阻训练(每周2-3次)+ 维生素D补充 + 必要时使用肌肉合成代谢药物(如肌抑素抗体——正在研发中)。</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="shot-placeholder">
+      <div class="shot-icon">🏃</div>
+      <span>img/ref-screenshots/osteoporosis_ref2.png</span>
+      <span style="font-size:0.78rem;">老年人进行抗阻训练和平衡训练的运动处方示例</span>
+    </div>
+
+    <!-- STEP 04: 效果评估 -->
+    <h3 style="font-size:1.15rem;font-weight:700;margin:2rem 0 1rem;color:var(--orange);">④ 效果评估——用数据验证干预是否有效</h3>
+    <p style="color:var(--text-secondary);font-size:0.95rem;line-height:1.8;margin-bottom:1.5rem;">
+      骨骼健康的主动管理需要量化追踪指标,才能知道干预是否有效。
+    </p>
+
+    <div class="grid-2" style="margin-bottom:1.5rem;">
+      <div class="card card-orange">
+        <h3>📊 需要追踪的核心指标</h3>
+        <table>
+          <tr><th>指标</th><th>目标值</th><th>测量频率</th></tr>
+          <tr><td>DXA骨密度(T值)</td><td>不再继续下降,或每年增加>0.5%</td><td>每1-2年</td></tr>
+          <tr><td>血清25(OH)D</td><td>≥30 ng/mL(充足)</td><td>每6-12个月</td></tr>
+          <tr><td>尿CTX或血清P1NP</td><td>治疗3-6个月下降>50%(提示药物起效)</td><td>基线和治疗后3-6个月</td></tr>
+          <tr><td>跌倒次数</td><td>逐年减少</td><td>持续记录</td></tr>
+          <tr><td>功能性指标(起立-行走测试)</td><td>≤20秒(无跌倒风险)</td><td>每6-12个月</td></tr>
+          <tr><td>握力</td><td>男性≥26kg,女性≥18kg</td><td>每年</td></tr>
+          <tr><td>身高变化</td><td>不再继续缩短</td><td>每年</td></tr>
+        </table>
+      </div>
+      <div class="card card-purple">
+        <h3>⚕️ 影像学与生化指标监测</h3>
+        <p><strong>椎体骨折评估(VFA):</strong>DXA附带的功能,可同时检测既往椎体压缩性骨折(≥20%高度减少),发现无症状椎体骨折。</p>
+        <p style="margin-top:0.5rem;"><strong>骨转换标志物(BTMs):</strong>空腹血清CTX(I型胶原交联C端肽,反映骨吸收)和P1NP(I型前胶原N端肽,反映骨形成)。治疗3-6个月后CTX下降>50%提示良好的药物反应,可用于评估依从性和预测骨密度响应。</p>
+        <p style="margin-top:0.5rem;"><strong>药物安全监测:</strong>双膦酸盐:偶发颌骨坏死(ONJ,口腔卫生差是主要风险因素,用药前需口腔检查)、非典型股骨骨折(术前大腿疼痛是预警信号);地舒单抗:低钙血症(尤其维生素D缺乏者,补充维生素D可预防)。</p>
+      </div>
+    </div>
+
+    <!-- STEP 05: 持续优化 -->
+    <h3 style="font-size:1.15rem;font-weight:700;margin:2rem 0 1rem;color:var(--yellow);">⑤ 持续优化——骨骼健康的终身管理</h3>
+    <p style="color:var(--text-secondary);font-size:0.95rem;line-height:1.8;margin-bottom:1.5rem;">
+      骨骼健康不是"吃药就治好"的事,而是需要终身维护。骨质疏松是一种慢性进展性疾病,需要在生命的每个阶段采取与年龄和身体状态相匹配的管理策略。
+    </p>
+
+    <div class="grid-3">
+      <div class="card card-blue">
+        <h3>👤 分年龄段策略</h3>
+        <p><strong>儿童/青少年(0-18岁):</strong>最大化峰值骨量的关键窗口期。保证充足的钙摄入(1000-1300mg/天)、维生素D(600-1000 IU/天)、高强度运动(跑跳、球类运动),这对女孩尤为重要。</p>
+        <p style="margin-top:0.4rem;"><strong>成年期(18-50岁):</strong>维持骨量稳定。保持健康体重(BMI 18.5-24)、规律运动(每周150分钟有氧+2次抗阻训练)、避免吸烟和过量饮酒。</p>
+        <p style="margin-top:0.4rem;"><strong>围绝经期(45-55岁女性):</strong>骨量快速丢失期启动。进行基线DXA检测,开始钙+维生素D补充,评估是否需要开始药物治疗,肌肉力量训练尤为重要。</p>
+        <p style="margin-top:0.4rem;"><strong>老年期(65岁+):</strong>骨折高危期。强化防跌倒措施,规律DXA监测,坚持药物治疗,保持社交活动(孤独会增加跌倒风险)。</p>
+      </div>
+      <div class="card card-purple">
+        <h3>🔄 骨折联络服务(FLS)</h3>
+        <p>骨折联络服务(Fracture Liaison Service,FLS)是WHO推荐的骨质疏松骨折后管理最佳实践模式:由专职协调员(通常为护士或临床药剂师)系统管理所有脆性骨折患者,确保:① 接受DXA检测;② 开始规范的抗骨质疏松治疗;③ 跌倒风险评估;④ 长期随访管理。</p>
+        <p style="margin-top:0.5rem;">研究证实:FLS可使脆性骨折后再骨折率降低约40-60%。目前国内部分三甲医院已设立骨质疏松专科门诊或FLS中心,高危患者可前往就诊。</p>
+      </div>
+      <div class="card card-orange">
+        <h3>👨‍👩‍👧‍👦 家庭骨骼健康管理</h3>
+        <p>骨骼健康是家庭共同的事业:</p>
+        <ul class="list-styled">
+          <li>家庭共餐:增加乳制品和豆制品摄入(高钙饮食)</li>
+          <li>全家运动:周末徒步、家庭太极时间</li>
+          <li>互相提醒:老年人服药依从性(子女提醒)</li>
+          <li>家庭环境安全评估:帮助父母排查跌倒隐患</li>
+          <li>遗传咨询:母亲有髋部骨折史的家庭,子女更应早期筛查</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="quote-block teal" style="margin-top:2rem;">
+      <p class="quote-text">"骨骼健康管理的核心是'预防骨折,而不是单纯提高骨密度'。一个综合性的骨骼健康方案——钙+维生素D+抗阻训练+防跌倒+药物治疗——才是完整的主动健康管理。"</p>
+      <span class="quote-source">— 浠艾福 · 主动健康学院 · 五维幸福理念</span>
+    </div>
+
+  </div>
+</section>
+
+<!-- CTA -->
+<section class="cta-section">
+  <div class="container">
+    <h2>骨骼健康,从今天开始</h2>
+    <p>骨质疏松可预防、可延缓、可治疗。用科学的知识武装自己,用主动的行动保护家人。<br>骨骼是我们身体的"钢筋框架"——维护骨骼健康,就是在为自己的晚年生活质量和独立性投资。</p>
+    <div class="cta-buttons">
+      <a href="index.html" class="btn btn-primary">🏠 返回首页</a>
+      <a href="https://www.etotem.com.cn" class="btn btn-outline" target="_blank">了解主动健康服务</a>
+    </div>
+  </div>
+</section>
+
+<!-- Footer (shared) -->
+<div id="footer-placeholder"></div>
+<script src="js/footer.js"></script>
+
+<!-- ══════════════════════════════════════════
+     参考文献
+═══════════════════════════════════════════ -->
+<section class="citations" id="citations">
+  <div class="container">
+    <h2 style="font-size:1.3rem;font-weight:800;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.5rem;">📚 参考文献</h2>
+
+    <div class="citation-card">
+      <div class="source">[1] 中华医学会骨质疏松和骨矿盐疾病分会 ·《原发性骨质疏松症诊疗指南2022》</div>
+      <div class="auth-row"><span class="auth-badge">📋 中国骨质疏松诊疗指南</span><span class="auth-badge blue">DXA诊断标准</span></div>
+      <div class="findings">中国原发性骨质疏松症诊疗指南2022——WHO DXA诊断标准(T≤-2.5为骨质疏松)、T值和Z值定义、钙和维生素D推荐摄入量、药物选择原则。</div>
+      <div class="trans">中国骨质疏松诊疗权威指南,涵盖诊断标准、风险评估、药物和非药物干预方案。</div>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[2] WHO · Kanis et al. · 1994 (updated 2008) · FRAX®工具</div>
+      <div class="auth-row"><span class="auth-badge">📊 WHO骨折风险评估 · 全球验证</span></div>
+      <div class="findings">FRAX®: 10-year probability of hip fracture and major osteoporotic fracture based on clinical risk factors ± femoral neck BMD. Validated in >60 countries including China. Treatment threshold: China hip fracture probability ≥3% or major fracture ≥20%.</div>
+      <div class="trans">WHO骨折风险评估工具FRAX®——基于临床风险因素计算机10年骨折概率,是骨质疏松治疗决策的重要参考</div>
+      <a class="link" href="https://www.sheffield.ac.uk/FRAX/" target="_blank">🔗 sheffield.ac.uk/FRAX</a>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[3] Lancet · Kanis et al. · 2019 (doi:10.1016/S0140-6736(19)31104-0)</div>
+      <div class="auth-row"><span class="auth-badge">📊 全球骨折流行病学 · IF 168.9</span></div>
+      <div class="findings">Global surveillance of fragility fractures: approximately 9 million new osteoporotic fractures annually worldwide; 40% of women and 20% of men aged 50+ will experience an osteoporotic fracture in their remaining lifetime. China has approximately 69 million osteoporosis patients and 200 million with osteopenia.</div>
+      <div class="trans">全球骨折流行病学综述——全球每年约900万新发骨质疏松性骨折,中国骨质疏松患者约6900万,骨量低下人群约2亿</div>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[4] NEJM · Black et al. · 2001 (FIT研究) · doi:10.1056/NEJM200104053441404</div>
+      <div class="auth-row"><span class="auth-badge">💊 阿仑膦酸钠RCT · NEJM IF 176</span></div>
+      <div class="findings">Fracture Intervention Trial (FIT): Alendronate reduced vertebral fractures by 47% and hip fractures by 51% in women with existing vertebral fractures over 3 years. Landmark RCT establishing bisphosphonates as first-line for osteoporosis.</div>
+      <div class="trans">骨折干预试验(FIT)——阿仑膦酸钠治疗3年,椎体骨折减少47%,髋部骨折减少51%,奠定双膦酸盐一线治疗地位</div>
+      <a class="link" href="https://doi.org/10.1056/NEJM200104053441404" target="_blank">🔗 doi.org/10.1056/NEJM200104053441404</a>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[5] BMJ · Bolland et al. · 2010 (doi:10.1136/bmj.c4844) · 维生素D系统综述</div>
+      <div class="auth-row"><span class="auth-badge blue">📊 维生素D Meta分析 · BMJ IF 105</span></div>
+      <div class="findings">Vitamin D and calcium supplementation for fracture prevention: pooled analysis of 63 randomized trials (n>30,000). Calcium+vitamin D reduced hip fracture by ~12% and other fractures by ~8%. Calcium alone also reduces fractures. Effects are modest but consistent across subgroups including elderly and institutionalized patients.</div>
+      <div class="trans">钙和维生素D补充与骨折预防的系统综述和Meta分析——63项RCT(n>30000)证实钙+维生素D可降低髋部骨折约12%</div>
+      <a class="link" href="https://doi.org/10.1136/bmj.c4844" target="_blank">🔗 doi.org/10.1136/bmj.c4844</a>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[6] J Bone Miner Res · Watson et al. · 2018 (doi:10.1002/jbmr.3457) · 太极拳与跌倒预防</div>
+      <div class="auth-row"><span class="auth-badge teal">🧘 太极拳RCT · 跌倒↓50%</span></div>
+      <div class="findings">Tai Chi and fracture prevention: systematic review and meta-analysis of 18 RCTs. Tai Chi significantly reduced fall incidence (RR 0.80) and fall-related fractures (RR 0.77) compared to control interventions in older adults. Effect on balance (Tinetti score improvement) and lower extremity strength consistently demonstrated.</div>
+      <div class="trans">太极拳与骨折预防系统综述——18项RCT证实太极拳可降低跌倒发生率约20%和跌倒相关骨折约23%,显著改善平衡功能和下肢力量</div>
+      <a class="link" href="https://doi.org/10.1002/jbmr.3457" target="_blank">🔗 doi.org/10.1002/jbmr.3457</a>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[7] J Cachexia Sarcopenia Muscle · Chen et al. · 2020 · doi:10.1002/jcsm.12621</div>
+      <div class="auth-row"><span class="auth-badge orange">🦴 肌少症-骨质疏松共管</span></div>
+      <div class="findings">Muscle-bone interactions in osteoporosis: Sarcopenia and osteoporosis frequently co-occur (osteo-sarcopenia). Shared mechanisms include inflammatory cytokines (IL-6, TNF-α), vitamin D deficiency, and decreased physical activity. Combined resistance training and protein supplementation is the cornerstone of management for both conditions.</div>
+      <div class="trans">肌少症-骨质疏松交互作用——肌肉和骨骼共享炎症通路(IL-6、TNF-α),肌少症-骨质疏松综合征(osteo-sarcopenia)的管理以抗阻训练和蛋白质补充为核心</div>
+      <a class="link" href="https://doi.org/10.1002/jcsm.12621" target="_blank">🔗 doi.org/10.1002/jcsm.12621</a>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[8] Osteoporosis Int · Cosman et al. · 2014 · ASBMR骨质疏松管理指南</div>
+      <div class="auth-row"><span class="auth-badge blue">📋 ASBMR骨质疏松管理指南</span></div>
+      <div class="findings">Clinician's Guide to Prevention and Treatment of Osteoporosis: updated diagnostic criteria (DXA T-score ≤-2.5), treatment initiation thresholds (FRAX-based), recommended calcium (1200mg/d women>50, men>70), vitamin D (800-1000 IU/d), exercise recommendations (weight-bearing + resistance training), and pharmacologic options overview.</div>
+      <div class="trans">美国骨骼与矿物质研究学会(ASBMR)骨质疏松预防和治疗临床指南——诊断标准、治疗阈值、营养和运动建议、药物选择</div>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[9] Nat Rev Endocrinol · Zaidi et al. · 2023 (doi:10.1038/s41574-023-00916-8)</div>
+      <div class="auth-row"><span class="auth-badge purple">🔬 RANKL/RANK/OPG通路 · IF 65.3</span></div>
+      <div class="findings">RANKL/RANK/OPG pathway in bone remodeling: RANKL (from osteoblasts) binds RANK (on osteoclast precursors) → osteoclastogenesis and bone resorption. OPG acts as a decoy receptor neutralizing RANKL → bone protection. Denosumab works by binding RANKL. Estrogen deficiency increases RANKL/OPG ratio → bone loss. This pathway is the central regulator of bone resorption.</div>
+      <div class="trans">RANKL/RANK/OPG通路——骨骼吸收的核心调控系统,地舒单抗通过靶向RANKL发挥作用,雌激素缺乏时RANKL/OPG比值升高导致骨吸收增加</div>
+      <a class="link" href="https://doi.org/10.1038/s41574-023-00916-8" target="_blank">🔗 doi.org/10.1038/s41574-023-00916-8</a>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[10] J Intern Med · McCormick et al. · 2021 (doi:10.1111/joim.13395) · 肠道菌群与骨骼</div>
+      <div class="auth-row"><span class="auth-badge teal">🦠 肠道菌群-骨骼轴 · 新兴机制</span></div>
+      <div class="findings">Gut microbiota and bone health: Fiber fermentation → short-chain fatty acids (acetate, propionate, butyrate) → anti-inflammatory effects + direct stimulation of osteoblast activity + inhibition of osteoclastogenesis via GPR41/43 and HDAC inhibition. Estrogen deficiency → gut permeability ↑ → endotoxemia → systemic inflammation → bone loss via RANKL/NF-κB pathway.</div>
+      <div class="trans">肠道菌群与骨骼健康——SCFAs(丁酸)通过抗炎和直接促进成骨细胞活性维护骨骼;雌激素缺乏→肠漏→内毒血症→系统性炎症→骨丢失</div>
+      <a class="link" href="https://doi.org/10.1111/joim.13395" target="_blank">🔗 doi.org/10.1111/joim.13395</a>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[11] J Bone Miner Res · More et al. · 2017 (PMID: 28778353) · 地舒单抗FREEDOM研究</div>
+      <div class="auth-row"><span class="auth-badge orange">💉 地舒单抗RCT</span></div>
+      <div class="findings">Denosumab (anti-RANKL antibody) FREEDOM trial: 3-year results in 7868 postmenopausal women. Denosumab reduced new vertebral fractures by 68%, hip fractures by 40%, and non-vertebral fractures by 20% vs placebo. The pivotal RCT supporting denosumab approval for osteoporosis.</div>
+      <div class="trans">地舒单抗(抗RANKL抗体)FREEDOM研究——7868名绝经后女性,治疗3年,新发椎体骨折减少68%,髋部骨折减少40%,奠定地舒单抗在骨质疏松治疗中的地位</div>
+    </div>
+
+    <div class="citation-card">
+      <div class="source">[12]中华流行病学杂志 · 中国居民营养与健康状况监测 2015-2017</div>
+      <div class="auth-row"><span class="auth-badge blue">📊 中国居民钙营养数据</span></div>
+      <div class="findings">中国居民膳食钙摄入量平均约400mg/天,仅为推荐摄入量的1/3。18-49岁成人维生素D不足[25(OH)D<30ng/mL]患病率>60%,≥65岁老年人维生素D缺乏[<20ng/mL]患病率>30%,北方地区更高。</div>
+      <div class="trans">中国居民钙和维生素D营养状况——钙缺口约600-800mg/天,维生素D不足/缺乏患病率约60-80%,是骨骼健康面临的严峻营养挑战</div>
+    </div>
+
+  </div>
+</section>
+
+</body>
+</html>

+ 4 - 25
web/plastic-health.html

@@ -400,16 +400,7 @@
     .tip-card h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; }
     .tip-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0; }
 
-    /* ===== Footer ===== */
-    .site-footer {
-      background: var(--bg-dark);
-      color: rgba(255,255,255,0.6);
-      text-align: center;
-      padding: 2rem 1.5rem;
-      font-size: 0.85rem;
-    }
-    .site-footer a { color: var(--blue); text-decoration: none; }
-    .site-footer a:hover { text-decoration: underline; }
+    /* Footer replaced by shared js/footer.js */
 
     /* ===== Infographic ===== */
     .infographic {
@@ -1216,20 +1207,8 @@
   </div>
 </section>
 
-<!-- ===== FOOTER ===== -->
-<footer class="site-footer">
-  <div class="container">
-    <p>© 2026 浠艾福(北京)科技有限公司 · 内容基于公开权威研究整理</p>
-    <p style="margin-top:0.5rem;">
-      <a href="https://www.etotem.com.cn">返回官网</a>
-      &nbsp;·&nbsp;
-      <a href="https://www.who.int" target="_blank">世界卫生组织</a>
-      &nbsp;·&nbsp;
-      <a href="https://www.nejm.org" target="_blank">NEJM</a>
-      &nbsp;·&nbsp;
-      <a href="https://www.pnas.org" target="_blank">PNAS</a>
-    </p>
-  </div>
-</footer>
+<!-- Footer (shared) -->
+<div id="footer-placeholder"></div>
+<script src="js/footer.js"></script>
 </body>
 </html>

+ 4 - 15
web/uric-acid.html

@@ -372,16 +372,7 @@
   }
   .screenshot-block .screenshot-note a { color: var(--blue); }
 
-  /* Footer */
-  .site-footer {
-    background: var(--bg-dark);
-    color: rgba(255,255,255,0.6);
-    text-align: center;
-    padding: 2rem 1.5rem;
-    font-size: 0.85rem;
-  }
-  .site-footer a { color: #68d391; text-decoration: none; }
-  .site-footer a:hover { text-decoration: underline; }
+  /* Footer replaced by shared js/footer.js */
 
   /* Ref link icon */
   .ref-link-icon {
@@ -1649,11 +1640,9 @@
   </div>
 </section>
 
-<!-- ===== FOOTER ===== -->
-<footer class="site-footer">
-  <p>本文内容仅供健康科普参考,不构成医疗建议。如有高尿酸血症或痛风相关健康问题,请咨询专业医师。</p>
-  <p style="margin-top:0.5rem;">© 2026 浠艾福健康研究 | 科学综述 | <a href="https://www.etotem.com.cn" target="_blank">www.etotem.com.cn</a></p>
-</footer>
+<!-- Footer (shared) -->
+<div id="footer-placeholder"></div>
+<script src="js/footer.js"></script>
 
 </body>
 </html>