| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>表格 · 现代周报</title> |
| 6 | <style> |
| 7 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 8 | html, body { width: 100%; height: 100%; overflow: hidden; } |
| 9 | body { |
| 10 | font-family: "PingFang SC", "Microsoft YaHei", "Inter", "Helvetica Neue", Arial, sans-serif; |
| 11 | color: #1F1E1A; |
| 12 | font-variant-numeric: tabular-nums; |
| 13 | background: #EDE9DC; |
| 14 | display: grid; |
| 15 | place-items: center; |
| 16 | -webkit-font-smoothing: antialiased; |
| 17 | } |
| 18 | .slide { |
| 19 | aspect-ratio: 16 / 9; |
| 20 | width: min(100vw, calc(100vh * 16 / 9)); |
| 21 | background: #FBFAF6; |
| 22 | padding: 3.6% 4.4% 3%; |
| 23 | display: flex; |
| 24 | flex-direction: column; |
| 25 | gap: 2%; |
| 26 | overflow: hidden; |
| 27 | } |
| 28 | |
| 29 | /* ====== Header ====== */ |
| 30 | .head { |
| 31 | display: flex; |
| 32 | justify-content: space-between; |
| 33 | align-items: flex-end; |
| 34 | padding-bottom: 1.3%; |
| 35 | border-bottom: 1px solid #D8D4C8; |
| 36 | } |
| 37 | .head .eyebrow { |
| 38 | font-size: clamp(9px, 0.7vw, 11px); |
| 39 | color: #8B8478; |
| 40 | letter-spacing: 0.22em; |
| 41 | text-transform: uppercase; |
| 42 | font-weight: 600; |
| 43 | margin-bottom: 7px; |
| 44 | } |
| 45 | .head h1 { |
| 46 | font-size: clamp(22px, 2.45vw, 34px); |
| 47 | font-weight: 700; |
| 48 | color: #1F1E1A; |
| 49 | letter-spacing: -0.015em; |
| 50 | line-height: 1.15; |
| 51 | } |
| 52 | .head .meta { |
| 53 | text-align: right; |
| 54 | font-size: clamp(10px, 0.78vw, 12px); |
| 55 | color: #6B6558; |
| 56 | line-height: 1.7; |
| 57 | } |
| 58 | .head .meta strong { color: #1F1E1A; font-weight: 600; } |
| 59 | |
| 60 | /* ====== KPI 横栏 ====== */ |
| 61 | .kpis { |
| 62 | display: grid; |
| 63 | grid-template-columns: repeat(4, 1fr); |
| 64 | border-top: 1px solid #E8E4D6; |
| 65 | border-bottom: 1px solid #E8E4D6; |
| 66 | padding: 1.5% 0; |
| 67 | } |
| 68 | .kpi { |
| 69 | padding: 0 4.5%; |
| 70 | border-right: 1px solid #EDE9DC; |
| 71 | } |
| 72 | .kpi:last-child { border-right: none; } |
| 73 | .kpi .k-label { |
| 74 | font-size: clamp(9px, 0.72vw, 11px); |
| 75 | color: #8B8478; |
| 76 | letter-spacing: 0.08em; |
| 77 | text-transform: uppercase; |
| 78 | margin-bottom: 7px; |
| 79 | font-weight: 500; |
| 80 | } |
| 81 | .kpi .k-value { |
| 82 | font-size: clamp(20px, 2.05vw, 28px); |
| 83 | font-weight: 700; |
| 84 | color: #1F1E1A; |
| 85 | line-height: 1; |
| 86 | letter-spacing: -0.015em; |
| 87 | } |
| 88 | .kpi .k-value .unit { |
| 89 | font-size: 0.5em; |
| 90 | font-weight: 500; |
| 91 | color: #8B8478; |
| 92 | margin-left: 4px; |
| 93 | letter-spacing: 0; |
| 94 | } |
| 95 | .kpi .k-delta { |
| 96 | margin-top: 8px; |
| 97 | font-size: clamp(9px, 0.74vw, 11px); |
| 98 | font-weight: 500; |
| 99 | color: #2A2924; |
| 100 | } |
| 101 | .kpi .k-delta.up::before { content: "▲ "; color: #1F1E1A; font-size: 0.78em; margin-right: 2px; } |
| 102 | .kpi .k-delta.down::before { content: "▼ "; color: #8B8478; font-size: 0.78em; margin-right: 2px; } |
| 103 | |
| 104 | /* ====== 主表格 ====== */ |
| 105 | .table-section { |
| 106 | flex: 1; |
| 107 | display: flex; |
| 108 | flex-direction: column; |
| 109 | min-height: 0; |
| 110 | } |
| 111 | .table-title { |
| 112 | display: flex; |
| 113 | justify-content: space-between; |
| 114 | align-items: baseline; |
| 115 | margin-bottom: 0.6%; |
| 116 | } |
| 117 | .table-title h2 { |
| 118 | font-size: clamp(13px, 1.05vw, 16px); |
| 119 | font-weight: 700; |
| 120 | color: #1F1E1A; |
| 121 | letter-spacing: -0.005em; |
| 122 | } |
| 123 | .table-title .filter { |
| 124 | font-size: clamp(9px, 0.74vw, 11px); |
| 125 | color: #8B8478; |
| 126 | letter-spacing: 0.04em; |
| 127 | } |
| 128 | |
| 129 | table.report { |
| 130 | width: 100%; |
| 131 | border-collapse: collapse; |
| 132 | font-size: clamp(11px, 0.88vw, 13px); |
| 133 | table-layout: fixed; |
| 134 | } |
| 135 | table.report thead th { |
| 136 | text-align: left; |
| 137 | padding: 9px 12px 10px; |
| 138 | font-size: clamp(9px, 0.72vw, 11px); |
| 139 | font-weight: 600; |
| 140 | color: #8B8478; |
| 141 | letter-spacing: 0.1em; |
| 142 | text-transform: uppercase; |
| 143 | border-bottom: 1.5px solid #1F1E1A; |
| 144 | } |
| 145 | table.report thead th.num { text-align: right; } |
| 146 | table.report tbody td { |
| 147 | padding: 11px 12px; |
| 148 | border-bottom: 1px solid #EDE9DC; |
| 149 | color: #2A2924; |
| 150 | vertical-align: middle; |
| 151 | line-height: 1.4; |
| 152 | } |
| 153 | table.report tbody td.num { |
| 154 | text-align: right; |
| 155 | font-variant-numeric: tabular-nums; |
| 156 | color: #1F1E1A; |
| 157 | font-weight: 500; |
| 158 | } |
| 159 | table.report tbody td.num.muted { color: #8B8478; font-weight: 400; } |
| 160 | table.report tbody td.num.neg { color: #6B6558; } |
| 161 | table.report tbody td.primary { font-weight: 600; color: #1F1E1A; } |
| 162 | table.report tbody tr.total td { |
| 163 | background: #F2EFE5; |
| 164 | font-weight: 700; |
| 165 | color: #1F1E1A; |
| 166 | border-top: 1px solid #1F1E1A; |
| 167 | border-bottom: 1.5px solid #1F1E1A; |
| 168 | } |
| 169 | |
| 170 | .badge { |
| 171 | display: inline-block; |
| 172 | padding: 2.5px 8px; |
| 173 | font-size: clamp(9px, 0.72vw, 11px); |
| 174 | font-weight: 600; |
| 175 | border-radius: 2px; |
| 176 | letter-spacing: 0.04em; |
| 177 | line-height: 1.3; |
| 178 | white-space: nowrap; |
| 179 | } |
| 180 | .badge.active { background: #1F1E1A; color: #FBFAF6; } |
| 181 | .badge.review { background: #EDE9DC; color: #5C5852; } |
| 182 | .badge.done { background: transparent; color: #1F1E1A; border: 1px solid #1F1E1A; } |
| 183 | |
| 184 | /* ====== Footer ====== */ |
| 185 | .foot { |
| 186 | display: flex; |
| 187 | justify-content: space-between; |
| 188 | align-items: center; |
| 189 | padding-top: 1.2%; |
| 190 | border-top: 1px solid #D8D4C8; |
| 191 | font-size: clamp(9px, 0.74vw, 11px); |
| 192 | color: #8B8478; |
| 193 | } |
| 194 | .foot .left { display: flex; gap: clamp(16px, 2vw, 26px); } |
| 195 | .foot .left strong { color: #1F1E1A; font-weight: 600; } |
| 196 | .foot .brand { |
| 197 | font-weight: 700; |
| 198 | color: #1F1E1A; |
| 199 | letter-spacing: 0.24em; |
| 200 | } |
| 201 | |
| 202 | @media (max-aspect-ratio: 16/9) { .slide { width: min(100vw, calc(100vh * 16/9)); height: auto; } } |
| 203 | @media (min-aspect-ratio: 16/9) { .slide { height: min(100vh, calc(100vw * 9/16)); width: auto; } } |
| 204 | </style> |
| 205 | </head> |
| 206 | <body> |
| 207 | <div class="slide"> |
| 208 | |
| 209 | <!-- ====== Header ====== --> |
| 210 | <div class="head"> |
| 211 | <div> |
| 212 | <div class="eyebrow">Quarterly Performance Review</div> |
| 213 | <h1>2026 Q2 经营周报 · 关键指标复盘</h1> |
| 214 | </div> |
| 215 | <div class="meta"> |
| 216 | <div>报告周期 · <strong>2026.04 — 2026.06</strong></div> |
| 217 | <div>编制 · <strong>财务与运营组</strong> · 第 24 周</div> |
| 218 | </div> |
| 219 | </div> |
| 220 | |
| 221 | <!-- ====== KPI 横栏 ====== --> |
| 222 | <div class="kpis"> |
| 223 | <div class="kpi"> |
| 224 | <div class="k-label">营业收入</div> |
| 225 | <div class="k-value">4.82<span class="unit">亿元</span></div> |
| 226 | <div class="k-delta up">环比 +12.4%</div> |
| 227 | </div> |
| 228 | <div class="kpi"> |
| 229 | <div class="k-label">毛利率</div> |
| 230 | <div class="k-value">38.6<span class="unit">%</span></div> |
| 231 | <div class="k-delta up">较目标 +2.1pp</div> |
| 232 | </div> |
| 233 | <div class="kpi"> |
| 234 | <div class="k-label">活跃客户</div> |
| 235 | <div class="k-value">1,284</div> |
| 236 | <div class="k-delta up">本期新增 96</div> |
| 237 | </div> |
| 238 | <div class="kpi"> |
| 239 | <div class="k-label">交付达成率</div> |
| 240 | <div class="k-value">97.2<span class="unit">%</span></div> |
| 241 | <div class="k-delta down">较目标 −1.3pp</div> |
| 242 | </div> |
| 243 | </div> |
| 244 | |
| 245 | <!-- ====== 主表格 ====== --> |
| 246 | <div class="table-section"> |
| 247 | <div class="table-title"> |
| 248 | <h2>业务分部业绩明细</h2> |
| 249 | <div class="filter">单位 · 万元 | 排序 · 营收降序</div> |
| 250 | </div> |
| 251 | <table class="report"> |
| 252 | <colgroup> |
| 253 | <col style="width:8%"> |
| 254 | <col style="width:26%"> |
| 255 | <col style="width:14%"> |
| 256 | <col style="width:14%"> |
| 257 | <col style="width:14%"> |
| 258 | <col style="width:12%"> |
| 259 | <col style="width:12%"> |
| 260 | </colgroup> |
| 261 | <thead> |
| 262 | <tr> |
| 263 | <th>编号</th> |
| 264 | <th>业务条线</th> |
| 265 | <th class="num">营业收入</th> |
| 266 | <th class="num">同比</th> |
| 267 | <th class="num">毛利率</th> |
| 268 | <th class="num">客户数</th> |
| 269 | <th>状态</th> |
| 270 | </tr> |
| 271 | </thead> |
| 272 | <tbody> |
| 273 | <tr> |
| 274 | <td class="num muted">B-01</td> |
| 275 | <td class="primary">企业服务</td> |
| 276 | <td class="num">18,640</td> |
| 277 | <td class="num">+24.1%</td> |
| 278 | <td class="num">42.3%</td> |
| 279 | <td class="num">428</td> |
| 280 | <td><span class="badge active">运营中</span></td> |
| 281 | </tr> |
| 282 | <tr> |
| 283 | <td class="num muted">B-02</td> |
| 284 | <td class="primary">数字商品</td> |
| 285 | <td class="num">12,180</td> |
| 286 | <td class="num">+18.6%</td> |
| 287 | <td class="num">51.7%</td> |
| 288 | <td class="num">612</td> |
| 289 | <td><span class="badge active">运营中</span></td> |
| 290 | </tr> |
| 291 | <tr> |
| 292 | <td class="num muted">B-03</td> |
| 293 | <td class="primary">订阅服务</td> |
| 294 | <td class="num">9,720</td> |
| 295 | <td class="num">+31.4%</td> |
| 296 | <td class="num">58.1%</td> |
| 297 | <td class="num">184</td> |
| 298 | <td><span class="badge done">达成目标</span></td> |
| 299 | </tr> |
| 300 | <tr> |
| 301 | <td class="num muted">B-04</td> |
| 302 | <td class="primary">咨询服务</td> |
| 303 | <td class="num">5,860</td> |
| 304 | <td class="num">+6.2%</td> |
| 305 | <td class="num">34.5%</td> |
| 306 | <td class="num">42</td> |
| 307 | <td><span class="badge review">观察</span></td> |
| 308 | </tr> |
| 309 | <tr> |
| 310 | <td class="num muted">B-05</td> |
| 311 | <td class="primary">渠道分销</td> |
| 312 | <td class="num">1,800</td> |
| 313 | <td class="num neg">−8.4%</td> |
| 314 | <td class="num">22.1%</td> |
| 315 | <td class="num">18</td> |
| 316 | <td><span class="badge review">收缩中</span></td> |
| 317 | </tr> |
| 318 | <tr class="total"> |
| 319 | <td></td> |
| 320 | <td>合计</td> |
| 321 | <td class="num">48,200</td> |
| 322 | <td class="num">+18.3%</td> |
| 323 | <td class="num">44.6%</td> |
| 324 | <td class="num">1,284</td> |
| 325 | <td>—</td> |
| 326 | </tr> |
| 327 | </tbody> |
| 328 | </table> |
| 329 | </div> |
| 330 | |
| 331 | <!-- ====== Footer ====== --> |
| 332 | <div class="foot"> |
| 333 | <div class="left"> |
| 334 | <span>编制人 · <strong>运营组</strong></span> |
| 335 | <span>复核 · <strong>财务负责人</strong></span> |
| 336 | <span>下次复盘 · <strong>2026.07.15</strong></span> |
| 337 | </div> |
| 338 | <div class="brand">TABLEAU · 2026 Q2</div> |
| 339 | </div> |
| 340 | |
| 341 | </div> |
| 342 | </body> |
| 343 | </html> |
| 344 |