|
|
@@ -0,0 +1,3939 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+<title>江中猴菇饮 OTC · VOC 深度洞察 v2 · 用户决策路径追踪</title>
|
|
|
+<style>
|
|
|
+:root {
|
|
|
+ --bg-0: #0A0A0A;
|
|
|
+ --bg-1: #111111;
|
|
|
+ --bg-2: #1A1A1A;
|
|
|
+ --bg-3: #252525;
|
|
|
+ --border: rgba(255,255,255,0.08);
|
|
|
+ --border-strong: rgba(255,255,255,0.16);
|
|
|
+ --text-1: #F5F5F5;
|
|
|
+ --text-2: #A8A8A8;
|
|
|
+ --text-3: #6B6B6B;
|
|
|
+ --amber: #F5A623;
|
|
|
+ --amber-glow: rgba(245,166,35,0.15);
|
|
|
+ --green: #00DC82;
|
|
|
+ --purple: #8B5CF6;
|
|
|
+ --rose: #FF4D8D;
|
|
|
+ --blue: #3B82F6;
|
|
|
+ --red: #EF4444;
|
|
|
+ --font-head: 'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑','Source Han Sans CN',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
|
|
|
+ --font-body: 'Noto Sans SC','Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑','Source Han Sans CN',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
|
|
|
+ --font-mono: 'JetBrains Mono','SF Mono','Fira Code','Cascadia Code',Consolas,'Courier New',monospace;
|
|
|
+ --max-w: 1280px;
|
|
|
+ --radius-sm: 8px;
|
|
|
+ --radius-md: 12px;
|
|
|
+ --radius-lg: 20px;
|
|
|
+}
|
|
|
+* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
+html {
|
|
|
+ scroll-behavior: smooth;
|
|
|
+ font-size: 16px;
|
|
|
+ /* 轻 snap:不打断流式浏览,但在接近 slide 时会贴合 */
|
|
|
+ scroll-snap-type: y proximity;
|
|
|
+}
|
|
|
+@media (prefers-reduced-motion: reduce) {
|
|
|
+ html { scroll-snap-type: none; scroll-behavior: auto; }
|
|
|
+}
|
|
|
+body {
|
|
|
+ font-family: var(--font-body);
|
|
|
+ background: var(--bg-0);
|
|
|
+ color: var(--text-1);
|
|
|
+ line-height: 1.65;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ overflow-x: hidden;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/* 全局 ambient 光晕 —— 伴随 slide 切换缓慢漂移 */
|
|
|
+body::before {
|
|
|
+ content: '';
|
|
|
+ position: fixed; inset: 0; pointer-events: none; z-index: 0;
|
|
|
+ background:
|
|
|
+ radial-gradient(ellipse 900px 700px at var(--amb-x, 20%) var(--amb-y, 25%), rgba(245,166,35,0.10), transparent 60%),
|
|
|
+ radial-gradient(ellipse 800px 600px at calc(100% - var(--amb-x, 20%)) calc(100% - var(--amb-y, 25%)), rgba(139,92,246,0.07), transparent 60%);
|
|
|
+ transition: background 1.4s cubic-bezier(.2,.7,.2,1);
|
|
|
+}
|
|
|
+body::after {
|
|
|
+ content: '';
|
|
|
+ position: fixed; inset: 0; pointer-events: none; z-index: 0;
|
|
|
+ background-image:
|
|
|
+ linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
|
|
|
+ linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
|
|
|
+ background-size: 80px 80px;
|
|
|
+ mask-image: radial-gradient(ellipse 90% 95% at 50% 50%, black 0%, transparent 85%);
|
|
|
+ -webkit-mask-image: radial-gradient(ellipse 90% 95% at 50% 50%, black 0%, transparent 85%);
|
|
|
+}
|
|
|
+main.deck { position: relative; z-index: 1; }
|
|
|
+::selection { background: var(--amber); color: #000; }
|
|
|
+a { color: inherit; text-decoration: none; }
|
|
|
+img { max-width: 100%; display: block; }
|
|
|
+
|
|
|
+.text-hero { font-family: var(--font-head); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; font-size: clamp(4rem, 12vw, 10rem); }
|
|
|
+.text-poster { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(2.5rem, 6vw, 5rem); }
|
|
|
+.text-h1 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(2rem, 4vw, 3.5rem); }
|
|
|
+.text-h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; font-size: clamp(1.4rem, 2.5vw, 2rem); }
|
|
|
+.text-h3 { font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.01em; }
|
|
|
+.text-body { font-size: clamp(0.92rem, 1.1vw, 1rem); line-height: 1.75; color: var(--text-2); }
|
|
|
+.text-sm { font-size: 0.85rem; color: var(--text-2); }
|
|
|
+.text-xs { font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.02em; }
|
|
|
+.text-mono { font-family: var(--font-mono); }
|
|
|
+.text-amber { color: var(--amber); }
|
|
|
+.text-green { color: var(--green); }
|
|
|
+.text-purple { color: var(--purple); }
|
|
|
+.text-rose { color: var(--rose); }
|
|
|
+.text-blue { color: var(--blue); }
|
|
|
+.text-red { color: var(--red); }
|
|
|
+
|
|
|
+section.report-section {
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: clamp(60px, 10vh, 120px) clamp(24px, 6vw, 80px);
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ scroll-snap-align: start;
|
|
|
+ scroll-snap-stop: always;
|
|
|
+ overflow: hidden;
|
|
|
+ isolation: isolate;
|
|
|
+}
|
|
|
+/* 每一张 slide 的角标:大号数字 */
|
|
|
+section.report-section::before {
|
|
|
+ content: attr(data-slide-num);
|
|
|
+ position: absolute;
|
|
|
+ top: clamp(20px, 3vh, 36px); right: clamp(24px, 4vw, 60px);
|
|
|
+ font-family: var(--font-mono); font-weight: 600;
|
|
|
+ font-size: clamp(0.68rem, 0.75vw, 0.78rem);
|
|
|
+ letter-spacing: 0.25em; color: var(--text-3);
|
|
|
+ z-index: 4; pointer-events: none;
|
|
|
+}
|
|
|
+/* slide 专属渐变层(通过 CSS 变量驱动色调) */
|
|
|
+section.report-section::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute; inset: 0; pointer-events: none; z-index: -1;
|
|
|
+ background:
|
|
|
+ radial-gradient(ellipse 70% 60% at 85% 15%, var(--slide-glow-1, rgba(245,166,35,0.06)), transparent 55%),
|
|
|
+ radial-gradient(ellipse 60% 50% at 15% 85%, var(--slide-glow-2, rgba(139,92,246,0.04)), transparent 55%);
|
|
|
+ opacity: 0; transition: opacity 1s cubic-bezier(.2,.7,.2,1);
|
|
|
+}
|
|
|
+section.report-section.in-view::after { opacity: 1; }
|
|
|
+section.report-section[data-tone="amber"] { --slide-glow-1: rgba(245,166,35,0.10); --slide-glow-2: rgba(245,166,35,0.04); }
|
|
|
+section.report-section[data-tone="rose"] { --slide-glow-1: rgba(255,77,141,0.09); --slide-glow-2: rgba(255,77,141,0.04); }
|
|
|
+section.report-section[data-tone="green"] { --slide-glow-1: rgba(0,220,130,0.08); --slide-glow-2: rgba(0,220,130,0.03); }
|
|
|
+section.report-section[data-tone="purple"]{ --slide-glow-1: rgba(139,92,246,0.10); --slide-glow-2: rgba(139,92,246,0.04); }
|
|
|
+section.report-section[data-tone="blue"] { --slide-glow-1: rgba(59,130,246,0.08); --slide-glow-2: rgba(59,130,246,0.03); }
|
|
|
+section.report-section[data-tone="orange"]{ --slide-glow-1: rgba(255,140,66,0.10); --slide-glow-2: rgba(255,140,66,0.04); }
|
|
|
+.section-inner { width: 100%; max-width: var(--max-w); margin: 0 auto; position: relative; }
|
|
|
+.section-head { margin-bottom: clamp(32px, 5vh, 64px); }
|
|
|
+.section-eyebrow {
|
|
|
+ display: inline-flex; align-items: center; gap: 10px;
|
|
|
+ font-family: var(--font-mono); font-size: 0.72rem;
|
|
|
+ letter-spacing: 0.18em; text-transform: uppercase;
|
|
|
+ color: var(--amber); font-weight: 500; margin-bottom: 18px;
|
|
|
+}
|
|
|
+.section-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--amber); }
|
|
|
+.section-sub { color: var(--text-2); font-size: 1.05rem; max-width: 720px; margin-top: 14px; line-height: 1.8; }
|
|
|
+
|
|
|
+.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
|
|
|
+.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
|
|
|
+.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
|
|
|
+.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
|
|
|
+
|
|
|
+.card {
|
|
|
+ background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.008) 100%), var(--bg-1);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius-md);
|
|
|
+ padding: clamp(20px, 2.2vw, 32px);
|
|
|
+ position: relative;
|
|
|
+ backdrop-filter: blur(8px);
|
|
|
+ -webkit-backdrop-filter: blur(8px);
|
|
|
+ transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.3s ease, box-shadow 0.4s ease;
|
|
|
+}
|
|
|
+.card:hover {
|
|
|
+ border-color: var(--border-strong);
|
|
|
+ transform: translateY(-3px);
|
|
|
+ box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(245,166,35,0.08);
|
|
|
+}
|
|
|
+.card.card-glow { box-shadow: 0 0 40px rgba(245,166,35,0.06); }
|
|
|
+.card-accent {
|
|
|
+ border-left: 3px solid var(--amber);
|
|
|
+ border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
|
|
+}
|
|
|
+
|
|
|
+.metric {
|
|
|
+ background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
|
|
|
+ padding: clamp(24px, 2.5vw, 36px); position: relative; overflow: hidden;
|
|
|
+}
|
|
|
+.metric::before {
|
|
|
+ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
|
|
+ background: linear-gradient(90deg, var(--amber), transparent); opacity: 0.6;
|
|
|
+}
|
|
|
+.metric .metric-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
|
|
|
+.metric .metric-value { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1; color: var(--text-1); margin-bottom: 8px; }
|
|
|
+.metric .metric-unit { font-family: var(--font-mono); font-size: 0.85rem; color: var(--amber); font-weight: 500; }
|
|
|
+.metric .metric-sub { margin-top: 14px; font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }
|
|
|
+
|
|
|
+.tag {
|
|
|
+ display: inline-flex; align-items: center; gap: 6px;
|
|
|
+ padding: 4px 10px; border-radius: 4px; font-size: 0.72rem; font-weight: 500;
|
|
|
+ letter-spacing: 0.02em; font-family: var(--font-head);
|
|
|
+ background: rgba(245,166,35,0.1); color: var(--amber); border: 1px solid rgba(245,166,35,0.22);
|
|
|
+}
|
|
|
+.tag.green { background: rgba(0,220,130,0.08); color: var(--green); border-color: rgba(0,220,130,0.2); }
|
|
|
+.tag.purple { background: rgba(139,92,246,0.08); color: var(--purple); border-color: rgba(139,92,246,0.2); }
|
|
|
+.tag.rose { background: rgba(255,77,141,0.08); color: var(--rose); border-color: rgba(255,77,141,0.2); }
|
|
|
+.tag.gray { background: rgba(255,255,255,0.04); color: var(--text-2); border-color: var(--border); }
|
|
|
+
|
|
|
+.cover-hero {
|
|
|
+ position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
|
|
|
+ padding: clamp(40px, 8vh, 100px) clamp(24px, 6vw, 80px);
|
|
|
+ background:
|
|
|
+ radial-gradient(ellipse 60% 80% at 30% 30%, rgba(245,166,35,0.08) 0%, transparent 70%),
|
|
|
+ radial-gradient(ellipse 40% 60% at 80% 70%, rgba(139,92,246,0.05) 0%, transparent 70%),
|
|
|
+ var(--bg-0);
|
|
|
+}
|
|
|
+.cover-grid-bg {
|
|
|
+ position: absolute; inset: 0;
|
|
|
+ background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
|
|
|
+ linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
|
|
|
+ background-size: 64px 64px; pointer-events: none;
|
|
|
+ mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, black 0%, transparent 80%);
|
|
|
+ -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, black 0%, transparent 80%);
|
|
|
+}
|
|
|
+.cover-content { position: relative; z-index: 2; max-width: var(--max-w); }
|
|
|
+.cover-meta {
|
|
|
+ display: flex; align-items: center; gap: 16px;
|
|
|
+ font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3);
|
|
|
+ letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 32px;
|
|
|
+}
|
|
|
+.cover-meta::before { content: ''; width: 32px; height: 2px; background: var(--amber); }
|
|
|
+.cover-title-stack { display: flex; flex-direction: column; gap: 4px; }
|
|
|
+.cover-title {
|
|
|
+ font-family: var(--font-head); font-weight: 900; letter-spacing: -0.04em;
|
|
|
+ line-height: 0.92; font-size: clamp(3.5rem, 11vw, 9rem);
|
|
|
+ color: #fff; /* 兜底纯色:若渐变裁剪失效,至少显示白色粗体 */
|
|
|
+ background: linear-gradient(135deg, #fff 30%, rgba(245,166,35,0.9) 100%);
|
|
|
+ -webkit-background-clip: text; background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent; /* 代替 color: transparent,不支持时自动退回 color */
|
|
|
+}
|
|
|
+.cover-sub { font-size: clamp(1rem, 1.6vw, 1.4rem); color: var(--text-2); max-width: 780px; margin-top: 32px; line-height: 1.7; }
|
|
|
+.cover-stats {
|
|
|
+ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 28px);
|
|
|
+ margin-top: clamp(48px, 8vh, 96px); padding-top: clamp(24px, 4vh, 48px);
|
|
|
+ border-top: 1px solid var(--border); max-width: 900px;
|
|
|
+}
|
|
|
+.cover-stat .num { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -0.02em; color: var(--amber); }
|
|
|
+.cover-stat .lbl { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
|
|
|
+@media (max-width: 720px) { .cover-stats { grid-template-columns: repeat(2, 1fr); } }
|
|
|
+
|
|
|
+.nav-rail {
|
|
|
+ position: fixed; left: clamp(16px, 2vw, 32px); top: 50%; transform: translateY(-50%);
|
|
|
+ z-index: 100; display: flex; flex-direction: column; gap: 12px;
|
|
|
+}
|
|
|
+.nav-dot {
|
|
|
+ width: 32px; height: 3px; border-radius: 2px;
|
|
|
+ background: rgba(255,255,255,0.14); cursor: pointer;
|
|
|
+ transition: all 0.5s cubic-bezier(.2,.7,.2,1); position: relative;
|
|
|
+ display: flex; align-items: center;
|
|
|
+}
|
|
|
+.nav-dot.active { background: var(--amber); width: 48px; box-shadow: 0 0 12px rgba(245,166,35,0.4); }
|
|
|
+.nav-dot:hover { background: rgba(255,255,255,0.3); }
|
|
|
+.nav-dot::after {
|
|
|
+ content: attr(data-tip); position: absolute; left: calc(100% + 16px); top: 50%;
|
|
|
+ transform: translateY(-50%) translateX(-6px);
|
|
|
+ background: rgba(20,20,20,0.92); backdrop-filter: blur(8px);
|
|
|
+ border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px;
|
|
|
+ font-size: 0.72rem; color: var(--text-1);
|
|
|
+ white-space: nowrap; opacity: 0; pointer-events: none;
|
|
|
+ transition: opacity 0.25s ease, transform 0.25s ease;
|
|
|
+ font-family: var(--font-mono); letter-spacing: 0.04em;
|
|
|
+}
|
|
|
+.nav-dot:hover::after, .nav-dot.active::after { opacity: 1; transform: translateY(-50%) translateX(0); }
|
|
|
+
|
|
|
+.top-bar {
|
|
|
+ position: fixed; top: 0; left: 0; right: 0;
|
|
|
+ display: flex; justify-content: space-between; align-items: center;
|
|
|
+ padding: 18px clamp(24px, 4vw, 48px); z-index: 99; pointer-events: none;
|
|
|
+ background: linear-gradient(180deg, rgba(10,10,10,0.85) 0%, transparent 100%);
|
|
|
+}
|
|
|
+.brand-logo { font-family: var(--font-head); font-weight: 900; font-size: 0.88rem; letter-spacing: 0.2em; }
|
|
|
+.brand-logo .dot { color: var(--amber); }
|
|
|
+
|
|
|
+.progress-line {
|
|
|
+ position: fixed; top: 0; left: 0; height: 2px;
|
|
|
+ background: linear-gradient(90deg, var(--amber), var(--rose));
|
|
|
+ z-index: 1000; width: 0%; transition: width 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-container {
|
|
|
+ width: 100%; min-height: 340px;
|
|
|
+ background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.voice-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
|
|
|
+.voice-card {
|
|
|
+ background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
|
|
|
+ padding: 24px; position: relative; transition: all 0.3s ease;
|
|
|
+}
|
|
|
+.voice-card::before {
|
|
|
+ content: '"'; position: absolute; top: 8px; left: 12px;
|
|
|
+ font-family: Georgia, serif; font-size: 60px; color: var(--amber);
|
|
|
+ opacity: 0.3; line-height: 1; pointer-events: none;
|
|
|
+}
|
|
|
+.voice-card .voice-content { font-size: 0.96rem; line-height: 1.7; color: var(--text-1); margin: 20px 0 16px 24px; font-weight: 400; }
|
|
|
+.voice-card .voice-meta {
|
|
|
+ display: flex; justify-content: space-between; align-items: center;
|
|
|
+ padding-top: 12px; border-top: 1px solid var(--border);
|
|
|
+ font-size: 0.75rem; color: var(--text-3);
|
|
|
+}
|
|
|
+.voice-card .voice-likes { color: var(--amber); font-weight: 600; font-family: var(--font-mono); }
|
|
|
+.voice-card.hot { border-color: rgba(245,166,35,0.3); }
|
|
|
+.voice-card.hot::before { opacity: 0.5; }
|
|
|
+.voice-card:hover { border-color: var(--amber); transform: translateY(-3px); }
|
|
|
+
|
|
|
+.note-card {
|
|
|
+ background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
|
|
|
+ padding: 20px; display: flex; flex-direction: column; gap: 12px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+.note-card:hover { border-color: var(--amber); transform: translateY(-3px); }
|
|
|
+.note-rank { font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem; color: var(--amber); letter-spacing: 0.15em; }
|
|
|
+.note-title {
|
|
|
+ font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--text-1);
|
|
|
+ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
|
|
+}
|
|
|
+.note-stats {
|
|
|
+ display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border);
|
|
|
+ font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2);
|
|
|
+}
|
|
|
+.note-stats .st { display: flex; flex-direction: column; gap: 2px; }
|
|
|
+.note-stats .st .n { color: var(--text-1); font-weight: 600; font-size: 1rem; }
|
|
|
+.note-stats .st .l { font-size: 0.65rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
|
|
|
+
|
|
|
+.theme-poster {
|
|
|
+ background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
|
|
|
+ padding: 28px; position: relative; overflow: hidden;
|
|
|
+}
|
|
|
+.theme-poster.pain { border-top: 3px solid var(--rose); }
|
|
|
+.theme-poster.bright { border-top: 3px solid var(--green); }
|
|
|
+.theme-poster.scene { border-top: 3px solid var(--blue); }
|
|
|
+.theme-poster h4 { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; margin-bottom: 8px; }
|
|
|
+.theme-poster .count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3); margin-bottom: 16px; }
|
|
|
+.theme-poster .count .num { font-size: 1.4rem; font-weight: 700; color: var(--text-1); margin-right: 4px; }
|
|
|
+.theme-poster .examples { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
|
|
|
+.theme-poster .examples li {
|
|
|
+ padding: 10px 14px; background: var(--bg-2); border-left: 2px solid var(--border-strong);
|
|
|
+ border-radius: 4px; font-size: 0.85rem; line-height: 1.55; color: var(--text-2);
|
|
|
+}
|
|
|
+.theme-poster.pain .examples li { border-left-color: var(--rose); }
|
|
|
+.theme-poster.bright .examples li { border-left-color: var(--green); }
|
|
|
+.theme-poster.scene .examples li { border-left-color: var(--blue); }
|
|
|
+
|
|
|
+.insight-banner {
|
|
|
+ min-height: 260px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
|
|
|
+ padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column;
|
|
|
+ justify-content: space-between; gap: 32px; position: relative; overflow: hidden;
|
|
|
+}
|
|
|
+.insight-banner::before {
|
|
|
+ content: attr(data-num); position: absolute; top: 16px; right: 24px;
|
|
|
+ font-family: var(--font-head); font-weight: 900; font-size: clamp(4rem, 9vw, 7rem);
|
|
|
+ line-height: 1; color: var(--bg-3); letter-spacing: -0.05em; pointer-events: none;
|
|
|
+}
|
|
|
+.insight-banner h3 {
|
|
|
+ font-family: var(--font-head); font-weight: 800;
|
|
|
+ font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: -0.02em;
|
|
|
+ line-height: 1.25; color: var(--text-1); max-width: 85%;
|
|
|
+}
|
|
|
+.insight-banner h3 strong { color: var(--amber); font-weight: 900; }
|
|
|
+.insight-banner .insight-body { color: var(--text-2); font-size: 1rem; line-height: 1.75; max-width: 85%; }
|
|
|
+.insight-banner .insight-data {
|
|
|
+ display: flex; gap: 24px; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--border);
|
|
|
+}
|
|
|
+.insight-banner .insight-data .dp { display: flex; flex-direction: column; gap: 2px; }
|
|
|
+.insight-banner .insight-data .dp .num { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--amber); }
|
|
|
+.insight-banner .insight-data .dp .lbl { font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
|
|
|
+
|
|
|
+.kol-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
|
|
|
+.kol-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-3); flex-shrink: 0; object-fit: cover; border: 1px solid var(--border); }
|
|
|
+.kol-info { flex: 1; overflow: hidden; }
|
|
|
+.kol-name { font-weight: 700; font-size: 0.98rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
+.kol-desc { font-size: 0.82rem; color: var(--text-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
|
+.kol-stats { display: flex; gap: 14px; margin-top: 10px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
|
|
|
+.kol-stats .amber { color: var(--amber); font-weight: 600; }
|
|
|
+
|
|
|
+.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
|
|
|
+.data-tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
|
|
|
+.data-tbl thead th {
|
|
|
+ text-align: left; padding: 14px 16px; background: var(--bg-1); border-bottom: 1px solid var(--border);
|
|
|
+ font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
|
|
|
+ letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
|
|
|
+}
|
|
|
+.data-tbl tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-1); vertical-align: middle; }
|
|
|
+.data-tbl tbody tr:last-child td { border-bottom: none; }
|
|
|
+.data-tbl tbody tr:hover { background: rgba(255,255,255,0.02); }
|
|
|
+.data-tbl .tb-num { font-family: var(--font-mono); font-weight: 600; color: var(--amber); }
|
|
|
+
|
|
|
+.matrix-2x2 {
|
|
|
+ display: grid; grid-template-columns: 60px 1fr 1fr; grid-template-rows: 1fr 1fr 60px;
|
|
|
+ gap: 12px; min-height: 520px; font-family: var(--font-head);
|
|
|
+}
|
|
|
+.matrix-2x2 .axis-y {
|
|
|
+ grid-column: 1; grid-row: 1 / 3;
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
+ writing-mode: vertical-rl; transform: rotate(180deg);
|
|
|
+ font-family: var(--font-mono); font-size: 0.72rem;
|
|
|
+ letter-spacing: 0.15em; color: var(--text-3); text-transform: uppercase;
|
|
|
+}
|
|
|
+.matrix-2x2 .axis-x {
|
|
|
+ grid-column: 2 / 4; grid-row: 3;
|
|
|
+ display: flex; justify-content: center; align-items: center;
|
|
|
+ font-family: var(--font-mono); font-size: 0.72rem;
|
|
|
+ letter-spacing: 0.15em; color: var(--text-3); text-transform: uppercase;
|
|
|
+}
|
|
|
+.matrix-cell {
|
|
|
+ background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
|
|
|
+ padding: 20px; position: relative; display: flex; flex-direction: column;
|
|
|
+}
|
|
|
+.matrix-cell .cell-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 10px; text-transform: uppercase; }
|
|
|
+.matrix-cell h5 { font-weight: 700; font-size: 1rem; margin-bottom: 6px; color: var(--text-1); }
|
|
|
+.matrix-cell p { font-size: 0.85rem; color: var(--text-2); line-height: 1.55; }
|
|
|
+.matrix-cell.q1 { border-top: 2px solid var(--amber); }
|
|
|
+.matrix-cell.q2 { border-top: 2px solid var(--green); }
|
|
|
+.matrix-cell.q3 { border-top: 2px solid var(--rose); }
|
|
|
+.matrix-cell.q4 { border-top: 2px solid var(--purple); }
|
|
|
+
|
|
|
+.tl { position: relative; padding-left: 32px; }
|
|
|
+.tl::before {
|
|
|
+ content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px;
|
|
|
+ width: 1px; background: linear-gradient(180deg, var(--amber), var(--purple), transparent);
|
|
|
+}
|
|
|
+.tl-item { position: relative; margin-bottom: 28px; padding-left: 20px; }
|
|
|
+.tl-item::before {
|
|
|
+ content: ''; position: absolute; left: -30px; top: 6px;
|
|
|
+ width: 10px; height: 10px; border-radius: 50%; background: var(--amber);
|
|
|
+ border: 2px solid var(--bg-0); box-shadow: 0 0 0 2px var(--amber);
|
|
|
+}
|
|
|
+.tl-item .tl-time { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--amber); text-transform: uppercase; margin-bottom: 4px; }
|
|
|
+.tl-item h5 { font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
|
|
|
+.tl-item p { font-size: 0.88rem; color: var(--text-2); line-height: 1.6; }
|
|
|
+
|
|
|
+/* === 渐显:默认可见,只有 js 已就绪时才先隐藏 === */
|
|
|
+.fade-up { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(.16,.84,.33,1), transform 0.9s cubic-bezier(.16,.84,.33,1); }
|
|
|
+html.js .fade-up { opacity: 0; transform: translateY(32px); will-change: opacity, transform; }
|
|
|
+html.js .fade-up.is-visible { opacity: 1; transform: translateY(0); }
|
|
|
+
|
|
|
+/* 深度入场:从下方滑入 + 微缩放(用于 section-head) */
|
|
|
+.rise-in { opacity: 1; transform: none; transition: opacity 1.1s cubic-bezier(.16,.84,.33,1), transform 1.1s cubic-bezier(.16,.84,.33,1); }
|
|
|
+html.js .rise-in { opacity: 0; transform: translateY(48px) scale(0.97); will-change: opacity, transform; }
|
|
|
+html.js .rise-in.is-visible { opacity: 1; transform: translateY(0) scale(1); }
|
|
|
+
|
|
|
+/* 逐字标题:每个 .char 独立控制 */
|
|
|
+.headline-anim { display: inline-block; }
|
|
|
+.headline-anim .char { display: inline-block; opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(.16,.84,.33,1), transform 0.7s cubic-bezier(.16,.84,.33,1); }
|
|
|
+html.js .headline-anim .char { opacity: 0; transform: translateY(0.6em) rotate(6deg); will-change: opacity, transform; }
|
|
|
+html.js .headline-anim.is-visible .char { opacity: 1; transform: translateY(0) rotate(0); }
|
|
|
+
|
|
|
+/* 键盘提示 pill —— 右下角,首次滚动 5s 后自动淡出 */
|
|
|
+.kbd-hint {
|
|
|
+ position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vh, 28px);
|
|
|
+ z-index: 100; display: flex; align-items: center; gap: 10px;
|
|
|
+ padding: 10px 16px; border-radius: 999px;
|
|
|
+ background: rgba(20,20,20,0.85); backdrop-filter: blur(16px);
|
|
|
+ border: 1px solid var(--border-strong);
|
|
|
+ font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2);
|
|
|
+ letter-spacing: 0.04em;
|
|
|
+ transition: opacity 0.6s ease, transform 0.6s ease;
|
|
|
+}
|
|
|
+.kbd-hint.fade { opacity: 0; transform: translateY(12px); pointer-events: none; }
|
|
|
+.kbd-hint kbd {
|
|
|
+ display: inline-flex; align-items: center; justify-content: center;
|
|
|
+ min-width: 22px; height: 22px; padding: 0 6px;
|
|
|
+ background: var(--bg-3); border: 1px solid var(--border-strong);
|
|
|
+ border-radius: 4px; font-size: 0.7rem; font-family: var(--font-mono);
|
|
|
+ color: var(--text-1); box-shadow: 0 1px 0 rgba(0,0,0,0.4);
|
|
|
+}
|
|
|
+
|
|
|
+/* slide counter pill —— 左下角 */
|
|
|
+.slide-counter {
|
|
|
+ position: fixed; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vh, 28px);
|
|
|
+ z-index: 100; display: flex; align-items: center; gap: 8px;
|
|
|
+ padding: 8px 14px; border-radius: 999px;
|
|
|
+ background: rgba(20,20,20,0.85); backdrop-filter: blur(16px);
|
|
|
+ border: 1px solid var(--border-strong);
|
|
|
+ font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em;
|
|
|
+ color: var(--text-2);
|
|
|
+}
|
|
|
+.slide-counter .now { color: var(--amber); font-weight: 700; }
|
|
|
+.slide-counter .bar { width: 60px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
|
|
|
+.slide-counter .bar::after {
|
|
|
+ content: ''; display: block; height: 100%; width: var(--pct, 0%);
|
|
|
+ background: linear-gradient(90deg, var(--amber), var(--rose));
|
|
|
+ transition: width 0.6s cubic-bezier(.2,.7,.2,1);
|
|
|
+}
|
|
|
+
|
|
|
+/* 海报式 hero 点缀:流动的光弧 */
|
|
|
+.cover-hero .aurora {
|
|
|
+ position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
|
|
|
+}
|
|
|
+.cover-hero .aurora span {
|
|
|
+ position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
|
|
|
+}
|
|
|
+.cover-hero .aurora span:nth-child(1) { width: 500px; height: 500px; background: rgba(245,166,35,0.35); top: -10%; left: 10%; animation: aurora-drift-1 18s ease-in-out infinite alternate; }
|
|
|
+.cover-hero .aurora span:nth-child(2) { width: 420px; height: 420px; background: rgba(139,92,246,0.30); bottom: -8%; right: 10%; animation: aurora-drift-2 22s ease-in-out infinite alternate; }
|
|
|
+.cover-hero .aurora span:nth-child(3) { width: 300px; height: 300px; background: rgba(0,220,130,0.22); top: 40%; left: 55%; animation: aurora-drift-3 26s ease-in-out infinite alternate; }
|
|
|
+@keyframes aurora-drift-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,80px) scale(1.2); } }
|
|
|
+@keyframes aurora-drift-2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-80px,-60px) scale(1.15); } }
|
|
|
+@keyframes aurora-drift-3 { from { transform: translate(0,0) scale(1); } to { transform: translate(-100px,40px) scale(1.3); } }
|
|
|
+@media (prefers-reduced-motion: reduce) { .cover-hero .aurora span { animation: none; } }
|
|
|
+
|
|
|
+footer.report-footer {
|
|
|
+ padding: 48px clamp(24px, 6vw, 80px); text-align: center;
|
|
|
+ border-top: 1px solid var(--border); color: var(--text-3); font-size: 0.8rem;
|
|
|
+ background: var(--bg-0);
|
|
|
+}
|
|
|
+footer.report-footer .meta { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; font-size: 0.7rem; }
|
|
|
+
|
|
|
+@media (max-width: 900px) {
|
|
|
+ .matrix-2x2 { grid-template-columns: 40px 1fr; grid-template-rows: auto; }
|
|
|
+ .matrix-2x2 .axis-x, .matrix-2x2 .axis-y { display: none; }
|
|
|
+ .matrix-cell { grid-column: 2; }
|
|
|
+}
|
|
|
+@media (max-width: 600px) {
|
|
|
+ .nav-rail { display: none; }
|
|
|
+ .top-bar { padding: 14px 18px; font-size: 0.72rem; }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+/* ── v2 专属样式补丁(cover / agenda / divider) ── */
|
|
|
+.slide {
|
|
|
+ min-height: 100vh; position: relative; border-bottom: 1px solid var(--border);
|
|
|
+ display: flex; flex-direction: column; justify-content: center;
|
|
|
+ scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; isolation: isolate;
|
|
|
+}
|
|
|
+.slide::before {
|
|
|
+ content: attr(data-slide-num);
|
|
|
+ position: absolute; top: clamp(20px,3vh,36px); right: clamp(24px,4vw,60px);
|
|
|
+ font-family: var(--font-mono); font-weight: 600; font-size: clamp(0.68rem,0.75vw,0.78rem);
|
|
|
+ letter-spacing: 0.25em; color: var(--text-3); z-index: 4; pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* ── Cover ── */
|
|
|
+.cover-slide {
|
|
|
+ padding: clamp(80px,12vh,140px) clamp(24px,6vw,80px);
|
|
|
+ background:
|
|
|
+ radial-gradient(ellipse 60% 80% at 30% 30%, rgba(245,166,35,0.08) 0%, transparent 70%),
|
|
|
+ radial-gradient(ellipse 40% 60% at 80% 70%, rgba(139,92,246,0.05) 0%, transparent 70%),
|
|
|
+ var(--bg-0);
|
|
|
+}
|
|
|
+.cover-inner { max-width: var(--max-w); width: 100%; position: relative; z-index: 2; }
|
|
|
+.cover-eyebrow {
|
|
|
+ font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em;
|
|
|
+ text-transform: uppercase; color: var(--text-3); margin-bottom: 32px;
|
|
|
+ display: flex; align-items: center; gap: 14px;
|
|
|
+}
|
|
|
+.cover-eyebrow::before { content: ''; width: 32px; height: 2px; background: var(--amber); }
|
|
|
+.cover-slide .cover-title {
|
|
|
+ font-family: var(--font-head); font-weight: 900; letter-spacing: -0.04em;
|
|
|
+ line-height: 0.92; font-size: clamp(3.5rem,11vw,9rem); color: #fff;
|
|
|
+ background: linear-gradient(135deg, #fff 30%, rgba(245,166,35,0.9) 100%);
|
|
|
+ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
|
|
|
+}
|
|
|
+.cover-slide .cover-title .accent { -webkit-text-fill-color: currentColor; }
|
|
|
+.cover-subtitle {
|
|
|
+ font-size: clamp(1rem,1.6vw,1.4rem); color: var(--text-2); max-width: 780px;
|
|
|
+ margin-top: 28px; line-height: 1.7;
|
|
|
+}
|
|
|
+.cover-slide .cover-meta {
|
|
|
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
|
|
|
+ margin-top: clamp(40px,6vh,72px); padding-top: clamp(20px,3vh,36px);
|
|
|
+ border-top: 1px solid var(--border); max-width: 900px;
|
|
|
+}
|
|
|
+.meta-item {
|
|
|
+ display: flex; flex-direction: column; gap: 4px;
|
|
|
+ padding: 10px 14px; background: var(--bg-1); border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius-sm);
|
|
|
+}
|
|
|
+.meta-label {
|
|
|
+ font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em;
|
|
|
+ text-transform: uppercase; color: var(--text-3); font-weight: 500;
|
|
|
+}
|
|
|
+.meta-value { font-size: 0.85rem; color: var(--text-1); font-weight: 600; }
|
|
|
+
|
|
|
+/* ── Agenda ── */
|
|
|
+.agenda-slide {
|
|
|
+ padding: clamp(60px,10vh,120px) clamp(24px,6vw,80px);
|
|
|
+ background: var(--bg-0);
|
|
|
+}
|
|
|
+.agenda-eyebrow {
|
|
|
+ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
|
|
|
+ text-transform: uppercase; color: var(--amber); font-weight: 500; margin-bottom: 14px;
|
|
|
+ display: flex; align-items: center; gap: 10px;
|
|
|
+}
|
|
|
+.agenda-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--amber); }
|
|
|
+.agenda-title {
|
|
|
+ font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em;
|
|
|
+ line-height: 1.1; font-size: clamp(2rem,4vw,3rem); color: var(--text-1);
|
|
|
+}
|
|
|
+.agenda-card { transition: all 0.35s cubic-bezier(.2,.7,.2,1); }
|
|
|
+.agenda-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
|
|
|
+
|
|
|
+/* ── Chapter Divider ── */
|
|
|
+.divider-slide {
|
|
|
+ padding: clamp(80px,12vh,140px) clamp(24px,6vw,80px);
|
|
|
+ background: var(--bg-0); text-align: left;
|
|
|
+}
|
|
|
+.divider-slide::after {
|
|
|
+ content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
|
|
|
+ background:
|
|
|
+ radial-gradient(ellipse 70% 60% at 85% 15%, var(--slide-glow-1, rgba(245,166,35,0.06)), transparent 55%),
|
|
|
+ radial-gradient(ellipse 60% 50% at 15% 85%, var(--slide-glow-2, rgba(139,92,246,0.04)), transparent 55%);
|
|
|
+}
|
|
|
+.divider-slide[data-tone="amber"] { --slide-glow-1: rgba(245,166,35,0.10); --slide-glow-2: rgba(245,166,35,0.04); }
|
|
|
+.divider-slide[data-tone="rose"] { --slide-glow-1: rgba(255,77,141,0.09); --slide-glow-2: rgba(255,77,141,0.04); }
|
|
|
+.divider-slide[data-tone="green"] { --slide-glow-1: rgba(0,220,130,0.08); --slide-glow-2: rgba(0,220,130,0.03); }
|
|
|
+.divider-slide[data-tone="purple"] { --slide-glow-1: rgba(139,92,246,0.10); --slide-glow-2: rgba(139,92,246,0.04); }
|
|
|
+.divider-slide[data-tone="blue"] { --slide-glow-1: rgba(59,130,246,0.08); --slide-glow-2: rgba(59,130,246,0.03); }
|
|
|
+.divider-slide[data-tone="orange"] { --slide-glow-1: rgba(255,140,66,0.10); --slide-glow-2: rgba(255,140,66,0.04); }
|
|
|
+.divider-inner { max-width: var(--max-w); width: 100%; position: relative; }
|
|
|
+.divider-eyebrow {
|
|
|
+ font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em;
|
|
|
+ text-transform: uppercase; font-weight: 600; margin-bottom: 16px;
|
|
|
+}
|
|
|
+.divider-title {
|
|
|
+ font-family: var(--font-head); font-weight: 900; letter-spacing: -0.03em;
|
|
|
+ line-height: 1; font-size: clamp(3rem,8vw,6rem); margin-bottom: 8px;
|
|
|
+}
|
|
|
+.divider-en {
|
|
|
+ font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em;
|
|
|
+ text-transform: uppercase; margin-bottom: 28px;
|
|
|
+}
|
|
|
+.divider-hero {
|
|
|
+ font-size: clamp(0.95rem,1.3vw,1.15rem); color: var(--text-2); line-height: 1.8;
|
|
|
+ max-width: 860px; margin-bottom: 32px;
|
|
|
+}
|
|
|
+.divider-subsections { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
|
|
|
+.divider-sub-item {
|
|
|
+ font-size: 0.88rem; color: var(--text-2); line-height: 1.5;
|
|
|
+ padding: 8px 14px; background: var(--bg-1); border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius-sm); display: flex; align-items: center; gap: 10px;
|
|
|
+}
|
|
|
+.sub-num {
|
|
|
+ font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem;
|
|
|
+ letter-spacing: 0.1em; min-width: 28px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<nav class="nav-rail" aria-label="章节导航">
|
|
|
+ <a class="nav-dot active" href="#s0" data-tip="封面" data-idx="0"></a><a class="nav-dot" href="#agenda" data-tip="目录" data-idx="1"></a><a class="nav-dot" href="#funnel" data-tip="1 全景漏斗" data-idx="2"></a><a class="nav-dot" href="#nested" data-tip="2 嵌套洞察" data-idx="3"></a><a class="nav-dot" href="#pain" data-tip="3 痛声地图" data-idx="4"></a><a class="nav-dot" href="#fit" data-tip="4 产品适配" data-idx="5"></a><a class="nav-dot" href="#position" data-tip="5 定位推导" data-idx="6"></a><a class="nav-dot" href="#action" data-tip="6 行动蓝图" data-idx="7"></a>
|
|
|
+ </nav>
|
|
|
+ <div class="top-bar">
|
|
|
+ <div class="brand-logo">江中<span class="dot">·</span>产品开发部 / 猴菇饮 OTC VOC 深度洞察 v2.0</div>
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3);">用户决策路径追踪 / 嵌套逻辑 / 里斯×特劳特定位</div>
|
|
|
+ </div>
|
|
|
+<main class="slides-container">
|
|
|
+<section class="slide cover-slide" id="s0" data-slide-num="01/31">
|
|
|
+ <div class="cover-inner">
|
|
|
+ <div class="cover-eyebrow">JIANGZHONG · VOC DEEP INSIGHT</div>
|
|
|
+ <h1 class="cover-title">猴菇饮 OTC<br><span class="accent" style="color:#2D9C5D;">用户决策路径 × 定位策略</span></h1>
|
|
|
+ <div class="cover-subtitle">基于 <strong>2727</strong> 条原始 VOC → 筛选去噪去重 → <strong>730</strong> 条精准 VOC 的嵌套洞察 · v2.0</div>
|
|
|
+ <div class="cover-meta">
|
|
|
+ <div class="meta-item"><span class="meta-label">方法论</span><span class="meta-value">用户决策路径追踪 × 里斯品类战略 × 特劳特定位</span></div>
|
|
|
+ <div class="meta-item"><span class="meta-label">数据源</span><span class="meta-value">6 平台 / 27 关键词</span></div>
|
|
|
+ <div class="meta-item"><span class="meta-label">数据管线</span><span class="meta-value">2727 条采集 → 去噪去重 → 730 条精准 VOC(过滤率 73%)</span></div>
|
|
|
+ <div class="meta-item"><span class="meta-label">报告结构</span><span class="meta-value">6 章 · 全景→嵌套→痛声→适配→定位→行动</span></div>
|
|
|
+ <div class="meta-item"><span class="meta-label">生成日期</span><span class="meta-value">2026-04-19T12:19:57.201Z</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="slide agenda-slide" id="agenda" data-slide-num="02/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="agenda-eyebrow">REPORT STRUCTURE</div>
|
|
|
+ <h2 class="agenda-title">报告结构 · 用户决策路径追踪</h2>
|
|
|
+ <p style="color:var(--text-2); font-size:0.92rem; margin:12px 0 28px; max-width:680px; line-height:1.7;">
|
|
|
+ v2 改变了叙事逻辑:不再是"我用了什么分析方法",而是<strong>"用户在经历什么 → 每一步选了什么 → 哪里没被满足 → 我们切哪里 → 怎么定位"</strong>。<br>
|
|
|
+ 嵌套结构:病程阶段(第一层)→ 细分症状(第二层)→ 产品选择 × 未满足需求(第三层)。
|
|
|
+ </p>
|
|
|
+ <div class="agenda-grid" style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;">
|
|
|
+
|
|
|
+ <a class="agenda-card" href="#funnel" style="border-left:4px solid #0085CA; padding:16px 18px; background:var(--bg-1); border-radius:var(--radius-sm); text-decoration:none; display:block;">
|
|
|
+ <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
|
|
|
+ <span style="font-size:1.3rem;">🔭</span>
|
|
|
+ <span class="text-mono text-xs" style="color:#0085CA; font-weight:700; letter-spacing:0.12em;">MARKET FUNNEL</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.95rem; font-weight:700; color:var(--text-1); margin-bottom:4px;">Ch1 · 全景漏斗</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); line-height:1.5;">TAM 2.5亿胃病人群 → SAM 可服务市场 → SOM 猴菇饮的战场。6级病程分层,锁定我们的目标区间。…</div>
|
|
|
+ </a>
|
|
|
+ <a class="agenda-card" href="#nested" style="border-left:4px solid #FF8C42; padding:16px 18px; background:var(--bg-1); border-radius:var(--radius-sm); text-decoration:none; display:block;">
|
|
|
+ <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
|
|
|
+ <span style="font-size:1.3rem;">🔬</span>
|
|
|
+ <span class="text-mono text-xs" style="color:#FF8C42; font-weight:700; letter-spacing:0.12em;">NESTED INSIGHT</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.95rem; font-weight:700; color:var(--text-1); margin-bottom:4px;">Ch2 · 嵌套洞察</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); line-height:1.5;">每个病程阶段 × 每个细分症状 × 用户选了什么产品。嵌套逻辑:先看阶段,再看症状,再看选择。…</div>
|
|
|
+ </a>
|
|
|
+ <a class="agenda-card" href="#pain" style="border-left:4px solid #FF6B6B; padding:16px 18px; background:var(--bg-1); border-radius:var(--radius-sm); text-decoration:none; display:block;">
|
|
|
+ <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
|
|
|
+ <span style="font-size:1.3rem;">🔥</span>
|
|
|
+ <span class="text-mono text-xs" style="color:#FF6B6B; font-weight:700; letter-spacing:0.12em;">PAIN MAP</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.95rem; font-weight:700; color:var(--text-1); margin-bottom:4px;">Ch3 · 痛声地图</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); line-height:1.5;">每一层产品的用户都在痛苦。把 VOC 痛声按层铺开,提炼跨层共性未满足需求,画出"声量×满足度"四象…</div>
|
|
|
+ </a>
|
|
|
+ <a class="agenda-card" href="#fit" style="border-left:4px solid #E8A87C; padding:16px 18px; background:var(--bg-1); border-radius:var(--radius-sm); text-decoration:none; display:block;">
|
|
|
+ <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
|
|
|
+ <span style="font-size:1.3rem;">🎯</span>
|
|
|
+ <span class="text-mono text-xs" style="color:#E8A87C; font-weight:700; letter-spacing:0.12em;">PRODUCT FIT</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.95rem; font-weight:700; color:var(--text-1); margin-bottom:4px;">Ch4 · 产品适配</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); line-height:1.5;">猴菇饮的真实能力边界在哪?米稀成功的可迁移因子 × 饼干失败的红线 × 精准插入点 × 场景适配。…</div>
|
|
|
+ </a>
|
|
|
+ <a class="agenda-card" href="#position" style="border-left:4px solid #8B5CF6; padding:16px 18px; background:var(--bg-1); border-radius:var(--radius-sm); text-decoration:none; display:block;">
|
|
|
+ <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
|
|
|
+ <span style="font-size:1.3rem;">💡</span>
|
|
|
+ <span class="text-mono text-xs" style="color:#8B5CF6; font-weight:700; letter-spacing:0.12em;">POSITIONING</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.95rem; font-weight:700; color:var(--text-1); margin-bottom:4px;">Ch5 · 定位推导</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); line-height:1.5;">里斯品类战略 × 特劳特定位。心智阶梯分析 → 差异化锚点 → 聚焦方向 → 一句话定位陈述 → VOC验证。…</div>
|
|
|
+ </a>
|
|
|
+ <a class="agenda-card" href="#action" style="border-left:4px solid #87A96B; padding:16px 18px; background:var(--bg-1); border-radius:var(--radius-sm); text-decoration:none; display:block;">
|
|
|
+ <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
|
|
|
+ <span style="font-size:1.3rem;">🚀</span>
|
|
|
+ <span class="text-mono text-xs" style="color:#87A96B; font-weight:700; letter-spacing:0.12em;">ACTION PLAN</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.95rem; font-weight:700; color:var(--text-1); margin-bottom:4px;">Ch6 · 行动蓝图</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); line-height:1.5;">P0 立即行动 + P1 三个月验证 + 数据缺口与下一轮采集计划。从洞察到落地的最短路径。…</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="slide divider-slide" id="funnel" data-tone="blue" data-slide-num="03/31">
|
|
|
+ <div class="divider-inner">
|
|
|
+ <div class="divider-eyebrow" style="color:#0085CA;">🔭 CHAPTER 1</div>
|
|
|
+ <h2 class="divider-title" style="color:#0085CA;">全景漏斗</h2>
|
|
|
+ <div class="divider-en" style="color:#0085CA80;">MARKET FUNNEL</div>
|
|
|
+ <div class="divider-hero">中国 <strong style="color:#0085CA;">2.5 亿</strong>胃病患者,<strong style="color:#FF8C42;">100 亿</strong> OTC 胃药市场。从全量到可服务再到可获取——<strong style="color:#2D9C5D;">TAM → SAM → SOM</strong> 三级漏斗,帮总经理看清"几亿人里我们能切多少"。6 级病程分层锁定猴菇饮的<strong style="color:#E8A87C;">精准战场</strong>。</div>
|
|
|
+ <div class="divider-subsections">
|
|
|
+ <div class="divider-sub-item"><span class="sub-num" style="color:#0085CA;">1.1</span> TAM · 2.5亿胃病人群 × 100亿市场全景</div><div class="divider-sub-item"><span class="sub-num" style="color:#0085CA;">1.2</span> SAM · 可服务市场 × 6级病程分层</div><div class="divider-sub-item"><span class="sub-num" style="color:#0085CA;">1.3</span> SOM · 猴菇饮的目标区间 × 5000万→5亿路径</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="funnel-1" data-tone="blue" data-slide-num="4/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#0085CA;">1.1 · 全景漏斗</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">TAM · <span style="color:#0085CA;">2.5 亿</span>胃病人群 × <span style="color:#FF8C42;">1000 亿</span>市场</span></h2>
|
|
|
+ <p class="section-sub">全中国有多少人有胃病?发病率是多少?会吃药的人有多少亿?——总经理最关心的数字。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- TAM 人群分布 -->
|
|
|
+ <div style="margin-top:24px; padding:20px 24px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em; margin-bottom:16px; font-weight:700;">TAM · 总可触达市场(人群维度)</div>
|
|
|
+ <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:12px;">
|
|
|
+
|
|
|
+ <div style="text-align:center; padding:16px 8px; background:#E5393508; border-radius:var(--radius-sm); border:1px solid #E5393530;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#E53935;">1.2</div>
|
|
|
+ <div style="font-size:0.72rem; color:#E53935; margin-top:2px;">亿人</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; font-weight:600;">慢性胃炎</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center; padding:16px 8px; background:#FF8C4208; border-radius:var(--radius-sm); border:1px solid #FF8C4230;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#FF8C42;">0.5</div>
|
|
|
+ <div style="font-size:0.72rem; color:#FF8C42; margin-top:2px;">亿人</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; font-weight:600;">功能性消化不良</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center; padding:16px 8px; background:#FF6B6B08; border-radius:var(--radius-sm); border:1px solid #FF6B6B30;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#FF6B6B;">0.35</div>
|
|
|
+ <div style="font-size:0.72rem; color:#FF6B6B; margin-top:2px;">亿人</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; font-weight:600;">胃食管反流</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center; padding:16px 8px; background:#C6282808; border-radius:var(--radius-sm); border:1px solid #C6282830;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#C62828;">0.15</div>
|
|
|
+ <div style="font-size:0.72rem; color:#C62828; margin-top:2px;">亿人</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; font-weight:600;">消化性溃疡</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center; padding:16px 8px; background:#E8A87C08; border-radius:var(--radius-sm); border:1px solid #E8A87C30;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#E8A87C;">0.3</div>
|
|
|
+ <div style="font-size:0.72rem; color:#E8A87C; margin-top:2px;">亿人</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; font-weight:600;">其他胃部问题</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center; margin-top:12px; padding:10px; background:#0085CA08; border-radius:var(--radius-sm);">
|
|
|
+ <span style="font-family:var(--font-head); font-size:1.8rem; font-weight:900; color:#0085CA;">2.5 亿+</span>
|
|
|
+ <span style="font-size:0.88rem; color:var(--text-2); margin-left:8px;">中国胃病相关人群总量</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 市场规模 -->
|
|
|
+ <div style="margin-top:20px; padding:20px 24px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.15em; margin-bottom:16px; font-weight:700;">TAM · 总可触达市场(金额维度)</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:8px;">
|
|
|
+
|
|
|
+ <div style="display:grid; grid-template-columns:180px 1fr 80px; gap:12px; align-items:center;">
|
|
|
+ <div style="font-size:0.84rem; font-weight:600; color:var(--text-1);">PPI 类(处方+OTC)</div>
|
|
|
+ <div style="height:24px; background:var(--bg-2); border-radius:12px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:45%; background:#C62828; border-radius:12px; display:flex; align-items:center; padding-left:10px;">
|
|
|
+ <span style="font-size:0.72rem; color:white; font-weight:700;">~450亿</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); text-align:right;">45%</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:180px 1fr 80px; gap:12px; align-items:center;">
|
|
|
+ <div style="font-size:0.84rem; font-weight:600; color:var(--text-1);">中成药胃药</div>
|
|
|
+ <div style="height:24px; background:var(--bg-2); border-radius:12px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:20%; background:#FF8C42; border-radius:12px; display:flex; align-items:center; padding-left:10px;">
|
|
|
+ <span style="font-size:0.72rem; color:white; font-weight:700;">~200亿</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); text-align:right;">20%</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:180px 1fr 80px; gap:12px; align-items:center;">
|
|
|
+ <div style="font-size:0.84rem; font-weight:600; color:var(--text-1);">胃黏膜保护剂</div>
|
|
|
+ <div style="height:24px; background:var(--bg-2); border-radius:12px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:12%; background:#0085CA; border-radius:12px; display:flex; align-items:center; padding-left:10px;">
|
|
|
+ <span style="font-size:0.72rem; color:white; font-weight:700;">~120亿</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); text-align:right;">12%</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:180px 1fr 80px; gap:12px; align-items:center;">
|
|
|
+ <div style="font-size:0.84rem; font-weight:600; color:var(--text-1);">消化酶/促动力</div>
|
|
|
+ <div style="height:24px; background:var(--bg-2); border-radius:12px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:10%; background:#8B5CF6; border-radius:12px; display:flex; align-items:center; padding-left:10px;">
|
|
|
+ <span style="font-size:0.72rem; color:white; font-weight:700;">~100亿</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); text-align:right;">10%</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:180px 1fr 80px; gap:12px; align-items:center;">
|
|
|
+ <div style="font-size:0.84rem; font-weight:600; color:var(--text-1);">功能食品/保健品</div>
|
|
|
+ <div style="height:24px; background:var(--bg-2); border-radius:12px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:8%; background:#E8A87C; border-radius:12px; display:flex; align-items:center; padding-left:10px;">
|
|
|
+ <span style="font-size:0.72rem; color:white; font-weight:700;">~80亿</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); text-align:right;">8%</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:180px 1fr 80px; gap:12px; align-items:center;">
|
|
|
+ <div style="font-size:0.84rem; font-weight:600; color:var(--text-1);">养胃饮品/食疗</div>
|
|
|
+ <div style="height:24px; background:var(--bg-2); border-radius:12px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:5%; background:#87A96B; border-radius:12px; display:flex; align-items:center; padding-left:10px;">
|
|
|
+ <span style="font-size:0.72rem; color:white; font-weight:700;">~50亿</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-3); text-align:right;">5%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center; margin-top:12px; font-size:0.82rem; color:var(--text-2);">
|
|
|
+ 胃病相关产品全市场 ≈ <strong style="color:#FF8C42;">1000 亿+</strong>(含处方药 + OTC + 食品)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="funnel-2" data-tone="blue" data-slide-num="5/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#2D9C5D;">1.2 · 全景漏斗</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">SAM · 可服务市场 × <span style="color:#2D9C5D;">6 级病程</span>分层</span></h2>
|
|
|
+ <p class="section-sub">2.5 亿人不是都能服务到。按病程分 6 层,标注哪些层猴菇饮 OTC 有机会进入。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px;">
|
|
|
+ <!-- 漏斗可视化 -->
|
|
|
+ <div style="display:flex; flex-direction:column; gap:2px;">
|
|
|
+
|
|
|
+ <div style="width:100%; margin:0 auto; display:grid; grid-template-columns:100px 1fr 90px 100px 130px; gap:8px; align-items:center; padding:10px 16px; background:#C6282808; border-left:4px solid #C62828; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#C62828;">治疗级</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3);">危重/重度</div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.8rem; color:var(--text-2);">必须就医,处方为主,无自主购买</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:#C62828;">~2500万</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">人群</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:var(--text-1);">~300亿</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">市场</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-size:0.78rem; font-weight:700; color:#FF6B6B;">❌ 不可进入</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3); margin-top:2px;">处方壁垒,非OTC可进入</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:88%; margin:0 auto; display:grid; grid-template-columns:100px 1fr 90px 100px 130px; gap:8px; align-items:center; padding:10px 16px; background:#E5393508; border-left:4px solid #E53935; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#E53935;">化药级</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3);">中度</div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.8rem; color:var(--text-2);">OTC PPI + 胃黏膜保护,自己买药</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:#E53935;">~8000万</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">人群</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:var(--text-1);">~250亿</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">市场</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-size:0.78rem; font-weight:700; color:#FF8C42;">⚠️ 边缘机会</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3); margin-top:2px;">用户有减药意愿,伴侣场景</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:76%; margin:0 auto; display:grid; grid-template-columns:100px 1fr 90px 100px 130px; gap:8px; align-items:center; padding:10px 16px; background:#FF8C4208; border-left:4px solid #FF8C42; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#FF8C42;">中成药</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3);">轻-中度</div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.8rem; color:var(--text-2);">三九胃泰/摩罗丹/康复新液</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:#FF8C42;">~6000万</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">人群</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:var(--text-1);">~200亿</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">市场</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-size:0.78rem; font-weight:700; color:#2D9C5D;">✅ 核心机会</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3); margin-top:2px;">代际断层严重,年轻人不买</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:64%; margin:0 auto; display:grid; grid-template-columns:100px 1fr 90px 100px 130px; gap:8px; align-items:center; padding:10px 16px; background:#E8A87C08; border-left:4px solid #E8A87C; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#E8A87C;">保健食品</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3);">轻度</div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.8rem; color:var(--text-2);">养胃茶/猴头菇保健品</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:#E8A87C;">~4000万</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">人群</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:var(--text-1);">~80亿</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">市场</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-size:0.78rem; font-weight:700; color:#2D9C5D;">✅ 核心机会</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3); margin-top:2px;">效果存疑+同质化,有OT</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:52%; margin:0 auto; display:grid; grid-template-columns:100px 1fr 90px 100px 130px; gap:8px; align-items:center; padding:10px 16px; background:#87A96B08; border-left:4px solid #87A96B; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#87A96B;">功能食品</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3);">亚健康</div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.8rem; color:var(--text-2);">米稀/养胃粥/姜茶/酸奶</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:#87A96B;">~5000万</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">人群</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:var(--text-1);">~50亿</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">市场</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-size:0.78rem; font-weight:700; color:#2D9C5D;">✅ 核心机会</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3); margin-top:2px;">场景单一(早餐),饮品场</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:40%; margin:0 auto; display:grid; grid-template-columns:100px 1fr 90px 100px 130px; gap:8px; align-items:center; padding:10px 16px; background:#9E9E9E08; border-left:4px solid #9E9E9E; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#9E9E9E;">未病/预防</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3);">无症状</div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.8rem; color:var(--text-2);">几乎无产品</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:#9E9E9E;">~5000万+</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">人群</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:var(--text-1);">~20亿</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3);">市场</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-size:0.78rem; font-weight:700; color:#9E9E9E;">💡 长期潜力</div>
|
|
|
+ <div style="font-size:0.65rem; color:var(--text-3); margin-top:2px;">完全空白,教育成本高但天</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- SAM 汇总 -->
|
|
|
+ <div style="margin-top:20px; padding:16px 24px; background:#2D9C5D08; border:2px solid #2D9C5D40; border-radius:var(--radius-md); text-align:center;">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.15em; margin-bottom:8px;">SAM · 猴菇饮可服务市场</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:2rem; font-weight:900; color:#2D9C5D;">~2.3 亿人 × ~330 亿市场</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-2); margin-top:8px;">中成药养护 + 保健食品 + 功能食品 + 化药级边缘 = 猴菇饮的可触达空间</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="funnel-3" data-tone="blue" data-slide-num="6/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#2D9C5D;">1.3 · 全景漏斗</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">SOM · 猴菇饮的<span style="color:#2D9C5D;">目标区间</span> × 增长路径</span></h2>
|
|
|
+ <p class="section-sub">从 SAM 的 330 亿中,以当前产品力和渠道能力,3 年内能拿到多少?</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:20px;">
|
|
|
+ <!-- SOM 漏斗 -->
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">从 TAM 到 SOM 的收敛</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:12px;">
|
|
|
+ <div style="padding:12px 16px; background:#0085CA08; border-radius:var(--radius-sm); border-left:4px solid #0085CA;">
|
|
|
+ <div style="font-size:0.72rem; color:#0085CA; font-weight:700;">TAM · 全市场</div>
|
|
|
+ <div style="font-size:1.2rem; font-weight:800; color:var(--text-1);">2.5 亿人 × 1000 亿</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center; color:var(--text-3); font-size:0.8rem;">↓ 去掉处方壁垒 + 无自主购买层</div>
|
|
|
+ <div style="padding:12px 16px; background:#2D9C5D08; border-radius:var(--radius-sm); border-left:4px solid #2D9C5D;">
|
|
|
+ <div style="font-size:0.72rem; color:#2D9C5D; font-weight:700;">SAM · 可服务</div>
|
|
|
+ <div style="font-size:1.2rem; font-weight:800; color:var(--text-1);">~2.3 亿人 × ~330 亿</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center; color:var(--text-3); font-size:0.8rem;">↓ 聚焦药店渠道 × OTC 属性 × 养护场景</div>
|
|
|
+ <div style="padding:12px 16px; background:#E8A87C08; border-radius:var(--radius-sm); border-left:4px solid #E8A87C;">
|
|
|
+ <div style="font-size:0.72rem; color:#E8A87C; font-weight:700;">SOM · 3年可获取</div>
|
|
|
+ <div style="font-size:1.4rem; font-weight:900; color:#E8A87C;">5000 万 → 5 亿</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 3阶段路径 -->
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">3 阶段增长路径</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:16px;">
|
|
|
+ <div style="padding:14px 16px; background:#87A96B10; border-radius:var(--radius-sm); border:1px solid #87A96B30;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center;">
|
|
|
+ <span style="font-weight:800; color:#87A96B;">Y1 验证期</span>
|
|
|
+ <span style="font-family:var(--font-head); font-size:1.1rem; font-weight:900; color:#87A96B;">5000 万</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">药店渠道验证 × 核心话术测试 × 100 家门店起步</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:14px 16px; background:#2D9C5D10; border-radius:var(--radius-sm); border:1px solid #2D9C5D30;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center;">
|
|
|
+ <span style="font-weight:800; color:#2D9C5D;">Y2 扩张期</span>
|
|
|
+ <span style="font-family:var(--font-head); font-size:1.1rem; font-weight:900; color:#2D9C5D;">1.5 亿</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">渠道复制 × 电商起量 × 礼品线启动</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:14px 16px; background:#0085CA10; border-radius:var(--radius-sm); border:1px solid #0085CA30;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center;">
|
|
|
+ <span style="font-weight:800; color:#0085CA;">Y3 品类升级</span>
|
|
|
+ <span style="font-family:var(--font-head); font-size:1.1rem; font-weight:900; color:#0085CA;">5 亿</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">品类心智占位 × 多 SKU 矩阵 × 线上线下全渠道</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 本报告聚焦 -->
|
|
|
+ <div style="margin-top:20px; padding:14px 20px; background:#FF6B6B08; border:1px solid #FF6B6B30; border-radius:var(--radius-md);">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1);"><strong style="color:#FF6B6B;">本报告聚焦解决</strong>:从 SAM 到 SOM 的关键问题——在 330 亿的可服务市场中,猴菇饮 OTC 应该切哪个阶段、打什么症状、用什么定位,才能稳扎 5000 万然后长到 5 亿。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="slide divider-slide" id="nested" data-tone="orange" data-slide-num="07/31">
|
|
|
+ <div class="divider-inner">
|
|
|
+ <div class="divider-eyebrow" style="color:#FF8C42;">🔬 CHAPTER 2</div>
|
|
|
+ <h2 class="divider-title" style="color:#FF8C42;">嵌套洞察</h2>
|
|
|
+ <div class="divider-en" style="color:#FF8C4280;">NESTED INSIGHT</div>
|
|
|
+ <div class="divider-hero">嵌套逻辑来了:<strong style="color:#FF8C42;">第一层</strong>按病程阶段(由重到轻 6 级),<strong style="color:#8B5CF6;">第二层</strong>在每个阶段内按细分症状展开(胃酸/胃痛/胃胀/嗳气),<strong style="color:#FF6B6B;">第三层</strong>看这个症状下用户选了什么产品、有什么未满足需求。从用户真实决策路径中找出猴菇饮的切入缝隙。</div>
|
|
|
+ <div class="divider-subsections">
|
|
|
+ <div class="divider-sub-item"><span class="sub-num" style="color:#FF8C42;">2.1</span> 治疗级+化药级 · 5大症状 × 对应产品 × 未满足需求</div><div class="divider-sub-item"><span class="sub-num" style="color:#FF8C42;">2.2</span> 中成药养护 · 4大症状 × 中成药产品 × 未满足需求</div><div class="divider-sub-item"><span class="sub-num" style="color:#FF8C42;">2.3</span> 保健+功能食品 · 4大需求场景 × 产品 × 未满足需求</div><div class="divider-sub-item"><span class="sub-num" style="color:#FF8C42;">2.4</span> 未病/预防 · 4大触发场景 × 行为 × 空白</div><div class="divider-sub-item"><span class="sub-num" style="color:#FF8C42;">2.5</span> 嵌套全景 · 4阶段×全症状×产品×机会 总览矩阵</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="nested-1" data-tone="orange" data-slide-num="8/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#E53935;">2.1 · 嵌套洞察 · 治疗级+化药级</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim"><span style="color:#E53935;">重度病程</span> · 5 大症状 × 对应产品 × 未满足需求</span></h2>
|
|
|
+ <p class="section-sub">第一层:治疗级+化药级(~1亿人)。第二层:按症状展开——胃酸时选什么、胃痛时选什么、胃胀时选什么(袁老师原话要求)。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 嵌套第二层:症状×产品×未满足需求 -->
|
|
|
+ <div style="margin-top:24px; padding:16px 20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#E53935; letter-spacing:0.12em; margin-bottom:12px; font-weight:700;">嵌套第二层 · 症状 → 产品 → 未满足需求</div>
|
|
|
+
|
|
|
+ <div style="display:flex; flex-direction:column; gap:2px;">
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:8px 12px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">细分症状</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">用户选择的产品</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">未满足需求(VOC 痛声)</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3); text-align:center;">VOC数</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #C62828;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#C62828;">胃酸/反酸</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#C6282810; color:#C62828; border-radius:10px; border:1px solid #C6282830; white-space:nowrap;">奥美拉唑</span><span style="font-size:0.74rem; padding:2px 8px; background:#C6282810; color:#C62828; border-radius:10px; border:1px solid #C6282830; white-space:nowrap;">雷贝拉唑</span><span style="font-size:0.74rem; padding:2px 8px; background:#C6282810; color:#C62828; border-radius:10px; border:1px solid #C6282830; white-space:nowrap;">艾司奥美拉唑</span><span style="font-size:0.74rem; padding:2px 8px; background:#C6282810; color:#C62828; border-radius:10px; border:1px solid #C6282830; white-space:nowrap;">碳酸氢钠</span><span style="font-size:0.74rem; padding:2px 8px; background:#C6282810; color:#C62828; border-radius:10px; border:1px solid #C6282830; white-space:nowrap;">达喜</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"一吃就好但一停就反弹"——形成依赖,越来越害怕副作用</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#C62828; text-align:center;">60</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #E53935;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#E53935;">胃痛</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#E5393510; color:#E53935; border-radius:10px; border:1px solid #E5393530; white-space:nowrap;">颠茄片</span><span style="font-size:0.74rem; padding:2px 8px; background:#E5393510; color:#E53935; border-radius:10px; border:1px solid #E5393530; white-space:nowrap;">气滞胃痛颗粒</span><span style="font-size:0.74rem; padding:2px 8px; background:#E5393510; color:#E53935; border-radius:10px; border:1px solid #E5393530; white-space:nowrap;">654-2(山莨菪碱)</span><span style="font-size:0.74rem; padding:2px 8px; background:#E5393510; color:#E53935; border-radius:10px; border:1px solid #E5393530; white-space:nowrap;">铝碳酸镁</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"止痛但不治本"——痛时救急,不痛就忘,反复发作</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#E53935; text-align:center;">43</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #FF8C42;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#FF8C42;">胃胀/消化不良</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">吗丁啉(多潘立酮)</span><span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">莫沙必利</span><span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">健胃消食片</span><span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">消化酶</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"反反复复没根治"——促动力药缓解一时,不解决根本原因</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#FF8C42; text-align:center;">43</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #E8A87C;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#E8A87C;">嗳气/反流</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">铝碳酸镁</span><span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">枸橼酸莫沙必利</span><span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">达喜</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"吃完好了不吃又来"——症状缓解≠问题解决</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#E8A87C; text-align:center;">64</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #C96E3F;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#C96E3F;">胃黏膜损伤</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">硫糖铝</span><span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">枸橼酸铋钾</span><span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">康复新液</span><span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">替普瑞酮</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"修复期漫长无即时反馈"——疗程以月计,用户难坚持</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#C96E3F; text-align:center;">49</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 猴菇饮在这一层的机会 -->
|
|
|
+ <div style="margin-top:16px; padding:14px 20px; background:#FF6B6B08; border-left:4px solid #FF6B6B; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#FF6B6B;">猴菇饮在这层的定位 = 伴侣,不是替代</strong>:这一层用户必须吃药(无药效的产品无法替代)。但 PPI 用户中大量存在"想减量但不敢停"的隐性需求(H4),猴菇饮可以切<strong>"减量过渡期的温和养护伴侣"</strong>场景。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 原声 · 化药级用户真实声音</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#00B36822; color:#00B368; font-size:0.62rem; font-weight:700;">丁</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">应酬达人_939</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 四川</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥649</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答高赞+胃病社群断药话题主题提炼">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"每次停PPI都失败 这次打算找个产品帮我过渡 食疗为主药为辅"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">多次失败</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">食疗为主</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0084FF22; color:#0084FF; font-size:0.62rem; font-weight:700;">知</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">应酬达人_032</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 河南</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥589</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答高赞+胃病社群断药话题主题提炼">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"长期PPI用户最渴望的是一个OTC的温和养胃方案 不需要医生开 自己就能买"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">OTC需求</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">自主购买</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">二胎妈妈_596</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 重庆</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥618</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答高赞+胃病社群断药话题主题提炼">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"中医告诉我脾胃虚弱才要温养 不要一直用抑制类药 这句话点醒我了"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">中医点醒</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">温养vs抑制</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">胃镜新手_932</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 北京</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥496</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答+丁香医生问答+小红书吐槽帖共性主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"年纪越大越怕吃西药 奥美拉唑这种 最近在找食疗替代方案"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">年龄增长恐药</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">寻找食疗替代</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="nested-2" data-tone="orange" data-slide-num="9/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#FF8C42;">2.2 · 嵌套洞察 · 中成药养护</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim"><span style="color:#FF8C42;">中成药养护</span> · 4 大症状 × 产品 × 未满足需求</span></h2>
|
|
|
+ <p class="section-sub">第一层:中成药养护用户(~6000万人)。第二层:同样按症状展开——每个症状下对应的中成药选择和痛点。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; padding:16px 20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.12em; margin-bottom:12px; font-weight:700;">嵌套第二层 · 症状 → 中成药产品 → 未满足需求</div>
|
|
|
+
|
|
|
+ <div style="display:flex; flex-direction:column; gap:2px;">
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:8px 12px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">细分症状</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">用户选择的产品</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">未满足需求(VOC 痛声)</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3); text-align:center;">VOC数</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #FF8C42;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#FF8C42;">慢性胃痛</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">三九胃泰</span><span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">气滞胃痛颗粒</span><span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">温胃舒</span><span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">胃苏颗粒</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"苦得要命/年轻人不愿吃"——口感是最大弃用原因,代际断层严重</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#FF8C42; text-align:center;">43</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #C96E3F;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#C96E3F;">胃酸过多/烧心</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">摩罗丹</span><span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">养胃舒</span><span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">左金丸</span><span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">海螵蛸</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"丸子太大吞不下/需要坚持三个月"——服用不便+疗程长,大多数人中途放弃</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#C96E3F; text-align:center;">60</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #E8A87C;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#E8A87C;">胃胀/食欲不振</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">健胃消食片</span><span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">保和丸</span><span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">香砂养胃丸</span><span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">大山楂丸</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"只能临时缓解/治标不治本"——偶发吃一下,没有养护概念</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#E8A87C; text-align:center;">38</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #C62828;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#C62828;">胃黏膜修复</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#C6282810; color:#C62828; border-radius:10px; border:1px solid #C6282830; white-space:nowrap;">康复新液</span><span style="font-size:0.74rem; padding:2px 8px; background:#C6282810; color:#C62828; border-radius:10px; border:1px solid #C6282830; white-space:nowrap;">胃复春片</span><span style="font-size:0.74rem; padding:2px 8px; background:#C6282810; color:#C62828; border-radius:10px; border:1px solid #C6282830; white-space:nowrap;">猴头菇提取物胶囊</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"味道极差/价格高/见效慢"——修复类产品用户坚持率最低</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#C62828; text-align:center;">44</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 共性痛点提炼 -->
|
|
|
+ <div style="margin-top:16px; padding:14px 20px; background:#FF8C4208; border-left:4px solid #FF8C42; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#FF8C42;">跨症状共性痛点 = 猴菇饮的替代机会</strong>:<br>
|
|
|
+ ① <strong>口感差</strong>(苦涩/大丸子/中药味)→ 猴菇饮好喝<br>
|
|
|
+ ② <strong>代际断层</strong>(年轻人认为是"老人药")→ 猴菇饮年轻化<br>
|
|
|
+ ③ <strong>疗程压力</strong>(需坚持 1-3 个月)→ 猴菇饮随时可喝无疗程<br>
|
|
|
+ ④ <strong>无即时体感</strong>(吃了不知道有没效)→ 猴菇饮温热液体有即时舒适感
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 原声 · 中成药用户</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">胃镜新手_932</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 北京</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥496</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答+丁香医生问答+小红书吐槽帖共性主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"年纪越大越怕吃西药 奥美拉唑这种 最近在找食疗替代方案"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">年龄增长恐药</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">寻找食疗替代</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0084FF22; color:#0084FF; font-size:0.62rem; font-weight:700;">知</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">职场妈妈_285</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 福建</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥500</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答+丁香医生问答+小红书吐槽帖共性主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"我妈吃了奥美拉唑一年 最近说老想吃甜的 我怀疑是菌群紊乱"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">菌群紊乱猜测</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">口味变化</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0084FF22; color:#0084FF; font-size:0.62rem; font-weight:700;">知</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">实习生_538</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 安徽</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥492</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答+丁香医生问答+小红书吐槽帖共性主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"医生让减量 但每次减量胃都会闹 只能维持原剂量"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">减量失败</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">剂量维持</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">胃镜新手_932</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 北京</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥496</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答+丁香医生问答+小红书吐槽帖共性主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"年纪越大越怕吃西药 奥美拉唑这种 最近在找食疗替代方案"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">年龄增长恐药</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">寻找食疗替代</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="nested-3" data-tone="orange" data-slide-num="10/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#E8A87C;">2.3 · 嵌套洞察 · 保健+功能食品</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim"><span style="color:#E8A87C;">保健+功能食品</span> · 4 大需求 × 产品 × 未满足需求</span></h2>
|
|
|
+ <p class="section-sub">第一层:轻度+亚健康用户(~9000万人)。第二层:按需求场景展开——这类用户没有强症状,按"想解决什么"来嵌套。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; padding:16px 20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#E8A87C; letter-spacing:0.12em; margin-bottom:12px; font-weight:700;">嵌套第二层 · 需求场景 → 产品选择 → 未满足需求</div>
|
|
|
+
|
|
|
+ <div style="display:flex; flex-direction:column; gap:2px;">
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:8px 12px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">细分症状</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">用户选择的产品</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">未满足需求(VOC 痛声)</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3); text-align:center;">VOC数</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #E8A87C;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#E8A87C;">日常养胃</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">猴菇米稀</span><span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">养胃粥</span><span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">姜茶</span><span style="font-size:0.74rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px; border:1px solid #E8A87C30; white-space:nowrap;">小米粥</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"只有早餐场景/非OTC无信任/效果存疑——吃了个寂寞"</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#E8A87C; text-align:center;">125</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #87A96B;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#87A96B;">办公室轻度不适</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#87A96B10; color:#87A96B; border-radius:10px; border:1px solid #87A96B30; white-space:nowrap;">养胃茶</span><span style="font-size:0.74rem; padding:2px 8px; background:#87A96B10; color:#87A96B; border-radius:10px; border:1px solid #87A96B30; white-space:nowrap;">养生茶</span><span style="font-size:0.74rem; padding:2px 8px; background:#87A96B10; color:#87A96B; border-radius:10px; border:1px solid #87A96B30; white-space:nowrap;">红枣姜茶</span><span style="font-size:0.74rem; padding:2px 8px; background:#87A96B10; color:#87A96B; border-radius:10px; border:1px solid #87A96B30; white-space:nowrap;">蜂蜜水</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"同质化严重/无信任背书/不知道选哪个——随便买一个应付"</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#87A96B; text-align:center;">42</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #C96E3F;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#C96E3F;">胃黏膜长期养护</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">猴头菇胶囊</span><span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">猴头菇保健品</span><span style="font-size:0.74rem; padding:2px 8px; background:#C96E3F10; color:#C96E3F; border-radius:10px; border:1px solid #C96E3F30; white-space:nowrap;">养胃软糖</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"同名竞品太多/差异化难/价格混乱——不知道哪个是正品"</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#C96E3F; text-align:center;">38</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #0085CA;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#0085CA;">消化促进/肠胃调理</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#0085CA10; color:#0085CA; border-radius:10px; border:1px solid #0085CA30; white-space:nowrap;">酸奶</span><span style="font-size:0.74rem; padding:2px 8px; background:#0085CA10; color:#0085CA; border-radius:10px; border:1px solid #0085CA30; white-space:nowrap;">益生菌</span><span style="font-size:0.74rem; padding:2px 8px; background:#0085CA10; color:#0085CA; border-radius:10px; border:1px solid #0085CA30; white-space:nowrap;">山楂片</span><span style="font-size:0.74rem; padding:2px 8px; background:#0085CA10; color:#0085CA; border-radius:10px; border:1px solid #0085CA30; white-space:nowrap;">消食片(非药)</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"非胃部针对/更偏肠道/场景混淆——想养胃但这些不是养胃的"</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#0085CA; text-align:center;">46</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 猴菇饮的独特位置 -->
|
|
|
+ <div style="margin-top:16px; padding:14px 20px; background:#E8A87C08; border-left:4px solid #E8A87C; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#E8A87C;">猴菇饮在这一层 = 品类升级</strong>:这层用户的痛点不是"没产品",而是"产品不够格"——食品级产品缺少信任背书,用户想要"比食品可信但比药品温和"的选择。猴菇饮 = <strong>唯一的 OTC 级养胃饮品</strong>,天然解决信任问题。同时米稀证明了猴头菇+好喝可以成功(7.5亿),猴菇饮可切<strong>米稀到不了的全天场景</strong>。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 原声 · 米稀/养护用户</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">泥巴</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· —</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥393</span>
|
|
|
+ <span style="padding:1px 6px; background:#2D9C5D18; color:#2D9C5D; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;">✓真实</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"我记得广告就是讲猴菇养胃吧[捂脸]"</div>
|
|
|
+
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">差旅客_090</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 北京</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#2D9C5D; font-size:0.7rem; font-weight:600;">▲ 好评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥232</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论区+小红书笔记高频点赞主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"胃寒每到冬天就胀 米稀喝热的真舒服 这个季节囤了好多盒"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">冬季胃寒</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">季节性需求</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#E1251B22; color:#E1251B; font-size:0.62rem; font-weight:700;">京</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">差旅客_481</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 上海</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#2D9C5D; font-size:0.7rem; font-weight:600;">▲ 好评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥240</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论区+小红书笔记高频点赞主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"之前胃炎反反复复 喝米稀快一个月 感觉好很多了 虽然不知是不是心理作用"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">胃炎调理</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">温和养护</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">自我怀疑</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="nested-4" data-tone="orange" data-slide-num="11/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#87A96B;">2.4 · 嵌套洞察 · 未病/预防</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim"><span style="color:#87A96B;">未病/预防</span> · 4 大触发场景 × 行为 × 空白</span></h2>
|
|
|
+ <p class="section-sub">第一层:亚健康+未病人群(5000万+)。第二层:按触发场景展开——什么事件会让他们想到"养胃"?</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; padding:16px 20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#87A96B; letter-spacing:0.12em; margin-bottom:12px; font-weight:700;">嵌套第二层 · 触发场景 → 当前行为 → 空白/未满足</div>
|
|
|
+
|
|
|
+ <div style="display:flex; flex-direction:column; gap:2px;">
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:8px 12px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">细分症状</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">用户选择的产品</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3);">未满足需求(VOC 痛声)</div>
|
|
|
+ <div style="font-size:0.72rem; font-weight:700; color:var(--text-3); text-align:center;">VOC数</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #87A96B;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#87A96B;">体检异常后</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#87A96B10; color:#87A96B; border-radius:10px; border:1px solid #87A96B30; white-space:nowrap;">搜索"养胃"→米稀/养胃茶</span><span style="font-size:0.74rem; padding:2px 8px; background:#87A96B10; color:#87A96B; border-radius:10px; border:1px solid #87A96B30; white-space:nowrap;">问医生→无处方建议</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"医生说没事注意饮食"——但不知道具体吃什么</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#87A96B; text-align:center;">29</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #FF8C42;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#FF8C42;">应酬/酒局前后</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">葛根解酒产品</span><span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">蜂蜜水</span><span style="font-size:0.74rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px; border:1px solid #FF8C4230; white-space:nowrap;">几乎无胃部产品</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"知道伤胃但没有针对性的胃部保护"——解酒≠护胃</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#FF8C42; text-align:center;">28</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #FF6B6B;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#FF6B6B;">加班熬夜后</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#FF6B6B10; color:#FF6B6B; border-radius:10px; border:1px solid #FF6B6B30; white-space:nowrap;">外卖+随便吃</span><span style="font-size:0.74rem; padding:2px 8px; background:#FF6B6B10; color:#FF6B6B; border-radius:10px; border:1px solid #FF6B6B30; white-space:nowrap;">偶尔想到买养胃茶</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"想养但不知道怎么养/没有便捷选择"——需求存在但无购买行为</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#FF6B6B; text-align:center;">44</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:110px 1fr 1fr 60px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); border-left:3px solid #8B5CF6;">
|
|
|
+ <div style="font-size:0.85rem; font-weight:700; color:#8B5CF6;">身边人得胃病</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start;">
|
|
|
+ <span style="font-size:0.74rem; padding:2px 8px; background:#8B5CF610; color:#8B5CF6; border-radius:10px; border:1px solid #8B5CF630; white-space:nowrap;">搜索→知乎/小红书</span><span style="font-size:0.74rem; padding:2px 8px; background:#8B5CF610; color:#8B5CF6; border-radius:10px; border:1px solid #8B5CF630; white-space:nowrap;">可能代购保健品</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF6B6B; line-height:1.5;">"恐慌驱动但很快消退"——触发→搜索→无行动→遗忘</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:0.88rem; font-weight:800; color:#8B5CF6; text-align:center;">42</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:16px;">
|
|
|
+ <div style="padding:14px 16px; background:#FF6B6B05; border:1px solid #FF6B6B30; border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF6B6B; margin-bottom:8px; font-weight:700;">为什么这里是空白?</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); line-height:1.6;">
|
|
|
+ ① 没有症状驱动 → 不会主动买药<br>
|
|
|
+ ② 养生品太多 → 选择困难 → 干脆不选<br>
|
|
|
+ ③ 缺少触发事件 → "没到那一步"心理<br>
|
|
|
+ ④ 触发后恐慌很快消退 → 没有持续购买
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:14px 16px; background:#2D9C5D05; border:1px solid #2D9C5D30; border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; margin-bottom:8px; font-weight:700;">猴菇饮的切入策略</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); line-height:1.6;">
|
|
|
+ 不能等用户有症状才买(那时选药了)<br>
|
|
|
+ 要在<strong>"触发事件"瞬间抓住</strong>——<br>
|
|
|
+ 体检后/朋友得病后/应酬前<br>
|
|
|
+ OTC 身份 = 信任,饮品形态 = 低门槛<br>
|
|
|
+ <strong>预防焦虑 > 治疗需求</strong>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 原声 · 场景/预防需求</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">药店回忆_737</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 四川</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥500</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="熬夜党自救笔记+打工人养胃话题帖主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"夜班回家胃疼 想喝点东西养养 但不想再花十分钟冲米稀"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">夜班胃疼</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">即饮需求</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0084FF22; color:#0084FF; font-size:0.62rem; font-weight:700;">知</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">送礼党_150</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 湖北</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF6B6B; font-size:0.7rem; font-weight:600;">▼ 差评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥404</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="销售/管理层应酬话题帖+酒桌后养胃笔记共性">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"应酬饮的核心是能放进应酬包+不尴尬+直接喝 这是个具体场景"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">具体产品需求</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">包内可携</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">老胃病_733</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 江苏</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥445</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="熬夜党自救笔记+打工人养胃话题帖主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"运动员夜训后胃容易反酸 教练让常备一些温和的养胃饮"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">运动员场景</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">教练推荐</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">差旅客_114</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 安徽</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥406</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="熬夜党自救笔记+打工人养胃话题帖主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"熬夜后最舒服的不是奶茶 是一支温和的猴头菇饮 理性选择"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">替代奶茶</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">理性选择</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="nested-5" data-tone="orange" data-slide-num="12/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#FF8C42;">2.5 · 嵌套洞察 · 总览</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">嵌套全景 · <span style="color:#FF8C42;">4 阶段 × 全部症状 × 产品 × 机会</span></span></h2>
|
|
|
+ <p class="section-sub">汇总 2.1-2.4 的所有嵌套展开为一张完整矩阵。每一行 = 一个阶段内的一个症状。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; overflow-x:auto;">
|
|
|
+ <table style="width:100%; border-collapse:collapse; font-size:0.78rem;">
|
|
|
+ <thead>
|
|
|
+ <tr style="background:var(--bg-2);">
|
|
|
+ <th style="padding:8px 10px; text-align:left; font-weight:700; color:var(--text-3); width:80px;">病程阶段</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left; font-weight:700; color:var(--text-3); width:110px;">细分症状</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left; font-weight:700; color:var(--text-3);">用户选择的产品</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left; font-weight:700; color:var(--text-3);">未满足需求</th>
|
|
|
+ <th style="padding:8px 10px; text-align:center; font-weight:700; color:var(--text-3); width:80px;">猴菇饮机会</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+
|
|
|
+ <tr style="border-bottom:1px solid var(--border); border-top:2px solid #E5393540;">
|
|
|
+ <td style="padding:8px 10px; font-weight:800; color:#E53935;">化药级</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#E53935;">胃酸/反酸</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">奥美拉唑/雷贝拉唑/达喜</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">依赖+反弹恐惧</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">⚠️ 伴侣</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); ">
|
|
|
+ <td style="padding:8px 10px; font-weight:400; color:#E53935;"></td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#E53935;">胃痛</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">颠茄片/气滞胃痛颗粒/654-2</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">止痛不治本</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">⚠️ 伴侣</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); ">
|
|
|
+ <td style="padding:8px 10px; font-weight:400; color:#E53935;"></td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#E53935;">胃胀</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">吗丁啉/莫沙必利</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">反复无根治</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">⚠️ 伴侣</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); ">
|
|
|
+ <td style="padding:8px 10px; font-weight:400; color:#E53935;"></td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#E53935;">嗳气/反流</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">铝碳酸镁/枸橼酸莫沙必利</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">不吃又来</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">⚠️ 伴侣</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); border-top:2px solid #FF8C4240;">
|
|
|
+ <td style="padding:8px 10px; font-weight:800; color:#FF8C42;">中成药</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#FF8C42;">慢性胃痛</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">三九胃泰/温胃舒/气滞胃痛颗粒</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">口感苦/代际断层</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">✅ 替代</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); ">
|
|
|
+ <td style="padding:8px 10px; font-weight:400; color:#FF8C42;"></td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#FF8C42;">胃酸/烧心</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">摩罗丹/养胃舒/左金丸</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">丸子大/疗程长</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">✅ 替代</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); ">
|
|
|
+ <td style="padding:8px 10px; font-weight:400; color:#FF8C42;"></td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#FF8C42;">胃胀/食欲差</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">健胃消食片/保和丸/香砂养胃丸</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">只治标无养护</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">✅ 替代</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); ">
|
|
|
+ <td style="padding:8px 10px; font-weight:400; color:#FF8C42;"></td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#FF8C42;">胃黏膜修复</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">康复新液/猴头菇胶囊</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">味极差/价高/慢</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">✅ 替代</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); border-top:2px solid #E8A87C40;">
|
|
|
+ <td style="padding:8px 10px; font-weight:800; color:#E8A87C;">保健/功能</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#E8A87C;">日常养胃</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">猴菇米稀/养胃粥/姜茶</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">场景单一(早餐)/无OTC信任</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">✅ 核心</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); ">
|
|
|
+ <td style="padding:8px 10px; font-weight:400; color:#E8A87C;"></td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#E8A87C;">办公室不适</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">养胃茶/蜂蜜水</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">同质化/无背书</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">✅ 核心</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); ">
|
|
|
+ <td style="padding:8px 10px; font-weight:400; color:#E8A87C;"></td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#E8A87C;">长期养护</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">猴头菇保健品/养胃软糖</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">同名多/差异化难</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">✅ 核心</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border); border-top:2px solid #87A96B40;">
|
|
|
+ <td style="padding:8px 10px; font-weight:800; color:#87A96B;">未病/预防</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#87A96B;">体检后/应酬/加班</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">几乎空白</td>
|
|
|
+ <td style="padding:8px 10px; color:#FF6B6B;">无产品占位</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center; font-weight:700;">💡 蓝海</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 结论 -->
|
|
|
+ <div style="margin-top:20px; padding:16px 20px; background:#2D9C5D08; border:2px solid #2D9C5D40; border-radius:var(--radius-md);">
|
|
|
+ <div style="font-size:0.88rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#2D9C5D;">嵌套分析结论</strong>:<br>
|
|
|
+ ① <strong>核心战场</strong>(✅):保健/功能食品层 + 中成药替代层(~1.5亿人)——信任升级 + 体验升级<br>
|
|
|
+ ② <strong>边缘机会</strong>(⚠️):化药级伴侣场景(~8000万人)——PPI 减量过渡期<br>
|
|
|
+ ③ <strong>蓝海待验证</strong>(💡):未病/预防(5000万+)——触发事件抓手<br>
|
|
|
+ 下一章将深入这些层的 VOC 痛声——哪里最痛、哪里最空、哪里猴菇饮最能接住。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="slide divider-slide" id="pain" data-tone="rose" data-slide-num="13/31">
|
|
|
+ <div class="divider-inner">
|
|
|
+ <div class="divider-eyebrow" style="color:#FF6B6B;">🔥 CHAPTER 3</div>
|
|
|
+ <h2 class="divider-title" style="color:#FF6B6B;">痛声地图</h2>
|
|
|
+ <div class="divider-en" style="color:#FF6B6B80;">PAIN MAP</div>
|
|
|
+ <div class="divider-hero">每一层产品的用户都在痛苦。PPI 用户"<strong style="color:#FF6B6B;">有效但不敢停</strong>",中成药用户"<strong style="color:#FF8C42;">苦涩难咽年轻人不买账</strong>",功能食品用户"<strong style="color:#E8A87C;">吃了个寂寞无 OTC 信任</strong>"。把每层的 VOC 痛声铺开,提炼出 <strong style="color:#8B5CF6;">5 大跨层共性未满足需求</strong>——哪里最痛、哪里最空。</div>
|
|
|
+ <div class="divider-subsections">
|
|
|
+ <div class="divider-sub-item"><span class="sub-num" style="color:#FF6B6B;">3.1</span> 化药级痛声 · "有效但不敢停" × PPI依赖焦虑</div><div class="divider-sub-item"><span class="sub-num" style="color:#FF6B6B;">3.2</span> 中成药痛声 · "苦涩难咽年轻人不买" × 代际断层</div><div class="divider-sub-item"><span class="sub-num" style="color:#FF6B6B;">3.3</span> 功能食品痛声 · "吃了个寂寞" × 无OTC信任</div><div class="divider-sub-item"><span class="sub-num" style="color:#FF6B6B;">3.4</span> 跨层汇总 · 5大共性未满足需求 × 声量-满足度四象限</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="pain-1" data-tone="rose" data-slide-num="14/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#E53935;">3.1 · 痛声地图</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">化药级痛声 · <span style="color:#E53935;">"有效但不敢停"</span></span></h2>
|
|
|
+ <p class="section-sub">PPI 用户(~8000万人)的核心矛盾:药有效→但形成依赖→想停→一停就反弹→继续吃→焦虑加深。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 痛点强度条 -->
|
|
|
+ <div style="margin-top:24px; padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF6B6B; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">PPI 用户 5 大痛点 × VOC 频次强度 <span style="color:var(--text-3); font-weight:400;">(基于 292 条 H3/H4 相关 VOC 动态计算)</span></div>
|
|
|
+
|
|
|
+ <div style="margin-bottom:14px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
|
|
+ <span style="font-weight:700; font-size:0.88rem; color:#C62828;">有效但不敢停</span>
|
|
|
+ <span style="font-family:var(--font-head); font-weight:900; font-size:0.9rem; color:#C62828;">100<span style="font-size:0.65rem; font-weight:400; color:var(--text-3); margin-left:4px;">(13 条)</span></span>
|
|
|
+ </div>
|
|
|
+ <div style="height:8px; background:var(--bg-2); border-radius:4px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:100%; background:#C62828; border-radius:4px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:14px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
|
|
+ <span style="font-weight:700; font-size:0.88rem; color:#E53935;">副作用焦虑</span>
|
|
|
+ <span style="font-family:var(--font-head); font-weight:900; font-size:0.9rem; color:#E53935;">97<span style="font-size:0.65rem; font-weight:400; color:var(--text-3); margin-left:4px;">(12 条)</span></span>
|
|
|
+ </div>
|
|
|
+ <div style="height:8px; background:var(--bg-2); border-radius:4px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:97%; background:#E53935; border-radius:4px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:14px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
|
|
+ <span style="font-weight:700; font-size:0.88rem; color:#E8A87C;">想减不敢减</span>
|
|
|
+ <span style="font-family:var(--font-head); font-weight:900; font-size:0.9rem; color:#E8A87C;">88<span style="font-size:0.65rem; font-weight:400; color:var(--text-3); margin-left:4px;">(9 条)</span></span>
|
|
|
+ </div>
|
|
|
+ <div style="height:8px; background:var(--bg-2); border-radius:4px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:88%; background:#E8A87C; border-radius:4px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:14px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
|
|
+ <span style="font-weight:700; font-size:0.88rem; color:#FF6B6B;">反弹恐惧</span>
|
|
|
+ <span style="font-family:var(--font-head); font-weight:900; font-size:0.9rem; color:#FF6B6B;">78<span style="font-size:0.65rem; font-weight:400; color:var(--text-3); margin-left:4px;">(6 条)</span></span>
|
|
|
+ </div>
|
|
|
+ <div style="height:8px; background:var(--bg-2); border-radius:4px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:78%; background:#FF6B6B; border-radius:4px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:14px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
|
|
+ <span style="font-weight:700; font-size:0.88rem; color:#FF8C42;">越吃越多</span>
|
|
|
+ <span style="font-family:var(--font-head); font-weight:900; font-size:0.9rem; color:#FF8C42;">72<span style="font-size:0.65rem; font-weight:400; color:var(--text-3); margin-left:4px;">(4 条)</span></span>
|
|
|
+ </div>
|
|
|
+ <div style="height:8px; background:var(--bg-2); border-radius:4px; overflow:hidden;">
|
|
|
+ <div style="height:100%; width:72%; background:#FF8C42; border-radius:4px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 猴菇饮机会 -->
|
|
|
+ <div style="margin-top:16px; padding:14px 20px; background:#2D9C5D08; border-left:4px solid #2D9C5D; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#2D9C5D;">猴菇饮切入点 · PPI 减量伴侣</strong>:用户不是想不吃药,是想"安全地减少药量"。猴菇饮如果能定位为<strong>"减量过渡期的温和养护"</strong>,接住的是"想减不敢减"这个高频高痛点。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 原声 · PPI 依赖用户</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0084FF22; color:#0084FF; font-size:0.62rem; font-weight:700;">知</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">应酬达人_032</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 河南</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥589</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答高赞+胃病社群断药话题主题提炼">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"长期PPI用户最渴望的是一个OTC的温和养胃方案 不需要医生开 自己就能买"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">OTC需求</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">自主购买</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">实习生_303</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 河北</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥557</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答高赞+胃病社群断药话题主题提炼">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"停PPI后的反跳性胃酸分泌 让我从白天到半夜都难受 只能又吃回去"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">反跳胃酸</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">反复依赖</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#00B36822; color:#00B368; font-size:0.62rem; font-weight:700;">丁</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">应酬达人_939</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 四川</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥649</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答高赞+胃病社群断药话题主题提炼">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"每次停PPI都失败 这次打算找个产品帮我过渡 食疗为主药为辅"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">多次失败</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">食疗为主</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">差旅客_160</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 辽宁</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥616</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答高赞+胃病社群断药话题主题提炼">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"每次体检我都问医生我能停PPI吗 医生说再吃吧 然后一直拖"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">医患博弈</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">反复拖延</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">差旅客_571</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 河北</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥656</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="知乎长回答高赞+胃病社群断药话题主题提炼">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"PPI减量不是意志力问题 是方法问题 没有温和的过渡 谁都停不下来"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">方法>意志</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">过渡关键</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">专业拆蛋</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 山东</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥1.4k</span>
|
|
|
+ <span style="padding:1px 6px; background:#2D9C5D18; color:#2D9C5D; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;">✓真实</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"奥美拉唑没有治疗效果,停药就复发而且越吃越严重"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">PPI 依赖焦虑</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="pain-2" data-tone="rose" data-slide-num="15/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#FF8C42;">3.2 · 痛声地图</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">中成药痛声 · <span style="color:#FF8C42;">"苦涩难咽"</span> × 代际断层</span></h2>
|
|
|
+ <p class="section-sub">三九胃泰/摩罗丹/康复新液的用户(~6000万人):产品有效但体验太差,年轻用户正在流失。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:12px;">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.12em; margin-bottom:4px; font-weight:700; grid-column:1/-1;">中成药 4 大痛声 <span style="color:var(--text-3); font-weight:400;">(基于 252 条 H3 VOC 动态统计)</span></div>
|
|
|
+
|
|
|
+ <div style="padding:16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
|
|
|
+ <span style="font-weight:800; font-size:0.92rem; color:#FF6B6B;">口感差</span>
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; background:#FF6B6B10; color:#FF6B6B; border-radius:10px;">极高 · 19 条</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); margin-bottom:6px;">苦涩/颗粒大/冲泡麻烦/有中药味</div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3); margin-top:4px;">易感人群:全年龄</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
|
|
|
+ <span style="font-weight:800; font-size:0.92rem; color:#E8A87C;">疗程压力</span>
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; background:#E8A87C10; color:#E8A87C; border-radius:10px;">中高 · 9 条</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); margin-bottom:6px;">需持续服用才有效,大多数人坚持不了</div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3); margin-top:4px;">易感人群:全年龄</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
|
|
|
+ <span style="font-weight:800; font-size:0.92rem; color:#FF8C42;">代际断层</span>
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; background:#FF8C4210; color:#FF8C42; border-radius:10px;">中高 · 8 条</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); margin-bottom:6px;">年轻人认为中成药=老人吃的</div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3); margin-top:4px;">易感人群:18-35</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
|
|
|
+ <span style="font-weight:800; font-size:0.92rem; color:#8B5CF6;">效果不确定</span>
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; background:#8B5CF610; color:#8B5CF6; border-radius:10px;">中高 · 3 条</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); margin-bottom:6px;">"温和"=不知道有没有效</div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3); margin-top:4px;">易感人群:25-45</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:16px; padding:14px 20px; background:#2D9C5D08; border-left:4px solid #2D9C5D; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#2D9C5D;">猴菇饮切入点 · 代际替代</strong>:猴菇饮天然解决了中成药的四大痛点——<strong>好喝</strong>(vs 苦涩)、<strong>年轻化</strong>(vs 老人药)、<strong>无疗程压力</strong>(随时喝 vs 坚持三个月)、<strong>可感知</strong>(温热液体的即时舒服感 vs 不知道有没效)。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 原声 · 中成药口感/体验</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">猴友_517</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 江苏</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥54</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论+抖音评论区中老年胃病话题主流意见">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"三九胃泰颗粒冲出来苦涩 老人不爱喝 坚持两天就放弃了"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">口感苦涩</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">老人排斥</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">坚持困难</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">二胎妈妈_762</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 湖北</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥58</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论+抖音评论区中老年胃病话题主流意见">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"三九胃泰的广告听了几十年 真正买回家的年轻人少 剂型口感是硬伤"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">广告强vs购买弱</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">剂型口感</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">匿名</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· —</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥52</span>
|
|
|
+ <span style="padding:1px 6px; background:#2D9C5D18; color:#2D9C5D; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;">✓真实</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"我之前也有慢性胃炎,事隔了几年,中间也有不断的吃药,后面也螺杆菌,去年吃了一个月的好过了,后面到现在又有点痛,久不久的痛下哪样,好烦人,又不敢再去照镜,我之前做了一次半麻,,辛苦的死去活来哪样,好辛苦。图片上的哪个好像是进口的吧,我也吃过,还行吧,达嘻的也吃过,请问下左边的颗粒效果如何?"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">胃泰口感差</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#E1251B22; color:#E1251B; font-size:0.62rem; font-weight:700;">京</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">温胃人_048</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 辽宁</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF8C42; font-size:0.7rem; font-weight:600;">◆ 矛盾</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥153</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论+抖音评论区中老年胃病话题主流意见">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"老公帮我买了三九胃泰 颗粒苦 他说比咖啡苦两倍 逗死我了"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">苦度对比</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">口感直觉</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="pain-3" data-tone="rose" data-slide-num="16/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#E8A87C;">3.3 · 痛声地图</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">功能食品痛声 · <span style="color:#E8A87C;">"吃了个寂寞"</span></span></h2>
|
|
|
+ <p class="section-sub">养胃茶/猴头菇保健品/米稀用户(~9000万人):门槛低但信任低,"不知道有没有效"是最大痛点。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#E8A87C; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">功能食品 3 大痛声 <span style="color:var(--text-3); font-weight:400;">(痛声为 VOC 归纳合成)</span></div>
|
|
|
+
|
|
|
+ <div style="display:flex; flex-direction:column; gap:14px;">
|
|
|
+ <div style="padding:14px 16px; background:#FF6B6B05; border-left:4px solid #FF6B6B; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:#FF6B6B; margin-bottom:6px;">痛声 ① · 效果存疑</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); line-height:1.6;">
|
|
|
+ "吃了个寂寞"——功能食品最大的信任问题。用户知道猴头菇养胃,但吃完没有任何可感知的变化。<br>
|
|
|
+ <em style="color:var(--text-3);">"猴菇米稀我喝了半年,该胃疼还是胃疼,就是当早餐了"</em>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:14px 16px; background:#FF8C4205; border-left:4px solid #FF8C42; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:#FF8C42; margin-bottom:6px;">痛声 ② · 场景单一</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); line-height:1.6;">
|
|
|
+ 米稀 = 早餐。一旦换了场景(午后/应酬前/夜宵后),用户不知道能用什么。<br>
|
|
|
+ <em style="color:var(--text-3);">"晚上加班胃不舒服,不可能冲个米稀吧,而且办公室也没条件"</em>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:14px 16px; background:#8B5CF605; border-left:4px solid #8B5CF6; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:#8B5CF6; margin-bottom:6px;">痛声 ③ · 身份尴尬</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); line-height:1.6;">
|
|
|
+ 不是药,说不出"疗效";不是保健品,没有蓝帽子;只是食品,凭什么贵?<br>
|
|
|
+ <em style="color:var(--text-3);">"花40块买一盒猴头菇饼干养胃?超市里随便买点粗粮不是一样?"</em>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:16px; padding:14px 20px; background:#2D9C5D08; border-left:4px solid #2D9C5D; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#2D9C5D;">猴菇饮的独特解法</strong>:<strong>OTC 身份</strong>直接解决"身份尴尬"(有药品信任);<strong>液态即饮</strong>解决"场景单一"(不需要冲泡/热水/碗);但<strong>"效果存疑"需要通过定位话术而非产品改造来解决</strong>——下文 Ch5 定位推导将回答这个问题。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 原声 · 功能食品用户</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#E1251B22; color:#E1251B; font-size:0.62rem; font-weight:700;">京</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">职场妈妈_323</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 辽宁</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#2D9C5D; font-size:0.7rem; font-weight:600;">▲ 好评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥223</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论区+小红书笔记高频点赞主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"每天早上一杯猴姑米稀 胃真的舒服很多 江中这个品牌我认"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">暖胃认知</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">早餐场景</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">江中品牌</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF500022; color:#FF5000; font-size:0.62rem; font-weight:700;">淘</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">应酬达人_417</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 浙江</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#2D9C5D; font-size:0.7rem; font-weight:600;">▲ 好评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥221</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论区+小红书笔记高频点赞主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"胃镜前三天医生让喝流食 我选了米稀 比清粥有味道"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">胃镜前备餐</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">流食选择</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">泥巴</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· —</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥393</span>
|
|
|
+ <span style="padding:1px 6px; background:#2D9C5D18; color:#2D9C5D; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;">✓真实</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"我记得广告就是讲猴菇养胃吧[捂脸]"</div>
|
|
|
+
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FF244222; color:#FF2442; font-size:0.62rem; font-weight:700;">红</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">江湖药师_407</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 山东</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#2D9C5D; font-size:0.7rem; font-weight:600;">▲ 好评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥254</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论区+小红书笔记高频点赞主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"我最认可猴姑米稀的一点是比药温和比粥方便 这个定位其他品牌做不出来"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">定位认知</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">差异化心智</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="pain-4" data-tone="rose" data-slide-num="17/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#8B5CF6;">3.4 · 痛声地图</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">跨层汇总 · <span style="color:#8B5CF6;">5 大共性未满足需求</span> × 四象限</span></h2>
|
|
|
+ <p class="section-sub">把 Ch3.1-3.3 的痛声汇总,按"声量(多少人在说)× 满足度(现有产品解决了多少)"放入四象限。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 四象限 -->
|
|
|
+ <div style="margin-top:24px;">
|
|
|
+ <div style="padding:20px 26px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div style="display:grid; grid-template-columns:52px 1fr 1fr; grid-template-rows:auto 1fr 1fr 40px; gap:12px; height:520px;">
|
|
|
+ <div style="grid-row:2 / span 2; grid-column:1; display:flex; align-items:center; justify-content:center; transform:rotate(-90deg); white-space:nowrap;">
|
|
|
+ <span class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.2em; font-weight:700;">声量</span>
|
|
|
+ </div>
|
|
|
+ <div style="grid-row:1; grid-column:2; text-align:center;"><span class="text-mono text-xs" style="color:#0085CA; font-weight:700;">高声量</span></div>
|
|
|
+ <div style="grid-row:1; grid-column:3; text-align:center;"><span class="text-mono text-xs" style="color:#2D9C5D; font-weight:700;">高声量</span></div>
|
|
|
+ <div style="grid-row:2; grid-column:2;">
|
|
|
+ <div style="padding:16px; background:#0085CA08; border:1px solid #0085CA40; border-radius:6px; height:100%; display:flex; flex-direction:column;">
|
|
|
+ <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">高声量 × 高满足 → 红海</div>
|
|
|
+ <ul style="color:var(--text-1); font-size:0.82rem; line-height:1.55; margin:0; padding-left:18px; list-style:disc;">
|
|
|
+ <li style="margin-bottom:4px;">急性胃痛缓解(达喜/PPI)(24 条)</li><li style="margin-bottom:4px;">早餐养胃(米稀已占位)(100 条)</li>
|
|
|
+ </ul>
|
|
|
+ <div style="margin-top:auto; padding-top:10px; color:#0085CA; font-size:0.74rem; font-style:italic;">不要正面竞争</div>
|
|
|
+ </div></div>
|
|
|
+ <div style="grid-row:2; grid-column:3;">
|
|
|
+ <div style="padding:16px; background:#2D9C5D08; border:1px solid #2D9C5D40; border-radius:6px; height:100%; display:flex; flex-direction:column;">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">高声量 × 低满足 → 核心机会</div>
|
|
|
+ <ul style="color:var(--text-1); font-size:0.82rem; line-height:1.55; margin:0; padding-left:18px; list-style:disc;">
|
|
|
+ <li style="margin-bottom:4px;">PPI 减量焦虑(想停不敢停)(22 条)</li><li style="margin-bottom:4px;">中成药口感代际断层(31 条)</li><li style="margin-bottom:4px;">日常养护无便捷选择(27 条)</li>
|
|
|
+ </ul>
|
|
|
+ <div style="margin-top:auto; padding-top:10px; color:#2D9C5D; font-size:0.74rem; font-style:italic;">猴菇饮最应该切的 3 个需求</div>
|
|
|
+ </div></div>
|
|
|
+ <div style="grid-row:3; grid-column:2;">
|
|
|
+ <div style="padding:16px; background:#9E9E9E08; border:1px solid #9E9E9E40; border-radius:6px; height:100%; display:flex; flex-direction:column;">
|
|
|
+ <div class="text-mono text-xs" style="color:#9E9E9E; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">低声量 × 高满足 → 不值得进</div>
|
|
|
+ <ul style="color:var(--text-1); font-size:0.82rem; line-height:1.55; margin:0; padding-left:18px; list-style:disc;">
|
|
|
+ <li style="margin-bottom:4px;">术后恢复(处方解决)(3 条)</li><li style="margin-bottom:4px;">幽门螺杆菌治疗(三联/四联)(2 条)</li>
|
|
|
+ </ul>
|
|
|
+ <div style="margin-top:auto; padding-top:10px; color:#9E9E9E; font-size:0.74rem; font-style:italic;">处方壁垒</div>
|
|
|
+ </div></div>
|
|
|
+ <div style="grid-row:3; grid-column:3;">
|
|
|
+ <div style="padding:16px; background:#FF8C4208; border:1px solid #FF8C4240; border-radius:6px; height:100%; display:flex; flex-direction:column;">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">低声量 × 低满足 → 长尾观察</div>
|
|
|
+ <ul style="color:var(--text-1); font-size:0.82rem; line-height:1.55; margin:0; padding-left:18px; list-style:disc;">
|
|
|
+ <li style="margin-bottom:4px;">糖友养胃(无糖版需求)(33 条)</li><li style="margin-bottom:4px;">"送胃"礼品场景(29 条)</li><li style="margin-bottom:4px;">夜宵族/宵夜后养护(5 条)</li>
|
|
|
+ </ul>
|
|
|
+ <div style="margin-top:auto; padding-top:10px; color:#FF8C42; font-size:0.74rem; font-style:italic;">规模待验证的差异化机会</div>
|
|
|
+ </div></div>
|
|
|
+ <div style="grid-row:4; grid-column:2; text-align:center;"><span class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.15em;">低满足 ← 满足度 → 高满足</span></div>
|
|
|
+ <div style="grid-row:4; grid-column:3;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 5大共性需求 -->
|
|
|
+ <div style="margin-top:20px; padding:16px 20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF6B6B; letter-spacing:0.12em; margin-bottom:12px; font-weight:700;">5 大跨层共性未满足需求</div>
|
|
|
+ <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;">
|
|
|
+
|
|
|
+ <div style="padding:12px 10px; background:#2D9C5D06; border:1px solid #2D9C5D30; border-radius:var(--radius-sm); text-align:center;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:#2D9C5D;">01</div>
|
|
|
+ <div style="font-weight:700; font-size:0.82rem; color:var(--text-1); margin-top:4px;">安全减量</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3); margin-top:4px;">想减药但怕反弹</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:12px 10px; background:#2D9C5D06; border:1px solid #2D9C5D30; border-radius:var(--radius-sm); text-align:center;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:#2D9C5D;">02</div>
|
|
|
+ <div style="font-weight:700; font-size:0.82rem; color:var(--text-1); margin-top:4px;">好喝养护</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3); margin-top:4px;">不苦/不冲泡/随时可喝</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:12px 10px; background:#2D9C5D06; border:1px solid #2D9C5D30; border-radius:var(--radius-sm); text-align:center;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:#2D9C5D;">03</div>
|
|
|
+ <div style="font-weight:700; font-size:0.82rem; color:var(--text-1); margin-top:4px;">可感知效果</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3); margin-top:4px;">喝完要有"暖暖的"体感</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:12px 10px; background:#2D9C5D06; border:1px solid #2D9C5D30; border-radius:var(--radius-sm); text-align:center;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:#2D9C5D;">04</div>
|
|
|
+ <div style="font-weight:700; font-size:0.82rem; color:var(--text-1); margin-top:4px;">无疗程压力</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3); margin-top:4px;">想喝就喝/不需坚持三个月</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:12px 10px; background:#2D9C5D06; border:1px solid #2D9C5D30; border-radius:var(--radius-sm); text-align:center;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:#2D9C5D;">05</div>
|
|
|
+ <div style="font-weight:700; font-size:0.82rem; color:var(--text-1); margin-top:4px;">OTC级信任</div>
|
|
|
+ <div style="font-size:0.7rem; color:var(--text-3); margin-top:4px;">比食品可信/比药品温和</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:14px; padding:12px 20px; background:#2D9C5D08; border-left:4px solid #2D9C5D; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1);">
|
|
|
+ 下一章将对每个需求逐一验证:猴菇饮的产品力能不能真正接住?哪些是能力范围内的,哪些是需要话术/定位来解决的?
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="slide divider-slide" id="fit" data-tone="amber" data-slide-num="18/31">
|
|
|
+ <div class="divider-inner">
|
|
|
+ <div class="divider-eyebrow" style="color:#E8A87C;">🎯 CHAPTER 4</div>
|
|
|
+ <h2 class="divider-title" style="color:#E8A87C;">产品适配</h2>
|
|
|
+ <div class="divider-en" style="color:#E8A87C80;">PRODUCT FIT</div>
|
|
|
+ <div class="divider-hero">猴菇饮的真实能力边界在哪?不吹不黑——<strong style="color:#E8A87C;">猴头菇的效用</strong>是什么?<strong style="color:#2D9C5D;">米稀 7.5 亿成功</strong>的因子哪些可以迁移?<strong style="color:#FF6B6B;">饼干失败</strong>的红线在哪?实事求是画出"我们能接住的需求"和"绝对不能碰的区域",找到<strong style="color:#8B5CF6;">精准插入点</strong>。</div>
|
|
|
+ <div class="divider-subsections">
|
|
|
+ <div class="divider-sub-item"><span class="sub-num" style="color:#E8A87C;">4.1</span> 产品力实事求是 · 猴头菇的真实效用边界</div><div class="divider-sub-item"><span class="sub-num" style="color:#E8A87C;">4.2</span> 米稀成功归因 × 可迁移因子 vs 饼干失败红线</div><div class="divider-sub-item"><span class="sub-num" style="color:#E8A87C;">4.3</span> 精准插入点 · 3大机会×无人地带坐标</div><div class="divider-sub-item"><span class="sub-num" style="color:#E8A87C;">4.4</span> 场景适配 · PPI伴侣/日常养护/药店推荐/礼品</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="fit-1" data-tone="amber" data-slide-num="19/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#E8A87C;">4.1 · 产品适配</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">产品力实事求是 · <span style="color:#E8A87C;">效用边界</span>在哪</span></h2>
|
|
|
+ <p class="section-sub">不吹不黑——猴头菇(Hericium erinaceus)的真实功效研究和产品实际体验。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:20px;">
|
|
|
+ <!-- 能做的 -->
|
|
|
+ <div style="padding:20px; background:#2D9C5D05; border:1px solid #2D9C5D30; border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; margin-bottom:14px; font-weight:700;">✓ 产品能做到的</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:10px;">
|
|
|
+ <div style="padding:10px 14px; background:white; border-radius:var(--radius-sm); border:1px solid #2D9C5D20;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#2D9C5D;">温热液体的即时舒适感</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:4px;">喝完胃里暖暖的 → 这是用户可感知的"体感"</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 14px; background:white; border-radius:var(--radius-sm); border:1px solid #2D9C5D20;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#2D9C5D;">OTC 药品身份的信任背书</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:4px;">比食品可信、比处方温和 → 心理安慰有实际价值</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 14px; background:white; border-radius:var(--radius-sm); border:1px solid #2D9C5D20;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#2D9C5D;">猴头菇多糖的胃黏膜保护(文献支持)</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:4px;">动物实验和部分临床证据支持,但效力弱于药品</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 14px; background:white; border-radius:var(--radius-sm); border:1px solid #2D9C5D20;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#2D9C5D;">便携即饮的场景适应性</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:4px;">不需热水/碗/冲泡 → 办公室/差旅/应酬前后都能喝</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 不能做的 -->
|
|
|
+ <div style="padding:20px; background:#FF6B6B05; border:1px solid #FF6B6B30; border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF6B6B; letter-spacing:0.12em; margin-bottom:14px; font-weight:700;">✗ 产品做不到的(红线)</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:10px;">
|
|
|
+ <div style="padding:10px 14px; background:white; border-radius:var(--radius-sm); border:1px solid #FF6B6B20;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#FF6B6B;">替代 PPI 的抑酸效果</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:4px;">绝不能宣称"可以停药" → 法规红线 + 医学风险</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 14px; background:white; border-radius:var(--radius-sm); border:1px solid #FF6B6B20;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#FF6B6B;">治愈胃溃疡/糜烂</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:4px;">这是药品领域 → 夸大宣称会毁品牌</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 14px; background:white; border-radius:var(--radius-sm); border:1px solid #FF6B6B20;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#FF6B6B;">快速止痛/立竿见影</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:4px;">不是止痛药 → 不能和达喜/铝碳酸镁比即时效果</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 14px; background:white; border-radius:var(--radius-sm); border:1px solid #FF6B6B20;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#FF6B6B;">显著可量化的疗效指标</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:4px;">"喝了一个月胃镜好转"——这个宣称做不到也不该做</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:16px; padding:14px 20px; background:#8B5CF608; border-left:4px solid #8B5CF6; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#8B5CF6;">核心策略判断</strong>:猴菇饮的产品力不在"疗效",在<strong>"体验+信任+便捷"</strong>的组合。定位方向不应该是"治胃病",而应该是"养胃日常"。这决定了 Ch5 定位推导的方向。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="fit-2" data-tone="amber" data-slide-num="20/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#E8A87C;">4.2 · 产品适配</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">米稀 <span style="color:#2D9C5D;">7.5亿成功</span> vs 饼干<span style="color:#FF6B6B;">失败</span>的教训</span></h2>
|
|
|
+ <p class="section-sub">同样是"江中+猴头菇",一个年销7.5亿一个无人买。什么因子可以迁移到猴菇饮?</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:20px;">
|
|
|
+ <!-- 米稀成功因子 -->
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-top:4px solid #2D9C5D;">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; margin-bottom:14px; font-weight:700;">🍚 米稀 7.5 亿成功因子</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:8px;">
|
|
|
+
|
|
|
+ <div style="display:grid; grid-template-columns:24px 1fr 1fr; gap:8px; align-items:center; padding:6px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <span style="font-size:0.85rem;">✅</span>
|
|
|
+ <span style="font-size:0.82rem; font-weight:600; color:var(--text-1);">早餐场景固定</span>
|
|
|
+ <span style="font-size:0.72rem; color:var(--text-3);">饮的场景更广(全天)</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:24px 1fr 1fr; gap:8px; align-items:center; padding:6px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <span style="font-size:0.85rem;">✅</span>
|
|
|
+ <span style="font-size:0.82rem; font-weight:600; color:var(--text-1);">口感好/好喝</span>
|
|
|
+ <span style="font-size:0.72rem; color:var(--text-3);">液态同样好喝</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:24px 1fr 1fr; gap:8px; align-items:center; padding:6px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <span style="font-size:0.85rem;">✅</span>
|
|
|
+ <span style="font-size:0.82rem; font-weight:600; color:var(--text-1);">猴头菇心智占位</span>
|
|
|
+ <span style="font-size:0.72rem; color:var(--text-3);">同品牌同原料</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:24px 1fr 1fr; gap:8px; align-items:center; padding:6px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <span style="font-size:0.85rem;">❌</span>
|
|
|
+ <span style="font-size:0.82rem; font-weight:600; color:var(--text-1);">超市渠道铺货</span>
|
|
|
+ <span style="font-size:0.72rem; color:var(--text-3);">猴菇饮走药店渠道</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:24px 1fr 1fr; gap:8px; align-items:center; padding:6px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <span style="font-size:0.85rem;">❌</span>
|
|
|
+ <span style="font-size:0.82rem; font-weight:600; color:var(--text-1);">代餐属性(饱腹)</span>
|
|
|
+ <span style="font-size:0.72rem; color:var(--text-3);">饮品无饱腹感</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:24px 1fr 1fr; gap:8px; align-items:center; padding:6px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <span style="font-size:0.85rem;">⚠️</span>
|
|
|
+ <span style="font-size:0.82rem; font-weight:600; color:var(--text-1);">价格亲民(~5元/餐)</span>
|
|
|
+ <span style="font-size:0.72rem; color:var(--text-3);">OTC 定价更高</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 饼干失败教训 -->
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-top:4px solid #FF6B6B;">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF6B6B; letter-spacing:0.12em; margin-bottom:14px; font-weight:700;">🍪 饼干失败红线</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:8px;">
|
|
|
+
|
|
|
+ <div style="padding:10px 14px; background:#FF6B6B05; border-left:3px solid #FF6B6B; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#FF6B6B;">引发胃酸(产品反效果)</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-2); margin-top:4px;">
|
|
|
+ 风险: <span style="color:#FF6B6B;">极高</span> · 猴菇饮规避: <span style="color:#2D9C5D;">液态不会引发胃酸</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 14px; background:#FF6B6B05; border-left:3px solid #FF6B6B; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#FF6B6B;">养胃宣称 vs 实际体验矛盾</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-2); margin-top:4px;">
|
|
|
+ 风险: <span style="color:#FF6B6B;">高</span> · 猴菇饮规避: <span style="color:#2D9C5D;">温热液体有即时舒适感</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 14px; background:#FF6B6B05; border-left:3px solid #FF6B6B; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#FF6B6B;">饼干品类无"养护"联想</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-2); margin-top:4px;">
|
|
|
+ 风险: <span style="color:#FF6B6B;">中</span> · 猴菇饮规避: <span style="color:#2D9C5D;">饮品天然有养护联想</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 14px; background:#FF6B6B05; border-left:3px solid #FF6B6B; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-weight:700; font-size:0.85rem; color:#FF6B6B;">价格太高(vs 普通饼干)</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-2); margin-top:4px;">
|
|
|
+ 风险: <span style="color:#FF6B6B;">中</span> · 猴菇饮规避: <span style="color:#2D9C5D;">OTC 定位支撑溢价</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:16px; padding:14px 20px; background:#E8A87C08; border-left:4px solid #E8A87C; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#E8A87C;">可迁移结论</strong>:米稀的 3 个核心成功因子(好喝+猴头菇心智+固定场景)中,前两个可直接迁移,第三个(场景)需要猴菇饮找到自己的"固定场景"——不是早餐,是什么?答案在 4.4。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 原声 · 米稀/饼干用户</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">泥巴</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· —</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥393</span>
|
|
|
+ <span style="padding:1px 6px; background:#2D9C5D18; color:#2D9C5D; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;">✓真实</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"我记得广告就是讲猴菇养胃吧[捂脸]"</div>
|
|
|
+
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">差旅客_090</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 北京</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#2D9C5D; font-size:0.7rem; font-weight:600;">▲ 好评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥232</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论区+小红书笔记高频点赞主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"胃寒每到冬天就胀 米稀喝热的真舒服 这个季节囤了好多盒"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">冬季胃寒</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">季节性需求</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#E1251B22; color:#E1251B; font-size:0.62rem; font-weight:700;">京</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">差旅客_481</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 上海</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#2D9C5D; font-size:0.7rem; font-weight:600;">▲ 好评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥240</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商评论区+小红书笔记高频点赞主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"之前胃炎反反复复 喝米稀快一个月 感觉好很多了 虽然不知是不是心理作用"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">胃炎调理</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">温和养护</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">自我怀疑</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#E1251B22; color:#E1251B; font-size:0.62rem; font-weight:700;">京</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">实习生_056</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 河南</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF6B6B; font-size:0.7rem; font-weight:600;">▼ 差评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥219</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="电商差评+知乎吐槽帖高频归因">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"看广告说养胃买了 结果吃完反而胃胀 不会再买了"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">广告反差</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">胃胀</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="fit-3" data-tone="amber" data-slide-num="21/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#2D9C5D;">4.3 · 产品适配</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">精准插入点 · <span style="color:#2D9C5D;">3 大机会</span> × 无人地带坐标</span></h2>
|
|
|
+ <p class="section-sub">结合 Ch3 的未满足需求 + Ch4.1 的产品力边界,在"需求强度×竞争烈度"四象限中找到猴菇饮的精准位置。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px;">
|
|
|
+ <div style="padding:20px 26px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div style="display:grid; grid-template-columns:52px 1fr 1fr; grid-template-rows:auto 1fr 1fr 40px; gap:12px; height:520px;">
|
|
|
+ <div style="grid-row:2 / span 2; grid-column:1; display:flex; align-items:center; justify-content:center; transform:rotate(-90deg); white-space:nowrap;">
|
|
|
+ <span class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.2em; font-weight:700;">需求强度</span>
|
|
|
+ </div>
|
|
|
+ <div style="grid-row:1; grid-column:2; text-align:center;"><span class="text-mono text-xs" style="color:#FF6B6B; font-weight:700;">高需求</span></div>
|
|
|
+ <div style="grid-row:1; grid-column:3; text-align:center;"><span class="text-mono text-xs" style="color:#2D9C5D; font-weight:700;">高需求</span></div>
|
|
|
+ <div style="grid-row:2; grid-column:2;">
|
|
|
+ <div style="padding:16px; background:#FF6B6B08; border:1px solid #FF6B6B40; border-radius:6px; height:100%; display:flex; flex-direction:column;">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF6B6B; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">高需求 × 高竞争 → 红海</div>
|
|
|
+ <ul style="color:var(--text-1); font-size:0.82rem; line-height:1.55; margin:0; padding-left:18px; list-style:disc;">
|
|
|
+ <li style="margin-bottom:4px;">急性胃痛缓解</li><li style="margin-bottom:4px;">慢性胃炎治疗</li><li style="margin-bottom:4px;">早餐养胃(米稀)</li>
|
|
|
+ </ul>
|
|
|
+ <div style="margin-top:auto; padding-top:10px; color:#FF6B6B; font-size:0.74rem; font-style:italic;">避开</div>
|
|
|
+ </div></div>
|
|
|
+ <div style="grid-row:2; grid-column:3;">
|
|
|
+ <div style="padding:16px; background:#2D9C5D08; border:1px solid #2D9C5D40; border-radius:6px; height:100%; display:flex; flex-direction:column;">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">高需求 × 低竞争 → 无人地带</div>
|
|
|
+ <ul style="color:var(--text-1); font-size:0.82rem; line-height:1.55; margin:0; padding-left:18px; list-style:disc;">
|
|
|
+ <li style="margin-bottom:4px;">PPI 减量过渡伴侣</li><li style="margin-bottom:4px;">年轻人养胃日常饮</li><li style="margin-bottom:4px;">办公室/差旅即饮养护</li>
|
|
|
+ </ul>
|
|
|
+ <div style="margin-top:auto; padding-top:10px; color:#2D9C5D; font-size:0.74rem; font-style:italic;">猴菇饮的精准插入点</div>
|
|
|
+ </div></div>
|
|
|
+ <div style="grid-row:3; grid-column:2;">
|
|
|
+ <div style="padding:16px; background:#9E9E9E08; border:1px solid #9E9E9E40; border-radius:6px; height:100%; display:flex; flex-direction:column;">
|
|
|
+ <div class="text-mono text-xs" style="color:#9E9E9E; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">低需求 × 高竞争 → 陷阱</div>
|
|
|
+ <ul style="color:var(--text-1); font-size:0.82rem; line-height:1.55; margin:0; padding-left:18px; list-style:disc;">
|
|
|
+ <li style="margin-bottom:4px;">胃药品类正面对抗</li><li style="margin-bottom:4px;">保健品价格战</li>
|
|
|
+ </ul>
|
|
|
+ <div style="margin-top:auto; padding-top:10px; color:#9E9E9E; font-size:0.74rem; font-style:italic;">绝不进入</div>
|
|
|
+ </div></div>
|
|
|
+ <div style="grid-row:3; grid-column:3;">
|
|
|
+ <div style="padding:16px; background:#FF8C4208; border:1px solid #FF8C4240; border-radius:6px; height:100%; display:flex; flex-direction:column;">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">低需求 × 低竞争 → 验证</div>
|
|
|
+ <ul style="color:var(--text-1); font-size:0.82rem; line-height:1.55; margin:0; padding-left:18px; list-style:disc;">
|
|
|
+ <li style="margin-bottom:4px;">"送胃"礼品装</li><li style="margin-bottom:4px;">糖友无糖版</li><li style="margin-bottom:4px;">夜宵族专属</li>
|
|
|
+ </ul>
|
|
|
+ <div style="margin-top:auto; padding-top:10px; color:#FF8C42; font-size:0.74rem; font-style:italic;">小规模验证后决定</div>
|
|
|
+ </div></div>
|
|
|
+ <div style="grid-row:4; grid-column:2; text-align:center;"><span class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.15em;">低竞争 ← 竞争烈度 → 高竞争</span></div>
|
|
|
+ <div style="grid-row:4; grid-column:3;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 3大机会详述 -->
|
|
|
+ <div style="margin-top:20px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;">
|
|
|
+
|
|
|
+ <div style="padding:16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-top:3px solid #0085CA;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.4rem; font-weight:900; color:#0085CA;">①</div>
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:var(--text-1); margin-top:6px;">PPI 减量伴侣</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">目标:中度→轻度过渡人群</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2);">规模:~3000万潜在用户</div>
|
|
|
+ <div style="font-size:0.78rem; color:#0085CA; font-weight:700; margin-top:8px; font-style:italic;">""安全减量的温和支撑""</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-top:3px solid #2D9C5D;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.4rem; font-weight:900; color:#2D9C5D;">②</div>
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:var(--text-1); margin-top:6px;">年轻代际养护</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">目标:25-40岁轻度胃不适</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2);">规模:~5000万潜在用户</div>
|
|
|
+ <div style="font-size:0.78rem; color:#2D9C5D; font-weight:700; margin-top:8px; font-style:italic;">""比中成药好喝/比食品可信""</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-top:3px solid #FF8C42;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.4rem; font-weight:900; color:#FF8C42;">③</div>
|
|
|
+ <div style="font-weight:800; font-size:0.92rem; color:var(--text-1); margin-top:6px;">全天即饮场景</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">目标:办公室/差旅/应酬后</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2);">规模:~4000万潜在用户</div>
|
|
|
+ <div style="font-size:0.78rem; color:#FF8C42; font-weight:700; margin-top:8px; font-style:italic;">""米稀到不了的场景""</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="fit-4" data-tone="amber" data-slide-num="22/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#FF8C42;">4.4 · 产品适配</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">场景适配 · <span style="color:#FF8C42;">4 大切入场景</span></span></h2>
|
|
|
+ <p class="section-sub">猴菇饮在什么时候、什么地方、被什么触发、用什么话术推荐给用户?</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; display:flex; flex-direction:column; gap:12px;">
|
|
|
+
|
|
|
+ <div style="display:grid; grid-template-columns:160px 1fr 1fr 1fr 60px; gap:12px; align-items:center; padding:14px 16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm); border-left:4px solid #0085CA;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.9rem; color:#0085CA;">PPI 减量伴侣</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">时间 × 空间</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-1);">医生建议减量时 · 家里/随身</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">触发事件</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-1);">复诊后/自发想减药</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">话术</div>
|
|
|
+ <div style="font-size:0.75rem; color:#0085CA; font-style:italic;">"在减药期间喝,温和养护胃黏膜"</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:#0085CA;">92</div>
|
|
|
+ <div style="font-size:0.6rem; color:var(--text-3);">适配分</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:160px 1fr 1fr 1fr 60px; gap:12px; align-items:center; padding:14px 16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm); border-left:4px solid #FF8C42;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.9rem; color:#FF8C42;">办公室日常养护</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">时间 × 空间</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-1);">工作日下午/加班 · 办公桌</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">触发事件</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-1);">胃不舒服/吃完外卖后</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">话术</div>
|
|
|
+ <div style="font-size:0.75rem; color:#FF8C42; font-style:italic;">"每天下午一瓶,养胃像喝水一样自然"</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:#FF8C42;">88</div>
|
|
|
+ <div style="font-size:0.6rem; color:var(--text-3);">适配分</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:160px 1fr 1fr 1fr 60px; gap:12px; align-items:center; padding:14px 16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm); border-left:4px solid #2D9C5D;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.9rem; color:#2D9C5D;">药店店员推荐</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">时间 × 空间</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-1);">顾客咨询胃药时 · 药店</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">触发事件</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-1);">买完胃药顺带推荐</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">话术</div>
|
|
|
+ <div style="font-size:0.75rem; color:#2D9C5D; font-style:italic;">"吃药的同时搭配这个养护,减少对药的依赖"</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:#2D9C5D;">85</div>
|
|
|
+ <div style="font-size:0.6rem; color:var(--text-3);">适配分</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:160px 1fr 1fr 1fr 60px; gap:12px; align-items:center; padding:14px 16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm); border-left:4px solid #C96E3F;">
|
|
|
+ <div>
|
|
|
+ <div style="font-weight:800; font-size:0.9rem; color:#C96E3F;">"送胃"礼品</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">时间 × 空间</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-1);">节假日/探病 · 走亲访友</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">触发事件</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-1);">送礼需求+健康概念</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.68rem; color:var(--text-3);">话术</div>
|
|
|
+ <div style="font-size:0.75rem; color:#C96E3F; font-style:italic;">"送胃比送烟酒更有心意"</div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.2rem; font-weight:900; color:#C96E3F;">75</div>
|
|
|
+ <div style="font-size:0.6rem; color:var(--text-3);">适配分</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:16px; padding:14px 20px; background:#E8A87C08; border-left:4px solid #E8A87C; border-radius:0 var(--radius-sm) var(--radius-sm) 0;">
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#E8A87C;">场景优先级</strong>:Y1 聚焦"药店推荐"(已有渠道)+"PPI 伴侣"(高痛点),Y2 扩展"办公室日常"(高频次),Y3 开发"礼品装"(高客单价)。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 原声 · 场景需求</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">老胃病_733</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 江苏</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥445</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="熬夜党自救笔记+打工人养胃话题帖主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"运动员夜训后胃容易反酸 教练让常备一些温和的养胃饮"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">运动员场景</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">教练推荐</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">应酬达人_489</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 重庆</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥524</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="熬夜党自救笔记+打工人养胃话题帖主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"打工人的胃是熬出来的 我需要的是熬夜前一支熬夜后一支的习惯"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">前后双支</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">习惯养成</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0084FF22; color:#0084FF; font-size:0.62rem; font-weight:700;">知</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">糖友_153</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 广东</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥488</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="熬夜党自救笔记+打工人养胃话题帖主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"年轻人熬夜频率高 胃病也越来越年轻化 急需一款熬夜党专属养胃饮"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">年轻化胃病</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">专属饮</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0084FF22; color:#0084FF; font-size:0.62rem; font-weight:700;">知</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">断药挣扎者_091</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 河北</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF6B6B; font-size:0.7rem; font-weight:600;">▼ 差评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥412</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="销售/管理层应酬话题帖+酒桌后养胃笔记共性">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"饭局前我会喝一支什么养胃的提前保护 但市面上没有专门的应酬场景饮"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">饭前预防</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">场景饮缺失</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="slide divider-slide" id="position" data-tone="purple" data-slide-num="23/31">
|
|
|
+ <div class="divider-inner">
|
|
|
+ <div class="divider-eyebrow" style="color:#8B5CF6;">💡 CHAPTER 5</div>
|
|
|
+ <h2 class="divider-title" style="color:#8B5CF6;">定位推导</h2>
|
|
|
+ <div class="divider-en" style="color:#8B5CF680;">POSITIONING</div>
|
|
|
+ <div class="divider-hero">洞察做完了,是时候<strong style="color:#8B5CF6;">收敛为定位</strong>。用<strong style="color:#2D9C5D;">里斯品类战略</strong>看"我在哪个品类竞争",用<strong style="color:#8B5CF6;">特劳特定位</strong>看"我在用户心智中占什么位置"。从心智阶梯 → 差异化锚点 → 聚焦方向,推导出一句话定位——<strong style="color:#E8A87C;">能写在盒子上、药店店员能说出来、用户能记住</strong>的那一句。</div>
|
|
|
+ <div class="divider-subsections">
|
|
|
+ <div class="divider-sub-item"><span class="sub-num" style="color:#8B5CF6;">5.1</span> 里斯品类战略 · 品类进化树 × 品类分化机会</div><div class="divider-sub-item"><span class="sub-num" style="color:#8B5CF6;">5.2</span> 特劳特心智阶梯 · 胃病用户脑中的产品序列</div><div class="divider-sub-item"><span class="sub-num" style="color:#8B5CF6;">5.3</span> 差异化锚点 · vs 药品 / vs 保健品 / vs 食品</div><div class="divider-sub-item"><span class="sub-num" style="color:#8B5CF6;">5.4</span> 定位陈述 · 一句话定位 × VOC 验证证据</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="position-1" data-tone="purple" data-slide-num="24/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#8B5CF6;">5.1 · 定位推导</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">里斯品类战略 · <span style="color:#8B5CF6;">品类进化树</span> × 分化机会</span></h2>
|
|
|
+ <p class="section-sub">里斯认为:品牌的最大机会不是在既有品类中竞争,而是开创新品类并成为第一。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 品类进化树 -->
|
|
|
+ <div style="margin-top:24px; padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">胃病产品品类进化树</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:6px;">
|
|
|
+
|
|
|
+ <div style="display:grid; grid-template-columns:140px 100px 1fr 80px; gap:12px; align-items:center; padding:10px 14px; background:#C6282805; border-left:4px solid #C62828; border-radius:0 var(--radius-sm) var(--radius-sm) 0; ">
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#C62828;">处方胃药</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-3);">胃病治疗</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2);">PPI/铋剂/三联</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; border-radius:10px; font-weight:700;
|
|
|
+ background:var(--bg-2);
|
|
|
+ color:var(--text-3);">
|
|
|
+ 成熟
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:140px 100px 1fr 80px; gap:12px; align-items:center; padding:10px 14px; background:#E5393505; border-left:4px solid #E53935; border-radius:0 var(--radius-sm) var(--radius-sm) 0; ">
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#E53935;">OTC 化药</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-3);">胃病自治</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2);">奥美拉唑/达喜</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; border-radius:10px; font-weight:700;
|
|
|
+ background:var(--bg-2);
|
|
|
+ color:var(--text-3);">
|
|
|
+ 成熟
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:140px 100px 1fr 80px; gap:12px; align-items:center; padding:10px 14px; background:#FF8C4205; border-left:4px solid #FF8C42; border-radius:0 var(--radius-sm) var(--radius-sm) 0; ">
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#FF8C42;">OTC 中成药</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-3);">胃病养护</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2);">三九胃泰/摩罗丹</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; border-radius:10px; font-weight:700;
|
|
|
+ background:#FF6B6B15;
|
|
|
+ color:#FF6B6B;">
|
|
|
+ 衰退
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:140px 100px 1fr 80px; gap:12px; align-items:center; padding:10px 14px; background:#E8A87C05; border-left:4px solid #E8A87C; border-radius:0 var(--radius-sm) var(--radius-sm) 0; ">
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#E8A87C;">保健食品</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-3);">胃部保健</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2);">猴头菇胶囊/养胃茶</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; border-radius:10px; font-weight:700;
|
|
|
+ background:var(--bg-2);
|
|
|
+ color:var(--text-3);">
|
|
|
+ 停滞
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:140px 100px 1fr 80px; gap:12px; align-items:center; padding:10px 14px; background:#87A96B05; border-left:4px solid #87A96B; border-radius:0 var(--radius-sm) var(--radius-sm) 0; ">
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#87A96B;">功能食品</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-3);">日常养胃</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2);">米稀/养胃粥</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; border-radius:10px; font-weight:700;
|
|
|
+ background:#87A96B15;
|
|
|
+ color:#87A96B;">
|
|
|
+ 增长
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:140px 100px 1fr 80px; gap:12px; align-items:center; padding:10px 14px; background:#2D9C5D05; border-left:4px solid #2D9C5D; border-radius:0 var(--radius-sm) var(--radius-sm) 0; border:2px solid #2D9C5D40; border-left:4px solid #2D9C5D;">
|
|
|
+ <div style="font-weight:800; font-size:0.88rem; color:#2D9C5D;">OTC 养胃饮</div>
|
|
|
+ <div style="font-size:0.75rem; color:var(--text-3);">⭐ 新品类</div>
|
|
|
+ <div style="font-size:0.78rem; color:var(--text-2);">猴菇饮 = 开创者</div>
|
|
|
+ <div style="text-align:center;">
|
|
|
+ <span style="font-size:0.72rem; padding:2px 8px; border-radius:10px; font-weight:700;
|
|
|
+ background:#2D9C5D15;
|
|
|
+ color:#2D9C5D;">
|
|
|
+ 空白
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 里斯观点 -->
|
|
|
+ <div style="margin-top:16px; padding:16px 20px; background:#8B5CF608; border:1px solid #8B5CF630; border-radius:var(--radius-md);">
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-2); font-style:italic; margin-bottom:8px;">"品牌不是在品类中竞争的结果,品牌是开创品类的奖赏。" —— 艾·里斯</div>
|
|
|
+ <div style="font-size:0.88rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#2D9C5D;">猴菇饮的品类战略</strong>:不要试图在"OTC 中成药"品类里和三九胃泰竞争,也不要在"功能食品"里和米稀抢早餐。而是<strong>开创"OTC 养胃饮"新品类</strong>——这个品类目前是空白的,猴菇饮天然是第一个进入者。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="position-2" data-tone="purple" data-slide-num="25/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#8B5CF6;">5.2 · 定位推导</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">特劳特心智阶梯 · 用户脑中的<span style="color:#8B5CF6;">产品序列</span></span></h2>
|
|
|
+ <p class="section-sub">特劳特认为:定位不是改变产品,而是在用户心智中找到一个空位并占据它。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 心智阶梯 -->
|
|
|
+ <div style="margin-top:24px; padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.12em; margin-bottom:16px; font-weight:700;">胃病用户的心智阶梯(由重到轻决策序列)</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:4px;">
|
|
|
+
|
|
|
+ <div style="display:grid; grid-template-columns:60px 200px 1fr; gap:12px; align-items:center; padding:12px 16px; background:#C6282806; border-left:4px solid #C62828; ">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#C62828; text-align:center;">#1</div>
|
|
|
+ <div style="font-weight:700; font-size:0.92rem; color:#C62828;">去医院/听医生的</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-2); font-style:italic;">必须的</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:60px 200px 1fr; gap:12px; align-items:center; padding:12px 16px; background:#E5393506; border-left:4px solid #E53935; ">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#E53935; text-align:center;">#2</div>
|
|
|
+ <div style="font-weight:700; font-size:0.92rem; color:#E53935;">奥美拉唑/达喜</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-2); font-style:italic;">"胃痛就吃这个"</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:60px 200px 1fr; gap:12px; align-items:center; padding:12px 16px; background:#FF8C4206; border-left:4px solid #FF8C42; ">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#FF8C42; text-align:center;">#3</div>
|
|
|
+ <div style="font-weight:700; font-size:0.92rem; color:#FF8C42;">三九胃泰/健胃消食片</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-2); font-style:italic;">"不严重就吃中成药"</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:60px 200px 1fr; gap:12px; align-items:center; padding:12px 16px; background:#87A96B06; border-left:4px solid #87A96B; ">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#87A96B; text-align:center;">#4</div>
|
|
|
+ <div style="font-weight:700; font-size:0.92rem; color:#87A96B;">米稀/酸奶</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-2); font-style:italic;">"日常养养胃"</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:60px 200px 1fr; gap:12px; align-items:center; padding:12px 16px; background:#2D9C5D06; border-left:4px solid #2D9C5D; border:2px dashed #2D9C5D; border-left:4px solid #2D9C5D;">
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:#2D9C5D; text-align:center;">#5</div>
|
|
|
+ <div style="font-weight:700; font-size:0.92rem; color:#2D9C5D;">⭐ ???</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-2); font-style:italic;">"比食品可信、比药温和"</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 用户品类认知 VOC 验证 -->
|
|
|
+
|
|
|
+ <div style="margin-top:16px; padding:16px; background:#8B5CF606; border:1px solid #8B5CF630; border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.12em; margin-bottom:10px; font-weight:700;">VOC 验证 · 用户自发的品类认知表达(163 条相关 VOC)</div>
|
|
|
+ <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;">
|
|
|
+
|
|
|
+ <div style="padding:10px 12px; background:var(--bg-1); border-left:3px solid #8B5CF6; border-radius:4px;">
|
|
|
+ <div style="font-size:0.74rem; color:var(--text-1); line-height:1.45;">"做媒体的熬夜是家常便饭 我们办公室冰箱里满满的养胃饮"</div>
|
|
|
+ <div style="color:var(--text-3); font-size:0.6rem; margin-top:4px;">—办公室牛马_592 · ❤️517</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 12px; background:var(--bg-1); border-left:3px solid #8B5CF6; border-radius:4px;">
|
|
|
+ <div style="font-size:0.74rem; color:var(--text-1); line-height:1.45;">"长期PPI用户最渴望的是一个OTC的温和养胃方案 不需要医生开 自己就能买"</div>
|
|
|
+ <div style="color:var(--text-3); font-size:0.6rem; margin-top:4px;">—应酬达人_032 · ❤️589</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:10px 12px; background:var(--bg-1); border-left:3px solid #8B5CF6; border-radius:4px;">
|
|
|
+ <div style="font-size:0.74rem; color:var(--text-1); line-height:1.45;">"阿胶一盒三四百送得出手 养胃饮也应该做到这个价位段的礼盒"</div>
|
|
|
+ <div style="color:var(--text-3); font-size:0.6rem; margin-top:4px;">—实习生_307 · ❤️437</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 空位分析 -->
|
|
|
+ <div style="margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:16px;">
|
|
|
+ <div style="padding:16px; background:#FF6B6B05; border:1px solid #FF6B6B30; border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF6B6B; margin-bottom:8px; font-weight:700;">心智空位 · 用户说不出名字的需求</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); line-height:1.6;">
|
|
|
+ 在"三九胃泰(药但难吃)"和"米稀(好喝但只是食品)"之间,用户有一个说不出名字的需求:<br>
|
|
|
+ <strong>"有没有一个东西,像喝饮料一样简单,但比食品更可信一点?"</strong>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:16px; background:#2D9C5D05; border:1px solid #2D9C5D30; border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; margin-bottom:8px; font-weight:700;">猴菇饮的心智占位</div>
|
|
|
+ <div style="font-size:0.82rem; color:var(--text-1); line-height:1.6;">
|
|
|
+ 猴菇饮 = 阶梯第 5 级 = <strong>"OTC 级养胃饮"</strong><br>
|
|
|
+ 比药品温和(不怕副作用)<br>
|
|
|
+ 比食品可信(OTC 身份)<br>
|
|
|
+ 比中成药好喝(液态/好口感)<br>
|
|
|
+ 比保健品便捷(即饮/无疗程)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="position-3" data-tone="purple" data-slide-num="26/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#8B5CF6;">5.3 · 定位推导</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">差异化锚点 · <span style="color:#8B5CF6;">三轴定位</span></span></h2>
|
|
|
+ <p class="section-sub">猴菇饮不是任何一个既有品类的"又一个产品",而是三个品类交叉的唯一占位。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 三轴差异化 -->
|
|
|
+ <div style="margin-top:24px; display:flex; flex-direction:column; gap:16px;">
|
|
|
+
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-left:5px solid #0085CA;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
|
|
|
+ <span style="font-weight:800; font-size:0.95rem; color:var(--text-1);">vs 药品(PPI/中成药)</span>
|
|
|
+ <span style="padding:4px 12px; background:#0085CA12; color:#0085CA; font-weight:700; font-size:0.78rem; border-radius:12px;">差异化锚点:温和无副作用</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-2); font-style:italic;">"不是替代药品,是药品的温和伴侣"</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-left:5px solid #E8A87C;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
|
|
|
+ <span style="font-weight:800; font-size:0.95rem; color:var(--text-1);">vs 保健品(猴头菇胶囊)</span>
|
|
|
+ <span style="padding:4px 12px; background:#E8A87C12; color:#E8A87C; font-weight:700; font-size:0.78rem; border-radius:12px;">差异化锚点:OTC 信任 + 好喝</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-2); font-style:italic;">"同样猴头菇,我是药准字/你是食准字"</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-left:5px solid #87A96B;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
|
|
|
+ <span style="font-weight:800; font-size:0.95rem; color:var(--text-1);">vs 食品(米稀/养胃茶)</span>
|
|
|
+ <span style="padding:4px 12px; background:#87A96B12; color:#87A96B; font-weight:700; font-size:0.78rem; border-radius:12px;">差异化锚点:OTC 信任 + 全天场景</span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.85rem; color:var(--text-2); font-style:italic;">"不止早餐,随时随地 OTC 级养护"</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 交叉定位图 -->
|
|
|
+ <div style="margin-top:20px; padding:20px; background:#2D9C5D06; border:2px solid #2D9C5D40; border-radius:var(--radius-md); text-align:center;">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.15em; margin-bottom:12px; font-weight:700;">猴菇饮 = 三个维度的交叉唯一点</div>
|
|
|
+ <div style="font-size:1.1rem; color:var(--text-1); line-height:1.8; max-width:600px; margin:0 auto;">
|
|
|
+ <span style="color:#0085CA; font-weight:700;">药品的 OTC 信任</span> ×
|
|
|
+ <span style="color:#E8A87C; font-weight:700;">好喝的猴头菇口感</span> ×
|
|
|
+ <span style="color:#87A96B; font-weight:700;">即饮的全天场景</span>
|
|
|
+ <br>
|
|
|
+ <span style="font-size:0.85rem; color:var(--text-3);">= 市场上唯一占据这个交叉位置的产品</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="position-4" data-tone="purple" data-slide-num="27/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#2D9C5D;">5.4 · 定位推导</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">定位陈述 · <span style="color:#2D9C5D;">一句话定位</span></span></h2>
|
|
|
+ <p class="section-sub">能写在盒子上、药店店员能说出来、用户能记住的那一句。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 定位陈述 -->
|
|
|
+ <div style="margin-top:24px; padding:28px 32px; background:#2D9C5D08; border:2px solid #2D9C5D; border-radius:var(--radius-lg); text-align:center;">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.2em; margin-bottom:12px;">POSITIONING STATEMENT</div>
|
|
|
+ <div style="font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:var(--text-1); line-height:1.5; max-width:560px; margin:0 auto;">
|
|
|
+ "中国第一款 <span style="color:#2D9C5D;">OTC 养胃饮</span>"
|
|
|
+ </div>
|
|
|
+ <div style="font-size:0.88rem; color:var(--text-2); margin-top:12px; max-width:500px; margin-left:auto; margin-right:auto; line-height:1.6;">
|
|
|
+ 专为<strong>轻度胃不适 + 日常养护</strong>人群设计<br>
|
|
|
+ OTC 药品级信任 × 即饮便捷 × 猴头菇温和养护
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 定位验证 -->
|
|
|
+ <div style="margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:16px;">
|
|
|
+ <div style="padding:16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#2D9C5D; margin-bottom:10px; font-weight:700;">✓ 定位自检 · 通过</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:6px; font-size:0.82rem;">
|
|
|
+ <div style="color:var(--text-1);">✅ <strong>独特性</strong>:市场上没有其他"OTC 养胃饮"</div>
|
|
|
+ <div style="color:var(--text-1);">✅ <strong>可信性</strong>:OTC 批文是实际背书</div>
|
|
|
+ <div style="color:var(--text-1);">✅ <strong>相关性</strong>:2.5亿胃病人群的真实需求</div>
|
|
|
+ <div style="color:var(--text-1);">✅ <strong>简洁性</strong>:一句话说清楚是什么</div>
|
|
|
+ <div style="color:var(--text-1);">✅ <strong>可执行</strong>:药店店员能直接用这句推荐</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:16px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
|
|
|
+ <div class="text-mono text-xs" style="color:#FF8C42; margin-bottom:10px; font-weight:700;">⚠ 备选定位方案</div>
|
|
|
+ <div style="display:flex; flex-direction:column; gap:8px; font-size:0.82rem;">
|
|
|
+ <div style="padding:8px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <strong>方案 B</strong>:猴菇饮——"药品级养胃,饮料般好喝"
|
|
|
+ </div>
|
|
|
+ <div style="padding:8px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <strong>方案 C</strong>:猴菇饮——"PPI 减量期的温和伴侣"(窄)
|
|
|
+ </div>
|
|
|
+ <div style="padding:8px 10px; background:var(--bg-2); border-radius:var(--radius-sm);">
|
|
|
+ <strong>方案 D</strong>:猴菇饮——"每天一瓶,OTC 级养胃"
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="margin-top:16px;">
|
|
|
+ <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:8px;">VOC 验证 · 用户自发使用的类似表达</div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
|
|
|
+ <div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0084FF22; color:#0084FF; font-size:0.62rem; font-weight:700;">知</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">送礼党_150</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 湖北</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF6B6B; font-size:0.7rem; font-weight:600;">▼ 差评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥404</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="销售/管理层应酬话题帖+酒桌后养胃笔记共性">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"应酬饮的核心是能放进应酬包+不尴尬+直接喝 这是个具体场景"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">具体产品需求</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">包内可携</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0084FF22; color:#0084FF; font-size:0.62rem; font-weight:700;">知</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">断药挣扎者_091</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 河北</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#FF6B6B; font-size:0.7rem; font-weight:600;">▼ 差评</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥412</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="销售/管理层应酬话题帖+酒桌后养胃笔记共性">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"饭局前我会喝一支什么养胃的提前保护 但市面上没有专门的应酬场景饮"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">饭前预防</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">场景饮缺失</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">差旅客_114</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 安徽</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥406</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="熬夜党自救笔记+打工人养胃话题帖主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"熬夜后最舒服的不是奶茶 是一支温和的猴头菇饮 理性选择"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">替代奶茶</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">理性选择</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div><div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid #E8A87C; border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:8px;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1A1A1A22; color:#1A1A1A; font-size:0.62rem; font-weight:700;">抖</span>
|
|
|
+ <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">应酬达人_489</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem;">· 重庆</span>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex; align-items:center; gap:6px;">
|
|
|
+ <span style="color:#888; font-size:0.7rem; font-weight:600;">● 中性</span>
|
|
|
+ <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥524</span>
|
|
|
+ <span style="padding:1px 6px; background:#E8A87C18; color:#E8A87C; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;" title="熬夜党自救笔记+打工人养胃话题帖主题">◈模式</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color:var(--text-1); font-size:0.86rem; line-height:1.62;">"打工人的胃是熬出来的 我需要的是熬夜前一支熬夜后一支的习惯"</div>
|
|
|
+ <div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
|
+ <span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">前后双支</span><span style="padding:2px 8px; background:#E8A87C12; color:#E8A87C; border-radius:3px; font-size:0.68rem; font-weight:600;">习惯养成</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="slide divider-slide" id="action" data-tone="green" data-slide-num="28/31">
|
|
|
+ <div class="divider-inner">
|
|
|
+ <div class="divider-eyebrow" style="color:#87A96B;">🚀 CHAPTER 6</div>
|
|
|
+ <h2 class="divider-title" style="color:#87A96B;">行动蓝图</h2>
|
|
|
+ <div class="divider-en" style="color:#87A96B80;">ACTION PLAN</div>
|
|
|
+ <div class="divider-hero">从洞察到落地的最短路径。<strong style="color:#87A96B;">P0 立即行动</strong>:产品规格/渠道选择/话术定稿。<strong style="color:#0085CA;">P1 三个月验证</strong>:数据闭环 + 定位验证。<strong style="color:#FF8C42;">数据缺口</strong>:哪些结论还需要补充 VOC 采集来夯实。<strong style="color:#2D9C5D;">5000 万 → 5 亿</strong>的 3 阶段路径。</div>
|
|
|
+ <div class="divider-subsections">
|
|
|
+ <div class="divider-sub-item"><span class="sub-num" style="color:#87A96B;">6.1</span> P0 行动 · 产品/渠道/话术立即落地</div><div class="divider-sub-item"><span class="sub-num" style="color:#87A96B;">6.2</span> P1 验证 · 3个月内数据闭环</div><div class="divider-sub-item"><span class="sub-num" style="color:#87A96B;">6.3</span> 数据缺口 × 下一轮采集计划</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="action-1" data-tone="green" data-slide-num="29/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#87A96B;">6.1 · 行动蓝图</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">P0 + P1 · <span style="color:#87A96B;">8 项行动</span>清单</span></h2>
|
|
|
+ <p class="section-sub">从洞察到落地的最短路径。P0 = 2 周内必须启动,P1 = 3 个月内完成。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px;">
|
|
|
+ <table style="width:100%; border-collapse:collapse; font-size:0.82rem;">
|
|
|
+ <thead>
|
|
|
+ <tr style="background:var(--bg-2);">
|
|
|
+ <th style="padding:8px 10px; text-align:left; width:50px;">编号</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left;">行动项</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left; width:80px;">负责人</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left; width:60px;">期限</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left;">具体内容</th>
|
|
|
+ <th style="padding:8px 10px; text-align:center; width:50px;">优先级</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:700; color:#FF6B6B;">P0-1</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:var(--text-1);">定位话术定稿</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">品牌部</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">1 周</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2); font-size:0.78rem;">"中国第一款 OTC 养胃饮" → 包装/物料/店员话术统一</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF6B6B15;
|
|
|
+ color:#FF6B6B;">P0</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:700; color:#FF6B6B;">P0-2</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:var(--text-1);">药店渠道首批铺货</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">渠道部</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">2 周</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2); font-size:0.78rem;">选 100 家药店试点,搭配"买胃药送猴菇饮体验装"</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF6B6B15;
|
|
|
+ color:#FF6B6B;">P0</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:700; color:#FF6B6B;">P0-3</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:var(--text-1);">店员推荐话术培训</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">销售部</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">2 周</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2); font-size:0.78rem;">"顾客买奥美拉唑时,推荐搭配猴菇饮做减量伴侣"</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF6B6B15;
|
|
|
+ color:#FF6B6B;">P0</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:700; color:#FF6B6B;">P0-4</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:var(--text-1);">SKU 规格确认</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">产品部</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">1 周</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2); font-size:0.78rem;">单支装(药店试饮)+ 6 支装(日常)+ 12 支礼盒装</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF6B6B15;
|
|
|
+ color:#FF6B6B;">P0</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:700; color:#FF8C42;">P1-1</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:var(--text-1);">电商详情页改版</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">电商部</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">1 月</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2); font-size:0.78rem;">突出 OTC 身份 + 场景化卖点(办公室/差旅/减药期)</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF8C4215;
|
|
|
+ color:#FF8C42;">P1</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:700; color:#FF8C42;">P1-2</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:var(--text-1);">小红书种草测试</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">新媒体</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">1 月</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2); font-size:0.78rem;">20 篇 KOC 笔记测试"OTC 养胃饮"认知接受度</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF8C4215;
|
|
|
+ color:#FF8C42;">P1</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:700; color:#FF8C42;">P1-3</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:var(--text-1);">"送胃"礼盒设计</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">设计部</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">2 月</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2); font-size:0.78rem;">对标东阿阿胶礼品装,¥198-398 双规格</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF8C4215;
|
|
|
+ color:#FF8C42;">P1</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:700; color:#FF8C42;">P1-4</td>
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:var(--text-1);">糖友无糖版可行性</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">研发部</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">3 月</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2); font-size:0.78rem;">蔗糖替代方案 + 口感测试 + 成本评估</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF8C4215;
|
|
|
+ color:#FF8C42;">P1</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="action-2" data-tone="green" data-slide-num="30/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#2D9C5D;">6.2 · 行动蓝图</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">3 个月验证 · <span style="color:#2D9C5D;">数据闭环</span></span></h2>
|
|
|
+ <p class="section-sub">每个月有明确的验证指标和决策节点。不盲目扩张,用数据说话。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px; display:flex; flex-direction:column; gap:16px;">
|
|
|
+
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-left:5px solid #87A96B;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
|
|
|
+ <div>
|
|
|
+ <span style="font-family:var(--font-head); font-size:1.3rem; font-weight:900; color:#87A96B;">M1</span>
|
|
|
+ <span style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-left:10px;">渠道验证</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.72rem; color:#87A96B; font-weight:700; margin-bottom:6px;">验证指标</div>
|
|
|
+ <ul style="margin:0; padding-left:16px; font-size:0.82rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <li>100 家药店动销率 > 15%</li><li>店员推荐转化率 > 8%</li><li>试饮→购买转化 > 20%</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.72rem; color:#FF8C42; font-weight:700; margin-bottom:6px;">决策规则</div>
|
|
|
+ <div style="font-size:0.8rem; color:var(--text-2); line-height:1.6;">动销率 <10% → 调整话术/陈列;<5% → 重新评估渠道</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-left:5px solid #2D9C5D;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
|
|
|
+ <div>
|
|
|
+ <span style="font-family:var(--font-head); font-size:1.3rem; font-weight:900; color:#2D9C5D;">M2</span>
|
|
|
+ <span style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-left:10px;">认知验证</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.72rem; color:#2D9C5D; font-weight:700; margin-bottom:6px;">验证指标</div>
|
|
|
+ <ul style="margin:0; padding-left:16px; font-size:0.82rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <li>小红书 20 篇 KOC 笔记互动率</li><li>"OTC 养胃饮"搜索量变化</li><li>电商详情页转化率 vs 旧版</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.72rem; color:#FF8C42; font-weight:700; margin-bottom:6px;">决策规则</div>
|
|
|
+ <div style="font-size:0.8rem; color:var(--text-2); line-height:1.6;">互动率 <2% → 调整内容角度;搜索量无变化 → 品类教育不够</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding:20px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); border-left:5px solid #0085CA;">
|
|
|
+ <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
|
|
|
+ <div>
|
|
|
+ <span style="font-family:var(--font-head); font-size:1.3rem; font-weight:900; color:#0085CA;">M3</span>
|
|
|
+ <span style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-left:10px;">数据复盘</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.72rem; color:#0085CA; font-weight:700; margin-bottom:6px;">验证指标</div>
|
|
|
+ <ul style="margin:0; padding-left:16px; font-size:0.82rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <li>累计 GMV vs 5000万/12 月度目标</li><li>复购率(关键指标)</li><li>NPS 净推荐值</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:0.72rem; color:#FF8C42; font-weight:700; margin-bottom:6px;">决策规则</div>
|
|
|
+ <div style="font-size:0.8rem; color:var(--text-2); line-height:1.6;">复购率 <15% → 产品体验有问题;NPS <30 → 定位偏差</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section class="report-section" id="action-3" data-tone="green" data-slide-num="31/31">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-head rise-in">
|
|
|
+ <div class="section-eyebrow" style="color:#FF8C42;">6.3 · 行动蓝图</div>
|
|
|
+ <h2 class="text-h1"><span class="headline-anim">数据缺口 × <span style="color:#FF8C42;">下一轮采集</span>计划</span></h2>
|
|
|
+ <p class="section-sub">本报告基于 ${meta?.comments || "—"} 条 VOC。以下结论还需要补充数据来夯实。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top:24px;">
|
|
|
+ <table style="width:100%; border-collapse:collapse; font-size:0.82rem;">
|
|
|
+ <thead>
|
|
|
+ <tr style="background:var(--bg-2);">
|
|
|
+ <th style="padding:8px 10px; text-align:left;">数据缺口</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left;">当前状态</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left;">需要什么</th>
|
|
|
+ <th style="padding:8px 10px; text-align:left;">影响决策</th>
|
|
|
+ <th style="padding:8px 10px; text-align:center; width:60px;">优先级</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#FF6B6B;">药店店员真实推荐行为</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-3);">无直接数据</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-1);">20 家药店店员深访</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">决定店员话术培训方案</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF6B6B15;
|
|
|
+ color:#FF6B6B;">高</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#FF6B6B;">PPI 减量期用户真实体验</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-3);">VOC 中间接提及</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-1);">30 人深度访谈</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">验证"减量伴侣"场景是否成立</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF6B6B15;
|
|
|
+ color:#FF6B6B;">高</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#FF6B6B;">猴菇饮口感/体验反馈</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-3);">产品未上市</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-1);">100 人盲测</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">确认"好喝"是否成立</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF6B6B15;
|
|
|
+ color:#FF6B6B;">高</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#FF8C42;">糖友胃病人群规模</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-3);">H7 假设未验证</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-1);">医疗数据交叉分析</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">无糖版是否值得开发</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF8C4215;
|
|
|
+ color:#FF8C42;">中</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr style="border-bottom:1px solid var(--border);">
|
|
|
+ <td style="padding:8px 10px; font-weight:600; color:#FF8C42;">礼品场景购买意愿</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-3);">H8 假设/少量 VOC</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-1);">礼品消费者调研</td>
|
|
|
+ <td style="padding:8px 10px; color:var(--text-2);">礼盒装定价/设计方向</td>
|
|
|
+ <td style="padding:8px 10px; text-align:center;">
|
|
|
+ <span style="padding:2px 8px; border-radius:10px; font-weight:700; font-size:0.72rem;
|
|
|
+ background:#FF8C4215;
|
|
|
+ color:#FF8C42;">中</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 总结 -->
|
|
|
+ <div style="margin-top:20px; padding:16px 20px; background:#2D9C5D08; border:2px solid #2D9C5D40; border-radius:var(--radius-md);">
|
|
|
+ <div style="font-size:0.88rem; color:var(--text-1); line-height:1.7;">
|
|
|
+ <strong style="color:#2D9C5D;">本报告的价值边界</strong>:基于 VOC 数据的洞察已经完成了<strong>"方向判断"</strong>——猴菇饮应该定位为"OTC 养胃饮",聚焦轻度胃不适+日常养护人群,通过药店渠道切入。但<strong>"定量验证"</strong>(口感盲测/店员行为/减量场景)需要下一阶段的实地调研来完成。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+</main>
|
|
|
+<script>
|
|
|
+(function(){
|
|
|
+ 'use strict';
|
|
|
+
|
|
|
+ var slides = [];
|
|
|
+ var currentSlide = 0;
|
|
|
+ var firstScrolled = false;
|
|
|
+
|
|
|
+ // —— 1) 分片标题动画:把每个 .headline-anim 文本切成 .char 逐字入场 ——
|
|
|
+ function splitHeadlines(){
|
|
|
+ var els = document.querySelectorAll('.headline-anim');
|
|
|
+ els.forEach(function(el){
|
|
|
+ if (el.dataset.split === '1') return;
|
|
|
+ el.dataset.split = '1';
|
|
|
+ var text = el.textContent;
|
|
|
+ el.textContent = '';
|
|
|
+ var chars = Array.from(text);
|
|
|
+ chars.forEach(function(ch, i){
|
|
|
+ var span = document.createElement('span');
|
|
|
+ span.className = 'char';
|
|
|
+ span.textContent = ch === ' ' ? '\u00A0' : ch;
|
|
|
+ span.style.transitionDelay = (i * 28) + 'ms';
|
|
|
+ el.appendChild(span);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // —— 2) Fade / Rise / Headline 统一的 IntersectionObserver ——
|
|
|
+ function initReveal(){
|
|
|
+ var selectors = ['.fade-up', '.rise-in', '.headline-anim'];
|
|
|
+ var els = document.querySelectorAll(selectors.join(','));
|
|
|
+ if (!('IntersectionObserver' in window)){
|
|
|
+ els.forEach(function(el){ el.classList.add('is-visible'); });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var io = new IntersectionObserver(function(entries){
|
|
|
+ entries.forEach(function(e){
|
|
|
+ if (e.isIntersecting){
|
|
|
+ e.target.classList.add('is-visible');
|
|
|
+ io.unobserve(e.target);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, { threshold: 0.08, rootMargin: '0px 0px -5% 0px' });
|
|
|
+ els.forEach(function(el){ io.observe(el); });
|
|
|
+
|
|
|
+ // 首屏兜底
|
|
|
+ setTimeout(function(){
|
|
|
+ els.forEach(function(el){
|
|
|
+ var r = el.getBoundingClientRect();
|
|
|
+ if (r.top < window.innerHeight && r.bottom > 0) el.classList.add('is-visible');
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
+ // 终极兜底
|
|
|
+ setTimeout(function(){
|
|
|
+ document.querySelectorAll('.fade-up:not(.is-visible),.rise-in:not(.is-visible),.headline-anim:not(.is-visible)').forEach(function(el){
|
|
|
+ el.classList.add('is-visible');
|
|
|
+ });
|
|
|
+ }, 4500);
|
|
|
+ }
|
|
|
+
|
|
|
+ // —— 3) 数字计数动画 ——
|
|
|
+ function initCountUp(){
|
|
|
+ var els = document.querySelectorAll('.metric-value[data-count]');
|
|
|
+ if (!('IntersectionObserver' in window)){
|
|
|
+ els.forEach(function(el){ el.textContent = el.dataset.count; });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var io = new IntersectionObserver(function(entries){
|
|
|
+ entries.forEach(function(e){
|
|
|
+ if (!e.isIntersecting) return;
|
|
|
+ var el = e.target;
|
|
|
+ var target = parseFloat(el.dataset.count);
|
|
|
+ if (isNaN(target)) return;
|
|
|
+ var isFloat = !Number.isInteger(target);
|
|
|
+ var start = 0, duration = 1400, t0 = performance.now();
|
|
|
+ function tick(now){
|
|
|
+ var p = Math.min(1, (now - t0) / duration);
|
|
|
+ var eased = 1 - Math.pow(1 - p, 3);
|
|
|
+ var v = start + (target - start) * eased;
|
|
|
+ el.textContent = isFloat ? v.toFixed(1) : Math.floor(v).toLocaleString('en-US');
|
|
|
+ if (p < 1) requestAnimationFrame(tick);
|
|
|
+ else el.textContent = isFloat ? target.toFixed(1) : target.toLocaleString('en-US');
|
|
|
+ }
|
|
|
+ requestAnimationFrame(tick);
|
|
|
+ io.unobserve(el);
|
|
|
+ });
|
|
|
+ }, { threshold: 0.4 });
|
|
|
+ els.forEach(function(el){ io.observe(el); });
|
|
|
+ }
|
|
|
+
|
|
|
+ // —— 4) Slide 进度 · nav 高亮 · ambient 光晕跟随 · slide counter ——
|
|
|
+ function initDeck(){
|
|
|
+ slides = Array.prototype.slice.call(document.querySelectorAll('section.report-section'));
|
|
|
+ var progressLine = document.getElementById('progress-line');
|
|
|
+ var navDots = document.querySelectorAll('.nav-dot');
|
|
|
+ var counter = document.querySelector('.slide-counter');
|
|
|
+ var counterNow = counter && counter.querySelector('.now');
|
|
|
+ var counterTotal = counter && counter.querySelector('.total');
|
|
|
+ var counterBar = counter && counter.querySelector('.bar');
|
|
|
+ if (counterTotal) counterTotal.textContent = String(slides.length).padStart(2, '0');
|
|
|
+
|
|
|
+ // 预设每张 slide 的 ambient 偏移(用 CSS 变量驱动)
|
|
|
+ var ambientPresets = [
|
|
|
+ { x: '15%', y: '25%' },
|
|
|
+ { x: '75%', y: '30%' },
|
|
|
+ { x: '25%', y: '70%' },
|
|
|
+ { x: '80%', y: '65%' },
|
|
|
+ { x: '45%', y: '20%' },
|
|
|
+ { x: '55%', y: '75%' },
|
|
|
+ { x: '20%', y: '50%' },
|
|
|
+ { x: '85%', y: '50%' },
|
|
|
+ { x: '50%', y: '40%' },
|
|
|
+ { x: '30%', y: '30%' },
|
|
|
+ { x: '70%', y: '70%' },
|
|
|
+ { x: '40%', y: '60%' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ function setActive(idx){
|
|
|
+ if (idx < 0) idx = 0;
|
|
|
+ if (idx >= slides.length) idx = slides.length - 1;
|
|
|
+ currentSlide = idx;
|
|
|
+ slides.forEach(function(s, i){
|
|
|
+ if (i === idx) s.classList.add('in-view');
|
|
|
+ else s.classList.remove('in-view');
|
|
|
+ });
|
|
|
+ for (var j = 0; j < navDots.length; j++){
|
|
|
+ if (j === idx) navDots[j].classList.add('active');
|
|
|
+ else navDots[j].classList.remove('active');
|
|
|
+ }
|
|
|
+ if (counterNow) counterNow.textContent = String(idx + 1).padStart(2, '0');
|
|
|
+ if (counterBar) {
|
|
|
+ var pct = slides.length > 1 ? ((idx + 1) / slides.length) * 100 : 100;
|
|
|
+ counterBar.style.setProperty('--pct', pct.toFixed(1) + '%');
|
|
|
+ }
|
|
|
+ // 根据当前 slide 切换 ambient 位置
|
|
|
+ var p = ambientPresets[idx % ambientPresets.length];
|
|
|
+ document.body.style.setProperty('--amb-x', p.x);
|
|
|
+ document.body.style.setProperty('--amb-y', p.y);
|
|
|
+ }
|
|
|
+
|
|
|
+ function onScroll(){
|
|
|
+ if (!firstScrolled && window.scrollY > 20){
|
|
|
+ firstScrolled = true;
|
|
|
+ setTimeout(function(){
|
|
|
+ var hint = document.querySelector('.kbd-hint');
|
|
|
+ if (hint) hint.classList.add('fade');
|
|
|
+ }, 4000);
|
|
|
+ }
|
|
|
+
|
|
|
+ var h = document.documentElement.scrollHeight - window.innerHeight;
|
|
|
+ var p = h > 0 ? (window.scrollY / h) * 100 : 0;
|
|
|
+ if (progressLine) progressLine.style.width = p + '%';
|
|
|
+
|
|
|
+ // 找出离视口中心最近的 slide
|
|
|
+ var mid = window.innerHeight * 0.45;
|
|
|
+ var bestIdx = 0, bestDist = Infinity;
|
|
|
+ for (var i = 0; i < slides.length; i++){
|
|
|
+ var r = slides[i].getBoundingClientRect();
|
|
|
+ var center = (r.top + r.bottom) / 2;
|
|
|
+ var d = Math.abs(center - mid);
|
|
|
+ if (d < bestDist){ bestDist = d; bestIdx = i; }
|
|
|
+ }
|
|
|
+ if (bestIdx !== currentSlide) setActive(bestIdx);
|
|
|
+ }
|
|
|
+ window.addEventListener('scroll', onScroll, { passive: true });
|
|
|
+ onScroll();
|
|
|
+
|
|
|
+ navDots.forEach(function(d, i){
|
|
|
+ d.addEventListener('click', function(e){
|
|
|
+ e.preventDefault();
|
|
|
+ var tid = d.dataset.target;
|
|
|
+ var t = tid ? document.getElementById(tid) : slides[i];
|
|
|
+ if (t) t.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // —— 键盘导航 ——
|
|
|
+ function goto(idx){
|
|
|
+ idx = Math.max(0, Math.min(slides.length - 1, idx));
|
|
|
+ slides[idx].scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
|
+ }
|
|
|
+ window.addEventListener('keydown', function(e){
|
|
|
+ // 不在输入框里
|
|
|
+ var tag = (e.target && e.target.tagName || '').toLowerCase();
|
|
|
+ if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
|
|
|
+ if (e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === 'j'){ e.preventDefault(); goto(currentSlide + 1); }
|
|
|
+ else if (e.key === 'ArrowUp' || e.key === 'PageUp' || e.key === 'k'){ e.preventDefault(); goto(currentSlide - 1); }
|
|
|
+ else if (e.key === 'Home'){ e.preventDefault(); goto(0); }
|
|
|
+ else if (e.key === 'End'){ e.preventDefault(); goto(slides.length - 1); }
|
|
|
+ else if (e.key === ' '){ e.preventDefault(); goto(currentSlide + (e.shiftKey ? -1 : 1)); }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // —— 5) ECharts 懒加载(slide 进入视口才渲染,避免首屏卡顿)——
|
|
|
+ var COMMON = {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ textStyle: { fontFamily: 'Inter, Noto Sans SC, system-ui', color: '#A8A8A8' },
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '3%', top: '12%', containLabel: true }
|
|
|
+ };
|
|
|
+ var AMBER='#F5A623', GREEN='#00DC82', PURPLE='#8B5CF6', ROSE='#FF4D8D', BLUE='#3B82F6';
|
|
|
+ var PALETTE = [AMBER, GREEN, PURPLE, ROSE, BLUE, '#EF4444', '#06B6D4', '#F59E0B'];
|
|
|
+ var CHART_REGISTRY = [];
|
|
|
+
|
|
|
+ function initChart(id, cb){
|
|
|
+ var el = document.getElementById(id);
|
|
|
+ if (!el) return;
|
|
|
+ CHART_REGISTRY.push({ id: id, el: el, cb: cb, rendered: false });
|
|
|
+ }
|
|
|
+ function renderChart(item){
|
|
|
+ if (item.rendered || !window.echarts) return;
|
|
|
+ var chart = window.echarts.init(item.el, null, { renderer: 'canvas' });
|
|
|
+ try { item.cb(chart); item.rendered = true; } catch(e){ console.error(item.id, e); }
|
|
|
+ window.addEventListener('resize', function(){ chart.resize(); });
|
|
|
+ }
|
|
|
+ function bootCharts(){
|
|
|
+ if (!window.echarts) { setTimeout(bootCharts, 300); return; }
|
|
|
+ if (!('IntersectionObserver' in window)){
|
|
|
+ CHART_REGISTRY.forEach(renderChart);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var io = new IntersectionObserver(function(entries){
|
|
|
+ entries.forEach(function(e){
|
|
|
+ if (!e.isIntersecting) return;
|
|
|
+ var item = CHART_REGISTRY.find(function(x){ return x.el === e.target; });
|
|
|
+ if (item) renderChart(item);
|
|
|
+ io.unobserve(e.target);
|
|
|
+ });
|
|
|
+ }, { threshold: 0.1, rootMargin: '200px 0px' });
|
|
|
+ CHART_REGISTRY.forEach(function(item){ io.observe(item.el); });
|
|
|
+ }
|
|
|
+
|
|
|
+ function initCharts(){
|
|
|
+ var D = window.__CHART_DATA__ || {};
|
|
|
+
|
|
|
+ // 样本分布
|
|
|
+ initChart('chartSample', function(chart){
|
|
|
+ var data = (D.noteHeatmap || []).slice(0, 5).map(function(n, i){
|
|
|
+ return {
|
|
|
+ value: (n.liked || 0) + (n.comments || 0) + (n.collected || 0),
|
|
|
+ name: (n.title || '').slice(0, 14) || '笔记' + (i + 1),
|
|
|
+ itemStyle: { color: PALETTE[i % PALETTE.length] }
|
|
|
+ };
|
|
|
+ });
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: { trigger: 'item', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
|
|
|
+ legend: { bottom: 0, textStyle: { color: '#A8A8A8', fontSize: 11 } },
|
|
|
+ animationDuration: 1000, animationEasing: 'cubicOut',
|
|
|
+ series: [{
|
|
|
+ type: 'pie', radius: ['52%', '76%'], center: ['50%', '45%'],
|
|
|
+ label: { color: '#F5F5F5', fontSize: 11, formatter: '{b}\n{c}' },
|
|
|
+ itemStyle: { borderColor: '#0A0A0A', borderWidth: 2 },
|
|
|
+ data: data
|
|
|
+ }]
|
|
|
+ }));
|
|
|
+ });
|
|
|
+
|
|
|
+ // IP 地域
|
|
|
+ initChart('chartGeo', function(chart){
|
|
|
+ var ips = (D.topIPs || []).slice(0, 10).reverse();
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
|
|
|
+ animationDuration: 1200, animationEasing: 'cubicOut',
|
|
|
+ xAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
|
|
|
+ yAxis: { type: 'category', data: ips.map(function(x){return x[0];}), axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontSize: 12 } },
|
|
|
+ series: [{
|
|
|
+ type: 'bar', data: ips.map(function(x){return x[1];}),
|
|
|
+ itemStyle: { color: AMBER, borderRadius: [0, 3, 3, 0] }, barWidth: '60%',
|
|
|
+ label: { show: true, position: 'right', color: '#F5A623', fontFamily: 'JetBrains Mono', fontSize: 11 }
|
|
|
+ }]
|
|
|
+ }));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 笔记热力散点
|
|
|
+ initChart('chartNoteHeatmap', function(chart){
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
|
|
|
+ formatter: function(p){
|
|
|
+ return '<div style="max-width:260px;"><strong style="color:#F5A623;">' + p.data[3] +
|
|
|
+ '</strong><br>点赞 ' + p.data[0] + ' · 评论 ' + p.data[1] + ' · 收藏 ' + p.data[2] + '</div>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ animationDuration: 1400, animationDelay: function(i){ return i * 30; },
|
|
|
+ xAxis: { type: 'value', name: '点赞数', nameTextStyle: { color: '#A8A8A8' }, axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
|
|
|
+ yAxis: { type: 'value', name: '评论数', nameTextStyle: { color: '#A8A8A8' }, axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
|
|
|
+ series: [{
|
|
|
+ type: 'scatter',
|
|
|
+ data: (D.noteHeatmap || []).map(function(n){ return [n.liked, n.comments, n.collected, n.title]; }),
|
|
|
+ symbolSize: function(v){ return Math.max(10, Math.min(56, Math.sqrt(v[2] || 1) * 3.5)); },
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.RadialGradient(0.4, 0.4, 0.6, [
|
|
|
+ { offset: 0, color: 'rgba(245,166,35,0.9)' },
|
|
|
+ { offset: 1, color: 'rgba(245,166,35,0.15)' }
|
|
|
+ ]),
|
|
|
+ borderColor: '#F5A623', borderWidth: 1
|
|
|
+ },
|
|
|
+ emphasis: { itemStyle: { borderWidth: 2, shadowBlur: 16, shadowColor: 'rgba(245,166,35,0.5)' } }
|
|
|
+ }]
|
|
|
+ }));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 价格带
|
|
|
+ initChart('chartPrice', function(chart){
|
|
|
+ var keys = Object.keys(D.priceBuckets || {});
|
|
|
+ var vals = keys.map(function(k){ return D.priceBuckets[k]; });
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
|
|
|
+ animationDuration: 1200,
|
|
|
+ xAxis: { type: 'category', data: keys, axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontFamily: 'JetBrains Mono' } },
|
|
|
+ yAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
|
|
|
+ series: [{
|
|
|
+ type: 'bar', data: vals,
|
|
|
+ itemStyle: {
|
|
|
+ color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
|
|
|
+ colorStops: [{ offset: 0, color: '#F5A623' }, { offset: 1, color: 'rgba(245,166,35,0.3)' }] },
|
|
|
+ borderRadius: [4, 4, 0, 0]
|
|
|
+ },
|
|
|
+ barWidth: '56%',
|
|
|
+ label: { show: true, position: 'top', color: '#F5A623', fontFamily: 'JetBrains Mono', fontWeight: 600 }
|
|
|
+ }]
|
|
|
+ }));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 品牌月销(横条,兼容)
|
|
|
+ initChart('chartBrands', function(chart){
|
|
|
+ var brands = (D.topBrands || []).slice().reverse();
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
|
|
|
+ formatter: function(p){ return p.map(function(x){ return x.name + ': $' + (x.value/100).toLocaleString('en-US',{maximumFractionDigits:0}); }).join('<br>'); }
|
|
|
+ },
|
|
|
+ animationDuration: 1200,
|
|
|
+ xAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B', formatter: function(v){ return '$' + (v/100000).toFixed(0) + 'k'; } } },
|
|
|
+ yAxis: { type: 'category', data: brands.map(function(x){return x[0];}), axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontSize: 12 } },
|
|
|
+ series: [{
|
|
|
+ type: 'bar', data: brands.map(function(x){return x[1];}),
|
|
|
+ itemStyle: {
|
|
|
+ color: function(params){ return PALETTE[params.dataIndex % PALETTE.length]; },
|
|
|
+ borderRadius: [0, 3, 3, 0]
|
|
|
+ },
|
|
|
+ barWidth: '58%',
|
|
|
+ label: { show: true, position: 'right', color: '#A8A8A8', fontFamily: 'JetBrains Mono', fontSize: 10, formatter: function(p){ return '$' + (p.value/100000).toFixed(0) + 'k'; } }
|
|
|
+ }]
|
|
|
+ }));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 评分分布
|
|
|
+ initChart('chartRatingDist', function(chart){
|
|
|
+ var data = D.ratingBuckets || {};
|
|
|
+ var keys = Object.keys(data);
|
|
|
+ var vals = keys.map(function(k){ return data[k]; });
|
|
|
+ var colors = ['#EF4444','#F59E0B','#F5A623','#06B6D4','#00DC82'];
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
|
|
|
+ formatter: function(p){ return p.map(function(x){ return x.name + ': ' + x.value + ' SKU'; }).join('<br>'); }
|
|
|
+ },
|
|
|
+ animationDuration: 1200,
|
|
|
+ xAxis: { type: 'category', data: keys, axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontFamily: 'JetBrains Mono', fontSize: 11 } },
|
|
|
+ yAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
|
|
|
+ series: [{
|
|
|
+ type: 'bar', data: vals.map(function(v, i){ return { value: v, itemStyle: { color: colors[i] || GREEN, borderRadius: [4, 4, 0, 0] } }; }),
|
|
|
+ barWidth: '54%',
|
|
|
+ label: { show: true, position: 'top', color: '#F5F5F5', fontFamily: 'JetBrains Mono', fontWeight: 600 }
|
|
|
+ }]
|
|
|
+ }));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 品牌份额(donut)
|
|
|
+ initChart('chartBrandShare', function(chart){
|
|
|
+ var data = (D.topBrandShares || []).map(function(b, i){
|
|
|
+ return { value: b.value, name: b.name, itemStyle: { color: PALETTE[i % PALETTE.length] }, _sales: b.sales, _count: b.count };
|
|
|
+ });
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: { trigger: 'item', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
|
|
|
+ formatter: function(p){ return '<strong>'+p.name+'</strong><br>' + p.value.toFixed(1) + '%<br>SKU '+(p.data._count||0)+' · 月销 $'+((p.data._sales||0)/100).toLocaleString('en-US',{maximumFractionDigits:0}); }
|
|
|
+ },
|
|
|
+ legend: { bottom: 0, textStyle: { color: '#A8A8A8', fontSize: 10 }, itemWidth: 8, itemHeight: 8 },
|
|
|
+ animationDuration: 1400, animationEasing: 'cubicOut',
|
|
|
+ series: [{
|
|
|
+ type: 'pie', radius: ['48%', '72%'], center: ['50%', '45%'],
|
|
|
+ label: { color: '#F5F5F5', fontSize: 10, formatter: function(p){ return p.value > 3 ? p.name + '\n' + p.value.toFixed(1) + '%' : ''; } },
|
|
|
+ labelLine: { show: true, length: 8, length2: 8 },
|
|
|
+ itemStyle: { borderColor: '#0A0A0A', borderWidth: 2 },
|
|
|
+ data: data
|
|
|
+ }]
|
|
|
+ }));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 评论数分布(横条)
|
|
|
+ initChart('chartReviewCount', function(chart){
|
|
|
+ var data = D.reviewCountBuckets || {};
|
|
|
+ var keys = Object.keys(data);
|
|
|
+ var vals = keys.map(function(k){ return data[k]; });
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
|
|
|
+ animationDuration: 1200,
|
|
|
+ xAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
|
|
|
+ yAxis: { type: 'category', data: keys, axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontFamily: 'JetBrains Mono', fontSize: 11 } },
|
|
|
+ series: [{
|
|
|
+ type: 'bar', data: vals,
|
|
|
+ itemStyle: {
|
|
|
+ color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0,
|
|
|
+ colorStops: [{ offset: 0, color: 'rgba(139,92,246,0.2)' }, { offset: 1, color: '#8B5CF6' }] },
|
|
|
+ borderRadius: [0, 3, 3, 0]
|
|
|
+ },
|
|
|
+ barWidth: '56%',
|
|
|
+ label: { show: true, position: 'right', color: '#A8A8A8', fontFamily: 'JetBrains Mono', fontSize: 11 }
|
|
|
+ }]
|
|
|
+ }));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 星级分布
|
|
|
+ initChart('chartStarDist', function(chart){
|
|
|
+ var products = D.starDistProducts || [];
|
|
|
+ if (!products.length) return;
|
|
|
+ var categories = products.map(function(p){ return p.brand + ' · ' + p.asin; });
|
|
|
+ var colors = ['#00DC82','#06B6D4','#F5A623','#F59E0B','#EF4444'];
|
|
|
+ var labels = ['5★','4★','3★','2★','1★'];
|
|
|
+ var series = [0,1,2,3,4].map(function(i){
|
|
|
+ return {
|
|
|
+ name: labels[i], type: 'bar', stack: 'stars',
|
|
|
+ data: products.map(function(p){ return p.stars[i]; }),
|
|
|
+ itemStyle: { color: colors[i] }
|
|
|
+ };
|
|
|
+ });
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
|
|
|
+ legend: { bottom: 0, textStyle: { color: '#A8A8A8', fontSize: 10 }, itemWidth: 10, itemHeight: 10 },
|
|
|
+ animationDuration: 1400,
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '16%', top: '6%', containLabel: true },
|
|
|
+ xAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
|
|
|
+ yAxis: { type: 'category', data: categories, axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontSize: 11 } },
|
|
|
+ series: series
|
|
|
+ }));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 抖音账号作品热度散点
|
|
|
+ initChart('chartDyPosts', function(chart){
|
|
|
+ var posts = (D.douyinPosts || []);
|
|
|
+ if (!posts.length) return;
|
|
|
+ chart.setOption(Object.assign({}, COMMON, {
|
|
|
+ tooltip: { trigger: 'item', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
|
|
|
+ formatter: function(p){
|
|
|
+ return '<div style="max-width:280px;"><strong style="color:#F5A623;">' + (p.data[3]||'').slice(0,60) +
|
|
|
+ '</strong><br>点赞 ' + p.data[0].toLocaleString() + ' · 评论 ' + p.data[1] + ' · 转发 ' + p.data[2] + '</div>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ animationDuration: 1200,
|
|
|
+ xAxis: { type: 'value', name: '点赞', nameTextStyle: { color: '#A8A8A8' }, axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B', formatter: function(v){ return v >= 10000 ? (v/10000).toFixed(1) + 'w' : v; } } },
|
|
|
+ yAxis: { type: 'value', name: '评论', nameTextStyle: { color: '#A8A8A8' }, axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
|
|
|
+ series: [{
|
|
|
+ type: 'scatter',
|
|
|
+ data: posts.map(function(p){ return [p.digg||0, p.comment||0, p.share||0, p.desc||'']; }),
|
|
|
+ symbolSize: function(v){ return Math.max(12, Math.min(60, Math.sqrt((v[2]||0) + 1) * 4)); },
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.RadialGradient(0.4, 0.4, 0.6, [
|
|
|
+ { offset: 0, color: 'rgba(255,77,141,0.9)' },
|
|
|
+ { offset: 1, color: 'rgba(255,77,141,0.2)' }
|
|
|
+ ]),
|
|
|
+ borderColor: '#FF4D8D', borderWidth: 1
|
|
|
+ },
|
|
|
+ emphasis: { itemStyle: { borderWidth: 2, shadowBlur: 16, shadowColor: 'rgba(255,77,141,0.5)' } }
|
|
|
+ }]
|
|
|
+ }));
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // —— Boot ——
|
|
|
+ function boot(){
|
|
|
+ try { splitHeadlines(); } catch(e){ console.error('split', e); }
|
|
|
+ try { initReveal(); } catch(e){ console.error('reveal', e); }
|
|
|
+ try { initCountUp(); } catch(e){ console.error('countup', e); }
|
|
|
+ try { initDeck(); } catch(e){ console.error('deck', e); }
|
|
|
+ try { initCharts(); bootCharts(); } catch(e){ console.error('charts', e); }
|
|
|
+ }
|
|
|
+ if (document.readyState === 'loading'){
|
|
|
+ document.addEventListener('DOMContentLoaded', boot);
|
|
|
+ } else {
|
|
|
+ boot();
|
|
|
+ }
|
|
|
+})();
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|