| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <linearGradient id="blueprintBg" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 4 | <stop offset="0%" stop-color="#0A1628"/> |
| 5 | <stop offset="100%" stop-color="#0D1E36"/> |
| 6 | </linearGradient> |
| 7 | <linearGradient id="editAccent" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 8 | <stop offset="0%" stop-color="#4A7FC4"/> |
| 9 | <stop offset="100%" stop-color="#2A5A9A"/> |
| 10 | </linearGradient> |
| 11 | </defs> |
| 12 | |
| 13 | <!-- Background — blueprint dark blue --> |
| 14 | <rect width="1280" height="720" fill="url(#blueprintBg)"/> |
| 15 | |
| 16 | <!-- Subtle grid background --> |
| 17 | <line x1="0" y1="60" x2="1280" y2="60" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 18 | <line x1="0" y1="120" x2="1280" y2="120" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 19 | <line x1="0" y1="180" x2="1280" y2="180" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 20 | <line x1="0" y1="240" x2="1280" y2="240" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 21 | <line x1="0" y1="300" x2="1280" y2="300" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 22 | <line x1="0" y1="360" x2="1280" y2="360" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 23 | <line x1="0" y1="420" x2="1280" y2="420" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 24 | <line x1="0" y1="480" x2="1280" y2="480" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 25 | <line x1="0" y1="540" x2="1280" y2="540" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 26 | <line x1="0" y1="600" x2="1280" y2="600" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 27 | <line x1="0" y1="660" x2="1280" y2="660" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 28 | <line x1="60" y1="0" x2="60" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 29 | <line x1="120" y1="0" x2="120" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 30 | <line x1="240" y1="0" x2="240" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 31 | <line x1="380" y1="0" x2="380" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 32 | <line x1="440" y1="0" x2="440" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 33 | <line x1="640" y1="0" x2="640" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 34 | <line x1="840" y1="0" x2="840" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 35 | <line x1="900" y1="0" x2="900" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 36 | <line x1="1160" y1="0" x2="1160" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 37 | <line x1="1220" y1="0" x2="1220" y2="720" stroke="#4A7FC4" stroke-opacity="0.04" stroke-width="1"/> |
| 38 | |
| 39 | <!-- Top label bar --> |
| 40 | <rect x="0" y="0" width="1280" height="52" fill="#0D1E36"/> |
| 41 | <rect x="0" y="50" width="1280" height="2" fill="#4A7FC4" fill-opacity="0.4"/> |
| 42 | <text x="60" y="33" font-family="Consolas, monospace" font-size="13" fill="#4A7FC4">P08</text> |
| 43 | <text x="100" y="33" font-family="Consolas, monospace" font-size="13" fill="#6A9AC4">blueprint × editorial-classic</text> |
| 44 | <text x="640" y="33" text-anchor="middle" font-family="Consolas, monospace" font-size="15" fill="#E8E8F0" letter-spacing="4">九宫格图文混排</text> |
| 45 | <text x="1220" y="33" text-anchor="end" font-family="Consolas, monospace" font-size="13" fill="#4A7FC4">08</text> |
| 46 | |
| 47 | <!-- 3×3 grid — cells are 400×220 with 4px gaps --> |
| 48 | <!-- Cell sizes: 3 cols × 4px gap = (1280-8)/3 ≈ 424px wide; 3 rows with top bar 52px = (720-52-8)/3 ≈ 220px tall --> |
| 49 | <!-- Exact: col1 x=0 w=420, col2 x=424 w=420, col3 x=848 w=432 --> |
| 50 | <!-- row1 y=54 h=218, row2 y=276 h=218, row3 y=498 h=222 --> |
| 51 | |
| 52 | <!-- ===== TOP ROW ===== --> |
| 53 | <!-- Cell (1,1) — Blueprint label --> |
| 54 | <rect x="0" y="54" width="420" height="218" fill="#0A1628" stroke="#4A7FC4" stroke-opacity="0.25" stroke-width="1"/> |
| 55 | <text x="20" y="88" font-family="Consolas, monospace" font-size="11" fill="#4A7FC4" fill-opacity="0.6">[01] RENDERING</text> |
| 56 | <text x="20" y="118" font-family="Georgia, 'Microsoft YaHei', serif" font-size="24" font-weight="bold" fill="#B8D4F0">蓝图</text> |
| 57 | <text x="20" y="142" font-family="Georgia, 'Microsoft YaHei', serif" font-size="24" font-weight="bold" fill="#B8D4F0">技术风格</text> |
| 58 | <text x="20" y="170" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">精确线条，工程图感</text> |
| 59 | <text x="20" y="192" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">分析与系统设计场景</text> |
| 60 | <!-- Cross-hair corner marks --> |
| 61 | <line x1="0" y1="60" x2="12" y2="60" stroke="#4A7FC4" stroke-opacity="0.5" stroke-width="1"/> |
| 62 | <line x1="6" y1="54" x2="6" y2="66" stroke="#4A7FC4" stroke-opacity="0.5" stroke-width="1"/> |
| 63 | <line x1="408" y1="60" x2="420" y2="60" stroke="#4A7FC4" stroke-opacity="0.5" stroke-width="1"/> |
| 64 | <line x1="414" y1="54" x2="414" y2="66" stroke="#4A7FC4" stroke-opacity="0.5" stroke-width="1"/> |
| 65 | |
| 66 | <!-- Cell (1,2) — CENTER IMAGE --> |
| 67 | <rect x="424" y="54" width="420" height="218" fill="#0A1628" stroke="#4A7FC4" stroke-opacity="0.4" stroke-width="2"/> |
| 68 | <image href="../images/p08_grid_center.png" x="424" y="54" width="420" height="218" |
| 69 | preserveAspectRatio="xMidYMid slice"/> |
| 70 | <!-- Center label --> |
| 71 | <rect x="424" y="230" width="420" height="42" fill="#0A1628" fill-opacity="0.85"/> |
| 72 | <text x="634" y="256" text-anchor="middle" font-family="Consolas, monospace" font-size="11" fill="#4A7FC4" letter-spacing="2">CENTER · IMAGE</text> |
| 73 | |
| 74 | <!-- Cell (1,3) — Editorial label --> |
| 75 | <rect x="848" y="54" width="432" height="218" fill="#0A1628" stroke="#4A7FC4" stroke-opacity="0.25" stroke-width="1"/> |
| 76 | <text x="868" y="88" font-family="Consolas, monospace" font-size="11" fill="#4A7FC4" fill-opacity="0.6">[03] PALETTE</text> |
| 77 | <text x="868" y="118" font-family="Georgia, 'Microsoft YaHei', serif" font-size="24" font-weight="bold" fill="#B8D4F0">编辑</text> |
| 78 | <text x="868" y="142" font-family="Georgia, 'Microsoft YaHei', serif" font-size="24" font-weight="bold" fill="#B8D4F0">经典调色</text> |
| 79 | <text x="868" y="170" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">克制配色，杂志气质</text> |
| 80 | <text x="868" y="192" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">财经/新闻/分析类</text> |
| 81 | <!-- Accent dot --> |
| 82 | <circle cx="1248" cy="66" r="4" fill="#F5A623" fill-opacity="0.5"/> |
| 83 | |
| 84 | <!-- ===== MIDDLE ROW ===== --> |
| 85 | <!-- Cell (2,1) — Layout description --> |
| 86 | <rect x="0" y="276" width="420" height="218" fill="#0D1E36" stroke="#4A7FC4" stroke-opacity="0.25" stroke-width="1"/> |
| 87 | <text x="20" y="310" font-family="Consolas, monospace" font-size="11" fill="#4A7FC4" fill-opacity="0.6">[04] LAYOUT</text> |
| 88 | <text x="20" y="342" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#E8E8F0">3×3</text> |
| 89 | <text x="20" y="366" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#E8E8F0">九宫格网格</text> |
| 90 | <text x="20" y="400" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">中心格放图，</text> |
| 91 | <text x="20" y="420" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">周围8格排文字</text> |
| 92 | <text x="20" y="452" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">或色块信息。</text> |
| 93 | |
| 94 | <!-- Cell (2,2) — LEFT SIDE blue accent block --> |
| 95 | <rect x="424" y="276" width="420" height="218" fill="#132040" stroke="#7C6FF7" stroke-opacity="0.3" stroke-width="1"/> |
| 96 | <text x="634" y="355" text-anchor="middle" font-family="Georgia, 'Microsoft YaHei', serif" |
| 97 | font-size="20" fill="#B8D4F0">图文</text> |
| 98 | <text x="634" y="383" text-anchor="middle" font-family="Georgia, 'Microsoft YaHei', serif" |
| 99 | font-size="20" fill="#B8D4F0">并置对话</text> |
| 100 | <!-- Small diagram: grid hint --> |
| 101 | <rect x="514" y="410" width="30" height="30" fill="none" stroke="#4A7FC4" stroke-opacity="0.4" stroke-width="1"/> |
| 102 | <rect x="546" y="410" width="30" height="30" fill="#4A7FC4" fill-opacity="0.3" stroke="#4A7FC4" stroke-opacity="0.4" stroke-width="1"/> |
| 103 | <rect x="578" y="410" width="30" height="30" fill="none" stroke="#4A7FC4" stroke-opacity="0.4" stroke-width="1"/> |
| 104 | <rect x="514" y="442" width="30" height="30" fill="none" stroke="#4A7FC4" stroke-opacity="0.4" stroke-width="1"/> |
| 105 | <rect x="546" y="442" width="30" height="30" fill="#7C6FF7" fill-opacity="0.3" stroke="#7C6FF7" stroke-opacity="0.5" stroke-width="1"/> |
| 106 | <rect x="578" y="442" width="30" height="30" fill="none" stroke="#4A7FC4" stroke-opacity="0.4" stroke-width="1"/> |
| 107 | <text x="634" y="490" text-anchor="middle" font-family="Consolas, monospace" font-size="11" fill="#4A7FC4" fill-opacity="0.6">middle = image</text> |
| 108 | |
| 109 | <!-- Cell (2,3) — Annotation info --> |
| 110 | <rect x="848" y="276" width="432" height="218" fill="#0D1E36" stroke="#4A7FC4" stroke-opacity="0.25" stroke-width="1"/> |
| 111 | <text x="868" y="310" font-family="Consolas, monospace" font-size="11" fill="#4A7FC4" fill-opacity="0.6">[06] ANNOTATION</text> |
| 112 | <text x="868" y="342" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#E8E8F0">技术标注</text> |
| 113 | <text x="868" y="366" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#E8E8F0">风格语言</text> |
| 114 | <text x="868" y="400" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">等宽字体 Consolas</text> |
| 115 | <text x="868" y="420" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">辅助线 + 十字标记</text> |
| 116 | <text x="868" y="452" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">工程图纸美学。</text> |
| 117 | |
| 118 | <!-- ===== BOTTOM ROW ===== --> |
| 119 | <!-- Cell (3,1) --> |
| 120 | <rect x="0" y="498" width="420" height="222" fill="#0A1628" stroke="#4A7FC4" stroke-opacity="0.25" stroke-width="1"/> |
| 121 | <text x="20" y="534" font-family="Consolas, monospace" font-size="11" fill="#4A7FC4" fill-opacity="0.6">[07] USE CASE</text> |
| 122 | <text x="20" y="566" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#E8E8F0">适用场景</text> |
| 123 | <text x="20" y="600" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">· 系统架构展示</text> |
| 124 | <text x="20" y="622" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">· 工程技术报告</text> |
| 125 | <text x="20" y="644" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">· 设计规范文档</text> |
| 126 | <text x="20" y="666" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="15" fill="#6A9AC4">· 信息密集型页</text> |
| 127 | |
| 128 | <!-- Cell (3,2) — Color swatches --> |
| 129 | <rect x="424" y="498" width="420" height="222" fill="#0A1628" stroke="#4A7FC4" stroke-opacity="0.25" stroke-width="1"/> |
| 130 | <text x="444" y="534" font-family="Consolas, monospace" font-size="11" fill="#4A7FC4" fill-opacity="0.6">[08] COLOR SPEC</text> |
| 131 | <rect x="444" y="548" width="60" height="20" rx="2" fill="#0A4A8A"/> |
| 132 | <text x="514" y="563" font-family="Consolas, monospace" font-size="12" fill="#6A9AC4">#0A4A8A bg</text> |
| 133 | <rect x="444" y="578" width="60" height="20" rx="2" fill="#4A7FC4"/> |
| 134 | <text x="514" y="593" font-family="Consolas, monospace" font-size="12" fill="#6A9AC4">#4A7FC4 line</text> |
| 135 | <rect x="444" y="608" width="60" height="20" rx="2" fill="#B8D4F0"/> |
| 136 | <text x="514" y="623" font-family="Consolas, monospace" font-size="12" fill="#6A9AC4">#B8D4F0 text</text> |
| 137 | <rect x="444" y="638" width="60" height="20" rx="2" fill="#F5A623"/> |
| 138 | <text x="514" y="653" font-family="Consolas, monospace" font-size="12" fill="#6A9AC4">#F5A623 accent</text> |
| 139 | <rect x="444" y="668" width="60" height="20" rx="2" fill="#7C6FF7"/> |
| 140 | <text x="514" y="683" font-family="Consolas, monospace" font-size="12" fill="#6A9AC4">#7C6FF7 primary</text> |
| 141 | |
| 142 | <!-- Cell (3,3) --> |
| 143 | <rect x="848" y="498" width="432" height="222" fill="#0D1E36" stroke="#4A7FC4" stroke-opacity="0.25" stroke-width="1"/> |
| 144 | <text x="868" y="534" font-family="Consolas, monospace" font-size="11" fill="#4A7FC4" fill-opacity="0.6">[09] GRID SPEC</text> |
| 145 | <text x="868" y="566" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#E8E8F0">网格规格</text> |
| 146 | <text x="868" y="598" font-family="Consolas, monospace" font-size="13" fill="#6A9AC4">cols: 3 × 420px</text> |
| 147 | <text x="868" y="620" font-family="Consolas, monospace" font-size="13" fill="#6A9AC4">rows: 3 × 218px</text> |
| 148 | <text x="868" y="642" font-family="Consolas, monospace" font-size="13" fill="#6A9AC4">gap: 4px</text> |
| 149 | <text x="868" y="664" font-family="Consolas, monospace" font-size="13" fill="#6A9AC4">center: image</text> |
| 150 | <text x="868" y="686" font-family="Consolas, monospace" font-size="13" fill="#6A9AC4">8 cells: text</text> |
| 151 | <!-- Corner mark bottom-right --> |
| 152 | <line x1="1268" y1="712" x2="1280" y2="712" stroke="#4A7FC4" stroke-opacity="0.5" stroke-width="1"/> |
| 153 | <line x1="1274" y1="706" x2="1274" y2="720" stroke="#4A7FC4" stroke-opacity="0.5" stroke-width="1"/> |
| 154 | </svg> |
| 155 |