|
|
@@ -0,0 +1,1073 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>浠艾福 会员卡</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ body { font-family:'Inter',-apple-system,sans-serif; background:#111; overflow:hidden; width:100vw; height:100vh; }
|
|
|
+ .slide-container { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; }
|
|
|
+ .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; }
|
|
|
+ .slide.active { opacity:1; pointer-events:auto; }
|
|
|
+ .nav { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; z-index:100; }
|
|
|
+ .nav-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:all .25s; }
|
|
|
+ .nav-dot.active { background:#4ecdc4; transform:scale(1.4); }
|
|
|
+ .nav-dot:hover { background:rgba(255,255,255,.7); }
|
|
|
+ .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; }
|
|
|
+ .nav-btn:hover { background:rgba(255,255,255,.3); }
|
|
|
+ .slide-counter { position:fixed; top:20px; right:24px; font-size:13px; color:rgba(255,255,255,.5); z-index:100; font-weight:500; }
|
|
|
+ .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; }
|
|
|
+ .fullscreen-btn:hover { background:rgba(255,255,255,.3); }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <button class="fullscreen-btn" onclick="toggleFullscreen()">⛶ 全屏</button>
|
|
|
+ <div class="slide-counter"><span id="currentSlide">1</span> / 10</div>
|
|
|
+ <div class="slide-container" id="slideContainer"></div>
|
|
|
+ <div class="nav">
|
|
|
+ <div class="nav-btn" onclick="prevSlide()">◀</div>
|
|
|
+ <div class="nav-dots" id="navDots"></div>
|
|
|
+ <div class="nav-btn" onclick="nextSlide()">▶</div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ const slides = [
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>浠艾福 会员卡</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
+ body {
|
|
|
+ width: 1280px; height: 720px;
|
|
|
+ background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
|
|
|
+ font-family: 'Inter', -apple-system, sans-serif;
|
|
|
+ overflow: hidden; position: relative;
|
|
|
+ }
|
|
|
+ .top-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #00b4d8, #4ecdc4, #95e1d3); }
|
|
|
+ .ecg { position: absolute; top: 50px; right: 80px; width: 300px; height: 60px; opacity: 0.12; }
|
|
|
+ .ecg path { stroke: #00b4d8; stroke-width: 2; fill: none; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 3s ease-in-out infinite; }
|
|
|
+ @keyframes draw { 0%{stroke-dashoffset:400} 50%{stroke-dashoffset:0} 100%{stroke-dashoffset:-400} }
|
|
|
+ .cross { position: absolute; top: 50px; left: 80px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
|
|
|
+ .cross::before, .cross::after { content:''; position: absolute; background: #dc2626; border-radius: 3px; }
|
|
|
+ .cross::before { width: 22px; height: 7px; }
|
|
|
+ .cross::after { width: 7px; height: 22px; }
|
|
|
+ .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 80%; }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width: 8px; height: 8px; background: #4ecdc4; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
|
|
|
+ @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
|
|
|
+ .title { font-size: 80px; font-weight: 800; letter-spacing: -0.04em; color: #0a2540; margin-bottom: 12px; }
|
|
|
+ .subtitle { font-size: 32px; font-weight: 500; color: #5a7a96; margin-bottom: 40px; letter-spacing: 0.12em; }
|
|
|
+ .tagline { display: inline-block; background: linear-gradient(135deg, #f0fdfa, #e0f5f1); border: 2px solid #4ecdc4; border-radius: 8px; padding: 18px 48px; }
|
|
|
+ .tagline-text { font-size: 20px; font-weight: 700; color: #00b4d8; letter-spacing: 0.08em; }
|
|
|
+ .page { position: absolute; bottom: 30px; right: 40px; font-size: 12px; color: #5a7a96; opacity: 0.5; font-weight: 500; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <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>
|
|
|
+ <div class="cross"></div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="label">HEALTH MEMBERSHIP</div>
|
|
|
+ <div class="title">浠艾福</div>
|
|
|
+ <div class="subtitle">会 员 卡</div>
|
|
|
+ <div class="tagline"><div class="tagline-text">精准营养 · 主动健康 · 家庭守护</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="page">01 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`,
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>触目惊心的数据</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
|
|
|
+ .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
|
|
|
+ .ecg { position:absolute; top:40px; right:60px; width:220px; height:44px; opacity:0.1; }
|
|
|
+ .ecg path { stroke:#00b4d8; stroke-width:2; fill:none; stroke-dasharray:280; stroke-dashoffset:280; animation:draw 3s ease-in-out infinite; }
|
|
|
+ @keyframes draw { 0%{stroke-dashoffset:280} 50%{stroke-dashoffset:0} 100%{stroke-dashoffset:-280} }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
|
|
|
+ .content { position:absolute; top:100px; left:80px; right:80px; }
|
|
|
+ .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
|
|
|
+ .sub { font-size:16px; color:#5a7a96; margin-bottom:32px; }
|
|
|
+ .big-stat { display:flex; align-items:center; gap:40px; margin-bottom:36px; }
|
|
|
+ .big-number { font-size:120px; font-weight:800; color:#dc2626; line-height:1; letter-spacing:-0.04em; }
|
|
|
+ .big-number span { font-size:48px; color:#dc2626; }
|
|
|
+ .big-label { font-size:22px; font-weight:600; color:#0a2540; line-height:1.6; }
|
|
|
+ .big-label em { font-style:normal; color:#dc2626; }
|
|
|
+ .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
|
|
|
+ .card { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:20px 22px; position:relative; overflow:hidden; }
|
|
|
+ .card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#00b4d8,#4ecdc4); }
|
|
|
+ .card-num { font-size:36px; font-weight:800; color:#00b4d8; font-variant-numeric:tabular-nums; }
|
|
|
+ .card-num .unit { font-size:18px; font-weight:600; color:#4ecdc4; }
|
|
|
+ .card-label { font-size:14px; font-weight:600; color:#0a2540; margin-top:4px; }
|
|
|
+ .card-desc { font-size:12px; color:#5a7a96; margin-top:4px; line-height:1.4; }
|
|
|
+ .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; }
|
|
|
+ .bottom-icon { width:40px; height:40px; background:#dc2626; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
|
|
|
+ .bottom-text { font-size:15px; font-weight:600; color:#991b1b; line-height:1.5; }
|
|
|
+ .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <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>
|
|
|
+ <div class="label">HEALTH CRISIS</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">触目惊心的数据</div>
|
|
|
+ <div class="sub">中国心脑血管疾病死亡占总死亡人数 40% 以上，癌症占近 30%</div>
|
|
|
+ <div class="big-stat">
|
|
|
+ <div class="big-number">1/5</div>
|
|
|
+ <div class="big-label">每 <em>5 个</em>成年人死亡<br/>就有 <em>1 人</em>死于心脑血管疾病</div>
|
|
|
+ </div>
|
|
|
+ <div class="grid">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-num">508<span class="unit">万/年</span></div>
|
|
|
+ <div class="card-label">心脑血管疾病死亡</div>
|
|
|
+ <div class="card-desc">2025年，超过新冠全球年度死亡的5倍</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-num">3.3<span class="unit">亿</span></div>
|
|
|
+ <div class="card-label">心脑血管患病人群</div>
|
|
|
+ <div class="card-desc">高血压2.7亿·高血脂3.8亿·糖尿病1.5亿</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-num">515<span class="unit">万/年</span></div>
|
|
|
+ <div class="card-label">新发癌症</div>
|
|
|
+ <div class="card-desc">全球占比25%，发病年轻化趋势明显</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-num">1.8<span class="unit">亿</span></div>
|
|
|
+ <div class="card-label">高尿酸人群</div>
|
|
|
+ <div class="card-desc">肾脏排泄障碍，约30%经肠道代谢</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-num">7000<span class="unit">万</span></div>
|
|
|
+ <div class="card-label">骨质疏松人群</div>
|
|
|
+ <div class="card-desc">50岁以上患病率19.2%，女性32.1%</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-num">1.7<span class="unit">亿</span></div>
|
|
|
+ <div class="card-label">老年痴呆人群</div>
|
|
|
+ <div class="card-desc">全球患者，神经炎症与肠脑轴关联</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-icon">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-text">慢性病不再遥远——它就在你我身边，90%的心脑血管疾病由肠道菌群紊乱引发</div>
|
|
|
+ </div>
|
|
|
+ <div class="page">02 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`,
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>健康风险自检</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
|
|
|
+ .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
|
|
|
+ .content { position:absolute; top:100px; left:80px; right:80px; }
|
|
|
+ .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
|
|
|
+ .sub { font-size:16px; color:#5a7a96; margin-bottom:28px; }
|
|
|
+ .cols { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
|
|
|
+ .item { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:16px 20px; display:flex; align-items:center; gap:14px; transition:border-color .2s; }
|
|
|
+ .item:hover { border-color:#4ecdc4; }
|
|
|
+ .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; }
|
|
|
+ .item-text { font-size:15px; font-weight:500; color:#0a2540; }
|
|
|
+ .bottom { position:absolute; bottom:60px; left:80px; right:80px; display:flex; gap:20px; align-items:stretch; }
|
|
|
+ .score-box { flex:1; background:#f0fdfa; border:1px solid #4ecdc4; border-radius:8px; padding:18px 24px; }
|
|
|
+ .score-title { font-size:15px; font-weight:700; color:#0a2540; margin-bottom:6px; }
|
|
|
+ .score-desc { font-size:13px; color:#5a7a96; line-height:1.5; }
|
|
|
+ .badges { display:flex; gap:10px; flex-shrink:0; align-items:center; }
|
|
|
+ .badge { padding:8px 16px; border-radius:20px; font-size:12px; font-weight:700; }
|
|
|
+ .b-green { background:#dcfce7; color:#16a34a; }
|
|
|
+ .b-yellow { background:#fef3c7; color:#d97706; }
|
|
|
+ .b-red { background:#fee2e2; color:#dc2626; }
|
|
|
+ .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <div class="label">SELF CHECK</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">健康风险自检清单</div>
|
|
|
+ <div class="sub">对照以下症状，看看你中了几条？</div>
|
|
|
+ <div class="cols">
|
|
|
+ <div class="item"><div class="check">1</div><div class="item-text">经常疲劳、精力不足，睡醒也累</div></div>
|
|
|
+ <div class="item"><div class="check">2</div><div class="item-text">消化不良，经常腹胀、便秘或腹泻</div></div>
|
|
|
+ <div class="item"><div class="check">3</div><div class="item-text">睡眠质量差，失眠、多梦、早醒</div></div>
|
|
|
+ <div class="item"><div class="check">4</div><div class="item-text">情绪波动大，容易焦虑、烦躁或低落</div></div>
|
|
|
+ <div class="item"><div class="check">5</div><div class="item-text">免疫力下降，换季必感冒或反复感染</div></div>
|
|
|
+ <div class="item"><div class="check">6</div><div class="item-text">皮肤问题：痤疮、湿疹、暗沉、长斑</div></div>
|
|
|
+ <div class="item"><div class="check">7</div><div class="item-text">体重管理困难，怎么减都不掉秤</div></div>
|
|
|
+ <div class="item"><div class="check">8</div><div class="item-text">记忆力下降，注意力不集中，脑子不清醒</div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="score-box">
|
|
|
+ <div class="score-title">评分标准</div>
|
|
|
+ <div class="score-desc">出现 0-2 项 → 健康状态 | 3-5 项 → 亚健康警报 | 6 项以上 → 慢病高风险</div>
|
|
|
+ </div>
|
|
|
+ <div class="badges">
|
|
|
+ <div class="badge b-green">0-2 项</div>
|
|
|
+ <div class="badge b-yellow">3-5 项</div>
|
|
|
+ <div class="badge b-red">6+ 项</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">03 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`,
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>肠道菌群科学</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
|
|
|
+ .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
|
|
|
+ .content { position:absolute; top:100px; left:80px; right:80px; }
|
|
|
+ .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
|
|
|
+ .sub { font-size:16px; color:#5a7a96; margin-bottom:28px; }
|
|
|
+ .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; }
|
|
|
+ .top-card-icon { font-size:48px; flex-shrink:0; }
|
|
|
+ .top-card-text { flex:1; }
|
|
|
+ .top-card-title { font-size:20px; font-weight:700; color:#0a2540; margin-bottom:8px; }
|
|
|
+ .top-card-desc { font-size:14px; color:#5a7a96; line-height:1.7; }
|
|
|
+ .evidence { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
|
|
|
+ .ev-card { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:18px 20px; position:relative; overflow:hidden; }
|
|
|
+ .ev-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#00b4d8,#4ecdc4); }
|
|
|
+ .ev-year { font-size:12px; font-weight:700; color:#4ecdc4; margin-bottom:6px; letter-spacing:0.05em; }
|
|
|
+ .ev-title { font-size:14px; font-weight:700; color:#0a2540; margin-bottom:6px; }
|
|
|
+ .ev-desc { font-size:12px; color:#5a7a96; line-height:1.5; }
|
|
|
+ .ev-journal { font-size:11px; color:#4ecdc4; font-weight:600; margin-top:6px; }
|
|
|
+ .conclusion { background:#f0fdfa; border-left:4px solid #4ecdc4; border-radius:0 8px 8px 0; padding:16px 24px; }
|
|
|
+ .conclusion p { font-size:15px; font-weight:600; color:#0a2540; line-height:1.6; }
|
|
|
+ .conclusion strong { color:#00b4d8; }
|
|
|
+ .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <div class="label">GUT SCIENCE</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">肠道菌群：人体健康的"总开关"</div>
|
|
|
+ <div class="sub">顶尖医学期刊持续证实：肠道微生态决定全身健康走向</div>
|
|
|
+ <div class="top-card">
|
|
|
+ <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>
|
|
|
+ <div class="top-card-text">
|
|
|
+ <div class="top-card-title">你的第二基因组</div>
|
|
|
+ <div class="top-card-desc">肠道菌群基因总量约为人类基因的 150 倍，被称为人体"第二基因组"。它调控免疫、代谢、情绪、炎症等几乎所有生理过程，是你健康的底层操作系统。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="evidence">
|
|
|
+ <div class="ev-card">
|
|
|
+ <div class="ev-year">2011 · NATURE</div>
|
|
|
+ <div class="ev-title">肠道-心脑血管关联</div>
|
|
|
+ <div class="ev-desc">肠道菌群代谢直接驱动心脑血管疾病发生，正式建立病理关联体系</div>
|
|
|
+ <div class="ev-journal">Nature</div>
|
|
|
+ </div>
|
|
|
+ <div class="ev-card">
|
|
|
+ <div class="ev-year">2013 · 临床突破</div>
|
|
|
+ <div class="ev-title">菌群移植治愈率</div>
|
|
|
+ <div class="ev-desc">菌群移植对特定肠道疾病治愈率超 90%，可显著改善自闭症等神经问题</div>
|
|
|
+ <div class="ev-journal">多中心临床研究</div>
|
|
|
+ </div>
|
|
|
+ <div class="ev-card">
|
|
|
+ <div class="ev-year">2020 · CELL</div>
|
|
|
+ <div class="ev-title">PAG 致病机制</div>
|
|
|
+ <div class="ev-desc">菌群代谢产物 PAG 直接加速血管炎症、斑块不稳定，诱发急性心脑血管事件</div>
|
|
|
+ <div class="ev-journal">Cell</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="conclusion">
|
|
|
+ <p>核心结论：<strong>肠道微生态是维持人体健康的"总开关"</strong>——菌群失衡引发肠漏 → 毒素入血 → 全身慢性炎症 → 心脑血管病、糖尿病、癌症……</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">04 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`,
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>传统医疗的困境</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
|
|
|
+ .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
|
|
|
+ .content { position:absolute; top:100px; left:80px; right:80px; }
|
|
|
+ .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
|
|
|
+ .sub { font-size:16px; color:#5a7a96; margin-bottom:28px; }
|
|
|
+ .pain-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; }
|
|
|
+ .pain-card { background:#fff; border:1px solid #fee2e2; border-radius:8px; padding:20px 24px; display:flex; gap:16px; align-items:flex-start; }
|
|
|
+ .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; }
|
|
|
+ .pain-title { font-size:16px; font-weight:700; color:#991b1b; margin-bottom:4px; }
|
|
|
+ .pain-desc { font-size:13px; color:#5a7a96; line-height:1.5; }
|
|
|
+ .flow { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:24px; }
|
|
|
+ .flow-step { background:#fee2e2; border-radius:8px; padding:12px 20px; text-align:center; }
|
|
|
+ .flow-step-label { font-size:13px; font-weight:700; color:#991b1b; }
|
|
|
+ .flow-step-sub { font-size:11px; color:#5a7a96; margin-top:2px; }
|
|
|
+ .flow-arrow { font-size:20px; color:#dc2626; padding:0 6px; }
|
|
|
+ .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; }
|
|
|
+ .bottom-icon { font-size:32px; flex-shrink:0; }
|
|
|
+ .bottom-text { font-size:15px; font-weight:600; color:#0a2540; line-height:1.5; }
|
|
|
+ .bottom-text strong { color:#00b4d8; }
|
|
|
+ .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <div class="label">MEDICAL LIMITS</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">吃药治病吗？</div>
|
|
|
+ <div class="sub">传统医疗在慢性病管理上的困境</div>
|
|
|
+ <div class="pain-grid">
|
|
|
+ <div class="pain-card">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="pain-title">药一辈子不能停</div>
|
|
|
+ <div class="pain-desc">高血压药、降糖药、他汀类——一旦开始就是终身服药，药物只控制指标，不解决根因</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pain-card">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="pain-title">治好一种，引发另一种</div>
|
|
|
+ <div class="pain-desc">利尿剂降压→血粘稠度升高；降糖药→胃肠道副作用→菌群进一步紊乱</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pain-card">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="pain-title">发病率越来越高</div>
|
|
|
+ <div class="pain-desc">原发高血压从1959年的5.1%飙升到2025年的26.4%——医疗进步了，病人却更多了</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pain-card">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="pain-title">有病才去医院</div>
|
|
|
+ <div class="pain-desc">等到确诊已是中晚期，冠脉堵塞70%才有心绞痛症状，30岁斑块就开始加速</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flow">
|
|
|
+ <div class="flow-step"><div class="flow-step-label">吃药</div><div class="flow-step-sub">控制指标</div></div>
|
|
|
+ <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>
|
|
|
+ <div class="flow-step"><div class="flow-step-label">药量加大</div><div class="flow-step-sub">耐药性</div></div>
|
|
|
+ <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>
|
|
|
+ <div class="flow-step"><div class="flow-step-label">联合用药</div><div class="flow-step-sub">副作用叠加</div></div>
|
|
|
+ <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>
|
|
|
+ <div class="flow-step"><div class="flow-step-label">并发症</div><div class="flow-step-sub">心梗/脑梗</div></div>
|
|
|
+ <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>
|
|
|
+ <div class="flow-step"><div class="flow-step-label">手术/搭桥</div><div class="flow-step-sub">应急方案</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <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>
|
|
|
+ <div class="bottom-text"><strong>核心问题：</strong>传统医疗处理的是"结果"（症状和指标），而非"原因"（菌群失衡和慢性炎症）。真正的健康，需要从源头主动干预。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">05 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`,
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>主动健康理念</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
|
|
|
+ .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
|
|
|
+ .content { position:absolute; top:100px; left:80px; right:80px; }
|
|
|
+ .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
|
|
|
+ .sub { font-size:16px; color:#5a7a96; margin-bottom:36px; }
|
|
|
+ .vs { display:flex; gap:32px; margin-bottom:32px; }
|
|
|
+ .vs-card { flex:1; border-radius:12px; padding:32px 28px; position:relative; overflow:hidden; }
|
|
|
+ .vs-left { background:#fee2e2; border:1px solid #fca5a5; }
|
|
|
+ .vs-right { background:#f0fdfa; border:2px solid #4ecdc4; }
|
|
|
+ .vs-badge { position:absolute; top:16px; right:16px; font-size:11px; font-weight:700; padding:4px 12px; border-radius:12px; }
|
|
|
+ .vs-left .vs-badge { background:#dc2626; color:#fff; }
|
|
|
+ .vs-right .vs-badge { background:#4ecdc4; color:#fff; }
|
|
|
+ .vs-icon { font-size:36px; margin-bottom:12px; display:flex; justify-content:center; }
|
|
|
+ .micro-section { position:absolute; bottom:100px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; }
|
|
|
+ .micro-label { font-size:12px; font-weight:700; color:#4ecdc4; letter-spacing:0.15em; display:flex; align-items:center; gap:8px; }
|
|
|
+ .micro-label::before, .micro-label::after { content:''; width:40px; height:1px; background:#4ecdc4; }
|
|
|
+ .micro-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:620px; justify-content:center; }
|
|
|
+ .micro-card { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:14px; width:140px; display:flex; flex-direction:column; gap:6px; }
|
|
|
+ .micro-card-header { display:flex; align-items:center; gap:6px; }
|
|
|
+ .micro-card-title { font-size:13px; font-weight:700; color:#0a2540; }
|
|
|
+ .micro-card-desc { font-size:11px; color:#5a7a96; line-height:1.4; }
|
|
|
+ .vs-title { font-size:22px; font-weight:800; margin-bottom:8px; }
|
|
|
+ .vs-left .vs-title { color:#991b1b; }
|
|
|
+ .vs-right .vs-title { color:#0a2540; }
|
|
|
+ .vs-desc { font-size:14px; line-height:1.7; }
|
|
|
+ .vs-left .vs-desc { color:#7f1d1d; }
|
|
|
+ .vs-right .vs-desc { color:#5a7a96; }
|
|
|
+ .vs-list { list-style:none; margin-top:12px; }
|
|
|
+ .vs-list li { font-size:13px; padding:4px 0; display:flex; align-items:center; gap:8px; }
|
|
|
+ .vs-left .vs-list li { color:#991b1b; }
|
|
|
+ .vs-right .vs-list li { color:#0a2540; }
|
|
|
+ .vs-left .vs-list li .icon-x { width:14px; height:14px; flex-shrink:0; }
|
|
|
+ .vs-right .vs-list li .icon-check { width:14px; height:14px; flex-shrink:0; }
|
|
|
+ .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; }
|
|
|
+ .quote p { font-size:16px; color:#0a2540; font-weight:500; line-height:1.7; }
|
|
|
+ .quote strong { color:#00b4d8; font-weight:700; }
|
|
|
+ .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <div class="label">PROACTIVE HEALTH</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">从"治病"到"不生病"</div>
|
|
|
+ <div class="sub">主动健康：在疾病发生之前，管理好你的健康</div>
|
|
|
+ <div class="vs">
|
|
|
+ <div class="vs-card vs-left">
|
|
|
+ <div class="vs-badge">传统模式</div>
|
|
|
+ <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>
|
|
|
+ <div class="vs-title">被动医疗</div>
|
|
|
+ <div class="vs-desc">等生病了才去医院，治疗的是"结果"</div>
|
|
|
+ <ul class="vs-list">
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="vs-card vs-right">
|
|
|
+ <div class="vs-badge">浠艾福</div>
|
|
|
+ <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>
|
|
|
+ <div class="vs-title">主动健康</div>
|
|
|
+ <div class="vs-desc">在疾病发生之前，从根源管理健康</div>
|
|
|
+ <ul class="vs-list">
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="micro-section">
|
|
|
+ <div class="micro-label">肠道菌群检测</div>
|
|
|
+ <div class="micro-grid">
|
|
|
+ <div class="micro-card">
|
|
|
+ <div class="micro-card-header">
|
|
|
+ <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>
|
|
|
+ <div class="micro-card-title">检测技术</div>
|
|
|
+ </div>
|
|
|
+ <div class="micro-card-desc">16S rRNA 基因测序技术，一次精准检测 300+ 肠道菌群种类</div>
|
|
|
+ </div>
|
|
|
+ <div class="micro-card">
|
|
|
+ <div class="micro-card-header">
|
|
|
+ <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>
|
|
|
+ <div class="micro-card-title">核心指标</div>
|
|
|
+ </div>
|
|
|
+ <div class="micro-card-desc">α多样性、β多样性、菌群丰度与均匀度、共生代谢通路综合评估</div>
|
|
|
+ </div>
|
|
|
+ <div class="micro-card">
|
|
|
+ <div class="micro-card-header">
|
|
|
+ <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>
|
|
|
+ <div class="micro-card-title">风险预警</div>
|
|
|
+ </div>
|
|
|
+ <div class="micro-card-desc">条件致病菌丰度实时监控，关联12类慢病风险模型预测</div>
|
|
|
+ </div>
|
|
|
+ <div class="micro-card">
|
|
|
+ <div class="micro-card-header">
|
|
|
+ <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>
|
|
|
+ <div class="micro-card-title">闭环管理</div>
|
|
|
+ </div>
|
|
|
+ <div class="micro-card-desc">检测→评估→干预→复测闭环，数据驱动精准调整</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="quote">
|
|
|
+ <p>健康，非无病即安。而是以<strong>简易悦心之法，主动调控</strong>，养充沛生机，去身、心痛楚，得长寿安康。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">06 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`,
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>五维健康体系</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
|
|
|
+ .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
|
|
|
+ .content { position:absolute; top:100px; left:80px; right:80px; }
|
|
|
+ .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:8px; }
|
|
|
+ .sub { font-size:16px; color:#5a7a96; margin-bottom:32px; }
|
|
|
+ .pentagon { display:flex; justify-content:center; gap:20px; margin-bottom:28px; }
|
|
|
+ .dim { width:200px; border-radius:12px; padding:24px 16px; text-align:center; position:relative; overflow:hidden; transition:transform .2s; }
|
|
|
+ .dim:hover { transform:translateY(-4px); }
|
|
|
+ .dim::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
|
|
|
+ .dim-body { background:#f0fdfa; border:1px solid #e0f5f1; }
|
|
|
+ .dim-body::before { background:linear-gradient(90deg,#00b4d8,#4ecdc4); }
|
|
|
+ .dim-mind { background:#f5f3ff; border:1px solid #e0e7ff; }
|
|
|
+ .dim-mind::before { background:linear-gradient(90deg,#8b5cf6,#a78bfa); }
|
|
|
+ .dim-brain { background:#fffbeb; border:1px solid #fde68a; }
|
|
|
+ .dim-brain::before { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
|
|
|
+ .dim-action { background:#fef2f2; border:1px solid #fecaca; }
|
|
|
+ .dim-action::before { background:linear-gradient(90deg,#ef4444,#f87171); }
|
|
|
+ .dim-wealth { background:#f0fdf4; border:1px solid #bbf7d0; }
|
|
|
+ .dim-wealth::before { background:linear-gradient(90deg,#22c55e,#4ade80); }
|
|
|
+ .dim-icon { font-size:36px; margin-bottom:10px; }
|
|
|
+ .dim-zh { font-size:20px; font-weight:800; color:#0a2540; margin-bottom:2px; }
|
|
|
+ .dim-en { font-size:11px; font-weight:600; color:#5a7a96; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:10px; }
|
|
|
+ .dim-desc { font-size:12px; color:#5a7a96; line-height:1.5; }
|
|
|
+ .center-label { text-align:center; margin-bottom:20px; }
|
|
|
+ .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; }
|
|
|
+ .bottom { display:flex; gap:16px; }
|
|
|
+ .bottom-card { flex:1; background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:16px 20px; }
|
|
|
+ .bottom-title { font-size:13px; font-weight:700; color:#0a2540; margin-bottom:4px; }
|
|
|
+ .bottom-desc { font-size:12px; color:#5a7a96; line-height:1.5; }
|
|
|
+ .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <div class="label">5-DIMENSION SYSTEM</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">浠艾福五维健康体系</div>
|
|
|
+ <div class="sub">健康不是单一指标，而是五个维度的动态平衡</div>
|
|
|
+ <div class="center-label"><span>五维能量 · 全面守护 · 精准干预</span></div>
|
|
|
+ <div class="pentagon">
|
|
|
+ <div class="dim dim-body">
|
|
|
+ <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>
|
|
|
+ <div class="dim-zh">身</div>
|
|
|
+ <div class="dim-en">PHYSICAL</div>
|
|
|
+ <div class="dim-desc">身体机能·营养均衡<br/>免疫力·肠道健康<br/>慢性病预防与管理</div>
|
|
|
+ </div>
|
|
|
+ <div class="dim dim-mind">
|
|
|
+ <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>
|
|
|
+ <div class="dim-zh">心</div>
|
|
|
+ <div class="dim-en">MENTAL</div>
|
|
|
+ <div class="dim-desc">情绪管理·压力调节<br/>睡眠质量·心理韧性<br/>焦虑抑郁预防</div>
|
|
|
+ </div>
|
|
|
+ <div class="dim dim-brain">
|
|
|
+ <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>
|
|
|
+ <div class="dim-zh">智</div>
|
|
|
+ <div class="dim-en">INTELLECTUAL</div>
|
|
|
+ <div class="dim-desc">认知功能·学习能力<br/>专注力·记忆力<br/>脑健康与抗衰</div>
|
|
|
+ </div>
|
|
|
+ <div class="dim dim-action">
|
|
|
+ <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>
|
|
|
+ <div class="dim-zh">行</div>
|
|
|
+ <div class="dim-en">BEHAVIORAL</div>
|
|
|
+ <div class="dim-desc">运动习惯·饮食习惯<br/>作息规律·行为改变<br/>健康生活方式养成</div>
|
|
|
+ </div>
|
|
|
+ <div class="dim dim-wealth">
|
|
|
+ <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>
|
|
|
+ <div class="dim-zh">富</div>
|
|
|
+ <div class="dim-en">WEALTH</div>
|
|
|
+ <div class="dim-desc">健康财富·时间自由<br/>家庭和谐·生命质量<br/>健康即最大的财富</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-card">
|
|
|
+ <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>
|
|
|
+ <div class="bottom-desc">五维不是独立的，而是相互关联的整体。肠道健康（身）影响情绪（心），情绪影响认知（智），认知决定行为（行），行为创造健康财富（富）。</div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-card">
|
|
|
+ <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>
|
|
|
+ <div class="bottom-desc">浠艾福从"身"维度切入——通过精准营养和肠道菌群管理，修复身体底层操作系统，带动其他四个维度全面提升。</div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-card">
|
|
|
+ <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>
|
|
|
+ <div class="bottom-desc">五维能量评估，量化你的健康状态。每个维度独立评分，找到短板，精准干预，而非头痛医头。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">07 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`,
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>会员权益</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
|
|
|
+ .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; }
|
|
|
+ .content { position:absolute; top:100px; left:80px; right:80px; display:flex; gap:36px; }
|
|
|
+ .left { flex:1; }
|
|
|
+ .right { width:400px; }
|
|
|
+ .title { font-size:38px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:24px; }
|
|
|
+ .benefits { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px; }
|
|
|
+ .ben { background:#f8fffe; border:1px solid #e0f5f1; border-radius:8px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start; }
|
|
|
+ .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; }
|
|
|
+ .ben-title { font-size:14px; font-weight:700; color:#0a2540; margin-bottom:2px; }
|
|
|
+ .ben-desc { font-size:12px; color:#5a7a96; line-height:1.4; }
|
|
|
+ .seed { background:linear-gradient(135deg,#fef2f2,#fff7ed); border:1px solid #fca5a5; border-radius:10px; padding:20px 24px; }
|
|
|
+ .seed-badge { display:inline-block; background:#dc2626; color:#fff; font-size:11px; font-weight:700; padding:4px 14px; border-radius:12px; margin-bottom:12px; }
|
|
|
+ .seed-title { font-size:18px; font-weight:800; color:#0a2540; margin-bottom:10px; }
|
|
|
+ .seed-list { list-style:none; }
|
|
|
+ .seed-list li { font-size:13px; color:#5a7a96; padding:5px 0; display:flex; align-items:center; gap:8px; line-height:1.4; }
|
|
|
+ .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; }
|
|
|
+ .seed-list li strong { color:#dc2626; font-weight:700; }
|
|
|
+ .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <div class="label">MEMBERSHIP</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">会员权益</div>
|
|
|
+ <div class="benefits">
|
|
|
+ <div class="ben">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="ben-title">菌群基因检测</div>
|
|
|
+ <div class="ben-desc">价值 ¥1314 · 今日下单即送</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ben">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="ben-title">精准营养方案</div>
|
|
|
+ <div class="ben-desc">基于检测结果定制</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ben">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="ben-title">一对一健康管理师</div>
|
|
|
+ <div class="ben-desc">全年跟踪 · 随时咨询</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ben">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="ben-title">健康数据档案</div>
|
|
|
+ <div class="ben-desc">完整记录 · 趋势分析</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ben">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="ben-title">健康教育课程</div>
|
|
|
+ <div class="ben-desc">肠道科学 · 营养知识</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ben">
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <div class="ben-title">会员专属折扣</div>
|
|
|
+ <div class="ben-desc">营养品会员专享价</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="seed">
|
|
|
+ <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>
|
|
|
+ <div class="seed-title">首批加入，解锁长期收益</div>
|
|
|
+ <ul class="seed-list">
|
|
|
+ <li><strong>分享提成：</strong>推荐好友加入，每推荐 1 人即获提成</li>
|
|
|
+ <li><strong>消费返佣：</strong>被推荐人后续每次消费，你持续获得返佣</li>
|
|
|
+ <li><strong>优先体验：</strong>新品上线、新服务推出，优先试用</li>
|
|
|
+ <li><strong>核心社群：</strong>对接创始团队，参与产品共建</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">08 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`,
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>限时优惠</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ body { width:1280px; height:720px; background:#fff; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; position:relative; }
|
|
|
+ .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#dc2626,#f97316,#facc15); }
|
|
|
+ /* SVG 背景装饰 */
|
|
|
+ .bg-circles { position:absolute; top:-80px; right:-80px; width:400px; height:400px; opacity:0.06; }
|
|
|
+ .bg-dna { position:absolute; bottom:0; left:0; width:300px; height:720px; opacity:0.04; }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width:8px; height:8px; background:#dc2626; border-radius:50%; animation:pulse 1.5s ease-in-out infinite; }
|
|
|
+ @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
|
|
|
+ .content { position:absolute; top:100px; left:80px; right:80px; display:flex; gap:36px; z-index:2; }
|
|
|
+ .left { flex:1; }
|
|
|
+ .right { width:400px; display:flex; flex-direction:column; gap:16px; }
|
|
|
+ .title { font-size:36px; font-weight:800; letter-spacing:-0.035em; color:#0a2540; margin-bottom:6px; }
|
|
|
+ .title em { font-style:normal; color:#dc2626; }
|
|
|
+ .sub { font-size:15px; color:#5a7a96; margin-bottom:24px; }
|
|
|
+ .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; }
|
|
|
+ .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%; }
|
|
|
+ .offer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
|
|
|
+ .offer-title { font-size:20px; font-weight:800; color:#0a2540; }
|
|
|
+ .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; }
|
|
|
+ .offer-tag svg { width:14px; height:14px; }
|
|
|
+ .offer-price { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
|
|
|
+ .price-old { font-size:18px; color:#9ca3af; text-decoration:line-through; }
|
|
|
+ .price-new { font-size:44px; font-weight:800; color:#dc2626; }
|
|
|
+ .price-unit { font-size:15px; color:#5a7a96; }
|
|
|
+ .offer-list { list-style:none; }
|
|
|
+ .offer-list li { font-size:14px; color:#0a2540; padding:7px 0; border-bottom:1px solid #fee2e2; display:flex; align-items:center; gap:8px; }
|
|
|
+ .offer-list li:last-child { border-bottom:none; }
|
|
|
+ .offer-list li svg { width:16px; height:16px; flex-shrink:0; }
|
|
|
+ .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; }
|
|
|
+ .urgency svg { width:20px; height:20px; flex-shrink:0; }
|
|
|
+ .urgency-text { font-size:14px; font-weight:700; color:#92400e; }
|
|
|
+ /* 右侧礼物卡 */
|
|
|
+ .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; }
|
|
|
+ .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%; }
|
|
|
+ .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%; }
|
|
|
+ .gift-icon { position:relative; z-index:1; margin-bottom:12px; }
|
|
|
+ .gift-label { font-size:13px; font-weight:600; opacity:0.9; margin-bottom:6px; letter-spacing:0.1em; position:relative; z-index:1; }
|
|
|
+ .gift-value { font-size:52px; font-weight:800; margin-bottom:2px; position:relative; z-index:1; }
|
|
|
+ .gift-unit { font-size:15px; opacity:0.85; margin-bottom:12px; position:relative; z-index:1; }
|
|
|
+ .gift-desc { font-size:13px; opacity:0.9; line-height:1.6; position:relative; z-index:1; }
|
|
|
+ .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; z-index:2; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <!-- SVG 背景装饰：同心圆 -->
|
|
|
+ <svg class="bg-circles" viewBox="0 0 400 400">
|
|
|
+ <circle cx="200" cy="200" r="180" fill="none" stroke="#dc2626" stroke-width="1"/>
|
|
|
+ <circle cx="200" cy="200" r="140" fill="none" stroke="#dc2626" stroke-width="1"/>
|
|
|
+ <circle cx="200" cy="200" r="100" fill="none" stroke="#dc2626" stroke-width="1"/>
|
|
|
+ <circle cx="200" cy="200" r="60" fill="none" stroke="#dc2626" stroke-width="1.5"/>
|
|
|
+ </svg>
|
|
|
+ <!-- SVG 背景装饰：DNA双螺旋 -->
|
|
|
+ <svg class="bg-dna" viewBox="0 0 300 720">
|
|
|
+ <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"/>
|
|
|
+ <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"/>
|
|
|
+ <line x1="90" y1="60" x2="210" y2="60" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ <line x1="60" y1="120" x2="240" y2="120" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ <line x1="90" y1="180" x2="210" y2="180" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ <line x1="60" y1="240" x2="240" y2="240" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ <line x1="90" y1="300" x2="210" y2="300" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ <line x1="60" y1="360" x2="240" y2="360" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ <line x1="90" y1="420" x2="210" y2="420" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ <line x1="60" y1="480" x2="240" y2="480" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ <line x1="90" y1="540" x2="210" y2="540" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ <line x1="60" y1="600" x2="240" y2="600" stroke="#dc2626" stroke-width="1" opacity="0.5"/>
|
|
|
+ </svg>
|
|
|
+ <div class="label">
|
|
|
+ <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>
|
|
|
+ LIMITED OFFER
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">今日限定 · <em>买年度会员</em></div>
|
|
|
+ <div class="sub">首批种子用户专享，名额有限，先到先得</div>
|
|
|
+ <div class="offer-card">
|
|
|
+ <div class="offer-header">
|
|
|
+ <div class="offer-title">浠艾福年度会员</div>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div class="offer-price">
|
|
|
+ <div class="price-old">原价 ¥XXX</div>
|
|
|
+ <div class="price-new">¥XXX</div>
|
|
|
+ <div class="price-unit">/年</div>
|
|
|
+ </div>
|
|
|
+ <ul class="offer-list">
|
|
|
+ <li>
|
|
|
+ <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>
|
|
|
+ 全年 1 对 1 健康管理师跟踪服务
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <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>
|
|
|
+ 个性化精准营养方案
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <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>
|
|
|
+ 会员专属产品折扣
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <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>
|
|
|
+ 健康教育课程无限畅学
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <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>
|
|
|
+ 种子用户分享提成 + 消费返佣资格
|
|
|
+ </li>
|
|
|
+ <li style="color:#dc2626; font-weight:700; border-bottom:none;">
|
|
|
+ <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>
|
|
|
+ PLUS ↓ 赠送以下检测
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="gift-box">
|
|
|
+ <!-- 礼物盒 SVG 图标 -->
|
|
|
+ <div class="gift-icon">
|
|
|
+ <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
|
|
|
+ <rect x="8" y="28" width="48" height="30" rx="4" fill="rgba(255,255,255,0.2)" stroke="#fff" stroke-width="2"/>
|
|
|
+ <rect x="4" y="22" width="56" height="10" rx="3" fill="rgba(255,255,255,0.3)" stroke="#fff" stroke-width="2"/>
|
|
|
+ <path d="M32 22V58" stroke="#fff" stroke-width="2"/>
|
|
|
+ <path d="M32 22C32 22 24 10 18 10C12 10 12 18 18 22" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
|
+ <path d="M32 22C32 22 40 10 46 10C52 10 52 18 46 22" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
|
+ <circle cx="18" cy="10" r="3" fill="rgba(255,255,255,0.4)"/>
|
|
|
+ <circle cx="46" cy="10" r="3" fill="rgba(255,255,255,0.4)"/>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
+ <div class="gift-value">¥1314</div>
|
|
|
+ <div class="gift-unit">肠道菌群基因检测</div>
|
|
|
+ <div class="gift-desc">全面分析肠道菌群构成<br/>了解你的"第二基因组"<br/>精准指导后续营养方案</div>
|
|
|
+ </div>
|
|
|
+ <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;">
|
|
|
+ 检测包含：<strong style="color:#0a2540;">菌群多样性分析 · 肠道年龄评估 · 有害菌/有益菌占比 · 慢病风险预警 · 个性化饮食建议</strong>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">09 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`,
|
|
|
+`<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>立即加入</title>
|
|
|
+ <style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
+ * { margin:0; padding:0; box-sizing:border-box; }
|
|
|
+ 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; }
|
|
|
+ .top-bar { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#00b4d8,#4ecdc4,#95e1d3); }
|
|
|
+ /* SVG 背景装饰 */
|
|
|
+ .bg-wave { position:absolute; bottom:0; left:0; right:0; height:200px; opacity:0.06; }
|
|
|
+ .bg-molecule { position:absolute; top:40px; right:120px; width:200px; height:200px; opacity:0.08; }
|
|
|
+ .bg-hex { position:absolute; bottom:100px; left:60px; width:160px; height:160px; opacity:0.05; }
|
|
|
+ .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; }
|
|
|
+ .label::before { content:''; width:8px; height:8px; background:#4ecdc4; border-radius:50%; animation:pulse 2s ease-in-out infinite; }
|
|
|
+ @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
|
|
|
+ .content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; width:82%; z-index:2; }
|
|
|
+ .title { font-size:52px; font-weight:800; letter-spacing:-0.04em; color:#0a2540; margin-bottom:10px; }
|
|
|
+ .subtitle { font-size:18px; color:#5a7a96; margin-bottom:36px; line-height:1.6; }
|
|
|
+ .cta-row { display:flex; align-items:center; justify-content:center; gap:48px; margin-bottom:32px; }
|
|
|
+ .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; }
|
|
|
+ .qr-box::before { content:''; position:absolute; inset:-4px; border:1px dashed #4ecdc4; border-radius:14px; opacity:0.4; }
|
|
|
+ .cta-text { text-align:left; }
|
|
|
+ .cta-main { font-size:26px; font-weight:800; color:#0a2540; margin-bottom:6px; }
|
|
|
+ .cta-main em { font-style:normal; color:#dc2626; }
|
|
|
+ .cta-sub { font-size:15px; color:#5a7a96; line-height:1.6; margin-bottom:14px; }
|
|
|
+ .cta-features { list-style:none; }
|
|
|
+ .cta-features li { font-size:14px; color:#0a2540; padding:4px 0; display:flex; align-items:center; gap:8px; }
|
|
|
+ .cta-features li svg { width:16px; height:16px; flex-shrink:0; }
|
|
|
+ .divider { width:100%; height:1px; background:linear-gradient(90deg,transparent,#4ecdc4,transparent); margin:20px 0; }
|
|
|
+ .quote { font-size:16px; color:#5a7a96; font-style:italic; max-width:640px; margin:0 auto; line-height:1.7; }
|
|
|
+ .quote strong { color:#00b4d8; font-weight:600; font-style:normal; }
|
|
|
+ .brand-row { position:absolute; bottom:44px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; z-index:2; }
|
|
|
+ .brand-text { font-size:14px; font-weight:600; color:#4ecdc4; letter-spacing:0.12em; }
|
|
|
+ .page { position:absolute; bottom:28px; right:40px; font-size:12px; color:#5a7a96; opacity:0.5; font-weight:500; z-index:2; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="top-bar"></div>
|
|
|
+ <!-- SVG 波浪背景 -->
|
|
|
+ <svg class="bg-wave" viewBox="0 0 1280 200" preserveAspectRatio="none">
|
|
|
+ <path d="M0,100 C200,40 400,160 640,100 C880,40 1080,160 1280,100 L1280,200 L0,200 Z" fill="#4ecdc4"/>
|
|
|
+ <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"/>
|
|
|
+ </svg>
|
|
|
+ <!-- SVG 分子结构装饰 -->
|
|
|
+ <svg class="bg-molecule" viewBox="0 0 200 200">
|
|
|
+ <circle cx="100" cy="60" r="12" fill="none" stroke="#4ecdc4" stroke-width="2"/>
|
|
|
+ <circle cx="50" cy="130" r="12" fill="none" stroke="#4ecdc4" stroke-width="2"/>
|
|
|
+ <circle cx="150" cy="130" r="12" fill="none" stroke="#4ecdc4" stroke-width="2"/>
|
|
|
+ <circle cx="100" cy="170" r="8" fill="none" stroke="#4ecdc4" stroke-width="1.5"/>
|
|
|
+ <line x1="100" y1="72" x2="56" y2="122" stroke="#4ecdc4" stroke-width="1.5"/>
|
|
|
+ <line x1="100" y1="72" x2="144" y2="122" stroke="#4ecdc4" stroke-width="1.5"/>
|
|
|
+ <line x1="56" y1="136" x2="94" y2="166" stroke="#4ecdc4" stroke-width="1.5"/>
|
|
|
+ <line x1="144" y1="136" x2="106" y2="166" stroke="#4ecdc4" stroke-width="1.5"/>
|
|
|
+ </svg>
|
|
|
+ <!-- SVG 六边形装饰 -->
|
|
|
+ <svg class="bg-hex" viewBox="0 0 160 160">
|
|
|
+ <polygon points="80,10 145,40 145,100 80,130 15,100 15,40" fill="none" stroke="#4ecdc4" stroke-width="2"/>
|
|
|
+ <polygon points="80,30 125,50 125,90 80,110 35,90 35,50" fill="none" stroke="#4ecdc4" stroke-width="1.5"/>
|
|
|
+ <polygon points="80,50 105,62 105,82 80,94 55,82 55,62" fill="none" stroke="#4ecdc4" stroke-width="1"/>
|
|
|
+ </svg>
|
|
|
+ <div class="label">
|
|
|
+ <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>
|
|
|
+ JOIN US NOW
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">立即加入浠艾福</div>
|
|
|
+ <div class="subtitle">精准营养，主动健康，让每一个家庭都拥有健康守护者</div>
|
|
|
+ <div class="cta-row">
|
|
|
+ <div class="qr-box">
|
|
|
+ <!-- 二维码占位 SVG -->
|
|
|
+ <svg width="140" height="140" viewBox="0 0 140 140">
|
|
|
+ <rect x="10" y="10" width="40" height="40" rx="4" fill="#0a2540"/>
|
|
|
+ <rect x="16" y="16" width="28" height="28" rx="2" fill="#fff"/>
|
|
|
+ <rect x="22" y="22" width="16" height="16" rx="1" fill="#0a2540"/>
|
|
|
+ <rect x="90" y="10" width="40" height="40" rx="4" fill="#0a2540"/>
|
|
|
+ <rect x="96" y="16" width="28" height="28" rx="2" fill="#fff"/>
|
|
|
+ <rect x="102" y="22" width="16" height="16" rx="1" fill="#0a2540"/>
|
|
|
+ <rect x="10" y="90" width="40" height="40" rx="4" fill="#0a2540"/>
|
|
|
+ <rect x="16" y="96" width="28" height="28" rx="2" fill="#fff"/>
|
|
|
+ <rect x="22" y="102" width="16" height="16" rx="1" fill="#0a2540"/>
|
|
|
+ <rect x="60" y="60" width="20" height="20" rx="2" fill="#4ecdc4"/>
|
|
|
+ <rect x="60" y="10" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="72" y="10" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="60" y="22" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="10" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="22" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="10" y="72" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="90" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="102" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="114" y="60" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="90" y="72" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="60" y="90" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="72" y="90" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="60" y="102" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="90" y="100" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="102" y="112" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="114" y="100" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ <rect x="120" y="112" width="8" height="8" fill="#0a2540" opacity="0.3"/>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="cta-text">
|
|
|
+ <div class="cta-main">今日下单 · <em>赠送 ¥1314 菌群检测</em></div>
|
|
|
+ <div class="cta-sub">成为种子用户，解锁分享提成与消费返佣权益</div>
|
|
|
+ <ul class="cta-features">
|
|
|
+ <li>
|
|
|
+ <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>
|
|
|
+ 年度会员全年健康管理服务
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <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>
|
|
|
+ 价值 ¥1314 肠道菌群基因检测
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <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>
|
|
|
+ 种子用户专属收益权
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <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>
|
|
|
+ 仅限首批 <strong style="color:#dc2626">100</strong> 名
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divider"></div>
|
|
|
+ <div class="quote">
|
|
|
+ "用最适合你自己的、且最简单的方法，<br/><strong>心情愉快、活得舒服、活得长久！</strong>"
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="brand-row">
|
|
|
+ <!-- 品牌 SVG 标志 -->
|
|
|
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
|
|
+ <circle cx="14" cy="14" r="12" stroke="#4ecdc4" stroke-width="2"/>
|
|
|
+ <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"/>
|
|
|
+ <circle cx="14" cy="14" r="3" fill="#4ecdc4"/>
|
|
|
+ </svg>
|
|
|
+ <div class="brand-text">浠艾福 · CARE FAMILY CLUB</div>
|
|
|
+ </div>
|
|
|
+ <div class="page">10 / 10</div>
|
|
|
+</body>
|
|
|
+</html>`
|
|
|
+];
|
|
|
+
|
|
|
+let current = 0;
|
|
|
+const total = slides.length;
|
|
|
+const container = document.getElementById('slideContainer');
|
|
|
+const dotsEl = document.getElementById('navDots');
|
|
|
+const counterEl = document.getElementById('currentSlide');
|
|
|
+
|
|
|
+slides.forEach((html, i) => {
|
|
|
+ const iframe = document.createElement('iframe');
|
|
|
+ iframe.className = 'slide' + (i === 0 ? ' active' : '');
|
|
|
+ iframe.id = 'slide-' + i;
|
|
|
+ iframe.srcdoc = html;
|
|
|
+ iframe.style.border = 'none';
|
|
|
+ iframe.setAttribute('scrolling', 'no');
|
|
|
+ iframe.setAttribute('frameborder', '0');
|
|
|
+ container.appendChild(iframe);
|
|
|
+ const dot = document.createElement('div');
|
|
|
+ dot.className = 'nav-dot' + (i === 0 ? ' active' : '');
|
|
|
+ dot.onclick = () => goToSlide(i);
|
|
|
+ dotsEl.appendChild(dot);
|
|
|
+});
|
|
|
+
|
|
|
+function goToSlide(n) {
|
|
|
+ const prev = current;
|
|
|
+ current = Math.max(0, Math.min(total - 1, n));
|
|
|
+ if (current === prev) return;
|
|
|
+ document.getElementById('slide-' + prev).classList.remove('active');
|
|
|
+ document.getElementById('slide-' + current).classList.add('active');
|
|
|
+ dotsEl.children[prev].classList.remove('active');
|
|
|
+ dotsEl.children[current].classList.add('active');
|
|
|
+ counterEl.textContent = current + 1;
|
|
|
+}
|
|
|
+function nextSlide() { goToSlide(current + 1); }
|
|
|
+function prevSlide() { goToSlide(current - 1); }
|
|
|
+
|
|
|
+function updateScale() {
|
|
|
+ const sx = window.innerWidth / 1280;
|
|
|
+ const sy = window.innerHeight / 720;
|
|
|
+ const s = Math.min(sx, sy) * 0.95;
|
|
|
+ document.documentElement.style.setProperty('--scale', s);
|
|
|
+}
|
|
|
+window.addEventListener('resize', updateScale);
|
|
|
+updateScale();
|
|
|
+
|
|
|
+document.addEventListener('keydown', e => {
|
|
|
+ if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
|
|
|
+ else if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
|
|
|
+ else if (e.key === 'PageDown') { e.preventDefault(); goToSlide(current + 3); }
|
|
|
+ else if (e.key === 'PageUp') { e.preventDefault(); goToSlide(current - 3); }
|
|
|
+ else if (e.key === 'Home') { e.preventDefault(); goToSlide(0); }
|
|
|
+ else if (e.key === 'End') { e.preventDefault(); goToSlide(total - 1); }
|
|
|
+});
|
|
|
+
|
|
|
+function toggleFullscreen() {
|
|
|
+ if (!document.fullscreenElement) document.documentElement.requestFullscreen();
|
|
|
+ else document.exitFullscreen();
|
|
|
+}
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
