siluzan-tso-cli 1.1.12 → 1.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -29
- package/dist/index.js +2267 -1440
- package/dist/skill/SKILL.md +93 -34
- package/dist/skill/_meta.json +2 -2
- package/dist/skill/assets/campaign-create-template.json +96 -101
- package/dist/skill/references/account-analytics.md +64 -62
- package/dist/skill/references/accounts.md +130 -130
- package/dist/skill/references/clue.md +13 -13
- package/dist/skill/references/finance.md +62 -61
- package/dist/skill/references/forewarning.md +40 -39
- package/dist/skill/references/google-ads-rules/google-ads-account-audit.md +165 -161
- package/dist/skill/references/google-ads-rules/google-ads-audience-strategy.md +94 -85
- package/dist/skill/references/google-ads-rules/google-ads-campaign-optimization.md +97 -85
- package/dist/skill/references/google-ads-rules/google-ads-compliance.md +274 -272
- package/dist/skill/references/google-ads-rules/google-ads-conversion-architecture.md +97 -82
- package/dist/skill/references/google-ads-rules/google-ads-creative-optimization.md +143 -139
- package/dist/skill/references/google-ads-rules/google-ads-keyword-optimization.md +131 -128
- package/dist/skill/references/google-ads-rules/google-ads-keyword-strategy.md +175 -173
- package/dist/skill/references/google-ads-rules/google-ads-launch-plan-template.md +126 -123
- package/dist/skill/references/google-ads-rules/google-ads-pmax-guide.md +86 -73
- package/dist/skill/references/google-ads-rules/sensitive-industries.md +43 -8
- package/dist/skill/references/google-ads.md +201 -196
- package/dist/skill/references/open-account-by-media.md +23 -23
- package/dist/skill/references/open-account-google-ui.md +26 -26
- package/dist/skill/references/optimize.md +8 -8
- package/dist/skill/references/reporting.md +28 -28
- package/dist/skill/references/setup.md +10 -7
- package/dist/skill/references/tso-home.md +11 -11
- package/dist/skill/references/workflows.md +28 -26
- package/dist/skill/report-templates/README.md +22 -21
- package/dist/skill/report-templates/REPORT-WORKFLOW.md +9 -9
- package/dist/skill/report-templates/bing-period-report.md +11 -11
- package/dist/skill/report-templates/google-ads-diagnosis.md +86 -86
- package/dist/skill/report-templates/google-period-report.md +23 -23
- package/dist/skill/report-templates/report-template-academic.html +433 -341
- package/dist/skill/report-templates/report-template-dark.html +440 -257
- package/dist/skill/report-templates/report-template-formal.html +438 -288
- package/dist/skill/report-templates/report-template-mobile.html +456 -241
- package/dist/skill/report-templates/report-template-onepager.html +452 -240
- package/dist/skill/report-templates/report-template-print.html +355 -243
- package/dist/skill/report-templates/report-template.html +485 -392
- package/dist/skill/report-templates/tiktok-period-report.md +10 -10
- package/package.json +13 -13
- package/scripts/postinstall.mjs +3 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<!--
|
|
3
3
|
风格：极简黑白 / 打印优先（灰阶、无阴影、无圆角装饰、状态不完全依赖色相）
|
|
4
4
|
与 report-template.html 的 data-section-id 一致。打印时图表仍为灰度；正式印刷可导出 PDF 后转灰。
|
|
@@ -7,262 +7,374 @@
|
|
|
7
7
|
如需离线使用，请将对应资源下载到本地并替换 <script>/<link> 的 src/href。
|
|
8
8
|
-->
|
|
9
9
|
<html lang="zh-CN">
|
|
10
|
-
<head>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
10
|
+
<head>
|
|
11
|
+
<meta charset="UTF-8" />
|
|
12
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
13
|
+
<title>广告数据报告 — 黑白打印版式参考</title>
|
|
14
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
15
|
+
<link
|
|
16
|
+
rel="stylesheet"
|
|
17
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
|
18
|
+
crossorigin="anonymous"
|
|
19
|
+
referrerpolicy="no-referrer"
|
|
20
|
+
/>
|
|
21
|
+
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
|
|
22
|
+
<style>
|
|
23
|
+
/* 屏幕上也保持「纸面」灰阶；打印增强对比 */
|
|
24
|
+
body {
|
|
25
|
+
-webkit-print-color-adjust: exact;
|
|
26
|
+
print-color-adjust: exact;
|
|
27
|
+
}
|
|
28
|
+
@media print {
|
|
29
|
+
.no-print {
|
|
30
|
+
display: none !important;
|
|
31
|
+
}
|
|
32
|
+
main {
|
|
33
|
+
max-width: 100% !important;
|
|
34
|
+
padding: 0 !important;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
</style>
|
|
38
|
+
</head>
|
|
39
|
+
<body class="min-h-screen bg-white text-neutral-900 antialiased">
|
|
40
|
+
<main class="mx-auto max-w-5xl px-4 py-8 sm:px-6">
|
|
41
|
+
<header class="mb-8 border-b-2 border-black pb-5">
|
|
42
|
+
<p class="text-xs font-bold uppercase tracking-widest text-neutral-600">
|
|
43
|
+
Siluzan · 投放分析
|
|
44
|
+
</p>
|
|
45
|
+
<h1 class="mt-2 text-2xl font-black text-black sm:text-3xl">
|
|
46
|
+
<i class="fa-solid fa-print mr-2 text-neutral-700" aria-hidden="true"></i>
|
|
47
|
+
数据报告标题
|
|
48
|
+
</h1>
|
|
49
|
+
<div class="mt-4 flex flex-wrap gap-3 border border-black bg-white px-3 py-2 text-sm">
|
|
50
|
+
<span>账户 <strong id="accountName" class="font-bold">示例账户</strong></span>
|
|
51
|
+
<span class="text-neutral-400">|</span>
|
|
52
|
+
<span
|
|
53
|
+
>区间
|
|
54
|
+
<strong id="reportPeriod" class="tabular-nums font-bold"
|
|
55
|
+
>2026-03-01 ~ 2026-03-07</strong
|
|
56
|
+
></span
|
|
57
|
+
>
|
|
58
|
+
</div>
|
|
59
|
+
</header>
|
|
52
60
|
|
|
53
|
-
<
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
<p id="spendPct" class="mt-1 text-xs font-bold">环比 <span class="underline">↑ +8.2%</span>（优）</p>
|
|
58
|
-
</article>
|
|
59
|
-
<article class="bg-white p-4">
|
|
60
|
-
<p class="text-xs font-bold uppercase text-neutral-600">展示</p>
|
|
61
|
-
<p id="impressionsValue" class="mt-1 text-xl font-black tabular-nums">1.24M</p>
|
|
62
|
-
<p id="impressionsPct" class="mt-1 text-xs font-bold">环比 <span class="underline">↓ −2.1%</span></p>
|
|
63
|
-
</article>
|
|
64
|
-
<article class="bg-white p-4">
|
|
65
|
-
<p class="text-xs font-bold uppercase text-neutral-600">点击</p>
|
|
66
|
-
<p id="clicksValue" class="mt-1 text-xl font-black tabular-nums">18,420</p>
|
|
67
|
-
<p id="clicksPct" class="mt-1 text-xs">CTR <strong>1.49%</strong></p>
|
|
68
|
-
</article>
|
|
69
|
-
<article class="bg-white p-4">
|
|
70
|
-
<p class="text-xs font-bold uppercase text-neutral-600">转化</p>
|
|
71
|
-
<p class="mt-1 text-xl font-black tabular-nums">312</p>
|
|
72
|
-
<p class="mt-1 text-xs">CPA <strong>¥40.3</strong></p>
|
|
73
|
-
</article>
|
|
74
|
-
</div>
|
|
61
|
+
<aside class="no-print mb-8 border-2 border-black border-dashed bg-neutral-50 p-4 text-sm">
|
|
62
|
+
<p class="font-bold">数据口径（示例）</p>
|
|
63
|
+
<p class="mt-1 text-neutral-800">BingV2：区间不可含今天/昨天。</p>
|
|
64
|
+
</aside>
|
|
75
65
|
|
|
76
|
-
<
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
66
|
+
<section class="mb-10" data-section-id="section-executive-summary">
|
|
67
|
+
<h2 class="mb-3 border-b border-black pb-1 text-lg font-black text-black">
|
|
68
|
+
<span class="mr-2 font-mono text-base font-bold text-neutral-600">1</span>
|
|
69
|
+
执行摘要 · 核心指标
|
|
70
|
+
</h2>
|
|
71
|
+
<p class="mb-4 text-sm text-neutral-700">环比优劣用「↑/↓」与加粗标注，不完全依赖颜色。</p>
|
|
81
72
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<
|
|
95
|
-
</
|
|
96
|
-
</
|
|
97
|
-
<
|
|
98
|
-
<
|
|
99
|
-
<
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
73
|
+
<div class="grid grid-cols-2 gap-px border border-black bg-black lg:grid-cols-4">
|
|
74
|
+
<article class="bg-white p-4">
|
|
75
|
+
<p class="text-xs font-bold uppercase text-neutral-600">消耗</p>
|
|
76
|
+
<p id="spendValue" class="mt-1 text-xl font-black tabular-nums">¥12,580</p>
|
|
77
|
+
<p id="spendPct" class="mt-1 text-xs font-bold">
|
|
78
|
+
环比 <span class="underline">↑ +8.2%</span>（优）
|
|
79
|
+
</p>
|
|
80
|
+
</article>
|
|
81
|
+
<article class="bg-white p-4">
|
|
82
|
+
<p class="text-xs font-bold uppercase text-neutral-600">展示</p>
|
|
83
|
+
<p id="impressionsValue" class="mt-1 text-xl font-black tabular-nums">1.24M</p>
|
|
84
|
+
<p id="impressionsPct" class="mt-1 text-xs font-bold">
|
|
85
|
+
环比 <span class="underline">↓ −2.1%</span>
|
|
86
|
+
</p>
|
|
87
|
+
</article>
|
|
88
|
+
<article class="bg-white p-4">
|
|
89
|
+
<p class="text-xs font-bold uppercase text-neutral-600">点击</p>
|
|
90
|
+
<p id="clicksValue" class="mt-1 text-xl font-black tabular-nums">18,420</p>
|
|
91
|
+
<p id="clicksPct" class="mt-1 text-xs">CTR <strong>1.49%</strong></p>
|
|
92
|
+
</article>
|
|
93
|
+
<article class="bg-white p-4">
|
|
94
|
+
<p class="text-xs font-bold uppercase text-neutral-600">转化</p>
|
|
95
|
+
<p class="mt-1 text-xl font-black tabular-nums">312</p>
|
|
96
|
+
<p class="mt-1 text-xs">CPA <strong>¥40.3</strong></p>
|
|
97
|
+
</article>
|
|
98
|
+
</div>
|
|
106
99
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
<div class="bg-white p-3 text-center"><p class="text-xl font-black">128</p><p class="text-xs text-neutral-600">广告组</p></div>
|
|
116
|
-
<div class="bg-white p-3 text-center"><p class="text-xl font-black">3.2k</p><p class="text-xs text-neutral-600">关键字</p></div>
|
|
117
|
-
<div class="bg-white p-3 text-center"><p class="text-xl font-black">860</p><p class="text-xs text-neutral-600">广告</p></div>
|
|
118
|
-
<div class="bg-white p-3 text-center"><p class="text-xl font-black">12</p><p class="text-xs text-neutral-600">国家</p></div>
|
|
119
|
-
<div class="bg-white p-3 text-center"><p class="text-xl font-black">24</p><p class="text-xs text-neutral-600">附加链接</p></div>
|
|
100
|
+
<div class="mt-6 border-2 border-black p-4">
|
|
101
|
+
<p class="mb-2 text-sm font-bold">图 1 关键指标趋势（灰度）</p>
|
|
102
|
+
<div
|
|
103
|
+
id="trendChart"
|
|
104
|
+
class="h-72 w-full min-h-[240px]"
|
|
105
|
+
role="img"
|
|
106
|
+
aria-label="趋势图"
|
|
107
|
+
></div>
|
|
120
108
|
</div>
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
109
|
+
</section>
|
|
110
|
+
|
|
111
|
+
<section class="mb-10" data-section-id="section-kpi-funnel">
|
|
112
|
+
<h2 class="mb-3 border-b border-black pb-1 text-lg font-black">
|
|
113
|
+
<span class="mr-2 font-mono text-base text-neutral-600">2</span>
|
|
114
|
+
漏斗式概览
|
|
115
|
+
</h2>
|
|
116
|
+
<div class="overflow-x-auto border-2 border-black">
|
|
117
|
+
<table class="min-w-full border-collapse text-sm">
|
|
118
|
+
<thead>
|
|
119
|
+
<tr class="border-b-2 border-black bg-neutral-100">
|
|
120
|
+
<th class="border-r border-black px-3 py-2 text-left font-bold">步骤</th>
|
|
121
|
+
<th class="border-r border-black px-3 py-2 text-left font-bold">指标</th>
|
|
122
|
+
<th class="border-r border-black px-3 py-2 text-right font-bold">数值</th>
|
|
123
|
+
<th class="px-3 py-2 text-left font-bold">附注</th>
|
|
124
|
+
</tr>
|
|
125
|
+
</thead>
|
|
126
|
+
<tbody>
|
|
127
|
+
<tr class="border-b border-black">
|
|
128
|
+
<td class="border-r border-black px-3 py-2 font-bold">1</td>
|
|
129
|
+
<td class="border-r border-black px-3 py-2">消耗 (Cost)</td>
|
|
130
|
+
<td class="border-r border-black px-3 py-2 text-right tabular-nums font-bold">
|
|
131
|
+
¥12,580
|
|
132
|
+
</td>
|
|
133
|
+
<td class="px-3 py-2">—</td>
|
|
134
|
+
</tr>
|
|
135
|
+
<tr class="border-b border-black">
|
|
136
|
+
<td class="border-r border-black px-3 py-2 font-bold">2</td>
|
|
137
|
+
<td class="border-r border-black px-3 py-2">展示次数</td>
|
|
138
|
+
<td class="border-r border-black px-3 py-2 text-right tabular-nums font-bold">
|
|
139
|
+
1,240,000
|
|
140
|
+
</td>
|
|
141
|
+
<td class="px-3 py-2">—</td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr class="border-b border-black">
|
|
144
|
+
<td class="border-r border-black px-3 py-2 font-bold">3</td>
|
|
145
|
+
<td class="border-r border-black px-3 py-2">点击次数</td>
|
|
146
|
+
<td class="border-r border-black px-3 py-2 text-right tabular-nums font-bold">
|
|
147
|
+
18,420
|
|
148
|
+
</td>
|
|
149
|
+
<td class="px-3 py-2">CTR 1.49%</td>
|
|
150
|
+
</tr>
|
|
151
|
+
<tr>
|
|
152
|
+
<td class="border-r border-black px-3 py-2 font-bold">4</td>
|
|
153
|
+
<td class="border-r border-black px-3 py-2">转化次数</td>
|
|
154
|
+
<td class="border-r border-black px-3 py-2 text-right tabular-nums font-bold">
|
|
155
|
+
312
|
|
156
|
+
</td>
|
|
157
|
+
<td class="px-3 py-2">CVR —</td>
|
|
158
|
+
</tr>
|
|
159
|
+
</tbody>
|
|
160
|
+
</table>
|
|
124
161
|
</div>
|
|
125
|
-
</
|
|
126
|
-
</section>
|
|
162
|
+
</section>
|
|
127
163
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
164
|
+
<section class="mb-10" data-section-id="section-structure-breakdown">
|
|
165
|
+
<h2 class="mb-3 border-b border-black pb-1 text-lg font-black">
|
|
166
|
+
<span class="mr-2 font-mono text-base text-neutral-600">3</span>
|
|
167
|
+
账户结构 & 分布
|
|
168
|
+
</h2>
|
|
169
|
+
<div class="grid gap-6 lg:grid-cols-2">
|
|
170
|
+
<div class="grid grid-cols-2 gap-px border border-black bg-black sm:grid-cols-3">
|
|
171
|
+
<div class="bg-white p-3 text-center">
|
|
172
|
+
<p class="text-xl font-black">42</p>
|
|
173
|
+
<p class="text-xs text-neutral-600">有效系列</p>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="bg-white p-3 text-center">
|
|
176
|
+
<p class="text-xl font-black">128</p>
|
|
177
|
+
<p class="text-xs text-neutral-600">广告组</p>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="bg-white p-3 text-center">
|
|
180
|
+
<p class="text-xl font-black">3.2k</p>
|
|
181
|
+
<p class="text-xs text-neutral-600">关键字</p>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="bg-white p-3 text-center">
|
|
184
|
+
<p class="text-xl font-black">860</p>
|
|
185
|
+
<p class="text-xs text-neutral-600">广告</p>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="bg-white p-3 text-center">
|
|
188
|
+
<p class="text-xl font-black">12</p>
|
|
189
|
+
<p class="text-xs text-neutral-600">国家</p>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="bg-white p-3 text-center">
|
|
192
|
+
<p class="text-xl font-black">24</p>
|
|
193
|
+
<p class="text-xs text-neutral-600">附加链接</p>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="border-2 border-black p-4">
|
|
197
|
+
<p class="mb-2 text-sm font-bold">图 2 设备构成</p>
|
|
198
|
+
<div id="breakdownChart" class="h-64 w-full" role="img" aria-label="饼图"></div>
|
|
199
|
+
</div>
|
|
140
200
|
</div>
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
201
|
+
</section>
|
|
202
|
+
|
|
203
|
+
<section class="mb-10" data-section-id="section-diagnosis-pros-cons">
|
|
204
|
+
<h2 class="mb-3 border-b border-black pb-1 text-lg font-black">
|
|
205
|
+
<span class="mr-2 font-mono text-base text-neutral-600">4</span>
|
|
206
|
+
诊断概览
|
|
207
|
+
</h2>
|
|
208
|
+
<div class="grid gap-4 md:grid-cols-2">
|
|
209
|
+
<div class="border-2 border-black p-4">
|
|
210
|
+
<h3 class="mb-2 text-sm font-black">【优势】</h3>
|
|
211
|
+
<ul class="list-disc space-y-1 pl-5 text-sm">
|
|
212
|
+
<li><strong>消耗效率稳定</strong> — CPA 低于均值。</li>
|
|
213
|
+
<li><strong>高意向词覆盖</strong> — CVR 提升。</li>
|
|
214
|
+
</ul>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="border-2 border-black border-double p-4">
|
|
217
|
+
<h3 class="mb-2 text-sm font-black">【不足】</h3>
|
|
218
|
+
<ul class="list-disc space-y-1 pl-5 text-sm">
|
|
219
|
+
<li><strong>展示份额下滑</strong>。</li>
|
|
220
|
+
<li><strong>否词待补充</strong>。</li>
|
|
221
|
+
</ul>
|
|
222
|
+
</div>
|
|
147
223
|
</div>
|
|
148
|
-
</
|
|
149
|
-
</section>
|
|
224
|
+
</section>
|
|
150
225
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
226
|
+
<section class="mb-10" data-section-id="section-data-table">
|
|
227
|
+
<h2 class="mb-3 border-b border-black pb-1 text-lg font-black">
|
|
228
|
+
<span class="mr-2 font-mono text-base text-neutral-600">5</span>
|
|
229
|
+
明细表
|
|
230
|
+
</h2>
|
|
231
|
+
<div class="overflow-x-auto border-2 border-black">
|
|
232
|
+
<table class="min-w-[640px] w-full border-collapse text-sm">
|
|
233
|
+
<thead>
|
|
234
|
+
<tr class="border-b-2 border-black bg-neutral-100">
|
|
235
|
+
<th class="border-r border-black px-3 py-2 text-left font-bold">系列</th>
|
|
236
|
+
<th class="border-r border-black px-3 py-2 font-bold">花费</th>
|
|
237
|
+
<th class="border-r border-black px-3 py-2 font-bold">点击</th>
|
|
238
|
+
<th class="border-r border-black px-3 py-2 font-bold">转化</th>
|
|
239
|
+
<th class="border-r border-black px-3 py-2 font-bold">CVR</th>
|
|
240
|
+
<th class="px-3 py-2 font-bold">环比花费</th>
|
|
241
|
+
</tr>
|
|
242
|
+
</thead>
|
|
243
|
+
<tbody>
|
|
244
|
+
<tr class="border-b border-black">
|
|
245
|
+
<td class="border-r border-black px-3 py-2 font-bold">品牌-搜索</td>
|
|
246
|
+
<td class="border-r border-black px-3 py-2 tabular-nums">¥4,200</td>
|
|
247
|
+
<td class="border-r border-black px-3 py-2 tabular-nums">2,100</td>
|
|
248
|
+
<td class="border-r border-black px-3 py-2 tabular-nums">98</td>
|
|
249
|
+
<td class="border-r border-black px-3 py-2 tabular-nums">4.7%</td>
|
|
250
|
+
<td class="px-3 py-2 font-bold">↑ +5%</td>
|
|
251
|
+
</tr>
|
|
252
|
+
<tr>
|
|
253
|
+
<td class="border-r border-black px-3 py-2 font-bold">通用-搜索</td>
|
|
254
|
+
<td class="border-r border-black px-3 py-2 tabular-nums">¥8,380</td>
|
|
255
|
+
<td class="border-r border-black px-3 py-2 tabular-nums">16,320</td>
|
|
256
|
+
<td class="border-r border-black px-3 py-2 tabular-nums">214</td>
|
|
257
|
+
<td class="border-r border-black px-3 py-2 tabular-nums">1.3%</td>
|
|
258
|
+
<td class="px-3 py-2 font-bold">↓ −3%</td>
|
|
259
|
+
</tr>
|
|
260
|
+
</tbody>
|
|
261
|
+
</table>
|
|
262
|
+
</div>
|
|
263
|
+
</section>
|
|
189
264
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
<
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
265
|
+
<section class="mb-10" data-section-id="section-benchmark">
|
|
266
|
+
<h2 class="mb-3 border-b border-black pb-1 text-lg font-black">
|
|
267
|
+
<span class="mr-2 font-mono text-base text-neutral-600">6</span>
|
|
268
|
+
指标 vs 基准
|
|
269
|
+
</h2>
|
|
270
|
+
<div class="overflow-x-auto border-2 border-black">
|
|
271
|
+
<table class="min-w-full border-collapse text-sm">
|
|
272
|
+
<thead>
|
|
273
|
+
<tr class="border-b-2 border-black bg-neutral-100">
|
|
274
|
+
<th class="border-r border-black px-3 py-2 text-left font-bold">指标</th>
|
|
275
|
+
<th class="border-r border-black px-3 py-2 text-right font-bold">数据</th>
|
|
276
|
+
<th class="border-r border-black px-3 py-2 text-right font-bold">基准</th>
|
|
277
|
+
<th class="px-3 py-2 text-left font-bold">状态</th>
|
|
278
|
+
</tr>
|
|
279
|
+
</thead>
|
|
280
|
+
<tbody>
|
|
281
|
+
<tr class="border-b border-black">
|
|
282
|
+
<td class="border-r border-black px-3 py-2">CTR</td>
|
|
283
|
+
<td class="border-r border-black px-3 py-2 text-right tabular-nums font-bold">
|
|
284
|
+
1.49%
|
|
285
|
+
</td>
|
|
286
|
+
<td class="border-r border-black px-3 py-2 text-right tabular-nums">1.2%</td>
|
|
287
|
+
<td class="px-3 py-2 font-bold">优于基准</td>
|
|
288
|
+
</tr>
|
|
289
|
+
<tr>
|
|
290
|
+
<td class="border-r border-black px-3 py-2">CPA</td>
|
|
291
|
+
<td class="border-r border-black px-3 py-2 text-right tabular-nums font-bold">
|
|
292
|
+
¥40.3
|
|
293
|
+
</td>
|
|
294
|
+
<td class="border-r border-black px-3 py-2 text-right tabular-nums">¥45.0</td>
|
|
295
|
+
<td class="px-3 py-2 font-bold">优于基准</td>
|
|
296
|
+
</tr>
|
|
297
|
+
</tbody>
|
|
298
|
+
</table>
|
|
299
|
+
</div>
|
|
300
|
+
</section>
|
|
222
301
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
302
|
+
<footer class="border-t-2 border-black pt-4 text-xs text-neutral-600">
|
|
303
|
+
<p>黑白打印版式参考 · 图表为灰阶线型与填充区分序列。</p>
|
|
304
|
+
</footer>
|
|
305
|
+
</main>
|
|
227
306
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
307
|
+
<script>
|
|
308
|
+
(function () {
|
|
309
|
+
var trendEl = document.getElementById("trendChart");
|
|
310
|
+
var pieEl = document.getElementById("breakdownChart");
|
|
311
|
+
if (!trendEl || !pieEl || typeof echarts === "undefined") return;
|
|
233
312
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
313
|
+
var trendChart = echarts.init(trendEl, null, { renderer: "canvas" });
|
|
314
|
+
trendChart.setOption({
|
|
315
|
+
color: ["#000000", "#737373"],
|
|
316
|
+
textStyle: { color: "#171717" },
|
|
317
|
+
tooltip: { trigger: "axis" },
|
|
318
|
+
legend: { data: ["消耗(百元)", "点击(百次)"], top: 0 },
|
|
319
|
+
grid: { left: "3%", right: "4%", bottom: "3%", top: 48, containLabel: true },
|
|
320
|
+
xAxis: {
|
|
321
|
+
type: "category",
|
|
322
|
+
boundaryGap: false,
|
|
323
|
+
data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
|
|
324
|
+
},
|
|
325
|
+
yAxis: { type: "value", splitLine: { lineStyle: { type: "dashed", color: "#d4d4d4" } } },
|
|
326
|
+
series: [
|
|
327
|
+
{
|
|
328
|
+
name: "消耗(百元)",
|
|
329
|
+
type: "line",
|
|
330
|
+
smooth: 0.2,
|
|
331
|
+
lineStyle: { width: 2.5 },
|
|
332
|
+
symbol: "circle",
|
|
333
|
+
symbolSize: 5,
|
|
334
|
+
areaStyle: { opacity: 0.06, color: "#000" },
|
|
335
|
+
data: [200, 250, 220, 300, 280, 320, 310],
|
|
336
|
+
},
|
|
337
|
+
{
|
|
338
|
+
name: "点击(百次)",
|
|
339
|
+
type: "line",
|
|
340
|
+
smooth: 0.2,
|
|
341
|
+
lineStyle: { width: 2.5, type: "dashed" },
|
|
342
|
+
symbol: "rect",
|
|
343
|
+
symbolSize: 6,
|
|
344
|
+
data: [33, 48, 45, 60, 52, 68, 61],
|
|
345
|
+
},
|
|
346
|
+
],
|
|
347
|
+
});
|
|
248
348
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
349
|
+
var breakdownChart = echarts.init(pieEl, null, { renderer: "canvas" });
|
|
350
|
+
breakdownChart.setOption({
|
|
351
|
+
color: ["#262626", "#525252", "#a3a3a3"],
|
|
352
|
+
textStyle: { color: "#171717" },
|
|
353
|
+
tooltip: { trigger: "item" },
|
|
354
|
+
legend: { orient: "vertical", left: "left", top: "middle" },
|
|
355
|
+
series: [
|
|
356
|
+
{
|
|
357
|
+
name: "设备",
|
|
358
|
+
type: "pie",
|
|
359
|
+
radius: ["40%", "65%"],
|
|
360
|
+
center: ["58%", "50%"],
|
|
361
|
+
itemStyle: { borderColor: "#fff", borderWidth: 2 },
|
|
362
|
+
label: { formatter: "{b}\n{d}%" },
|
|
363
|
+
data: [
|
|
364
|
+
{ value: 52, name: "移动端" },
|
|
365
|
+
{ value: 35, name: "桌面" },
|
|
366
|
+
{ value: 13, name: "平板" },
|
|
367
|
+
],
|
|
368
|
+
},
|
|
369
|
+
],
|
|
370
|
+
});
|
|
262
371
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
372
|
+
function resize() {
|
|
373
|
+
trendChart.resize();
|
|
374
|
+
breakdownChart.resize();
|
|
375
|
+
}
|
|
376
|
+
window.addEventListener("resize", resize);
|
|
377
|
+
})();
|
|
378
|
+
</script>
|
|
379
|
+
</body>
|
|
268
380
|
</html>
|