47 lines
2.4 KiB
XML
47 lines
2.4 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630" style="background-color:#ffffff">
|
|
<defs>
|
|
<linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#e94560"/>
|
|
<stop offset="100%" stop-color="#059669"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- 白底 -->
|
|
<rect width="1200" height="630" fill="#ffffff"/>
|
|
|
|
<!-- 极简装饰：一条渐变线 -->
|
|
<rect x="0" y="80" width="1200" height="2" fill="url(#accent)" opacity="0.3"/>
|
|
|
|
<!-- 左侧垂直线 -->
|
|
<rect x="80" y="0" width="2" height="630" fill="#e94560" opacity="0.08"/>
|
|
|
|
<!-- 标题 -->
|
|
<text x="120" y="200" font-family="system-ui,-apple-system,sans-serif" font-size="48" font-weight="700" fill="#0f172a" letter-spacing="2">
|
|
尼克的小窝
|
|
</text>
|
|
<text x="120" y="260" font-family="system-ui,-apple-system,sans-serif" font-size="48" font-weight="700" fill="#0f172a" letter-spacing="2">
|
|
架构变迁
|
|
</text>
|
|
|
|
<!-- 副标题 -->
|
|
<text x="120" y="320" font-family="system-ui,-apple-system,sans-serif" font-size="18" fill="#94a3b8" letter-spacing="6">
|
|
从纯静态到前后端分离
|
|
</text>
|
|
|
|
<!-- 小标签 -->
|
|
<rect x="120" y="365" width="180" height="32" rx="16" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
|
|
<text x="210" y="386" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" fill="#64748b">Nuxt → React + Go</text>
|
|
|
|
<!-- 右侧极简装饰：两个小方块 -->
|
|
<rect x="980" y="180" width="140" height="140" rx="8" fill="#fef2f2" stroke="#fca5a5" stroke-width="1"/>
|
|
<text x="1050" y="238" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" font-weight="600" fill="#e94560">静态</text>
|
|
<text x="1050" y="260" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#94a3b8">Monolith</text>
|
|
|
|
<rect x="980" y="340" width="140" height="140" rx="8" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1"/>
|
|
<text x="1050" y="398" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" font-weight="600" fill="#059669">分离</text>
|
|
<text x="1050" y="420" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#94a3b8">Front-end + Back-end</text>
|
|
|
|
<!-- 两个方块之间的箭头 -->
|
|
<text x="1050" y="325" text-anchor="middle" font-family="system-ui,sans-serif" font-size="16" fill="#cbd5e1">↓</text>
|
|
</svg>
|