li
4a94fe36cf
- 拆分 HomeController → TransactionController, ReportWebController, FollowPlanController - 新增 Service 层: TransactionService, ReportService, FollowPlanService - pk10.php JS 抽离为 4 个独立文件 (sound/race/bet/poll) - 前台新增报表查询页面 (/report) + 跟单计划页面 (/follow-plan) - 后台新增跟单计划管理 + 用户输赢明细统计 - 封盘状态显示倒计时 (x:xx) - 音效仅在开奖弹窗打开时播放 - 路由按模块分组整理 - autoload 支持 App\Services 命名空间
808 lines
59 KiB
PHP
808 lines
59 KiB
PHP
<?php use App\Core\I18n; I18n::init(); $t = function($k,$p=[]){return I18n::t($k,$p);}; $gameId = $game['id'] ?? 0;
|
|
// 赔率直接在视图查询，确保不依赖控制器传值
|
|
$_oddsDb = new \Db\Database();
|
|
$_oddsRaw = $_oddsDb->select('game_odds','*',['game_id'=>$gameId]);
|
|
$oddsMap = [];
|
|
foreach(($_oddsRaw??[]) as $_o){ $oddsMap[$_o['type'].'_'.$_o['target']]=(float)$_o['odds']; }
|
|
unset($_oddsDb,$_oddsRaw,$_o);
|
|
?>
|
|
<!DOCTYPE html><html lang="<?=I18n::getLang()?>">
|
|
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
|
|
<title><?=$t('pk10_title')?></title>
|
|
<link rel="stylesheet" href="/Static/css/app.css">
|
|
<?php if(!empty($game['stream_url'])): ?><link rel="stylesheet" href="/Static/ckplayer/css/ckplayer.css"><?php endif; ?>
|
|
<style>
|
|
/* ===== F1赛车开奖场景 ===== */
|
|
/* 场景容器 */
|
|
.race-scene{background:#1a1a2e;border-radius:10px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.6);margin:6px 0}
|
|
/* 场景顶栏 — 深色渐变 */
|
|
.race-scene-hd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 10px;background:linear-gradient(180deg,#2a2a3e,#1a1a2e);border-bottom:1px solid rgba(255,255,255,.08)}
|
|
.rs-row1{display:flex;align-items:center;gap:6px;width:100%}
|
|
.rs-title{font-size:13px;font-weight:900;font-style:italic;color:#ff3333;text-shadow:0 0 12px rgba(255,50,50,.5),1px 1px 0 #800;letter-spacing:1px;white-space:nowrap;font-family:'Arial Black',sans-serif;flex-shrink:0}
|
|
.rs-period{font-size:12px;color:#ccc;font-family:monospace;white-space:nowrap;font-weight:700;flex:1;text-align:right}
|
|
.rs-sound{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:14px;line-height:1}
|
|
.rs-toggle{cursor:pointer;font-size:14px;opacity:0.7;transition:transform 0.3s;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
|
.race-scene.collapsed .rs-toggle{transform:rotate(180deg)}
|
|
.race-scene.collapsed .race-track,.race-scene.collapsed .race-skyline,.race-scene.collapsed .race-overlay,.race-scene.collapsed .podium-overlay{display:none}
|
|
.race-scene.collapsed{min-height:auto;height:auto}
|
|
.race-scene.collapsed .race-scene-hd{margin-bottom:0}
|
|
.rs-balls{display:flex;gap:3px;width:100%;justify-content:center;flex-wrap:nowrap}
|
|
.rs-ball{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);flex-shrink:0;border:1px solid rgba(255,255,255,.3);box-shadow:0 2px 4px rgba(0,0,0,.3)}
|
|
/* 天际线 — 蓝天+北京地标（参考图核心元素）*/
|
|
.race-skyline{height:72px;background:linear-gradient(180deg,#4a9ed8 0%,#6bb5e0 30%,#8cc8ea 60%,#b8dff0 85%,#d0e8d0 100%);position:relative;overflow:hidden}
|
|
.race-skyline svg{position:absolute;bottom:0;left:0;width:100%;height:100%}
|
|
/* 赛道地面 — 绿草+灰色赛道 */
|
|
.race-track-ground{height:8px;background:linear-gradient(180deg,#5a8a3a,#4a7a2a);position:relative}
|
|
.race-track-ground::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,#fff 0,#fff 6px,transparent 6px,transparent 12px);opacity:.5}
|
|
/* 赛道主体 */
|
|
.race-track{background:#1a1a2e;position:relative;overflow:hidden;min-height:260px}
|
|
/* 终点线 — 棋盘格（左侧） */
|
|
.finish-line{position:absolute;left:3%;top:0;bottom:0;width:14px;z-index:2;background:repeating-conic-gradient(#fff 0% 25%,#333 0% 50%) 0 0/7px 7px;opacity:.4}
|
|
.start-line{position:absolute;right:5%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.15);z-index:2}
|
|
/* 车道 */
|
|
.track-lane{height:38px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
|
|
.track-lane:nth-child(even){background:rgba(255,255,255,.02)}
|
|
.track-lane .progress-bar{position:absolute;right:0;top:0;height:100%;opacity:.08;width:5%;border-radius:4px 0 0 4px;transition:width .3s ease}
|
|
.lane-label{position:absolute;right:6px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.12);font-size:9px;z-index:0;font-weight:700}
|
|
/* 赛道叠加层（倒计时+红绿灯）— 参考图：中央显示，不完全遮住车 */
|
|
.race-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;pointer-events:none;gap:14px;background:rgba(10,10,30,.6);opacity:0;transition:opacity .4s}
|
|
.race-overlay.show{opacity:1}
|
|
/* 数字倒计时 — 复古LCD数码管风格（参考图核心） */
|
|
@font-face{font-family:'LCD';src:local('Courier New')}
|
|
.race-timer-display{font-family:'Courier New','LCD',monospace;font-size:52px;font-weight:900;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.5),0 0 60px rgba(255,255,255,.15);letter-spacing:6px;background:rgba(0,0,0,.6);padding:8px 24px;border-radius:8px;border:2px solid rgba(255,255,255,.1)}
|
|
.race-timer-display .ms{font-size:28px;opacity:.5;margin-left:2px;vertical-align:baseline}
|
|
/* 红绿灯 — 5灯椭圆形（参考图风格） */
|
|
.traffic-lights{display:flex;gap:8px;padding:10px 24px;background:linear-gradient(180deg,#333,#111);border-radius:30px;border:2px solid #555;box-shadow:0 4px 16px rgba(0,0,0,.8)}
|
|
.tl{width:36px;height:28px;border-radius:14px;background:radial-gradient(ellipse at 45% 40%,#333,#1a1a1a);border:2px solid #555;box-shadow:inset 0 1px 3px rgba(255,255,255,.1);transition:all .15s}
|
|
.tl.red{background:radial-gradient(ellipse at 40% 35%,#ff5555,#cc0000);box-shadow:0 0 16px rgba(255,0,0,.8),0 0 32px rgba(255,0,0,.3),inset 0 -2px 4px rgba(0,0,0,.3);border-color:#ff3333}
|
|
.tl.yellow{background:radial-gradient(ellipse at 40% 35%,#ffdd44,#ccaa00);box-shadow:0 0 16px rgba(255,200,0,.8),0 0 32px rgba(255,200,0,.3),inset 0 -2px 4px rgba(0,0,0,.3);border-color:#ffcc33}
|
|
.tl.green{background:radial-gradient(ellipse at 40% 35%,#44ff66,#00cc33);box-shadow:0 0 16px rgba(0,255,0,.8),0 0 32px rgba(0,255,0,.3),inset 0 -2px 4px rgba(0,0,0,.3);border-color:#33ff55}
|
|
/* 赛车容器 */
|
|
.car-container{position:absolute;right:3%;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;transition:right 0.3s ease}
|
|
/* 赛车图片 */
|
|
.car-svg{width:60px;height:auto;flex-shrink:0;filter:drop-shadow(2px 2px 3px rgba(0,0,0,.6));object-fit:contain;pointer-events:none}
|
|
/* 排气火焰（车尾=右侧） */
|
|
.car-flame{position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:14px;height:10px;opacity:0;pointer-events:none}
|
|
.car-flame i{position:absolute;display:block;border-radius:50% 20% 50% 50%;transform-origin:left center}
|
|
.car-flame i:nth-child(1){width:10px;height:6px;background:#ff5500;right:0;top:2px;animation:flame1 .12s infinite alternate}
|
|
.car-flame i:nth-child(2){width:7px;height:4px;background:#ff8800;right:3px;top:3px;animation:flame2 .1s infinite alternate}
|
|
.car-flame i:nth-child(3){width:4px;height:3px;background:#ffcc00;right:5px;top:3.5px;animation:flame3 .08s infinite alternate}
|
|
@keyframes flame1{0%{opacity:.7;transform:scaleX(1) scaleY(1)}100%{opacity:1;transform:scaleX(1.4) scaleY(.6)}}
|
|
@keyframes flame2{0%{opacity:.6;transform:scaleX(1)}100%{opacity:.9;transform:scaleX(1.3) translateX(1px)}}
|
|
@keyframes flame3{0%{opacity:.5;transform:scaleX(1)}100%{opacity:1;transform:scaleX(1.5)}}
|
|
.car-container.moving .car-flame{opacity:.6}
|
|
.car-container.sprinting .car-flame{opacity:1;width:22px;right:-10px}
|
|
/* 风尘粒子（车尾=右侧） */
|
|
.car-wind{position:absolute;right:-16px;top:50%;transform:translateY(-50%);width:16px;height:20px;overflow:hidden;opacity:0;pointer-events:none}
|
|
.car-wind i{position:absolute;display:block;height:1px;border-radius:1px;background:rgba(255,255,255,.25)}
|
|
.car-wind i:nth-child(1){width:6px;top:3px;right:2px;animation:windP .5s infinite linear}
|
|
.car-wind i:nth-child(2){width:4px;top:8px;right:5px;animation:windP .4s .1s infinite linear}
|
|
.car-wind i:nth-child(3){width:5px;top:13px;right:1px;animation:windP .45s .2s infinite linear}
|
|
.car-wind i:nth-child(4){width:3px;top:17px;right:6px;animation:windP .35s .05s infinite linear}
|
|
@keyframes windP{0%{opacity:.6;transform:translateX(0)}100%{opacity:0;transform:translateX(14px)}}
|
|
.car-container.moving .car-wind{opacity:.5}
|
|
.car-container.sprinting .car-wind{opacity:.9;width:28px;right:-24px}
|
|
/* 冲刺速度线（车尾=右侧） */
|
|
.car-container.sprinting::before{content:'';position:absolute;right:-30px;top:50%;width:24px;height:1px;background:linear-gradient(270deg,transparent,rgba(255,255,255,.15));transform:translateY(-50%);animation:spdLine .3s infinite}
|
|
.car-container.sprinting::after{content:'';position:absolute;right:-22px;top:calc(50% + 5px);width:16px;height:1px;background:linear-gradient(270deg,transparent,rgba(255,255,255,.08));transform:translateY(-50%);animation:spdLine .35s .1s infinite}
|
|
@keyframes spdLine{0%{opacity:0;transform:translateY(-50%) scaleX(.5)}50%{opacity:1}100%{opacity:0;transform:translateY(-50%) scaleX(1) translateX(8px)}}
|
|
/* 排烟（车尾=右侧） */
|
|
.exhaust{position:absolute;right:-6px;top:50%;transform:translateY(-50%);font-size:6px;opacity:0;pointer-events:none;color:rgba(255,255,255,.3)}
|
|
.car-container.moving .exhaust{animation:exhaustSmoke .8s infinite}
|
|
.car-container.sprinting .exhaust{animation:exhaustSmoke .35s infinite;font-size:8px}
|
|
@keyframes exhaustSmoke{0%{opacity:.5;transform:translateY(-50%) translateX(0) scale(1)}100%{opacity:0;transform:translateY(-50%) translateX(18px) scale(2)}}
|
|
/* ===== 升级特效1：轮下火花粒子（车尾=右侧） ===== */
|
|
.car-sparks{position:absolute;right:4px;bottom:-2px;width:20px;height:16px;opacity:0;pointer-events:none;overflow:visible}
|
|
.car-sparks i{position:absolute;display:block;width:3px;height:3px;border-radius:50%;background:#ffaa00;bottom:0;right:50%}
|
|
.car-sparks i:nth-child(1){animation:spark1 .4s infinite linear;background:#ff6600}
|
|
.car-sparks i:nth-child(2){animation:spark2 .35s .05s infinite linear;background:#ffcc00}
|
|
.car-sparks i:nth-child(3){animation:spark3 .45s .1s infinite linear;background:#ff8800}
|
|
.car-sparks i:nth-child(4){animation:spark4 .38s .15s infinite linear;background:#ffdd44}
|
|
.car-sparks i:nth-child(5){animation:spark5 .42s .08s infinite linear;background:#ff5500}
|
|
.car-sparks i:nth-child(6){animation:spark6 .36s .12s infinite linear;background:#ffaa00}
|
|
@keyframes spark1{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(18px,-12px) scale(.3)}}
|
|
@keyframes spark2{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(14px,10px) scale(.2)}}
|
|
@keyframes spark3{0%{opacity:.9;transform:translate(0,0) scale(.8)}100%{opacity:0;transform:translate(22px,-6px) scale(.2)}}
|
|
@keyframes spark4{0%{opacity:1;transform:translate(0,0) scale(.7)}100%{opacity:0;transform:translate(16px,8px) scale(.1)}}
|
|
@keyframes spark5{0%{opacity:.8;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(20px,-14px) scale(.2)}}
|
|
@keyframes spark6{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(12px,12px) scale(.1)}}
|
|
.car-container.sprinting .car-sparks{opacity:1}
|
|
.car-container.moving .car-sparks{opacity:.3}
|
|
/* ===== 升级特效2：赛道震动 ===== */
|
|
@keyframes trackShake{0%,100%{transform:translateX(0) translateY(0)}10%{transform:translateX(.5px) translateY(-.3px)}30%{transform:translateX(-.4px) translateY(.5px)}50%{transform:translateX(.3px) translateY(.2px)}70%{transform:translateX(-.5px) translateY(-.4px)}90%{transform:translateX(.4px) translateY(.3px)}}
|
|
.race-track.shaking{animation:trackShake .15s infinite linear}
|
|
/* ===== 升级特效3：车身光晕 ===== */
|
|
.car-container.sprinting .car-svg{filter:drop-shadow(2px 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 8px var(--car-glow,rgba(255,150,0,.6)))}
|
|
.car-container.sprinting{z-index:11}
|
|
/* ===== 升级特效7：刹车烟雾（车尾=右侧） ===== */
|
|
.car-brake-smoke{position:absolute;right:-2px;bottom:-4px;width:30px;height:20px;opacity:0;pointer-events:none;overflow:visible}
|
|
.car-brake-smoke i{position:absolute;display:block;border-radius:50%;background:rgba(200,200,200,.4);bottom:2px;right:8px}
|
|
.car-brake-smoke i:nth-child(1){width:8px;height:8px;animation:brakeSmoke1 .6s ease-out forwards}
|
|
.car-brake-smoke i:nth-child(2){width:6px;height:6px;animation:brakeSmoke2 .5s .05s ease-out forwards}
|
|
.car-brake-smoke i:nth-child(3){width:10px;height:8px;animation:brakeSmoke3 .7s .1s ease-out forwards}
|
|
@keyframes brakeSmoke1{0%{opacity:.6;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(20px,-8px) scale(2.5)}}
|
|
@keyframes brakeSmoke2{0%{opacity:.5;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(12px,6px) scale(2)}}
|
|
@keyframes brakeSmoke3{0%{opacity:.4;transform:translate(0,0) scale(.3)}100%{opacity:0;transform:translate(24px,-4px) scale(3)}}
|
|
.car-container.braking .car-brake-smoke{opacity:1}
|
|
.car-container.braking .car-flame{opacity:0!important}
|
|
.car-container.braking .car-sparks{opacity:0!important}
|
|
/* ===== 升级特效4：冲线爆炸（终点=左侧） ===== */
|
|
.finish-burst{position:absolute;left:3%;top:0;bottom:0;width:60px;z-index:30;pointer-events:none;opacity:0}
|
|
.finish-burst.active{opacity:1}
|
|
.finish-burst::before{content:'';position:absolute;top:50%;left:50%;width:10px;height:10px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);animation:finishFlash .6s ease-out forwards}
|
|
@keyframes finishFlash{0%{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 20px #fff,0 0 60px #ffd700}50%{opacity:.8;transform:translate(-50%,-50%) scale(8);box-shadow:0 0 40px #fff,0 0 80px #ffd700}100%{opacity:0;transform:translate(-50%,-50%) scale(12)}}
|
|
.finish-burst .fp{position:absolute;width:4px;height:4px;border-radius:50%;top:50%;left:50%}
|
|
.finish-burst.active .fp{animation:finishParticle .8s ease-out forwards}
|
|
.fp:nth-child(1){background:#ff3333;animation-delay:0s}
|
|
.fp:nth-child(2){background:#3399ff;animation-delay:.02s}
|
|
.fp:nth-child(3){background:#ffcc00;animation-delay:.04s}
|
|
.fp:nth-child(4){background:#33ff66;animation-delay:.06s}
|
|
.fp:nth-child(5){background:#ff66cc;animation-delay:.08s}
|
|
.fp:nth-child(6){background:#ff8800;animation-delay:.03s}
|
|
.fp:nth-child(7){background:#66ffff;animation-delay:.05s}
|
|
.fp:nth-child(8){background:#ffff33;animation-delay:.07s}
|
|
@keyframes finishParticle{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--fpx,20px),var(--fpy,-30px)) scale(.3)}}
|
|
/* ===== 升级特效5：领奖台彩带雨 ===== */
|
|
.confetti-container{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:3}
|
|
.confetti{position:absolute;width:6px;height:10px;top:-20px;opacity:.9}
|
|
.podium-overlay.show .confetti{animation:confettiFall var(--cf-dur,3s) var(--cf-delay,0s) linear forwards}
|
|
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotateZ(0deg) rotateX(0deg)}25%{transform:translateY(60px) rotateZ(90deg) rotateX(180deg) translateX(15px)}50%{transform:translateY(140px) rotateZ(200deg) rotateX(360deg) translateX(-10px)}75%{opacity:.7;transform:translateY(220px) rotateZ(300deg) rotateX(540deg) translateX(20px)}100%{opacity:0;transform:translateY(320px) rotateZ(400deg) rotateX(720deg) translateX(5px)}}
|
|
/* 排名徽章（车头=左侧，徽章显示在左边） */
|
|
.rank-badge{position:absolute;left:-32px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:900;color:#ffd700;opacity:0;transition:opacity .3s,transform .3s;text-shadow:0 0 8px rgba(255,215,0,.8),0 0 16px rgba(255,215,0,.4);letter-spacing:1px}
|
|
.car-container.show-rank .rank-badge{opacity:1;animation:rankPop .4s ease-out}
|
|
@keyframes rankPop{0%{transform:translateY(-50%) scale(0);opacity:0}60%{transform:translateY(-50%) scale(1.3)}100%{transform:translateY(-50%) scale(1);opacity:1}}
|
|
/* 就绪抖动 — 升级：更有力的引擎感 */
|
|
@keyframes readyShake{0%,100%{transform:translateY(-50%) translateX(0)}15%{transform:translateY(-50%) translateX(1.5px) translateY(calc(-50% + .5px))}35%{transform:translateY(-50%) translateX(-1px) translateY(calc(-50% - .3px))}55%{transform:translateY(-50%) translateX(2px)}75%{transform:translateY(-50%) translateX(-1.5px) translateY(calc(-50% + .3px))}90%{transform:translateY(-50%) translateX(.5px)}}
|
|
.car-container.ready{animation:readyShake .2s infinite}
|
|
/* ===== 结算领奖台 ===== */
|
|
.podium-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:25;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,#0a2a4a 0%,#061428 50%,#020a14 100%);opacity:0;pointer-events:none;transition:opacity .6s}
|
|
.podium-overlay.show{opacity:1;pointer-events:auto}
|
|
/* 星光粒子 */
|
|
.podium-stars{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
|
|
.podium-stars::before,.podium-stars::after{content:'';position:absolute;width:2px;height:2px;border-radius:50%;box-shadow:25px 20px #fff,80px 60px #fff,140px 30px #fff,200px 80px #fff,260px 15px #fff,320px 55px #fff,60px 110px #fff,170px 130px #fff,110px 75px rgba(255,255,255,.5),230px 100px rgba(255,255,255,.5),290px 40px rgba(255,255,255,.3),50px 45px rgba(255,255,255,.3),350px 90px #fff,15px 85px rgba(255,255,255,.4);animation:starsTwinkle 3s infinite alternate}
|
|
.podium-stars::after{animation-delay:1.5s;box-shadow:35px 90px #fff,95px 25px #fff,155px 110px #fff,215px 45px #fff,275px 85px #fff,335px 20px #fff,75px 70px rgba(255,255,255,.5),185px 35px rgba(255,255,255,.5)}
|
|
@keyframes starsTwinkle{0%{opacity:.3}50%{opacity:.8}100%{opacity:.4}}
|
|
/* 光柱 */
|
|
.podium-overlay.show .podium-stage::before{content:'';position:absolute;top:-80px;left:50%;width:120px;height:200px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(100,200,255,.15),transparent);clip-path:polygon(30% 0%,70% 0%,100% 100%,0% 100%);pointer-events:none;animation:lightPillar 2s ease-in-out infinite alternate}
|
|
@keyframes lightPillar{0%{opacity:.3}100%{opacity:.6}}
|
|
/* 领奖台布局 */
|
|
.podium-stage{display:flex;align-items:flex-end;justify-content:center;gap:6px;position:relative;z-index:2}
|
|
.podium-car{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(30px) scale(.8)}
|
|
.podium-overlay.show .podium-1st{animation:podiumIn .6s .3s forwards}
|
|
.podium-overlay.show .podium-2nd{animation:podiumIn .6s .5s forwards}
|
|
.podium-overlay.show .podium-3rd{animation:podiumIn .6s .7s forwards}
|
|
@keyframes podiumIn{to{opacity:1;transform:translateY(0) scale(1)}}
|
|
.podium-rank{font-weight:900;font-size:20px;color:#c0c0c0;text-shadow:0 2px 8px rgba(0,0,0,.5);margin-bottom:2px;font-style:italic}
|
|
.podium-rank.gold{font-size:28px;color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.5),0 2px 4px rgba(0,0,0,.5)}
|
|
.podium-car-svg{width:80px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));object-fit:contain}
|
|
.podium-1st .podium-car-svg{width:110px;height:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
|
|
/* 赛道地面动态纹理 */
|
|
.race-track::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 40px,rgba(255,255,255,.02) 40px,rgba(255,255,255,.02) 42px);animation:roadScroll 1.5s linear infinite;z-index:0;pointer-events:none}
|
|
@keyframes roadScroll{from{background-position-x:0}to{background-position-x:84px}}
|
|
/* 车道分割虚线 */
|
|
.track-lane::before{content:'';position:absolute;bottom:-1px;left:5%;right:10%;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 12px,transparent 12px,transparent 24px);animation:dashScroll 2s linear infinite;pointer-events:none}
|
|
@keyframes dashScroll{from{background-position-x:0}to{background-position-x:48px}}
|
|
/* 底部信息栏 */
|
|
.race-scene-ft{display:flex;align-items:center;padding:6px 12px;background:linear-gradient(180deg,#1a1a2e,#0f0f1e);border-top:1px solid rgba(255,255,255,.06);gap:12px;font-size:11px;color:#aaa;flex-wrap:wrap}
|
|
.race-ft-period{font-family:monospace;font-weight:700;color:#fff}
|
|
.race-ft-tag{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:3px;font-weight:600;font-size:10px}
|
|
.race-ft-tag.sum-tag{background:rgba(30,144,255,.15);color:#6ab5ff}
|
|
.race-ft-tag.dt-tag{color:#ffaa33}
|
|
/* 快捷投注面板 */
|
|
.quick-section{background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
|
|
.quick-title{font-size:12px;color:var(--text3);font-weight:600;margin-bottom:8px}
|
|
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
|
|
.quick-btn{padding:14px 8px;border-radius:10px;text-align:center;font-size:14px;font-weight:700;color:#fff;cursor:pointer;transition:all .15s;user-select:none}
|
|
.quick-btn:active{transform:scale(.96);opacity:.85}
|
|
.qb-red{background:linear-gradient(135deg,#e74c3c,#c0392b)}
|
|
.qb-blue{background:linear-gradient(135deg,#3498db,#2980b9)}
|
|
.qb-orange{background:linear-gradient(135deg,#f39c12,#d68910)}
|
|
.qb-purple{background:linear-gradient(135deg,#9b59b6,#7d3c98)}
|
|
.quick-hint{text-align:center;font-size:11px;color:#bbb;margin-top:4px}
|
|
/* 遗漏统计面板 */
|
|
.miss-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
|
|
.miss-tab{padding:4px 10px;border-radius:16px;font-size:12px;color:#666;background:#f0f0f0;cursor:pointer;font-weight:600;transition:all .15s}
|
|
.miss-tab.active{background:var(--primary);color:#fff}
|
|
.miss-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
|
|
.miss-cell{background:#fff;border-radius:8px;padding:8px 4px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05)}
|
|
.miss-num{font-size:11px;font-weight:700;margin-bottom:4px}
|
|
.miss-val{font-size:16px;font-weight:700;color:var(--primary)}
|
|
.miss-val.hot{color:var(--danger)}
|
|
.miss-val.cold{color:var(--text3)}
|
|
.miss-section{background:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
|
|
.miss-label{font-size:12px;color:var(--text3);font-weight:600;margin-bottom:6px}
|
|
.miss-two-side{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
|
|
.miss-ts-item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#f9f9f9;border-radius:6px}
|
|
.miss-ts-name{font-size:12px;color:#666}
|
|
.miss-ts-val{font-size:14px;font-weight:700;color:var(--primary)}
|
|
/* 长龙统计面板 */
|
|
.dragon-empty{padding:30px 0;text-align:center;color:#999;font-size:13px}
|
|
.dragon-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;border-radius:10px;margin-bottom:6px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
|
|
.dragon-rank{font-size:12px;color:var(--primary);font-weight:600;min-width:48px;flex-shrink:0}
|
|
.dragon-type{display:inline-block;padding:2px 8px;border-radius:4px;color:#fff;font-size:11px;font-weight:600;min-width:32px;text-align:center}
|
|
.dragon-bar-wrap{flex:1;height:16px;background:#f0f0f0;border-radius:8px;overflow:hidden;position:relative}
|
|
.dragon-bar{height:100%;border-radius:8px;transition:width .4s ease;min-width:16px}
|
|
.dragon-count{font-size:13px;font-weight:700;color:var(--text);min-width:28px;text-align:right}
|
|
.dragon-fire{font-size:11px;margin-left:-2px}
|
|
/* 开奖视频入口按钮 */
|
|
.race-entry{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:6px 0;background:#fff;border-radius:10px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08);border:1px solid #eee;transition:box-shadow .2s}
|
|
.race-entry:active{box-shadow:0 1px 2px rgba(0,0,0,.05)}
|
|
.race-entry-thumb{width:80px;height:48px;border-radius:6px;background:linear-gradient(135deg,#1a1a2e,#2a2a4e);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0}
|
|
.race-entry-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#4a9ed8 0%,#6bb5e0 50%,#3a6a3a 100%);opacity:.3}
|
|
.race-entry-thumb svg{position:relative;z-index:1}
|
|
.race-entry-info{flex:1;min-width:0}
|
|
.race-entry-title{font-size:13px;font-weight:700;color:#333}
|
|
.race-entry-desc{font-size:11px;color:#999;margin-top:2px}
|
|
.race-entry-live{background:#cc0000;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:1px}
|
|
/* 弹窗遮罩 */
|
|
.race-modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:100;display:none;align-items:flex-start;justify-content:center;padding-top:40px}
|
|
.race-modal-mask.show{display:flex}
|
|
/* 弹窗内容 */
|
|
.race-modal{width:100%;max-width:480px;max-height:90vh;overflow-y:auto;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.4);position:relative;animation:modalIn .25s ease}
|
|
@keyframes modalIn{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
|
|
/* 弹窗顶栏 */
|
|
.race-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#1a1a2e;border-radius:12px 12px 0 0;border-bottom:1px solid rgba(255,255,255,.08)}
|
|
.race-modal-title{font-size:14px;font-weight:700;color:#fff}
|
|
.race-modal-close{display:flex;align-items:center;gap:6px;color:#aaa;font-size:12px;cursor:pointer;background:none;border:none;padding:4px 8px;border-radius:4px}
|
|
.race-modal-close:active{background:rgba(255,255,255,.1)}
|
|
/* 顶部栏 */
|
|
.pk-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #F0F0F0;padding:10px 15px;display:flex;align-items:center;justify-content:space-between}
|
|
.pk-header .title{font-weight:700;font-size:16px;color:#333;display:flex;align-items:center;gap:6px}
|
|
.pk-header .stats-btn{color:#333;font-size:14px;display:flex;align-items:center;gap:4px;text-decoration:none;cursor:pointer;background:none;border:none}
|
|
.pk-header .bal{color:var(--primary);font-weight:700;font-family:monospace;font-size:15px;display:flex;align-items:center;gap:4px}
|
|
/* 上期结果区 */
|
|
.result-bar{background:#fff;padding:10px 15px;border-bottom:1px solid #F0F0F0}
|
|
.result-balls{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
|
|
.result-tags{display:flex;gap:3px;flex-wrap:wrap;margin-top:6px}
|
|
.result-tags span{display:inline-block;padding:2px 6px;border:1px solid #ddd;border-radius:4px;font-size:11px;color:#666}
|
|
/* 期号状态栏 */
|
|
.period-bar{background:#fff;padding:10px 15px;border-bottom:1px solid #F0F0F0;display:flex;align-items:center;justify-content:space-between}
|
|
.period-badge{font-size:13px;font-weight:600}
|
|
.period-badge.open{color:var(--success)}.period-badge.closed{color:var(--danger)}.period-badge.drawing{color:var(--warn)}
|
|
.seal-label{font-size:13px;font-weight:700;color:#333}
|
|
.seal-status{color:var(--danger);font-weight:600;font-size:13px}
|
|
.draw-label{font-size:13px;font-weight:700;color:#333}
|
|
.draw-countdown{color:var(--primary);font-weight:700;font-size:15px;font-family:monospace}
|
|
/* 左右布局（参考图 dsn 风格） */
|
|
.bet-layout{display:flex;min-height:50vh}
|
|
.side-menu{width:72px;background:#fff;border-right:1px solid #F0F0F0;flex-shrink:0}
|
|
.side-menu .mi{display:flex;align-items:center;justify-content:center;height:44px;font-size:13px;color:#666;cursor:pointer;border-left:3px solid transparent;transition:all .2s}
|
|
.side-menu .mi.active{color:var(--primary);font-weight:600;border-left-color:var(--primary);background:#F0F8FF}
|
|
.bet-content{flex:1;overflow-y:auto;max-height:60vh;background:#fff}
|
|
/* 投注行（参考图风格 — 宽松、清爽） */
|
|
.bet-section-title{text-align:center;padding:12px 0 8px;font-size:14px;font-weight:600;color:#333;border-bottom:1px solid #F0F0F0;position:relative}
|
|
.bet-section-title::after{content:'▲';font-size:8px;color:#bbb;margin-left:4px;vertical-align:middle}
|
|
.bet-row{display:flex;border-bottom:1px solid #F5F5F5}
|
|
.bet-cell{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;cursor:pointer;font-size:14px;color:#333;transition:background .15s}
|
|
.bet-cell:first-child{border-right:1px solid #F5F5F5}
|
|
.bet-cell:active{background:#E8F4FF}
|
|
.bet-cell .odds{color:var(--primary);font-weight:600;font-size:14px}
|
|
/* 底部投注操作区 — 参考图 dsn 风格（在底部导航上方） */
|
|
.bet-bottom-bar{position:fixed;bottom:60px;left:0;right:0;z-index:50;background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.1)}
|
|
/* 已选N注浮动胶囊 */
|
|
.bet-float-badge{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:#FF8C00;color:#fff;font-size:12px;font-weight:700;padding:4px 16px;border-radius:20px 20px 0 0;display:flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:0 -2px 8px rgba(255,140,0,.3);cursor:pointer;transition:opacity .2s}
|
|
.bet-float-badge.hide{opacity:0;pointer-events:none}
|
|
.bet-float-badge .count{font-size:16px}
|
|
.bet-float-badge svg{width:18px;height:18px}
|
|
/* 金额按钮行 */
|
|
.amount-row{display:flex;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid #F0F0F0}
|
|
.amount-btn{flex:1;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:6px;font-size:14px;font-weight:600;color:#333;background:#fff;cursor:pointer;transition:all .15s}
|
|
.amount-btn.active{border-color:var(--primary);color:var(--primary);background:#F0F8FF}
|
|
.amount-btn:active{background:#F0F0F0}
|
|
.amount-custom{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;color:#1E90FF}
|
|
/* 输入行 */
|
|
.bet-input-row{display:flex;align-items:center;gap:8px;padding:6px 12px}
|
|
.bet-input-row input{flex:1;height:36px;border:1px solid #ddd;border-radius:6px;padding:0 12px;font-size:13px;color:#333;outline:none}
|
|
.bet-input-row input:focus{border-color:var(--primary)}
|
|
.bet-input-row input::placeholder{color:#bbb}
|
|
.bet-preset-btn{height:36px;padding:0 12px;border:1px solid #ddd;border-radius:18px;font-size:12px;color:#666;background:#fff;cursor:pointer;display:flex;align-items:center;gap:4px}
|
|
/* 取消确认按钮行 */
|
|
.bet-action-row{display:flex;gap:10px;padding:6px 12px 10px}
|
|
.bet-action-row .btn-cancel{flex:1;height:40px;border:1px solid #ddd;border-radius:8px;font-size:15px;font-weight:600;color:#666;background:#fff;cursor:pointer}
|
|
.bet-action-row .btn-confirm{flex:1;height:40px;border:none;border-radius:8px;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-dark));cursor:pointer;box-shadow:0 2px 8px rgba(30,144,255,.3)}
|
|
.bet-action-row .btn-confirm:active{transform:scale(.98)}
|
|
/* 选中态 — 蓝色边框 + 勾勾（参考图） */
|
|
.bet-cell.selected{background:#E8F4FF;border:1px solid var(--primary);position:relative}
|
|
.bet-cell.selected::after{content:'✓';position:absolute;top:2px;right:4px;width:18px;height:18px;background:var(--primary);color:#fff;font-size:10px;border-radius:0 0 0 6px;display:flex;align-items:center;justify-content:center}
|
|
/* 投注金额角标 */
|
|
.bet-amount-badge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;z-index:2}
|
|
.bet-cell,.bet-btn{position:relative}
|
|
/* 冠亚和结果角标 */
|
|
.section-hot-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:20px;height:20px;border-radius:10px;padding:0 5px;margin-left:6px;vertical-align:middle}
|
|
</style>
|
|
</head>
|
|
<body class="pb-nav" style="background:#F5F5F5;padding-bottom:240px">
|
|
|
|
<!-- 顶部栏 -->
|
|
<header class="pk-header">
|
|
<div class="title">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1E90FF" stroke-width="2"><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/><path d="M5 17H3v-4l2-5h9l4 5h3v4h-2"/><path d="M5 12h14"/></svg>
|
|
<?=$t('pk10_title')?>
|
|
</div>
|
|
<button class="stats-btn" onclick="location.href='/game/pk10/stats'"><?=$t('statistics')?><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></button>
|
|
<div class="bal">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
<span id="balanceDisplay"><?=number_format($user['balance']??0,2)?></span>
|
|
<select onchange="setLang(this.value)" style="padding:2px 4px;border:1px solid #ddd;border-radius:4px;font-size:10px;background:#fff;color:#666">
|
|
<?php foreach(I18n::LANGUAGES as $c=>$n): ?><option value="<?=$c?>" <?=I18n::getLang()===$c?'selected':''?>><?=$n?></option><?php endforeach; ?>
|
|
</select>
|
|
<?php if(!empty($isAgent)): ?><a href="/agent" style="color:#1E90FF;font-size:12px;text-decoration:none"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg></a><?php endif; ?>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 上期结果区 -->
|
|
<div class="result-bar">
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<span style="font-size:13px;font-weight:600;color:#333" id="lastPeriodNum">---</span>
|
|
<span style="font-size:11px;color:#999"><?=$t('last_result')?></span>
|
|
</div>
|
|
<div class="result-balls" id="lastResult"><span style="color:#999">---</span></div>
|
|
<div class="result-tags" id="lastResultTags"></div>
|
|
</div>
|
|
|
|
<!-- 当前期状态栏 -->
|
|
<div class="period-bar">
|
|
<div style="display:flex;align-items:center;gap:6px">
|
|
<span style="font-size:13px;font-weight:600;color:#333" id="periodNum">---</span>
|
|
<span class="seal-label"><?=$t('seal_plate')?></span>
|
|
<span id="statusBadge" class="seal-status"><?=$t('betting')?></span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:6px">
|
|
<span class="draw-label"><?=$t('draw_time')?></span>
|
|
<span class="draw-countdown" id="countdown">--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<?php $hasVideo=!empty($game['stream_url']); ?>
|
|
<?php if($hasVideo): ?>
|
|
<div id="pk10VideoWrap" style="display:none">
|
|
<div id="pk10VideoPlayer" data-stream="<?=htmlspecialchars($game['stream_url'])?>" style="width:100%;aspect-ratio:16/9;background:#000"></div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- 开奖视频入口（点击打开弹窗） -->
|
|
<div class="race-entry" id="raceEntryBtn" onclick="openRaceModal()">
|
|
<div class="race-entry-thumb">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="#fff" opacity=".8"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
|
</div>
|
|
<div class="race-entry-info">
|
|
<div class="race-entry-title">F1赛车开奖视频 <span class="race-entry-live">LIVE</span></div>
|
|
<div class="race-entry-desc" id="raceEntryDesc">点击查看开奖动画</div>
|
|
</div>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
|
</div>
|
|
|
|
<!-- 开奖动画弹窗 -->
|
|
<div class="race-modal-mask" id="raceModalMask" onclick="if(event.target===this)closeRaceModal()">
|
|
<div class="race-modal">
|
|
<!-- 弹窗顶栏 -->
|
|
<div class="race-modal-hd">
|
|
<span class="race-modal-title">F1赛车开奖视频</span>
|
|
<button class="race-modal-close" onclick="closeRaceModal()">小屏 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
|
</div>
|
|
<!-- 赛车场景（移入弹窗内） -->
|
|
<div class="race-scene" id="raceSceneWrap" style="margin:0;border-radius:0">
|
|
<!-- 场景顶栏 -->
|
|
<div class="race-scene-hd">
|
|
<div class="rs-row1">
|
|
<span class="rs-title">F1赛车</span>
|
|
<span class="rs-period" id="raceScenePeriod">期数：---</span>
|
|
<span class="rs-sound" id="rsSoundBtn" onclick="toggleRaceSound()" style="cursor:pointer">🔊</span>
|
|
<span class="rs-toggle" onclick="toggleRaceScene()" title="收起/展开">▲</span>
|
|
</div>
|
|
<div class="rs-balls" id="raceSceneBalls"><span style="color:#666;font-size:10px">---</span></div>
|
|
</div>
|
|
<!-- 天际线 — 蓝天 + 北京地标（鸟巢、水立方、央视大楼、国家大剧院、冰丝带） -->
|
|
<div class="race-skyline">
|
|
<svg viewBox="0 0 500 72" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 远景云 -->
|
|
<ellipse cx="80" cy="15" rx="40" ry="8" fill="rgba(255,255,255,.3)"/>
|
|
<ellipse cx="350" cy="12" rx="30" ry="6" fill="rgba(255,255,255,.25)"/>
|
|
<ellipse cx="450" cy="20" rx="25" ry="5" fill="rgba(255,255,255,.2)"/>
|
|
<!-- 国家大剧院（左侧椭圆穹顶）-->
|
|
<ellipse cx="60" cy="60" rx="35" ry="18" fill="#8ab5cc" stroke="#a0c8d8" stroke-width=".5"/>
|
|
<ellipse cx="60" cy="60" rx="28" ry="14" fill="#9bc5d8" opacity=".5"/>
|
|
<line x1="60" y1="42" x2="60" y2="60" stroke="rgba(255,255,255,.1)" stroke-width=".5"/>
|
|
<!-- 鸟巢（中左侧编织体育馆）-->
|
|
<path d="M140,68 L142,40 Q155,32 168,32 Q181,32 194,40 L196,68 Z" fill="#9aaa8a" stroke="#b0c0a0" stroke-width=".5"/>
|
|
<path d="M145,45 Q168,36 191,45" fill="none" stroke="rgba(255,255,255,.15)" stroke-width="1"/>
|
|
<path d="M148,50 Q168,42 188,50" fill="none" stroke="rgba(255,255,255,.1)" stroke-width=".8"/>
|
|
<path d="M150,56 Q168,49 186,56" fill="none" stroke="rgba(255,255,255,.08)" stroke-width=".6"/>
|
|
<!-- 交叉编织纹理 -->
|
|
<line x1="155" y1="35" x2="175" y2="65" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
|
|
<line x1="168" y1="32" x2="150" y2="65" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
|
|
<line x1="180" y1="35" x2="190" y2="65" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
|
|
<!-- 水立方（蓝色方盒子）-->
|
|
<rect x="220" y="38" width="50" height="30" rx="2" fill="#5ba8d0" stroke="#70bce0" stroke-width=".5"/>
|
|
<!-- 气泡纹理 -->
|
|
<circle cx="230" cy="45" r="3" fill="rgba(255,255,255,.1)" stroke="rgba(255,255,255,.08)" stroke-width=".3"/>
|
|
<circle cx="240" cy="50" r="4" fill="rgba(255,255,255,.08)" stroke="rgba(255,255,255,.06)" stroke-width=".3"/>
|
|
<circle cx="250" cy="44" r="3.5" fill="rgba(255,255,255,.1)" stroke="rgba(255,255,255,.08)" stroke-width=".3"/>
|
|
<circle cx="260" cy="52" r="3" fill="rgba(255,255,255,.08)" stroke="rgba(255,255,255,.06)" stroke-width=".3"/>
|
|
<circle cx="235" cy="58" r="3.5" fill="rgba(255,255,255,.06)" stroke="rgba(255,255,255,.05)" stroke-width=".3"/>
|
|
<circle cx="248" cy="56" r="2.5" fill="rgba(255,255,255,.1)" stroke="rgba(255,255,255,.06)" stroke-width=".3"/>
|
|
<circle cx="258" cy="42" r="2" fill="rgba(255,255,255,.12)"/>
|
|
<!-- 央视大楼（Z字形/门框双塔）-->
|
|
<rect x="310" y="22" width="12" height="46" fill="#7a8a9a" stroke="#90a0b0" stroke-width=".3"/>
|
|
<rect x="340" y="22" width="12" height="46" fill="#7a8a9a" stroke="#90a0b0" stroke-width=".3"/>
|
|
<rect x="310" y="22" width="42" height="10" rx="1" fill="#8595a5" stroke="#90a0b0" stroke-width=".3"/>
|
|
<path d="M322,32 L340,32" stroke="rgba(255,255,255,.1)" stroke-width=".5"/>
|
|
<!-- 窗户 -->
|
|
<rect x="313" y="35" width="3" height="3" fill="rgba(255,255,200,.1)" rx=".5"/>
|
|
<rect x="313" y="41" width="3" height="3" fill="rgba(255,255,200,.15)" rx=".5"/>
|
|
<rect x="313" y="47" width="3" height="3" fill="rgba(255,255,200,.1)" rx=".5"/>
|
|
<rect x="343" y="35" width="3" height="3" fill="rgba(255,255,200,.12)" rx=".5"/>
|
|
<rect x="343" y="41" width="3" height="3" fill="rgba(255,255,200,.1)" rx=".5"/>
|
|
<rect x="343" y="47" width="3" height="3" fill="rgba(255,255,200,.15)" rx=".5"/>
|
|
<!-- 冰丝带（右侧弧形建筑）-->
|
|
<path d="M400,68 L402,42 Q410,30 425,28 Q440,30 448,42 L450,68 Z" fill="#a0c8e0" stroke="#b0d8f0" stroke-width=".5"/>
|
|
<path d="M405,35 Q425,25 445,35" fill="none" stroke="rgba(255,255,255,.2)" stroke-width="1.5"/>
|
|
<path d="M408,42 Q425,34 442,42" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="1"/>
|
|
<!-- 远景小楼群 -->
|
|
<rect x="105" y="55" width="8" height="13" fill="#7a9aaa" opacity=".5"/>
|
|
<rect x="115" y="50" width="6" height="18" fill="#7090a0" opacity=".5"/>
|
|
<rect x="285" y="52" width="10" height="16" fill="#7a8a9a" opacity=".4"/>
|
|
<rect x="375" y="48" width="8" height="20" fill="#7a90a0" opacity=".4"/>
|
|
<rect x="385" y="52" width="6" height="16" fill="#8aa0b0" opacity=".3"/>
|
|
<!-- 地面线 -->
|
|
<rect x="0" y="68" width="500" height="4" fill="#5a8a3a" opacity=".8"/>
|
|
</svg>
|
|
</div>
|
|
<!-- 草地分割线 -->
|
|
<div class="race-track-ground"></div>
|
|
<!-- 赛道主体 -->
|
|
<div class="race-track" id="raceArea" style="position:relative">
|
|
<div class="start-line"></div>
|
|
<div class="finish-line"></div>
|
|
<!-- 冲线爆炸特效 -->
|
|
<div class="finish-burst" id="finishBurst">
|
|
<span class="fp" style="--fpx:25px;--fpy:-35px"></span>
|
|
<span class="fp" style="--fpx:-20px;--fpy:-28px"></span>
|
|
<span class="fp" style="--fpx:30px;--fpy:20px"></span>
|
|
<span class="fp" style="--fpx:-15px;--fpy:32px"></span>
|
|
<span class="fp" style="--fpx:18px;--fpy:-42px"></span>
|
|
<span class="fp" style="--fpx:-28px;--fpy:15px"></span>
|
|
<span class="fp" style="--fpx:35px;--fpy:8px"></span>
|
|
<span class="fp" style="--fpx:-10px;--fpy:-20px"></span>
|
|
</div>
|
|
<!-- 倒计时+红绿灯叠加层 -->
|
|
<div class="race-overlay" id="raceOverlay">
|
|
<div class="race-timer-display" id="raceTimerDisplay">00:00</div>
|
|
<div class="traffic-lights" id="trafficLights">
|
|
<span class="tl" id="tl1"></span><span class="tl" id="tl2"></span>
|
|
<span class="tl" id="tl3"></span><span class="tl" id="tl4"></span>
|
|
<span class="tl" id="tl5"></span>
|
|
</div>
|
|
</div>
|
|
<!-- 结算领奖台叠加层 -->
|
|
<div class="podium-overlay" id="podiumOverlay">
|
|
<div class="podium-stars"></div>
|
|
<!-- 彩带雨 -->
|
|
<div class="confetti-container" id="confettiBox"></div>
|
|
<div class="podium-stage">
|
|
<div class="podium-car podium-2nd" id="podium2nd">
|
|
<span class="podium-rank">2nd</span>
|
|
<img class="podium-car-svg" id="podiumImg2" src="" alt="2nd" draggable="false">
|
|
</div>
|
|
<div class="podium-car podium-1st" id="podium1st">
|
|
<span class="podium-rank gold">1st</span>
|
|
<img class="podium-car-svg" id="podiumImg1" src="" alt="1st" draggable="false">
|
|
</div>
|
|
<div class="podium-car podium-3rd" id="podium3rd">
|
|
<span class="podium-rank">3rd</span>
|
|
<img class="podium-car-svg" id="podiumImg3" src="" alt="3rd" draggable="false">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
$carColors = [
|
|
1 =>['#f1c40f','#d4ac0d'],2 =>['#3498db','#2980b9'],3 =>['#555555','#333333'],
|
|
4 =>['#e67e22','#ca6f1e'],5 =>['#2ecc71','#27ae60'],6 =>['#2c3e99','#1a2a6c'],
|
|
7 =>['#999999','#777777'],8 =>['#e74c3c','#c0392b'],9 =>['#cc2222','#991111'],
|
|
10=>['#27ae60','#1e8449']
|
|
];
|
|
for($i=1;$i<=10;$i++): $c=$carColors[$i]; ?>
|
|
<div class="track-lane" id="trackLane<?=$i?>">
|
|
<div class="progress-bar c<?=$i?>" id="bar<?=$i?>"></div>
|
|
<span class="lane-label">#<?=$i?></span>
|
|
<div class="car-container" id="carContainer<?=$i?>" style="--car-glow:<?=$c[0]?>80">
|
|
<div class="car-flame"><i></i><i></i><i></i></div>
|
|
<div class="car-wind"><i></i><i></i><i></i><i></i></div>
|
|
<div class="car-sparks"><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
|
<div class="car-brake-smoke"><i></i><i></i><i></i></div>
|
|
<img class="car-svg" src="/Static/img/cars/car<?=$i?>.png" alt="Car <?=$i?>" draggable="false">
|
|
<span class="exhaust">•</span>
|
|
<span class="rank-badge" id="rankBadge<?=$i?>"></span>
|
|
</div>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
<!-- 底部信息栏（参考图风格：期号 + 冠亚和 + 龙虎） -->
|
|
<div class="race-scene-ft" id="raceSceneFt">
|
|
<span>期号：<span class="race-ft-period" id="ftPeriodNum">---</span></span>
|
|
<span>冠亚和 <span class="race-ft-tag sum-tag" id="ftSumVal">-</span> <span class="race-ft-tag sum-tag" id="ftSumBs">-</span> <span class="race-ft-tag sum-tag" id="ftSumOe">-</span></span>
|
|
<span>龙虎 <span id="ftDtTags" style="display:inline-flex;gap:2px">---</span></span>
|
|
</div>
|
|
</div><!-- /race-scene -->
|
|
</div><!-- /race-modal -->
|
|
</div><!-- /race-modal-mask -->
|
|
|
|
<!-- 投注面板（参考图：左侧菜单 + 右侧内容） -->
|
|
<div id="betPanel">
|
|
<div class="bet-layout">
|
|
<!-- 左侧菜单 -->
|
|
<div class="side-menu" id="sideMenu">
|
|
<div class="mi active" onclick="showBetTab('bs',this)" id="tabBs"><?=$t('two_side')?></div>
|
|
<div class="mi" onclick="showBetTab('rank',this)" id="tabRank"><?=$t('rank_1_10')?></div>
|
|
<div class="mi" onclick="showBetTab('sum',this)" id="tabSum"><?=$t('sum_bs_tab')?></div>
|
|
<div class="mi" onclick="showBetTab('quick',this)" id="tabQuick"><?=$t('quick')?></div>
|
|
<div class="mi" onclick="showBetTab('dragon',this)" id="tabDragon"><?=$t('streak')?></div>
|
|
<div class="mi" onclick="showBetTab('miss',this)" id="tabMiss"><?=$t('missing')?></div>
|
|
</div>
|
|
<!-- 右侧投注内容 -->
|
|
<div class="bet-content">
|
|
|
|
<!-- 两面（大小+单双+龙虎）-->
|
|
<div id="panelBs">
|
|
<!-- 冠亚和 大小单双 -->
|
|
<?php $odds=function($t,$v)use($oddsMap){return $oddsMap[$t.'_'.$v]??1.95;}; ?>
|
|
<div class="bet-section-title"><?=$t('sum')?><span class="section-hot-badge" id="sumHotBadge" style="display:none"></span></div>
|
|
<div class="bet-row">
|
|
<div class="bet-cell" onclick="addBet('sum_bs','sum_big',this)"><?=$t('sum_bs_big')?> <span class="odds"><?=$odds('sum_bs','sum_big')?></span></div>
|
|
<div class="bet-cell" onclick="addBet('sum_bs','sum_small',this)"><?=$t('sum_bs_small')?> <span class="odds"><?=$odds('sum_bs','sum_small')?></span></div>
|
|
</div>
|
|
<div class="bet-row">
|
|
<div class="bet-cell" onclick="addBet('sum_bs','sum_odd',this)"><?=$t('sum_bs_odd')?> <span class="odds"><?=$odds('sum_bs','sum_odd')?></span></div>
|
|
<div class="bet-cell" onclick="addBet('sum_bs','sum_even',this)"><?=$t('sum_bs_even')?> <span class="odds"><?=$odds('sum_bs','sum_even')?></span></div>
|
|
</div>
|
|
<?php for($r=1;$r<=10;$r++): $label=$r<=2?($r==1?$t('champion'):$t('runner_up')):$t('rank_n',['n'=>$r]); ?>
|
|
<!-- 名次标题 -->
|
|
<div class="bet-section-title"><?=$label?></div>
|
|
<div class="bet-row">
|
|
<div class="bet-cell" onclick="addBet('bs','rank<?=$r?>_big',this)"><?=$t('big')?> <span class="odds"><?=$odds('bs','rank'.$r.'_big')?></span></div>
|
|
<div class="bet-cell" onclick="addBet('bs','rank<?=$r?>_small',this)"><?=$t('small')?> <span class="odds"><?=$odds('bs','rank'.$r.'_small')?></span></div>
|
|
</div>
|
|
<div class="bet-row">
|
|
<div class="bet-cell" onclick="addBet('oe','rank<?=$r?>_odd',this)"><?=$t('odd')?> <span class="odds"><?=$odds('oe','rank'.$r.'_odd')?></span></div>
|
|
<div class="bet-cell" onclick="addBet('oe','rank<?=$r?>_even',this)"><?=$t('even')?> <span class="odds"><?=$odds('oe','rank'.$r.'_even')?></span></div>
|
|
</div>
|
|
<?php if($r<=5): $pairs=[[1,10],[2,9],[3,8],[4,7],[5,6]]; $p=$pairs[$r-1]; ?>
|
|
<div class="bet-row">
|
|
<div class="bet-cell" onclick="addBet('dt','dt<?=$r?>_dragon',this)"><?=$t('dragon')?> <span class="odds"><?=$odds('dt','dt'.$r.'_dragon')?></span></div>
|
|
<div class="bet-cell" onclick="addBet('dt','dt<?=$r?>_tiger',this)"><?=$t('tiger')?> <span class="odds"><?=$odds('dt','dt'.$r.'_tiger')?></span></div>
|
|
</div>
|
|
<?php endif; endfor; ?>
|
|
</div>
|
|
|
|
<!-- 1~10名 号码投注 -->
|
|
<div id="panelRank" class="hidden" style="padding:10px">
|
|
<?php for($r=1;$r<=10;$r++): $label=$r<=2?($r==1?$t('champion'):$t('runner_up')):$t('rank_n',['n'=>$r]); ?>
|
|
<div style="margin-bottom:10px">
|
|
<div style="font-size:13px;font-weight:600;color:#333;margin-bottom:6px"><?=$label?></div>
|
|
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:4px">
|
|
<?php for($c=1;$c<=10;$c++): ?>
|
|
<?php $rankOdds=$odds('rank','rank'.$r.'_'.$c); ?>
|
|
<div onclick="addBet('rank','rank<?=$r?>_<?=$c?>',this)" class="bet-btn" data-odds="<?=$rankOdds?>">
|
|
<div class="car c<?=$c?>" style="width:24px;height:24px;font-size:11px;margin:0 auto 2px"><?=$c?></div>
|
|
<div style="color:#999;font-size:10px"><?=$rankOdds?></div>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
|
|
<!-- 冠亚和值 -->
|
|
<div id="panelSum" class="hidden" style="padding:10px">
|
|
<div style="font-size:13px;font-weight:600;color:#333;margin-bottom:8px"><?=$t('sum_value')?> (3-19)</div>
|
|
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:4px">
|
|
<?php $sumOddsFallback=[3=>140,4=>70,5=>35,6=>23,7=>17.5,8=>14,9=>11.6,10=>10,11=>8.8,12=>8.8,13=>10,14=>11.6,15=>14,16=>17.5,17=>23,18=>35,19=>70];
|
|
foreach($sumOddsFallback as $v=>$fallback): $sumO=$oddsMap['sum_sum_'.$v]??$fallback; ?>
|
|
<div onclick="addBet('sum','sum_<?=$v?>',this)" class="bet-btn">
|
|
<div style="font-weight:700"><?=$v?></div><div style="color:#999;font-size:10px"><?=$sumO?></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px">
|
|
<div onclick="addBet('sum_bs','sum_big',this)" class="bet-cell" style="border:1px solid #F0F0F0;border-radius:8px"><?=$t('sum_big')?> <span class="odds"><?=$odds('sum_bs','sum_big')?></span></div>
|
|
<div onclick="addBet('sum_bs','sum_small',this)" class="bet-cell" style="border:1px solid #F0F0F0;border-radius:8px"><?=$t('sum_small')?> <span class="odds"><?=$odds('sum_bs','sum_small')?></span></div>
|
|
<div onclick="addBet('sum_bs','sum_odd',this)" class="bet-cell" style="border:1px solid #F0F0F0;border-radius:8px"><?=$t('sum_odd')?> <span class="odds"><?=$odds('sum_bs','sum_odd')?></span></div>
|
|
<div onclick="addBet('sum_bs','sum_even',this)" class="bet-cell" style="border:1px solid #F0F0F0;border-radius:8px"><?=$t('sum_even')?> <span class="odds"><?=$odds('sum_bs','sum_even')?></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快捷投注 -->
|
|
<div id="panelQuick" class="hidden" style="padding:10px">
|
|
<div class="quick-section">
|
|
<div class="quick-title"><?=$t('two_side')?> — <?=$t('rank_n',['n'=>'1~10'])?></div>
|
|
<div class="quick-grid">
|
|
<div class="quick-btn qb-red" onclick="quickBet('bs','big')"><?=$t('big')?></div>
|
|
<div class="quick-btn qb-blue" onclick="quickBet('bs','small')"><?=$t('small')?></div>
|
|
<div class="quick-btn qb-orange" onclick="quickBet('oe','odd')"><?=$t('odd')?></div>
|
|
<div class="quick-btn qb-purple" onclick="quickBet('oe','even')"><?=$t('even')?></div>
|
|
</div>
|
|
</div>
|
|
<div class="quick-section">
|
|
<div class="quick-title"><?=$t('dragon_tiger')?> — <?=$t('rank_n',['n'=>'1~5'])?></div>
|
|
<div class="quick-grid">
|
|
<div class="quick-btn qb-red" onclick="quickBet('dt','dragon')"><?=$t('dragon')?></div>
|
|
<div class="quick-btn qb-blue" onclick="quickBet('dt','tiger')"><?=$t('tiger')?></div>
|
|
</div>
|
|
</div>
|
|
<div class="quick-section">
|
|
<div class="quick-title"><?=$t('sum')?></div>
|
|
<div class="quick-grid">
|
|
<div class="quick-btn qb-red" onclick="quickBet('sum_bs','sum_big')"><?=$t('sum_big')?></div>
|
|
<div class="quick-btn qb-blue" onclick="quickBet('sum_bs','sum_small')"><?=$t('sum_small')?></div>
|
|
<div class="quick-btn qb-orange" onclick="quickBet('sum_bs','sum_odd')"><?=$t('sum_odd')?></div>
|
|
<div class="quick-btn qb-purple" onclick="quickBet('sum_bs','sum_even')"><?=$t('sum_even')?></div>
|
|
</div>
|
|
</div>
|
|
<div class="quick-hint"><?=$t('quick_hint')?></div>
|
|
</div>
|
|
|
|
<!-- 长龙统计 -->
|
|
<div id="panelDragon" class="hidden" style="padding:8px 10px">
|
|
<div id="dragonStreakList"></div>
|
|
</div>
|
|
|
|
<!-- 遗漏统计 -->
|
|
<div id="panelMiss" class="hidden" style="padding:8px 10px">
|
|
<div class="miss-tabs" id="missTabs">
|
|
<span class="miss-tab active" onclick="switchMissRank(0,this)"><?=$t('champion')?></span>
|
|
<span class="miss-tab" onclick="switchMissRank(1,this)"><?=$t('runner_up')?></span>
|
|
<?php for($i=3;$i<=10;$i++): ?>
|
|
<span class="miss-tab" onclick="switchMissRank(<?=$i-1?>,this)"><?=$i?></span>
|
|
<?php endfor; ?>
|
|
</div>
|
|
<div id="missGrid" class="miss-grid"></div>
|
|
<div class="miss-section" style="margin-top:8px">
|
|
<div class="miss-label"><?=$t('two_side')?></div>
|
|
<div id="missTwoSide" class="miss-two-side"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /bet-content -->
|
|
</div><!-- /bet-layout -->
|
|
|
|
<!-- 底部投注操作栏（参考图 dsn 风格：已选N注 + 金额按钮 + 输入框 + 取消确认） -->
|
|
<div class="bet-bottom-bar" id="betBottomBar">
|
|
<!-- 已选N注浮动胶囊 -->
|
|
<div class="bet-float-badge hide" id="betFloatBadge" onclick="toggleBetPanel()">
|
|
已选 <span class="count" id="betCount">0</span> 注
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
|
|
</div>
|
|
<!-- 快捷金额按钮 -->
|
|
<div class="amount-row">
|
|
<div class="amount-btn" onclick="selectChip(50,this)" data-amount="50">50</div>
|
|
<div class="amount-btn" onclick="selectChip(100,this)" data-amount="100">100</div>
|
|
<div class="amount-btn" onclick="selectChip(200,this)" data-amount="200">200</div>
|
|
<div class="amount-btn active" onclick="selectChip(500,this)" data-amount="500">500</div>
|
|
<div class="amount-btn" onclick="selectChip(1000,this)" data-amount="1000">1000</div>
|
|
<div class="amount-custom" onclick="toggleCustomInput()">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
</div>
|
|
</div>
|
|
<!-- 自定义金额输入 -->
|
|
<div class="bet-input-row" id="customInputRow">
|
|
<input type="number" id="customAmount" min="1" step="1" placeholder="最低输入1元">
|
|
<div class="bet-preset-btn" onclick="applyCustomChip()">预设 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg></div>
|
|
</div>
|
|
<!-- 取消 / 确认 -->
|
|
<div class="bet-action-row">
|
|
<button class="btn-cancel" onclick="clearBets()"><?=$t('cancel')?></button>
|
|
<button class="btn-confirm" onclick="submitBets()"><?=$t('confirm')?></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 本期已下注 -->
|
|
<div style="background:#fff;padding:10px 15px;border-top:1px solid #F0F0F0" id="myBetsPanel">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
|
|
<span style="color:#999;font-size:12px"><?=$t('current_bets')?></span>
|
|
<span style="color:#999;font-size:11px" id="myBetsCount">0</span>
|
|
</div>
|
|
<div id="myBetsList" style="max-height:140px;overflow-y:auto">
|
|
<div style="color:#999;font-size:12px;text-align:center;padding:8px"><?=$t('no_data')?></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 上期结果面板 -->
|
|
<div class="hidden" style="background:#fff;padding:10px 15px;border-top:1px solid #F0F0F0" id="lastResultPanel">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
|
|
<span style="color:#999;font-size:12px"><?=$t('last_result_label')?></span>
|
|
<span style="font-size:12px;font-weight:700" id="lastProfitDisplay"></span>
|
|
</div>
|
|
<div id="lastMyBetsList" style="max-height:128px;overflow-y:auto"></div>
|
|
</div>
|
|
</div><!-- /betPanel -->
|
|
|
|
<!-- 历史记录 -->
|
|
<div style="background:#fff;margin-top:8px;padding:10px 15px;border-top:1px solid #F0F0F0">
|
|
<div style="color:#999;font-size:12px;margin-bottom:6px"><?=$t('history')?></div>
|
|
<div id="historyList" style="font-size:12px;max-height:200px;overflow-y:auto"></div>
|
|
</div>
|
|
|
|
<!-- 底部导航 -->
|
|
<?php $navActive='game'; include __DIR__.'/_nav.php'; ?>
|
|
|
|
<!-- PK10 Config: PHP variables passed to JS -->
|
|
<script>
|
|
var PK10_CONFIG={
|
|
gameId:<?=$gameId?>,
|
|
lang:{
|
|
champion:'<?=$t('champion')?>',runner_up:'<?=$t('runner_up')?>',
|
|
rank_3:'<?=$t('rank_n',['n'=>3])?>',rank_4:'<?=$t('rank_n',['n'=>4])?>',rank_5:'<?=$t('rank_n',['n'=>5])?>',
|
|
rank_6:'<?=$t('rank_n',['n'=>6])?>',rank_7:'<?=$t('rank_n',['n'=>7])?>',rank_8:'<?=$t('rank_n',['n'=>8])?>',
|
|
rank_9:'<?=$t('rank_n',['n'=>9])?>',rank_10:'<?=$t('rank_n',['n'=>10])?>',
|
|
big:'<?=$t('big')?>',small:'<?=$t('small')?>',odd:'<?=$t('odd')?>',even:'<?=$t('even')?>',
|
|
dragon:'<?=$t('dragon')?>',tiger:'<?=$t('tiger')?>',sum:'<?=$t('sum')?>',
|
|
sum_big:'<?=$t('sum_big')?>',sum_small:'<?=$t('sum_small')?>',sum_odd:'<?=$t('sum_odd')?>',sum_even:'<?=$t('sum_even')?>',
|
|
car_no:'<?=$t('car_no')?>',no_data:'<?=$t('no_data')?>',total:'<?=$t('total')?>',
|
|
win:'<?=$t('win')?>',lose:'<?=$t('lose')?>',pending_status:'<?=$t('pending')?>',
|
|
error:'<?=$t('error')?>',rank_prefix:'<?=$t('rank_n',['n'=>''])?>',
|
|
drawing:'<?=$t('drawing')?>',settled:'<?=$t('settled')?>',
|
|
period_closed:'<?=$t('period_closed')?>',place_bet:'<?=$t('place_bet')?>',
|
|
waiting:'<?=$t('waiting')?>',bets_added:'<?=$t('bets_added')?>',
|
|
sealed:'<?=$t('sealed')?>',betting:'<?=$t('betting')?>'
|
|
}
|
|
};
|
|
// Shared global state (accessible by all pk10-*.js files)
|
|
var GAME_ID=PK10_CONFIG.gameId;
|
|
var selectedChip=500,bets={},periodData=null,pollTimer=null,historyCache=[];
|
|
var rankNames={1:PK10_CONFIG.lang.champion,2:PK10_CONFIG.lang.runner_up,3:PK10_CONFIG.lang.rank_3,4:PK10_CONFIG.lang.rank_4,5:PK10_CONFIG.lang.rank_5,6:PK10_CONFIG.lang.rank_6,7:PK10_CONFIG.lang.rank_7,8:PK10_CONFIG.lang.rank_8,9:PK10_CONFIG.lang.rank_9,10:PK10_CONFIG.lang.rank_10};
|
|
var dtPairs={1:[1,10],2:[2,9],3:[3,8],4:[4,7],5:[5,6]};
|
|
var I18N={big:PK10_CONFIG.lang.big,small:PK10_CONFIG.lang.small,odd:PK10_CONFIG.lang.odd,even:PK10_CONFIG.lang.even,dragon:PK10_CONFIG.lang.dragon,tiger:PK10_CONFIG.lang.tiger,sum:PK10_CONFIG.lang.sum,sum_big:PK10_CONFIG.lang.sum_big,sum_small:PK10_CONFIG.lang.sum_small,sum_odd:PK10_CONFIG.lang.sum_odd,sum_even:PK10_CONFIG.lang.sum_even,car:PK10_CONFIG.lang.car_no,no_bets:PK10_CONFIG.lang.no_data,total:PK10_CONFIG.lang.total,items:'',profit:PK10_CONFIG.lang.win,loss:PK10_CONFIG.lang.lose,draw:PK10_CONFIG.lang.pending_status,net_err:PK10_CONFIG.lang.error,rank_prefix:PK10_CONFIG.lang.rank_prefix,drawing:PK10_CONFIG.lang.drawing,settled_label:PK10_CONFIG.lang.settled,period_closed:PK10_CONFIG.lang.period_closed,place_bet:PK10_CONFIG.lang.place_bet,waiting:PK10_CONFIG.lang.waiting,bets_added:PK10_CONFIG.lang.bets_added};
|
|
// Race state
|
|
var raceAnimState='idle',lastAnimatedResult=null,idleAnimTimer=null,carPositions={};
|
|
var raceFrameTimer=null,ballRollTimer=null;
|
|
var FINISH_LINE=88,START_LINE=3;
|
|
for(var _i=1;_i<=10;_i++)carPositions[_i]=START_LINE;
|
|
var CAR_COLORS={1:['#f1c40f','#d4ac0d'],2:['#3498db','#2980b9'],3:['#555555','#333333'],4:['#e67e22','#ca6f1e'],5:['#2ecc71','#27ae60'],6:['#2c3e99','#1a2a6c'],7:['#999999','#777777'],8:['#e74c3c','#c0392b'],9:['#cc2222','#991111'],10:['#27ae60','#1e8449']};
|
|
var trafficLightTimers=[];
|
|
var raceModalOpen=false,currentView='anim';
|
|
// Poll state
|
|
var localCountdown=0,localLockCountdown=0,lastPollStatus='',lastPeriodId=0,drawnResultShown=false;
|
|
var cachedRaceResult=null,raceTriggered=false,pendingRaceHeader=null;
|
|
// Bet state
|
|
var curMissRank=0;
|
|
</script>
|
|
<!-- PK10 JS modules (order matters) -->
|
|
<?php $jsVer = '20260325b'; ?>
|
|
<script src="/Static/js/pk10-sound.js?v=<?=$jsVer?>"></script>
|
|
<script src="/Static/js/pk10-race.js?v=<?=$jsVer?>"></script>
|
|
<script src="/Static/js/pk10-bet.js?v=<?=$jsVer?>"></script>
|
|
<script src="/Static/js/pk10-poll.js?v=<?=$jsVer?>"></script>
|
|
<?php if(!empty($game['stream_url'])): ?>
|
|
<script src="/Static/ckplayer/hls.js/hls.min.js"></script>
|
|
<script src="/Static/ckplayer/flv.js/flv.min.js"></script>
|
|
<script src="/Static/ckplayer/mpegts.js/mpegts.min.js"></script>
|
|
<script src="/Static/ckplayer/js/ckplayer.js"></script>
|
|
<script>
|
|
(function(){
|
|
var el=document.getElementById('pk10VideoPlayer');
|
|
if(!el||typeof ckplayer!=='function')return;
|
|
var url=el.getAttribute('data-stream')||'';
|
|
if(!url)return;
|
|
var type='hls';
|
|
if(url.indexOf('.flv')>-1)type='flv';
|
|
else if(url.indexOf('.ts')>-1||url.indexOf('mpegts')>-1)type='mpegts';
|
|
window.pk10Player=ckplayer({
|
|
container:'#pk10VideoPlayer',
|
|
live:true,
|
|
autoplay:true,
|
|
volume:0,
|
|
controls:true,
|
|
rightBar:false,
|
|
video:url,
|
|
type:type,
|
|
playsinline:true
|
|
});
|
|
setTimeout(function(){
|
|
var v=document.querySelector('#pk10VideoPlayer video');
|
|
if(v){v.muted=true;v.play().catch(function(){});}
|
|
},800);
|
|
})();
|
|
</script>
|
|
<?php endif; ?>
|
|
</body></html>
|