绔炲僵椋庡悜鏍囨ā鏉緽 - 鐑鎴樻姤椋?/title> <style> *{box-sizing:border-box} body{margin:0;background:#180909;color:#fff6f6;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif} .poster{width:900px;margin:0 auto;padding:34px;position:relative;overflow:hidden;background: radial-gradient(circle at 20% 10%, rgba(255,186,73,.14), transparent 22%), radial-gradient(circle at 80% 0%, rgba(255,68,68,.22), transparent 28%), linear-gradient(180deg,#321010 0%,#170909 60%,#100607 100%)} .poster:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.025) 50%, rgba(255,255,255,.025) 75%, transparent 75%, transparent);background-size:18px 18px;opacity:.45;pointer-events:none} .header,.tip-strip,.match-list,.footer,.hero,.bottom-grid{position:relative;z-index:2} .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:stretch;margin-bottom:18px} .hero-left{padding:26px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(0,0,0,.3)} .hero{grid-template-columns:1.05fr .55fr .6fr} .header-illustration{padding:10px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(0,0,0,.26)} .header-illustration svg{display:block;width:100%;height:100%} .brand-badge{display:inline-block;padding:7px 14px;background:rgba(255,190,85,.12);border:1px solid rgba(255,190,85,.28);color:#ffd58d;border-radius:999px;font-size:18px;letter-spacing:1px} .title{margin:16px 0 10px;font-size:62px;line-height:1;font-weight:1000;text-transform:uppercase;letter-spacing:2px} .subtitle{font-size:24px;line-height:1.65;color:#f0cccc} .hero-right{display:flex;flex-direction:column;gap:14px} .date-box,.focus-box{flex:1;padding:22px;border-radius:28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(0,0,0,.26)} .date-label{font-size:18px;color:#d6aaaa} .date-value{font-size:38px;font-weight:900;margin-top:10px} .focus-box h3{margin:0 0 12px;font-size:24px} .tip-strip{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 22px} .tip-chip{padding:10px 14px;border-radius:4px;background:linear-gradient(180deg,rgba(255,180,90,.12),rgba(255,80,80,.08));border:1px solid rgba(255,255,255,.08);font-size:18px;color:#ffe0c2} .match-list{display:flex;flex-direction:column;gap:20px} .match-card{border-radius:28px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 42px rgba(0,0,0,.34)} .match-top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px} .left-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .lottery-id{padding:8px 14px;border-radius:999px;background:linear-gradient(180deg,#ff5f5f,#e33434);font-weight:800;font-size:18px} .league,.time{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);font-size:17px;color:#f3d5d5} .trend-tag{padding:10px 16px;border-radius:999px;font-size:18px;font-weight:800} .trend-strong{background:rgba(39,207,139,.18);color:#9ef5c9;border:1px solid rgba(39,207,139,.28)} .trend-hot{background:rgba(255,205,96,.18);color:#ffe39e;border:1px solid rgba(255,205,96,.28)} .trend-cold{background:rgba(255,111,111,.18);color:#ffc1c1;border:1px solid rgba(255,111,111,.28)} .trend-calm{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)} .teams{display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;gap:14px;margin-bottom:18px} .team{font-size:38px;font-weight:1000;text-align:center} .vs{width:110px;height:110px;border-radius:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#3a1212,#230c0c);border:1px solid rgba(255,255,255,.1);font-size:26px;font-weight:900;color:#ffd58d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)} .prob-header{display:flex;justify-content:space-between;font-size:18px;color:#ebc8c8;margin-bottom:10px} .prob-bar{height:22px;border-radius:999px;overflow:hidden;display:flex;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)} .seg-win{background:linear-gradient(90deg,#18b981,#30e0a0)} .seg-draw{background:linear-gradient(90deg,#f0b03b,#ffd67c)} .seg-lose{background:linear-gradient(90deg,#ff5d5d,#ff8f8f)} .prob-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:18px} .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:#21cd90} .dot-draw{background:#f4bc55} .dot-lose{background:#ff7777} .comment{margin-top:14px;padding:16px 18px;border-left:4px solid rgba(255,214,124,.85);background:rgba(255,255,255,.04);border-radius:4px;font-size:21px;line-height:1.75;color:#ffe7e7} .bottom-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:24px} .risk-box,.qrcode-box{padding:22px;border-radius:28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 34px rgba(0,0,0,.28)} .risk-title,.qrcode-title{font-size:26px;font-weight:900;margin-bottom:14px} .risk-list{margin:0;padding-left:22px;line-height:1.9;font-size:19px;color:#f0d6d6} .qrcode-wrap{display:flex;align-items:center;gap:18px} .qrcode{width:190px;height:190px;background:#fff;border-radius:20px;padding:12px} .qrcode img{width:100%;height:100%;display:block;object-fit:contain} .qrcode-text{font-size:20px;line-height:1.8;color:#ffe5c4} .footer{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);color:#dcbaba;font-size:18px;flex-wrap:wrap} .shop-name{font-size:26px;font-weight:1000} .shop-extra{margin-top:6px} </style> </head> <body data-variant="b"> <div class="poster"> <div class="hero"> <div class="hero-left"> <div class="brand-badge"></div> <div class="title"></div> <div class="subtitle"></div> </div> <div class="header-illustration"> <svg viewBox="0 0 520 230" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <defs> <linearGradient id="flameB" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#ffd37a"/> <stop offset="60%" stop-color="#ff6b4a"/> <stop offset="100%" stop-color="#d7263d"/> </linearGradient> <filter id="glowB" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur stdDeviation="7" result="blur"/> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <g transform="translate(276 16)" filter="url(#glowB)"> <circle cx="112" cy="96" r="76" fill="rgba(255,255,255,0.03)" stroke="url(#flameB)" stroke-width="3"/> <polygon points="112,48 138,66 128,94 96,94 86,66" fill="url(#flameB)"/> <polygon points="72,102 94,96 106,120 90,144 64,138" fill="#fff3ef"/> <polygon points="152,102 130,96 118,120 134,144 160,138" fill="#fff3ef"/> <polygon points="98,146 126,146 136,172 112,190 88,172" fill="#fff3ef"/> </g> <g transform="translate(0 12)"> <path d="M12 178 C86 140, 146 106, 218 72" fill="none" stroke="#ffd37a" stroke-width="5" stroke-linecap="round"/> <path d="M26 196 C104 154, 170 132, 250 98" fill="none" stroke="#ff7e5a" stroke-width="3" stroke-dasharray="8 8" stroke-linecap="round"/> <circle cx="250" cy="98" r="8" fill="#ffd37a"/> <path d="M44 208 L182 208" stroke="rgba(255,255,255,0.16)" stroke-width="2"/> <path d="M74 208 Q108 158 142 122 Q162 100 184 88" fill="none" stroke="#ffb76e" stroke-width="3"/> <circle cx="74" cy="208" r="13" fill="rgba(255,255,255,0.06)" stroke="#ffb76e" stroke-width="2"/> </g> </svg> </div> <div class="hero-right"> <div class="date-box"> <div class="date-label">璧涗簨鏃ユ湡</div> <div class="date-value"></div> </div> <div class="focus-box"> <h3>浠婂ぉ杩欏紶鍥鹃€傚悎骞蹭粈涔?/h3> <div class="tip-strip"></div> </div> </div> </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>