tens.html 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6. <title>COMPEX VOC分析报告</title>
  7. <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  8. <style>
  9. :root{
  10. --bg-deep:#0B0F1A;--bg-dark:#101828;--bg-mid:#1A2540;
  11. --navy:#2D4A6F;--navy-light:#4B7399;
  12. --gold:#C5A55A;--gold-light:#D4B978;
  13. --cream:#F0F4FF;--cream-dim:#C8D6E5;
  14. --accent-rose:#C4868B;--accent-sage:#8FA68A;--accent-blue:#7E9BB5;
  15. --glass:rgba(240,244,255,0.06);--glass-border:rgba(197,165,90,0.18);--glass-hover:rgba(240,244,255,0.12);
  16. --shadow:0 8px 32px rgba(0,0,0,0.35);--radius:16px;
  17. --transition:all .4s cubic-bezier(.4,0,.2,1);
  18. --font:'Segoe UI','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  19. }
  20. *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  21. html{font-size:16px;scroll-behavior:smooth;overflow:hidden}
  22. body{font-family:var(--font);background:var(--bg-deep);color:var(--cream);line-height:1.7;overflow:hidden;-webkit-font-smoothing:antialiased}
  23. h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
  24. h2{font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:700}
  25. h3{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600}
  26. a{color:var(--gold);text-decoration:none}
  27. #slides-wrapper{position:relative;width:100vw;height:100vh;overflow:hidden}
  28. .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}
  29. .slide.active{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .7s ease,transform .7s ease,visibility 0s 0s;z-index:1}
  30. .slide-inner{width:100%;max-width:1200px;position:relative}
  31. .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}
  32. .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}
  33. .page-num{font-weight:600;color:var(--gold)}
  34. .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}
  35. .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}
  36. .glass-card:hover{background:var(--glass-hover);border-color:rgba(197,165,90,.35);transform:translateY(-2px);box-shadow:var(--shadow)}
  37. .metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(12px,2vw,24px);width:100%}
  38. .metric-card{text-align:center;padding:clamp(16px,2vw,28px)}
  39. .metric-value{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:var(--gold);margin-bottom:4px}
  40. .metric-label{font-size:.85rem;color:var(--cream-dim)}.metric-sub{font-size:.75rem;color:var(--navy-light);margin-top:2px}
  41. .data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:clamp(.75rem,1.4vw,.9rem)}
  42. .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}
  43. .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}
  44. .data-table tbody td{padding:10px 14px;border-bottom:1px solid rgba(75,115,153,.15);transition:background .3s}
  45. .data-table tbody tr:hover td{background:rgba(197,165,90,.06)}
  46. .badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600}
  47. .badge-gold{background:rgba(197,165,90,.2);color:var(--gold-light);border:1px solid rgba(197,165,90,.3)}
  48. .badge-rose{background:rgba(196,134,139,.15);color:var(--accent-rose);border:1px solid rgba(196,134,139,.25)}
  49. .badge-sage{background:rgba(143,166,138,.15);color:var(--accent-sage);border:1px solid rgba(143,166,138,.25)}
  50. .badge-blue{background:rgba(126,155,181,.15);color:var(--accent-blue);border:1px solid rgba(126,155,181,.25)}
  51. .pain-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  52. .pain-icon{font-size:1.1rem;min-width:24px;text-align:center}
  53. .pain-info{flex:1}.pain-name{font-size:.85rem;font-weight:600;color:var(--cream);margin-bottom:3px}
  54. .pain-pct{font-size:.75rem;color:var(--navy-light)}
  55. .pain-track{width:100%;height:8px;background:rgba(240,244,255,.06);border-radius:4px;overflow:hidden}
  56. .pain-fill{height:100%;border-radius:4px;transition:width 1.5s ease}
  57. .bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  58. .bar-label{min-width:130px;font-size:.82rem;text-align:right;color:var(--cream-dim)}
  59. .bar-track{flex:1;height:20px;background:rgba(240,244,255,.06);border-radius:10px;overflow:hidden}
  60. .bar-fill{height:100%;border-radius:10px;transition:width 1.5s cubic-bezier(.4,0,.2,1)}
  61. .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
  62. .cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(14px,2vw,24px)}
  63. .divider{width:60px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px;margin:16px 0}
  64. .mt-sm{margin-top:12px}.mt-md{margin-top:24px}.mb-sm{margin-bottom:12px}.mb-md{margin-bottom:24px}
  65. .text-gold{color:var(--gold)}.text-rose{color:var(--accent-rose)}.text-sage{color:var(--accent-sage)}.text-blue{color:var(--accent-blue)}
  66. .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}
  67. .chart-wrap{position:relative;width:100%;max-height:280px;margin:12px 0}.chart-wrap canvas{max-height:280px}
  68. #side-nav{position:fixed;right:clamp(10px,2vw,24px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:1000}
  69. .nav-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--navy-light);background:transparent;cursor:pointer;transition:var(--transition);position:relative}
  70. .nav-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(197,165,90,.5)}
  71. .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}
  72. .nav-dot:hover::after{opacity:1}
  73. #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)}
  74. #fs-btn:hover{background:var(--glass-hover);border-color:var(--gold)}
  75. #particles-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
  76. .cover-content{position:relative;z-index:1;text-align:center}
  77. .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}
  78. .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}
  79. .cover-sub{font-size:clamp(.9rem,1.6vw,1.15rem);color:var(--cream-dim);max-width:640px;margin:0 auto 32px}
  80. .cover-date{font-size:.85rem;color:var(--navy-light);letter-spacing:.1em}
  81. .cover-line{width:80px;height:1px;background:var(--gold);margin:24px auto}
  82. .toc-list{list-style:none;counter-reset:toc}
  83. .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}
  84. .toc-item:hover{background:var(--glass-hover);padding-left:28px}
  85. .toc-item::before{content:counter(toc,decimal-leading-zero);font-size:1.6rem;font-weight:800;color:var(--gold);min-width:40px}
  86. .toc-item .toc-title{font-size:1.05rem;font-weight:600;color:var(--cream)}
  87. .toc-item .toc-desc{font-size:.78rem;color:var(--navy-light);margin-top:2px}
  88. .timeline{position:relative;padding-left:28px}
  89. .timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gold),var(--navy-light),transparent)}
  90. .timeline-item{position:relative;margin-bottom:24px;padding-left:20px}
  91. .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)}
  92. .timeline-item h4{color:var(--gold-light);font-size:.95rem;margin-bottom:4px}
  93. .timeline-item p{font-size:.82rem;color:var(--cream-dim)}
  94. .anim-enter{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  95. .slide.active .anim-enter{opacity:1;transform:translateY(0)}
  96. .slide.active .anim-enter.d1{transition-delay:.15s}.slide.active .anim-enter.d2{transition-delay:.3s}
  97. .slide.active .anim-enter.d3{transition-delay:.45s}.slide.active .anim-enter.d4{transition-delay:.6s}
  98. @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}}
  99. @media(max-width:600px){.metric-grid{grid-template-columns:1fr}.slide{padding:16px}}
  100. </style>
  101. </head>
  102. <body>
  103. <button id="fs-btn" title="全屏切换">⛶ 全屏</button>
  104. <nav id="side-nav">
  105. <div class="nav-dot active" data-tip="封面" data-slide="0"></div>
  106. <div class="nav-dot" data-tip="目录" data-slide="1"></div>
  107. <div class="nav-dot" data-tip="执行摘要" data-slide="2"></div>
  108. <div class="nav-dot" data-tip="品类全景" data-slide="3"></div>
  109. <div class="nav-dot" data-tip="品牌画像" data-slide="4"></div>
  110. <div class="nav-dot" data-tip="竞品矩阵" data-slide="5"></div>
  111. <div class="nav-dot" data-tip="VOC情感" data-slide="6"></div>
  112. <div class="nav-dot" data-tip="痛点洞察" data-slide="7"></div>
  113. <div class="nav-dot" data-tip="用户画像" data-slide="8"></div>
  114. <div class="nav-dot" data-tip="行动计划" data-slide="9"></div>
  115. <div class="nav-dot" data-tip="总结" data-slide="10"></div>
  116. </nav>
  117. <div id="slides-wrapper">
  118. <!-- SLIDE 0 — 封面 -->
  119. <section class="slide active" id="slide-0">
  120. <canvas id="particles-canvas"></canvas>
  121. <div class="cover-content">
  122. <p class="cover-brand">TENS / Electrotherapy Intelligence</p>
  123. <h1 class="cover-title">COMPEX<br>Amazon VOC 竞品分析报告</h1>
  124. <div class="cover-line"></div>
  125. <p class="cover-sub">品类:TENS Unit / Electrotherapy Device<br>基于 Amazon 美国站 102 个样本产品 + 2,406 条用户评论深度分析</p>
  126. <p class="cover-date">2026年04月 · AI Data Intelligence</p>
  127. </div>
  128. <div class="slide-footer"><span></span><span class="text-xs" style="opacity:.4">按 → 或滚轮翻页</span></div>
  129. </section>
  130. <!-- SLIDE 1 — 目录 -->
  131. <section class="slide" id="slide-1">
  132. <div class="slide-header"><span>COMPEX VOC报告</span><span>目录</span></div>
  133. <div class="slide-inner" style="max-width:720px">
  134. <h2 class="text-gold mb-md" style="text-align:center">报告目录</h2>
  135. <div class="divider" style="margin:0 auto 28px"></div>
  136. <ul class="toc-list">
  137. <li class="toc-item" onclick="goSlide(2)"><div><div class="toc-title">核心执行摘要</div><div class="toc-desc">关键数据 · 核心发现 · 机会窗口</div></div></li>
  138. <li class="toc-item" onclick="goSlide(3)"><div><div class="toc-title">品类全景分析</div><div class="toc-desc">市场规模 · 价格带 · 品牌集中度</div></div></li>
  139. <li class="toc-item" onclick="goSlide(4)"><div><div class="toc-title">品牌六维画像</div><div class="toc-desc">综合得分 · 六维评估 · 核心短板</div></div></li>
  140. <li class="toc-item" onclick="goSlide(5)"><div><div class="toc-title">竞品对比矩阵</div><div class="toc-desc">Top5竞品 · 进攻策略 · 防守建议</div></div></li>
  141. <li class="toc-item" onclick="goSlide(6)"><div><div class="toc-title">VOC情感分析</div><div class="toc-desc">情感对比 · 正面热词 · 差评痛点</div></div></li>
  142. <li class="toc-item" onclick="goSlide(7)"><div><div class="toc-title">差评痛点深度洞察</div><div class="toc-desc">5大痛点 · 严重度排名 · 优化建议</div></div></li>
  143. <li class="toc-item" onclick="goSlide(8)"><div><div class="toc-title">用户画像</div><div class="toc-desc">3大目标人群 · 需求 · 真实评论</div></div></li>
  144. <li class="toc-item" onclick="goSlide(9)"><div><div class="toc-title">行动计划</div><div class="toc-desc">短期 · 中期 · 长期分阶段策略</div></div></li>
  145. <li class="toc-item" onclick="goSlide(10)"><div><div class="toc-title">总结与突破口</div><div class="toc-desc">最优先行动 · 差异化突破口</div></div></li>
  146. </ul>
  147. </div>
  148. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">01</span></div>
  149. </section>
  150. <!-- SLIDE 2 — 执行摘要 -->
  151. <section class="slide" id="slide-2">
  152. <div class="slide-header"><span>COMPEX VOC报告</span><span>执行摘要</span></div>
  153. <div class="slide-inner">
  154. <h2 class="text-gold mb-sm">核心执行摘要</h2><div class="divider"></div>
  155. <div class="metric-grid mt-md mb-md">
  156. <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>
  157. <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>
  158. <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>
  159. <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>
  160. </div>
  161. <div class="cols-2">
  162. <div class="glass-card anim-enter d2">
  163. <h3 class="text-gold mb-sm">⚠️ 核心发现</h3>
  164. <ul style="list-style:none;font-size:.85rem;color:var(--cream-dim)">
  165. <li style="margin-bottom:10px">• <strong class="text-rose">品牌错位:</strong>建档ASIN实为 lewitools/JIANHENG 按摩器</li>
  166. <li style="margin-bottom:10px">• <strong class="text-gold">双巨头垄断:</strong>TENS 7000 (25.7%) + AUVON (24.8%)</li>
  167. <li style="margin-bottom:10px">• <strong class="text-rose">VOC口碑危机:</strong>好评率仅25%,差评率68.8%</li>
  168. <li>• <strong class="text-sage">机会窗口:</strong>竞品普遍存在电池续航短、电极片不耐用</li>
  169. </ul>
  170. </div>
  171. <div class="glass-card anim-enter d3">
  172. <h3 class="text-gold mb-sm">💡 差异化机会</h3>
  173. <ul style="list-style:none;font-size:.85rem;color:var(--cream-dim)">
  174. <li style="margin-bottom:10px">• 可充电 + 高粘性电极片组合,直击竞品软肋</li>
  175. <li style="margin-bottom:10px">• $20-$35 中高端差异化定位</li>
  176. <li style="margin-bottom:10px">• FDA/CE认证背书,建立专业医疗形象</li>
  177. <li>• 针对AUVON低端品质参差,强调品控和安全</li>
  178. </ul>
  179. </div>
  180. </div>
  181. </div>
  182. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">02</span></div>
  183. </section>
  184. <!-- SLIDE 3 — 品类全景 -->
  185. <section class="slide" id="slide-3">
  186. <div class="slide-header"><span>COMPEX VOC报告</span><span>品类全景</span></div>
  187. <div class="slide-inner">
  188. <h2 class="text-gold mb-sm">品类全景分析</h2><div class="divider mb-md"></div>
  189. <div class="cols-2">
  190. <div class="glass-card anim-enter">
  191. <h3 class="text-sm fw-600 mb-sm">市场规模与价格带</h3>
  192. <table class="data-table">
  193. <thead><tr><th>指标</th><th>数值</th><th>解读</th></tr></thead>
  194. <tbody>
  195. <tr><td>月总销量</td><td class="fw-700">198,372</td><td>体量可观</td></tr>
  196. <tr><td>平均售价</td><td class="fw-700">$27.79</td><td>中低端为主</td></tr>
  197. <tr><td>中位售价</td><td class="fw-700 text-gold">$21.99</td><td>黄金价格带</td></tr>
  198. <tr><td>平均评分</td><td class="fw-700">4.51</td><td>用户期望高</td></tr>
  199. <tr><td>品类阶段</td><td class="fw-700">成熟期</td><td>存量竞争</td></tr>
  200. </tbody>
  201. </table>
  202. </div>
  203. <div class="glass-card anim-enter d1">
  204. <h3 class="text-sm fw-600 mb-sm">品牌市场份额</h3>
  205. <div class="chart-wrap"><canvas id="chart-share"></canvas></div>
  206. </div>
  207. </div>
  208. <div class="glass-card mt-md anim-enter d2" style="overflow-x:auto">
  209. <table class="data-table">
  210. <thead><tr><th>品牌</th><th>份额</th><th>均价</th><th>评分</th><th>定位</th></tr></thead>
  211. <tbody>
  212. <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>
  213. <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>
  214. <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>
  215. <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>
  216. <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>
  217. </tbody>
  218. </table>
  219. <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)">
  220. <strong class="text-rose">⚠️ 风险:</strong>CR5=73.6%,HHI=1520,中等集中市场,头部垄断明显。
  221. </div>
  222. </div>
  223. </div>
  224. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">03</span></div>
  225. </section>
  226. <!-- SLIDE 4 — 品牌画像 -->
  227. <section class="slide" id="slide-4">
  228. <div class="slide-header"><span>COMPEX VOC报告</span><span>品牌画像</span></div>
  229. <div class="slide-inner">
  230. <h2 class="text-gold mb-sm">品牌六维画像</h2><div class="divider mb-md"></div>
  231. <div class="glass-card mb-md anim-enter" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
  232. <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>
  233. <span class="badge badge-rose">待改进</span>
  234. <div style="width:100%;color:var(--navy-light);font-size:.9rem">定位象限:中价低质 | BSR约86136 | 定价$9.99</div>
  235. </div>
  236. <div class="cols-3">
  237. <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>
  238. <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>
  239. <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>
  240. <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>
  241. <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>
  242. <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>
  243. </div>
  244. <div class="glass-card mt-md anim-enter d4" style="border-left:3px solid var(--accent-rose)">
  245. <strong class="text-rose">核心短板:</strong><span class="text-dim">traffic(25分)— 建议优先改进产品安全和品控,建立售后快速响应,同步优化Listing</span>
  246. </div>
  247. </div>
  248. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">04</span></div>
  249. </section>
  250. <!-- SLIDE 5 — 竞品矩阵 -->
  251. <section class="slide" id="slide-5">
  252. <div class="slide-header"><span>COMPEX VOC报告</span><span>竞品矩阵</span></div>
  253. <div class="slide-inner">
  254. <h2 class="text-gold mb-sm">竞品对比矩阵</h2><div class="divider mb-md"></div>
  255. <div class="glass-card anim-enter" style="overflow-x:auto">
  256. <table class="data-table">
  257. <thead><tr><th>ASIN</th><th>品牌</th><th>售价</th><th>评分</th><th>月销</th><th>定位</th></tr></thead>
  258. <tbody>
  259. <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>
  260. <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>
  261. <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>
  262. <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>
  263. <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>
  264. </tbody>
  265. </table>
  266. </div>
  267. <div class="cols-2 mt-md">
  268. <div class="glass-card anim-enter d1" style="border-left:3px solid var(--accent-sage)">
  269. <h3 class="text-sage text-sm fw-600 mb-sm">✅ 差异化进攻</h3>
  270. <div class="text-sm text-dim" style="line-height:1.8">
  271. <p>切入 <strong class="text-gold">$20-$35</strong> 中高端(加热+无线+多模式)。</p>
  272. <p class="mt-sm">针对AUVON低端线质量参差,强调品控和安全认证;针对TENS 7000高价线,强调性价比。</p>
  273. </div>
  274. </div>
  275. <div class="glass-card anim-enter d2" style="border-left:3px solid var(--accent-rose)">
  276. <h3 class="text-rose text-sm fw-600 mb-sm">⚠️ 防守建议</h3>
  277. <div class="text-sm text-dim" style="line-height:1.8">
  278. <p>当前建档ASIN与品牌不一致,建议 <strong class="text-rose">优先核实COMPEX真实ASIN</strong> 后再制定防守策略。</p>
  279. </div>
  280. </div>
  281. </div>
  282. </div>
  283. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">05</span></div>
  284. </section>
  285. <!-- SLIDE 6 — VOC情感 -->
  286. <section class="slide" id="slide-6">
  287. <div class="slide-header"><span>COMPEX VOC报告</span><span>VOC情感</span></div>
  288. <div class="slide-inner">
  289. <h2 class="text-gold mb-sm">VOC 情感分析</h2><div class="divider mb-md"></div>
  290. <div class="cols-2">
  291. <div class="glass-card anim-enter">
  292. <h3 class="text-sm fw-600 mb-sm">情感分布对比</h3>
  293. <div class="chart-wrap" style="max-height:240px"><canvas id="chart-sentiment"></canvas></div>
  294. <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)">
  295. 需消除 <strong class="text-rose">11条差评</strong> + 获取 <strong class="text-sage">57条5星好评</strong>,才能从2.06提升到竞品均值4.36。
  296. </div>
  297. </div>
  298. <div class="glass-card anim-enter d1">
  299. <h3 class="text-sm fw-600 mb-sm">🟢 正面热词(竞品高频)</h3>
  300. <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>
  301. <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>
  302. <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>
  303. <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>
  304. <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>
  305. <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>
  306. </div>
  307. </div>
  308. </div>
  309. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">06</span></div>
  310. </section>
  311. <!-- SLIDE 7 — 痛点洞察 -->
  312. <section class="slide" id="slide-7">
  313. <div class="slide-header"><span>COMPEX VOC报告</span><span>痛点洞察</span></div>
  314. <div class="slide-inner">
  315. <h2 class="text-gold mb-sm">差评痛点深度洞察</h2><div class="divider mb-md"></div>
  316. <div class="glass-card anim-enter">
  317. <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>
  318. <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>
  319. <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>
  320. <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>
  321. <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>
  322. </div>
  323. <div class="cols-2 mt-md">
  324. <div class="glass-card anim-enter d1" style="border-left:3px solid var(--accent-sage)">
  325. <h3 class="text-sage text-sm fw-600 mb-sm">📝 Listing 优化</h3>
  326. <ul style="list-style:none;font-size:.85rem;color:var(--cream-dim);line-height:2">
  327. <li>• 主图和A+突出安全认证(UL/CE)</li>
  328. <li>• Bullet明确电池类型和续航</li>
  329. <li>• 展示电极片更换教程</li>
  330. </ul>
  331. </div>
  332. <div class="glass-card anim-enter d2" style="border-left:3px solid var(--gold)">
  333. <h3 class="text-gold text-sm fw-600 mb-sm">🔬 产品迭代</h3>
  334. <ul style="list-style:none;font-size:.85rem;color:var(--cream-dim);line-height:2">
  335. <li>• 改进过热保护和电路绝缘</li>
  336. <li>• 推出可充电版本或备用电池</li>
  337. <li>• 升级电极片粘性和耐用性</li>
  338. </ul>
  339. </div>
  340. </div>
  341. </div>
  342. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">07</span></div>
  343. </section>
  344. <!-- SLIDE 8 — 用户画像 -->
  345. <section class="slide" id="slide-8">
  346. <div class="slide-header"><span>COMPEX VOC报告</span><span>用户画像</span></div>
  347. <div class="slide-inner">
  348. <h2 class="text-gold mb-sm">用户画像</h2><div class="divider mb-md"></div>
  349. <div class="cols-3">
  350. <div class="glass-card anim-enter" style="text-align:center">
  351. <div style="font-size:3rem;margin-bottom:12px">🧑‍⚕️</div>
  352. <h3 style="color:var(--gold-light)">慢性疼痛患者</h3>
  353. <div class="text-xs text-dim mt-sm">45-65岁 | 有效止痛 · 操作简单</div>
  354. <div style="text-align:left;margin-top:14px;font-size:.85rem;color:var(--cream-dim)"><strong class="text-rose">痛点:</strong>长期腰背/肩颈疼痛,希望非药物缓解</div>
  355. <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>
  356. </div>
  357. <div class="glass-card anim-enter d1" style="text-align:center">
  358. <div style="font-size:3rem;margin-bottom:12px">🏋️</div>
  359. <h3 style="color:var(--gold-light)">运动康复人群</h3>
  360. <div class="text-xs text-dim mt-sm">25-40岁 | 便携 · 力度可调</div>
  361. <div style="text-align:left;margin-top:14px;font-size:.85rem;color:var(--cream-dim)"><strong class="text-rose">痛点:</strong>运动后肌肉酸痛或运动损伤恢复</div>
  362. <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>
  363. </div>
  364. <div class="glass-card anim-enter d2" style="text-align:center">
  365. <div style="font-size:3rem;margin-bottom:12px">🎁</div>
  366. <h3 style="color:var(--gold-light)">送礼购买者</h3>
  367. <div class="text-xs text-dim mt-sm">30-50岁 | 包装精致 · 口碑好</div>
  368. <div style="text-align:left;margin-top:14px;font-size:.85rem;color:var(--cream-dim)"><strong class="text-rose">痛点:</strong>为父母/伴侣选购健康礼物</div>
  369. <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>
  370. </div>
  371. </div>
  372. </div>
  373. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">08</span></div>
  374. </section>
  375. <!-- SLIDE 9 — 行动计划 -->
  376. <section class="slide" id="slide-9">
  377. <div class="slide-header"><span>COMPEX VOC报告</span><span>行动计划</span></div>
  378. <div class="slide-inner">
  379. <h2 class="text-gold mb-sm">行动计划</h2><div class="divider mb-md"></div>
  380. <div class="cols-3">
  381. <div class="glass-card anim-enter" style="border-top:3px solid var(--accent-rose)">
  382. <h3><span class="badge badge-rose mb-sm" style="display:inline-block">短期 0-30天</span></h3>
  383. <div class="timeline mt-md">
  384. <div class="timeline-item"><h4>紧急品控整改</h4><p>排查安全隐患(过热保护/电路绝缘),暂停问题批次</p></div>
  385. <div class="timeline-item"><h4>Listing优化</h4><p>更新主图和A+,突出安全认证和使用教程</p></div>
  386. <div class="timeline-item"><h4>售后快速响应</h4><p>对1-2星差评主动联系,免费换货/退款</p></div>
  387. </div>
  388. </div>
  389. <div class="glass-card anim-enter d1" style="border-top:3px solid var(--gold)">
  390. <h3><span class="badge badge-gold mb-sm" style="display:inline-block">中期 1-3个月</span></h3>
  391. <div class="timeline mt-md">
  392. <div class="timeline-item"><h4>ASIN品牌校准</h4><p>确认真实代表ASIN,重新对齐品类关键词</p></div>
  393. <div class="timeline-item"><h4>差异化功能开发</h4><p>可充电版本+备用电极片套装</p></div>
  394. <div class="timeline-item"><h4>PPC精准投放</h4><p>主攻'$20-$30 TENS unit'黄金长尾词</p></div>
  395. </div>
  396. </div>
  397. <div class="glass-card anim-enter d2" style="border-top:3px solid var(--accent-sage)">
  398. <h3><span class="badge badge-sage mb-sm" style="display:inline-block">长期 3-12个月</span></h3>
  399. <div class="timeline mt-md">
  400. <div class="timeline-item"><h4>品牌信任建设</h4><p>FDA/CE认证+医生/理疗师推荐内容</p></div>
  401. <div class="timeline-item"><h4>中高端产品线</h4><p>$30-$50多模式/无线款,对标TENS 7000</p></div>
  402. <div class="timeline-item"><h4>社媒内容种草</h4><p>TikTok/Instagram投放对比测评和康复vlog</p></div>
  403. </div>
  404. </div>
  405. </div>
  406. </div>
  407. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">09</span></div>
  408. </section>
  409. <!-- SLIDE 10 — 总结 -->
  410. <section class="slide" id="slide-10">
  411. <div class="slide-header"><span>COMPEX VOC报告</span><span>总结</span></div>
  412. <div class="slide-inner">
  413. <h2 class="text-gold mb-sm">总结与突破口</h2><div class="divider mb-md"></div>
  414. <div class="cols-2">
  415. <div class="glass-card anim-enter" style="border-left:3px solid var(--gold)">
  416. <div style="font-size:2rem;margin-bottom:12px">🏆</div>
  417. <h3 class="text-gold">最优先行动</h3>
  418. <p class="fw-700 mt-sm" style="font-size:1.1rem">核实并修正建档ASIN</p>
  419. <p class="text-dim text-sm mt-sm" style="line-height:1.8">当前分析基于 lewitools/JIANHENG 按摩器,与 COMPEX 品牌严重错位。必须先获取真正的 COMPEX TENS unit 代表ASIN,才能输出准确的品牌画像和竞品对标。</p>
  420. </div>
  421. <div class="glass-card anim-enter d1" style="border-left:3px solid var(--accent-sage)">
  422. <div style="font-size:2rem;margin-bottom:12px">💡</div>
  423. <h3 class="text-sage">差异化突破口</h3>
  424. <p class="fw-700 mt-sm" style="font-size:1.1rem">可充电 + 高粘性电极片套装</p>
  425. <p class="text-dim text-sm mt-sm" style="line-height:1.8">竞品差评中电池续航和电极片耐用性是高发痛点。推出USB-C充电版本并附赠备用电极片,可在 $25-$40 中高端市场建立明确优势。</p>
  426. </div>
  427. </div>
  428. <div class="glass-card mt-md anim-enter d2" style="text-align:center;border:1px solid rgba(197,165,90,.3)">
  429. <div class="fw-700 text-gold" style="font-size:1.2rem">下一步建议</div>
  430. <div class="text-dim mt-sm" style="font-size:.95rem;line-height:1.8">提供 COMPEX 品牌的真实 Amazon ASIN,虾将重新跑 Session 1-3 的品牌画像和 VOC 分析,生成更精准的对标报告。</div>
  431. </div>
  432. </div>
  433. <div class="slide-footer"><span>COMPEX VOC报告</span><span class="page-num">10</span></div>
  434. </section>
  435. </div><!-- /slides-wrapper -->
  436. <script>
  437. /* ===== 翻页系统 ===== */
  438. const slides = document.querySelectorAll('.slide');
  439. const dots = document.querySelectorAll('.nav-dot');
  440. let current = 0, isAnimating = false;
  441. function goSlide(n) {
  442. if (n === current || isAnimating || n < 0 || n >= slides.length) return;
  443. isAnimating = true;
  444. slides[current].classList.remove('active');
  445. dots[current].classList.remove('active');
  446. current = n;
  447. slides[current].classList.add('active');
  448. dots[current].classList.add('active');
  449. triggerSlideAnimations(current);
  450. setTimeout(() => isAnimating = false, 750);
  451. }
  452. dots.forEach(d => d.addEventListener('click', () => goSlide(+d.dataset.slide)));
  453. document.addEventListener('keydown', e => {
  454. if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); goSlide(current + 1); }
  455. if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); goSlide(current - 1); }
  456. });
  457. let lastWheel = 0;
  458. document.addEventListener('wheel', e => {
  459. const now = Date.now();
  460. if (now - lastWheel < 1200) return;
  461. lastWheel = now;
  462. goSlide(current + (e.deltaY > 0 ? 1 : -1));
  463. }, { passive: true });
  464. let touchY = 0;
  465. document.addEventListener('touchstart', e => { touchY = e.touches[0].clientY; });
  466. document.addEventListener('touchend', e => {
  467. const dy = touchY - e.changedTouches[0].clientY;
  468. if (Math.abs(dy) > 50) goSlide(current + (dy > 0 ? 1 : -1));
  469. });
  470. /* ===== 全屏 ===== */
  471. document.getElementById('fs-btn').addEventListener('click', () => {
  472. if (!document.fullscreenElement) document.documentElement.requestFullscreen();
  473. else document.exitFullscreen();
  474. });
  475. /* ===== 数字计数动画 ===== */
  476. function animateCounters(el) {
  477. el.querySelectorAll('.metric-value[data-count]').forEach(mv => {
  478. const target = parseFloat(mv.dataset.count);
  479. const prefix = mv.dataset.prefix || '';
  480. const suffix = mv.dataset.suffix || '';
  481. const dec = parseInt(mv.dataset.decimal) || 0;
  482. const dur = 1500; const start = performance.now();
  483. function format(n) {
  484. if (dec > 0) return n.toFixed(dec);
  485. if (n >= 1e6) return (n/1e6).toFixed(2) + 'M';
  486. if (n >= 1e3) return n.toLocaleString();
  487. return n.toString();
  488. }
  489. function step(ts) {
  490. const p = Math.min((ts - start) / dur, 1);
  491. const ease = 1 - Math.pow(1 - p, 3);
  492. const val = dec > 0 ? target * ease : Math.round(target * ease);
  493. mv.textContent = prefix + format(val) + suffix;
  494. if (p < 1) requestAnimationFrame(step);
  495. }
  496. requestAnimationFrame(step);
  497. });
  498. }
  499. /* ===== 进度条动画 ===== */
  500. function animateBars(el) {
  501. el.querySelectorAll('.bar-fill[data-target]').forEach(b => { setTimeout(() => { b.style.width = b.dataset.target + '%'; }, 200); });
  502. el.querySelectorAll('.pain-fill[data-target]').forEach(b => {
  503. setTimeout(() => { b.style.width = (b.dataset.target / 40 * 100) + '%'; if (b.dataset.bg) b.style.background = b.dataset.bg; }, 200);
  504. });
  505. }
  506. /* ===== 页面动画触发 ===== */
  507. const animated = new Set();
  508. function triggerSlideAnimations(n) {
  509. const el = document.getElementById('slide-' + n);
  510. if (!el || animated.has(n)) return;
  511. animated.add(n);
  512. animateCounters(el); animateBars(el);
  513. if (n === 3) initShareChart();
  514. if (n === 6) initSentimentChart();
  515. }
  516. /* ===== Chart.js ===== */
  517. const chartGridColor = 'rgba(75,115,153,0.15)';
  518. Chart.defaults.color = '#C8D6E5';
  519. Chart.defaults.font.family = "'Segoe UI','PingFang SC',sans-serif";
  520. let charts = {};
  521. function initShareChart() {
  522. if (charts.share) return;
  523. charts.share = new Chart(document.getElementById('chart-share'), {
  524. type: 'doughnut',
  525. data: {
  526. labels: ['TENS 7000','AUVON','Neocarbon','AVCOO','MASTOGO','其他'],
  527. datasets: [{ data: [25.7,24.8,10.9,7.8,4.4,26.4],
  528. 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)'],
  529. borderColor: 'rgba(11,15,26,.6)', borderWidth: 2 }]
  530. },
  531. options: { responsive:true, maintainAspectRatio:false, cutout:'55%',
  532. plugins: { legend: { position:'right', labels: { boxWidth:10, padding:8, font:{size:10} } } },
  533. animation: { duration:1200 } }
  534. });
  535. }
  536. function initSentimentChart() {
  537. if (charts.sentiment) return;
  538. charts.sentiment = new Chart(document.getElementById('chart-sentiment'), {
  539. type: 'bar',
  540. data: {
  541. labels: ['自身(COMPEX ASIN)','竞品均值'],
  542. datasets: [
  543. { label:'好评率', data:[25,83.3], backgroundColor:'rgba(143,166,138,.7)', borderRadius:6 },
  544. { label:'差评率', data:[68.8,12.3], backgroundColor:'rgba(196,134,139,.7)', borderRadius:6 }
  545. ]
  546. },
  547. options: { responsive:true, maintainAspectRatio:false,
  548. plugins: { legend: { position:'top', labels: { boxWidth:10, padding:10, font:{size:10} } } },
  549. scales: { y: { max:100, ticks: { callback: v => v+'%' }, grid: { color: chartGridColor } }, x: { grid: { display:false } } },
  550. animation: { duration:1200, easing:'easeOutQuart' } }
  551. });
  552. }
  553. /* ===== 封面粒子 ===== */
  554. (function() {
  555. const c = document.getElementById('particles-canvas');
  556. if (!c) return;
  557. const ctx = c.getContext('2d');
  558. let w, h, pts = [];
  559. function resize() { w = c.width = window.innerWidth; h = c.height = window.innerHeight; }
  560. resize(); window.addEventListener('resize', resize);
  561. 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' });
  562. function draw() {
  563. ctx.clearRect(0,0,w,h);
  564. const g = ctx.createRadialGradient(w*.5,h*.4,0,w*.5,h*.4,w*.6);
  565. g.addColorStop(0,'rgba(45,74,111,.12)');g.addColorStop(.5,'rgba(16,24,40,.06)');g.addColorStop(1,'transparent');
  566. ctx.fillStyle=g;ctx.fillRect(0,0,w,h);
  567. pts.forEach(p => {
  568. ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);ctx.fillStyle=`rgba(${p.c},${p.a})`;ctx.fill();
  569. p.x+=p.dx;p.y+=p.dy;
  570. if(p.x<0||p.x>w)p.dx*=-1;if(p.y<0||p.y>h)p.dy*=-1;
  571. p.a+=(Math.random()-.5)*.01;p.a=Math.max(.05,Math.min(.5,p.a));
  572. });
  573. for(let i=0;i<pts.length;i++)for(let j=i+1;j<pts.length;j++){
  574. const dx=pts[i].x-pts[j].x,dy=pts[i].y-pts[j].y,d=Math.sqrt(dx*dx+dy*dy);
  575. 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();}
  576. }
  577. requestAnimationFrame(draw);
  578. }
  579. draw();
  580. })();
  581. triggerSlideAnimations(0);
  582. </script>
  583. </body>
  584. </html>