| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title>COMPEX VOC分析报告</title>
- <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
- <style>
- :root{
- --bg-deep:#0B0F1A;--bg-dark:#101828;--bg-mid:#1A2540;
- --navy:#2D4A6F;--navy-light:#4B7399;
- --gold:#C5A55A;--gold-light:#D4B978;
- --cream:#F0F4FF;--cream-dim:#C8D6E5;
- --accent-rose:#C4868B;--accent-sage:#8FA68A;--accent-blue:#7E9BB5;
- --glass:rgba(240,244,255,0.06);--glass-border:rgba(197,165,90,0.18);--glass-hover:rgba(240,244,255,0.12);
- --shadow:0 8px 32px rgba(0,0,0,0.35);--radius:16px;
- --transition:all .4s cubic-bezier(.4,0,.2,1);
- --font:'Segoe UI','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
- }
- *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
- html{font-size:16px;scroll-behavior:smooth;overflow:hidden}
- body{font-family:var(--font);background:var(--bg-deep);color:var(--cream);line-height:1.7;overflow:hidden;-webkit-font-smoothing:antialiased}
- h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
- h2{font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:700}
- h3{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600}
- a{color:var(--gold);text-decoration:none}
- #slides-wrapper{position:relative;width:100vw;height:100vh;overflow:hidden}
- .slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,4vw,60px);opacity:0;visibility:hidden;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease,visibility 0s .7s;z-index:0;overflow-y:auto}
- .slide.active{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .7s ease,transform .7s ease,visibility 0s 0s;z-index:1}
- .slide-inner{width:100%;max-width:1200px;position:relative}
- .slide-header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(24px,4vw,60px);font-size:.8rem;color:var(--navy-light);letter-spacing:.05em;z-index:10;pointer-events:none}
- .slide-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(24px,4vw,60px);font-size:.75rem;color:rgba(75,115,153,.6);z-index:10;pointer-events:none}
- .page-num{font-weight:600;color:var(--gold)}
- .glass-card{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:clamp(18px,2.5vw,32px);transition:var(--transition);position:relative;overflow:hidden}
- .glass-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(197,165,90,.08) 0%,transparent 60%);pointer-events:none;border-radius:inherit}
- .glass-card:hover{background:var(--glass-hover);border-color:rgba(197,165,90,.35);transform:translateY(-2px);box-shadow:var(--shadow)}
- .metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(12px,2vw,24px);width:100%}
- .metric-card{text-align:center;padding:clamp(16px,2vw,28px)}
- .metric-value{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:var(--gold);margin-bottom:4px}
- .metric-label{font-size:.85rem;color:var(--cream-dim)}.metric-sub{font-size:.75rem;color:var(--navy-light);margin-top:2px}
- .data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:clamp(.75rem,1.4vw,.9rem)}
- .data-table thead th{background:rgba(197,165,90,.15);color:var(--gold-light);font-weight:600;padding:12px 14px;text-align:left;border-bottom:2px solid var(--gold);white-space:nowrap}
- .data-table thead th:first-child{border-radius:var(--radius) 0 0 0}.data-table thead th:last-child{border-radius:0 var(--radius) 0 0}
- .data-table tbody td{padding:10px 14px;border-bottom:1px solid rgba(75,115,153,.15);transition:background .3s}
- .data-table tbody tr:hover td{background:rgba(197,165,90,.06)}
- .badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600}
- .badge-gold{background:rgba(197,165,90,.2);color:var(--gold-light);border:1px solid rgba(197,165,90,.3)}
- .badge-rose{background:rgba(196,134,139,.15);color:var(--accent-rose);border:1px solid rgba(196,134,139,.25)}
- .badge-sage{background:rgba(143,166,138,.15);color:var(--accent-sage);border:1px solid rgba(143,166,138,.25)}
- .badge-blue{background:rgba(126,155,181,.15);color:var(--accent-blue);border:1px solid rgba(126,155,181,.25)}
- .pain-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
- .pain-icon{font-size:1.1rem;min-width:24px;text-align:center}
- .pain-info{flex:1}.pain-name{font-size:.85rem;font-weight:600;color:var(--cream);margin-bottom:3px}
- .pain-pct{font-size:.75rem;color:var(--navy-light)}
- .pain-track{width:100%;height:8px;background:rgba(240,244,255,.06);border-radius:4px;overflow:hidden}
- .pain-fill{height:100%;border-radius:4px;transition:width 1.5s ease}
- .bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
- .bar-label{min-width:130px;font-size:.82rem;text-align:right;color:var(--cream-dim)}
- .bar-track{flex:1;height:20px;background:rgba(240,244,255,.06);border-radius:10px;overflow:hidden}
- .bar-fill{height:100%;border-radius:10px;transition:width 1.5s cubic-bezier(.4,0,.2,1)}
- .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
- .cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(14px,2vw,24px)}
- .divider{width:60px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px;margin:16px 0}
- .mt-sm{margin-top:12px}.mt-md{margin-top:24px}.mb-sm{margin-bottom:12px}.mb-md{margin-bottom:24px}
- .text-gold{color:var(--gold)}.text-rose{color:var(--accent-rose)}.text-sage{color:var(--accent-sage)}.text-blue{color:var(--accent-blue)}
- .text-dim{color:var(--navy-light)}.text-sm{font-size:.82rem}.text-xs{font-size:.72rem}.fw-700{font-weight:700}.fw-600{font-weight:600}
- .chart-wrap{position:relative;width:100%;max-height:280px;margin:12px 0}.chart-wrap canvas{max-height:280px}
- #side-nav{position:fixed;right:clamp(10px,2vw,24px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:1000}
- .nav-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--navy-light);background:transparent;cursor:pointer;transition:var(--transition);position:relative}
- .nav-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(197,165,90,.5)}
- .nav-dot::after{content:attr(data-tip);position:absolute;right:22px;top:50%;transform:translateY(-50%);background:var(--bg-mid);color:var(--cream);padding:4px 12px;border-radius:8px;font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s}
- .nav-dot:hover::after{opacity:1}
- #fs-btn{position:fixed;top:18px;right:clamp(10px,2vw,24px);z-index:1001;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--gold);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:.78rem;transition:var(--transition)}
- #fs-btn:hover{background:var(--glass-hover);border-color:var(--gold)}
- #particles-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
- .cover-content{position:relative;z-index:1;text-align:center}
- .cover-brand{font-size:clamp(.9rem,1.8vw,1.2rem);color:var(--gold);letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
- .cover-title{background:linear-gradient(135deg,var(--cream) 0%,var(--gold-light) 50%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px}
- .cover-sub{font-size:clamp(.9rem,1.6vw,1.15rem);color:var(--cream-dim);max-width:640px;margin:0 auto 32px}
- .cover-date{font-size:.85rem;color:var(--navy-light);letter-spacing:.1em}
- .cover-line{width:80px;height:1px;background:var(--gold);margin:24px auto}
- .toc-list{list-style:none;counter-reset:toc}
- .toc-item{counter-increment:toc;padding:14px 20px;border-bottom:1px solid rgba(75,115,153,.12);cursor:pointer;display:flex;align-items:center;gap:16px;transition:var(--transition);border-radius:8px}
- .toc-item:hover{background:var(--glass-hover);padding-left:28px}
- .toc-item::before{content:counter(toc,decimal-leading-zero);font-size:1.6rem;font-weight:800;color:var(--gold);min-width:40px}
- .toc-item .toc-title{font-size:1.05rem;font-weight:600;color:var(--cream)}
- .toc-item .toc-desc{font-size:.78rem;color:var(--navy-light);margin-top:2px}
- .timeline{position:relative;padding-left:28px}
- .timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gold),var(--navy-light),transparent)}
- .timeline-item{position:relative;margin-bottom:24px;padding-left:20px}
- .timeline-item::before{content:'';position:absolute;left:-24px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--bg-dark);box-shadow:0 0 8px rgba(197,165,90,.4)}
- .timeline-item h4{color:var(--gold-light);font-size:.95rem;margin-bottom:4px}
- .timeline-item p{font-size:.82rem;color:var(--cream-dim)}
- .anim-enter{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
- .slide.active .anim-enter{opacity:1;transform:translateY(0)}
- .slide.active .anim-enter.d1{transition-delay:.15s}.slide.active .anim-enter.d2{transition-delay:.3s}
- .slide.active .anim-enter.d3{transition-delay:.45s}.slide.active .anim-enter.d4{transition-delay:.6s}
- @media(max-width:900px){.cols-2,.cols-3{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}#side-nav{right:6px;gap:8px}.nav-dot{width:9px;height:9px}}
- @media(max-width:600px){.metric-grid{grid-template-columns:1fr}.slide{padding:16px}}
- </style>
- </head>
- <body>
- <button id="fs-btn" title="全屏切换">⛶ 全屏</button>
- <nav id="side-nav">
- <div class="nav-dot active" data-tip="封面" data-slide="0"></div>
- <div class="nav-dot" data-tip="目录" data-slide="1"></div>
- <div class="nav-dot" data-tip="执行摘要" data-slide="2"></div>
- <div class="nav-dot" data-tip="品类全景" data-slide="3"></div>
- <div class="nav-dot" data-tip="品牌画像" data-slide="4"></div>
- <div class="nav-dot" data-tip="竞品矩阵" data-slide="5"></div>
- <div class="nav-dot" data-tip="VOC情感" data-slide="6"></div>
- <div class="nav-dot" data-tip="痛点洞察" data-slide="7"></div>
- <div class="nav-dot" data-tip="用户画像" data-slide="8"></div>
- <div class="nav-dot" data-tip="行动计划" data-slide="9"></div>
- <div class="nav-dot" data-tip="总结" data-slide="10"></div>
- </nav>
- <div id="slides-wrapper">
- <!-- SLIDE 0 — 封面 -->
- <section class="slide active" id="slide-0">
- <canvas id="particles-canvas"></canvas>
- <div class="cover-content">
- <p class="cover-brand">TENS / Electrotherapy Intelligence</p>
- <h1 class="cover-title">COMPEX<br>Amazon VOC 竞品分析报告</h1>
- <div class="cover-line"></div>
- <p class="cover-sub">品类:TENS Unit / Electrotherapy Device<br>基于 Amazon 美国站 102 个样本产品 + 2,406 条用户评论深度分析</p>
- <p class="cover-date">2026年04月 · AI Data Intelligence</p>
- </div>
- <div class="slide-footer"><span></span><span class="text-xs" style="opacity:.4">按 → 或滚轮翻页</span></div>
- </section>
- <!-- SLIDE 1 — 目录 -->
- <section class="slide" id="slide-1">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>目录</span></div>
- <div class="slide-inner" style="max-width:720px">
- <h2 class="text-gold mb-md" style="text-align:center">报告目录</h2>
- <div class="divider" style="margin:0 auto 28px"></div>
- <ul class="toc-list">
- <li class="toc-item" onclick="goSlide(2)"><div><div class="toc-title">核心执行摘要</div><div class="toc-desc">关键数据 · 核心发现 · 机会窗口</div></div></li>
- <li class="toc-item" onclick="goSlide(3)"><div><div class="toc-title">品类全景分析</div><div class="toc-desc">市场规模 · 价格带 · 品牌集中度</div></div></li>
- <li class="toc-item" onclick="goSlide(4)"><div><div class="toc-title">品牌六维画像</div><div class="toc-desc">综合得分 · 六维评估 · 核心短板</div></div></li>
- <li class="toc-item" onclick="goSlide(5)"><div><div class="toc-title">竞品对比矩阵</div><div class="toc-desc">Top5竞品 · 进攻策略 · 防守建议</div></div></li>
- <li class="toc-item" onclick="goSlide(6)"><div><div class="toc-title">VOC情感分析</div><div class="toc-desc">情感对比 · 正面热词 · 差评痛点</div></div></li>
- <li class="toc-item" onclick="goSlide(7)"><div><div class="toc-title">差评痛点深度洞察</div><div class="toc-desc">5大痛点 · 严重度排名 · 优化建议</div></div></li>
- <li class="toc-item" onclick="goSlide(8)"><div><div class="toc-title">用户画像</div><div class="toc-desc">3大目标人群 · 需求 · 真实评论</div></div></li>
- <li class="toc-item" onclick="goSlide(9)"><div><div class="toc-title">行动计划</div><div class="toc-desc">短期 · 中期 · 长期分阶段策略</div></div></li>
- <li class="toc-item" onclick="goSlide(10)"><div><div class="toc-title">总结与突破口</div><div class="toc-desc">最优先行动 · 差异化突破口</div></div></li>
- </ul>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">01</span></div>
- </section>
- <!-- SLIDE 2 — 执行摘要 -->
- <section class="slide" id="slide-2">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>执行摘要</span></div>
- <div class="slide-inner">
- <h2 class="text-gold mb-sm">核心执行摘要</h2><div class="divider"></div>
- <div class="metric-grid mt-md mb-md">
- <div class="glass-card metric-card anim-enter"><div class="metric-value" data-count="5492576" data-prefix="$">$0</div><div class="metric-label">品类月销售额</div><div class="metric-sub">TENS Unit 市场体量可观</div></div>
- <div class="glass-card metric-card anim-enter d1"><div class="metric-value" data-count="73.6" data-suffix="%" data-decimal="1">0</div><div class="metric-label">CR5 集中度</div><div class="metric-sub">双巨头垄断明显</div></div>
- <div class="glass-card metric-card anim-enter d2"><div class="metric-value" data-count="43.8" data-suffix="分" data-decimal="1">0</div><div class="metric-label">品牌综合得分</div><div class="metric-sub text-rose">严重品牌错位</div></div>
- <div class="glass-card metric-card anim-enter d3"><div class="metric-value" data-count="68.8" data-suffix="%" data-decimal="1">0</div><div class="metric-label">自身差评率</div><div class="metric-sub text-rose">远超竞品均值12.3%</div></div>
- </div>
- <div class="cols-2">
- <div class="glass-card anim-enter d2">
- <h3 class="text-gold mb-sm">⚠️ 核心发现</h3>
- <ul style="list-style:none;font-size:.85rem;color:var(--cream-dim)">
- <li style="margin-bottom:10px">• <strong class="text-rose">品牌错位:</strong>建档ASIN实为 lewitools/JIANHENG 按摩器</li>
- <li style="margin-bottom:10px">• <strong class="text-gold">双巨头垄断:</strong>TENS 7000 (25.7%) + AUVON (24.8%)</li>
- <li style="margin-bottom:10px">• <strong class="text-rose">VOC口碑危机:</strong>好评率仅25%,差评率68.8%</li>
- <li>• <strong class="text-sage">机会窗口:</strong>竞品普遍存在电池续航短、电极片不耐用</li>
- </ul>
- </div>
- <div class="glass-card anim-enter d3">
- <h3 class="text-gold mb-sm">💡 差异化机会</h3>
- <ul style="list-style:none;font-size:.85rem;color:var(--cream-dim)">
- <li style="margin-bottom:10px">• 可充电 + 高粘性电极片组合,直击竞品软肋</li>
- <li style="margin-bottom:10px">• $20-$35 中高端差异化定位</li>
- <li style="margin-bottom:10px">• FDA/CE认证背书,建立专业医疗形象</li>
- <li>• 针对AUVON低端品质参差,强调品控和安全</li>
- </ul>
- </div>
- </div>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">02</span></div>
- </section>
- <!-- SLIDE 3 — 品类全景 -->
- <section class="slide" id="slide-3">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>品类全景</span></div>
- <div class="slide-inner">
- <h2 class="text-gold mb-sm">品类全景分析</h2><div class="divider mb-md"></div>
- <div class="cols-2">
- <div class="glass-card anim-enter">
- <h3 class="text-sm fw-600 mb-sm">市场规模与价格带</h3>
- <table class="data-table">
- <thead><tr><th>指标</th><th>数值</th><th>解读</th></tr></thead>
- <tbody>
- <tr><td>月总销量</td><td class="fw-700">198,372</td><td>体量可观</td></tr>
- <tr><td>平均售价</td><td class="fw-700">$27.79</td><td>中低端为主</td></tr>
- <tr><td>中位售价</td><td class="fw-700 text-gold">$21.99</td><td>黄金价格带</td></tr>
- <tr><td>平均评分</td><td class="fw-700">4.51</td><td>用户期望高</td></tr>
- <tr><td>品类阶段</td><td class="fw-700">成熟期</td><td>存量竞争</td></tr>
- </tbody>
- </table>
- </div>
- <div class="glass-card anim-enter d1">
- <h3 class="text-sm fw-600 mb-sm">品牌市场份额</h3>
- <div class="chart-wrap"><canvas id="chart-share"></canvas></div>
- </div>
- </div>
- <div class="glass-card mt-md anim-enter d2" style="overflow-x:auto">
- <table class="data-table">
- <thead><tr><th>品牌</th><th>份额</th><th>均价</th><th>评分</th><th>定位</th></tr></thead>
- <tbody>
- <tr><td class="fw-600">TENS 7000</td><td class="text-gold fw-700">25.7%</td><td>$46.31</td><td>4.54</td><td><span class="badge badge-gold">高端主力</span></td></tr>
- <tr><td class="fw-600">AUVON</td><td class="text-gold fw-700">24.8%</td><td>$23.60</td><td>4.63</td><td><span class="badge badge-sage">性价比王</span></td></tr>
- <tr><td class="fw-600">Neocarbon</td><td>10.9%</td><td>$56.22</td><td>4.45</td><td><span class="badge badge-blue">高端专业</span></td></tr>
- <tr><td class="fw-600">AVCOO</td><td>7.8%</td><td>$22.78</td><td>4.6</td><td><span class="badge badge-sage">中端</span></td></tr>
- <tr><td class="fw-600">MASTOGO</td><td>4.4%</td><td>$28.24</td><td>4.35</td><td><span class="badge badge-blue">中端</span></td></tr>
- </tbody>
- </table>
- <div style="margin-top:14px;padding:10px 14px;background:rgba(196,134,139,.08);border-left:3px solid var(--accent-rose);border-radius:0 8px 8px 0;font-size:.82rem;color:var(--cream-dim)">
- <strong class="text-rose">⚠️ 风险:</strong>CR5=73.6%,HHI=1520,中等集中市场,头部垄断明显。
- </div>
- </div>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">03</span></div>
- </section>
- <!-- SLIDE 4 — 品牌画像 -->
- <section class="slide" id="slide-4">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>品牌画像</span></div>
- <div class="slide-inner">
- <h2 class="text-gold mb-sm">品牌六维画像</h2><div class="divider mb-md"></div>
- <div class="glass-card mb-md anim-enter" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
- <div><span class="fw-700" style="font-size:1.2rem">综合得分:</span><span class="text-gold fw-700" style="font-size:1.6rem">43.8</span><span class="text-dim"> / 100</span></div>
- <span class="badge badge-rose">待改进</span>
- <div style="width:100%;color:var(--navy-light);font-size:.9rem">定位象限:中价低质 | BSR约86136 | 定价$9.99</div>
- </div>
- <div class="cols-3">
- <div class="glass-card anim-enter d1"><div style="display:flex;justify-content:space-between;margin-bottom:10px"><span class="fw-600">💰 定价</span><span class="badge badge-rose">50</span></div><div class="text-dim text-sm">均价$9.99 vs 品类$21.99</div><div class="pain-track mt-sm"><div class="pain-fill" style="width:0%" data-target="50" data-bg="linear-gradient(90deg,var(--accent-rose),#d9a0a4)"></div></div></div>
- <div class="glass-card anim-enter d1"><div style="display:flex;justify-content:space-between;margin-bottom:10px"><span class="fw-600">⭐ 评分</span><span class="badge badge-rose">45</span></div><div class="text-dim text-sm">平均3.0分,差评率高</div><div class="pain-track mt-sm"><div class="pain-fill" style="width:0%" data-target="45" data-bg="linear-gradient(90deg,var(--accent-rose),#d9a0a4)"></div></div></div>
- <div class="glass-card anim-enter d2"><div style="display:flex;justify-content:space-between;margin-bottom:10px"><span class="fw-600">📈 流量</span><span class="badge badge-rose">25</span></div><div class="text-dim text-sm">BSR约255665</div><div class="pain-track mt-sm"><div class="pain-fill" style="width:0%" data-target="25" data-bg="linear-gradient(90deg,#be123c,var(--accent-rose))"></div></div></div>
- <div class="glass-card anim-enter d2"><div style="display:flex;justify-content:space-between;margin-bottom:10px"><span class="fw-600">🛒 销售效率</span><span class="badge badge-rose">50</span></div><div class="text-dim text-sm">月销约0 vs 品类均值1944</div><div class="pain-track mt-sm"><div class="pain-fill" style="width:0%" data-target="50" data-bg="linear-gradient(90deg,var(--accent-rose),#d9a0a4)"></div></div></div>
- <div class="glass-card anim-enter d3"><div style="display:flex;justify-content:space-between;margin-bottom:10px"><span class="fw-600">🚀 增长潜力</span><span class="badge badge-gold">55</span></div><div class="text-dim text-sm">有新品布局但尚未起量</div><div class="pain-track mt-sm"><div class="pain-fill" style="width:0%" data-target="55" data-bg="linear-gradient(90deg,var(--gold),var(--gold-light))"></div></div></div>
- <div class="glass-card anim-enter d3"><div style="display:flex;justify-content:space-between;margin-bottom:10px"><span class="fw-600">💬 VOC口碑</span><span class="badge badge-rose">35</span></div><div class="text-dim text-sm">差评率68%,质量和安全</div><div class="pain-track mt-sm"><div class="pain-fill" style="width:0%" data-target="35" data-bg="linear-gradient(90deg,#be123c,var(--accent-rose))"></div></div></div>
- </div>
- <div class="glass-card mt-md anim-enter d4" style="border-left:3px solid var(--accent-rose)">
- <strong class="text-rose">核心短板:</strong><span class="text-dim">traffic(25分)— 建议优先改进产品安全和品控,建立售后快速响应,同步优化Listing</span>
- </div>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">04</span></div>
- </section>
- <!-- SLIDE 5 — 竞品矩阵 -->
- <section class="slide" id="slide-5">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>竞品矩阵</span></div>
- <div class="slide-inner">
- <h2 class="text-gold mb-sm">竞品对比矩阵</h2><div class="divider mb-md"></div>
- <div class="glass-card anim-enter" style="overflow-x:auto">
- <table class="data-table">
- <thead><tr><th>ASIN</th><th>品牌</th><th>售价</th><th>评分</th><th>月销</th><th>定位</th></tr></thead>
- <tbody>
- <tr><td class="text-xs">B00NCRE4GO</td><td class="fw-600">TENS 7000</td><td class="text-gold fw-600">$38.88</td><td>4.6</td><td class="fw-600">26,373</td><td>Health & Household</td></tr>
- <tr><td class="text-xs">B071WRQ9YH</td><td class="fw-600">AUVON</td><td>$8.99</td><td class="text-sage fw-600">4.7</td><td class="fw-600">15,622</td><td>Industrial & Scientific</td></tr>
- <tr><td class="text-xs">B0D12W9QX6</td><td class="fw-600">AUVON</td><td>$25.98</td><td>4.6</td><td>10,670</td><td>Health & Household</td></tr>
- <tr><td class="text-xs">B06ZZ19MS3</td><td class="fw-600">AUVON</td><td>$29.99</td><td>4.6</td><td>8,815</td><td>Health & Household</td></tr>
- <tr><td class="text-xs">B0CN95HS4J</td><td class="fw-600">AVCOO</td><td>$32.99</td><td>4.6</td><td>8,397</td><td>Health & Household</td></tr>
- </tbody>
- </table>
- </div>
- <div class="cols-2 mt-md">
- <div class="glass-card anim-enter d1" style="border-left:3px solid var(--accent-sage)">
- <h3 class="text-sage text-sm fw-600 mb-sm">✅ 差异化进攻</h3>
- <div class="text-sm text-dim" style="line-height:1.8">
- <p>切入 <strong class="text-gold">$20-$35</strong> 中高端(加热+无线+多模式)。</p>
- <p class="mt-sm">针对AUVON低端线质量参差,强调品控和安全认证;针对TENS 7000高价线,强调性价比。</p>
- </div>
- </div>
- <div class="glass-card anim-enter d2" style="border-left:3px solid var(--accent-rose)">
- <h3 class="text-rose text-sm fw-600 mb-sm">⚠️ 防守建议</h3>
- <div class="text-sm text-dim" style="line-height:1.8">
- <p>当前建档ASIN与品牌不一致,建议 <strong class="text-rose">优先核实COMPEX真实ASIN</strong> 后再制定防守策略。</p>
- </div>
- </div>
- </div>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">05</span></div>
- </section>
- <!-- SLIDE 6 — VOC情感 -->
- <section class="slide" id="slide-6">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>VOC情感</span></div>
- <div class="slide-inner">
- <h2 class="text-gold mb-sm">VOC 情感分析</h2><div class="divider mb-md"></div>
- <div class="cols-2">
- <div class="glass-card anim-enter">
- <h3 class="text-sm fw-600 mb-sm">情感分布对比</h3>
- <div class="chart-wrap" style="max-height:240px"><canvas id="chart-sentiment"></canvas></div>
- <div style="margin-top:14px;padding:10px 14px;background:rgba(196,134,139,.08);border-left:3px solid var(--accent-rose);border-radius:0 8px 8px 0;font-size:.82rem;color:var(--cream-dim)">
- 需消除 <strong class="text-rose">11条差评</strong> + 获取 <strong class="text-sage">57条5星好评</strong>,才能从2.06提升到竞品均值4.36。
- </div>
- </div>
- <div class="glass-card anim-enter d1">
- <h3 class="text-sm fw-600 mb-sm">🟢 正面热词(竞品高频)</h3>
- <div class="bar-row"><span class="bar-label">easy to use</span><div class="bar-track"><div class="bar-fill" style="width:0%;background:linear-gradient(90deg,var(--accent-sage),#a8c4a2)" data-target="100"></div></div></div>
- <div class="bar-row"><span class="bar-label">works great</span><div class="bar-track"><div class="bar-fill" style="width:0%;background:linear-gradient(90deg,var(--accent-sage),#a8c4a2)" data-target="98"></div></div></div>
- <div class="bar-row"><span class="bar-label">great product</span><div class="bar-track"><div class="bar-fill" style="width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light))" data-target="41"></div></div></div>
- <div class="bar-row"><span class="bar-label">highly recommend</span><div class="bar-track"><div class="bar-fill" style="width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light))" data-target="39"></div></div></div>
- <div class="bar-row"><span class="bar-label">works well</span><div class="bar-track"><div class="bar-fill" style="width:0%;background:linear-gradient(90deg,var(--accent-blue),#a0bdd4)" data-target="37"></div></div></div>
- <div class="bar-row"><span class="bar-label">pain relief</span><div class="bar-track"><div class="bar-fill" style="width:0%;background:linear-gradient(90deg,var(--accent-blue),#a0bdd4)" data-target="34"></div></div></div>
- </div>
- </div>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">06</span></div>
- </section>
- <!-- SLIDE 7 — 痛点洞察 -->
- <section class="slide" id="slide-7">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>痛点洞察</span></div>
- <div class="slide-inner">
- <h2 class="text-gold mb-sm">差评痛点深度洞察</h2><div class="divider mb-md"></div>
- <div class="glass-card anim-enter">
- <div class="pain-bar"><div class="pain-icon">🔧</div><div class="pain-info"><div class="pain-name">产品质量 <span class="badge badge-rose">36.4%</span></div><div class="pain-track"><div class="pain-fill" style="width:0%" data-target="36.4" data-bg="linear-gradient(90deg,#C4868B,#e07a7f)"></div></div><div class="pain-pct">111次 · 严重度7.5 · "not work, broke"</div></div></div>
- <div class="pain-bar"><div class="pain-icon">🩹</div><div class="pain-info"><div class="pain-name">配件/耗材 <span class="badge badge-rose">29.2%</span></div><div class="pain-track"><div class="pain-fill" style="width:0%" data-target="29.2" data-bg="linear-gradient(90deg,#C4868B,#d9a0a4)"></div></div><div class="pain-pct">89次 · 严重度7.2 · "pad, pads"</div></div></div>
- <div class="pain-bar"><div class="pain-icon">💸</div><div class="pain-info"><div class="pain-name">性价比 <span class="badge badge-gold">23.3%</span></div><div class="pain-track"><div class="pain-fill" style="width:0%" data-target="23.3" data-bg="linear-gradient(90deg,var(--gold),var(--gold-light))"></div></div><div class="pain-pct">71次 · 严重度6.9 · "return, not worth"</div></div></div>
- <div class="pain-bar"><div class="pain-icon">🔋</div><div class="pain-info"><div class="pain-name">电池续航 <span class="badge badge-gold">15.1%</span></div><div class="pain-track"><div class="pain-fill" style="width:0%" data-target="15.1" data-bg="linear-gradient(90deg,var(--gold),#d4b978)"></div></div><div class="pain-pct">46次 · 严重度6.6 · "battery, charge"</div></div></div>
- <div class="pain-bar"><div class="pain-icon">⚡</div><div class="pain-info"><div class="pain-name">功能缺陷 <span class="badge badge-rose">9.8%</span></div><div class="pain-track"><div class="pain-fill" style="width:0%" data-target="9.8" data-bg="linear-gradient(90deg,#be123c,var(--accent-rose))"></div></div><div class="pain-pct">30次 · 严重度6.4 · "shock, burn" · <strong class="text-rose">安全风险</strong></div></div></div>
- </div>
- <div class="cols-2 mt-md">
- <div class="glass-card anim-enter d1" style="border-left:3px solid var(--accent-sage)">
- <h3 class="text-sage text-sm fw-600 mb-sm">📝 Listing 优化</h3>
- <ul style="list-style:none;font-size:.85rem;color:var(--cream-dim);line-height:2">
- <li>• 主图和A+突出安全认证(UL/CE)</li>
- <li>• Bullet明确电池类型和续航</li>
- <li>• 展示电极片更换教程</li>
- </ul>
- </div>
- <div class="glass-card anim-enter d2" style="border-left:3px solid var(--gold)">
- <h3 class="text-gold text-sm fw-600 mb-sm">🔬 产品迭代</h3>
- <ul style="list-style:none;font-size:.85rem;color:var(--cream-dim);line-height:2">
- <li>• 改进过热保护和电路绝缘</li>
- <li>• 推出可充电版本或备用电池</li>
- <li>• 升级电极片粘性和耐用性</li>
- </ul>
- </div>
- </div>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">07</span></div>
- </section>
- <!-- SLIDE 8 — 用户画像 -->
- <section class="slide" id="slide-8">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>用户画像</span></div>
- <div class="slide-inner">
- <h2 class="text-gold mb-sm">用户画像</h2><div class="divider mb-md"></div>
- <div class="cols-3">
- <div class="glass-card anim-enter" style="text-align:center">
- <div style="font-size:3rem;margin-bottom:12px">🧑⚕️</div>
- <h3 style="color:var(--gold-light)">慢性疼痛患者</h3>
- <div class="text-xs text-dim mt-sm">45-65岁 | 有效止痛 · 操作简单</div>
- <div style="text-align:left;margin-top:14px;font-size:.85rem;color:var(--cream-dim)"><strong class="text-rose">痛点:</strong>长期腰背/肩颈疼痛,希望非药物缓解</div>
- <div style="margin-top:12px;font-style:italic;font-size:.82rem;color:var(--navy-light);text-align:left">"I wear my TENS unit every single day, all day long."</div>
- </div>
- <div class="glass-card anim-enter d1" style="text-align:center">
- <div style="font-size:3rem;margin-bottom:12px">🏋️</div>
- <h3 style="color:var(--gold-light)">运动康复人群</h3>
- <div class="text-xs text-dim mt-sm">25-40岁 | 便携 · 力度可调</div>
- <div style="text-align:left;margin-top:14px;font-size:.85rem;color:var(--cream-dim)"><strong class="text-rose">痛点:</strong>运动后肌肉酸痛或运动损伤恢复</div>
- <div style="margin-top:12px;font-style:italic;font-size:.82rem;color:var(--navy-light);text-align:left">"Great for athletes. Easy to use, has worked for the last 2 years."</div>
- </div>
- <div class="glass-card anim-enter d2" style="text-align:center">
- <div style="font-size:3rem;margin-bottom:12px">🎁</div>
- <h3 style="color:var(--gold-light)">送礼购买者</h3>
- <div class="text-xs text-dim mt-sm">30-50岁 | 包装精致 · 口碑好</div>
- <div style="text-align:left;margin-top:14px;font-size:.85rem;color:var(--cream-dim)"><strong class="text-rose">痛点:</strong>为父母/伴侣选购健康礼物</div>
- <div style="margin-top:12px;font-style:italic;font-size:.82rem;color:var(--navy-light);text-align:left">"Got this for my boyfriend as his birthday gift, and he loves it!"</div>
- </div>
- </div>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">08</span></div>
- </section>
- <!-- SLIDE 9 — 行动计划 -->
- <section class="slide" id="slide-9">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>行动计划</span></div>
- <div class="slide-inner">
- <h2 class="text-gold mb-sm">行动计划</h2><div class="divider mb-md"></div>
- <div class="cols-3">
- <div class="glass-card anim-enter" style="border-top:3px solid var(--accent-rose)">
- <h3><span class="badge badge-rose mb-sm" style="display:inline-block">短期 0-30天</span></h3>
- <div class="timeline mt-md">
- <div class="timeline-item"><h4>紧急品控整改</h4><p>排查安全隐患(过热保护/电路绝缘),暂停问题批次</p></div>
- <div class="timeline-item"><h4>Listing优化</h4><p>更新主图和A+,突出安全认证和使用教程</p></div>
- <div class="timeline-item"><h4>售后快速响应</h4><p>对1-2星差评主动联系,免费换货/退款</p></div>
- </div>
- </div>
- <div class="glass-card anim-enter d1" style="border-top:3px solid var(--gold)">
- <h3><span class="badge badge-gold mb-sm" style="display:inline-block">中期 1-3个月</span></h3>
- <div class="timeline mt-md">
- <div class="timeline-item"><h4>ASIN品牌校准</h4><p>确认真实代表ASIN,重新对齐品类关键词</p></div>
- <div class="timeline-item"><h4>差异化功能开发</h4><p>可充电版本+备用电极片套装</p></div>
- <div class="timeline-item"><h4>PPC精准投放</h4><p>主攻'$20-$30 TENS unit'黄金长尾词</p></div>
- </div>
- </div>
- <div class="glass-card anim-enter d2" style="border-top:3px solid var(--accent-sage)">
- <h3><span class="badge badge-sage mb-sm" style="display:inline-block">长期 3-12个月</span></h3>
- <div class="timeline mt-md">
- <div class="timeline-item"><h4>品牌信任建设</h4><p>FDA/CE认证+医生/理疗师推荐内容</p></div>
- <div class="timeline-item"><h4>中高端产品线</h4><p>$30-$50多模式/无线款,对标TENS 7000</p></div>
- <div class="timeline-item"><h4>社媒内容种草</h4><p>TikTok/Instagram投放对比测评和康复vlog</p></div>
- </div>
- </div>
- </div>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">09</span></div>
- </section>
- <!-- SLIDE 10 — 总结 -->
- <section class="slide" id="slide-10">
- <div class="slide-header"><span>COMPEX VOC报告</span><span>总结</span></div>
- <div class="slide-inner">
- <h2 class="text-gold mb-sm">总结与突破口</h2><div class="divider mb-md"></div>
- <div class="cols-2">
- <div class="glass-card anim-enter" style="border-left:3px solid var(--gold)">
- <div style="font-size:2rem;margin-bottom:12px">🏆</div>
- <h3 class="text-gold">最优先行动</h3>
- <p class="fw-700 mt-sm" style="font-size:1.1rem">核实并修正建档ASIN</p>
- <p class="text-dim text-sm mt-sm" style="line-height:1.8">当前分析基于 lewitools/JIANHENG 按摩器,与 COMPEX 品牌严重错位。必须先获取真正的 COMPEX TENS unit 代表ASIN,才能输出准确的品牌画像和竞品对标。</p>
- </div>
- <div class="glass-card anim-enter d1" style="border-left:3px solid var(--accent-sage)">
- <div style="font-size:2rem;margin-bottom:12px">💡</div>
- <h3 class="text-sage">差异化突破口</h3>
- <p class="fw-700 mt-sm" style="font-size:1.1rem">可充电 + 高粘性电极片套装</p>
- <p class="text-dim text-sm mt-sm" style="line-height:1.8">竞品差评中电池续航和电极片耐用性是高发痛点。推出USB-C充电版本并附赠备用电极片,可在 $25-$40 中高端市场建立明确优势。</p>
- </div>
- </div>
- <div class="glass-card mt-md anim-enter d2" style="text-align:center;border:1px solid rgba(197,165,90,.3)">
- <div class="fw-700 text-gold" style="font-size:1.2rem">下一步建议</div>
- <div class="text-dim mt-sm" style="font-size:.95rem;line-height:1.8">提供 COMPEX 品牌的真实 Amazon ASIN,虾将重新跑 Session 1-3 的品牌画像和 VOC 分析,生成更精准的对标报告。</div>
- </div>
- </div>
- <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">10</span></div>
- </section>
- </div><!-- /slides-wrapper -->
- <script>
- /* ===== 翻页系统 ===== */
- const slides = document.querySelectorAll('.slide');
- const dots = document.querySelectorAll('.nav-dot');
- let current = 0, isAnimating = false;
- function goSlide(n) {
- if (n === current || isAnimating || n < 0 || n >= slides.length) return;
- isAnimating = true;
- slides[current].classList.remove('active');
- dots[current].classList.remove('active');
- current = n;
- slides[current].classList.add('active');
- dots[current].classList.add('active');
- triggerSlideAnimations(current);
- setTimeout(() => isAnimating = false, 750);
- }
- dots.forEach(d => d.addEventListener('click', () => goSlide(+d.dataset.slide)));
- document.addEventListener('keydown', e => {
- if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); goSlide(current + 1); }
- if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); goSlide(current - 1); }
- });
- let lastWheel = 0;
- document.addEventListener('wheel', e => {
- const now = Date.now();
- if (now - lastWheel < 1200) return;
- lastWheel = now;
- goSlide(current + (e.deltaY > 0 ? 1 : -1));
- }, { passive: true });
- let touchY = 0;
- document.addEventListener('touchstart', e => { touchY = e.touches[0].clientY; });
- document.addEventListener('touchend', e => {
- const dy = touchY - e.changedTouches[0].clientY;
- if (Math.abs(dy) > 50) goSlide(current + (dy > 0 ? 1 : -1));
- });
- /* ===== 全屏 ===== */
- document.getElementById('fs-btn').addEventListener('click', () => {
- if (!document.fullscreenElement) document.documentElement.requestFullscreen();
- else document.exitFullscreen();
- });
- /* ===== 数字计数动画 ===== */
- function animateCounters(el) {
- el.querySelectorAll('.metric-value[data-count]').forEach(mv => {
- const target = parseFloat(mv.dataset.count);
- const prefix = mv.dataset.prefix || '';
- const suffix = mv.dataset.suffix || '';
- const dec = parseInt(mv.dataset.decimal) || 0;
- const dur = 1500; const start = performance.now();
- function format(n) {
- if (dec > 0) return n.toFixed(dec);
- if (n >= 1e6) return (n/1e6).toFixed(2) + 'M';
- if (n >= 1e3) return n.toLocaleString();
- return n.toString();
- }
- function step(ts) {
- const p = Math.min((ts - start) / dur, 1);
- const ease = 1 - Math.pow(1 - p, 3);
- const val = dec > 0 ? target * ease : Math.round(target * ease);
- mv.textContent = prefix + format(val) + suffix;
- if (p < 1) requestAnimationFrame(step);
- }
- requestAnimationFrame(step);
- });
- }
- /* ===== 进度条动画 ===== */
- function animateBars(el) {
- el.querySelectorAll('.bar-fill[data-target]').forEach(b => { setTimeout(() => { b.style.width = b.dataset.target + '%'; }, 200); });
- el.querySelectorAll('.pain-fill[data-target]').forEach(b => {
- setTimeout(() => { b.style.width = (b.dataset.target / 40 * 100) + '%'; if (b.dataset.bg) b.style.background = b.dataset.bg; }, 200);
- });
- }
- /* ===== 页面动画触发 ===== */
- const animated = new Set();
- function triggerSlideAnimations(n) {
- const el = document.getElementById('slide-' + n);
- if (!el || animated.has(n)) return;
- animated.add(n);
- animateCounters(el); animateBars(el);
- if (n === 3) initShareChart();
- if (n === 6) initSentimentChart();
- }
- /* ===== Chart.js ===== */
- const chartGridColor = 'rgba(75,115,153,0.15)';
- Chart.defaults.color = '#C8D6E5';
- Chart.defaults.font.family = "'Segoe UI','PingFang SC',sans-serif";
- let charts = {};
- function initShareChart() {
- if (charts.share) return;
- charts.share = new Chart(document.getElementById('chart-share'), {
- type: 'doughnut',
- data: {
- labels: ['TENS 7000','AUVON','Neocarbon','AVCOO','MASTOGO','其他'],
- datasets: [{ data: [25.7,24.8,10.9,7.8,4.4,26.4],
- backgroundColor: ['rgba(197,165,90,.75)','rgba(143,166,138,.65)','rgba(126,155,181,.6)','rgba(196,134,139,.55)','rgba(212,185,120,.5)','rgba(75,115,153,.3)'],
- borderColor: 'rgba(11,15,26,.6)', borderWidth: 2 }]
- },
- options: { responsive:true, maintainAspectRatio:false, cutout:'55%',
- plugins: { legend: { position:'right', labels: { boxWidth:10, padding:8, font:{size:10} } } },
- animation: { duration:1200 } }
- });
- }
- function initSentimentChart() {
- if (charts.sentiment) return;
- charts.sentiment = new Chart(document.getElementById('chart-sentiment'), {
- type: 'bar',
- data: {
- labels: ['自身(COMPEX ASIN)','竞品均值'],
- datasets: [
- { label:'好评率', data:[25,83.3], backgroundColor:'rgba(143,166,138,.7)', borderRadius:6 },
- { label:'差评率', data:[68.8,12.3], backgroundColor:'rgba(196,134,139,.7)', borderRadius:6 }
- ]
- },
- options: { responsive:true, maintainAspectRatio:false,
- plugins: { legend: { position:'top', labels: { boxWidth:10, padding:10, font:{size:10} } } },
- scales: { y: { max:100, ticks: { callback: v => v+'%' }, grid: { color: chartGridColor } }, x: { grid: { display:false } } },
- animation: { duration:1200, easing:'easeOutQuart' } }
- });
- }
- /* ===== 封面粒子 ===== */
- (function() {
- const c = document.getElementById('particles-canvas');
- if (!c) return;
- const ctx = c.getContext('2d');
- let w, h, pts = [];
- function resize() { w = c.width = window.innerWidth; h = c.height = window.innerHeight; }
- resize(); window.addEventListener('resize', resize);
- for (let i = 0; i < 50; i++) pts.push({ x:Math.random()*w, y:Math.random()*h, r:Math.random()*2+.5, dx:(Math.random()-.5)*.3, dy:(Math.random()-.5)*.2, a:Math.random()*.4+.1, c:Math.random()>.5?'197,165,90':'126,155,181' });
- function draw() {
- ctx.clearRect(0,0,w,h);
- const g = ctx.createRadialGradient(w*.5,h*.4,0,w*.5,h*.4,w*.6);
- g.addColorStop(0,'rgba(45,74,111,.12)');g.addColorStop(.5,'rgba(16,24,40,.06)');g.addColorStop(1,'transparent');
- ctx.fillStyle=g;ctx.fillRect(0,0,w,h);
- pts.forEach(p => {
- ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);ctx.fillStyle=`rgba(${p.c},${p.a})`;ctx.fill();
- p.x+=p.dx;p.y+=p.dy;
- if(p.x<0||p.x>w)p.dx*=-1;if(p.y<0||p.y>h)p.dy*=-1;
- p.a+=(Math.random()-.5)*.01;p.a=Math.max(.05,Math.min(.5,p.a));
- });
- for(let i=0;i<pts.length;i++)for(let j=i+1;j<pts.length;j++){
- const dx=pts[i].x-pts[j].x,dy=pts[i].y-pts[j].y,d=Math.sqrt(dx*dx+dy*dy);
- if(d<150){ctx.beginPath();ctx.moveTo(pts[i].x,pts[i].y);ctx.lineTo(pts[j].x,pts[j].y);ctx.strokeStyle=`rgba(197,165,90,${.06*(1-d/150)})`;ctx.lineWidth=.5;ctx.stroke();}
- }
- requestAnimationFrame(draw);
- }
- draw();
- })();
- triggerSlideAnimations(0);
- </script>
- </body>
- </html>
|