<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商业信息图表</title>
<style>
:root {
--color-primary: #2C5282;
--color-secondary: #E53E3E;
--color-tertiary: #F6AD55;
--color-quaternary: #38B2AC;
--color-quinary: #2C7A7B;
--spacing-base: clamp(1rem, 2vw, 2rem);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
padding: var(--spacing-base);
font-family: system-ui, -apple-system, sans-serif;
display: grid;
place-items: center;
background-color: #fff4f4
}
.container {
width: min(100%, 1200px);
margin-inline: auto;
}
.title {
text-align: center;
margin-block-end: calc(var(--spacing-base) * 2);
}
.title h1 {
font-size: clamp(2rem, 5vw, 2.5rem);
line-height: 1.2;
margin-block-end: var(--spacing-base);
}
.title .highlight {
color: #4299E1;
}
.color-bar {
display: flex;
justify-content: center;
gap: 0.5rem;
}
.color-block {
width: 1.25rem;
height: 1.25rem;
border-radius: 0.25rem;
}
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-base);
position: relative;
}
.step {
background: white;
padding: var(--spacing-base);
border-radius: 0.75rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}
.step:hover {
transform: translateY(-4px);
}
.step-icon {
font-size: 1.5rem;
margin-block-end: 0.5rem;
}
.step-title {
color: #4A5568;
font-weight: 600;
margin-block-end: 0.5rem;
}
.step-content {
color: #718096;
line-height: 1.5;
font-size: 0.875rem;
}
.color-1 { background: var(--color-primary); }
.color-2 { background: var(--color-secondary); }
.color-3 { background: var(--color-tertiary); }
.color-4 { background: var(--color-quaternary); }
.color-5 { background: var(--color-quinary); }
@media (min-width: 768px) {
.steps-container {
grid-template-columns: repeat(5, 1fr);
}
}
</style>
</head>
<body>
<div class="container">
<div class="title">
<h1>BUSINESS<br><span class="highlight">INFO</span>GRAPHIC</h1>
<div class="color-bar">
<div class="color-block color-1"></div>
<div class="color-block color-2"></div>
<div class="color-block color-3"></div>
<div class="color-block color-4"></div>
<div class="color-block color-5"></div>
</div>
</div>
<div class="steps-container">
<div class="step">
<div class="step-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14 14l2.5 2.5m-.067 2.025a1.48 1.48 0 1 1 2.092-2.092l3.042 3.042a1.48 1.48 0 1 1-2.092 2.092zM16 9A7 7 0 1 0 2 9a7 7 0 0 0 14 0" color="currentColor"/></svg>
</div>
<div class="step-title">调研分析</div>
<div class="step-content">深入市场调研，分析用户需求和行业趋势。</div>
</div>
<div class="step">
<div class="step-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M4.222 21.995v-3.55c0-1.271-.333-1.932-.987-3.037A8.888 8.888 0 0 1 10.889 2a8.89 8.89 0 0 1 8.889 8.887c0 .58 0 .87.024 1.032c.058.388.24.722.417 1.068L22 16.441l-1.4.7c-.405.202-.608.303-.749.49s-.181.399-.26.82l-.008.042c-.183.968-.384 2.036-.95 2.71c-.2.237-.448.43-.727.567c-.461.225-1.028.225-2.162.225c-.525 0-1.051.012-1.576 0c-1.243-.031-2.168-1.077-2.168-2.29"/><path d="M14.388 10.532c-.426 0-.815-.162-1.11-.427m1.11.426c0 1.146-.664 2.235-1.942 2.235S10.504 13.854 10.504 15m3.884-4.469c2.15 0 2.15-3.35 0-3.35q-.294.001-.557.095c.105-2.498-3.496-3.176-4.312-.836m.985 1.857c0-.774-.39-1.456-.985-1.857m0 0c-1.852-1.25-4.32.993-3.146 2.993c-1.97.295-1.76 3.333.247 3.333a1.66 1.66 0 0 0 1.362-.712"/></g></svg>
</div>
<div class="step-title">战略规划</div>
<div class="step-content">制定详细的业务战略和实施计划。</div>
</div>
<div class="step">
<div class="step-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.867 3.78c.926-.748 1.964-.794 3.097-.778c.587.009.88.013 1.115.104c.373.145.67.442.815.815c.091.235.095.528.104 1.115c.016 1.133-.03 2.17-.778 3.097c-.63.78-1.714 1.188-2.235 2.05c-.398.656-.213 1.337-.042 2.038l1.28 5.245c.255 1.046.06 1.715-.67 2.446c-.389.39-.713.37-1.028-.133l-3.862-6.154l-1.845 1.466c-.669.532-1.003.798-1.179 1.172c-.411.876-.15 2.192-.137 3.142c.008.525-.446 1.56-1.088 1.594c-.396.022-.531-.452-.66-.743l-1.232-2.802c-.294-.67-.306-.682-.976-.976l-2.802-1.233c-.29-.128-.765-.263-.743-.659c.035-.642 1.07-1.096 1.594-1.088c.95.013 2.266.274 3.142-.137c.374-.176.64-.51 1.172-1.18l1.466-1.844l-6.154-3.862c-.503-.316-.522-.639-.133-1.028c.73-.73 1.4-.925 2.446-.67l5.245 1.28c.7.171 1.382.356 2.039-.042c.861-.52 1.269-1.604 2.049-2.235" color="currentColor"/></svg>
</div>
<div class="step-title">执行落地</div>
<div class="step-content">有序推进各项任务，确保计划实施。</div>
</div>
<div class="step">
<div class="step-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M15.5 12a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0"/><path d="M21.011 14.097c.522-.141.783-.212.886-.346c.103-.135.103-.351.103-.784v-1.934c0-.433 0-.65-.103-.784s-.364-.205-.886-.345c-1.95-.526-3.171-2.565-2.668-4.503c.139-.533.208-.8.142-.956s-.256-.264-.635-.479l-1.725-.98c-.372-.21-.558-.316-.725-.294s-.356.21-.733.587c-1.459 1.455-3.873 1.455-5.333 0c-.377-.376-.565-.564-.732-.587c-.167-.022-.353.083-.725.295l-1.725.979c-.38.215-.57.323-.635.48c-.066.155.003.422.141.955c.503 1.938-.718 3.977-2.669 4.503c-.522.14-.783.21-.886.345S2 10.6 2 11.033v1.934c0 .433 0 .65.103.784s.364.205.886.346c1.95.526 3.171 2.565 2.668 4.502c-.139.533-.208.8-.142.956s.256.264.635.48l1.725.978c.372.212.558.317.725.295s.356-.21.733-.587c1.46-1.457 3.876-1.457 5.336 0c.377.376.565.564.732.587c.167.022.353-.083.726-.295l1.724-.979c.38-.215.57-.323.635-.48s-.003-.422-.141-.955c-.504-1.937.716-3.976 2.666-4.502"/></g></svg>
</div>
<div class="step-title">优化调整</div>
<div class="step-content">持续监控效果，及时优化改进。</div>
</div>
<div class="step">
<div class="step-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M17 12a5 5 0 1 1-5-5"/><path d="M14 2.2q-.97-.198-2-.2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10q-.002-1.03-.2-2"/><path d="m12.03 11.962l4.553-4.553m3.157-3.064l-.553-1.988a.48.48 0 0 0-.761-.24c-1.436 1.173-3 2.754-1.723 5.247c2.574 1.2 4.044-.418 5.17-1.779a.486.486 0 0 0-.248-.775z"/></g></svg>
</div>
<div class="step-title">目标达成</div>
<div class="step-content">实现预期目标，建立持续发展。</div>
</div>
</div>
</div>
</body>
</html>
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>