绔炲僵椋庡悜鏍囨ā鏉緼 - 娣辫壊绉戞妧椋?/title> <style> *{box-sizing:border-box} body{margin:0;background:#0b1220;color:#eef4ff;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif} .poster{width:900px;margin:0 auto;padding:36px 34px 30px;position:relative;overflow:hidden; background:radial-gradient(circle at top right,rgba(45,108,223,.22),transparent 28%), radial-gradient(circle at top left,rgba(27,189,156,.16),transparent 24%),linear-gradient(180deg,#101a2d 0%,#0b1220 100%)} .poster:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;pointer-events:none} .header,.tip-strip,.section-title,.match-list,.bottom-grid,.footer{position:relative;z-index:2} .header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px} .brand-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);font-size:20px;color:#cdd8ee;margin-bottom:16px} .title{font-size:56px;line-height:1.1;font-weight:900;margin:0} .subtitle{margin-top:14px;font-size:24px;line-height:1.6;color:#aebbd3} .date-box{min-width:230px;padding:18px 20px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-align:right;box-shadow:0 12px 30px rgba(0,0,0,.22)} .header{grid-template-columns:1fr auto} .brand-left{flex:1;min-width:0} .header-illustration{width:280px;flex:0 0 280px;align-self:center;opacity:.95} .header-illustration svg{display:block;width:100%;height:auto} @media print{.header-illustration{opacity:1}} .date-label{font-size:18px;color:#93a5c3;margin-bottom:8px} .date-value{font-size:34px;font-weight:800;color:#fff} .tip-strip{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px} .tip-chip{padding:10px 16px;border-radius:999px;background:rgba(98,215,255,.10);color:#cdefff;border:1px solid rgba(98,215,255,.20);font-size:20px} .section-title{display:flex;align-items:center;gap:12px;margin:26px 0 16px} .section-title .dot{width:14px;height:14px;border-radius:50%;background:#62d7ff;box-shadow:0 0 12px rgba(98,215,255,.6)} .section-title h2{margin:0;font-size:30px;font-weight:800} .match-list{display:flex;flex-direction:column;gap:18px} .match-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:22px 22px 20px;box-shadow:0 14px 36px rgba(0,0,0,.22)} .match-top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px} .left-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .lottery-id{padding:6px 12px;border-radius:4px;background:#1f6feb;color:#fff;font-size:20px;font-weight:700} .league{padding:6px 12px;border-radius:4px;background:rgba(255,255,255,.08);color:#d9e3f4;font-size:18px} .time{color:#92a5c7;font-size:18px} .trend-tag{padding:8px 14px;border-radius:999px;font-size:18px;font-weight:700;white-space:nowrap} .trend-strong{background:rgba(27,189,156,.16);color:#7bf0cf;border:1px solid rgba(27,189,156,.28)} .trend-hot{background:rgba(255,176,32,.16);color:#ffd27c;border:1px solid rgba(255,176,32,.26)} .trend-cold{background:rgba(255,106,106,.16);color:#ffb0b0;border:1px solid rgba(255,106,106,.24)} .trend-calm{background:rgba(255,255,255,.08);color:#dce6f7;border:1px solid rgba(255,255,255,.16)} .teams{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:16px} .team{font-size:34px;font-weight:800;color:#fff;max-width:300px;text-align:center;line-height:1.25} .vs{width:82px;height:82px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#62d7ff;font-size:26px;font-weight:900;flex:0 0 auto} .prob-row{margin-bottom:12px} .prob-header{display:flex;justify-content:space-between;font-size:18px;color:#b7c4dc;margin-bottom:8px} .prob-bar{height:18px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06);display:flex} .seg-win{background:linear-gradient(90deg,#1dbd9c,#32d9b0)} .seg-draw{background:linear-gradient(90deg,#f3b340,#ffd06e)} .seg-lose{background:linear-gradient(90deg,#ff6a6a,#ff8a8a)} .prob-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:18px;color:#d7e2f1} .prob-legend span{display:inline-flex;align-items:center;gap:8px} .dot-win,.dot-draw,.dot-lose{width:12px;height:12px;border-radius:50%;display:inline-block} .dot-win{background:#25cda8} .dot-draw{background:#f6bf54} .dot-lose{background:#ff7878} .comment{margin-top:14px;padding:14px 16px;border-radius:4px;background:rgba(255,255,255,.045);color:#c9d5e7;font-size:20px;line-height:1.7} .bottom-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:20px;margin-top:26px} .risk-box,.qrcode-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:22px;box-shadow:0 14px 36px rgba(0,0,0,.18)} .risk-title,.qrcode-title{font-size:26px;font-weight:800;margin-bottom:14px} .risk-list{margin:0;padding-left:24px;color:#cad5e8;font-size:19px;line-height:1.9} .qrcode-wrap{display:flex;align-items:center;gap:18px} .qrcode{width:180px;height:180px;background:#fff;border-radius:4px;padding:10px;display:flex;align-items:center;justify-content:center} .qrcode img{width:100%;height:100%;object-fit:contain;display:block} .qrcode-text{flex:1;color:#dbe6f6;font-size:20px;line-height:1.8} .footer{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:18px;color:#97aac8} .shop-name{font-size:24px;font-weight:800;color:#fff} .shop-extra{color:#b4c3da} </style> </head> <body data-variant="a"> <div class="poster"> <div class="header"> <div class="brand-left"> <div class="brand-badge"></div> <h1 class="title"></h1> <div class="subtitle"></div> </div> <div class="header-illustration"> <svg viewBox="0 0 520 220" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <defs> <linearGradient id="ballGlowA" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#6fe7ff"/> <stop offset="100%" stop-color="#2d6cdf"/> </linearGradient> <linearGradient id="fieldLineA" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="rgba(111,231,255,0)"/> <stop offset="50%" stop-color="#6fe7ff"/> <stop offset="100%" stop-color="rgba(111,231,255,0)"/> </linearGradient> <filter id="softGlowA" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur stdDeviation="6" result="blur"/> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <g opacity="0.22"> <path d="M10 180 C120 120, 220 120, 320 160 S470 200, 510 165" fill="none" stroke="url(#fieldLineA)" stroke-width="3"/> <path d="M80 205 C190 145, 290 145, 390 185" fill="none" stroke="#4ad9c5" stroke-width="2"/> </g> <g transform="translate(310 24)" filter="url(#softGlowA)"> <circle cx="90" cy="86" r="72" fill="rgba(255,255,255,0.04)" stroke="url(#ballGlowA)" stroke-width="3"/> <polygon points="90,40 112,56 104,82 76,82 68,56" fill="url(#ballGlowA)" opacity="0.95"/> <polygon points="55,88 74,84 85,103 72,123 50,118" fill="rgba(255,255,255,0.88)"/> <polygon points="125,88 106,84 95,103 108,123 130,118" fill="rgba(255,255,255,0.88)"/> <polygon points="78,126 102,126 111,148 90,164 69,148" fill="rgba(255,255,255,0.88)"/> <path d="M90 40 L90 18" stroke="#6fe7ff" stroke-width="3" stroke-linecap="round"/> <path d="M34 86 L16 86" stroke="#6fe7ff" stroke-width="3" stroke-linecap="round"/> <path d="M146 86 L164 86" stroke="#6fe7ff" stroke-width="3" stroke-linecap="round"/> </g> <g transform="translate(22 14)" opacity="0.95"> <path d="M0 134 C40 106, 82 78, 126 60 C154 48, 182 52, 210 73" fill="none" stroke="#62d7ff" stroke-width="4" stroke-linecap="round"/> <circle cx="214" cy="75" r="7" fill="#62d7ff"/> <path d="M5 160 L120 160" stroke="rgba(255,255,255,0.16)" stroke-width="2" stroke-linecap="round"/> <path d="M38 160 Q82 116 110 72" fill="none" stroke="#4ad9c5" stroke-width="3" stroke-dasharray="7 7" stroke-linecap="round"/> <circle cx="38" cy="160" r="12" fill="rgba(255,255,255,0.08)" stroke="#4ad9c5" stroke-width="2"/> </g> </svg> </div> <div class="date-box"> <div class="date-label">鏇存柊鏃ユ湡</div> <div class="date-value"></div> <div class="date-label" style="margin-top:10px;">閫傚悎鏈嬪弸鍦?/ 搴楀唴灞曠ず</div> </div> </div> <div class="tip-strip"></div> <div class="section-title"><div class="dot"></div><h2>鐒︾偣璧涗簨</h2></div> <div class="match-list"></div> <div class="bottom-grid"> <div class="risk-box"> <div class="risk-title">浣跨敤鎻愮ず</div> <ul class="risk-list"> <li>鏈浘鐢ㄤ簬璧涗簨璁ㄨ涓庢暟鎹弬鑰冿紝涓嶆瀯鎴愪换浣曠粨鏋滄壙璇恒€?/li> <li>鐑棬鏂瑰悜涓嶇瓑浜庣ǔ鑳嗭紝姒傜巼浼樺娍涔熶笉绛変簬璧涙灉蹇呯劧鍙戠敓銆?/li> <li>鐪熸鏈変环鍊肩殑涓嶆槸鈥滅寽涓竴鍦衡€濓紝鑰屾槸闀挎湡鐞嗚В姣旇禌缁撴瀯銆?/li> </ul> </div> <div class="qrcode-box"> <div class="qrcode-title">鎵爜鏌ョ湅瀹屾暣鍒嗘瀽</div> <div class="qrcode-wrap"> <div class="qrcode"><img alt="浜岀淮鐮?></div> <div class="qrcode-text"></div> </div> </div> </div> <div class="footer"> <div><div class="shop-name"></div><div class="shop-extra"></div></div> <div class="footer-right"></div> </div> </div> <script>window.POSTER_DATA = {"brand": "绋崇嫍瓒崇悆", "shopName": "鏄熺伀浣撳僵搴?, "shopSlogan": "浠婃櫄鑱婄悆锛岀悊鎬х湅鐩?, "date": "2026-03-09", "title": "浠婃棩绔炲僵椋庡悜鏍?, "subtitle": "閲嶇偣瑙傚療璧涗簨 / 姒傜巼鍒嗗竷 / 椋庡悜鐐硅瘎", "qrcodeUrl": "https://api.qrserver.com/v1/create-qr-code/?size=240x240&data=https://jizhita.com", "qrcodeHint": "鎵爜鐪嬪畬鏁村垎鏋?/ 搴楀唴娲诲姩 / 灏忕▼搴?, "footerLeft": "鍦板潃锛歑X璺疿X鍙凤綔娆㈣繋鍒板簵浜ゆ祦姣旇禌", "footerRight": "鏁版嵁鏁寸悊锛氱ǔ鐙楄冻鐞冿綔浠呬緵濞变箰鍙傝€?, "tips": ["浠婃棩閲嶇偣瑙傚療 3 鍦?, "鍚儨骞宠礋姒傜巼鍒嗗竷", "鏀寔鏇挎崲搴楅摵浜岀淮鐮?, "閫傚悎鏈嬪弸鍦堥暱鍥?], "matches": [{"lotteryId": "鍛ㄤ竴001", "league": "鑻辫秴", "time": "03-09 23:30", "home": "鍒╃墿娴?, "away": "鐑埡", "win": 58, "draw": 24, "lose": 18, "trend": "涓婚槦鐣ュ己", "trendType": "strong", "comment": "妯″瀷鍊惧悜涓婚槦锛屼絾鐑害鍙兘鍚屾鎶崌锛岄€傚悎閲嶇偣瑙傚療涓村満鍙樺寲銆?}, {"lotteryId": "鍛ㄤ竴002", "league": "瑗跨敳", "time": "03-10 01:00", "home": "鐨囧绀句細", "away": "姣斿埄浜氶浄浜氬皵", "win": 41, "draw": 31, "lose": 28, "trend": "鍒嗘杈冨ぇ", "trendType": "hot", "comment": "姒傜巼鎺ヨ繎锛屽钩灞€绌洪棿涓嶅彲蹇借锛屽睘浜庤璁轰环鍊煎緢楂樼殑涓€鍦恒€?}, {"lotteryId": "鍛ㄤ竴003", "league": "鎰忕敳", "time": "03-10 03:45", "home": "AC绫冲叞", "away": "鎷夐綈濂?, "win": 49, "draw": 27, "lose": 24, "trend": "娉ㄦ剰鍐锋剰", "trendType": "cold", "comment": "琛ㄩ潰鍗犱紭锛屼絾娌℃湁褰㈡垚鐗瑰埆澶稿紶鐨勬鐜囧帇鍒讹紝瀹规槗鍒堕€犳儏缁尝鍔ㄣ€?}]};</script> <script> const POSTER_DATA = window.POSTER_DATA || __POSTER_DATA__; const TREND_CLASS = { strong: 'trend-strong', hot: 'trend-hot', cold: 'trend-cold', calm: 'trend-calm' }; function esc(s) { return String(s ?? '').replace(/[&<>"']/g, m => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m])); } function renderTips(tips = []) { return tips.map(t => `<div class="tip-chip">${esc(t)}</div>`).join(''); } function renderMatches(matches = [], variant = 'a') { return matches.map(m => ` <div class="match-card"> <div class="match-top"> <div class="left-meta"> <div class="lottery-id">${esc(m.lotteryId)}</div> <div class="league">${esc(m.league)}</div> <div class="time">${esc(m.time)}</div> </div> <div class="trend-tag ${TREND_CLASS[m.trendType] || 'trend-calm'}">椋庡悜锛?{esc(m.trend)}</div> </div> <div class="teams"> <div class="team">${esc(m.home)}</div> <div class="vs">${variant === 'b' ? '瀵瑰喅' : 'VS'}</div> <div class="team">${esc(m.away)}</div> </div> <div class="prob-row"> <div class="prob-header"> <span>鑳滃钩璐熸鐜囧垎甯?/span> <span>涓昏儨 ${m.win}% / 骞?${m.draw}% / 瀹㈣儨 ${m.lose}%</span> </div> <div class="prob-bar"> <div class="seg-win" style="width:${m.win}%;"></div> <div class="seg-draw" style="width:${m.draw}%;"></div> <div class="seg-lose" style="width:${m.lose}%;"></div> </div> <div class="prob-legend"> <span><i class="dot-win"></i>涓昏儨 ${m.win}%</span> <span><i class="dot-draw"></i>骞冲眬 ${m.draw}%</span> <span><i class="dot-lose"></i>瀹㈣儨 ${m.lose}%</span> </div> </div> <div class="comment">${esc(m.comment)}</div> </div> `).join(''); } function renderPoster() { const d = POSTER_DATA; document.querySelector('.brand-badge').textContent = `${d.brand} 路浣撳僵搴椾笓鐢ㄦ捣鎶; document.querySelector('.title').textContent = d.title; document.querySelector('.subtitle').innerHTML = esc(d.subtitle).replace(/\n/g, '<br>'); document.querySelector('.date-value').textContent = d.date; document.querySelector('.tip-strip').innerHTML = renderTips(d.tips || []); document.querySelector('.match-list').innerHTML = renderMatches(d.matches || [], document.body.dataset.variant || 'a'); document.querySelector('.shop-name').textContent = `${d.shopName} 路 ${d.title}`; document.querySelector('.shop-extra').textContent = d.footerLeft || ''; document.querySelector('.footer-right').textContent = d.footerRight || ''; document.querySelector('.qrcode img').src = d.qrcodeUrl; document.querySelector('.qrcode-text').textContent = d.qrcodeHint || ''; const risk = document.querySelector('.risk-list'); if (d.risks?.length) { risk.innerHTML = d.risks.map(x => `<li>${esc(x)}</li>`).join(''); } } document.addEventListener('DOMContentLoaded', renderPoster); </script> </body> </html>