skillhub-156-html-ppt-zhangzara-stencil-tablet
wehub-skill-sync
956 行
40 KiB
HTML
956 行
40 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>模板与图卡 — 幻灯片模板</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&family=Stardos+Stencil:wght@400;700&family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||
<script src="assets/deck-stage.js"></script>
|
||
<style>
|
||
:root {
|
||
--bone: #E2DCC9;
|
||
--black: #000000;
|
||
--ink: #0A0A0A;
|
||
--paper: #F4EFE0;
|
||
--sienna: #A06A3C;
|
||
--magenta: #C73B7A;
|
||
--orange: #EE7A2E;
|
||
--teal: #2D7E73;
|
||
--blue: #3F73B7;
|
||
--mustard: #D8A93B;
|
||
--olive: #6F7A2E;
|
||
}
|
||
html, body { margin:0; padding:0; background:#1a1a1a; }
|
||
body { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
|
||
deck-stage { background: #1a1a1a; }
|
||
|
||
section.slide { background: var(--bone); color: var(--ink); overflow: hidden; position: relative; }
|
||
section.slide.dark { background: var(--black); color: var(--bone); }
|
||
|
||
/* ---------- chrome ---------- */
|
||
.top {
|
||
position: absolute; top: 48px; left: 64px; right: 64px;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
font-family: "Barlow Condensed", "Helvetica Neue", sans-serif;
|
||
font-weight: 800;
|
||
font-size: 32px;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
line-height: 1;
|
||
}
|
||
.top .meta { display: flex; gap: 64px; font-size: 24px; font-weight: 600; letter-spacing: .06em; opacity: .85; }
|
||
section.slide.dark .top { color: var(--bone); }
|
||
|
||
.footer {
|
||
position: absolute; left: 64px; right: 64px; bottom: 36px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
font-family: "Barlow Condensed", sans-serif;
|
||
font-weight: 600; font-size: 22px;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
opacity: .75;
|
||
}
|
||
section.slide.dark .footer { color: var(--bone); }
|
||
|
||
/* ---------- shared tablet card ---------- */
|
||
.tablet { border-radius: 26px; padding: 38px 32px 32px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
|
||
.tablet .num {
|
||
font-family: "Stardos Stencil", "Bowlby One", serif;
|
||
font-weight: 700;
|
||
line-height: .9;
|
||
color: var(--ink);
|
||
font-size: 220px;
|
||
letter-spacing: -.02em;
|
||
}
|
||
.tablet h3 {
|
||
font-family: "Stardos Stencil", serif;
|
||
font-weight: 700;
|
||
font-size: 30px;
|
||
line-height: 1;
|
||
text-transform: uppercase;
|
||
letter-spacing: .02em;
|
||
margin-top: auto;
|
||
margin-bottom: 14px;
|
||
}
|
||
.tablet p {
|
||
font-family: "Inter", sans-serif;
|
||
font-size: 22px;
|
||
line-height: 1.4;
|
||
color: var(--ink);
|
||
}
|
||
.tablet.dark { color: var(--bone); }
|
||
.tablet.dark h3 { color: var(--bone); }
|
||
.tablet.dark p { color: var(--bone); opacity: .9; }
|
||
|
||
/* =========== 01 COVER =========== */
|
||
.s-cover { padding: 0; }
|
||
.s-cover .stage {
|
||
position: absolute; inset: 0;
|
||
display: grid;
|
||
grid-template-rows: 1fr auto;
|
||
padding: 48px 64px;
|
||
}
|
||
.s-cover .super {
|
||
font-family: "Barlow Condensed", sans-serif;
|
||
font-weight: 800; font-size: 28px; letter-spacing: .12em;
|
||
text-transform: uppercase; opacity: .8;
|
||
}
|
||
.s-cover h1 {
|
||
font-family: "Stardos Stencil", serif;
|
||
font-weight: 700;
|
||
font-size: 220px;
|
||
line-height: .82;
|
||
letter-spacing: -.015em;
|
||
text-transform: uppercase;
|
||
color: var(--ink);
|
||
align-self: end;
|
||
margin: 0;
|
||
}
|
||
.s-cover h1 em { font-style: normal; color: var(--magenta); }
|
||
.s-cover .row {
|
||
display: flex; align-items: end; justify-content: space-between;
|
||
margin-top: 24px;
|
||
}
|
||
.s-cover .row .lockup { display: flex; align-items: center; gap: 18px; }
|
||
.s-cover .row .mark {
|
||
width: 56px; height: 56px; border-radius: 14px; background: var(--orange);
|
||
}
|
||
.s-cover .row .who {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 700;
|
||
font-size: 30px; text-transform: uppercase; letter-spacing: .04em;
|
||
}
|
||
.s-cover .row .who small {
|
||
display: block; font-size: 22px; font-weight: 500; letter-spacing: .08em; opacity: .65;
|
||
}
|
||
.s-cover .row .date {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 36px; text-transform: uppercase;
|
||
}
|
||
.s-cover .shape {
|
||
position: absolute; right: 56px; top: 64px;
|
||
width: 320px; height: 380px;
|
||
color: var(--teal);
|
||
}
|
||
|
||
/* =========== 02 AGENDA (organic shapes on black) =========== */
|
||
.s-agenda { padding: 0; }
|
||
.s-agenda .grid {
|
||
position: absolute;
|
||
left: 64px; right: 64px; top: 200px; bottom: 100px;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 28px;
|
||
}
|
||
.s-agenda .item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 36px 18px 36px; }
|
||
.s-agenda .item svg { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||
.s-agenda .item .n {
|
||
position: relative; z-index: 2;
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 800;
|
||
font-size: 32px; letter-spacing: .06em; color: var(--ink);
|
||
}
|
||
.s-agenda .item .lab {
|
||
position: relative; z-index: 2;
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 32px; line-height: 1.05; text-align: center;
|
||
text-transform: uppercase; color: var(--ink);
|
||
}
|
||
|
||
/* =========== 03 PRINCIPLES (the source slide) =========== */
|
||
.s-princ { padding: 0; }
|
||
.s-princ .row {
|
||
position: absolute;
|
||
left: 64px; right: 64px; top: 160px; bottom: 70px;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 24px;
|
||
}
|
||
.s-princ .card { border-radius: 26px; padding: 36px 30px 32px; display: flex; flex-direction: column; min-height: 0; }
|
||
.s-princ .card.c1 { background: var(--sienna); }
|
||
.s-princ .card.c2 { background: var(--magenta); }
|
||
.s-princ .card.c3 { background: var(--orange); }
|
||
.s-princ .card.c4 { background: var(--teal); }
|
||
.s-princ .card .n {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 240px; line-height: .85; letter-spacing: -.02em;
|
||
color: var(--ink);
|
||
}
|
||
.s-princ .card h3 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 30px; line-height: 1.05;
|
||
text-transform: uppercase; letter-spacing: .02em;
|
||
margin: auto 0 14px; color: var(--ink);
|
||
}
|
||
.s-princ .card p {
|
||
font-size: 22px; line-height: 1.4; color: var(--ink);
|
||
}
|
||
.s-princ .card.c4 h3, .s-princ .card.c4 p { color: var(--bone); }
|
||
|
||
/* =========== 04 SECTION DIVIDER =========== */
|
||
.s-sec { padding: 0; }
|
||
.s-sec .num {
|
||
position: absolute; left: 64px; top: 110px;
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 540px; line-height: .8; color: var(--orange);
|
||
}
|
||
.s-sec .label {
|
||
position: absolute; right: 64px; top: 220px;
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 800;
|
||
font-size: 24px; letter-spacing: .14em; text-transform: uppercase;
|
||
color: var(--bone); opacity: .7;
|
||
text-align: right;
|
||
}
|
||
.s-sec h2 {
|
||
position: absolute;
|
||
right: 64px; bottom: 130px; left: 360px;
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 120px; line-height: .92; text-transform: uppercase;
|
||
letter-spacing: -.005em;
|
||
color: var(--bone);
|
||
text-align: right;
|
||
}
|
||
.s-sec h2 em { font-style: normal; color: var(--orange); }
|
||
|
||
/* =========== 05 CONSULT (text-dense action title) =========== */
|
||
.s-consult .head {
|
||
position: absolute; left: 64px; right: 64px; top: 130px;
|
||
background: var(--mustard);
|
||
border-radius: 22px;
|
||
padding: 24px 32px;
|
||
display: flex; align-items: center; gap: 28px;
|
||
}
|
||
.s-consult .head .tag {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 800;
|
||
font-size: 24px; letter-spacing: .12em; text-transform: uppercase;
|
||
flex-shrink: 0; padding-right: 28px;
|
||
border-right: 2px solid var(--ink);
|
||
}
|
||
.s-consult .head h2 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 34px; line-height: 1.15; text-transform: uppercase; letter-spacing: -.005em;
|
||
}
|
||
.s-consult .grid {
|
||
position: absolute; left: 64px; right: 64px; top: 290px; bottom: 80px;
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
.s-consult .col {
|
||
border-radius: 22px; padding: 28px 28px;
|
||
display: flex; flex-direction: column; gap: 14px; min-height: 0;
|
||
}
|
||
.s-consult .col.a { background: var(--paper); }
|
||
.s-consult .col.b { background: var(--orange); }
|
||
.s-consult .col.c { background: var(--paper); }
|
||
.s-consult .col h3 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 28px; text-transform: uppercase; letter-spacing: .02em;
|
||
border-bottom: 2px solid var(--ink); padding-bottom: 12px;
|
||
}
|
||
.s-consult .col .meta {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 32px; line-height: 1.1;
|
||
}
|
||
.s-consult .col p { font-size: 20px; line-height: 1.45; }
|
||
.s-consult .col ul { margin: 0; padding-left: 22px; font-size: 20px; line-height: 1.45; }
|
||
.s-consult .col ul li { margin-bottom: 8px; }
|
||
.s-consult .col ul li strong { font-weight: 700; }
|
||
.s-consult .col .src {
|
||
margin-top: auto;
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 700;
|
||
font-size: 18px; letter-spacing: .12em; text-transform: uppercase;
|
||
border-top: 1px dashed rgba(10,10,10,.35); padding-top: 12px; opacity: .75;
|
||
}
|
||
|
||
/* =========== 06 CHART =========== */
|
||
.s-chart { padding: 0; }
|
||
/* Bottom bumped from 110 to 150 so the legend can never collide with
|
||
the absolutely-positioned .footer (which sits at bottom: 36 with
|
||
~24px text height). Also: h2 size now caps by viewport height too. */
|
||
.s-chart .left {
|
||
position: absolute; left: 64px; top: 200px; bottom: 150px; width: 540px;
|
||
display: flex; flex-direction: column; gap: 24px;
|
||
}
|
||
.s-chart .left h2 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: min(110px, 12vh); line-height: .92; text-transform: uppercase; letter-spacing: -.01em;
|
||
color: var(--bone);
|
||
}
|
||
.s-chart .left h2 em { font-style: normal; color: var(--orange); }
|
||
.s-chart .left p { font-size: 22px; line-height: 1.5; color: var(--bone); opacity: .85; }
|
||
.s-chart .left .legend {
|
||
margin-top: auto; display: flex; flex-direction: column; gap: 10px;
|
||
}
|
||
.s-chart .left .legend .li {
|
||
display: flex; align-items: center; gap: 14px;
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 700;
|
||
font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: var(--bone);
|
||
}
|
||
.s-chart .left .legend .li i { width: 32px; height: 6px; }
|
||
.s-chart .right {
|
||
position: absolute; right: 64px; top: 200px; bottom: 130px; left: 680px;
|
||
background: var(--paper); border-radius: 22px;
|
||
padding: 32px 32px 28px 80px;
|
||
display: flex; flex-direction: column; overflow: hidden;
|
||
}
|
||
.s-chart .right .yhead {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 700;
|
||
font-size: 18px; letter-spacing: .12em; text-transform: uppercase;
|
||
margin-bottom: 8px; opacity: .7;
|
||
}
|
||
.s-chart .plot { flex: 1; min-height: 0; position: relative;
|
||
border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
|
||
.s-chart .plot .gline { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(10,10,10,.18); }
|
||
.s-chart .plot .yticks {
|
||
position: absolute; left: -52px; top: 0; bottom: 0;
|
||
display: flex; flex-direction: column; justify-content: space-between;
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 600;
|
||
font-size: 18px;
|
||
}
|
||
.s-chart .plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
|
||
.s-chart .right .xticks { display: flex; justify-content: space-between; padding-top: 10px;
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 600;
|
||
font-size: 18px; letter-spacing: .06em; }
|
||
|
||
/* =========== 07 PROCESS DIAGRAM =========== */
|
||
.s-process .head {
|
||
position: absolute; left: 64px; right: 64px; top: 130px;
|
||
display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
|
||
}
|
||
.s-process .head h2 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 92px; line-height: .92; text-transform: uppercase; letter-spacing: -.01em;
|
||
}
|
||
.s-process .head h2 em { font-style: normal; color: var(--magenta); }
|
||
.s-process .head .sub {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 600;
|
||
font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
|
||
max-width: 38ch; line-height: 1.5; opacity: .8; margin-top: 12px;
|
||
}
|
||
.s-process .flow {
|
||
position: absolute; left: 64px; right: 64px; top: 470px; bottom: 200px;
|
||
display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px;
|
||
}
|
||
.s-process .node {
|
||
border-radius: 22px; padding: 24px 22px 22px;
|
||
display: flex; flex-direction: column; gap: 8px; position: relative;
|
||
}
|
||
.s-process .node.n1 { background: var(--sienna); color: var(--ink); }
|
||
.s-process .node.n2 { background: var(--magenta); color: var(--ink); }
|
||
.s-process .node.n3 { background: var(--orange); color: var(--ink); }
|
||
.s-process .node.n4 { background: var(--teal); color: var(--bone); }
|
||
.s-process .node.n5 { background: var(--blue); color: var(--bone); }
|
||
.s-process .node .n {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 64px; line-height: .9;
|
||
}
|
||
.s-process .node h3 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 28px; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em;
|
||
}
|
||
.s-process .node p { font-size: 18px; line-height: 1.4; }
|
||
.s-process .node .arr {
|
||
position: absolute; right: -16px; top: 40%;
|
||
width: 32px; height: 32px; z-index: 2;
|
||
}
|
||
.s-process .node.n5 .arr { display: none; }
|
||
.s-process .timeline {
|
||
position: absolute; left: 64px; right: 64px; bottom: 110px; height: 50px;
|
||
background: var(--paper); border-radius: 14px;
|
||
padding: 0 28px; display: flex; align-items: center; justify-content: space-between;
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 700;
|
||
font-size: 20px; letter-spacing: .08em; text-transform: uppercase;
|
||
}
|
||
|
||
/* =========== 08 COMPARISON MATRIX =========== */
|
||
.s-matrix .head {
|
||
position: absolute; left: 64px; right: 64px; top: 130px;
|
||
display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
|
||
}
|
||
.s-matrix .head h2 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 92px; line-height: .92; text-transform: uppercase; letter-spacing: -.01em;
|
||
}
|
||
.s-matrix .head h2 em { font-style: normal; color: var(--teal); }
|
||
.s-matrix .head .sub {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 600;
|
||
font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
|
||
max-width: 38ch; line-height: 1.5; opacity: .8; margin-top: 12px;
|
||
}
|
||
.s-matrix .table {
|
||
position: absolute; left: 64px; right: 64px; top: 460px; bottom: 110px;
|
||
background: var(--paper); border-radius: 22px;
|
||
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
|
||
grid-auto-rows: 1fr; overflow: hidden;
|
||
}
|
||
.s-matrix .cell {
|
||
padding: 18px 22px; display: flex; align-items: center;
|
||
font-size: 22px; line-height: 1.35;
|
||
border-bottom: 1.5px solid rgba(10,10,10,.35);
|
||
border-right: 1.5px solid rgba(10,10,10,.35);
|
||
}
|
||
.s-matrix .cell:nth-child(4n) { border-right: 0; }
|
||
.s-matrix .cell.last { border-bottom: 0; }
|
||
.s-matrix .cell.head-row {
|
||
background: var(--ink); color: var(--bone);
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 24px; text-transform: uppercase; letter-spacing: .02em;
|
||
}
|
||
.s-matrix .cell.row-label {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 26px; text-transform: uppercase; letter-spacing: .01em;
|
||
}
|
||
.s-matrix .pill {
|
||
display: inline-block; border-radius: 999px;
|
||
padding: 6px 16px; font-weight: 700;
|
||
font-family: "Barlow Condensed", sans-serif;
|
||
font-size: 18px; letter-spacing: .08em; text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
.s-matrix .pill.yes { background: var(--teal); color: var(--bone); }
|
||
.s-matrix .pill.part { background: var(--mustard); color: var(--ink); }
|
||
.s-matrix .pill.no { background: var(--magenta); color: var(--bone); }
|
||
.s-matrix .pill.note { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); }
|
||
|
||
/* =========== 09 STATS / NUMBERS =========== */
|
||
.s-stats .head {
|
||
position: absolute; left: 64px; right: 64px; top: 130px;
|
||
display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
|
||
}
|
||
.s-stats .head h2 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 92px; line-height: .92; text-transform: uppercase; letter-spacing: -.01em;
|
||
color: var(--bone);
|
||
}
|
||
.s-stats .head h2 em { font-style: normal; color: var(--orange); }
|
||
.s-stats .head .sub {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 600;
|
||
font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
|
||
max-width: 36ch; line-height: 1.5; opacity: .85; color: var(--bone); margin-top: 12px;
|
||
}
|
||
.s-stats .grid {
|
||
position: absolute; left: 64px; right: 64px; top: 470px; bottom: 110px;
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
||
}
|
||
.s-stats .stat {
|
||
border-radius: 22px; padding: 32px 30px;
|
||
display: flex; flex-direction: column; gap: 14px;
|
||
color: var(--ink);
|
||
}
|
||
.s-stats .stat.s1 { background: var(--orange); }
|
||
.s-stats .stat.s2 { background: var(--mustard); }
|
||
.s-stats .stat.s3 { background: var(--bone); }
|
||
.s-stats .stat .big {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 160px; line-height: .85; letter-spacing: -.02em;
|
||
}
|
||
.s-stats .stat .big small {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 800;
|
||
font-size: 40px; vertical-align: top; margin-left: 6px;
|
||
}
|
||
.s-stats .stat h3 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 26px; text-transform: uppercase; letter-spacing: .02em;
|
||
margin-top: auto;
|
||
}
|
||
.s-stats .stat p { font-size: 20px; line-height: 1.4; }
|
||
|
||
/* =========== 10 QUOTE =========== */
|
||
.s-quote { padding: 0; }
|
||
.s-quote .panel {
|
||
position: absolute; left: 64px; right: 64px; top: 130px; bottom: 110px;
|
||
background: var(--magenta);
|
||
border-radius: 26px;
|
||
padding: 60px 80px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1.6fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
}
|
||
.s-quote .panel .qmark {
|
||
font-family: "Bowlby One", "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 320px; line-height: .8; color: var(--ink);
|
||
}
|
||
.s-quote .panel blockquote {
|
||
margin: 0;
|
||
font-family: "Stardos Stencil", serif; font-weight: 400;
|
||
font-size: 60px; line-height: 1.05;
|
||
color: var(--ink);
|
||
letter-spacing: -.005em;
|
||
}
|
||
.s-quote .panel .who {
|
||
margin-top: 32px;
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 800;
|
||
font-size: 26px; letter-spacing: .08em; text-transform: uppercase;
|
||
color: var(--ink);
|
||
}
|
||
.s-quote .panel .who small {
|
||
display: block; font-weight: 600; font-size: 22px; opacity: .7; margin-top: 4px;
|
||
}
|
||
|
||
/* =========== 11 CTA =========== */
|
||
.s-cta { padding: 0; }
|
||
.s-cta .stage {
|
||
position: absolute; inset: 0;
|
||
padding: 130px 64px 100px;
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
|
||
}
|
||
.s-cta .pane {
|
||
border-radius: 26px; padding: 40px;
|
||
display: flex; flex-direction: column; gap: 20px;
|
||
}
|
||
.s-cta .pane.l { background: var(--teal); color: var(--bone); justify-content: space-between; }
|
||
.s-cta .pane.r { background: var(--orange); color: var(--ink); }
|
||
.s-cta .pane.l h2 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 130px; line-height: .9; text-transform: uppercase; letter-spacing: -.015em;
|
||
}
|
||
.s-cta .pane.l h2 em { font-style: normal; color: var(--orange); }
|
||
.s-cta .pane.l p { font-size: 22px; line-height: 1.5; opacity: .9; max-width: 32ch; }
|
||
.s-cta .pane.r h3 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 36px; line-height: 1; text-transform: uppercase; letter-spacing: .02em;
|
||
}
|
||
.s-cta .pane.r .step { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: start; }
|
||
.s-cta .pane.r .step .n {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 56px; line-height: .9;
|
||
}
|
||
.s-cta .pane.r .step h4 {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 800;
|
||
font-size: 26px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
|
||
}
|
||
.s-cta .pane.r .step p { font-size: 20px; line-height: 1.4; }
|
||
|
||
/* =========== 12 DESIGN SYSTEM =========== */
|
||
.s-system .wrap {
|
||
position: absolute; left: 64px; right: 64px; top: 130px; bottom: 80px;
|
||
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
|
||
}
|
||
.s-system .card {
|
||
border-radius: 22px; padding: 28px;
|
||
display: flex; flex-direction: column; gap: 14px;
|
||
background: var(--paper);
|
||
}
|
||
.s-system .card h3 {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 28px; text-transform: uppercase; letter-spacing: .02em;
|
||
border-bottom: 2px solid var(--ink); padding-bottom: 10px;
|
||
}
|
||
.s-system .card .row { display: flex; align-items: center; gap: 14px; }
|
||
.s-system .swatch { width: 48px; height: 48px; border-radius: 10px; border: 1.5px solid var(--ink); }
|
||
.s-system .row .label {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 700;
|
||
font-size: 22px; letter-spacing: .04em; text-transform: uppercase;
|
||
}
|
||
.s-system .row .label small {
|
||
display: block; font-weight: 500; opacity: .65; letter-spacing: .04em;
|
||
}
|
||
.s-system .typespec {
|
||
display: flex; align-items: baseline; gap: 14px;
|
||
border-bottom: 1px dashed rgba(10,10,10,.3); padding-bottom: 12px;
|
||
}
|
||
.s-system .typespec .name {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 36px; text-transform: uppercase; flex-shrink: 0;
|
||
}
|
||
.s-system .typespec .name.barlow {
|
||
font-family: "Barlow Condensed", sans-serif; font-weight: 800;
|
||
}
|
||
.s-system .typespec .name.inter {
|
||
font-family: "Inter", sans-serif; font-weight: 600; text-transform: none; font-size: 28px;
|
||
}
|
||
.s-system .typespec .desc {
|
||
font-size: 18px; opacity: .75;
|
||
}
|
||
.s-system ul { margin: 0; padding-left: 20px; font-size: 18px; line-height: 1.45; }
|
||
.s-system ul li { margin-bottom: 6px; }
|
||
.s-system .principle {
|
||
font-family: "Stardos Stencil", serif; font-weight: 700;
|
||
font-size: 30px; line-height: 1.05; text-transform: uppercase;
|
||
color: var(--magenta);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<deck-stage>
|
||
|
||
<!-- ============ 01 封面 ============ -->
|
||
<section class="slide s-cover" data-label="01 Cover" data-om-validate="false">
|
||
<div class="stage">
|
||
<div>
|
||
<div class="super">机构名称 × 合作方名称</div>
|
||
</div>
|
||
<div>
|
||
<h1>以设计<br/><em>彰显大胆。</em></h1>
|
||
<div class="row">
|
||
<div class="lockup">
|
||
<div class="mark"></div>
|
||
<div class="who">North & Partners
|
||
<small>品牌 · 战略 · 2026 年 Q2</small>
|
||
</div>
|
||
</div>
|
||
<div class="date">2026 · IV · 29</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<svg class="shape" viewBox="0 0 100 120" preserveAspectRatio="none" aria-hidden="true">
|
||
<path d="M50 0 C 80 0, 100 20, 100 40 C 100 60, 80 60, 50 60 C 20 60, 0 60, 0 80 C 0 100, 20 120, 50 120 C 80 120, 100 100, 100 80" fill="currentColor"/>
|
||
</svg>
|
||
</section>
|
||
|
||
<!-- ============ 02 议程（有机形状） ============ -->
|
||
<section class="slide s-agenda dark" data-label="02 Agenda" data-om-validate="false">
|
||
<div class="top">
|
||
<span>议程</span>
|
||
<span class="meta"><span>机构 × 合作方</span><span>第一阶段</span></span>
|
||
</div>
|
||
<div class="grid">
|
||
<div class="item">
|
||
<!-- figure-8 / peanut -->
|
||
<svg viewBox="0 0 100 250" preserveAspectRatio="none" aria-hidden="true">
|
||
<path d="M50 0 C 90 0, 100 30, 100 65 C 100 95, 70 110, 50 125 C 30 140, 0 155, 0 185 C 0 220, 10 250, 50 250 C 90 250, 100 220, 100 185 C 100 155, 70 140, 50 125 C 30 110, 0 95, 0 65 C 0 30, 10 0, 50 0 Z" fill="#EE7A2E"/>
|
||
</svg>
|
||
<span class="n">01</span>
|
||
<span class="lab">议程<br/>项目</span>
|
||
</div>
|
||
<div class="item">
|
||
<!-- octagon -->
|
||
<svg viewBox="0 0 100 250" preserveAspectRatio="none" aria-hidden="true">
|
||
<polygon points="30,0 70,0 100,40 100,210 70,250 30,250 0,210 0,40" fill="#2D7E73"/>
|
||
</svg>
|
||
<span class="n">02</span>
|
||
<span class="lab">议程<br/>项目</span>
|
||
</div>
|
||
<div class="item">
|
||
<!-- hourglass / bowtie -->
|
||
<svg viewBox="0 0 100 250" preserveAspectRatio="none" aria-hidden="true">
|
||
<path d="M0 0 L100 0 L100 30 Q 50 125 100 220 L100 250 L0 250 L0 220 Q 50 125 0 30 Z" fill="#3F73B7"/>
|
||
</svg>
|
||
<span class="n">03</span>
|
||
<span class="lab">议程<br/>项目</span>
|
||
</div>
|
||
<div class="item">
|
||
<!-- pinched X -->
|
||
<svg viewBox="0 0 100 250" preserveAspectRatio="none" aria-hidden="true">
|
||
<path d="M0 0 Q 20 0 35 20 Q 50 40 65 20 Q 80 0 100 0 L100 90 Q 70 125 100 160 L100 250 Q 80 250 65 230 Q 50 210 35 230 Q 20 250 0 250 L0 160 Q 30 125 0 90 Z" fill="#A06A3C"/>
|
||
</svg>
|
||
<span class="n">04</span>
|
||
<span class="lab">议程<br/>项目</span>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>North & Partners</span><span>02 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 03 原则 ============ -->
|
||
<section class="slide s-princ" data-label="03 Our Principles" data-om-validate="false">
|
||
<div class="top">
|
||
<span>我们的原则</span>
|
||
<span class="meta"><span>机构 × 合作方</span><span>第二阶段</span></span>
|
||
</div>
|
||
<div class="row">
|
||
<div class="card c1">
|
||
<div class="n">1</div>
|
||
<h3>直截<br/>了当</h3>
|
||
<p>决策一目了然。如果利益相关者还需要看图例，说明幻灯片做得太复杂了。</p>
|
||
</div>
|
||
<div class="card c2">
|
||
<div class="n">2</div>
|
||
<h3>遵循<br/>体系</h3>
|
||
<p>三种衬线数字、两种无衬线字重、六种饱和色。除此之外都是特例。</p>
|
||
</div>
|
||
<div class="card c3">
|
||
<div class="n">3</div>
|
||
<h3>展示<br/>形态</h3>
|
||
<p>以形式为先。在动用图标或图片之前，先用字重、比例和剪影说话。</p>
|
||
</div>
|
||
<div class="card c4">
|
||
<div class="n">4</div>
|
||
<h3>配得上<br/>黑底</h3>
|
||
<p>全版黑色只留给值得屏息凝神的时刻。永远不当作背景墙纸。</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>North & Partners</span><span>03 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 04 章节分隔页 ============ -->
|
||
<section class="slide s-sec dark" data-label="04 Section · Direction" data-om-validate="false">
|
||
<div class="top">
|
||
<span>方向</span>
|
||
<span class="meta"><span>第二部分</span></span>
|
||
</div>
|
||
<div class="num">02</div>
|
||
<div class="label">方向<br/>& 原则</div>
|
||
<h2>我们要<br/>去向何方，<br/><em>以及为何。</em></h2>
|
||
<div class="footer"><span>North & Partners</span><span>04 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 05 发现·详细 ============ -->
|
||
<section class="slide s-consult" data-label="05 Findings · Detail" data-om-validate="false">
|
||
<div class="top">
|
||
<span>发现 · 详细</span>
|
||
<span class="meta"><span>机构 × 合作方</span><span>第三阶段</span></span>
|
||
</div>
|
||
<div class="head">
|
||
<div class="tag">行动标题 · 05</div>
|
||
<h2>信任鸿沟在最初的 72 小时内形成，而非前 7 天——而且其代价会在整个生命周期中不断累积。</h2>
|
||
</div>
|
||
<div class="grid">
|
||
<div class="col a">
|
||
<h3>我们的发现</h3>
|
||
<p><strong>三种行为信号</strong>在最初 72 小时内对 18 个月留存率的预测能力，优于我们追踪的任何功能使用指标。</p>
|
||
<ul>
|
||
<li><strong>打开第二封邮件</strong>——打开第二封生命周期邮件可使 D90 留存率提升 19 个百分点。</li>
|
||
<li><strong>个性化称呼</strong>——收到手写欢迎语的账户留存率是对照组的 2.4 倍。</li>
|
||
<li><strong>收到回复</strong>——24 小时内的一次真人回复是已测量到的最大杠杆。</li>
|
||
</ul>
|
||
<div class="src">样本量 N = 14,200 · 2026 年 Q1</div>
|
||
</div>
|
||
<div class="col b">
|
||
<h3>为何重要</h3>
|
||
<div class="meta">当前队列预计留存 ARR 达 410 万美元。</div>
|
||
<p>前三天是客户既在关注又愿意回复的唯一窗口。此处的每一次互动，大约抵得上第三周的四次互动。</p>
|
||
<p>搞砸这件事的代价不是退款——而是那些再也未打开收件箱的账户所引发的长期、无声的流失。</p>
|
||
<div class="src">基于 FY24 队列行为建模</div>
|
||
</div>
|
||
<div class="col c">
|
||
<h3>应对措施</h3>
|
||
<ul>
|
||
<li><strong>重写第 1–3 封邮件</strong>，使用人性化口吻；以 50/50 对照实验发布。负责人：生命周期团队。截止日期：5 月 17 日。</li>
|
||
<li><strong>将每个注册用户</strong>分配给一位指定人员，在 24 小时内给予一次个性化回复，每天上限为前 200 个账户。负责人：客户成功团队。截止日期：5 月 24 日。</li>
|
||
<li><strong>将 72 小时窗口</strong>纳入每周回顾的一级指标。负责人：分析团队。截止日期：6 月 1 日。</li>
|
||
</ul>
|
||
<div class="src">试点范围：前十分位注册用户</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>North & Partners</span><span>05 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 06 图表 ============ -->
|
||
<section class="slide s-chart dark" data-label="06 Retention Curve" data-om-validate="false">
|
||
<div class="top">
|
||
<span>按队列划分的留存率</span>
|
||
<span class="meta"><span>第三阶段</span><span>证据</span></span>
|
||
</div>
|
||
<div class="left">
|
||
<h2>曲线在<br/>第三天<br/><em>拐弯。</em></h2>
|
||
<p>收到手写欢迎语并在 24 小时内获得真人回复的队列，其留存率约为模板化队列的 2 倍，且差距在 90 天内保持稳定。</p>
|
||
<div class="legend">
|
||
<div class="li"><i style="background:var(--bone); opacity:.5"></i> 模板化欢迎（对照组）</div>
|
||
<div class="li"><i style="background:var(--mustard)"></i> 手写欢迎语</div>
|
||
<div class="li"><i style="background:var(--orange)"></i> 手写 + 真人回复</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="yhead">每日活跃队列占比</div>
|
||
<div class="plot">
|
||
<div class="yticks">
|
||
<span>100</span><span>75</span><span>50</span><span>25</span><span>0</span>
|
||
</div>
|
||
<div class="gline" style="top:0%"></div>
|
||
<div class="gline" style="top:25%"></div>
|
||
<div class="gline" style="top:50%"></div>
|
||
<div class="gline" style="top:75%"></div>
|
||
<svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
|
||
<polyline fill="none" stroke="#0a0a0a" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2,1.5"
|
||
points="0,4 16,30 32,50 48,64 64,76 80,84 100,90" />
|
||
<polyline fill="none" stroke="#D8A93B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
||
points="0,4 16,18 32,28 48,38 64,46 80,52 100,56" />
|
||
<polyline fill="none" stroke="#EE7A2E" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"
|
||
points="0,4 16,10 32,16 48,22 64,28 80,32 100,36" />
|
||
</svg>
|
||
</div>
|
||
<div class="xticks">
|
||
<span>D0</span><span>D7</span><span>D14</span><span>D30</span><span>D45</span><span>D60</span><span>D90</span>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>North & Partners</span><span>06 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 07 流程 ============ -->
|
||
<section class="slide s-process" data-label="07 Process" data-om-validate="false">
|
||
<div class="top">
|
||
<span>我们的工作方式</span>
|
||
<span class="meta"><span>机构 × 合作方</span><span>第四阶段</span></span>
|
||
</div>
|
||
<div class="head">
|
||
<h2>从 <em>洞察</em><br/>到默认，<br/>只需五步。</h2>
|
||
<div class="sub">每个试点项目从头到尾都要遵循一条可重复的路径，然后才能升级为每位客户的默认体验。</div>
|
||
</div>
|
||
<div class="flow">
|
||
<div class="node n1">
|
||
<div class="n">1</div>
|
||
<h3>框定</h3>
|
||
<p>将洞察转化为一个可在一次冲刺中被证伪的行为假设。</p>
|
||
<svg class="arr" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 16 H26 M20 9 L26 16 L20 23"/></svg>
|
||
</div>
|
||
<div class="node n2">
|
||
<div class="n">2</div>
|
||
<h3>设计</h3>
|
||
<p>能够在一个周期内干净验证假设的最小端到端变更。</p>
|
||
<svg class="arr" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 16 H26 M20 9 L26 16 L20 23"/></svg>
|
||
</div>
|
||
<div class="node n3">
|
||
<div class="n">3</div>
|
||
<h3>试点</h3>
|
||
<p>在一个细分群体中以 50/50 对照实验发布。维持两个周期后再读取数据。</p>
|
||
<svg class="arr" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 16 H26 M20 9 L26 16 L20 23"/></svg>
|
||
</div>
|
||
<div class="node n4">
|
||
<div class="n">4</div>
|
||
<h3>读取</h3>
|
||
<p>仅查看预先注册的指标。决定终止、扩大或延期——三者择一，而非三项全选。</p>
|
||
<svg class="arr" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 16 H26 M20 9 L26 16 L20 23"/></svg>
|
||
</div>
|
||
<div class="node n5">
|
||
<div class="n">5</div>
|
||
<h3>默认</h3>
|
||
<p>升级为默认方案，并在同一个发布中淘汰旧路径。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline">
|
||
<span>第 1 周 · 框定</span>
|
||
<span>第 2–3 周 · 设计</span>
|
||
<span>第 3–6 周 · 试点</span>
|
||
<span>第 7 周 · 读取</span>
|
||
<span>第 8 周 · 默认</span>
|
||
</div>
|
||
<div class="footer"><span>North & Partners</span><span>07 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 08 对比矩阵 ============ -->
|
||
<section class="slide s-matrix" data-label="08 Comparison" data-om-validate="false">
|
||
<div class="top">
|
||
<span>三个试点项目横向对比</span>
|
||
<span class="meta"><span>机构 × 合作方</span><span>第四阶段</span></span>
|
||
</div>
|
||
<div class="head">
|
||
<h2>每个<br/><em>试点</em>项目<br/>的价值所在。</h2>
|
||
<div class="sub">依据本周期最重要的四个杠杆进行评分。我们只会推进至少赢得其中两个的赌注。</div>
|
||
</div>
|
||
<div class="table">
|
||
<div class="cell head-row">杠杆</div>
|
||
<div class="cell head-row">重写欢迎语</div>
|
||
<div class="cell head-row">静默升级</div>
|
||
<div class="cell head-row">收件箱即搜索</div>
|
||
|
||
<div class="cell row-label">见效时间</div>
|
||
<div class="cell"><span class="pill yes">≤ 4 周</span></div>
|
||
<div class="cell"><span class="pill part">6–8 周</span></div>
|
||
<div class="cell"><span class="pill yes">≤ 4 周</span></div>
|
||
|
||
<div class="cell row-label">构建成本</div>
|
||
<div class="cell"><span class="pill yes">低</span></div>
|
||
<div class="cell"><span class="pill part">中</span></div>
|
||
<div class="cell"><span class="pill yes">低</span></div>
|
||
|
||
<div class="cell row-label">留存提升（模型预测）</div>
|
||
<div class="cell"><span class="pill yes">D90 +19 百分点</span></div>
|
||
<div class="cell"><span class="pill part">D90 +7 百分点</span></div>
|
||
<div class="cell"><span class="pill part">D90 +5 百分点</span></div>
|
||
|
||
<div class="cell row-label last">对重度用户的风险</div>
|
||
<div class="cell last"><span class="pill yes">无</span></div>
|
||
<div class="cell last"><span class="pill no">实质性</span></div>
|
||
<div class="cell last"><span class="pill note">软性，可逆</span></div>
|
||
</div>
|
||
<div class="footer"><span>North & Partners</span><span>08 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 09 数据 ============ -->
|
||
<section class="slide s-stats dark" data-label="09 In Numbers" data-om-validate="false">
|
||
<div class="top">
|
||
<span>数据说话</span>
|
||
<span class="meta"><span>第三阶段</span><span>证据</span></span>
|
||
</div>
|
||
<div class="head">
|
||
<h2>用数字<br/><em>说话。</em></h2>
|
||
<div class="sub">三个我们在每个周期都要汇报的指标。如果其中任何一个停止变化，该赌注即告终结。</div>
|
||
</div>
|
||
<div class="grid">
|
||
<div class="stat s1">
|
||
<div class="big">2.4<small>×</small></div>
|
||
<h3>留存<br/>倍数</h3>
|
||
<p>手写欢迎语 + 真人回复的队列，相较于模板化对照组。该效果持续至 D90。</p>
|
||
</div>
|
||
<div class="stat s2">
|
||
<div class="big">$4.1<small>M</small></div>
|
||
<h3>预计留存<br/>ARR</h3>
|
||
<p>基于本季度注册队列建模，所有其他输入保持不变。</p>
|
||
</div>
|
||
<div class="stat s3">
|
||
<div class="big">72<small>HR</small></div>
|
||
<h3>关键<br/>窗口</h3>
|
||
<p>最初 72 小时后的行为，比任何功能指标都更能预测 18 个月留存率。</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>North & Partners</span><span>09 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 10 客户原声 ============ -->
|
||
<section class="slide s-quote" data-label="10 Voice" data-om-validate="false">
|
||
<div class="top">
|
||
<span>客户原声</span>
|
||
<span class="meta"><span>第三阶段</span><span>证据</span></span>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="qmark">"</div>
|
||
<div>
|
||
<blockquote>第三天的时候，有人给我写了一行真正的人话。我之前当了他们九个月的客户，然后才意识到，在那之后我再也没有成为过其他任何地方的客户。</blockquote>
|
||
<div class="who">Margaux Lévêque
|
||
<small>CFO · 中型零售企业 · 已使用 14 个月</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>North & Partners</span><span>10 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 11 行动号召 ============ -->
|
||
<section class="slide s-cta" data-label="11 Next" data-om-validate="false">
|
||
<div class="top">
|
||
<span>下一步</span>
|
||
<span class="meta"><span>机构 × 合作方</span><span>第五阶段</span></span>
|
||
</div>
|
||
<div class="stage">
|
||
<div class="pane l">
|
||
<div class="super" style="font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: .14em; text-transform: uppercase; opacity: .8;">从现在开始</div>
|
||
<h2>选定三个<br/><em>赌注。</em></h2>
|
||
<p>八周内三个试点项目。下一季度我们带回证据，到那时的问题不再是"是否发布"——而是"哪两个设为默认"。</p>
|
||
</div>
|
||
<div class="pane r">
|
||
<h3>本周行动方案</h3>
|
||
<div class="step">
|
||
<div class="n">1</div>
|
||
<div>
|
||
<h4>选定试点项目</h4>
|
||
<p>周五前确定三个中的两个。在同一场对话中指定负责人；清理日程安排。</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="n">2</div>
|
||
<div>
|
||
<h4>预注册判定标准</h4>
|
||
<p>在任何代码发布之前锁定指标、对照方案和终止标准。由分析团队起草；双方签署确认。</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="n">3</div>
|
||
<div>
|
||
<h4>设立周五复盘</h4>
|
||
<p>每个试点项目每周五一页幻灯片，直到赌注设为默认或被终止。无例外，不补做。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>North & Partners</span><span>11 / 11</span></div>
|
||
</section>
|
||
|
||
<!-- ============ 12 设计系统 ============ -->
|
||
</deck-stage>
|
||
|
||
</body>
|
||
</html>
|
||
```
|