freedakgmail
1234 lines
52 KiB
HTML
1234 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
|
||
<title>企业智脑：让数据产生决策力</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
:root {
|
||
--bg: #0a0e1a;
|
||
--surface: #111827;
|
||
--surface2: #1a2332;
|
||
--accent: #3b82f6;
|
||
--accent2: #60a5fa;
|
||
--accent3: #818cf8;
|
||
--gold: #fbbf24;
|
||
--green: #34d399;
|
||
--red: #f87171;
|
||
--yellow: #fbbf24;
|
||
--text: #e5e7eb;
|
||
--text2: #9ca3af;
|
||
--text3: #6b7280;
|
||
--border: rgba(255,255,255,0.08);
|
||
}
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
-webkit-tap-highlight-color: transparent;
|
||
-webkit-touch-callout: none;
|
||
}
|
||
|
||
.deck {
|
||
position: relative;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.slide {
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: clamp(20px, 5vw, 60px) clamp(16px, 5vw, 80px);
|
||
padding-bottom: 110px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: safe center;
|
||
opacity: 0;
|
||
transform: translateX(60px);
|
||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||
pointer-events: none;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
.slide.active {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.slide.prev {
|
||
transform: translateX(-60px);
|
||
}
|
||
|
||
/* ---- Typography ---- */
|
||
.slide-title {
|
||
font-size: clamp(24px, 5vw, 42px);
|
||
font-weight: 900;
|
||
margin-bottom: 8px;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
.slide-subtitle {
|
||
font-size: clamp(14px, 2.5vw, 18px);
|
||
color: var(--text2);
|
||
margin-bottom: clamp(16px, 3vw, 36px);
|
||
font-weight: 400;
|
||
}
|
||
.section-tag {
|
||
display: inline-block;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--accent2);
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* ---- Components ---- */
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: clamp(16px, 3vw, 28px);
|
||
}
|
||
|
||
.card-grid {
|
||
display: grid;
|
||
gap: 20px;
|
||
}
|
||
.grid-2 { grid-template-columns: 1fr 1fr; }
|
||
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
|
||
.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
||
|
||
.stat-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
}
|
||
.stat-card .icon {
|
||
font-size: 32px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.stat-card .label {
|
||
font-size: 14px;
|
||
color: var(--text2);
|
||
margin-bottom: 6px;
|
||
}
|
||
.stat-card .value {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--accent2);
|
||
}
|
||
|
||
.compare-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
.compare-table th {
|
||
text-align: left;
|
||
font-size: 14px;
|
||
color: var(--text3);
|
||
font-weight: 500;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.compare-table td {
|
||
padding: 14px 16px;
|
||
font-size: 15px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.compare-table .before { color: var(--red); }
|
||
.compare-table .after { color: var(--green); }
|
||
.compare-table tr:last-child td { border-bottom: none; }
|
||
|
||
.chip {
|
||
display: inline-block;
|
||
padding: 4px 14px;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
.chip-blue { background: rgba(59,130,246,0.15); color: var(--accent2); }
|
||
.chip-green { background: rgba(52,211,153,0.15); color: var(--green); }
|
||
.chip-red { background: rgba(248,113,113,0.15); color: var(--red); }
|
||
.chip-gold { background: rgba(251,191,36,0.15); color: var(--gold); }
|
||
|
||
.flow-arrow {
|
||
color: var(--text3);
|
||
font-size: 20px;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
/* ---- Navigation ---- */
|
||
.nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 70px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
z-index: 100;
|
||
background: linear-gradient(to top, var(--bg) 60%, transparent);
|
||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||
}
|
||
.nav button {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
color: var(--text);
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
}
|
||
.nav button:hover {
|
||
background: var(--accent);
|
||
border-color: var(--accent);
|
||
}
|
||
.nav .counter {
|
||
font-size: 14px;
|
||
color: var(--text2);
|
||
min-width: 60px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ---- Progress bar ---- */
|
||
.progress {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 3px;
|
||
background: var(--accent);
|
||
transition: width 0.4s ease;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* ---- Title slide ---- */
|
||
.title-slide {
|
||
align-items: center;
|
||
text-align: center;
|
||
background: radial-gradient(ellipse at 50% 40%, rgba(59,130,246,0.12) 0%, transparent 60%);
|
||
}
|
||
.title-slide .main-title {
|
||
font-size: clamp(36px, 10vw, 64px);
|
||
font-weight: 900;
|
||
letter-spacing: -1px;
|
||
margin-bottom: 20px;
|
||
background: linear-gradient(135deg, #e5e7eb 0%, #60a5fa 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.title-slide .tagline {
|
||
font-size: clamp(15px, 3.5vw, 22px);
|
||
color: var(--text2);
|
||
margin-bottom: clamp(24px, 5vw, 48px);
|
||
max-width: 700px;
|
||
line-height: 1.6;
|
||
padding: 0 12px;
|
||
}
|
||
.title-slide .date {
|
||
font-size: 15px;
|
||
color: var(--text3);
|
||
}
|
||
|
||
/* ---- Architecture diagram ---- */
|
||
.arch-layer {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 16px 24px;
|
||
border-radius: 12px;
|
||
margin-bottom: 10px;
|
||
transition: transform 0.2s;
|
||
}
|
||
.arch-layer:hover { transform: translateX(8px); }
|
||
.arch-layer .num {
|
||
font-size: 24px;
|
||
font-weight: 900;
|
||
width: 48px;
|
||
text-align: center;
|
||
}
|
||
.arch-layer .name {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
flex: 1;
|
||
}
|
||
.arch-layer .desc {
|
||
font-size: 15px;
|
||
color: var(--text2);
|
||
}
|
||
.arch-layer.l1 { background: linear-gradient(90deg, rgba(59,130,246,0.12), transparent); border-left: 3px solid var(--accent); }
|
||
.arch-layer.l2 { background: linear-gradient(90deg, rgba(96,165,250,0.12), transparent); border-left: 3px solid var(--accent2); }
|
||
.arch-layer.l3 { background: linear-gradient(90deg, rgba(129,140,248,0.12), transparent); border-left: 3px solid var(--accent3); }
|
||
.arch-layer.l4 { background: linear-gradient(90deg, rgba(251,191,36,0.12), transparent); border-left: 3px solid var(--gold); }
|
||
.arch-layer.l5 { background: linear-gradient(90deg, rgba(52,211,153,0.12), transparent); border-left: 3px solid var(--green); }
|
||
|
||
/* ---- Loop diagram ---- */
|
||
.loop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin: 20px 0;
|
||
}
|
||
.loop-step {
|
||
background: var(--surface2);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 12px 20px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ---- Timeline ---- */
|
||
.timeline {
|
||
display: flex;
|
||
gap: 0;
|
||
margin-top: 20px;
|
||
}
|
||
.timeline-item {
|
||
flex: 1;
|
||
position: relative;
|
||
padding: 0 20px;
|
||
text-align: center;
|
||
}
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: var(--border);
|
||
}
|
||
.timeline-item:first-child::before { left: 50%; }
|
||
.timeline-item:last-child::before { right: 50%; }
|
||
.timeline-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
margin: 14px auto;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.timeline-item .time {
|
||
font-size: 13px;
|
||
color: var(--accent2);
|
||
font-weight: 700;
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.timeline-item .title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
.timeline-item .desc {
|
||
font-size: 13px;
|
||
color: var(--text2);
|
||
text-align: center;
|
||
}
|
||
|
||
/* ---- Layer detail slide ---- */
|
||
.layer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 28px;
|
||
}
|
||
.layer-badge {
|
||
font-size: clamp(32px, 6vw, 48px);
|
||
font-weight: 900;
|
||
width: clamp(48px, 8vw, 72px);
|
||
height: clamp(48px, 8vw, 72px);
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.layer-info h2 { font-size: clamp(20px, 4vw, 32px); font-weight: 800; }
|
||
.layer-info p { font-size: clamp(13px, 2vw, 16px); color: var(--text2); margin-top: 4px; }
|
||
|
||
.point-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
.point-list li {
|
||
padding: 10px 0;
|
||
font-size: 15px;
|
||
line-height: 1.7;
|
||
color: var(--text);
|
||
padding-left: 24px;
|
||
position: relative;
|
||
}
|
||
.point-list li::before {
|
||
content: '▸';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--accent2);
|
||
}
|
||
|
||
/* ---- Case slide ---- */
|
||
.case-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
padding: 20px 24px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.case-card .label {
|
||
font-size: 13px;
|
||
color: var(--accent2);
|
||
font-weight: 700;
|
||
margin-bottom: 6px;
|
||
}
|
||
.case-card .content {
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ---- Summary slide ---- */
|
||
.summary-slide {
|
||
align-items: center;
|
||
text-align: center;
|
||
background: radial-gradient(ellipse at 50% 50%, rgba(59,130,246,0.1) 0%, transparent 60%);
|
||
}
|
||
.summary-slide .big-text {
|
||
font-size: clamp(18px, 4vw, 28px);
|
||
font-weight: 700;
|
||
line-height: 1.8;
|
||
max-width: 800px;
|
||
margin: 0 auto 40px;
|
||
}
|
||
.summary-slide .highlight {
|
||
color: var(--accent2);
|
||
}
|
||
.summary-slide .final {
|
||
font-size: clamp(22px, 5vw, 36px);
|
||
font-weight: 900;
|
||
color: var(--gold);
|
||
margin-top: 20px;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
/* ---- BI comparison ---- */
|
||
.vs-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
.vs-table th {
|
||
padding: 14px 20px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
border-bottom: 2px solid var(--border);
|
||
}
|
||
.vs-table th.bi { color: var(--text3); }
|
||
.vs-table th.brain { color: var(--accent2); }
|
||
.vs-table td {
|
||
padding: 12px 20px;
|
||
font-size: 14px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.vs-table td.bi { color: var(--text3); }
|
||
.vs-table td.brain { color: var(--text); font-weight: 500; }
|
||
|
||
/* ---- Deliverables ---- */
|
||
.deliv-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 18px;
|
||
}
|
||
.deliv-card .name {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
margin-bottom: 6px;
|
||
}
|
||
.deliv-card .desc {
|
||
font-size: 13px;
|
||
color: var(--text2);
|
||
line-height: 1.5;
|
||
}
|
||
.deliv-card .stage {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* ---- Effect table ---- */
|
||
.effect-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
.effect-table th {
|
||
padding: 14px 20px;
|
||
font-size: 14px;
|
||
color: var(--text3);
|
||
font-weight: 500;
|
||
border-bottom: 1px solid var(--border);
|
||
text-align: left;
|
||
}
|
||
.effect-table td {
|
||
padding: 14px 20px;
|
||
font-size: 15px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.effect-table .before { color: var(--red); }
|
||
.effect-table .after { color: var(--green); font-weight: 600; }
|
||
|
||
/* ---- Misc ---- */
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
.three-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
/* ---- Mobile Responsive ---- */
|
||
@media (max-width: 768px) {
|
||
.grid-2 { grid-template-columns: 1fr; }
|
||
.grid-3 { grid-template-columns: 1fr; }
|
||
.grid-4 { grid-template-columns: 1fr 1fr; }
|
||
.two-col { grid-template-columns: 1fr; gap: 16px; }
|
||
.three-col { grid-template-columns: 1fr; gap: 12px; }
|
||
.timeline { flex-direction: column; gap: 16px; }
|
||
.timeline-item { padding: 0; }
|
||
.timeline-item::before { display: none; }
|
||
.timeline-dot { margin: 0 auto; }
|
||
.compare-table th, .compare-table td { padding: 8px 10px; font-size: 13px; }
|
||
.vs-table th, .vs-table td { padding: 8px 10px; font-size: 12px; }
|
||
.effect-table th, .effect-table td { padding: 8px 10px; font-size: 13px; }
|
||
.loop-step { padding: 8px 14px; font-size: 13px; }
|
||
.flow-arrow { font-size: 16px; margin: 0 4px; }
|
||
.point-list li { font-size: 13px; line-height: 1.6; }
|
||
.card { padding: 14px; }
|
||
.case-card { padding: 14px 16px; }
|
||
.case-card .content { font-size: 13px; }
|
||
.deliv-card { padding: 14px; }
|
||
.deliv-card .name { font-size: 14px; }
|
||
.deliv-card .desc { font-size: 12px; }
|
||
.highlight-box { padding: 14px 16px; }
|
||
.highlight-box .body { font-size: 13px; }
|
||
.arch-layer { padding: 12px 16px; gap: 12px; }
|
||
.arch-layer .num { font-size: 20px; width: 36px; }
|
||
.arch-layer .name { font-size: 15px; }
|
||
.arch-layer .desc { font-size: 13px; }
|
||
.layer-header { gap: 12px; margin-bottom: 16px; }
|
||
.nav { bottom: 12px; gap: 12px; }
|
||
.nav button { width: 36px; height: 36px; font-size: 16px; }
|
||
.nav .counter { font-size: 12px; min-width: 50px; }
|
||
.chip { font-size: 11px; padding: 3px 10px; }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.grid-4 { grid-template-columns: 1fr; }
|
||
.slide { padding-top: 16px; padding-left: 14px; padding-right: 14px; }
|
||
.compare-table th, .compare-table td { padding: 6px 8px; font-size: 12px; }
|
||
.vs-table th, .vs-table td { padding: 6px 8px; font-size: 11px; }
|
||
.point-list li { font-size: 12px; }
|
||
.loop-step { padding: 6px 10px; font-size: 12px; }
|
||
}
|
||
.highlight-box {
|
||
background: rgba(59,130,246,0.08);
|
||
border: 1px solid rgba(59,130,246,0.2);
|
||
border-radius: 12px;
|
||
padding: 20px 24px;
|
||
margin-top: 16px;
|
||
}
|
||
.highlight-box .title {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--accent2);
|
||
margin-bottom: 8px;
|
||
}
|
||
.highlight-box .body {
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
color: var(--text);
|
||
}
|
||
|
||
.footer-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 0;
|
||
z-index: 50;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="progress" id="progress"></div>
|
||
|
||
<div class="deck" id="deck">
|
||
|
||
<!-- Slide 1: Title -->
|
||
<div class="slide title-slide active" data-slide="1">
|
||
<div class="section-tag">ENTERPRISE INTELLIGENCE</div>
|
||
<h1 class="main-title">企业智脑</h1>
|
||
<p class="tagline">把散落在各系统和 Excel 里的数据，变成能自动发现问题、驱动执行、预测未来的企业大脑</p>
|
||
<p class="date">2026 年 8 月</p>
|
||
</div>
|
||
|
||
<!-- Slide 2: AI LLM Application Pyramid -->
|
||
<div class="slide" data-slide="2">
|
||
<div class="section-tag">AI LLM × 企业管理</div>
|
||
<h2 class="slide-title">AI 大模型在企业管理中的应用层级</h2>
|
||
<p class="slide-subtitle">企业智脑是 AI LLM 在企业管理领域的最顶层应用，也是价值最高的应用</p>
|
||
<div style="display:flex;align-items:center;gap:40px;margin-top:20px;flex-wrap:wrap;">
|
||
<!-- Stacked rectangles -->
|
||
<div style="flex:0 0 420px;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;">
|
||
<div style="width:50%;min-width:180px;max-width:210px;background:linear-gradient(135deg,rgba(251,191,36,0.2),rgba(251,191,36,0.05));border:1px solid rgba(251,191,36,0.4);border-radius:10px;padding:14px 20px;text-align:center;">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--gold);margin-bottom:6px;"><path d="M12 2a4.5 4.5 0 0 0-4.5 4.5v0A4.5 4.5 0 0 0 3 11v0a4.5 4.5 0 0 0 1.5 3.4v0A4.5 4.5 0 0 0 6 21v0a4.5 4.5 0 0 0 6 1.5V2z"/><path d="M12 2a4.5 4.5 0 0 1 4.5 4.5v0A4.5 4.5 0 0 1 21 11v0a4.5 4.5 0 0 1-1.5 3.4v0A4.5 4.5 0 0 1 18 21v0a4.5 4.5 0 0 1-6 1.5V2z"/></svg>
|
||
<div style="font-size:20px;font-weight:900;color:var(--gold);">企业智脑</div>
|
||
<div style="font-size:11px;color:var(--text2);margin-top:4px;">战略决策 · 全局协同 · 自主进化</div>
|
||
</div>
|
||
<div style="width:62%;min-width:220px;max-width:260px;background:linear-gradient(135deg,rgba(129,140,248,0.18),rgba(129,140,248,0.04));border:1px solid rgba(129,140,248,0.3);border-radius:10px;padding:12px 20px;text-align:center;">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent3);margin-bottom:4px;"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||
<div style="font-size:16px;font-weight:700;color:var(--accent3);">智能分析与预测</div>
|
||
<div style="font-size:11px;color:var(--text2);margin-top:4px;">趋势预测 · 归因分析 · 情景推演</div>
|
||
</div>
|
||
<div style="width:76%;min-width:260px;max-width:320px;background:linear-gradient(135deg,rgba(96,165,250,0.15),rgba(96,165,250,0.03));border:1px solid rgba(96,165,250,0.25);border-radius:10px;padding:12px 20px;text-align:center;">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent2);margin-bottom:4px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>
|
||
<div style="font-size:16px;font-weight:700;color:var(--accent2);">知识管理与生成</div>
|
||
<div style="font-size:11px;color:var(--text2);margin-top:4px;">报告生成 · SOP提取 · 课件制作</div>
|
||
</div>
|
||
<div style="width:90%;min-width:300px;max-width:380px;background:linear-gradient(135deg,rgba(59,130,246,0.12),rgba(59,130,246,0.02));border:1px solid rgba(59,130,246,0.2);border-radius:10px;padding:12px 20px;text-align:center;">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent);margin-bottom:4px;"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/><circle cx="12" cy="12" r="3"/></svg>
|
||
<div style="font-size:16px;font-weight:700;color:var(--accent);">流程自动化</div>
|
||
<div style="font-size:11px;color:var(--text2);margin-top:4px;">数据采集 · 清洗归一 · 定时调度</div>
|
||
</div>
|
||
<div style="width:100%;max-width:440px;background:rgba(156,163,175,0.08);border:1px solid var(--border);border-radius:10px;padding:12px 20px;text-align:center;">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--text2);margin-bottom:4px;"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||
<div style="font-size:15px;font-weight:600;color:var(--text2);">对话与问答</div>
|
||
<div style="font-size:11px;color:var(--text3);margin-top:4px;">智能客服 · 知识问答 · 文档摘要</div>
|
||
</div>
|
||
</div>
|
||
<!-- Value explanation -->
|
||
<div style="flex:1;">
|
||
<div style="margin-bottom:20px;">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;">
|
||
<span class="chip chip-gold">最顶层</span>
|
||
<span style="font-size:18px;font-weight:700;color:var(--gold);">企业智脑</span>
|
||
</div>
|
||
<p style="font-size:14px;color:var(--text2);line-height:1.7;">不是单点工具，而是贯穿企业全运营的决策中枢。AI LLM 在这里不再只是"回答问题"，而是<strong style="color:var(--text);">主动发现问题、驱动执行、检验效果、持续进化</strong>。</p>
|
||
</div>
|
||
<div style="margin-bottom:16px;">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;">
|
||
<span class="chip chip-blue">为什么最有价值</span>
|
||
</div>
|
||
<ul class="point-list">
|
||
<li><strong>影响范围最大</strong>：覆盖战略→运营→执行全层级，影响企业每一个决策</li>
|
||
<li><strong>价值链条最长</strong>：从数据到洞察到行动到检验，闭环驱动经营结果</li>
|
||
<li><strong>复利效应最强</strong>：知识持续沉淀，系统越用越准，组织越用越强</li>
|
||
<li><strong>替代成本最高</strong>：深度融合行业最佳实践与企业自身经验，不可复制</li>
|
||
</ul>
|
||
</div>
|
||
<div class="highlight-box" style="margin-top:16px;">
|
||
<div class="title">核心区别</div>
|
||
<div class="body">其他 AI 应用是"工具"——人决定做什么，AI 辅助完成；<br>企业智脑是"伙伴"——AI 主动发现该做什么，驱动人去执行，并检验结果。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 3: Why -->
|
||
<div class="slide" data-slide="3">
|
||
<div class="section-tag">CHAPTER 01</div>
|
||
<h2 class="slide-title">为什么需要企业智脑</h2>
|
||
<p class="slide-subtitle">企业普遍面临四个断裂</p>
|
||
<div class="card-grid grid-4">
|
||
<div class="card" style="border-top: 3px solid var(--red);">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--red);margin-bottom:12px;"><rect x="2" y="10" width="4" height="10" rx="1"/><rect x="10" y="4" width="4" height="16" rx="1"/><rect x="18" y="14" width="4" height="6" rx="1"/></svg>
|
||
<h3 style="font-size:18px;margin-bottom:8px;">数据断裂</h3>
|
||
<p style="font-size:14px;color:var(--text2);line-height:1.6;">多系统、多格式、多标准，数据无法互通</p>
|
||
<div style="margin-top:12px;"><span class="chip chip-red">有数据、无资产</span></div>
|
||
</div>
|
||
<div class="card" style="border-top: 3px solid var(--yellow);">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--yellow);margin-bottom:12px;"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></svg>
|
||
<h3 style="font-size:18px;margin-bottom:8px;">分析断裂</h3>
|
||
<p style="font-size:14px;color:var(--text2);line-height:1.6;">报表很多，但不知道看什么、怎么分析、怎么办</p>
|
||
<div style="margin-top:12px;"><span class="chip chip-gold">有报表、无洞察</span></div>
|
||
</div>
|
||
<div class="card" style="border-top: 3px solid var(--accent);">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent);margin-bottom:12px;"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
||
<h3 style="font-size:18px;margin-bottom:8px;">执行断裂</h3>
|
||
<p style="font-size:14px;color:var(--text2);line-height:1.6;">战略目标制定后，无法穿透到一线行动</p>
|
||
<div style="margin-top:12px;"><span class="chip chip-blue">有目标、无落地</span></div>
|
||
</div>
|
||
<div class="card" style="border-top: 3px solid var(--text3);">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--text2);margin-bottom:12px;"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/></svg>
|
||
<h3 style="font-size:18px;margin-bottom:8px;">知识断裂</h3>
|
||
<p style="font-size:14px;color:var(--text2);line-height:1.6;">最佳实践留在个人脑中，组织能力无法积累</p>
|
||
<div style="margin-top:12px;"><span class="chip" style="background:rgba(156,163,175,0.15);color:var(--text2);">有经验、无沉淀</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight-box" style="margin-top:28px;">
|
||
<div class="title">企业智脑的本质</div>
|
||
<div class="body">用 AI 把这四个断裂接上，让数据从"被动查看"变成"主动驱动"</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 4: Architecture Overview -->
|
||
<div class="slide" data-slide="4">
|
||
<div class="section-tag">CHAPTER 02</div>
|
||
<h2 class="slide-title">五层架构总览</h2>
|
||
<p class="slide-subtitle">从地基到进化，逐层构建企业智脑</p>
|
||
<div style="max-width:800px;">
|
||
<div class="arch-layer l1">
|
||
<div class="num" style="color:var(--accent);">01</div>
|
||
<div>
|
||
<div class="name">数据资产化 <span style="font-size:14px;color:var(--text3);font-weight:400;">（地基）</span></div>
|
||
<div class="desc">让数据"通起来"</div>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer l2">
|
||
<div class="num" style="color:var(--accent2);">02</div>
|
||
<div>
|
||
<div class="name">运营指标化 <span style="font-size:14px;color:var(--text3);font-weight:400;">（骨架）</span></div>
|
||
<div class="desc">让问题"浮出来"</div>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer l3">
|
||
<div class="num" style="color:var(--accent3);">03</div>
|
||
<div>
|
||
<div class="name">战略穿透化 <span style="font-size:14px;color:var(--text3);font-weight:400;">（神经）</span></div>
|
||
<div class="desc">让目标"落下去"</div>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer l4">
|
||
<div class="num" style="color:var(--gold);">04</div>
|
||
<div>
|
||
<div class="name">态势感知化 <span style="font-size:14px;color:var(--text3);font-weight:400;">（感官）</span></div>
|
||
<div class="desc">让风险"早知道"</div>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer l5">
|
||
<div class="num" style="color:var(--green);">05</div>
|
||
<div>
|
||
<div class="name">知识沉淀化 <span style="font-size:14px;color:var(--text3);font-weight:400;">（进化）</span></div>
|
||
<div class="desc">让组织"越来越聪明"</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight-box" style="margin-top:20px;max-width:800px;">
|
||
<div class="title">核心设计原则</div>
|
||
<div class="body">下层为上层提供输入，上层为下层提供方向 · 每层内部有闭环，层间也有反馈闭环 · AI 贯穿全栈，越用越准</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 5: Layer 1 - Data -->
|
||
<div class="slide" data-slide="5">
|
||
<div class="section-tag">第一层 · 地基</div>
|
||
<div class="layer-header">
|
||
<div class="layer-badge" style="background:rgba(59,130,246,0.15);color:var(--accent);">01</div>
|
||
<div class="layer-info">
|
||
<h2>数据资产化</h2>
|
||
<p>让数据"通起来"</p>
|
||
</div>
|
||
</div>
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">要解决的问题</h3>
|
||
<p style="font-size:15px;line-height:1.7;color:var(--text);margin-bottom:24px;">数据散落在 ERP、POS、WMS、HR、财务系统和大量 Excel 中，格式不一、标准不同、无法关联。</p>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">怎么做</h3>
|
||
<ul class="point-list">
|
||
<li><strong>本体论语义模型</strong>：AI 定义企业实体、属性、关系，形成统一"数据语言"</li>
|
||
<li><strong>自动接入异构数据源</strong>：AI 自动识别数据结构，映射到本体模型</li>
|
||
<li><strong>自动清洗与质检</strong>：异常金额、缺失字段等自动标记和修复</li>
|
||
<li><strong>输出标准化数据资产</strong>：可关联、可追溯、可复用</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">老板能看到什么</h3>
|
||
<div class="card">
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr><th>建设前</th><th>建设后</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="before">想看个数据，找IT排期3天</td><td class="after">随时可用，分钟级准备</td></tr>
|
||
<tr><td class="before">各系统数据对不上</td><td class="after">统一口径，一个来源</td></tr>
|
||
<tr><td class="before">Excel 满天飞</td><td class="after">数据都在资产库里</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 6: Layer 2 - Indicators -->
|
||
<div class="slide" data-slide="6">
|
||
<div class="section-tag">第二层 · 骨架</div>
|
||
<div class="layer-header">
|
||
<div class="layer-badge" style="background:rgba(96,165,250,0.15);color:var(--accent2);">02</div>
|
||
<div class="layer-info">
|
||
<h2>运营指标化</h2>
|
||
<p>让问题"浮出来"</p>
|
||
</div>
|
||
</div>
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">分层指标体系</h3>
|
||
<div style="margin-bottom:16px;">
|
||
<div style="display:flex;gap:12px;margin-bottom:8px;">
|
||
<span class="chip chip-blue">战略层</span>
|
||
<span style="font-size:14px;color:var(--text2);line-height:1.8;">营收 · 利润 · 门店数 · 会员数</span>
|
||
</div>
|
||
<div style="display:flex;gap:12px;margin-bottom:8px;">
|
||
<span class="chip chip-green">运营层</span>
|
||
<span style="font-size:14px;color:var(--text2);line-height:1.8;">客单价 · 客流 · 成本率 · 达成率</span>
|
||
</div>
|
||
<div style="display:flex;gap:12px;">
|
||
<span class="chip chip-gold">执行层</span>
|
||
<span style="font-size:14px;color:var(--text2);line-height:1.8;">日营收 · 时段营收 · 出品时效</span>
|
||
</div>
|
||
</div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin:20px 0 12px;">六步闭环</h3>
|
||
<div class="loop">
|
||
<div class="loop-step">数据</div><span class="flow-arrow">→</span>
|
||
<div class="loop-step">分析</div><span class="flow-arrow">→</span>
|
||
<div class="loop-step">发现问题</div><span class="flow-arrow">→</span>
|
||
<div class="loop-step">生成方案</div>
|
||
</div>
|
||
<div class="loop" style="margin-top:4px;">
|
||
<span class="flow-arrow">→</span>
|
||
<div class="loop-step">执行落地</div><span class="flow-arrow">→</span>
|
||
<div class="loop-step">检验效果</div><span class="flow-arrow">↩</span>
|
||
<span style="font-size:13px;color:var(--text3);">效果不达标自动回到分析</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">老板能看到什么</h3>
|
||
<div class="card">
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr><th>建设前</th><th>建设后</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="before">月底才知道目标没达成</td><td class="after">每天自动推送达成率</td></tr>
|
||
<tr><td class="before">数据异常靠人去发现</td><td class="after">系统自动发现并推送</td></tr>
|
||
<tr><td class="before">发现问题不知道怎么办</td><td class="after">自动归因 + 推荐方案</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 7: Layer 3 - Strategy -->
|
||
<div class="slide" data-slide="7">
|
||
<div class="section-tag">第三层 · 神经</div>
|
||
<div class="layer-header">
|
||
<div class="layer-badge" style="background:rgba(129,140,248,0.15);color:var(--accent3);">03</div>
|
||
<div class="layer-info">
|
||
<h2>战略穿透化</h2>
|
||
<p>让目标"落下去"</p>
|
||
</div>
|
||
</div>
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">四步穿透闭环</h3>
|
||
<div style="display:flex;flex-direction:column;gap:12px;">
|
||
<div class="card" style="padding:16px 20px;">
|
||
<div style="display:flex;align-items:center;gap:12px;">
|
||
<span class="chip chip-blue" style="min-width:80px;text-align:center;">战略制定</span>
|
||
<span style="font-size:14px;color:var(--text2);">AI 多因子测算，生成战略草案</span>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;color:var(--text3);">↓</div>
|
||
<div class="card" style="padding:16px 20px;">
|
||
<div style="display:flex;align-items:center;gap:12px;">
|
||
<span class="chip chip-green" style="min-width:80px;text-align:center;">分解落地</span>
|
||
<span style="font-size:14px;color:var(--text2);">年度→区域→门店→个人，差异化分配</span>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;color:var(--text3);">↓</div>
|
||
<div class="card" style="padding:16px 20px;">
|
||
<div style="display:flex;align-items:center;gap:12px;">
|
||
<span class="chip chip-gold" style="min-width:80px;text-align:center;">执行反馈</span>
|
||
<span style="font-size:14px;color:var(--text2);">日目标卡 + 实时达成率 + 偏差归因</span>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;color:var(--text3);">↓</div>
|
||
<div class="card" style="padding:16px 20px;">
|
||
<div style="display:flex;align-items:center;gap:12px;">
|
||
<span class="chip" style="min-width:80px;text-align:center;background:rgba(52,211,153,0.15);color:var(--green);">战略优化</span>
|
||
<span style="font-size:14px;color:var(--text2);">自动复盘报告 + AI 调整建议</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">老板能看到什么</h3>
|
||
<div class="card">
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr><th>建设前</th><th>建设后</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="before">年度目标定了就忘</td><td class="after">拆解到每个人、每一天</td></tr>
|
||
<tr><td class="before">不知道门店执行怎样</td><td class="after">实时达成率，偏差归因</td></tr>
|
||
<tr><td class="before">战略调整靠感觉</td><td class="after">复盘数据包 + AI建议</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="highlight-box" style="margin-top:16px;">
|
||
<div class="title">差异化分配</div>
|
||
<div class="body">A 级店 110% · B 级店 100% · C 级店 90% · D 级店整改</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 8: Layer 4 - Awareness -->
|
||
<div class="slide" data-slide="8">
|
||
<div class="section-tag">第四层 · 感官</div>
|
||
<div class="layer-header">
|
||
<div class="layer-badge" style="background:rgba(251,191,36,0.15);color:var(--gold);">04</div>
|
||
<div class="layer-info">
|
||
<h2>态势感知化</h2>
|
||
<p>让风险"早知道"</p>
|
||
</div>
|
||
</div>
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">四大能力</h3>
|
||
<ul class="point-list">
|
||
<li><strong>实时态势感知</strong>：全维度监控仪表盘，红黄绿灯自动标色</li>
|
||
<li><strong>趋势预测</strong>：AI 预测营收/客流/库存趋势，提前预判拐点</li>
|
||
<li><strong>风险预警</strong>：规则引擎 + AI 异常检测，自动预警推送</li>
|
||
<li><strong>情景推演</strong>：AI 模拟决策预期效果</li>
|
||
</ul>
|
||
<h3 style="font-size:16px;color:var(--text2);margin:20px 0 12px;">预警示例</h3>
|
||
<div style="display:flex;flex-direction:column;gap:8px;">
|
||
<div style="display:flex;align-items:center;gap:10px;font-size:13px;">
|
||
<span class="chip chip-red">红灯</span><span style="color:var(--text2);">日达成率 < 80% → 推送店长</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;font-size:13px;">
|
||
<span class="chip chip-gold">黄灯</span><span style="color:var(--text2);">离职率 > 15% → 推送HR</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;font-size:13px;">
|
||
<span class="chip chip-red">红灯</span><span style="color:var(--text2);">连续3月未达标 → 推送决策层</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">老板能看到什么</h3>
|
||
<div class="card">
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr><th>建设前</th><th>建设后</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="before">出了问题才知道</td><td class="after">风险提前预警，消灭在萌芽</td></tr>
|
||
<tr><td class="before">看数据但不清楚趋势</td><td class="after">AI 预测趋势，预判拐点</td></tr>
|
||
<tr><td class="before">决策靠拍脑袋</td><td class="after">情景推演，先看预期效果</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 9: Layer 5 - Knowledge -->
|
||
<div class="slide" data-slide="9">
|
||
<div class="section-tag">第五层 · 进化</div>
|
||
<div class="layer-header">
|
||
<div class="layer-badge" style="background:rgba(52,211,153,0.15);color:var(--green);">05</div>
|
||
<div class="layer-info">
|
||
<h2>知识沉淀化</h2>
|
||
<p>让组织"越来越聪明"</p>
|
||
</div>
|
||
</div>
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">要解决的问题</h3>
|
||
<p style="font-size:15px;line-height:1.7;color:var(--text);margin-bottom:24px;">最佳实践留在优秀店长脑中，换人就退化；同样的错误反复犯；组织能力无法积累。</p>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">知识转化路径</h3>
|
||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||
<div class="loop-step" style="text-align:center;">执行结果</div>
|
||
<div style="text-align:center;color:var(--text3);">↓ AI 提取模式</div>
|
||
<div class="loop-step" style="text-align:center;">更新最佳实践库</div>
|
||
<div style="text-align:center;color:var(--text3);">↓ 自动转化</div>
|
||
<div class="loop-step" style="text-align:center;">SOP / 课件 / 预警规则</div>
|
||
<div style="text-align:center;color:var(--text3);">↓ 指导</div>
|
||
<div class="loop-step" style="text-align:center;">下一次执行</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">老板能看到什么</h3>
|
||
<div class="card">
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr><th>建设前</th><th>建设后</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="before">优秀店长走了，业绩就掉</td><td class="after">最佳实践沉淀在系统里</td></tr>
|
||
<tr><td class="before">同样的错误反复犯</td><td class="after">预警规则自动拦截</td></tr>
|
||
<tr><td class="before">培训内容过时</td><td class="after">SOP 变更自动生成课件</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="highlight-box" style="margin-top:16px;">
|
||
<div class="title">核心价值</div>
|
||
<div class="body">从"个人经验"到"组织智能"，企业能力随时间复利增长</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 10: Roadmap -->
|
||
<div class="slide" data-slide="10">
|
||
<div class="section-tag">CHAPTER 03</div>
|
||
<h2 class="slide-title">建设路径</h2>
|
||
<p class="slide-subtitle">8 周内完成三步走，快速见效</p>
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="time">第 1-2 周</div>
|
||
<div class="timeline-dot" style="background:var(--accent);"></div>
|
||
<div class="title">打地基</div>
|
||
<div class="desc">数据通起来<br>指标建起来</div>
|
||
<div style="margin-top:10px;font-size:12px;color:var(--accent2);">数据资产化 + 指标体系 + 预警引擎</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="time">第 3-5 周</div>
|
||
<div class="timeline-dot" style="background:var(--accent3);"></div>
|
||
<div class="title">接神经</div>
|
||
<div class="desc">目标落下去<br>问题浮出来</div>
|
||
<div style="margin-top:10px;font-size:12px;color:var(--accent3);">目标穿透 + 六步闭环 + 态势感知</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="time">第 6-8 周</div>
|
||
<div class="timeline-dot" style="background:var(--green);"></div>
|
||
<div class="title">长大脑</div>
|
||
<div class="desc">系统自己学<br>越用越准</div>
|
||
<div style="margin-top:10px;font-size:12px;color:var(--green);">知识沉淀 + AI预测 + 情景推演</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:36px;">
|
||
<h3 style="font-size:16px;color:var(--text2);margin-bottom:16px;">投入产出预期</h3>
|
||
<div class="card">
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr><th>阶段</th><th>投入重点</th><th>可量化收益</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><strong>第一步</strong></td><td>数据治理 + 系统建设</td><td class="after">经营数据 T+1 自动入库，损益核算从月级到日级</td></tr>
|
||
<tr><td><strong>第二步</strong></td><td>流程重构 + 习惯培养</td><td class="after">目标达成率提升 10-15%，毛利率提升 2-3%，运营成本降低 5-8%</td></tr>
|
||
<tr><td><strong>第三步</strong></td><td>AI 模型 + 持续优化</td><td class="after">库存周转减少 3-5 天，人效提升 10-15%，决策响应提升 3 倍</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 11: vs BI -->
|
||
<div class="slide" data-slide="11">
|
||
<div class="section-tag">CHAPTER 04</div>
|
||
<h2 class="slide-title">与普通 BI 系统的区别</h2>
|
||
<p class="slide-subtitle">不是看数据的工具，是驱动决策的大脑</p>
|
||
<div class="card" style="max-width:900px;">
|
||
<table class="vs-table">
|
||
<thead>
|
||
<tr>
|
||
<th>维度</th>
|
||
<th class="bi">普通 BI</th>
|
||
<th class="brain">企业智脑</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><strong>定位</strong></td><td class="bi">看数据的工具</td><td class="brain">驱动决策的大脑</td></tr>
|
||
<tr><td><strong>数据</strong></td><td class="bi">人工整理、手工导入</td><td class="brain">自动采集、自动清洗、本体论建模</td></tr>
|
||
<tr><td><strong>指标</strong></td><td class="bi">固定报表</td><td class="brain">AI 构建分层体系，自动关联责任人</td></tr>
|
||
<tr><td><strong>发现问题</strong></td><td class="bi">人去看数据</td><td class="brain">系统自动发现并推送</td></tr>
|
||
<tr><td><strong>解决问题</strong></td><td class="bi">只报告不行动</td><td class="brain">自动生成方案、追踪执行、检验效果</td></tr>
|
||
<tr><td><strong>知识</strong></td><td class="bi">用完即弃</td><td class="brain">自动沉淀、持续学习、越用越准</td></tr>
|
||
<tr><td><strong>战略</strong></td><td class="bi">提供数据参考</td><td class="brain">目标穿透到个人，执行实时反馈</td></tr>
|
||
<tr><td><strong>预测</strong></td><td class="bi">看历史</td><td class="brain">预测未来、推演决策</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 12: Deliverables -->
|
||
<div class="slide" data-slide="12">
|
||
<div class="section-tag">CHAPTER 05</div>
|
||
<h2 class="slide-title">交付成果</h2>
|
||
<p class="slide-subtitle">系统交付物 + 管理交付物</p>
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--accent2);margin-bottom:16px;">系统交付物</h3>
|
||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||
<div class="deliv-card"><div class="name">统一数据资产平台</div><div class="desc">异构系统数据自动采集、清洗、标准化入库</div><div class="stage"><span class="chip chip-blue">第一步</span></div></div>
|
||
<div class="deliv-card"><div class="name">分层指标看板</div><div class="desc">战略层→运营层→执行层三级指标体系</div><div class="stage"><span class="chip chip-blue">第一步</span></div></div>
|
||
<div class="deliv-card"><div class="name">预警规则引擎</div><div class="desc">指标偏离自动预警，推送责任人，生成纠偏任务</div><div class="stage"><span class="chip chip-blue">第一步</span></div></div>
|
||
<div class="deliv-card"><div class="name">目标穿透系统</div><div class="desc">年度目标逐级拆解到个人，日目标卡自动生成</div><div class="stage"><span class="chip" style="background:rgba(129,140,248,0.15);color:var(--accent3);">第二步</span></div></div>
|
||
<div class="deliv-card"><div class="name">态势感知看板</div><div class="desc">红黄绿灯监控 + 趋势预测 + 情景推演</div><div class="stage"><span class="chip" style="background:rgba(129,140,248,0.15);color:var(--accent3);">第二步</span></div></div>
|
||
<div class="deliv-card"><div class="name">知识沉淀平台</div><div class="desc">最佳实践自动提取、SOP自动更新、课件自动生成</div><div class="stage"><span class="chip chip-green">第三步</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="font-size:16px;color:var(--gold);margin-bottom:16px;">管理交付物</h3>
|
||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||
<div class="deliv-card"><div class="name">数据资产目录</div><div class="desc">企业全部数据资产的统一目录，可检索、可追溯</div><div class="stage"><span class="chip chip-blue">第一步</span></div></div>
|
||
<div class="deliv-card"><div class="name">指标词典</div><div class="desc">每个指标的定义、口径、责任人、阈值</div><div class="stage"><span class="chip chip-blue">第一步</span></div></div>
|
||
<div class="deliv-card"><div class="name">目标责任矩阵</div><div class="desc">每个目标落实到具体责任人，达成率实时可见</div><div class="stage"><span class="chip" style="background:rgba(129,140,248,0.15);color:var(--accent3);">第二步</span></div></div>
|
||
<div class="deliv-card"><div class="name">经营复盘报告</div><div class="desc">日/周/月自动生成，含达成率、偏差归因、改进建议</div><div class="stage"><span class="chip" style="background:rgba(129,140,248,0.15);color:var(--accent3);">第二步</span></div></div>
|
||
<div class="deliv-card"><div class="name">最佳实践库</div><div class="desc">沉淀组织经验，不依赖个人，新人快速上手</div><div class="stage"><span class="chip chip-green">第三步</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 13: Case -->
|
||
<div class="slide" data-slide="13">
|
||
<div class="section-tag">CHAPTER 06 · 案例已脱敏</div>
|
||
<h2 class="slide-title">某餐饮连锁企业的智脑实践</h2>
|
||
<p class="slide-subtitle">约 90 家直营门店 · 5 个区域 · 中央厨房配送体系</p>
|
||
<div class="three-col">
|
||
<div class="case-card">
|
||
<div class="label">第一层 · 数据资产化</div>
|
||
<div class="content">POS、外卖、库存、HR、财务数据统一采集，T+1 自动入库。原来 3 人 2 天做报表 → 一键生成。</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div class="label">第二层 · 运营指标化</div>
|
||
<div class="content">某店连续 3 天达成率 < 80% → 自动红灯预警 → 归因发现客流降 15% → 生成纠偏任务 → 3 天后恢复 95%。</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div class="label">第三层 · 战略穿透化</div>
|
||
<div class="content">年度营收 3.6 亿 → 5 个区域 → 90 家店差异化分配 → 每日目标卡 → 月末自动偏差报告。</div>
|
||
</div>
|
||
</div>
|
||
<div class="three-col" style="margin-top:12px;">
|
||
<div class="case-card">
|
||
<div class="label">第四层 · 态势感知化</div>
|
||
<div class="content">90 家店红黄绿灯一目了然。3 家红灯 → 点击查看 → 损耗率超标 → 一键下达整改任务。</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div class="label">第五层 · 知识沉淀化</div>
|
||
<div class="content">A 级店复购率高于同区 → 自动提取关键动作 → 推荐给 C 级店 → 执行后复购率提升 12%。</div>
|
||
</div>
|
||
<div class="case-card" style="border:1px solid rgba(52,211,153,0.3);">
|
||
<div class="label" style="color:var(--green);">建设效果</div>
|
||
<div class="content">
|
||
数据准备：3-5天 → T+1<br>
|
||
问题发现：月级 → 日级<br>
|
||
目标达成率：85% → 95%+<br>
|
||
毛利率：提升 2-3%<br>
|
||
库存周转：减少 3-5 天<br>
|
||
决策响应：3-5天 → 当天
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 14: Summary -->
|
||
<div class="slide summary-slide" data-slide="14">
|
||
<div class="section-tag">SUMMARY</div>
|
||
<div class="big-text">
|
||
企业智脑不是一个 IT 项目，<br>而是一次<span class="highlight">管理升级</span>。<br><br>
|
||
让数据从"被动查看"变成<span class="highlight">"主动驱动"</span><br>
|
||
让管理从"事后救火"变成<span class="highlight">"事前预防"</span><br>
|
||
让组织能力从"依赖个人"变成<span class="highlight">"沉淀系统"</span>
|
||
</div>
|
||
<div class="final">让每一个团队、每一个员工，每天都在做正确的事</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<div class="nav">
|
||
<button onclick="prevSlide()">‹</button>
|
||
<span class="counter"><span id="current">1</span> / <span id="total">13</span></span>
|
||
<button onclick="nextSlide()">›</button>
|
||
</div>
|
||
|
||
<script>
|
||
const slides = document.querySelectorAll('.slide');
|
||
const total = slides.length;
|
||
let current = 0;
|
||
|
||
document.getElementById('total').textContent = total;
|
||
// total is dynamically calculated, no need to hardcode
|
||
|
||
function updateSlide() {
|
||
slides.forEach((s, i) => {
|
||
s.classList.remove('active', 'prev');
|
||
if (i === current) s.classList.add('active');
|
||
else if (i < current) s.classList.add('prev');
|
||
});
|
||
document.getElementById('current').textContent = current + 1;
|
||
document.getElementById('progress').style.width = ((current + 1) / total * 100) + '%';
|
||
}
|
||
|
||
function nextSlide() {
|
||
if (current < total - 1) { current++; updateSlide(); }
|
||
}
|
||
|
||
function prevSlide() {
|
||
if (current > 0) { current--; updateSlide(); }
|
||
}
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); nextSlide(); }
|
||
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); prevSlide(); }
|
||
else if (e.key === 'Home') { current = 0; updateSlide(); }
|
||
else if (e.key === 'End') { current = total - 1; updateSlide(); }
|
||
else if (e.key === 'f' || e.key === 'F') {
|
||
if (!document.fullscreenElement) document.documentElement.requestFullscreen();
|
||
else document.exitFullscreen();
|
||
}
|
||
});
|
||
|
||
// Touch support
|
||
let touchStartX = 0;
|
||
let touchStartY = 0;
|
||
document.addEventListener('touchstart', (e) => {
|
||
touchStartX = e.touches[0].clientX;
|
||
touchStartY = e.touches[0].clientY;
|
||
}, { passive: true });
|
||
document.addEventListener('touchend', (e) => {
|
||
const diffX = touchStartX - e.changedTouches[0].clientX;
|
||
const diffY = touchStartY - e.changedTouches[0].clientY;
|
||
if (Math.abs(diffX) > 40 && Math.abs(diffX) > Math.abs(diffY) * 1.5) {
|
||
if (diffX > 0) nextSlide(); else prevSlide();
|
||
}
|
||
}, { passive: true });
|
||
|
||
updateSlide();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|