|
|
@@ -0,0 +1,1336 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+<title>TikHub vs 蝉妈妈 · API 数据能力对比</title>
|
|
|
+<style>
|
|
|
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
|
|
|
+
|
|
|
+ :root {
|
|
|
+ --bg: #0a0a0f;
|
|
|
+ --bg-card: #111118;
|
|
|
+ --bg-hover: #1a1a24;
|
|
|
+ --border: #1e1e2e;
|
|
|
+ --border-light: #2a2a3a;
|
|
|
+ --text: #e8e8f0;
|
|
|
+ --text-secondary: #8888a0;
|
|
|
+ --text-muted: #555568;
|
|
|
+ --accent-tikhub: #6366f1;
|
|
|
+ --accent-tikhub-dim: rgba(99,102,241,0.12);
|
|
|
+ --accent-chanmama: #f59e0b;
|
|
|
+ --accent-chanmama-dim: rgba(245,158,11,0.12);
|
|
|
+ --accent-shared: #10b981;
|
|
|
+ --accent-shared-dim: rgba(16,185,129,0.12);
|
|
|
+ --gradient-tikhub: linear-gradient(135deg, #6366f1, #818cf8);
|
|
|
+ --gradient-chanmama: linear-gradient(135deg, #f59e0b, #fbbf24);
|
|
|
+ --gradient-shared: linear-gradient(135deg, #10b981, #34d399);
|
|
|
+ }
|
|
|
+
|
|
|
+ * { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
+
|
|
|
+ html {
|
|
|
+ scroll-behavior: smooth;
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: #2a2a3a #0a0a0f;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
|
|
|
+ background: var(--bg);
|
|
|
+ color: var(--text);
|
|
|
+ line-height: 1.7;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Scrollbar ─── */
|
|
|
+ ::-webkit-scrollbar { width: 6px; }
|
|
|
+ ::-webkit-scrollbar-track { background: var(--bg); }
|
|
|
+ ::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 3px; }
|
|
|
+
|
|
|
+ /* ─── Hero ─── */
|
|
|
+ .hero {
|
|
|
+ position: relative;
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 4rem 2rem;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -40%;
|
|
|
+ left: -20%;
|
|
|
+ width: 60%;
|
|
|
+ height: 80%;
|
|
|
+ background: radial-gradient(ellipse, rgba(99,102,241,0.06) 0%, transparent 70%);
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -20%;
|
|
|
+ right: -20%;
|
|
|
+ width: 50%;
|
|
|
+ height: 70%;
|
|
|
+ background: radial-gradient(ellipse, rgba(245,158,11,0.04) 0%, transparent 70%);
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-badge {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 6px 16px;
|
|
|
+ border: 1px solid var(--border-light);
|
|
|
+ border-radius: 100px;
|
|
|
+ font-size: 0.75rem;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ letter-spacing: 0.08em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ backdrop-filter: blur(8px);
|
|
|
+ background: rgba(255,255,255,0.02);
|
|
|
+ animation: fadeInDown 0.8s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-badge .dot {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: var(--accent-shared);
|
|
|
+ animation: pulse-dot 2s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes pulse-dot {
|
|
|
+ 0%, 100% { opacity: 1; }
|
|
|
+ 50% { opacity: 0.4; }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero h1 {
|
|
|
+ font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
|
+ font-weight: 800;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: -0.03em;
|
|
|
+ line-height: 1.1;
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ animation: fadeInUp 0.8s ease 0.1s both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero h1 .tikhub { color: #818cf8; }
|
|
|
+ .hero h1 .vs { color: var(--text-muted); font-weight: 300; padding: 0 0.3em; font-size: 0.6em; vertical-align: middle; }
|
|
|
+ .hero h1 .chanmama { color: #fbbf24; }
|
|
|
+
|
|
|
+ .hero-desc {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ text-align: center;
|
|
|
+ max-width: 680px;
|
|
|
+ line-height: 1.8;
|
|
|
+ margin-bottom: 3rem;
|
|
|
+ animation: fadeInUp 0.8s ease 0.2s both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-stats {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 1px;
|
|
|
+ background: var(--border);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ max-width: 700px;
|
|
|
+ width: 100%;
|
|
|
+ animation: fadeInUp 0.8s ease 0.3s both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-stat {
|
|
|
+ background: var(--bg-card);
|
|
|
+ padding: 2rem 1.5rem;
|
|
|
+ text-align: center;
|
|
|
+ transition: background 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-stat:hover { background: var(--bg-hover); }
|
|
|
+
|
|
|
+ .hero-stat .num {
|
|
|
+ font-size: 2.2rem;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ margin-bottom: 0.3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-stat:nth-child(1) .num { color: #818cf8; }
|
|
|
+ .hero-stat:nth-child(2) .num { color: #fbbf24; }
|
|
|
+ .hero-stat:nth-child(3) .num { color: #34d399; }
|
|
|
+
|
|
|
+ .hero-stat .label {
|
|
|
+ font-size: 0.78rem;
|
|
|
+ color: var(--text-muted);
|
|
|
+ letter-spacing: 0.04em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-hint {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 2rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 0.7rem;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ animation: fadeInUp 1s ease 0.6s both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-hint .line {
|
|
|
+ width: 1px;
|
|
|
+ height: 40px;
|
|
|
+ background: linear-gradient(to bottom, var(--text-muted), transparent);
|
|
|
+ animation: scrollLine 2s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes scrollLine {
|
|
|
+ 0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
|
|
|
+ 50% { opacity: 1; transform: scaleY(1); }
|
|
|
+ 100% { opacity: 0; transform: scaleY(1); }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Navigation ─── */
|
|
|
+ .nav {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100;
|
|
|
+ background: rgba(10,10,15,0.85);
|
|
|
+ backdrop-filter: blur(20px) saturate(1.2);
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ padding: 0 2rem;
|
|
|
+ transition: box-shadow 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.3); }
|
|
|
+
|
|
|
+ .nav-inner {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 0;
|
|
|
+ overflow-x: auto;
|
|
|
+ scrollbar-width: none;
|
|
|
+ -ms-overflow-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-inner::-webkit-scrollbar { display: none; }
|
|
|
+
|
|
|
+ .nav-item {
|
|
|
+ position: relative;
|
|
|
+ padding: 1rem 1.5rem;
|
|
|
+ font-size: 0.82rem;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--text-muted);
|
|
|
+ cursor: pointer;
|
|
|
+ white-space: nowrap;
|
|
|
+ transition: color 0.3s;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item:hover { color: var(--text-secondary); }
|
|
|
+ .nav-item.active { color: var(--text); }
|
|
|
+
|
|
|
+ .nav-item.active::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 1.5rem;
|
|
|
+ right: 1.5rem;
|
|
|
+ height: 2px;
|
|
|
+ background: var(--gradient-tikhub);
|
|
|
+ border-radius: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Sections ─── */
|
|
|
+ .section {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 6rem 2rem;
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(30px);
|
|
|
+ transition: opacity 0.6s ease, transform 0.6s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section.visible {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-header {
|
|
|
+ margin-bottom: 3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-label {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 0.72rem;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.12em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ padding: 5px 14px;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-label.tikhub { color: var(--accent-tikhub); background: var(--accent-tikhub-dim); }
|
|
|
+ .section-label.chanmama { color: var(--accent-chanmama); background: var(--accent-chanmama-dim); }
|
|
|
+ .section-label.shared { color: var(--accent-shared); background: var(--accent-shared-dim); }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin-bottom: 0.8rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-desc {
|
|
|
+ font-size: 1rem;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ max-width: 600px;
|
|
|
+ line-height: 1.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Cards Grid ─── */
|
|
|
+ .cards {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
|
+ gap: 1px;
|
|
|
+ background: var(--border);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ background: var(--bg-card);
|
|
|
+ padding: 2rem;
|
|
|
+ transition: background 0.3s;
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card:hover { background: var(--bg-hover); }
|
|
|
+
|
|
|
+ .card-icon {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-bottom: 1.2rem;
|
|
|
+ font-size: 0.85rem;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-icon.tikhub { background: var(--accent-tikhub-dim); color: var(--accent-tikhub); }
|
|
|
+ .card-icon.chanmama { background: var(--accent-chanmama-dim); color: var(--accent-chanmama); }
|
|
|
+ .card-icon.shared { background: var(--accent-shared-dim); color: var(--accent-shared); }
|
|
|
+
|
|
|
+ .card h3 {
|
|
|
+ font-size: 1rem;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 0.6rem;
|
|
|
+ letter-spacing: -0.01em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card p {
|
|
|
+ font-size: 0.85rem;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ line-height: 1.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card .tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 6px;
|
|
|
+ margin-top: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card .tag {
|
|
|
+ font-size: 0.7rem;
|
|
|
+ padding: 3px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(255,255,255,0.04);
|
|
|
+ color: var(--text-muted);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Comparison Table ─── */
|
|
|
+ .comparison-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: separate;
|
|
|
+ border-spacing: 0;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 0.88rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comparison-table thead th {
|
|
|
+ background: var(--bg-card);
|
|
|
+ padding: 1.2rem 1.5rem;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 0.78rem;
|
|
|
+ letter-spacing: 0.06em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: var(--text-muted);
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ }
|
|
|
+
|
|
|
+ .comparison-table thead th:nth-child(2) { color: var(--accent-tikhub); }
|
|
|
+ .comparison-table thead th:nth-child(3) { color: var(--accent-chanmama); }
|
|
|
+
|
|
|
+ .comparison-table tbody td {
|
|
|
+ padding: 1rem 1.5rem;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ vertical-align: top;
|
|
|
+ transition: background 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comparison-table tbody tr:hover td { background: var(--bg-hover); }
|
|
|
+ .comparison-table tbody tr:last-child td { border-bottom: none; }
|
|
|
+
|
|
|
+ .comparison-table .dim-label {
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text);
|
|
|
+ }
|
|
|
+
|
|
|
+ .comparison-table .check {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 0.75rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .check.yes { background: rgba(16,185,129,0.15); color: #34d399; }
|
|
|
+ .check.no { background: rgba(255,255,255,0.03); color: var(--text-muted); }
|
|
|
+
|
|
|
+ .comparison-table .note {
|
|
|
+ font-size: 0.78rem;
|
|
|
+ color: var(--text-muted);
|
|
|
+ margin-top: 4px;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Callout ─── */
|
|
|
+ .callout {
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 2rem;
|
|
|
+ margin: 3rem 0;
|
|
|
+ background: var(--bg-card);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .callout::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 3px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .callout.warning::before { background: var(--gradient-chanmama); }
|
|
|
+ .callout.info::before { background: var(--gradient-tikhub); }
|
|
|
+
|
|
|
+ .callout-title {
|
|
|
+ font-size: 0.92rem;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .callout-text {
|
|
|
+ font-size: 0.85rem;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ line-height: 1.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Scenario Section ─── */
|
|
|
+ .scenarios {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-col {
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-col-header {
|
|
|
+ padding: 1.5rem 2rem;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 0.92rem;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-col:first-child .scenario-col-header {
|
|
|
+ background: var(--accent-tikhub-dim);
|
|
|
+ color: var(--accent-tikhub);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-col:last-child .scenario-col-header {
|
|
|
+ background: var(--accent-chanmama-dim);
|
|
|
+ color: var(--accent-chanmama);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-col-header .indicator {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-col:first-child .indicator { background: var(--accent-tikhub); }
|
|
|
+ .scenario-col:last-child .indicator { background: var(--accent-chanmama); }
|
|
|
+
|
|
|
+ .scenario-list {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0.5rem 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-list li {
|
|
|
+ padding: 1rem 2rem;
|
|
|
+ font-size: 0.88rem;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ border-bottom: 1px solid rgba(255,255,255,0.03);
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 12px;
|
|
|
+ transition: background 0.2s, color 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-list li:hover {
|
|
|
+ background: var(--bg-hover);
|
|
|
+ color: var(--text);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-list li:last-child { border-bottom: none; }
|
|
|
+
|
|
|
+ .scenario-list li .bullet {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-top: 8px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenario-col:first-child .bullet { background: var(--accent-tikhub); }
|
|
|
+ .scenario-col:last-child .bullet { background: var(--accent-chanmama); }
|
|
|
+
|
|
|
+ /* ─── Complementary Table ─── */
|
|
|
+ .complement-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 1px;
|
|
|
+ background: var(--border);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .complement-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 160px 1fr 1fr;
|
|
|
+ background: var(--bg-card);
|
|
|
+ transition: background 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .complement-row:hover { background: var(--bg-hover); }
|
|
|
+
|
|
|
+ .complement-row.header {
|
|
|
+ background: rgba(255,255,255,0.02);
|
|
|
+ }
|
|
|
+
|
|
|
+ .complement-cell {
|
|
|
+ padding: 1rem 1.5rem;
|
|
|
+ font-size: 0.85rem;
|
|
|
+ border-right: 1px solid var(--border);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .complement-cell:last-child { border-right: none; }
|
|
|
+
|
|
|
+ .complement-cell.label {
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text);
|
|
|
+ font-size: 0.82rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .complement-row.header .complement-cell {
|
|
|
+ font-size: 0.72rem;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.08em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: var(--text-muted);
|
|
|
+ padding: 0.8rem 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .complement-row.header .complement-cell:nth-child(2) { color: var(--accent-tikhub); }
|
|
|
+ .complement-row.header .complement-cell:nth-child(3) { color: var(--accent-chanmama); }
|
|
|
+
|
|
|
+ /* ─── Stats Bar ─── */
|
|
|
+ .stats-section {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 1.5rem;
|
|
|
+ margin-top: 3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-block {
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 2rem;
|
|
|
+ background: var(--bg-card);
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-block-title {
|
|
|
+ font-size: 0.72rem;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: var(--text-muted);
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-bar-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-bar-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 1rem;
|
|
|
+ font-size: 0.82rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-bar-label {
|
|
|
+ width: 120px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ font-size: 0.78rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-bar-track {
|
|
|
+ flex: 1;
|
|
|
+ height: 6px;
|
|
|
+ background: rgba(255,255,255,0.04);
|
|
|
+ border-radius: 3px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-bar-fill {
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 3px;
|
|
|
+ transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-bar-fill.tikhub { background: var(--gradient-tikhub); }
|
|
|
+ .stat-bar-fill.chanmama { background: var(--gradient-chanmama); }
|
|
|
+
|
|
|
+ .stat-bar-value {
|
|
|
+ font-size: 0.78rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text);
|
|
|
+ width: 40px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Footer ─── */
|
|
|
+ .footer {
|
|
|
+ text-align: center;
|
|
|
+ padding: 4rem 2rem;
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 0.78rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer p { margin-bottom: 0.3rem; }
|
|
|
+
|
|
|
+ /* ─── Animations ─── */
|
|
|
+ @keyframes fadeInUp {
|
|
|
+ from { opacity: 0; transform: translateY(20px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadeInDown {
|
|
|
+ from { opacity: 0; transform: translateY(-10px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Responsive ─── */
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .cards { grid-template-columns: 1fr; }
|
|
|
+ .scenarios { grid-template-columns: 1fr; }
|
|
|
+ .stats-section { grid-template-columns: 1fr; }
|
|
|
+ .complement-row { grid-template-columns: 120px 1fr 1fr; }
|
|
|
+ .nav-item { padding: 1rem 1rem; font-size: 0.75rem; }
|
|
|
+ .section { padding: 4rem 1.2rem; }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ─── Divider ─── */
|
|
|
+ .divider {
|
|
|
+ height: 1px;
|
|
|
+ background: var(--border);
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<!-- ━━━ Hero ━━━ -->
|
|
|
+<section class="hero">
|
|
|
+ <div class="hero-badge">
|
|
|
+ <span class="dot"></span>
|
|
|
+ <span>API Capability Comparison</span>
|
|
|
+ </div>
|
|
|
+ <h1>
|
|
|
+ <span class="tikhub">TikHub</span>
|
|
|
+ <span class="vs">vs</span>
|
|
|
+ <span class="chanmama">蝉妈妈</span>
|
|
|
+ </h1>
|
|
|
+ <p class="hero-desc">
|
|
|
+ 两套截然不同的数据体系——原始数据爬取 vs 电商深度分析。<br>
|
|
|
+ 以下从接口能力、数据维度、适用场景三个层面展开全景对比。
|
|
|
+ </p>
|
|
|
+ <div class="hero-stats">
|
|
|
+ <div class="hero-stat">
|
|
|
+ <div class="num">300+</div>
|
|
|
+ <div class="label">TikHub 接口总量</div>
|
|
|
+ </div>
|
|
|
+ <div class="hero-stat">
|
|
|
+ <div class="num">24</div>
|
|
|
+ <div class="label">蝉妈妈 数据类型</div>
|
|
|
+ </div>
|
|
|
+ <div class="hero-stat">
|
|
|
+ <div class="num">5</div>
|
|
|
+ <div class="label">核心重叠维度</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="scroll-hint">
|
|
|
+ <span>Scroll</span>
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ━━━ Nav ━━━ -->
|
|
|
+<nav class="nav" id="nav">
|
|
|
+ <div class="nav-inner">
|
|
|
+ <div class="nav-item active" data-target="tikhub-unique">TikHub 独有</div>
|
|
|
+ <div class="nav-item" data-target="chanmama-unique">蝉妈妈 独有</div>
|
|
|
+ <div class="nav-item" data-target="overlap">能力重叠</div>
|
|
|
+ <div class="nav-item" data-target="scenarios">适用场景</div>
|
|
|
+ <div class="nav-item" data-target="stats">接口统计</div>
|
|
|
+ </div>
|
|
|
+</nav>
|
|
|
+
|
|
|
+<!-- ━━━ TikHub Unique ━━━ -->
|
|
|
+<div class="divider"></div>
|
|
|
+<section class="section" id="tikhub-unique">
|
|
|
+ <div class="section-header">
|
|
|
+ <div class="section-label tikhub">TikHub Exclusive</div>
|
|
|
+ <h2 class="section-title">TikHub 独有能力</h2>
|
|
|
+ <p class="section-desc">以原始数据采集为核心,覆盖多平台内容、搜索、互动关系和实时直播等维度。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cards">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">01</div>
|
|
|
+ <h3>原始内容数据获取</h3>
|
|
|
+ <p>无水印视频下载、高清播放链接、弹幕原始数据、首页推荐流、相关作品推荐、分类频道内容。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">视频 V1/V2/V3</span>
|
|
|
+ <span class="tag">弹幕数据</span>
|
|
|
+ <span class="tag">Home Feed</span>
|
|
|
+ <span class="tag">无水印下载</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">02</div>
|
|
|
+ <h3>TikTok 国际版全量接口</h3>
|
|
|
+ <p>完整覆盖 TikTok 的 Web、App、Creator、Analytics、Ads、Shop、Interaction 七大模块。蝉妈妈仅覆盖抖音。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">TikTok Web</span>
|
|
|
+ <span class="tag">TikTok App V3</span>
|
|
|
+ <span class="tag">Creator API</span>
|
|
|
+ <span class="tag">Analytics</span>
|
|
|
+ <span class="tag">Ads API</span>
|
|
|
+ <span class="tag">Shop API</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">03</div>
|
|
|
+ <h3>多平台数据覆盖</h3>
|
|
|
+ <p>同时支持 Instagram、小红书、快手、B站、微信公众号、Sora2 等多个平台的数据获取。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">Instagram</span>
|
|
|
+ <span class="tag">小红书</span>
|
|
|
+ <span class="tag">快手</span>
|
|
|
+ <span class="tag">B站</span>
|
|
|
+ <span class="tag">微信</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">04</div>
|
|
|
+ <h3>深度搜索能力</h3>
|
|
|
+ <p>18+ 种搜索接口——综合、视频、用户、话题、图片、图文、直播、音乐、经验、讨论、学校、图像识别搜索。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">综合搜索</span>
|
|
|
+ <span class="tag">图像识别搜索</span>
|
|
|
+ <span class="tag">多重搜索</span>
|
|
|
+ <span class="tag">关键词建议</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">05</div>
|
|
|
+ <h3>评论原始数据</h3>
|
|
|
+ <p>获取完整评论文本、评论者信息、发布时间、点赞数、回复列表,支持 AI 评论关键词分析。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">评论列表</span>
|
|
|
+ <span class="tag">评论回复</span>
|
|
|
+ <span class="tag">关键词分析</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">06</div>
|
|
|
+ <h3>用户互动关系链</h3>
|
|
|
+ <p>获取完整的粉丝列表、关注列表、点赞列表、收藏夹内容、转发作品列表。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">粉丝列表</span>
|
|
|
+ <span class="tag">关注列表</span>
|
|
|
+ <span class="tag">点赞/收藏</span>
|
|
|
+ <span class="tag">转发</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">07</div>
|
|
|
+ <h3>直播实时数据</h3>
|
|
|
+ <p>实时弹幕流、WebSocket 连接参数、在线状态检测、礼物列表与排行、直播间商品挂车、每日榜单。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">实时弹幕</span>
|
|
|
+ <span class="tag">在线检测</span>
|
|
|
+ <span class="tag">礼物排行</span>
|
|
|
+ <span class="tag">直播商品</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">08</div>
|
|
|
+ <h3>热搜与趋势榜单</h3>
|
|
|
+ <p>抖音热搜榜、直播热搜榜、音乐榜、品牌热榜、TikTok 每日趋势与热门关键词。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">热搜榜</span>
|
|
|
+ <span class="tag">音乐榜</span>
|
|
|
+ <span class="tag">品牌热榜</span>
|
|
|
+ <span class="tag">趋势词</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">09</div>
|
|
|
+ <h3>广告与创作者分析</h3>
|
|
|
+ <p>TikTok Ads 广告搜索/详情/关键词洞察,Creator API 账号健康/违规/受众分析/视频统计/虚假流量检测。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">Ads API</span>
|
|
|
+ <span class="tag">Creator API</span>
|
|
|
+ <span class="tag">Analytics</span>
|
|
|
+ <span class="tag">虚假流量</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon tikhub">10</div>
|
|
|
+ <h3>工具与自动化</h3>
|
|
|
+ <p>链接/ID 提取、短链接/二维码生成、加密解密 (XBogus/ABogus/msToken)、设备注册、Cookie 获取、SSO 登录、自动化交互(评论/点赞/关注)。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">ID 提取</span>
|
|
|
+ <span class="tag">加密算法</span>
|
|
|
+ <span class="tag">设备注册</span>
|
|
|
+ <span class="tag">Interaction</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ━━━ ChanMama Unique ━━━ -->
|
|
|
+<div class="divider"></div>
|
|
|
+<section class="section" id="chanmama-unique">
|
|
|
+ <div class="section-header">
|
|
|
+ <div class="section-label chanmama">ChanMama Exclusive</div>
|
|
|
+ <h2 class="section-title">蝉妈妈独有能力</h2>
|
|
|
+ <p class="section-desc">以电商销售数据为核心壁垒,提供品牌、小店、达人、商品的全链路深度分析。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="callout warning">
|
|
|
+ <div class="callout-title">核心差异 — 销量与销售额数据</div>
|
|
|
+ <div class="callout-text">
|
|
|
+ TikHub 完全无法获取销量 (Sales Volume) 和销售额 (GMV) 数据。这是蝉妈妈最核心的数据壁垒,覆盖商品、品牌、小店、达人四个维度的每日/累计销售数据,并支持直播、视频、商品卡三大渠道拆分。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cards">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon chanmama">01</div>
|
|
|
+ <h3>品牌维度全链路分析</h3>
|
|
|
+ <p>品牌每日销售汇总、品牌关联达人/商品/小店/直播/视频记录、SPU 聚合销售、商品卡渠道销售。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">品牌 GMV</span>
|
|
|
+ <span class="tag">关联达人</span>
|
|
|
+ <span class="tag">SPU 分析</span>
|
|
|
+ <span class="tag">渠道拆分</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon chanmama">02</div>
|
|
|
+ <h3>小店维度运营分析</h3>
|
|
|
+ <p>店铺每日销售汇总、关联达人记录、商品销售排行、带货直播与视频记录。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">店铺 GMV</span>
|
|
|
+ <span class="tag">商品排行</span>
|
|
|
+ <span class="tag">达人矩阵</span>
|
|
|
+ <span class="tag">直播/视频</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon chanmama">03</div>
|
|
|
+ <h3>达人带货深度分析</h3>
|
|
|
+ <p>达人带货记录(商品+销量+佣金)、带货口碑分、带货水平评级、直播 GPM/UV 价值、流量结构、每日带货趋势。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">带货口碑</span>
|
|
|
+ <span class="tag">GPM</span>
|
|
|
+ <span class="tag">UV 价值</span>
|
|
|
+ <span class="tag">佣金数据</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon chanmama">04</div>
|
|
|
+ <h3>商品全链路分析</h3>
|
|
|
+ <p>商品关联达人/直播/视频记录、商品卡独立销售数据、佣金比例、优惠券信息、每日销售趋势。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">关联达人</span>
|
|
|
+ <span class="tag">直播讲解</span>
|
|
|
+ <span class="tag">视频带货</span>
|
|
|
+ <span class="tag">商品卡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon chanmama">05</div>
|
|
|
+ <h3>受众画像分析</h3>
|
|
|
+ <p>性别、年龄、地区、城市等级分布,八大消费人群标签(资深中产、新锐白领、精致妈妈等)、消费偏好分析。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">人群画像</span>
|
|
|
+ <span class="tag">城市等级</span>
|
|
|
+ <span class="tag">消费标签</span>
|
|
|
+ <span class="tag">年龄分布</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon chanmama">06</div>
|
|
|
+ <h3>三渠道销售拆分</h3>
|
|
|
+ <p>将所有销售数据拆分为直播渠道、视频渠道、商品卡渠道三大通路,分别统计销量/销售额/达人数/场次。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">直播渠道</span>
|
|
|
+ <span class="tag">视频渠道</span>
|
|
|
+ <span class="tag">商品卡渠道</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon chanmama">07</div>
|
|
|
+ <h3>SPU 聚合分析</h3>
|
|
|
+ <p>将 SKU 级别商品聚合为 SPU 维度进行分析,获取 SPU 级别的销量/销售额趋势。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">SKU→SPU</span>
|
|
|
+ <span class="tag">SPU 销售额</span>
|
|
|
+ <span class="tag">SPU 趋势</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon chanmama">08</div>
|
|
|
+ <h3>品类分类体系</h3>
|
|
|
+ <p>蝉妈妈自建品类 + 抖音官方品类双分类体系,支持品类层级映射关系和品类市场分析。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag">蝉妈妈品类</span>
|
|
|
+ <span class="tag">抖音品类</span>
|
|
|
+ <span class="tag">双分类映射</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ━━━ Overlap ━━━ -->
|
|
|
+<div class="divider"></div>
|
|
|
+<section class="section" id="overlap">
|
|
|
+ <div class="section-header">
|
|
|
+ <div class="section-label shared">Overlap Analysis</div>
|
|
|
+ <h2 class="section-title">能力重叠区域</h2>
|
|
|
+ <p class="section-desc">两者在用户信息、视频数据、商品信息、评价数据、直播间数据等方面存在重叠,但侧重点截然不同。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table class="comparison-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th style="width:160px">数据维度</th>
|
|
|
+ <th>TikHub</th>
|
|
|
+ <th>蝉妈妈</th>
|
|
|
+ <th>差异说明</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td class="dim-label">用户/达人基础信息</td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">完整原始数据:昵称、头像、签名、粉丝数、关注数、获赞数、认证信息</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">精简业务数据:昵称、抖音号、粉丝量级、MCN、认证、带货口碑</div>
|
|
|
+ </td>
|
|
|
+ <td class="note">TikHub 更全但偏原始;蝉妈妈增加了带货相关字段</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="dim-label">视频基础数据</td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">完整元数据:标题、描述、播放链接、封面、互动数据、作者、音乐、话题标签</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">简要信息 + 销售转化:视频标题、时长、互动数据、销量、销售额</div>
|
|
|
+ </td>
|
|
|
+ <td class="note">TikHub 有完整视频元数据;蝉妈妈有销售转化数据</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="dim-label">商品基础信息</td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">商品详情、SKU 列表、价格、评价列表原文</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">商品标题/ID/分类/价格/佣金/好评率 + 销量销售额</div>
|
|
|
+ </td>
|
|
|
+ <td class="note">TikHub 有 SKU 级别详情;蝉妈妈有佣金和销售数据</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="dim-label">商品评价</td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">评价列表原文、逐条评论文本</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">好评率数值(汇总指标)</div>
|
|
|
+ </td>
|
|
|
+ <td class="note">TikHub 有评论原文;蝉妈妈只有汇总评分</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="dim-label">直播间数据</td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">直播流、弹幕、商品挂车、礼物、排行、在线检测</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">直播标题/时间/观看人次/销量销售额/GPM/UV 价值</div>
|
|
|
+ </td>
|
|
|
+ <td class="note">TikHub 偏实时互动;蝉妈妈偏销售效率分析</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="dim-label">话题/标签</td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">话题详情、作品列表、搜索</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="check no">—</span>
|
|
|
+ <div class="note">无独立话题接口</div>
|
|
|
+ </td>
|
|
|
+ <td class="note">TikHub 独有</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="dim-label">音乐数据</td>
|
|
|
+ <td>
|
|
|
+ <span class="check yes">✓</span>
|
|
|
+ <div class="note">音乐详情、视频列表、搜索、排行榜</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="check no">—</span>
|
|
|
+ </td>
|
|
|
+ <td class="note">TikHub 独有</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ━━━ Scenarios ━━━ -->
|
|
|
+<div class="divider"></div>
|
|
|
+<section class="section" id="scenarios">
|
|
|
+ <div class="section-header">
|
|
|
+ <div class="section-label shared">Use Cases</div>
|
|
|
+ <h2 class="section-title">适用场景</h2>
|
|
|
+ <p class="section-desc">两套 API 的能力互补而非替代,以下是各自最佳适用场景。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="scenarios">
|
|
|
+ <div class="scenario-col">
|
|
|
+ <div class="scenario-col-header">
|
|
|
+ <div class="indicator"></div>
|
|
|
+ 适合 TikHub 的场景
|
|
|
+ </div>
|
|
|
+ <ul class="scenario-list">
|
|
|
+ <li><div class="bullet"></div>内容采集 — 批量获取视频、评论、用户信息等原始数据</li>
|
|
|
+ <li><div class="bullet"></div>多平台覆盖 — TikTok 国际版、Instagram、小红书等</li>
|
|
|
+ <li><div class="bullet"></div>舆情监控 — 评论采集与分析、弹幕实时监控</li>
|
|
|
+ <li><div class="bullet"></div>关键词搜索 — 多维度深度搜索(视频/用户/话题/图片等)</li>
|
|
|
+ <li><div class="bullet"></div>广告分析 — TikTok Ads 广告投放数据分析</li>
|
|
|
+ <li><div class="bullet"></div>自动化操作 — 自动评论、点赞、关注等</li>
|
|
|
+ <li><div class="bullet"></div>技术集成 — 获取原始 API 数据构建自己的分析系统</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="scenario-col">
|
|
|
+ <div class="scenario-col-header">
|
|
|
+ <div class="indicator"></div>
|
|
|
+ 适合蝉妈妈的场景
|
|
|
+ </div>
|
|
|
+ <ul class="scenario-list">
|
|
|
+ <li><div class="bullet"></div>销售数据分析 — 商品/品牌/小店/达人的销量和 GMV</li>
|
|
|
+ <li><div class="bullet"></div>品牌竞品分析 — 品牌维度的全链路销售分析</li>
|
|
|
+ <li><div class="bullet"></div>店铺运营分析 — 小店销售、关联达人、商品表现</li>
|
|
|
+ <li><div class="bullet"></div>达人筛选 — 通过带货数据筛选合适的达人合作</li>
|
|
|
+ <li><div class="bullet"></div>趋势追踪 — 每日销售趋势、渠道拆分</li>
|
|
|
+ <li><div class="bullet"></div>受众画像 — 目标人群分析与消费标签</li>
|
|
|
+ <li><div class="bullet"></div>品类研究 — 品类层级体系和市场分析</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="complement-grid">
|
|
|
+ <div class="complement-row header">
|
|
|
+ <div class="complement-cell">业务需求</div>
|
|
|
+ <div class="complement-cell">TikHub 提供</div>
|
|
|
+ <div class="complement-cell">蝉妈妈 提供</div>
|
|
|
+ </div>
|
|
|
+ <div class="complement-row">
|
|
|
+ <div class="complement-cell label">竞品分析</div>
|
|
|
+ <div class="complement-cell">竞品视频内容、评论舆情</div>
|
|
|
+ <div class="complement-cell">竞品销量、市场份额</div>
|
|
|
+ </div>
|
|
|
+ <div class="complement-row">
|
|
|
+ <div class="complement-cell label">达人合作</div>
|
|
|
+ <div class="complement-cell">粉丝画像、内容风格</div>
|
|
|
+ <div class="complement-cell">带货数据、佣金、ROI</div>
|
|
|
+ </div>
|
|
|
+ <div class="complement-row">
|
|
|
+ <div class="complement-cell label">商品调研</div>
|
|
|
+ <div class="complement-cell">评价原文、SKU 详情</div>
|
|
|
+ <div class="complement-cell">销量趋势、渠道表现</div>
|
|
|
+ </div>
|
|
|
+ <div class="complement-row">
|
|
|
+ <div class="complement-cell label">市场洞察</div>
|
|
|
+ <div class="complement-cell">热搜趋势、话题热度</div>
|
|
|
+ <div class="complement-cell">品牌/品类销售数据</div>
|
|
|
+ </div>
|
|
|
+ <div class="complement-row">
|
|
|
+ <div class="complement-cell label">VOC 分析</div>
|
|
|
+ <div class="complement-cell">评论/弹幕原始文本</div>
|
|
|
+ <div class="complement-cell">受众画像、消费人群</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ━━━ Stats ━━━ -->
|
|
|
+<div class="divider"></div>
|
|
|
+<section class="section" id="stats">
|
|
|
+ <div class="section-header">
|
|
|
+ <div class="section-label shared">Statistics</div>
|
|
|
+ <h2 class="section-title">接口数量统计</h2>
|
|
|
+ <p class="section-desc">TikHub 按 API endpoint 计数;蝉妈妈按数据表类型计数。两者统计口径不同。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="stats-section">
|
|
|
+ <div class="stat-block">
|
|
|
+ <div class="stat-block-title">TikHub 各模块接口数</div>
|
|
|
+ <div class="stat-bar-group">
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">TikTok App V3</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill tikhub" data-width="93%"></div></div>
|
|
|
+ <div class="stat-bar-value">70+</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">抖音 Web</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill tikhub" data-width="80%"></div></div>
|
|
|
+ <div class="stat-bar-value">60+</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">TikTok Web</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill tikhub" data-width="67%"></div></div>
|
|
|
+ <div class="stat-bar-value">50+</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">抖音 App V3</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill tikhub" data-width="53%"></div></div>
|
|
|
+ <div class="stat-bar-value">40+</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">TikTok Ads</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill tikhub" data-width="40%"></div></div>
|
|
|
+ <div class="stat-bar-value">30+</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">抖音搜索</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill tikhub" data-width="24%"></div></div>
|
|
|
+ <div class="stat-bar-value">18</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">TikTok Shop</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill tikhub" data-width="20%"></div></div>
|
|
|
+ <div class="stat-bar-value">15</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">Creator API</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill tikhub" data-width="19%"></div></div>
|
|
|
+ <div class="stat-bar-value">14</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="stat-block">
|
|
|
+ <div class="stat-block-title">蝉妈妈各模块数据表</div>
|
|
|
+ <div class="stat-bar-group">
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">品牌数据</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill chanmama" data-width="100%"></div></div>
|
|
|
+ <div class="stat-bar-value">8</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">商品数据</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill chanmama" data-width="75%"></div></div>
|
|
|
+ <div class="stat-bar-value">6</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">达人数据</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill chanmama" data-width="63%"></div></div>
|
|
|
+ <div class="stat-bar-value">5</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-bar-item">
|
|
|
+ <div class="stat-bar-label">小店数据</div>
|
|
|
+ <div class="stat-bar-track"><div class="stat-bar-fill chanmama" data-width="63%"></div></div>
|
|
|
+ <div class="stat-bar-value">5</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="callout info" style="margin-top: 2rem; padding: 1.2rem 1.5rem;">
|
|
|
+ <div class="callout-text">
|
|
|
+ 蝉妈妈接口数少但每张数据表字段极其丰富(单表 30-80 个字段),且均为深度加工后的商业分析数据。TikHub 接口数量多但含大量工具类/辅助类接口。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ━━━ Footer ━━━ -->
|
|
|
+<footer class="footer">
|
|
|
+ <p>TikHub vs 蝉妈妈 API 数据能力对比分析</p>
|
|
|
+ <p style="margin-top: 4px;">基于 TikHub 官方文档 (docs.tikhub.io) 与蝉妈妈本地接口文档生成</p>
|
|
|
+</footer>
|
|
|
+
|
|
|
+<script>
|
|
|
+// ─── Intersection Observer for sections ───
|
|
|
+const sections = document.querySelectorAll('.section');
|
|
|
+const observer = new IntersectionObserver((entries) => {
|
|
|
+ entries.forEach(entry => {
|
|
|
+ if (entry.isIntersecting) {
|
|
|
+ entry.target.classList.add('visible');
|
|
|
+ // Animate stat bars
|
|
|
+ entry.target.querySelectorAll('.stat-bar-fill').forEach(bar => {
|
|
|
+ bar.style.width = bar.dataset.width;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+}, { threshold: 0.1 });
|
|
|
+
|
|
|
+sections.forEach(s => observer.observe(s));
|
|
|
+
|
|
|
+// ─── Sticky nav active state ───
|
|
|
+const nav = document.getElementById('nav');
|
|
|
+const navItems = document.querySelectorAll('.nav-item');
|
|
|
+
|
|
|
+window.addEventListener('scroll', () => {
|
|
|
+ // Add shadow when scrolled
|
|
|
+ nav.classList.toggle('scrolled', window.scrollY > 100);
|
|
|
+
|
|
|
+ // Update active nav item
|
|
|
+ let current = '';
|
|
|
+ sections.forEach(s => {
|
|
|
+ const top = s.offsetTop - 120;
|
|
|
+ if (window.scrollY >= top) current = s.id;
|
|
|
+ });
|
|
|
+
|
|
|
+ navItems.forEach(item => {
|
|
|
+ item.classList.toggle('active', item.dataset.target === current);
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+// ─── Nav click scroll ───
|
|
|
+navItems.forEach(item => {
|
|
|
+ item.addEventListener('click', () => {
|
|
|
+ const target = document.getElementById(item.dataset.target);
|
|
|
+ if (target) {
|
|
|
+ window.scrollTo({ top: target.offsetTop - 60, behavior: 'smooth' });
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|