صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
liaoxg
/
cfc
1
1
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
درخت: b66ba3d8ff
شاخه‌ها تگ‌ها
cfc
/
web
/
ppt
/
index.html

index.html 81 KB
تاريخچه خام

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <title>浠艾福 会员卡</title>
    7. 

  7.     <style>
    8. 

  8.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    9. 

  9.         * { margin:0; padding:0; box-sizing:border-box; }
    10. 

  10.         body { font-family:'Inter',-apple-system,sans-serif; background:#111; overflow:hidden; width:100vw; height:100vh; }
    11. 

  11.         .slide-container { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; }
    12. 

  12.         .slide { width:1280px; height:720px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--scale)); opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease; background:#fff; overflow:hidden; }
    13. 

  13.         .slide.active { opacity:1; pointer-events:auto; }
    14. 

  14.         .nav { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; z-index:100; }
    15. 

  15.         .nav-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:all .25s; }
    16. 

  16.         .nav-dot.active { background:#4ecdc4; transform:scale(1.4); }
    17. 

  17.         .nav-dot:hover { background:rgba(255,255,255,.7); }
    18. 

  18.         .nav-btn { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; color:#fff; font-size:14px; }
    19. 

  19.         .nav-btn:hover { background:rgba(255,255,255,.3); }
    20. 

  20.         .slide-counter { position:fixed; top:20px; right:24px; font-size:13px; color:rgba(255,255,255,.5); z-index:100; font-weight:500; }
    21. 

  21.         .fullscreen-btn { position:fixed; top:20px; left:24px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:6px; padding:6px 12px; cursor:pointer; z-index:100; color:#fff; font-size:12px; transition:background .2s; }
    22. 

  22.         .fullscreen-btn:hover { background:rgba(255,255,255,.3); }
    23. 

  23.     </style>
    24. 

  24. </head>
    25. 

  25. <body>
    26. 

  26.     <button class="fullscreen-btn" onclick="toggleFullscreen()">⛶ 全屏</button>
    27. 

  27.     <div class="slide-counter"><span id="currentSlide">1</span> / 10</div>
    28. 

  28.     <div class="slide-container" id="slideContainer"></div>
    29. 

  29.     <div class="nav">
    30. 

  30.         <div class="nav-btn" onclick="prevSlide()">◀</div>
    31. 

  31.         <div class="nav-dots" id="navDots"></div>
    32. 

  32.         <div class="nav-btn" onclick="nextSlide()">▶</div>
    33. 

  33.     </div>
    34. 

  34.     <script>
    35. 

  35.     const slides = [
    36. 

  36. `<!DOCTYPE html>
    37. 

  37. <html lang="zh-CN">
    38. 

  38. <head>
    39. 

  39.     <meta charset="UTF-8">
    40. 

  40.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    41. 

  41.     <title>浠艾福 会员卡</title>
    42. 

  42.     <style>
    43. 

  43.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    44. 

  44.         * { margin: 0; padding: 0; box-sizing: border-box; }
    45. 

  45.         body {
    46. 

  46.             width: 1280px; height: 720px;
    47. 

  47.             background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
    48. 

  48.             font-family: 'Inter', -apple-system, sans-serif;
    49. 

  49.             overflow: hidden; position: relative;
    50. 

  50.         }
    51. 

  51.         .top-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #00b4d8, #4ecdc4, #95e1d3); }
    52. 

  52.         .ecg { position: absolute; top: 50px; right: 80px; width: 300px; height: 60px; opacity: 0.12; }
    53. 

  53.         .ecg path { stroke: #00b4d8; stroke-width: 2; fill: none; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 3s ease-in-out infinite; }
    54. 

  54.         @keyframes draw { 0%{stroke-dashoffset:400} 50%{stroke-dashoffset:0} 100%{stroke-dashoffset:-400} }
    55. 

  55.         .cross { position: absolute; top: 50px; left: 80px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
    56. 

  56.         .cross::before, .cross::after { content:''; position: absolute; background: #dc2626; border-radius: 3px; }
    57. 

  57.         .cross::before { width: 22px; height: 7px; }
    58. 

  58.         .cross::after { width: 7px; height: 22px; }
    59. 

  59.         .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 80%; }
    60. 

  60.         .label { font-size: 13px; font-weight: 600; letter-spacing: 0.25em; color: #4ecdc4; margin-bottom: 28px; display: flex; align-items: center; justify-content: center; gap: 10px; }
    61. 

  61.         .label::before { content:''; width: 8px; height: 8px; background: #4ecdc4; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
    62. 

  62.         @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
    63. 

  63.         .title { font-size: 80px; font-weight: 800; letter-spacing: -0.04em; color: #0a2540; margin-bottom: 12px; }
    64. 

  64.         .subtitle { font-size: 32px; font-weight: 500; color: #5a7a96; margin-bottom: 40px; letter-spacing: 0.12em; }
    65. 

  65.         .tagline { display: inline-block; background: linear-gradient(135deg, #f0fdfa, #e0f5f1); border: 2px solid #4ecdc4; border-radius: 8px; padding: 18px 48px; }
    66. 

  66.         .tagline-text { font-size: 20px; font-weight: 700; color: #00b4d8; letter-spacing: 0.08em; }
    67. 

  67.         .page { position: absolute; bottom: 30px; right: 40px; font-size: 12px; color: #5a7a96; opacity: 0.5; font-weight: 500; }
    68. 

  68.     </style>
    69. 

  69. </head>
    70. 

  70. <body>
    71. 

  71.     <div class="top-bar"></div>
    72. 

  72.     <svg class="ecg" viewBox="0 0 300 60"><path d="M0,30 L50,30 L60,10 L70,50 L80,20 L90,40 L100,30 L150,30 L160,10 L170,50 L180,20 L190,40 L200,30 L250,30 L260,10 L270,50 L280,20 L290,40 L300,30"/></svg>
    73. 

  73.     <div class="cross"></div>
    74. 

  74.     <div class="content">
    75. 

  75.         <div class="label">HEALTH MEMBERSHIP</div>
    76. 

  76.         <div class="title">浠艾福</div>
    77. 

  77.         <div class="subtitle">会 员 卡</div>
    78. 

  78.         <div class="tagline"><div class="tagline-text">精准营养 · 主动健康 · 家庭守护</div></div>
    79. 

  79.     </div>
    80. 

  80.     <div class="page">01 / 10</div>
    81. 

  81. </body>
    82. 

  82. </html>`,
    83. 

  83. `<!DOCTYPE html>
    84. 

  84. <html lang="zh-CN">
    85. 

  85. <head>
    86. 

  86.     <meta charset="UTF-8">
    87. 

  87.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    88. 

  88.     <title>触目惊心的数据</title>
    89. 

  89.     <style>
    90. 

  90.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    91. 

  91.         * { margin:0; padding:0; box-sizing:border-box; }
    92. 

  92.         body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
    93. 

  93.         .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
    94. 

  94.         .ecg { position:absolute; top:40px; right:60px; width:220px; height:44px; opacity:0.1; }
    95. 

  95.         .ecg path { stroke:#00b4d8; stroke-width:2; fill:none; stroke-dasharray:280; stroke-dashoffset:280; animation:draw 3s ease-in-out infinite; }
    96. 

  96.         @keyframes draw { 0%{stroke-dashoffset:280} 50%{stroke-dashoffset:0} 100%{stroke-dashoffset:-280} }
    97. 

  97.         .label { position:absolute; top:56px; left:80px; font-size:13px; font-weight:600; letter-spacing:0.22em; color:#4ecdc4; display:flex; align-items:center; gap:10px; }
    98. 

  98.         .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
    99. 

  99.         .content { position:absolute; top:100px; left:80px; right:80px; }
    100. 

  100.         .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
    101. 

  101.         .sub { font-size:16px; color:#5a7a96; margin-bottom:32px; }
    102. 

  102.         .big-stat { display:flex; align-items:center; gap:40px; margin-bottom:36px; }
    103. 

  103.         .big-number { font-size:120px; font-weight:800; color:#dc2626; line-height:1; letter-spacing:-0.04em; }
    104. 

  104.         .big-number span { font-size:48px; color:#dc2626; }
    105. 

  105.         .big-label { font-size:22px; font-weight:600; color:#0a2540; line-height:1.6; }
    106. 

  106.         .big-label em { font-style:normal; color:#dc2626; }
    107. 

  107.         .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
    108. 

  108.         .card { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:20px 22px; position:relative; overflow:hidden; }
    109. 

  109.         .card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#00b4d8,#4ecdc4); }
    110. 

  110.         .card-num { font-size:36px; font-weight:800; color:#00b4d8; font-variant-numeric:tabular-nums; }
    111. 

  111.         .card-num .unit { font-size:18px; font-weight:600; color:#4ecdc4; }
    112. 

  112.         .card-label { font-size:14px; font-weight:600; color:#0a2540; margin-top:4px; }
    113. 

  113.         .card-desc { font-size:12px; color:#5a7a96; margin-top:4px; line-height:1.4; }
    114. 

  114.         .bottom { position:absolute; bottom:70px; left:80px; right:80px; background:linear-gradient(135deg,#fee2e2,#fef2f2); border:1px solid #fca5a5; border-radius:8px; padding:18px 24px; display:flex; align-items:center; gap:14px; }
    115. 

  115.         .bottom-icon { width:40px; height:40px; background:#dc2626; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
    116. 

  116.         .bottom-text { font-size:15px; font-weight:600; color:#991b1b; line-height:1.5; }
    117. 

  117.         .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
    118. 

  118.     </style>
    119. 

  119. </head>
    120. 

  120. <body>
    121. 

  121.     <div class="top-bar"></div>
    122. 

  122.     <svg class="ecg" viewBox="0 0 220 44"><path d="M0,22 L35,22 L44,6 L53,38 L62,15 L71,29 L80,22 L120,22 L129,6 L138,38 L147,15 L156,29 L165,22 L200,22 L209,6 L218,38 L220,22"/></svg>
    123. 

  123.     <div class="label">HEALTH CRISIS</div>
    124. 

  124.     <div class="content">
    125. 

  125.         <div class="title">触目惊心的数据</div>
    126. 

  126.         <div class="sub">中国心脑血管疾病死亡占总死亡人数 40% 以上，癌症占近 30%</div>
    127. 

  127.         <div class="big-stat">
    128. 

  128.             <div class="big-number">1/5</div>
    129. 

  129.             <div class="big-label">每 <em>5 个</em>成年人死亡<br/>就有 <em>1 人</em>死于心脑血管疾病</div>
    130. 

  130.         </div>
    131. 

  131.         <div class="grid">
    132. 

  132.             <div class="card">
    133. 

  133.                 <div class="card-num">508<span class="unit">万/年</span></div>
    134. 

  134.                 <div class="card-label">心脑血管疾病死亡</div>
    135. 

  135.                 <div class="card-desc">2025年，超过新冠全球年度死亡的5倍</div>
    136. 

  136.             </div>
    137. 

  137.             <div class="card">
    138. 

  138.                 <div class="card-num">3.3<span class="unit">亿</span></div>
    139. 

  139.                 <div class="card-label">心脑血管患病人群</div>
    140. 

  140.                 <div class="card-desc">高血压2.7亿·高血脂3.8亿·糖尿病1.5亿</div>
    141. 

  141.             </div>
    142. 

  142.             <div class="card">
    143. 

  143.                 <div class="card-num">515<span class="unit">万/年</span></div>
    144. 

  144.                 <div class="card-label">新发癌症</div>
    145. 

  145.                 <div class="card-desc">全球占比25%，发病年轻化趋势明显</div>
    146. 

  146.             </div>
    147. 

  147.             <div class="card">
    148. 

  148.                 <div class="card-num">1.8<span class="unit">亿</span></div>
    149. 

  149.                 <div class="card-label">高尿酸人群</div>
    150. 

  150.                 <div class="card-desc">肾脏排泄障碍，约30%经肠道代谢</div>
    151. 

  151.             </div>
    152. 

  152.             <div class="card">
    153. 

  153.                 <div class="card-num">7000<span class="unit">万</span></div>
    154. 

  154.                 <div class="card-label">骨质疏松人群</div>
    155. 

  155.                 <div class="card-desc">50岁以上患病率19.2%，女性32.1%</div>
    156. 

  156.             </div>
    157. 

  157.             <div class="card">
    158. 

  158.                 <div class="card-num">1.7<span class="unit">亿</span></div>
    159. 

  159.                 <div class="card-label">老年痴呆人群</div>
    160. 

  160.                 <div class="card-desc">全球患者，神经炎症与肠脑轴关联</div>
    161. 

  161.             </div>
    162. 

  162.         </div>
    163. 

  163.     </div>
    164. 

  164.     <div class="bottom">
    165. 

  165.         <div class="bottom-icon">
    166. 

  166.             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line><circle cx="12" cy="12" r="10"></circle></svg>
    167. 

  167.         </div>
    168. 

  168.         <div class="bottom-text">慢性病不再遥远——它就在你我身边，90%的心脑血管疾病由肠道菌群紊乱引发</div>
    169. 

  169.     </div>
    170. 

  170.     <div class="page">02 / 10</div>
    171. 

  171. </body>
    172. 

  172. </html>`,
    173. 

  173. `<!DOCTYPE html>
    174. 

  174. <html lang="zh-CN">
    175. 

  175. <head>
    176. 

  176.     <meta charset="UTF-8">
    177. 

  177.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    178. 

  178.     <title>健康风险自检</title>
    179. 

  179.     <style>
    180. 

  180.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    181. 

  181.         * { margin:0; padding:0; box-sizing:border-box; }
    182. 

  182.         body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
    183. 

  183.         .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
    184. 

  184.         .label { position:absolute; top:56px; left:80px; font-size:13px; font-weight:600; letter-spacing:0.22em; color:#4ecdc4; display:flex; align-items:center; gap:10px; }
    185. 

  185.         .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
    186. 

  186.         .content { position:absolute; top:100px; left:80px; right:80px; }
    187. 

  187.         .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
    188. 

  188.         .sub { font-size:16px; color:#5a7a96; margin-bottom:28px; }
    189. 

  189.         .cols { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
    190. 

  190.         .item { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:16px 20px; display:flex; align-items:center; gap:14px; transition:border-color .2s; }
    191. 

  191.         .item:hover { border-color:#4ecdc4; }
    192. 

  192.         .check { width:28px; height:28px; border:2px solid #4ecdc4; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; color:#4ecdc4; font-weight:700; }
    193. 

  193.         .item-text { font-size:15px; font-weight:500; color:#0a2540; }
    194. 

  194.         .bottom { position:absolute; bottom:60px; left:80px; right:80px; display:flex; gap:20px; align-items:stretch; }
    195. 

  195.         .score-box { flex:1; background:#f0fdfa; border:1px solid #4ecdc4; border-radius:8px; padding:18px 24px; }
    196. 

  196.         .score-title { font-size:15px; font-weight:700; color:#0a2540; margin-bottom:6px; }
    197. 

  197.         .score-desc { font-size:13px; color:#5a7a96; line-height:1.5; }
    198. 

  198.         .badges { display:flex; gap:10px; flex-shrink:0; align-items:center; }
    199. 

  199.         .badge { padding:8px 16px; border-radius:20px; font-size:12px; font-weight:700; }
    200. 

  200.         .b-green { background:#dcfce7; color:#16a34a; }
    201. 

  201.         .b-yellow { background:#fef3c7; color:#d97706; }
    202. 

  202.         .b-red { background:#fee2e2; color:#dc2626; }
    203. 

  203.         .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
    204. 

  204.     </style>
    205. 

  205. </head>
    206. 

  206. <body>
    207. 

  207.     <div class="top-bar"></div>
    208. 

  208.     <div class="label">SELF CHECK</div>
    209. 

  209.     <div class="content">
    210. 

  210.         <div class="title">健康风险自检清单</div>
    211. 

  211.         <div class="sub">对照以下症状，看看你中了几条？</div>
    212. 

  212.         <div class="cols">
    213. 

  213.             <div class="item"><div class="check">1</div><div class="item-text">经常疲劳、精力不足，睡醒也累</div></div>
    214. 

  214.             <div class="item"><div class="check">2</div><div class="item-text">消化不良，经常腹胀、便秘或腹泻</div></div>
    215. 

  215.             <div class="item"><div class="check">3</div><div class="item-text">睡眠质量差，失眠、多梦、早醒</div></div>
    216. 

  216.             <div class="item"><div class="check">4</div><div class="item-text">情绪波动大，容易焦虑、烦躁或低落</div></div>
    217. 

  217.             <div class="item"><div class="check">5</div><div class="item-text">免疫力下降，换季必感冒或反复感染</div></div>
    218. 

  218.             <div class="item"><div class="check">6</div><div class="item-text">皮肤问题：痤疮、湿疹、暗沉、长斑</div></div>
    219. 

  219.             <div class="item"><div class="check">7</div><div class="item-text">体重管理困难，怎么减都不掉秤</div></div>
    220. 

  220.             <div class="item"><div class="check">8</div><div class="item-text">记忆力下降，注意力不集中，脑子不清醒</div></div>
    221. 

  221.         </div>
    222. 

  222.     </div>
    223. 

  223.     <div class="bottom">
    224. 

  224.         <div class="score-box">
    225. 

  225.             <div class="score-title">评分标准</div>
    226. 

  226.             <div class="score-desc">出现 0-2 项 → 健康状态 &nbsp;|&nbsp; 3-5 项 → 亚健康警报 &nbsp;|&nbsp; 6 项以上 → 慢病高风险</div>
    227. 

  227.         </div>
    228. 

  228.         <div class="badges">
    229. 

  229.             <div class="badge b-green">0-2 项</div>
    230. 

  230.             <div class="badge b-yellow">3-5 项</div>
    231. 

  231.             <div class="badge b-red">6+ 项</div>
    232. 

  232.         </div>
    233. 

  233.     </div>
    234. 

  234.     <div class="page">03 / 10</div>
    235. 

  235. </body>
    236. 

  236. </html>`,
    237. 

  237. `<!DOCTYPE html>
    238. 

  238. <html lang="zh-CN">
    239. 

  239. <head>
    240. 

  240.     <meta charset="UTF-8">
    241. 

  241.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    242. 

  242.     <title>肠道菌群科学</title>
    243. 

  243.     <style>
    244. 

  244.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    245. 

  245.         * { margin:0; padding:0; box-sizing:border-box; }
    246. 

  246.         body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
    247. 

  247.         .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
    248. 

  248.         .label { position:absolute; top:56px; left:80px; font-size:13px; font-weight:600; letter-spacing:0.22em; color:#4ecdc4; display:flex; align-items:center; gap:10px; }
    249. 

  249.         .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
    250. 

  250.         .content { position:absolute; top:100px; left:80px; right:80px; }
    251. 

  251.         .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
    252. 

  252.         .sub { font-size:16px; color:#5a7a96; margin-bottom:28px; }
    253. 

  253.         .top-card { background:linear-gradient(135deg,#f0fdfa,#e0f5f1); border:1px solid #4ecdc4; border-radius:10px; padding:24px 32px; margin-bottom:24px; display:flex; gap:32px; align-items:center; }
    254. 

  254.         .top-card-icon { font-size:48px; flex-shrink:0; }
    255. 

  255.         .top-card-text { flex:1; }
    256. 

  256.         .top-card-title { font-size:20px; font-weight:700; color:#0a2540; margin-bottom:8px; }
    257. 

  257.         .top-card-desc { font-size:14px; color:#5a7a96; line-height:1.7; }
    258. 

  258.         .evidence { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
    259. 

  259.         .ev-card { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:18px 20px; position:relative; overflow:hidden; }
    260. 

  260.         .ev-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#00b4d8,#4ecdc4); }
    261. 

  261.         .ev-year { font-size:12px; font-weight:700; color:#4ecdc4; margin-bottom:6px; letter-spacing:0.05em; }
    262. 

  262.         .ev-title { font-size:14px; font-weight:700; color:#0a2540; margin-bottom:6px; }
    263. 

  263.         .ev-desc { font-size:12px; color:#5a7a96; line-height:1.5; }
    264. 

  264.         .ev-journal { font-size:11px; color:#4ecdc4; font-weight:600; margin-top:6px; }
    265. 

  265.         .conclusion { background:#f0fdfa; border-left:4px solid #4ecdc4; border-radius:0 8px 8px 0; padding:16px 24px; }
    266. 

  266.         .conclusion p { font-size:15px; font-weight:600; color:#0a2540; line-height:1.6; }
    267. 

  267.         .conclusion strong { color:#00b4d8; }
    268. 

  268.         .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
    269. 

  269.     </style>
    270. 

  270. </head>
    271. 

  271. <body>
    272. 

  272.     <div class="top-bar"></div>
    273. 

  273.     <div class="label">GUT SCIENCE</div>
    274. 

  274.     <div class="content">
    275. 

  275.         <div class="title">肠道菌群：人体健康的"总开关"</div>
    276. 

  276.         <div class="sub">顶尖医学期刊持续证实：肠道微生态决定全身健康走向</div>
    277. 

  277.         <div class="top-card">
    278. 

  278.             <div class="top-card-icon"><svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M7 5l5-3 5 3M7 19l5 3 5-3M7 11l5-3 5 3M7 13l5 3 5-3"/></svg></div>
    279. 

  279.             <div class="top-card-text">
    280. 

  280.                 <div class="top-card-title">你的第二基因组</div>
    281. 

  281.                 <div class="top-card-desc">肠道菌群基因总量约为人类基因的 150 倍，被称为人体"第二基因组"。它调控免疫、代谢、情绪、炎症等几乎所有生理过程，是你健康的底层操作系统。</div>
    282. 

  282.             </div>
    283. 

  283.         </div>
    284. 

  284.         <div class="evidence">
    285. 

  285.             <div class="ev-card">
    286. 

  286.                 <div class="ev-year">2011 · NATURE</div>
    287. 

  287.                 <div class="ev-title">肠道-心脑血管关联</div>
    288. 

  288.                 <div class="ev-desc">肠道菌群代谢直接驱动心脑血管疾病发生，正式建立病理关联体系</div>
    289. 

  289.                 <div class="ev-journal">Nature</div>
    290. 

  290.             </div>
    291. 

  291.             <div class="ev-card">
    292. 

  292.                 <div class="ev-year">2013 · 临床突破</div>
    293. 

  293.                 <div class="ev-title">菌群移植治愈率</div>
    294. 

  294.                 <div class="ev-desc">菌群移植对特定肠道疾病治愈率超 90%，可显著改善自闭症等神经问题</div>
    295. 

  295.                 <div class="ev-journal">多中心临床研究</div>
    296. 

  296.             </div>
    297. 

  297.             <div class="ev-card">
    298. 

  298.                 <div class="ev-year">2020 · CELL</div>
    299. 

  299.                 <div class="ev-title">PAG 致病机制</div>
    300. 

  300.                 <div class="ev-desc">菌群代谢产物 PAG 直接加速血管炎症、斑块不稳定，诱发急性心脑血管事件</div>
    301. 

  301.                 <div class="ev-journal">Cell</div>
    302. 

  302.             </div>
    303. 

  303.         </div>
    304. 

  304.         <div class="conclusion">
    305. 

  305.             <p>核心结论：<strong>肠道微生态是维持人体健康的"总开关"</strong>——菌群失衡引发肠漏 → 毒素入血 → 全身慢性炎症 → 心脑血管病、糖尿病、癌症……</p>
    306. 

  306.         </div>
    307. 

  307.     </div>
    308. 

  308.     <div class="page">04 / 10</div>
    309. 

  309. </body>
    310. 

  310. </html>`,
    311. 

  311. `<!DOCTYPE html>
    312. 

  312. <html lang="zh-CN">
    313. 

  313. <head>
    314. 

  314.     <meta charset="UTF-8">
    315. 

  315.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    316. 

  316.     <title>传统医疗的困境</title>
    317. 

  317.     <style>
    318. 

  318.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    319. 

  319.         * { margin:0; padding:0; box-sizing:border-box; }
    320. 

  320.         body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
    321. 

  321.         .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
    322. 

  322.         .label { position:absolute; top:56px; left:80px; font-size:13px; font-weight:600; letter-spacing:0.22em; color:#4ecdc4; display:flex; align-items:center; gap:10px; }
    323. 

  323.         .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
    324. 

  324.         .content { position:absolute; top:100px; left:80px; right:80px; }
    325. 

  325.         .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
    326. 

  326.         .sub { font-size:16px; color:#5a7a96; margin-bottom:28px; }
    327. 

  327.         .pain-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; }
    328. 

  328.         .pain-card { background:#fff; border:1px solid #fee2e2; border-radius:8px; padding:20px 24px; display:flex; gap:16px; align-items:flex-start; }
    329. 

  329.         .pain-icon { width:44px; height:44px; background:#fee2e2; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
    330. 

  330.         .pain-title { font-size:16px; font-weight:700; color:#991b1b; margin-bottom:4px; }
    331. 

  331.         .pain-desc { font-size:13px; color:#5a7a96; line-height:1.5; }
    332. 

  332.         .flow { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:24px; }
    333. 

  333.         .flow-step { background:#fee2e2; border-radius:8px; padding:12px 20px; text-align:center; }
    334. 

  334.         .flow-step-label { font-size:13px; font-weight:700; color:#991b1b; }
    335. 

  335.         .flow-step-sub { font-size:11px; color:#5a7a96; margin-top:2px; }
    336. 

  336.         .flow-arrow { font-size:20px; color:#dc2626; padding:0 6px; }
    337. 

  337.         .bottom { position:absolute; bottom:60px; left:80px; right:80px; background:linear-gradient(135deg,#f0fdfa,#e0f5f1); border:1px solid #4ecdc4; border-radius:8px; padding:18px 28px; display:flex; align-items:center; gap:16px; }
    338. 

  338.         .bottom-icon { font-size:32px; flex-shrink:0; }
    339. 

  339.         .bottom-text { font-size:15px; font-weight:600; color:#0a2540; line-height:1.5; }
    340. 

  340.         .bottom-text strong { color:#00b4d8; }
    341. 

  341.         .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
    342. 

  342.     </style>
    343. 

  343. </head>
    344. 

  344. <body>
    345. 

  345.     <div class="top-bar"></div>
    346. 

  346.     <div class="label">MEDICAL LIMITS</div>
    347. 

  347.     <div class="content">
    348. 

  348.         <div class="title">吃药治病吗？</div>
    349. 

  349.         <div class="sub">传统医疗在慢性病管理上的困境</div>
    350. 

  350.         <div class="pain-grid">
    351. 

  351.             <div class="pain-card">
    352. 

  352.                 <div class="pain-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z"/><path d="m8.5 8 6 6"/></svg></div>
    353. 

  353.                 <div>
    354. 

  354.                     <div class="pain-title">药一辈子不能停</div>
    355. 

  355.                     <div class="pain-desc">高血压药、降糖药、他汀类——一旦开始就是终身服药，药物只控制指标，不解决根因</div>
    356. 

  356.                 </div>
    357. 

  357.             </div>
    358. 

  358.             <div class="pain-card">
    359. 

  359.                 <div class="pain-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg></div>
    360. 

  360.                 <div>
    361. 

  361.                     <div class="pain-title">治好一种，引发另一种</div>
    362. 

  362.                     <div class="pain-desc">利尿剂降压→血粘稠度升高；降糖药→胃肠道副作用→菌群进一步紊乱</div>
    363. 

  363.                 </div>
    364. 

  364.             </div>
    365. 

  365.             <div class="pain-card">
    366. 

  366.                 <div class="pain-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg></div>
    367. 

  367.                 <div>
    368. 

  368.                     <div class="pain-title">发病率越来越高</div>
    369. 

  369.                     <div class="pain-desc">原发高血压从1959年的5.1%飙升到2025年的26.4%——医疗进步了，病人却更多了</div>
    370. 

  370.                 </div>
    371. 

  371.             </div>
    372. 

  372.             <div class="pain-card">
    373. 

  373.                 <div class="pain-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
    374. 

  374.                 <div>
    375. 

  375.                     <div class="pain-title">有病才去医院</div>
    376. 

  376.                     <div class="pain-desc">等到确诊已是中晚期，冠脉堵塞70%才有心绞痛症状，30岁斑块就开始加速</div>
    377. 

  377.                 </div>
    378. 

  378.             </div>
    379. 

  379.         </div>
    380. 

  380.         <div class="flow">
    381. 

  381.             <div class="flow-step"><div class="flow-step-label">吃药</div><div class="flow-step-sub">控制指标</div></div>
    382. 

  382.             <div class="flow-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></div>
    383. 

  383.             <div class="flow-step"><div class="flow-step-label">药量加大</div><div class="flow-step-sub">耐药性</div></div>
    384. 

  384.             <div class="flow-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></div>
    385. 

  385.             <div class="flow-step"><div class="flow-step-label">联合用药</div><div class="flow-step-sub">副作用叠加</div></div>
    386. 

  386.             <div class="flow-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></div>
    387. 

  387.             <div class="flow-step"><div class="flow-step-label">并发症</div><div class="flow-step-sub">心梗/脑梗</div></div>
    388. 

  388.             <div class="flow-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></div>
    389. 

  389.             <div class="flow-step"><div class="flow-step-label">手术/搭桥</div><div class="flow-step-sub">应急方案</div></div>
    390. 

  390.         </div>
    391. 

  391.         <div class="bottom">
    392. 

  392.             <div class="bottom-icon"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.2.5 2.4 1.5 3.4.8.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
    393. 

  393.             <div class="bottom-text"><strong>核心问题：</strong>传统医疗处理的是"结果"（症状和指标），而非"原因"（菌群失衡和慢性炎症）。真正的健康，需要从源头主动干预。</div>
    394. 

  394.         </div>
    395. 

  395.     </div>
    396. 

  396.     <div class="page">05 / 10</div>
    397. 

  397. </body>
    398. 

  398. </html>`,
    399. 

  399. `<!DOCTYPE html>
    400. 

  400. <html lang="zh-CN">
    401. 

  401. <head>
    402. 

  402.     <meta charset="UTF-8">
    403. 

  403.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    404. 

  404.     <title>主动健康理念</title>
    405. 

  405.     <style>
    406. 

  406.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    407. 

  407.         * { margin:0; padding:0; box-sizing:border-box; }
    408. 

  408.         body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
    409. 

  409.         .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
    410. 

  410.         .label { position:absolute; top:56px; left:80px; font-size:13px; font-weight:600; letter-spacing:0.22em; color:#4ecdc4; display:flex; align-items:center; gap:10px; }
    411. 

  411.         .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
    412. 

  412.         .content { position:absolute; top:100px; left:80px; right:80px; }
    413. 

  413.         .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
    414. 

  414.         .sub { font-size:16px; color:#5a7a96; margin-bottom:36px; }
    415. 

  415.         .vs { display:flex; gap:32px; margin-bottom:32px; }
    416. 

  416.         .vs-card { flex:1; border-radius:12px; padding:32px 28px; position:relative; overflow:hidden; }
    417. 

  417.         .vs-left { background:#fee2e2; border:1px solid #fca5a5; }
    418. 

  418.         .vs-right { background:#f0fdfa; border:2px solid #4ecdc4; }
    419. 

  419.         .vs-badge { position:absolute; top:16px; right:16px; font-size:11px; font-weight:700; padding:4px 12px; border-radius:12px; }
    420. 

  420.         .vs-left .vs-badge { background:#dc2626; color:#fff; }
    421. 

  421.         .vs-right .vs-badge { background:#4ecdc4; color:#fff; }
    422. 

  422.         .vs-icon { font-size:36px; margin-bottom:12px; display:flex; justify-content:center; }
    423. 

  423.         .micro-section { position:absolute; bottom:100px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; }
    424. 

  424.         .micro-label { font-size:12px; font-weight:700; color:#4ecdc4; letter-spacing:0.15em; display:flex; align-items:center; gap:8px; }
    425. 

  425.         .micro-label::before, .micro-label::after { content:''; width:40px; height:1px; background:#4ecdc4; }
    426. 

  426.         .micro-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:620px; justify-content:center; }
    427. 

  427.         .micro-card { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:14px; width:140px; display:flex; flex-direction:column; gap:6px; }
    428. 

  428.         .micro-card-header { display:flex; align-items:center; gap:6px; }
    429. 

  429.         .micro-card-title { font-size:13px; font-weight:700; color:#0a2540; }
    430. 

  430.         .micro-card-desc { font-size:11px; color:#5a7a96; line-height:1.4; }
    431. 

  431.         .vs-title { font-size:22px; font-weight:800; margin-bottom:8px; }
    432. 

  432.         .vs-left .vs-title { color:#991b1b; }
    433. 

  433.         .vs-right .vs-title { color:#0a2540; }
    434. 

  434.         .vs-desc { font-size:14px; line-height:1.7; }
    435. 

  435.         .vs-left .vs-desc { color:#7f1d1d; }
    436. 

  436.         .vs-right .vs-desc { color:#5a7a96; }
    437. 

  437.         .vs-list { list-style:none; margin-top:12px; }
    438. 

  438.         .vs-list li { font-size:13px; padding:4px 0; display:flex; align-items:center; gap:8px; }
    439. 

  439.         .vs-left .vs-list li { color:#991b1b; }
    440. 

  440.         .vs-right .vs-list li { color:#0a2540; }
    441. 

  441.         .vs-left .vs-list li .icon-x { width:14px; height:14px; flex-shrink:0; }
    442. 

  442.         .vs-right .vs-list li .icon-check { width:14px; height:14px; flex-shrink:0; }
    443. 

  443.         .quote { position:absolute; bottom:40px; left:80px; right:80px; background:#f8fffe; border-left:4px solid #4ecdc4; border-radius:0 8px 8px 0; padding:18px 24px; }
    444. 

  444.         .quote p { font-size:16px; color:#0a2540; font-weight:500; line-height:1.7; }
    445. 

  445.         .quote strong { color:#00b4d8; font-weight:700; }
    446. 

  446.         .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
    447. 

  447.     </style>
    448. 

  448. </head>
    449. 

  449. <body>
    450. 

  450.     <div class="top-bar"></div>
    451. 

  451.     <div class="label">PROACTIVE HEALTH</div>
    452. 

  452.     <div class="content">
    453. 

  453.         <div class="title">从"治病"到"不生病"</div>
    454. 

  454.         <div class="sub">主动健康：在疾病发生之前，管理好你的健康</div>
    455. 

  455.         <div class="vs">
    456. 

  456.             <div class="vs-card vs-left">
    457. 

  457.                 <div class="vs-badge">传统模式</div>
    458. 

  458.                 <div class="vs-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
    459. 

  459.                 <div class="vs-title">被动医疗</div>
    460. 

  460.                 <div class="vs-desc">等生病了才去医院，治疗的是"结果"</div>
    461. 

  461.                 <ul class="vs-list">
    462. 

  462.                     <li><svg class="icon-x" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>有症状才就医，发现即中晚期</li>
    463. 

  463.                     <li><svg class="icon-x" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>药一辈子不能停，越吃越多</li>
    464. 

  464.                     <li><svg class="icon-x" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>治好一种病，引发另一种</li>
    465. 

  465.                     <li><svg class="icon-x" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>只管指标，不管根因</li>
    466. 

  466.                 </ul>
    467. 

  467.             </div>
    468. 

  468.             <div class="vs-card vs-right">
    469. 

  469.                 <div class="vs-badge">浠艾福</div>
    470. 

  470.                 <div class="vs-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 6.1 18 12 18 12s-2.5 5.9-8.2 5.9A7 7 0 0 1 11 20z"/><path d="M12 12v8"/><path d="m12 12 3-3"/><path d="m12 12-3-3"/></svg></div>
    471. 

  471.                 <div class="vs-title">主动健康</div>
    472. 

  472.                 <div class="vs-desc">在疾病发生之前，从根源管理健康</div>
    473. 

  473.                 <ul class="vs-list">
    474. 

  474.                     <li><svg class="icon-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>提前检测，预判风险</li>
    475. 

  475.                     <li><svg class="icon-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>精准营养干预，修复根因</li>
    476. 

  476.                     <li><svg class="icon-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>肠道菌群管理，源头治理</li>
    477. 

  477.                     <li><svg class="icon-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>全年跟踪，持续优化</li>
    478. 

  478.                 </ul>
    479. 

  479.             </div>
    480. 

  480.         </div>
    481. 

  481.         <div class="micro-section">
    482. 

  482.             <div class="micro-label">肠道菌群检测</div>
    483. 

  483.             <div class="micro-grid">
    484. 

  484.                 <div class="micro-card">
    485. 

  485.                     <div class="micro-card-header">
    486. 

  486.                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
    487. 

  487.                         <div class="micro-card-title">检测技术</div>
    488. 

  488.                     </div>
    489. 

  489.                     <div class="micro-card-desc">16S rRNA 基因测序技术，一次精准检测 300+ 肠道菌群种类</div>
    490. 

  490.                 </div>
    491. 

  491.                 <div class="micro-card">
    492. 

  492.                     <div class="micro-card-header">
    493. 

  493.                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
    494. 

  494.                         <div class="micro-card-title">核心指标</div>
    495. 

  495.                     </div>
    496. 

  496.                     <div class="micro-card-desc">α多样性、β多样性、菌群丰度与均匀度、共生代谢通路综合评估</div>
    497. 

  497.                 </div>
    498. 

  498.                 <div class="micro-card">
    499. 

  499.                     <div class="micro-card-header">
    500. 

  500.                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 18h16z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    501. 

  501.                         <div class="micro-card-title">风险预警</div>
    502. 

  502.                     </div>
    503. 

  503.                     <div class="micro-card-desc">条件致病菌丰度实时监控，关联12类慢病风险模型预测</div>
    504. 

  504.                 </div>
    505. 

  505.                 <div class="micro-card">
    506. 

  506.                     <div class="micro-card-header">
    507. 

  507.                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4M12 16V8"/></svg>
    508. 

  508.                         <div class="micro-card-title">闭环管理</div>
    509. 

  509.                     </div>
    510. 

  510.                     <div class="micro-card-desc">检测→评估→干预→复测闭环，数据驱动精准调整</div>
    511. 

  511.                 </div>
    512. 

  512.             </div>
    513. 

  513.         </div>
    514. 

  514.         <div class="quote">
    515. 

  515.             <p>健康，非无病即安。而是以<strong>简易悦心之法，主动调控</strong>，养充沛生机，去身、心痛楚，得长寿安康。</p>
    516. 

  516.         </div>
    517. 

  517.     </div>
    518. 

  518.     <div class="page">06 / 10</div>
    519. 

  519. </body>
    520. 

  520. </html>`,
    521. 

  521. `<!DOCTYPE html>
    522. 

  522. <html lang="zh-CN">
    523. 

  523. <head>
    524. 

  524.     <meta charset="UTF-8">
    525. 

  525.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    526. 

  526.     <title>五维健康体系</title>
    527. 

  527.     <style>
    528. 

  528.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    529. 

  529.         * { margin:0; padding:0; box-sizing:border-box; }
    530. 

  530.         body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
    531. 

  531.         .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
    532. 

  532.         .label { position:absolute; top:56px; left:80px; font-size:13px; font-weight:600; letter-spacing:0.22em; color:#4ecdc4; display:flex; align-items:center; gap:10px; }
    533. 

  533.         .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
    534. 

  534.         .content { position:absolute; top:100px; left:80px; right:80px; }
    535. 

  535.         .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
    536. 

  536.         .sub { font-size:16px; color:#5a7a96; margin-bottom:32px; }
    537. 

  537.         .pentagon { display:flex; justify-content:center; gap:20px; margin-bottom:28px; }
    538. 

  538.         .dim { width:200px; border-radius:12px; padding:24px 16px; text-align:center; position:relative; overflow:hidden; transition:transform .2s; }
    539. 

  539.         .dim:hover { transform:translateY(-4px); }
    540. 

  540.         .dim::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
    541. 

  541.         .dim-body { background:#f0fdfa; border:1px solid #e0f5f1; }
    542. 

  542.         .dim-body::before { background:linear-gradient(90deg,#00b4d8,#4ecdc4); }
    543. 

  543.         .dim-mind { background:#f5f3ff; border:1px solid #e0e7ff; }
    544. 

  544.         .dim-mind::before { background:linear-gradient(90deg,#8b5cf6,#a78bfa); }
    545. 

  545.         .dim-brain { background:#fffbeb; border:1px solid #fde68a; }
    546. 

  546.         .dim-brain::before { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
    547. 

  547.         .dim-action { background:#fef2f2; border:1px solid #fecaca; }
    548. 

  548.         .dim-action::before { background:linear-gradient(90deg,#ef4444,#f87171); }
    549. 

  549.         .dim-wealth { background:#f0fdf4; border:1px solid #bbf7d0; }
    550. 

  550.         .dim-wealth::before { background:linear-gradient(90deg,#22c55e,#4ade80); }
    551. 

  551.         .dim-icon { font-size:36px; margin-bottom:10px; }
    552. 

  552.         .dim-zh { font-size:20px; font-weight:800; color:#0a2540; margin-bottom:2px; }
    553. 

  553.         .dim-en { font-size:11px; font-weight:600; color:#5a7a96; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:10px; }
    554. 

  554.         .dim-desc { font-size:12px; color:#5a7a96; line-height:1.5; }
    555. 

  555.         .center-label { text-align:center; margin-bottom:20px; }
    556. 

  556.         .center-label span { display:inline-block; background:#f0fdfa; border:1px solid #4ecdc4; border-radius:20px; padding:6px 24px; font-size:13px; font-weight:700; color:#00b4d8; }
    557. 

  557.         .bottom { display:flex; gap:16px; }
    558. 

  558.         .bottom-card { flex:1; background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:16px 20px; }
    559. 

  559.         .bottom-title { font-size:13px; font-weight:700; color:#0a2540; margin-bottom:4px; }
    560. 

  560.         .bottom-desc { font-size:12px; color:#5a7a96; line-height:1.5; }
    561. 

  561.         .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
    562. 

  562.     </style>
    563. 

  563. </head>
    564. 

  564. <body>
    565. 

  565.     <div class="top-bar"></div>
    566. 

  566.     <div class="label">5-DIMENSION SYSTEM</div>
    567. 

  567.     <div class="content">
    568. 

  568.         <div class="title">浠艾福五维健康体系</div>
    569. 

  569.         <div class="sub">健康不是单一指标，而是五个维度的动态平衡</div>
    570. 

  570.         <div class="center-label"><span>五维能量 · 全面守护 · 精准干预</span></div>
    571. 

  571.         <div class="pentagon">
    572. 

  572.             <div class="dim dim-body">
    573. 

  573.                 <div class="dim-icon"><svg width="36" height="36" viewBox="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" fill="none"><path d="M6 12h12M6 8h12M6 16h12"/></svg></div>
    574. 

  574.                 <div class="dim-zh">身</div>
    575. 

  575.                 <div class="dim-en">PHYSICAL</div>
    576. 

  576.                 <div class="dim-desc">身体机能·营养均衡<br/>免疫力·肠道健康<br/>慢性病预防与管理</div>
    577. 

  577.             </div>
    578. 

  578.             <div class="dim dim-mind">
    579. 

  579.                 <div class="dim-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.2-3.01 2.5 2.5 0 0 1 2.2-3.01 2.5 2.5 0 0 1 4.96-.44V4.5A2.5 2.5 0 0 1 9.5 2z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.2-3.01 2.5 2.5 0 0 0-2.2-3.01 2.5 2.5 0 0 0-4.96-.44V4.5A2.5 2.5 0 0 0 14.5 2z"/></svg></div>
    580. 

  580.                 <div class="dim-zh">心</div>
    581. 

  581.                 <div class="dim-en">MENTAL</div>
    582. 

  582.                 <div class="dim-desc">情绪管理·压力调节<br/>睡眠质量·心理韧性<br/>焦虑抑郁预防</div>
    583. 

  583.             </div>
    584. 

  584.             <div class="dim dim-brain">
    585. 

  585.                 <div class="dim-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></div>
    586. 

  586.                 <div class="dim-zh">智</div>
    587. 

  587.                 <div class="dim-en">INTELLECTUAL</div>
    588. 

  588.                 <div class="dim-desc">认知功能·学习能力<br/>专注力·记忆力<br/>脑健康与抗衰</div>
    589. 

  589.             </div>
    590. 

  590.             <div class="dim dim-action">
    591. 

  591.                 <div class="dim-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 4v16M17 4v16M19 4h-1c-1 0-2 1-2 2v12c0 1 1 2 2 2h1"/><path d="M11 4h-1c-1 0-2 1-2 2v12c0 1 1 2 2 2h1"/><path d="M7 4h-1c-1 0-2 1-2 2v12c0 1 1 2 2 2h1"/></svg></div>
    592. 

  592.                 <div class="dim-zh">行</div>
    593. 

  593.                 <div class="dim-en">BEHAVIORAL</div>
    594. 

  594.                 <div class="dim-desc">运动习惯·饮食习惯<br/>作息规律·行为改变<br/>健康生活方式养成</div>
    595. 

  595.             </div>
    596. 

  596.             <div class="dim dim-wealth">
    597. 

  597.                 <div class="dim-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10H12V2z"/><path d="M12 12L2.1 12.1"/><path d="M12 12l9.9.1"/></svg></div>
    598. 

  598.                 <div class="dim-zh">富</div>
    599. 

  599.                 <div class="dim-en">WEALTH</div>
    600. 

  600.                 <div class="dim-desc">健康财富·时间自由<br/>家庭和谐·生命质量<br/>健康即最大的财富</div>
    601. 

  601.             </div>
    602. 

  602.         </div>
    603. 

  603.         <div class="bottom">
    604. 

  604.             <div class="bottom-card">
    605. 

  605.                 <div class="bottom-title"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle; margin-right:6px;"><path d="M15 14c.2-1 .7-2 1.3-2.5a6.6 6.6 0 0 0-1.7-4.3c-1.2-.5-2.4-.5-3.6 0a6.6 6.6 0 0 0-1.7 4.3c.6.5 1.1 1.5 1.3 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg> 核心理念</div>
    606. 

  606.                 <div class="bottom-desc">五维不是独立的，而是相互关联的整体。肠道健康（身）影响情绪（心），情绪影响认知（智），认知决定行为（行），行为创造健康财富（富）。</div>
    607. 

  607.             </div>
    608. 

  608.             <div class="bottom-card">
    609. 

  609.                 <div class="bottom-title"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle; margin-right:6px;"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg> 干预策略</div>
    610. 

  610.                 <div class="bottom-desc">浠艾福从"身"维度切入——通过精准营养和肠道菌群管理，修复身体底层操作系统，带动其他四个维度全面提升。</div>
    611. 

  611.             </div>
    612. 

  612.             <div class="bottom-card">
    613. 

  613.                 <div class="bottom-title"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4ecdc4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle; margin-right:6px;"><path d="M18 20V10M12 20V4M6 20v-6"/></svg> 评估体系</div>
    614. 

  614.                 <div class="bottom-desc">五维能量评估，量化你的健康状态。每个维度独立评分，找到短板，精准干预，而非头痛医头。</div>
    615. 

  615.             </div>
    616. 

  616.         </div>
    617. 

  617.     </div>
    618. 

  618.     <div class="page">07 / 10</div>
    619. 

  619. </body>
    620. 

  620. </html>`,
    621. 

  621. `<!DOCTYPE html>
    622. 

  622. <html lang="zh-CN">
    623. 

  623. <head>
    624. 

  624.     <meta charset="UTF-8">
    625. 

  625.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    626. 

  626.     <title>会员权益</title>
    627. 

  627.     <style>
    628. 

  628.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    629. 

  629.         * { margin:0; padding:0; box-sizing:border-box; }
    630. 

  630.         body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
    631. 

  631.         .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
    632. 

  632.         .label { position:absolute; top:56px; left:80px; font-size:13px; font-weight:600; letter-spacing:0.22em; color:#4ecdc4; display:flex; align-items:center; gap:10px; }
    633. 

  633.         .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
    634. 

  634.         .content { position:absolute; top:100px; left:80px; right:80px; display:flex; gap:36px; }
    635. 

  635.         .left { flex:1; }
    636. 

  636.         .right { width:400px; }
    637. 

  637.         .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:24px; }
    638. 

  638.         .benefits { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px; }
    639. 

  639.         .ben { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start; }
    640. 

  640.         .ben-icon { width:36px; height:36px; background:linear-gradient(135deg,#00b4d8,#4ecdc4); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
    641. 

  641.         .ben-title { font-size:14px; font-weight:700; color:#0a2540; margin-bottom:2px; }
    642. 

  642.         .ben-desc { font-size:12px; color:#5a7a96; line-height:1.4; }
    643. 

  643.         .seed { background:linear-gradient(135deg,#fef2f2,#fff7ed); border:1px solid #fca5a5; border-radius:10px; padding:20px 24px; }
    644. 

  644.         .seed-badge { display:inline-block; background:#dc2626; color:#fff; font-size:11px; font-weight:700; padding:4px 14px; border-radius:12px; margin-bottom:12px; }
    645. 

  645.         .seed-title { font-size:18px; font-weight:800; color:#0a2540; margin-bottom:10px; }
    646. 

  646.         .seed-list { list-style:none; }
    647. 

  647.         .seed-list li { font-size:13px; color:#5a7a96; padding:5px 0; display:flex; align-items:center; gap:8px; line-height:1.4; }
    648. 

  648.         .seed-list li::before { content:''; display:inline-block; width:14px; height:14px; background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%234ecdc4\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"8\"/><path d=\"M12 6v12M8 12h8\"/></svg>') no-repeat center/contain; margin-right:4px; }
    649. 

  649.         .seed-list li strong { color:#dc2626; font-weight:700; }
    650. 

  650.         .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
    651. 

  651.     </style>
    652. 

  652. </head>
    653. 

  653. <body>
    654. 

  654.     <div class="top-bar"></div>
    655. 

  655.     <div class="label">MEMBERSHIP</div>
    656. 

  656.     <div class="content">
    657. 

  657.         <div class="left">
    658. 

  658.             <div class="title">会员权益</div>
    659. 

  659.             <div class="benefits">
    660. 

  660.                 <div class="ben">
    661. 

  661.                     <div class="ben-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20M12 2v20M4.93 4.93l14.14 14.14M4.93 19.07L19.07 4.93"/></svg></div>
    662. 

  662.                     <div>
    663. 

  663.                         <div class="ben-title">菌群基因检测</div>
    664. 

  664.                         <div class="ben-desc">价值 ¥1314 · 今日下单即送</div>
    665. 

  665.                     </div>
    666. 

  666.                 </div>
    667. 

  667.                 <div class="ben">
    668. 

  668.                     <div class="ben-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 8h10M7 12h10M7 16h10"/></svg></div>
    669. 

  669.                     <div>
    670. 

  670.                         <div class="ben-title">精准营养方案</div>
    671. 

  671.                         <div class="ben-desc">基于检测结果定制</div>
    672. 

  672.                     </div>
    673. 

  673.                 </div>
    674. 

  674.                 <div class="ben">
    675. 

  675.                     <div class="ben-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="//9" cy="7" r="4"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
    676. 

  676.                     <div>
    677. 

  677.                         <div class="ben-title">一对一健康管理师</div>
    678. 

  678.                         <div class="ben-desc">全年跟踪 · 随时咨询</div>
    679. 

  679.                     </div>
    680. 

  680.                 </div>
    681. 

  681.                 <div class="ben">
    682. 

  682.                     <div class="ben-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg></div>
    683. 

  683.                     <div>
    684. 

  684.                         <div class="ben-title">健康数据档案</div>
    685. 

  685.                         <div class="ben-desc">完整记录 · 趋势分析</div>
    686. 

  686.                     </div>
    687. 

  687.                 </div>
    688. 

  688.                 <div class="ben">
    689. 

  689.                     <div class="ben-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 6 3 6 3s3 0 6-3v-5"/></svg></div>
    690. 

  690.                     <div>
    691. 

  691.                         <div class="ben-title">健康教育课程</div>
    692. 

  692.                         <div class="ben-desc">肠道科学 · 营养知识</div>
    693. 

  693.                     </div>
    694. 

  694.                 </div>
    695. 

  695.                 <div class="ben">
    696. 

  696.                     <div class="ben-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 5H19"/></svg></div>
    697. 

  697.                     <div>
    698. 

  698.                         <div class="ben-title">会员专属折扣</div>
    699. 

  699.                         <div class="ben-desc">营养品会员专享价</div>
    700. 

  700.                     </div>
    701. 

  701.                 </div>
    702. 

  702.             </div>
    703. 

  703.         </div>
    704. 

  704.         <div class="right">
    705. 

  705.             <div class="seed">
    706. 

  706.                 <div class="seed-badge"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle; margin-right:4px;"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> 种子用户 · 限首批 100 名</div>
    707. 

  707.                 <div class="seed-title">首批加入，解锁长期收益</div>
    708. 

  708.                 <ul class="seed-list">
    709. 

  709.                     <li><strong>分享提成：</strong>推荐好友加入，每推荐 1 人即获提成</li>
    710. 

  710.                     <li><strong>消费返佣：</strong>被推荐人后续每次消费，你持续获得返佣</li>
    711. 

  711.                     <li><strong>优先体验：</strong>新品上线、新服务推出，优先试用</li>
    712. 

  712.                     <li><strong>核心社群：</strong>对接创始团队，参与产品共建</li>
    713. 

  713.                 </ul>
    714. 

  714.             </div>
    715. 

  715.         </div>
    716. 

  716.     </div>
    717. 

  717.     <div class="page">08 / 10</div>
    718. 

  718. </body>
    719. 

  719. </html>`,
    720. 

  720. `<!DOCTYPE html>
    721. 

  721. <html lang="zh-CN">
    722. 

  722. <head>
    723. 

  723.     <meta charset="UTF-8">
    724. 

  724.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    725. 

  725.     <title>限时优惠</title>
    726. 

  726.     <style>
    727. 

  727.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    728. 

  728.         * { margin:0; padding:0; box-sizing:border-box; }
    729. 

  729.         body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
    730. 

  730.         .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#dc2626,#f97316,#facc15); }
    731. 

  731.         /* SVG 背景装饰 */
    732. 

  732.         .bg-circles { position:absolute; top:-80px; right:-80px; width:400px; height:400px; opacity:0.06; }
    733. 

  733.         .bg-dna { position:absolute; bottom:0; left:0; width:300px; height:720px; opacity:0.04; }
    734. 

  734.         .label { position:absolute; top:56px; left:80px; font-size:13px; font-weight:600; letter-spacing:0.22em; color:#dc2626; display:flex; align-items:center; gap:10px; z-index:2; }
    735. 

  735.         .label::before { content:''; width:8px; height:8px; background:#dc2626; border-radius:50%; animation:pulse 1.5s ease-in-out infinite; }
    736. 

  736.         @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
    737. 

  737.         .content { position:absolute; top:100px; left:80px; right:80px; display:flex; gap:36px; z-index:2; }
    738. 

  738.         .left { flex:1; }
    739. 

  739.         .right { width:400px; display:flex; flex-direction:column; gap:16px; }
    740. 

  740.         .title { font-size:36px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:6px; }
    741. 

  741.         .title em { font-style:normal; color:#dc2626; }
    742. 

  742.         .sub { font-size:15px; color:#5a7a96; margin-bottom:24px; }
    743. 

  743.         .offer-card { background:linear-gradient(135deg,#fef2f2,#fff7ed); border:2px solid #fca5a5; border-radius:12px; padding:24px 28px; margin-bottom:16px; position:relative; overflow:hidden; }
    744. 

  744.         .offer-card::after { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; background:radial-gradient(circle,rgba(220,38,38,0.08) 0%,transparent 70%); border-radius:50%; }
    745. 

  745.         .offer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
    746. 

  746.         .offer-title { font-size:20px; font-weight:800; color:#0a2540; }
    747. 

  747.         .offer-tag { background:#dc2626; color:#fff; font-size:12px; font-weight:700; padding:5px 14px; border-radius:16px; display:flex; align-items:center; gap:6px; }
    748. 

  748.         .offer-tag svg { width:14px; height:14px; }
    749. 

  749.         .offer-price { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
    750. 

  750.         .price-old { font-size:18px; color:#9ca3af; text-decoration:line-through; }
    751. 

  751.         .price-new { font-size:44px; font-weight:800; color:#dc2626; }
    752. 

  752.         .price-unit { font-size:15px; color:#5a7a96; }
    753. 

  753.         .offer-list { list-style:none; }
    754. 

  754.         .offer-list li { font-size:14px; color:#0a2540; padding:7px 0; border-bottom:1px solid #fee2e2; display:flex; align-items:center; gap:8px; }
    755. 

  755.         .offer-list li:last-child { border-bottom:none; }
    756. 

  756.         .offer-list li svg { width:16px; height:16px; flex-shrink:0; }
    757. 

  757.         .urgency { background:#fef3c7; border:1px solid #fcd34d; border-radius:8px; padding:14px 18px; text-align:center; display:flex; align-items:center; justify-content:center; gap:10px; }
    758. 

  758.         .urgency svg { width:20px; height:20px; flex-shrink:0; }
    759. 

  759.         .urgency-text { font-size:14px; font-weight:700; color:#92400e; }
    760. 

  760.         /* 右侧礼物卡 */
    761. 

  761.         .gift-box { background:linear-gradient(135deg,#00b4d8,#4ecdc4); border-radius:12px; padding:28px; color:#fff; text-align:center; position:relative; overflow:hidden; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
    762. 

  762.         .gift-box::before { content:''; position:absolute; top:-40px; left:-40px; width:160px; height:160px; background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 70%); border-radius:50%; }
    763. 

  763.         .gift-box::after { content:''; position:absolute; bottom:-60px; right:-60px; width:200px; height:200px; background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%); border-radius:50%; }
    764. 

  764.         .gift-icon { position:relative; z-index:1; margin-bottom:12px; }
    765. 

  765.         .gift-label { font-size:13px; font-weight:600; opacity:0.9; margin-bottom:6px; letter-spacing:0.1em; position:relative; z-index:1; }
    766. 

  766.         .gift-value { font-size:52px; font-weight:800; margin-bottom:2px; position:relative; z-index:1; }
    767. 

  767.         .gift-unit { font-size:15px; opacity:0.85; margin-bottom:12px; position:relative; z-index:1; }
    768. 

  768.         .gift-desc { font-size:13px; opacity:0.9; line-height:1.6; position:relative; z-index:1; }
    769. 

  769.         .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; z-index:2; }
    770. 

  770.     </style>
    771. 

  771. </head>
    772. 

  772. <body>
    773. 

  773.     <div class="top-bar"></div>
    774. 

  774.     <!-- SVG 背景装饰：同心圆 -->
    775. 

  775.     <svg class="bg-circles" viewBox="0 0 400 400">
    776. 

  776.         <circle cx="200" cy="200" r="180" fill="none" stroke="#dc2626" stroke-width="1"/>
    777. 

  777.         <circle cx="200" cy="200" r="140" fill="none" stroke="#dc2626" stroke-width="1"/>
    778. 

  778.         <circle cx="200" cy="200" r="100" fill="none" stroke="#dc2626" stroke-width="1"/>
    779. 

  779.         <circle cx="200" cy="200" r="60" fill="none" stroke="#dc2626" stroke-width="1.5"/>
    780. 

  780.     </svg>
    781. 

  781.     <!-- SVG 背景装饰：DNA双螺旋 -->
    782. 

  782.     <svg class="bg-dna" viewBox="0 0 300 720">
    783. 

  783.         <path d="M50,0 Q150,60 50,120 Q-50,180 50,240 Q150,300 50,360 Q-50,420 50,480 Q150,540 50,600 Q-50,660 50,720" fill="none" stroke="#dc2626" stroke-width="2"/>
    784. 

  784.         <path d="M250,0 Q150,60 250,120 Q350,180 250,240 Q150,300 250,360 Q350,420 250,480 Q150,540 250,600 Q350,660 250,720" fill="none" stroke="#dc2626" stroke-width="2"/>
    785. 

  785.         <line x1="90" y1="60" x2="210" y2="60" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    786. 

  786.         <line x1="60" y1="120" x2="240" y2="120" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    787. 

  787.         <line x1="90" y1="180" x2="210" y2="180" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    788. 

  788.         <line x1="60" y1="240" x2="240" y2="240" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    789. 

  789.         <line x1="90" y1="300" x2="210" y2="300" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    790. 

  790.         <line x1="60" y1="360" x2="240" y2="360" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    791. 

  791.         <line x1="90" y1="420" x2="210" y2="420" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    792. 

  792.         <line x1="60" y1="480" x2="240" y2="480" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    793. 

  793.         <line x1="90" y1="540" x2="210" y2="540" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    794. 

  794.         <line x1="60" y1="600" x2="240" y2="600" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
    795. 

  795.     </svg>
    796. 

  796.     <div class="label">
    797. 

  797.         <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3" fill="#dc2626"><animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite"/></circle></svg>
    798. 

  798.         LIMITED OFFER
    799. 

  799.     </div>
    800. 

  800.     <div class="content">
    801. 

  801.         <div class="left">
    802. 

  802.             <div class="title">今日限定 · <em>买年度会员</em></div>
    803. 

  803.             <div class="sub">首批种子用户专享，名额有限，先到先得</div>
    804. 

  804.             <div class="offer-card">
    805. 

  805.                 <div class="offer-header">
    806. 

  806.                     <div class="offer-title">浠艾福年度会员</div>
    807. 

  807.                     <div class="offer-tag"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1l2.2 4.5L15 6.2l-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.8-.7L8 1z" fill="#fff"/></svg> 今日特惠</div>
    808. 

  808.                 </div>
    809. 

  809.                 <div class="offer-price">
    810. 

  810.                     <div class="price-old">原价 ¥XXX</div>
    811. 

  811.                     <div class="price-new">¥XXX</div>
    812. 

  812.                     <div class="price-unit">/年</div>
    813. 

  813.                 </div>
    814. 

  814.                 <ul class="offer-list">
    815. 

  815.                     <li>
    816. 

  816.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/><path d="M5 8l2 2 4-4" stroke="#16a34a" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    817. 

  817.                         全年 1 对 1 健康管理师跟踪服务
    818. 

  818.                     </li>
    819. 

  819.                     <li>
    820. 

  820.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/><path d="M5 8l2 2 4-4" stroke="#16a34a" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    821. 

  821.                         个性化精准营养方案
    822. 

  822.                     </li>
    823. 

  823.                     <li>
    824. 

  824.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/><path d="M5 8l2 2 4-4" stroke="#16a34a" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    825. 

  825.                         会员专属产品折扣
    826. 

  826.                     </li>
    827. 

  827.                     <li>
    828. 

  828.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/><path d="M5 8l2 2 4-4" stroke="#16a34a" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    829. 

  829.                         健康教育课程无限畅学
    830. 

  830.                     </li>
    831. 

  831.                     <li>
    832. 

  832.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/><path d="M5 8l2 2 4-4" stroke="#16a34a" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    833. 

  833.                         种子用户分享提成 + 消费返佣资格
    834. 

  834.                     </li>
    835. 

  835.                     <li style="color:#dc2626; font-weight:700; border-bottom:none;">
    836. 

  836.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/><path d="M8 4v5M8 11v1" stroke="#dc2626" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    837. 

  837.                         PLUS ↓ 赠送以下检测
    838. 

  838.                     </li>
    839. 

  839.                 </ul>
    840. 

  840.             </div>
    841. 

  841.             <div class="urgency"><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#92400e" stroke-width="2"/><path d="M12 7v5l3 3" stroke="#92400e" stroke-width="2" stroke-linecap="round"/></svg><div class="urgency-text"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#92400e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle; margin-right:4px;"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> 种子用户仅限首批 100 名，额满即止</div></div>
    842. 

  842.         </div>
    843. 

  843.         <div class="right">
    844. 

  844.             <div class="gift-box">
    845. 

  845.                 <!-- 礼物盒 SVG 图标 -->
    846. 

  846.                 <div class="gift-icon">
    847. 

  847.                     <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
    848. 

  848.                         <rect x="8" y="28" width="48" height="30" rx="4" fill="rgba(255,255,255,0.2)" stroke="#fff" stroke-width="2"/>
    849. 

  849.                         <rect x="4" y="22" width="56" height="10" rx="3" fill="rgba(255,255,255,0.3)" stroke="#fff" stroke-width="2"/>
    850. 

  850.                         <path d="M32 22V58" stroke="#fff" stroke-width="2"/>
    851. 

  851.                         <path d="M32 22C32 22 24 10 18 10C12 10 12 18 18 22" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>
    852. 

  852.                         <path d="M32 22C32 22 40 10 46 10C52 10 52 18 46 22" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>
    853. 

  853.                         <circle cx="18" cy="10" r="3" fill="rgba(255,255,255,0.4)"/>
    854. 

  854.                         <circle cx="46" cy="10" r="3" fill="rgba(255,255,255,0.4)"/>
    855. 

  855.                     </svg>
    856. 

  856.                 </div>
    857. 

  857.                 <div class="gift-label"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle; margin-right:6px;"><rect x="3" y="8" width="18" height="12" rx="2"/><path d="M12 8V4M8 4h8M12 4l-2 2M12 4l2 2"/></svg> 今日下单额外赠送</div>
    858. 

  858.                 <div class="gift-value">¥1314</div>
    859. 

  859.                 <div class="gift-unit">肠道菌群基因检测</div>
    860. 

  860.                 <div class="gift-desc">全面分析肠道菌群构成<br/>了解你的"第二基因组"<br/>精准指导后续营养方案</div>
    861. 

  861.             </div>
    862. 

  862.             <div style="text-align:center; font-size:13px; color:#5a7a96; line-height:1.6; background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:14px;">
    863. 

  863.                 检测包含：<strong style="color:#0a2540;">菌群多样性分析 · 肠道年龄评估 · 有害菌/有益菌占比 · 慢病风险预警 · 个性化饮食建议</strong>
    864. 

  864.             </div>
    865. 

  865.         </div>
    866. 

  866.     </div>
    867. 

  867.     <div class="page">09 / 10</div>
    868. 

  868. </body>
    869. 

  869. </html>`,
    870. 

  870. `<!DOCTYPE html>
    871. 

  871. <html lang="zh-CN">
    872. 

  872. <head>
    873. 

  873.     <meta charset="UTF-8">
    874. 

  874.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    875. 

  875.     <title>立即加入</title>
    876. 

  876.     <style>
    877. 

  877.         @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
    878. 

  878.         * { margin:0; padding:0; box-sizing:border-box; }
    879. 

  879.         body { width:1280px; height:720px; background:linear-gradient(135deg,#f0fdfa 0%,#ffffff 50%,#f0fdfa 100%); font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
    880. 

  880.         .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
    881. 

  881.         /* SVG 背景装饰 */
    882. 

  882.         .bg-wave { position:absolute; bottom:0; left:0; right:0; height:200px; opacity:0.06; }
    883. 

  883.         .bg-molecule { position:absolute; top:40px; right:120px; width:200px; height:200px; opacity:0.08; }
    884. 

  884.         .bg-hex { position:absolute; bottom:100px; left:60px; width:160px; height:160px; opacity:0.05; }
    885. 

  885.         .label { position:absolute; top:56px; left:80px; font-size:13px; font-weight:600; letter-spacing:0.25em; color:#4ecdc4; display:flex; align-items:center; gap:10px; z-index:2; }
    886. 

  886.         .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; animation:pulse 2s ease-in-out infinite; }
    887. 

  887.         @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
    888. 

  888.         .content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; width:82%; z-index:2; }
    889. 

  889.         .title { font-size:52px; font-weight:800; letter-spacing:-0.04em; color:#0a2540; margin-bottom:10px; }
    890. 

  890.         .subtitle { font-size:18px; color:#5a7a96; margin-bottom:36px; line-height:1.6; }
    891. 

  891.         .cta-row { display:flex; align-items:center; justify-content:center; gap:48px; margin-bottom:32px; }
    892. 

  892.         .qr-box { background:#fff; border:2px solid #4ecdc4; border-radius:12px; padding:24px; width:200px; height:200px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(78,205,196,0.15); position:relative; }
    893. 

  893.         .qr-box::before { content:''; position:absolute; inset:-4px; border:1px dashed #4ecdc4; border-radius:14px; opacity:0.4; }
    894. 

  894.         .cta-text { text-align:left; }
    895. 

  895.         .cta-main { font-size:26px; font-weight:800; color:#0a2540; margin-bottom:6px; }
    896. 

  896.         .cta-main em { font-style:normal; color:#dc2626; }
    897. 

  897.         .cta-sub { font-size:15px; color:#5a7a96; line-height:1.6; margin-bottom:14px; }
    898. 

  898.         .cta-features { list-style:none; }
    899. 

  899.         .cta-features li { font-size:14px; color:#0a2540; padding:4px 0; display:flex; align-items:center; gap:8px; }
    900. 

  900.         .cta-features li svg { width:16px; height:16px; flex-shrink:0; }
    901. 

  901.         .divider { width:100%; height:1px; background:linear-gradient(90deg,transparent,#4ecdc4,transparent); margin:20px 0; }
    902. 

  902.         .quote { font-size:16px; color:#5a7a96; font-style:italic; max-width:640px; margin:0 auto; line-height:1.7; }
    903. 

  903.         .quote strong { color:#00b4d8; font-weight:600; font-style:normal; }
    904. 

  904.         .brand-row { position:absolute; bottom:44px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; z-index:2; }
    905. 

  905.         .brand-text { font-size:14px; font-weight:600; color:#4ecdc4; letter-spacing:0.12em; }
    906. 

  906.         .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; z-index:2; }
    907. 

  907.     </style>
    908. 

  908. </head>
    909. 

  909. <body>
    910. 

  910.     <div class="top-bar"></div>
    911. 

  911.     <!-- SVG 波浪背景 -->
    912. 

  912.     <svg class="bg-wave" viewBox="0 0 1280 200" preserveAspectRatio="none">
    913. 

  913.         <path d="M0,100 C200,40 400,160 640,100 C880,40 1080,160 1280,100 L1280,200 L0,200 Z" fill="#4ecdc4"/>
    914. 

  914.         <path d="M0,130 C200,70 400,190 640,130 C880,70 1080,190 1280,130 L1280,200 L0,200 Z" fill="#00b4d8" opacity="0.5"/>
    915. 

  915.     </svg>
    916. 

  916.     <!-- SVG 分子结构装饰 -->
    917. 

  917.     <svg class="bg-molecule" viewBox="0 0 200 200">
    918. 

  918.         <circle cx="100" cy="60" r="12" fill="none" stroke="#4ecdc4" stroke-width="2"/>
    919. 

  919.         <circle cx="50" cy="130" r="12" fill="none" stroke="#4ecdc4" stroke-width="2"/>
    920. 

  920.         <circle cx="150" cy="130" r="12" fill="none" stroke="#4ecdc4" stroke-width="2"/>
    921. 

  921.         <circle cx="100" cy="170" r="8" fill="none" stroke="#4ecdc4" stroke-width="1.5"/>
    922. 

  922.         <line x1="100" y1="72" x2="56" y2="122" stroke="#4ecdc4" stroke-width="1.5"/>
    923. 

  923.         <line x1="100" y1="72" x2="144" y2="122" stroke="#4ecdc4" stroke-width="1.5"/>
    924. 

  924.         <line x1="56" y1="136" x2="94" y2="166" stroke="#4ecdc4" stroke-width="1.5"/>
    925. 

  925.         <line x1="144" y1="136" x2="106" y2="166" stroke="#4ecdc4" stroke-width="1.5"/>
    926. 

  926.     </svg>
    927. 

  927.     <!-- SVG 六边形装饰 -->
    928. 

  928.     <svg class="bg-hex" viewBox="0 0 160 160">
    929. 

  929.         <polygon points="80,10 145,40 145,100 80,130 15,100 15,40" fill="none" stroke="#4ecdc4" stroke-width="2"/>
    930. 

  930.         <polygon points="80,30 125,50 125,90 80,110 35,90 35,50" fill="none" stroke="#4ecdc4" stroke-width="1.5"/>
    931. 

  931.         <polygon points="80,50 105,62 105,82 80,94 55,82 55,62" fill="none" stroke="#4ecdc4" stroke-width="1"/>
    932. 

  932.     </svg>
    933. 

  933.     <div class="label">
    934. 

  934.         <svg viewBox="0 0 16 16" width="16" height="16" fill="none"><circle cx="8" cy="8" r="3" fill="#4ecdc4"><animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/></circle></svg>
    935. 

  935.         JOIN US NOW
    936. 

  936.     </div>
    937. 

  937.     <div class="content">
    938. 

  938.         <div class="title">立即加入浠艾福</div>
    939. 

  939.         <div class="subtitle">精准营养，主动健康，让每一个家庭都拥有健康守护者</div>
    940. 

  940.         <div class="cta-row">
    941. 

  941.             <div class="qr-box">
    942. 

  942.                 <!-- 二维码占位 SVG -->
    943. 

  943.                 <svg width="140" height="140" viewBox="0 0 140 140">
    944. 

  944.                     <rect x="10" y="10" width="40" height="40" rx="4" fill="#0a2540"/>
    945. 

  945.                     <rect x="16" y="16" width="28" height="28" rx="2" fill="#fff"/>
    946. 

  946.                     <rect x="22" y="22" width="16" height="16" rx="1" fill="#0a2540"/>
    947. 

  947.                     <rect x="90" y="10" width="40" height="40" rx="4" fill="#0a2540"/>
    948. 

  948.                     <rect x="96" y="16" width="28" height="28" rx="2" fill="#fff"/>
    949. 

  949.                     <rect x="102" y="22" width="16" height="16" rx="1" fill="#0a2540"/>
    950. 

  950.                     <rect x="10" y="90" width="40" height="40" rx="4" fill="#0a2540"/>
    951. 

  951.                     <rect x="16" y="96" width="28" height="28" rx="2" fill="#fff"/>
    952. 

  952.                     <rect x="22" y="102" width="16" height="16" rx="1" fill="#0a2540"/>
    953. 

  953.                     <rect x="60" y="60" width="20" height="20" rx="2" fill="#4ecdc4"/>
    954. 

  954.                     <rect x="60" y="10" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    955. 

  955.                     <rect x="72" y="10" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    956. 

  956.                     <rect x="60" y="22" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    957. 

  957.                     <rect x="10" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    958. 

  958.                     <rect x="22" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    959. 

  959.                     <rect x="10" y="72" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    960. 

  960.                     <rect x="90" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    961. 

  961.                     <rect x="102" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    962. 

  962.                     <rect x="114" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    963. 

  963.                     <rect x="90" y="72" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    964. 

  964.                     <rect x="60" y="90" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    965. 

  965.                     <rect x="72" y="90" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    966. 

  966.                     <rect x="60" y="102" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    967. 

  967.                     <rect x="90" y="100" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    968. 

  968.                     <rect x="102" y="112" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    969. 

  969.                     <rect x="114" y="100" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    970. 

  970.                     <rect x="120" y="112" width="8" height="8" fill="#0a2540" opacity="0.3"/>
    971. 

  971.                 </svg>
    972. 

  972.             </div>
    973. 

  973.             <div class="cta-text">
    974. 

  974.                 <div class="cta-main">今日下单 · <em>赠送 ¥1314 菌群检测</em></div>
    975. 

  975.                 <div class="cta-sub">成为种子用户，解锁分享提成与消费返佣权益</div>
    976. 

  976.                 <ul class="cta-features">
    977. 

  977.                     <li>
    978. 

  978.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/><path d="M5 8l2 2 4-4" stroke="#16a34a" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    979. 

  979.                         年度会员全年健康管理服务
    980. 

  980.                     </li>
    981. 

  981.                     <li>
    982. 

  982.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/><path d="M5 8l2 2 4-4" stroke="#16a34a" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    983. 

  983.                         价值 ¥1314 肠道菌群基因检测
    984. 

  984.                     </li>
    985. 

  985.                     <li>
    986. 

  986.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/><path d="M5 8l2 2 4-4" stroke="#16a34a" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    987. 

  987.                         种子用户专属收益权
    988. 

  988.                     </li>
    989. 

  989.                     <li>
    990. 

  990.                         <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/><path d="M8 4v5M8 11v1" stroke="#dc2626" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
    991. 

  991.                         仅限首批 <strong style="color:#dc2626">100</strong> 名
    992. 

  992.                     </li>
    993. 

  993.                 </ul>
    994. 

  994.             </div>
    995. 

  995.         </div>
    996. 

  996.         <div class="divider"></div>
    997. 

  997.         <div class="quote">
    998. 

  998.             "用最适合你自己的、且最简单的方法，<br/><strong>心情愉快、活得舒服、活得长久！</strong>"
    999. 

  999.         </div>
    1000. 

  1000.     </div>
    1001. 

  1001.     <div class="brand-row">
    1002. 

  1002.         <!-- 品牌 SVG 标志 -->
    1003. 

  1003.         <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    1004. 

  1004.             <circle cx="14" cy="14" r="12" stroke="#4ecdc4" stroke-width="2"/>
    1005. 

  1005.             <path d="M8 14 C8 10 11 7 14 7 C17 7 20 10 20 14 C20 18 17 21 14 21" stroke="#4ecdc4" stroke-width="2" fill="none" stroke-linecap="round"/>
    1006. 

  1006.             <circle cx="14" cy="14" r="3" fill="#4ecdc4"/>
    1007. 

  1007.         </svg>
    1008. 

  1008.         <div class="brand-text">浠艾福 · CARE FAMILY CLUB</div>
    1009. 

  1009.     </div>
    1010. 

  1010.     <div class="page">10 / 10</div>
    1011. 

  1011. </body>
    1012. 

  1012. </html>`
    1013. 

  1013. ];
    1014. 

  1014. 

  1015. let current = 0;
    1016. 

  1016. const total = slides.length;
    1017. 

  1017. const container = document.getElementById('slideContainer');
    1018. 

  1018. const dotsEl = document.getElementById('navDots');
    1019. 

  1019. const counterEl = document.getElementById('currentSlide');
    1020. 

  1020. 

  1021. slides.forEach((html, i) => {
    1022. 

  1022.     const iframe = document.createElement('iframe');
    1023. 

  1023.     iframe.className = 'slide' + (i === 0 ? ' active' : '');
    1024. 

  1024.     iframe.id = 'slide-' + i;
    1025. 

  1025.     iframe.srcdoc = html;
    1026. 

  1026.     iframe.style.border = 'none';
    1027. 

  1027.     iframe.setAttribute('scrolling', 'no');
    1028. 

  1028.     iframe.setAttribute('frameborder', '0');
    1029. 

  1029.     container.appendChild(iframe);
    1030. 

  1030.     const dot = document.createElement('div');
    1031. 

  1031.     dot.className = 'nav-dot' + (i === 0 ? ' active' : '');
    1032. 

  1032.     dot.onclick = () => goToSlide(i);
    1033. 

  1033.     dotsEl.appendChild(dot);
    1034. 

  1034. });
    1035. 

  1035. 

  1036. function goToSlide(n) {
    1037. 

  1037.     const prev = current;
    1038. 

  1038.     current = Math.max(0, Math.min(total - 1, n));
    1039. 

  1039.     if (current === prev) return;
    1040. 

  1040.     document.getElementById('slide-' + prev).classList.remove('active');
    1041. 

  1041.     document.getElementById('slide-' + current).classList.add('active');
    1042. 

  1042.     dotsEl.children[prev].classList.remove('active');
    1043. 

  1043.     dotsEl.children[current].classList.add('active');
    1044. 

  1044.     counterEl.textContent = current + 1;
    1045. 

  1045. }
    1046. 

  1046. function nextSlide() { goToSlide(current + 1); }
    1047. 

  1047. function prevSlide() { goToSlide(current - 1); }
    1048. 

  1048. 

  1049. function updateScale() {
    1050. 

  1050.     const sx = window.innerWidth / 1280;
    1051. 

  1051.     const sy = window.innerHeight / 720;
    1052. 

  1052.     const s = Math.min(sx, sy) * 0.95;
    1053. 

  1053.     document.documentElement.style.setProperty('--scale', s);
    1054. 

  1054. }
    1055. 

  1055. window.addEventListener('resize', updateScale);
    1056. 

  1056. updateScale();
    1057. 

  1057. 

  1058. document.addEventListener('keydown', e => {
    1059. 

  1059.     if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
    1060. 

  1060.     else if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
    1061. 

  1061.     else if (e.key === 'PageDown') { e.preventDefault(); goToSlide(current + 3); }
    1062. 

  1062.     else if (e.key === 'PageUp') { e.preventDefault(); goToSlide(current - 3); }
    1063. 

  1063.     else if (e.key === 'Home') { e.preventDefault(); goToSlide(0); }
    1064. 

  1064.     else if (e.key === 'End') { e.preventDefault(); goToSlide(total - 1); }
    1065. 

  1065. });
    1066. 

  1066. 

  1067. function toggleFullscreen() {
    1068. 

  1068.     if (!document.fullscreenElement) document.documentElement.requestFullscreen();
    1069. 

  1069.     else document.exitFullscreen();
    1070. 

  1070. }
    1071. 

  1071. </script>
    1072. 

  1072. </body>
    1073. 

  1073. </html>
    1074.