| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <linearGradient id="imgOverlay" x1="100%" y1="0%" x2="0%" y2="0%"> |
| 4 | <stop offset="0%" stop-color="#0F1117" stop-opacity="0"/> |
| 5 | <stop offset="70%" stop-color="#0F1117" stop-opacity="0.3"/> |
| 6 | <stop offset="100%" stop-color="#0F1117" stop-opacity="0.9"/> |
| 7 | </linearGradient> |
| 8 | <linearGradient id="accentBar" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 9 | <stop offset="0%" stop-color="#7C6FF7"/> |
| 10 | <stop offset="100%" stop-color="#4ECDC4"/> |
| 11 | </linearGradient> |
| 12 | <clipPath id="leftImgClip"> |
| 13 | <rect x="0" y="0" width="427" height="720"/> |
| 14 | </clipPath> |
| 15 | </defs> |
| 16 | |
| 17 | <!-- Background --> |
| 18 | <rect width="1280" height="720" fill="#0B0E18"/> |
| 19 | |
| 20 | <!-- Left image — corporate-photo, full height --> |
| 21 | <image href="../images/p03_left_img.png" x="0" y="0" width="427" height="720" |
| 22 | clip-path="url(#leftImgClip)" preserveAspectRatio="xMidYMid slice"/> |
| 23 | |
| 24 | <!-- Image fade-to-right overlay --> |
| 25 | <rect x="0" y="0" width="427" height="720" fill="url(#imgOverlay)"/> |
| 26 | |
| 27 | <!-- Vertical divider accent line --> |
| 28 | <line x1="427" y1="60" x2="427" y2="660" stroke="#7C6FF7" stroke-opacity="0.4" stroke-width="1"/> |
| 29 | |
| 30 | <!-- Right text area background subtle tint --> |
| 31 | <rect x="427" y="0" width="853" height="720" fill="#0F1117"/> |
| 32 | |
| 33 | <!-- Rendering label badge — top area --> |
| 34 | <rect x="460" y="48" width="200" height="28" rx="4" fill="#1A1D2E"/> |
| 35 | <text x="470" y="67" font-family="Arial, sans-serif" font-size="13" fill="#7C6FF7" letter-spacing="1">corporate-photo</text> |
| 36 | <text x="660" y="67" font-family="Arial, sans-serif" font-size="13" fill="#5A5A72"> × cool-corporate</text> |
| 37 | |
| 38 | <!-- Page number small --> |
| 39 | <text x="460" y="100" font-family="Consolas, monospace" font-size="13" fill="#5A5A72">P03</text> |
| 40 | |
| 41 | <!-- Layout type label --> |
| 42 | <text x="460" y="128" font-family="Georgia, 'Microsoft YaHei', serif" font-size="38" font-weight="bold" fill="#E8E8F0">左图右文</text> |
| 43 | <text x="460" y="158" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="17" fill="#9090A0">Left Image · Right Text</text> |
| 44 | |
| 45 | <!-- Accent bar --> |
| 46 | <rect x="460" y="172" width="120" height="3" rx="1.5" fill="url(#accentBar)"/> |
| 47 | |
| 48 | <!-- Body content --> |
| 49 | <text x="460" y="220" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="20" fill="#E8E8F0">图像占据左侧 1/3 画面，竖版构图，</text> |
| 50 | <text x="460" y="248" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="20" fill="#E8E8F0">文字主体在右侧大面积展开。</text> |
| 51 | <text x="460" y="296" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="20" fill="#9090A0">图文比例约 3 : 7，适合以内容叙述</text> |
| 52 | <text x="460" y="324" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="20" fill="#9090A0">为主、图像为辅助情境的页面。</text> |
| 53 | |
| 54 | <!-- Feature points --> |
| 55 | <rect x="460" y="370" width="4" height="4" rx="2" fill="#7C6FF7"/> |
| 56 | <text x="476" y="380" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#E8E8F0">编辑摄影风格，真实场景感</text> |
| 57 | |
| 58 | <rect x="460" y="410" width="4" height="4" rx="2" fill="#4ECDC4"/> |
| 59 | <text x="476" y="420" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#E8E8F0">冷色调专业配色，商务感强</text> |
| 60 | |
| 61 | <rect x="460" y="450" width="4" height="4" rx="2" fill="#F5A623"/> |
| 62 | <text x="476" y="460" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#E8E8F0">图像右边缘渐隐，融入背景</text> |
| 63 | |
| 64 | <!-- Rendering info block --> |
| 65 | <rect x="460" y="530" width="380" height="100" rx="8" fill="#1A1D2E" stroke="#2A2D3E" stroke-width="1"/> |
| 66 | <text x="480" y="560" font-family="Consolas, monospace" font-size="13" fill="#9090A0">Rendering</text> |
| 67 | <text x="600" y="560" font-family="Consolas, monospace" font-size="13" fill="#E8E8F0">corporate-photo</text> |
| 68 | <text x="480" y="583" font-family="Consolas, monospace" font-size="13" fill="#9090A0">Palette </text> |
| 69 | <text x="600" y="583" font-family="Consolas, monospace" font-size="13" fill="#E8E8F0">cool-corporate</text> |
| 70 | <text x="480" y="606" font-family="Consolas, monospace" font-size="13" fill="#9090A0">Layout </text> |
| 71 | <text x="600" y="606" font-family="Consolas, monospace" font-size="13" fill="#E8E8F0">left-1/3 image + right text</text> |
| 72 | |
| 73 | <!-- Icon --> |
| 74 | <use data-icon="tabler-outline/layout-columns" x="880" y="540" width="40" height="40" fill="#7C6FF7" fill-opacity="0.4" stroke-width="2"/> |
| 75 | </svg> |
| 76 |