| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <pattern id="dotP14" x="0" y="0" width="7" height="7" patternUnits="userSpaceOnUse"> |
| 4 | <circle cx="3.5" cy="3.5" r="0.7" fill="#1A1A1A" fill-opacity="0.1"/> |
| 5 | </pattern> |
| 6 | </defs> |
| 7 | |
| 8 | <rect id="bg" width="1280" height="720" fill="#F5EFE0"/> |
| 9 | <rect id="grain" width="1280" height="720" fill="url(#dotP14)"/> |
| 10 | |
| 11 | <g id="header"> |
| 12 | <rect x="60" y="56" width="14" height="68" fill="#1E4DBC"/> |
| 13 | <rect x="63" y="59" width="14" height="68" fill="#FF5C8A" opacity="0.7"/> |
| 14 | <rect x="60" y="56" width="14" height="68" fill="#1E4DBC"/> |
| 15 | <text x="92" y="98" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="48" fill="#1A1A1A" letter-spacing="-1">进店前的 4 条</text> |
| 16 | <text x="92" y="128" font-family="Consolas, 'Courier New', monospace" font-size="13" fill="#5A5A5A" letter-spacing="3">HOW TO BROWSE INDIE BOOKSTORES · UNWRITTEN ETIQUETTE</text> |
| 17 | </g> |
| 18 | |
| 19 | <line x1="60" y1="152" x2="1220" y2="152" stroke="#1A1A1A" stroke-width="3"/> |
| 20 | |
| 21 | <!-- Vertical track --> |
| 22 | <rect x="120" y="200" width="6" height="430" fill="#1E4DBC"/> |
| 23 | <rect x="123" y="203" width="6" height="430" fill="#FF5C8A" opacity="0.6"/> |
| 24 | <rect x="120" y="200" width="6" height="430" fill="#1E4DBC"/> |
| 25 | <polygon points="123,640 110,624 136,624" fill="#1E4DBC"/> |
| 26 | |
| 27 | <!-- Item 01 --> |
| 28 | <g id="item-01"> |
| 29 | <rect x="80" y="200" width="86" height="86" fill="#1E4DBC"/> |
| 30 | <rect x="83" y="203" width="86" height="86" fill="#FF5C8A" opacity="0.6"/> |
| 31 | <rect x="80" y="200" width="86" height="86" fill="#1E4DBC"/> |
| 32 | <text x="123" y="262" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="46" fill="#F5EFE0" text-anchor="middle">01</text> |
| 33 | <line x1="166" y1="243" x2="200" y2="243" stroke="#1E4DBC" stroke-width="2.5" stroke-dasharray="4,3"/> |
| 34 | <rect x="200" y="200" width="1020" height="86" fill="#F5EFE0"/> |
| 35 | <rect x="200" y="200" width="1020" height="86" fill="none" stroke="#1A1A1A" stroke-width="2"/> |
| 36 | <rect x="200" y="200" width="8" height="86" fill="#1E4DBC"/> |
| 37 | <use data-icon="chunk-filled/star" x="224" y="218" width="48" height="48" fill="#1E4DBC"/> |
| 38 | <text x="288" y="240" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">看选品 ＝ 看店主</text> |
| 39 | <text x="288" y="266" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="15" fill="#5A5A5A">独立书店的本质是"一个人 / 一群人的精神书架"· 选品就是店主在跟你对话</text> |
| 40 | </g> |
| 41 | |
| 42 | <!-- Item 02 --> |
| 43 | <g id="item-02"> |
| 44 | <rect x="80" y="312" width="86" height="86" fill="#FF5C8A"/> |
| 45 | <rect x="83" y="315" width="86" height="86" fill="#1E4DBC" opacity="0.6"/> |
| 46 | <rect x="80" y="312" width="86" height="86" fill="#FF5C8A"/> |
| 47 | <text x="123" y="374" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="46" fill="#F5EFE0" text-anchor="middle">02</text> |
| 48 | <line x1="166" y1="355" x2="200" y2="355" stroke="#FF5C8A" stroke-width="2.5" stroke-dasharray="4,3"/> |
| 49 | <rect x="200" y="312" width="1020" height="86" fill="#F5EFE0"/> |
| 50 | <rect x="200" y="312" width="1020" height="86" fill="none" stroke="#1A1A1A" stroke-width="2"/> |
| 51 | <rect x="200" y="312" width="8" height="86" fill="#FF5C8A"/> |
| 52 | <use data-icon="chunk-filled/clock" x="224" y="330" width="48" height="48" fill="#FF5C8A"/> |
| 53 | <text x="288" y="352" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">至少留 1 小时</text> |
| 54 | <text x="288" y="378" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="15" fill="#5A5A5A">独立书店不是便利店 · 浏览本身就是产品 · 在书架前发呆是一种合法消费</text> |
| 55 | </g> |
| 56 | |
| 57 | <!-- Item 03 --> |
| 58 | <g id="item-03"> |
| 59 | <rect x="80" y="424" width="86" height="86" fill="#E8A02E"/> |
| 60 | <rect x="83" y="427" width="86" height="86" fill="#1E4DBC" opacity="0.6"/> |
| 61 | <rect x="80" y="424" width="86" height="86" fill="#E8A02E"/> |
| 62 | <text x="123" y="486" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="46" fill="#F5EFE0" text-anchor="middle">03</text> |
| 63 | <line x1="166" y1="467" x2="200" y2="467" stroke="#E8A02E" stroke-width="2.5" stroke-dasharray="4,3"/> |
| 64 | <rect x="200" y="424" width="1020" height="86" fill="#F5EFE0"/> |
| 65 | <rect x="200" y="424" width="1020" height="86" fill="none" stroke="#1A1A1A" stroke-width="2"/> |
| 66 | <rect x="200" y="424" width="8" height="86" fill="#E8A02E"/> |
| 67 | <use data-icon="chunk-filled/shopping-bag" x="224" y="442" width="48" height="48" fill="#E8A02E"/> |
| 68 | <text x="288" y="464" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">带现金</text> |
| 69 | <text x="288" y="490" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="15" fill="#5A5A5A">一些小店不接受电子支付 · 现金还能减少手续费 · 给店主多留一杯咖啡的利润</text> |
| 70 | </g> |
| 71 | |
| 72 | <!-- Item 04 --> |
| 73 | <g id="item-04"> |
| 74 | <rect x="80" y="536" width="86" height="86" fill="#1A1A1A"/> |
| 75 | <rect x="83" y="539" width="86" height="86" fill="#FF5C8A" opacity="0.6"/> |
| 76 | <rect x="80" y="536" width="86" height="86" fill="#1A1A1A"/> |
| 77 | <text x="123" y="598" font-family="Impact, 'Arial Black', 'Microsoft YaHei', sans-serif" font-size="46" fill="#FF5C8A" text-anchor="middle">04</text> |
| 78 | <line x1="166" y1="579" x2="200" y2="579" stroke="#1A1A1A" stroke-width="2.5" stroke-dasharray="4,3"/> |
| 79 | <rect x="200" y="536" width="1020" height="86" fill="#F5EFE0"/> |
| 80 | <rect x="200" y="536" width="1020" height="86" fill="none" stroke="#1A1A1A" stroke-width="2"/> |
| 81 | <rect x="200" y="536" width="8" height="86" fill="#1A1A1A"/> |
| 82 | <use data-icon="chunk-filled/hand" x="224" y="554" width="48" height="48" fill="#1A1A1A"/> |
| 83 | <text x="288" y="576" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="22" font-weight="900" fill="#1A1A1A">拍照前先问</text> |
| 84 | <text x="288" y="602" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="15" fill="#5A5A5A">多数独立书店对拍照敏感 · 选品是店主智识 · 尊重 + 一句招呼 = 通行证</text> |
| 85 | </g> |
| 86 | |
| 87 | <!-- Bottom callout --> |
| 88 | <g id="callout"> |
| 89 | <rect x="60" y="654" width="1160" height="34" fill="#1E4DBC"/> |
| 90 | <rect x="63" y="657" width="1160" height="34" fill="#FF5C8A" opacity="0.6"/> |
| 91 | <rect x="60" y="654" width="1160" height="34" fill="#1E4DBC"/> |
| 92 | <text x="80" y="677" font-family="'Microsoft YaHei', 'PingFang SC', Arial, sans-serif" font-size="15" fill="#F5EFE0">额外提醒 ＞ 主流出版社的书随便哪里买都行 · 在独立书店买独立出版物 / 艺术家自费书 · 那才是核心目标</text> |
| 93 | </g> |
| 94 | |
| 95 | <g id="footer"> |
| 96 | <text x="60" y="710" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#5A5A5A" letter-spacing="2">P14 · 4 RULES BEFORE YOU ENTER</text> |
| 97 | <text x="1220" y="710" font-family="Consolas, 'Courier New', monospace" font-size="11" fill="#5A5A5A" text-anchor="end" letter-spacing="2">店主 / 时间 / 现金 / 招呼</text> |
| 98 | </g> |
| 99 | </svg> |
| 100 |