/* ========================================================= Panalo98 前台框架 v2 · 商务风 一套组件 → 手机版 (.app) + 电脑版 (.wrap),换肤只改 data-theme ========================================================= */ /* ---------- 1. 主题变量 ---------- 预设 = 07 藏青 × 宝蓝(Chloe 2026-09-24 定案)。 另外三套(04 菲律宾热带 / 06 极简科技白 / 08 粉蓝粉紫红)留着做拓展盘口, 换肤只改 ,组件一行都不用动。 ※ 命名说明:原本叫 --gold 的那一组是「细线与高光用的强调色」, 07 用的是亮宝蓝不是金色,所以改名成 --acc,免得看到 gold 却是蓝的。 ※ 立体感靠的是 --btn-top / --btn-bottom / --btn-shadow / --shade / --canvas 这五个变数,每套皮肤各自给一组,共用同一份「斜面 + 内高光 + 硬底边」的写法。 */ :root{ --navy:#0B1731; /* 底色 / 主墨色 */ --navy-2:#13274A; --brand:#3877D3; --brand-2:#5B98EE; --brand-ink:#FFFFFF; --acc:#96C4FF; --acc-2:#C3DEFF; --acc-ink:#07152E; /* 细线、底线、高光 */ --page:#0B1731; --app:#0B1731; --surface:#13274A; --surface-2:#17305C; --line:#35527D; --line-2:#2A4169; --text:#F1F6FF; --text-2:#B4C4E1; --text-3:#8299BD; --topbar:linear-gradient(90deg,#101E3B,#1B3A72); --topbar-ink:#F1F6FF; --notice-ink:#B4C4E1; --tabbar:#13274A; --tab-ink:#8299BD; --tab-ink-on:#96C4FF; --r:10px; --r-lg:15px; --r-pill:999px; --gap:8px; --pad:14px; --cols:4; --pcols:8; --tab-h:58px; /* 立体 */ --btn-top:#66AFFF; --btn-bottom:#225DC1; --btn-shadow:rgba(10,55,123,.63); --glint:rgba(255,255,255,.42); --shade:rgba(6,19,41,.55); --canvas:radial-gradient(ellipse 58% 42% at 80% 10%,rgba(74,166,255,.42),transparent 64%), radial-gradient(ellipse 54% 40% at 4% 62%,rgba(48,96,214,.34),transparent 62%), radial-gradient(ellipse 70% 46% at 50% 108%,rgba(30,64,150,.26),transparent 66%); --shadow:0 1px 3px rgba(4,12,28,.45); --shadow-2:0 12px 34px rgba(4,12,28,.55); } /* 04 菲律宾热带 —— 拓展盘口备用 */ [data-theme="fiesta"]{ --navy:#0E7C7B; --navy-2:#0B6362; --brand:#FF5C39; --brand-2:#FF8566; --brand-ink:#FFFFFF; --acc:#0E7C7B; --acc-2:#FFC531; --acc-ink:#FFFFFF; --page:#FFFBF2; --app:#FFFBF2; --surface:#FFFFFF; --surface-2:#FFF6E8; --line:#E8E5D9; --line-2:#F2EFE4; --text:#26324A; --text-2:#6C7585; --text-3:#9AA3B2; --topbar:linear-gradient(90deg,#0E7C7B,#12908E); --topbar-ink:#FFFFFF; --notice-ink:#6C7585; --tabbar:#FFFFFF; --tab-ink:#9AA3B2; --tab-ink-on:#0E7C7B; --btn-top:#FF9770; --btn-bottom:#DF452F; --btn-shadow:rgba(182,68,53,.44); --glint:rgba(255,255,255,.62); --shade:rgba(120,72,40,.16); --canvas:radial-gradient(circle 32% at 85% 13%,rgba(255,203,97,.36),transparent 60%), radial-gradient(circle 34% at 12% 63%,rgba(14,124,123,.15),transparent 62%); --shadow:0 1px 3px rgba(120,72,40,.10); --shadow-2:0 12px 34px rgba(120,72,40,.18); } /* 06 极简科技白 —— 拓展盘口备用 */ [data-theme="fintech"]{ --navy:#111418; --navy-2:#1C2126; --brand:#0B6E4F; --brand-2:#2B9C75; --brand-ink:#FFFFFF; --acc:#0B6E4F; --acc-2:#56B383; --acc-ink:#FFFFFF; --page:#F6F7F9; --app:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F3F5; --line:#E3E6EA; --line-2:#EDEFF2; --text:#111418; --text-2:#697178; --text-3:#98A0A8; --topbar:#FFFFFF; --topbar-ink:#111418; --notice-ink:#697178; --tabbar:#FFFFFF; --tab-ink:#98A0A8; --tab-ink-on:#0B6E4F; --r:9px; --r-lg:10px; --btn-top:#329F7C; --btn-bottom:#075D47; --btn-shadow:rgba(7,93,71,.34); --glint:rgba(255,255,255,.48); --shade:rgba(17,20,24,.07); --canvas:radial-gradient(circle 30% at 86% 15%,rgba(146,214,175,.20),transparent 58%), linear-gradient(120deg,#F6F7F9,#FFFFFF); --shadow:0 1px 2px rgba(17,20,24,.05); --shadow-2:0 8px 24px rgba(17,20,24,.10); } /* 08 粉蓝 × 粉紫红 —— 拓展盘口备用 */ [data-theme="pastel"]{ --navy:#30335D; --navy-2:#3C4070; --brand:#B368CC; --brand-2:#CE92E0; --brand-ink:#FFFFFF; --acc:#8B52B8; --acc-2:#F5ADD1; --acc-ink:#FFFFFF; --page:#EAF6FF; --app:#F7FBFF; --surface:#FFF9FF; --surface-2:#F5ECFB; --line:#E6D9F4; --line-2:#F0E7F8; --text:#30335D; --text-2:#777A9C; --text-3:#A3A6C0; --topbar:linear-gradient(90deg,#EFFAFF,#FFF5FA); --topbar-ink:#30335D; --notice-ink:#777A9C; --tabbar:#FFF9FF; --tab-ink:#A3A6C0; --tab-ink-on:#B368CC; --r:14px; --r-lg:19px; --btn-top:#F2A9D2; --btn-bottom:#9A5AC7; --btn-shadow:rgba(135,85,166,.50); --glint:rgba(255,255,255,.70); --shade:rgba(179,104,204,.18); --canvas:radial-gradient(ellipse 40% 30% at 89% 13%,rgba(245,173,209,.62),transparent 62%), radial-gradient(ellipse 42% 32% at 12% 66%,rgba(146,217,255,.60),transparent 62%); --shadow:0 1px 3px rgba(135,85,166,.10); --shadow-2:0 12px 32px rgba(135,85,166,.20); } /* ---------- 2. 基础 ---------- */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} body{margin:0;background:var(--page);color:var(--text); font-family:'Plus Jakarta Sans','Noto Sans SC',system-ui,-apple-system,sans-serif; font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} .sp{flex:1;min-width:0} /* ---------- 3. 设计稿工具列 ---------- */ .devbar{position:sticky;top:0;height:42px;z-index:99;display:flex;align-items:center;gap:8px; padding:0 16px;background:#0B1020;color:#fff;font-size:12px;overflow-x:auto;scrollbar-width:none} .devbar::-webkit-scrollbar{display:none} .devbar b{font-size:12.5px;letter-spacing:.4px;white-space:nowrap} .devbar .vw{display:flex;background:#1A2340;border-radius:8px;padding:2px} .devbar .vw a{padding:4px 12px;border-radius:6px;background:none;color:#96A3C2} .devbar .vw a.on{background:#2456CE;color:#fff} .devbar a{padding:5px 11px;border-radius:7px;background:#161E36;color:#B9C5DE;white-space:nowrap} .devbar>a.on{background:#2456CE;color:#fff} .devbar .lbl{color:#5C6C92;white-space:nowrap} .thsw{display:flex;gap:6px} .thsw button{width:20px;height:20px;border-radius:50%;border:2px solid #2C385A} .thsw button.on{border-color:#fff} /* ---------- 4. 手机外壳 ---------- */ .stage{padding:26px 0 40px;display:flex;justify-content:center} /* 手机 app 是一个固定高度的画面,不是一张会一直长下去的长网页: 顶栏不动、中间 .scroll 自己滚、底部导览钉在下缘。 所以 .app 给死高度 + flex,中间那块 flex:1 —— 不这样做的话滑到下面 tabbar 就不见了。 */ .app{width:390px;background:var(--app);position:relative; /* 812 是 iPhone 的高度,但视窗比它矮(笔电 680 左右)的时候整支手机会超出画面, tabbar 跟最后一段内容就掉到视窗外面。最高 812,不够就缩到视窗里 (视窗 - 工具列 42 - 上下留白 66)。正式包 ship.py 会改成 100dvh。 */ height:min(812px,calc(100dvh - var(--devbar-h) - 66px)); border-radius:20px;overflow:hidden;box-shadow:var(--shadow-2); display:flex;flex-direction:column} .app>.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; /* 卷动区的底边停在 tabbar 上缘(margin-bottom = tabbar 高),内容在结构上就到不了 tabbar 底下。 以前卷动区一路延伸到手机最底,内容从 tabbar 底下卷过去 —— 某些显卡 / 驱动的 Chrome 会把卷动层合成到 tabbar 上面,字就直接盖在底部导览上。 isolation:isolate 让卷动区自成一层,里面谁设了多高的 z-index 都跳不出来。 */ margin-bottom:var(--tab-h);isolation:isolate; /* 底部只要让开中间凸起的宝箱(24)跟右下两颗浮动钮(36+10),tabbar 本身已经不在卷动区里 */ padding-bottom:62px;scrollbar-width:none} .app>.scroll::-webkit-scrollbar{display:none} /* ---------- 5. 手机顶栏 ---------- */ .appbar{display:flex;align-items:center;gap:8px;padding:5px 12px;background:var(--surface-2); border-bottom:1px solid var(--line-2);color:var(--text-2)} /* 下载条。原本高 30px、右边只有一个「Get」文字连结,细到根本不会有人点。 改成:关闭钮 → app 图示 → 两行文案 → 一颗有厚度的 Install 钮。 */ .appbar{padding:9px 12px;gap:10px} .appbar .ic{width:38px;height:38px;object-fit:contain;opacity:1;border-radius:9px;flex:0 0 auto; box-shadow:0 2px 6px rgba(0,0,0,.35)} .appbar .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.28} .appbar .t b{font-size:12px;font-weight:800;color:var(--text);letter-spacing:.1px} .appbar .t i{font-style:normal;font-size:11px;color:var(--text-2)} .appbar .dl{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto; font-size:12px;font-weight:800;color:var(--brand-ink);letter-spacing:.2px; padding:8px 15px;border-radius:var(--r-pill); background:linear-gradient(180deg,var(--btn-top) 0%,var(--brand) 45%,var(--btn-bottom) 100%); border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 1px 1px var(--glint),0 3px 0 rgba(0,0,0,.18),0 5px 9px var(--btn-shadow); text-shadow:0 1px 1px rgba(0,0,0,.28)} .appbar .dl .ai{font-size:13px;line-height:1} .appbar .x{color:var(--text-3);font-size:13px;flex:0 0 auto;width:14px;text-align:center} .top{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--topbar); color:var(--topbar-ink)} .top .mn{font-size:15px;width:18px;opacity:.85} /* 同一张图裁掉留白之後,这里给多少就是多少(以前 20px 只看得到 11px) */ .top .logo{height:17px;width:auto} .bal{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:4px 10px; font-size:12px;font-weight:700;letter-spacing:.2px} .bal .rf{font-size:10px;opacity:.65} .btn-dep{background:linear-gradient(135deg,var(--acc-2),var(--acc));color:var(--acc-ink); font-weight:800;font-size:11.5px;padding:6px 14px;border-radius:var(--r-pill);white-space:nowrap; letter-spacing:.3px} /* 余额旁边那颗 cash in:只有图标、不写字。 图标会轻轻跳一下再落回去 —— 静止的按钮在满屏跑马灯里会被看漏。 */ .btn-dep.ico{display:grid;place-items:center;width:36px;height:36px;padding:0; background:none;border:0;box-shadow:none;flex:0 0 auto} .btn-dep.ico img{width:36px;height:36px;display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); animation:cashin 3.4s cubic-bezier(.34,1.56,.64,1) infinite} .btn-dep.ico svg{width:19px;height:19px;display:block;color:var(--acc-ink)} @keyframes cashin{ 0%,58%,100%{transform:translateY(0) scale(1)} 65%{transform:translateY(-3.5px) scale(1.07)} 74%{transform:translateY(0) scale(.96)} 81%{transform:translateY(-1.6px) scale(1.02)} 89%{transform:translateY(0) scale(1)}} /* 系统设了「减少动态效果」就别跳 —— 有些人会晕 */ @media (prefers-reduced-motion:reduce){.btn-dep.ico img{animation:none}} .notice{display:flex;align-items:center;gap:9px;background:var(--surface);color:var(--notice-ink); padding:8px 14px;font-size:11px;border-bottom:1px solid var(--line-2)} .notice .hn{width:13px;height:13px;object-fit:contain;flex:0 0 auto;opacity:.6} .notice .roll{flex:1;min-width:0;overflow:hidden;white-space:nowrap} .notice .roll span{display:inline-block;animation:roll 26s linear infinite} @keyframes roll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .notice .se{color:var(--text-3);font-size:12px;flex:0 0 auto} /* ---------- 6. Banner ---------- */ .hero{padding:var(--pad) var(--pad) 0} .track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .track::-webkit-scrollbar{display:none} .hero .track>*{scroll-snap-align:start;flex:0 0 100%} .hero img{width:100%;border-radius:var(--r);aspect-ratio:366/150;object-fit:cover} /* 圆点跟轮播图、跟下面的厂商横条都要留开 —— 贴太紧会看起来像压在海报上 */ .dots{display:flex;gap:4px;justify-content:center;padding:11px 0 9px} .dots i{width:4px;height:4px;border-radius:50%;background:var(--line)} .dots i.on{width:12px;border-radius:2px;background:var(--text-3)} /* ---------- 7. 快捷入口(首页已移除,样式先留着,别的页面要用再叫) ---------- */ .quick{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding:var(--pad)} .quick a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:11px 4px 9px;text-align:center} /* PNG 图示的墨框只占画布 78%,框要开大一点看起来才跟 SVG 一样大 */ .quick img{width:30px;height:30px;margin:0 auto 4px;object-fit:contain;display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} .quick svg{width:23px;height:23px;margin:0 auto 5px;display:block;color:var(--acc)} .quick b{display:block;font-size:10.5px;font-weight:700;color:var(--text-2)} /* ---------- 8. 厂商分类横条 ---------- */ .cats{padding:0 var(--pad)} .cat{flex:0 0 auto;width:78px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:10px 4px 9px;text-align:center;position:relative} .cat .ico{width:32px;height:32px;margin:0 auto 7px;border-radius:50%;background:var(--surface-2); display:grid;place-items:center;overflow:hidden} .cat .ico img{width:26px;height:26px;object-fit:contain} .cat b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.4px} .cat i{display:block;font-style:normal;font-size:9px;color:var(--text-3);margin-top:2px; letter-spacing:.2px} .cat.on{border-color:var(--navy);background:var(--navy);color:#fff} .cat.on i{color:rgba(255,255,255,.6)} .cat.on .ico{background:rgba(255,255,255,.12)} .cat .nw{position:absolute;top:-5px;right:4px;background:var(--acc);color:var(--acc-ink); font-size:8px;font-weight:900;padding:1px 5px;border-radius:var(--r-pill);letter-spacing:.3px} /* ---------- 9. 区块标题 ---------- */ .sec{padding:18px var(--pad) 0} .sec-h{display:flex;align-items:baseline;gap:8px;margin-bottom:10px} .sec-h b{font-size:13px;font-weight:800;letter-spacing:.6px} .sec-h .ct{font-size:10.5px;color:var(--text-3);font-weight:600} .sec-h .all{font-size:10.5px;color:var(--text-2);font-weight:600} /* ---------- 10. 游戏墙(纯图,不放游戏名) ---------- */ .grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)} .gcard{position:relative;border-radius:var(--r);overflow:hidden;display:block; background:var(--surface-2);box-shadow:var(--shadow)} /* 图现在包在 .gim 里(电脑版名字要写在图下面,所以图得自己一层)。 .fav / .tag 本来贴着 .gcard,改贴 .gim —— 手机版 .gim 就是整张卡,位置不变。 ※ 不要叫 .ph:那是手机版的页首(返回箭头 + 标题),有 padding:12px 14px, 用同名 class 会让图片四周凭空缩一圈。 */ .gcard .gim{display:block;position:relative} .gcard .th{width:100%;aspect-ratio:3/4;object-fit:cover} .gcard .fav{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%; background:rgba(8,14,28,.42);display:grid;place-items:center;font-size:10px;color:#fff; backdrop-filter:blur(2px)} .gcard .fav.on{color:var(--acc-2)} .gcard .tag{position:absolute;top:4px;left:4px;font-size:8px;font-weight:900;color:#fff; padding:1px 5px;border-radius:3px;background:#E0352F;letter-spacing:.4px} .gcard .tag.new{background:#128C4B} .grow .track{padding-right:var(--pad);margin-right:calc(var(--pad) * -1)} .grow .gcard{flex:0 0 92px} /* ---------- 11. 底部 tabbar ---------- */ .tabbar{position:absolute;left:0;right:0;bottom:0;height:var(--tab-h);background:var(--tabbar); border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr); align-items:center; /* 底部导览要高过页面所有卷动内容(卷动区是 isolation 的一层,z-index 当 0 看)。 translateZ(0) 让它自己成一个合成层,不会被卷动层盖过去。弹窗(80)还是要盖得过它 */ z-index:60;transform:translateZ(0)} .tabbar a{display:grid;justify-items:center;gap:3px;color:var(--tab-ink);font-size:9.5px; font-weight:700;letter-spacing:.2px} .tabbar a img{width:20px;height:20px;object-fit:contain;opacity:.4} .tabbar a.on{color:var(--tab-ink-on)} .tabbar a.on img{opacity:1} /* 中间那颗:淡蓝圆盘 + 一圈美术金属环(ring.png)。 环原本用 conic-gradient 画,换成美术图之后转折与星芒都真实得多。 */ .tabbar .mid{margin-top:-32px;position:relative} .tabbar .mid .bg{width:58px;height:58px;border-radius:50%;position:relative; background:linear-gradient(135deg,var(--acc-2),var(--acc));display:grid;place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.45);border:0} /* 细版金环:内径是外径的 93.8%,金边只有 %3 出头。 环给 62px → 洞 58.1px,圆盘给 58px 正好塞进洞里,金边约 1.9px。 (上一版的环内径只有外径的 59%,所以圆盘得缩到 46px —— 那版太粗了) */ .tabbar .mid .bg::before{content:'';position:absolute;left:50%;top:50%; width:62px;height:62px;transform:translate(-50%,-50%);z-index:1;pointer-events:none; background:url(img/nav/ring.png) center/100% 100% no-repeat; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))} .tabbar .mid .bg img{width:24px;height:24px;opacity:1} /* 环比圆盘大一圈(66 vs 46),下缘会多出 10px 压到字上。 所以字要多让 10px,整组再往上提 8px 把字拉回其他四格的高度。 */ .tabbar .mid span{margin-top:5px} /* ---------- 12. 浮动按钮 ---------- */ /* 两颗浮动钮原本直着叠、往上占掉 94px,把最後一段内容整个盖住(实测被盖住的 是「Inbox 3 unread」那一列、充值页那行提示)。改成横着排,只占 36px 高, 再配合下面 .scroll 的底部留白,内容就滑得出来了。 */ .float{position:absolute;right:12px;bottom:calc(var(--tab-h) + 10px); display:flex;flex-direction:row;gap:8px;z-index:59} .float button{width:36px;height:36px;border-radius:50%;background:var(--surface); box-shadow:var(--shadow-2);display:grid;place-items:center;font-size:13px; border:1px solid var(--line);color:var(--text-2)} .float .cs{background:var(--navy);color:#fff;border-color:transparent;font-size:15px} /* ---------- 13. 手机页脚 ---------- */ .foot{padding:24px var(--pad) 26px;text-align:center;color:var(--text-3);font-size:9.5px; line-height:1.8;border-top:1px solid var(--line-2);margin-top:20px} .foot .ps{width:82%;margin:0 auto 14px;opacity:.7} .foot .so{display:flex;gap:10px;justify-content:center;margin-bottom:12px} .foot .so img{width:22px;height:22px;opacity:.85} /* ---------- 14. 二级页通用 ---------- */ .ph{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--topbar); color:var(--topbar-ink)} .ph .bk{font-size:15px;width:16px;opacity:.85} .ph b{flex:1;font-size:13.5px;font-weight:800;letter-spacing:.3px} .ph .rt{font-size:11px;opacity:.75} .tabs{display:flex;gap:18px;overflow-x:auto;padding:0 var(--pad);background:var(--surface); border-bottom:1px solid var(--line);scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs a{flex:0 0 auto;padding:12px 0 10px;color:var(--text-2);font-size:12.5px;font-weight:700; border-bottom:2px solid transparent} .tabs a.on{color:var(--text);border-bottom-color:var(--acc)} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); margin:var(--pad) var(--pad) 0;overflow:hidden} .card .bd{padding:14px} .row{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--line-2)} .row:last-child{border-bottom:0} .row .ico{width:28px;height:28px;border-radius:8px;background:var(--surface-2);display:grid; place-items:center;font-size:13px;flex:0 0 auto} .row .lb{font-size:12.5px;font-weight:700} .row .sub{font-size:10.5px;color:var(--text-3);margin-top:2px} .row .ar{color:var(--text-3);font-size:12px} .row .vl{font-weight:800;font-size:12.5px} .mut{color:var(--text-3);font-size:10.5px;letter-spacing:.3px} .amt{font-size:22px;font-weight:800;letter-spacing:-.2px;margin-top:2px} .btn{display:block;width:100%;text-align:center;background:var(--navy);color:#fff; font-weight:800;font-size:13px;padding:12px;border-radius:var(--r);letter-spacing:.3px} .btn.gd{background:linear-gradient(135deg,var(--acc-2),var(--acc));color:var(--acc-ink)} .btn.gh{background:none;border:1px solid var(--line);color:var(--text-2)} .btn-s{font-size:11px;font-weight:800;padding:6px 14px;border-radius:var(--r-pill); background:var(--navy);color:#fff;white-space:nowrap} .btn-s.gh{background:none;border:1px solid var(--line);color:var(--text-2)} .field{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r); padding:11px 13px;font-size:13px;color:var(--text);outline:none} .field::placeholder{color:var(--text-3)} .chips{display:flex;flex-wrap:wrap;gap:var(--gap)} .chips button{flex:1 0 28%;border:1px solid var(--line);background:var(--surface); border-radius:var(--r);padding:11px 4px;font-size:12.5px;font-weight:700;color:var(--text-2)} .chips button.on{border-color:var(--navy);background:var(--navy);color:#fff} .pill{display:inline-block;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:3px; background:var(--surface-2);color:var(--text-2);letter-spacing:.3px} .pill.b{background:rgba(36,86,206,.1);color:var(--brand)} .pill.d{background:rgba(224,53,47,.1);color:#E0352F} .pill.g{background:rgba(18,140,75,.1);color:#128C4B} .pill.o{background:rgba(201,162,39,.14);color:#9C7C12} /* 活动列表 */ .pm{margin:var(--pad) var(--pad) 0;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .pm img{width:100%;aspect-ratio:366/150;object-fit:cover} .pm .ft{display:flex;align-items:center;gap:10px;padding:11px 13px} .pm .ft b{display:block;font-size:12.5px} .pm .ft i{display:block;font-style:normal;font-size:10px;color:var(--text-3);margin-top:2px} #toast{position:fixed;left:50%;top:64px;transform:translateX(-50%);background:var(--navy);color:#fff; font-size:12px;padding:8px 16px;border-radius:var(--r-pill);opacity:0;transition:.2s;z-index:200; pointer-events:none;box-shadow:var(--shadow-2)} #toast.on{opacity:1} /* ========================================================= 电脑版 ========================================================= */ .pc{background:var(--app);min-height:100vh} /* 1280 在 1900 的萤幕上两边会各空掉 300px,像贴在中间的一张卡。 放宽到 1760,再配合下面的栏数断点 —— 版面撑满,游戏卡却不会被拉肥。 */ :root{--ctr-max:1760px; --ctr-pad:24px; --rail-w:228px; --rail-gap:34px; --hd-h:74px; --sub-h:42px} .ctr{max-width:var(--ctr-max);margin:0 auto;padding:0 var(--ctr-pad)} /* 栏数维持 6 —— 试过在宽萤幕加到 7、8 栏,但每一区的游戏笔数是固定的(单区 6 款), 栏数一加右边就空一排洞。宽度给出去之后卡片自己会从 205px 长到 245px,这样就够了。 */ /* 顶栏。--devbar-h 是上面那条设计审查工具列的高度;正式包里工具列没了, ship.py 会把它改成 0,顶栏就贴着画面顶端钉住。 */ :root{--devbar-h:42px} .hd{background:var(--topbar);color:var(--topbar-ink); position:sticky;top:var(--devbar-h);z-index:30; border-bottom:1px solid rgba(255,255,255,.07)} .hd .ctr{display:flex;align-items:center;gap:0;height:var(--hd-h);min-width:0} /* LOGO 占满左边那一栏 —— 跟底下的侧轨同宽、同一条左缘, 右边接着就是 nav,起点跟主内容的左缘对齐(都是 228 + 34)。 ※ 原图四周有一大圈透明留白(档案 480x169,字只有 446x96), 所以以前写 height:38px 实际只看到 21px 的字 —— 已经把留白裁掉了。 */ .hd .logo{flex:0 0 var(--rail-w);width:var(--rail-w);height:auto; margin-right:var(--rail-gap)} /* 顶栏这排分类:带图示、字放大到 14.5(原本 13 的纯文字)。 分隔线用 ::after 画,不用 border-right —— border 会跟底下那条选中线打架。 */ /* nav 吃掉中间所有剩余宽度,九个项目平分 —— 原本挤在 logo 旁边,右边空一大片。 ※ logo 与 .rt 之间还夹着一个 .sp 弹性撑杆,它会先把剩余宽度吃光, nav 的 flex:1 就形同虚设 —— 在顶栏里把它归零。 */ .hd .ctr>.sp{flex:0 0 0;width:0} .hd nav{display:flex;gap:0;align-items:center;height:100%;min-width:0; flex:1;margin-right:22px; /* 放不下时不能用 overflow:hidden —— 以前 1440 宽的英文版 Agent 就整个被裁掉看不到。 先靠下面的 @media 缩字 / 缩图示;真的还不够(例如 Tagalog 在 1280)就让这排横向滑动 */ overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain} .hd nav::-webkit-scrollbar{display:none} /* flex:1 1 auto(不是 1 1 0):多出来的宽度平分,但不会压缩到比文字本身还窄 —— 压过头的话最後几项会黏在一起、中间的分隔线也会消失。 */ .hd nav a{font-size:14.5px;font-weight:700;letter-spacing:.2px;opacity:.78;display:flex; align-items:center;justify-content:center;gap:7px;height:100%;padding:0 10px; position:relative;border-bottom:2px solid transparent;white-space:nowrap; flex:1 1 auto;min-width:max-content} .hd nav a+a::after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:16px;background:rgba(255,255,255,.14)} .hd nav a img{width:23px;height:23px;object-fit:contain;display:block;flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} .hd nav a svg{width:17px;height:17px;display:block;flex:0 0 auto;color:var(--acc)} .hd nav a b{font-weight:700} .hd nav a.on,.hd nav a:hover{opacity:1} .hd nav a.on{border-bottom-color:var(--acc)} @media (max-width:1680px){ .hd nav a{font-size:13.5px;padding:0 8px;gap:6px} .hd nav a img{width:20px;height:20px} } @media (max-width:1440px){ .hd .logo{flex-basis:188px;width:188px;margin-right:18px} .hd nav{margin-right:14px} .hd nav a{font-size:13px;padding:0 7px;gap:5px} } .hd .rt{display:flex;align-items:center;gap:10px;flex:0 0 auto} .hd .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);display:grid; place-items:center;font-size:13px} .hd .lang{font-size:11.5px;opacity:.6;font-weight:600} /* 公告条 */ /* 这条也要 sticky,贴在顶栏下面。 原本只有顶栏钉住、这条会卷走,侧栏又是按「顶栏 + 这条」的高度去定位, 所以一往下滑,侧栏上面就凭空空出一块 —— 就是那格空白的来源。 */ .sub{background:var(--surface);border-bottom:1px solid var(--line); position:sticky;top:calc(var(--devbar-h) + var(--hd-h));z-index:29} .sub .ctr{display:flex;align-items:center;gap:14px;height:42px;font-size:11.5px;color:var(--text-2)} .sub .roll{flex:1;min-width:0;overflow:hidden;white-space:nowrap} .sub .roll span{display:inline-block;animation:roll 34s linear infinite} .sub .search{display:flex;align-items:center;gap:7px;background:var(--surface-2); border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;width:220px; color:var(--text-3);font-size:11.5px} /* 主体两栏 */ /* 最後那一栏 84px 是留给之后的悬浮轮盘 / 活动挂件的,现在先空着。 侧栏跟内容的间距也拉开到 26px,原本 22px 挤在一起。 */ /* 侧栏已经改成 position:fixed(脱离版面流),所以这里不再有它那一栏, 改用 margin-left 把位置留出来。最后 84px 一样是留给之后的悬浮挂件。 */ .wrap{display:grid;grid-template-columns:1fr 84px;gap:var(--rail-gap);padding:22px 0 40px; margin-left:calc(var(--rail-w) + var(--rail-gap))} /* 侧栏钉住。top 要扣掉工具列 + 顶栏 62 + 副栏 42,正式包工具列是 0。 ※ 侧栏一定要比画面矮,否则 sticky 根本钉不住 —— 这就是拿掉 Providers 那块的原因。 */ /* 侧栏钉住、而且「不自己卷」—— 侧栏只剩 11 颗功能钮(约 640px),本来就装得下, 所以不给 overflow。分类搬去顶栏、厂商搬去主区 chips 之后才做得到这件事。 */ /* 左侧是一条「固定的侧轨」,不是会跟着卷的区块: 从顶栏下缘一路到画面底,永远在原地,页尾也是从它右边开始 —— 跟 639 一样。 sticky 做不到这件事:sticky 只在自己的父层范围内有效,滑到页尾父层就结束了。 水平位置要自己算,因为 fixed 不认 .ctr 的置中: 画面够宽 → 内容区左缘 = (100vw - 1760)/2 + 24 画面较窄 → 就是 24(.ctr 的内距) 两者取大的那个。 */ .side{position:fixed;z-index:20;width:var(--rail-w); top:calc(var(--devbar-h) + var(--hd-h) + var(--sub-h));bottom:0; left:max(var(--ctr-pad), calc((100vw - var(--ctr-max)) / 2 + var(--ctr-pad))); padding:22px 0 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none} .side::-webkit-scrollbar{display:none} /* 侧轨自己的底。用 --surface —— 跟页尾同一块面板色。 本来用的是半透明深蓝,结果滑到页尾时左边会多出一条比页尾更暗的黑柱, 两块之间硬生生一道接缝。同色之后,到了页尾侧轨和页尾看起来就是连成一片的。 */ .side::before{content:'';position:fixed;z-index:-1; top:calc(var(--devbar-h) + var(--hd-h) + var(--sub-h));bottom:0; left:0;width:calc(max(var(--ctr-pad), calc((100vw - var(--ctr-max)) / 2 + var(--ctr-pad))) + var(--rail-w) + 17px); background:var(--surface); border-right:1px solid var(--line)} .side .blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;margin-bottom:12px} .side h5{margin:0;padding:12px 14px 8px;font-size:10px;font-weight:800;letter-spacing:1px; color:var(--text-3);text-transform:uppercase} .side a.v.big{font-size:13.8px;padding:9px 14px;font-weight:700} .side a.v.big .em img{width:24px;height:24px} .side h5{font-size:11px} .side a.v{display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:12.5px; font-weight:600;color:var(--text-2);border-left:2px solid transparent} .side a.v img{width:20px;height:20px;object-fit:contain} .side a.v .em{width:20px;text-align:center;font-size:13px} .side a.v .cnt{margin-left:auto;font-size:10px;color:var(--text-3);font-weight:600} .side a.v:hover{background:var(--surface-2);color:var(--text)} .side a.v.on{background:var(--surface-2);color:var(--text);border-left-color:var(--acc); font-weight:800} /* PC banner */ .wrap>main{min-width:0} .phero{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:14px;min-width:0} .phero .big{min-width:0;display:block} /* 2/1 在宽萤幕上会高到 750px,一进站只看得到一张海报。 2.55/1 之后首屏就看得到下面的游戏了。 */ .phero .big img{width:100%;height:auto;aspect-ratio:2.55/1;object-fit:cover; border-radius:var(--r)} .phero .col{display:grid;grid-template-rows:1fr 1fr;gap:12px;min-width:0;min-height:0} /* 右边那两张的高度要跟着左边那张走,不能反过来。 原本右边的 会用自己的原始比例撑出 401px,左边那张只有 349 —— 下面就差了 52px。 把右边的图改成绝对定位,它就不再撑高度了,整列的高度只由左边那张(2.55/1)决定,两边自然切齐。 */ .phero .col a{display:block;min-width:0;min-height:0;overflow:hidden;border-radius:var(--r); position:relative} .phero .col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* 中奖滚动 */ .winbar{display:flex;align-items:center;gap:10px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);padding:0 14px;height:42px; font-size:11.5px;color:var(--text-2);margin-bottom:16px;overflow:hidden} .winbar .lb{font-size:10px;font-weight:800;letter-spacing:.8px;color:var(--text-3); text-transform:uppercase;flex:0 0 auto} .winbar .roll{flex:1;min-width:0;overflow:hidden;white-space:nowrap} .winbar .roll span{display:inline-block;animation:roll 40s linear infinite} .winbar .roll em{font-style:normal;color:var(--acc);font-weight:800} /* PC 分类 chips */ .pchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .pchips a{display:inline-flex;align-items:center;gap:6px; padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line); background:var(--surface);font-size:12px;font-weight:700;color:var(--text-2)} .pchips a i{font-style:normal;font-size:10px;font-weight:700;color:var(--text-3)} .pchips a.on i{color:rgba(255,255,255,.66)} .pchips a.on{background:var(--navy);border-color:var(--navy);color:#fff} /* PC 区块标题 */ .psec{margin-bottom:24px} .psec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px; border-bottom:1px solid var(--line);padding-bottom:10px} .psec-h b{font-size:15px;font-weight:800;letter-spacing:.5px} .psec-h .ct{font-size:11px;color:var(--text-3);font-weight:600} .psec-h .all{font-size:11.5px;color:var(--text-2);font-weight:600} .psec-h img{width:18px;height:18px;object-fit:contain} /* PC 游戏墙。 卡片原本一排 6 张、每张 245px —— 在 1920 的萤幕上一张图快跟手机一样大了, 太抢戏。改成一排 8 张(约 180px),跟 639 的量体差不多, 并且把游戏名写在图下面常驻 —— 缩小之后光看图认不出是哪一款。 */ /* ※ 一定要 minmax(0,1fr),不能只写 1fr。 1fr 的最小值是 auto,会被图片的原始宽度撑开 —— 每一栏因此宽度不一样, 游戏名就一行高一行低,看起来像没对齐(实测栏宽跑出 160/143/153/120/135)。 */ .pgrid{display:grid;grid-template-columns:repeat(var(--pcols),minmax(0,1fr));gap:14px 12px} .pgrid .gcard{border-radius:0;background:transparent;box-shadow:none;overflow:visible} /* 图框自己定比例(3:4),图片填满它。 不要靠 的 aspect-ratio 去撑框 —— 那样图会照自己的原始比例缩, 框里四周就会留白(实测 158 宽的框里图只有 130)。 */ .pgrid .gcard .gim{border-radius:var(--r);overflow:hidden;background:var(--surface-2); box-shadow:var(--shadow);aspect-ratio:3/4} .pgrid .gcard .th{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block} .pgrid .gcard .cap{display:block;margin-top:7px;font-size:11.5px;font-weight:600; color:var(--text-2);text-align:center;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pgrid .gcard:hover .cap{color:var(--text)} .pgrid .gcard .fav{width:20px;height:20px;font-size:11px;top:6px;right:6px} .pgrid .gcard .tag{top:6px;left:6px;font-size:9px} .pgrid .gcard .hv{position:absolute;inset:0;background:rgba(10,16,32,.55);opacity:0; display:grid;place-items:center;transition:.16s} .pgrid .gcard:hover .hv{opacity:1} .pgrid .gcard .hv .pl{width:38px;height:38px;border-radius:50%; background:linear-gradient(135deg,var(--acc-2),var(--acc));color:var(--acc-ink); display:grid;place-items:center;font-size:13px} .more{display:block;width:220px;margin:22px auto 0;text-align:center;padding:11px; border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface); font-size:12.5px;font-weight:700;color:var(--text-2)} /* PC 两栏内容页 */ .two{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start} .pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;margin-bottom:16px} .pcard>h4{margin:0;padding:14px 18px;font-size:13.5px;font-weight:800;letter-spacing:.3px; border-bottom:1px solid var(--line-2)} .pcard .bd{padding:18px} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px} .kpi .mut{display:block;margin-bottom:6px} .kpi b{font-size:22px;font-weight:800;letter-spacing:-.3px} /* PC 表格 */ table.tb{width:100%;border-collapse:collapse;font-size:12.5px} table.tb th{text-align:left;padding:11px 18px;font-size:10.5px;font-weight:800;letter-spacing:.6px; color:var(--text-3);text-transform:uppercase;border-bottom:1px solid var(--line); background:var(--surface-2)} table.tb td{padding:13px 18px;border-bottom:1px solid var(--line-2)} table.tb tr:last-child td{border-bottom:0} /* PC 活动列表 */ /* 优惠列表:一排三张。 ※ 图片一定要用原图比例(732x320 = 2.29),不要自己订 aspect-ratio —— 原本写死 2/1 配 object-fit:cover,左右两边会被切掉, 「1ST DEPOSIT」就变成「ST DEPOSIT」、右边那张的日历也被切一半。 卡片资讯区改两行(标题+说明 / 状态+按钮),高度约 100px, 加上图 189px,一张卡约 290 —— 一屏(约 760)刚好看到两排半。 */ .pml{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .pml .it{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column} .pml .it img{width:100%;height:auto;aspect-ratio:732/320;object-fit:contain;display:block} /* 资讯条压成一行(约 62px)。上下两行排的时候要 100px,卡片就太厚了。 */ .pml .it .ft{display:flex;align-items:center;gap:9px;padding:11px 14px;flex:1; /* 卡片窄(1280 三栏)+ 文案长(Tagalog)时,按钮换到下一行,标题才不会被挤到装不下 */ flex-wrap:wrap} .pml .it .ft .sp{flex:1 1 150px;min-width:0} /* 标题 / 说明可以换行 —— 原本截成 …,英文就有三张看不完整,Tagalog 更多 */ .pml .it .ft b{display:block;font-size:13px;line-height:1.3} .pml .it .ft i{display:block;font-style:normal;font-size:10.5px;color:var(--text-3);margin-top:3px; line-height:1.4} .pml .it .ft .pill{flex:0 0 auto} .pml .it .ft .btn-s{flex:0 0 auto;padding:7px 13px;font-size:11.5px} /* PC 页脚 */ /* 侧栏钉住之后,页尾左边会露出一块「侧栏下面的空地」,文字贴着最左边看起来是歪的。 把页尾整块往右缩到跟主内容同一条起跑线(侧栏 228 + 间距 26)。 */ .pfoot .ctr{padding-left:calc(var(--rail-w) + var(--rail-gap) + var(--ctr-pad))} .pfoot{background:var(--surface);border-top:1px solid var(--line);margin-top:20px; padding:34px 0 26px;color:var(--text-3);font-size:11.5px} .pfoot .cols{display:grid;grid-template-columns:repeat(4,1fr) 1.3fr;gap:26px; padding-bottom:26px;border-bottom:1px solid var(--line-2)} .pfoot h6{margin:0 0 12px;font-size:10px;font-weight:800;letter-spacing:1px;color:var(--text-2); text-transform:uppercase} .pfoot .cols a{display:block;padding:4px 0;color:var(--text-3)} .pfoot .cols a:hover{color:var(--text-2)} /* 厂商标:维持 3x2 的排法,整块置中 —— 不是排成一横排。 原本是一张拼图配 max-width:430,只能贴在页尾最左边。 */ .pfoot .pt{padding:30px 0;border-bottom:1px solid var(--line-2); display:grid;grid-template-columns:repeat(3,minmax(0,150px)); justify-content:center;justify-items:center;align-items:center;gap:34px 72px} .pfoot .pt img{width:auto;height:38px;max-width:100%;object-fit:contain;opacity:.55} .pfoot .pt img:hover{opacity:.85} .pfoot .bt{padding-top:20px;display:flex;align-items:center;gap:14px} .pfoot .bt .so{display:flex;gap:8px} .pfoot .bt .so img{width:22px;height:22px;opacity:.75} /* ========================================================= 15. 立体系统(2026-09-24) Chloe:「颜色搭配要有质感 还有立体的感觉 不能像平面一样」 立体不是靠渐层深浅,是靠四件事同时成立: ① 顶缘一道内高光(受光面) ② 底缘一道内暗边(背光面) ③ 一条「硬底边」0 4px 0 —— 这一笔才会让人觉得它有厚度、按得下去 ④ 一层落地阴影(物件与底面的距离) 四个变数由各皮肤自己给:--btn-top / --btn-bottom / --btn-shadow / --glint ========================================================= */ /* 页面底层的环境光。没有这一层,深色底会是一片死黑,所有卡片都浮不起来 */ body{background-image:var(--canvas);background-attachment:fixed} /* ---- 会被按的东西:主按钮、存款钮、选中的分类与筹码、tabbar 中间那颗 ---- */ /* .btn-dep:not(.ico) —— cash in 那颗用的是小猪美术图,自带白底盘, 再套一层蓝色按钮底会变成「盘中盘」 */ .btn:not(.gh),.btn-s:not(.gh),.btn-dep:not(.ico),.cat.on,.chips button.on,.pchips a.on,.float .cs{ background:linear-gradient(180deg,var(--btn-top) 0%,var(--brand) 45%,var(--btn-bottom) 100%) !important; border:1px solid rgba(255,255,255,.30); box-shadow:inset 0 2px 1px var(--glint), inset 0 -3px 5px rgba(0,0,0,.20), 0 4px 0 rgba(0,0,0,.18), 0 7px 11px var(--btn-shadow); color:var(--brand-ink) !important; text-shadow:0 1px 1px rgba(0,0,0,.28); transition:transform .16s,box-shadow .16s,filter .16s; } .btn:not(.gh):hover,.btn-dep:hover,.float .cs:hover{transform:translateY(-2px);filter:brightness(1.07)} .btn:not(.gh):active,.btn-dep:active,.chips button.on:active,.cat.on:active{ transform:translateY(2px); box-shadow:inset 0 2px 5px rgba(0,0,0,.32),0 2px 4px var(--btn-shadow)} .cat.on i,.cat.on .ico{color:rgba(255,255,255,.72)} .cat.on .ico{background:rgba(255,255,255,.16)} /* ---- 会被看的东西:卡片、游戏格、区块 ---- */ .gcard,.card,.sec,.blk,.panel,.action,.mrow,.srow{ box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 4px 10px var(--shade)} .gcard{transition:transform .18s,box-shadow .18s} .gcard:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 20px var(--shade)} /* 顶栏 / 电脑顶栏:底下收一条亮色细线,跟内容分层。 ※ 这里只能给 background,千万不要写 position —— 电脑顶栏是 sticky 的, 写 position:relative 会把 sticky 盖掉,往下滑顶栏就跟着不见了。 */ .top,.hd{background:var(--topbar)} .top::after,.hd::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,var(--acc) 22%,var(--acc-2) 50%, var(--acc) 78%,transparent);opacity:.55} /* 余额药丸:内凹,跟凸起的按钮做出对比 */ .bal{box-shadow:inset 0 1px 3px rgba(0,0,0,.30),inset 0 -1px 0 rgba(255,255,255,.10)} /* Banner 与游戏图:加内缘高光,免得图边缘直接切在底色上 */ .ban img,.gcard img,.banner img{display:block} .ban,.banner{position:relative;border-radius:var(--r-lg);overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 9px 24px var(--shade)} /* ---------- 16. 电脑侧栏:图示胶囊列 ---------- Chloe:「不要都是纯文字 不好看」。改成「图示 + 粗体字」的胶囊, 存 / 提两颗用高亮渐层(最常点的),其余一般,客服那三颗再降一级。 图示现在是内嵌 SVG,正式 3D 图示回来后换 即可,版面不用动。 */ .side .qnav{display:grid;gap:9px;margin-bottom:12px} /* 钮要有厚度(上下 12px、图示 32px)。 中间一度为了把分类也塞进侧栏而压到 8px,结果钮变得又扁又长、下面还空一大块; 分类搬去顶栏之后就没有这个压力了,厚度加回来。 */ .side .qn{display:flex;align-items:center;gap:11px;padding:12px 13px; border-radius:var(--r-lg);font-size:13px;font-weight:800;color:var(--text); text-decoration:none; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 3px 8px var(--shade); transition:transform .16s,filter .16s} .side .qn:hover{transform:translateY(-1px);filter:brightness(1.06)} .side .qn i{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center; color:var(--acc)} .side .qn i svg{width:100%;height:100%;display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))} .side .qn i img{width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))} .side .qn b{font-weight:800;letter-spacing:.2px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .side .qn s{margin-left:auto;text-decoration:none;color:var(--text-3);font-size:13px} /* 高亮那两颗:跟主按钮同一套立体写法 */ .side .qn.hi{color:var(--brand-ink);border-color:rgba(255,255,255,.30); background:linear-gradient(180deg,var(--btn-top) 0%,var(--brand) 45%,var(--btn-bottom) 100%); box-shadow:inset 0 2px 1px var(--glint),inset 0 -3px 5px rgba(0,0,0,.20), 0 4px 0 rgba(0,0,0,.18),0 7px 11px var(--btn-shadow); text-shadow:0 1px 1px rgba(0,0,0,.28)} .side .qn.hi i{color:#fff} .side .qn.hi:active{transform:translateY(2px); box-shadow:inset 0 2px 5px rgba(0,0,0,.32),0 2px 4px var(--btn-shadow)} /* 客服那一组:没有底、只有描边,视觉上降一级 */ .side .qn.g{background:none;box-shadow:none;border-color:var(--line-2); color:var(--text-2);font-weight:700} .side .qn.g i{color:var(--text-2)} /* 环境光要能透到画面上 —— .pc / .app 这两个外壳原本各自铺了一层 --page 的实色,把 body 的光晕整片盖掉了。 改成透明,让底层那两颗光晕露出来。 量出来的目标:空白处不能是死平的,要像设计稿那样在 27~46 之间浮动。 */ .pc,.app{background:transparent !important} body{background-image:var(--canvas)!important;background-attachment:fixed; background-repeat:no-repeat} /* 分类 / tabbar 的图示。 ※ 尺寸要分开给:扁平 SVG 的墨几乎填满画布,3D PNG 的墨只占 78%, 同一个框下去,PNG 看起来会小一圈。所以 img 一律比 svg 大 4~6px。 */ .side a.v .em svg{width:20px;height:20px;display:block;color:var(--acc)} .side a.v .em img{width:26px;height:26px;display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} .side a.v .em{width:26px;height:26px;display:grid;place-items:center} .tabbar a svg{width:21px;height:21px;display:block;margin:0 auto 3px;color:currentColor} .tabbar a img{width:27px;height:27px;display:block;margin:0 auto 1px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} .tabbar a.on svg{color:var(--tab-ink-on)} /* 没选中的降一点透明度就够了。 一开始用 saturate(.55) 去饱和,结果压成灰的看起来像图坏掉,不像「没选中」。 */ .tabbar a:not(.on):not(.mid) img{opacity:.66} .tabbar .mid .bg svg{width:24px;height:24px;color:#fff;margin:0} /* 宝箱压在环上面一点(z-index 高于环),像是从框里满出来,比缩在洞里好看。 往上提 1.5px:量过这颗宝箱的实心重心在画布 130.9/256 的位置,比几何中心低 2.9px (箱体重、上面只有薄薄的开盖),换算到 62px 是低 0.7px; 再加上底下那道投影也把视觉重心往下拉,所以补到 1.5px 才真的在圈圈正中间。 */ .tabbar .mid .bg img{width:62px;height:62px;margin:0;position:relative;z-index:2; transform:translateY(-1.5px); filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))} /* ---------- 19. VIP 卡(手机「我的」页顶端) ---------- */ /* 原本是一张跟下面选单一模一样的灰卡,VIP 3 只是一颗小药丸, 「还差 ₱58,000 升 VIP4」是一行读不到的灰字。 这里做三件事:① 卡本身带金色调,跟下面的功能列拉开层级 ② VIP 等级做成有厚度的金色徽章 ③ 升级进度改成看得到的进度条 —— 这是这张卡最该讲清楚的事 */ .vipcard{margin:var(--pad);border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(135deg,#1B3163 0%,#16294F 52%,#1E2F52 100%); border:1px solid rgba(231,184,75,.30); box-shadow:0 8px 20px rgba(5,12,28,.45),inset 0 1px 0 rgba(255,255,255,.10)} .vipcard .vhd{display:flex;align-items:center;gap:11px;padding:14px 15px 12px} .vipcard .av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid; place-items:center;background:radial-gradient(circle at 50% 30%,#24437F,#111F3C); box-shadow:0 0 0 2px rgba(231,184,75,.75),0 3px 8px rgba(0,0,0,.45)} .vipcard .av img{width:34px;height:34px;object-fit:contain;display:block} .vipcard .nm{font-size:15px;font-weight:800;letter-spacing:.2px} .vipcard .uid{font-size:11px;color:var(--text-3);margin-top:2px} /* 徽章 / 进度条 / 进度文字是通用零件 —— 手机 VIP 卡和电脑版弹窗都在用, 所以不能限定在 .vipcard 底下(限定过一次,结果弹窗里的徽章变成一行纯文字、 进度条整条不见、两个金额挤成一坨)。 */ .vbadge{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:3px; padding:5px 11px;border-radius:var(--r-pill); background:linear-gradient(180deg,#F6DE94 0%,#E0AE3F 46%,#A9741C 100%); color:#2A1B02;font-size:10.5px;font-weight:900;letter-spacing:.8px; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 2px 0 rgba(0,0,0,.22), 0 4px 8px rgba(120,82,12,.45)} .vbadge b{font-size:14px;font-weight:900;letter-spacing:0} .vipcard .vprog{padding:0 15px 13px} .vbar{height:7px;border-radius:99px;background:rgba(6,14,32,.55);overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.45)} .vbar i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#C9932E,#F6DE94 60%,#FFF3D0); box-shadow:0 0 8px rgba(231,184,75,.55)} .vlb{display:flex;justify-content:space-between;gap:10px;margin-top:7px; font-size:10.5px;color:var(--text-3)} .vlb b{color:var(--acc-2);font-weight:800} .vipcard .vwal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px; padding:13px 15px 15px; /* 余额独占一行,两颗按钮等宽排在下面 —— 原本三个挤一排,Tagalog 的 Mag-deposit 一变长 余额就被挤到只剩「₱2,800.」。改成上下两层,任何语言、任何按钮长度都放得下 */ border-top:1px solid rgba(255,255,255,.08);background:rgba(6,14,32,.22)} .vipcard .vwal .sp{grid-column:1/-1} .vipcard .vwal .btn-s{text-align:center;padding:9px 10px} .vipcard .vwal .amt{font-size:23px;white-space:nowrap;font-weight:800;letter-spacing:-.4px;margin-top:3px} .vipcard .vwal .mut{font-size:10.5px} /* ---------- 20. 侧栏可展开的中心(Member Center / Game Center) ---------- */ /* 639 是把子选单塞在那颗钮底下往下推。我们照同一个动线,但做得有层次: 子选单缩排、左边一条细导引线、底色比主钮暗一阶 —— 一眼看得出是「谁的下一层」。 */ .side .grp{display:block} .side .qn.tg s{margin-left:auto;text-decoration:none;color:var(--text-3);font-size:13px; transition:transform .2s} .side .grp.open .qn.tg s{transform:rotate(180deg);color:var(--acc)} .side .grp.open .qn.tg{border-color:rgba(150,196,255,.42)} /* 收合用 grid-template-rows 0fr→1fr,才能对「高度未知」的内容做动画 */ .side .sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease; overflow:hidden} .side .grp.open .sub{grid-template-rows:1fr} .side .sub>*{min-height:0} .side .sub-in{padding:5px 0 3px 15px;margin:4px 0 2px 16px;position:relative} /* 左边那条导引线 */ .side .sub-in::before{content:'';position:absolute;left:0;top:4px;bottom:8px;width:2px; border-radius:2px;background:linear-gradient(180deg,var(--acc),rgba(150,196,255,.12))} .side a.sb{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px; font-size:12.5px;font-weight:600;color:var(--text-2);position:relative} .side a.sb i{width:20px;height:20px;flex:0 0 auto;display:grid;place-items:center} .side a.sb i svg{width:16px;height:16px;display:block;color:var(--acc)} .side a.sb i img{width:20px;height:20px;object-fit:contain;display:block} .side a.sb b{font-weight:600} .side a.sb:hover{background:rgba(150,196,255,.10);color:var(--text)} /* ---------- 21. 质感:同样是藏青,但要分层 ---------- */ /* 问题不是「用了藏青」,是整片主内容量出来只有两个色:#13274A 占 754k px²、#17305C 占 51k。 一片同色就没有前後,看起来才会平。做法不是换色系,是在藏青上加三件事: ① 每一块该有的重点给它自己的色温(金 / 蓝 / 绿 / 紫),只用在数字与光晕上 ② 每一块面板都有「上缘一道亮、整体一点渐层」,不是纯色填满 ③ 重要的那一块(推荐连结)用金色调拉出来 */ .kpis .kpi{position:relative;overflow:hidden; background:linear-gradient(160deg,var(--surface-2),var(--surface) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 16px rgba(5,12,28,.35)} /* 色光放右上角那块空白 —— 原本放左上角,正好压在「Claimable today」这行字底下, 字被冲淡、变得不好读。右上角本来就没东西,光摆那里最乾净。 */ .kpis .kpi::before{content:'';position:absolute;right:-34px;top:-48px;width:160px;height:116px; border-radius:50%;filter:blur(28px);opacity:.58;pointer-events:none} .kpis .kpi::after{content:'';position:absolute;left:0;right:0;top:0;height:2px} .kpis .kpi b{position:relative;display:block;margin-bottom:5px} .kpis .kpi .sp2{display:block;font-style:normal;font-size:10.5px;color:var(--text-3)} .kpis .kpi.au::before{background:#E7B84B} .kpis .kpi.au::after{background:linear-gradient(90deg,#F6DE94,#C9932E)} .kpis .kpi.au b{color:#FFDF9E} .kpis .kpi.bl::before{background:#5B98EE} .kpis .kpi.bl::after{background:linear-gradient(90deg,#9CC6FF,#3877D3)} .kpis .kpi.bl b{color:#C3DEFF} .kpis .kpi.gr::before{background:#2FB37A} .kpis .kpi.gr::after{background:linear-gradient(90deg,#7BE3B4,#17915A)} .kpis .kpi.gr b{color:#8FE9BE} .kpis .kpi.vi::before{background:#8E7BE8} .kpis .kpi.vi::after{background:linear-gradient(90deg,#C0B4FF,#6B57C9)} .kpis .kpi.vi b{color:#CFC6FF} /* 面板:上缘一道亮、往下一点渐层。纯色填满就是平的来源 */ .pcard{background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 46%); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 18px rgba(5,12,28,.32)} .pcard>h4{background:linear-gradient(180deg,rgba(150,196,255,.08),transparent)} /* 推荐连结那一块:金色调,是这一页最该被按的东西 */ .pcard.feat{border-color:rgba(231,184,75,.34); background:linear-gradient(180deg,rgba(231,184,75,.10) 0%,var(--surface) 52%)} .pcard.feat>h4{border-bottom-color:rgba(231,184,75,.22); background:linear-gradient(180deg,rgba(231,184,75,.12),transparent)} .pcard .bd.rl{display:flex;gap:12px;align-items:center} .pcard .bd.rl .field{flex:1;min-width:0;border-style:dashed; border-color:rgba(231,184,75,.42);background:rgba(6,14,32,.45); box-shadow:inset 0 1px 3px rgba(0,0,0,.35);color:var(--acc-2);font-weight:700;letter-spacing:.2px} .pcard .bd.rl .btn-s{flex:0 0 auto} .btn-s.gold{background:linear-gradient(180deg,#F6DE94 0%,#E0AE3F 46%,#A9741C 100%)!important; color:#2A1B02!important;border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 3px 0 rgba(0,0,0,.2), 0 5px 10px rgba(120,82,12,.4);text-shadow:none} /* 表格:表头压深、隔行淡一层、佣金那一栏用金色 —— 一眼找得到钱在哪 */ table.tb th{background:rgba(6,14,32,.38)} table.tb tr:nth-child(even) td{background:rgba(150,196,255,.035)} table.tb td:last-child{color:#FFDF9E} /* ---------- 22. 个人中心弹窗 ---------- */ /* 639 那个是白底配蓝色左栏,在深色站上像贴了一张纸上去。 我们的:跟整站同一套藏青,顶上一条金色细线当「浮起来的面板」的记号, 左边导览、右边内容,背景压暗 + 模糊,视线自然落在弹窗上。 */ .modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px; background:rgba(4,10,24,.68);backdrop-filter:blur(7px); animation:mfade .16s ease} .modal[hidden]{display:none} @keyframes mfade{from{opacity:0}to{opacity:1}} .modal .sheet{width:min(1120px,100%);height:min(720px,86vh);display:grid; grid-template-columns:236px 1fr;overflow:hidden;position:relative; border-radius:16px;border:1px solid var(--line); background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 34%); box-shadow:0 30px 80px rgba(2,6,18,.68),inset 0 1px 0 rgba(255,255,255,.07); animation:mpop .18s cubic-bezier(.34,1.4,.64,1)} @keyframes mpop{from{transform:translateY(10px) scale(.985);opacity:0} to{transform:none;opacity:1}} /* 顶上那条金线 */ .modal .sheet::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2; background:linear-gradient(90deg,transparent,#C9932E 18%,#F6DE94 50%,#C9932E 82%,transparent)} .modal .mside{background:rgba(6,14,32,.42);border-right:1px solid var(--line-2); padding:20px 12px;overflow-y:auto;scrollbar-width:none} .modal .mside::-webkit-scrollbar{display:none} .modal .mside h5{margin:0 0 14px;padding:0 12px;font-size:15px;font-weight:800; letter-spacing:.3px;color:var(--text)} .modal a.mv{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px; font-size:12.5px;font-weight:700;color:var(--text-2);margin-bottom:3px; border-left:2px solid transparent} .modal a.mv i{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center} .modal a.mv i svg{width:17px;height:17px;display:block;color:var(--acc)} .modal a.mv i img{width:22px;height:22px;object-fit:contain;display:block} .modal a.mv:hover{background:rgba(150,196,255,.09);color:var(--text)} .modal a.mv.on{background:linear-gradient(90deg,rgba(231,184,75,.20),rgba(231,184,75,.04)); border-left-color:#E7B84B;color:#FFDF9E} .modal .mmain{display:flex;flex-direction:column;min-width:0} .modal .mhd{display:flex;align-items:center;gap:12px;padding:16px 20px; border-bottom:1px solid var(--line-2);flex:0 0 auto} .modal .mhd b{font-size:15px;font-weight:800;letter-spacing:.3px} .modal .mx{width:30px;height:30px;border-radius:9px;display:grid;place-items:center; color:var(--text-3);font-size:13px;background:rgba(150,196,255,.07)} .modal .mx:hover{background:rgba(224,80,72,.18);color:#FFC9C6} .modal .mbd{flex:1;min-height:0;overflow-y:auto;padding:18px 20px 22px;scrollbar-width:thin} .modal .mbd section[hidden]{display:none} /* 筛选列 */ .mfil{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .mfil .seg{display:inline-flex;background:rgba(6,14,32,.45);border:1px solid var(--line-2); border-radius:var(--r-pill);padding:3px} .mfil .seg a{padding:5px 13px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700; color:var(--text-3)} .mfil .seg a.on{background:var(--brand);color:#fff} .mfil .dt{font-size:11.5px;color:var(--text-3);border:1px solid var(--line-2); border-radius:8px;padding:6px 12px;background:rgba(6,14,32,.35)} .mtot{margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2); font-size:12px;color:var(--text-3)} .mtot b{color:var(--text)} em.up{font-style:normal;font-weight:800;color:#6FE0A8} em.dn{font-style:normal;font-weight:800;color:#FF9B93} /* 帐户总览 */ .mprof{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-lg); margin-bottom:14px;border:1px solid rgba(231,184,75,.26); background:linear-gradient(135deg,rgba(231,184,75,.12),var(--surface-2) 58%)} .mprof .av{width:54px;height:54px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; background:radial-gradient(circle at 50% 30%,#24437F,#111F3C); box-shadow:0 0 0 2px rgba(231,184,75,.7),0 3px 9px rgba(0,0,0,.45)} .mprof .av img{width:38px;height:38px;object-fit:contain;display:block} .mprof .av svg{width:26px;height:26px;color:var(--acc)} .mprof .nm{font-size:16px;font-weight:800;display:flex;align-items:center;gap:9px} .mprof .uid{font-size:11.5px;color:var(--text-3);margin-top:3px} .mprof .bal2{text-align:right} .mprof .bal2 b{display:block;font-size:22px;font-weight:800;letter-spacing:-.3px;margin-top:3px} .mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .mgrid.four{grid-template-columns:repeat(4,1fr);margin-bottom:14px} .mtile{background:linear-gradient(160deg,var(--surface-2),var(--surface) 62%); border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;position:relative; overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .mtile b{display:block;font-size:16px;font-weight:800;margin:5px 0 4px} .mtile .sp2{display:block;font-style:normal;font-size:10.5px;color:var(--text-3)} .mtile.au b{color:#FFDF9E} .mtile.bl b{color:#C3DEFF} .mtile.gr b{color:#8FE9BE} .mtile.vi b{color:#CFC6FF} /* 彩金券 */ .vch{display:grid;gap:12px} .vc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r); border:1px solid rgba(231,184,75,.30); background:linear-gradient(100deg,rgba(231,184,75,.14),var(--surface-2) 52%)} .vc.off{border-color:var(--line);background:var(--surface-2)} .vc .amt{font-size:23px;font-weight:900;color:#FFDF9E;min-width:88px;letter-spacing:-.4px} .vc.off .amt{color:var(--text-2)} .vc .sp{flex:1;min-width:0} .vc b{display:block;font-size:13px} .vc i{display:block;font-style:normal;font-size:11px;color:var(--text-3);margin-top:3px} /* 站内信 */ .msgs{display:grid;gap:10px} .msg{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r); border:1px solid var(--line);background:var(--surface-2)} .msg:hover{background:var(--surface)} .msg .dot{width:8px;height:8px;border-radius:50%;background:#E0352F;flex:0 0 auto; box-shadow:0 0 7px rgba(224,53,47,.7)} .msg.rd .dot{background:var(--line);box-shadow:none} .msg b{display:block;font-size:12.5px;font-weight:700} .msg.rd b{font-weight:600;color:var(--text-2)} .msg i{display:block;font-style:normal;font-size:10.5px;color:var(--text-3);margin-top:3px} .msg .ar{color:var(--text-3);font-size:15px} /* VIP */ .vipbar{padding:16px 18px;border-radius:var(--r-lg);margin-bottom:16px; border:1px solid rgba(231,184,75,.26); background:linear-gradient(135deg,rgba(231,184,75,.11),var(--surface-2) 60%)} .vipbar .hd2{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:11.5px} .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .tier{padding:14px 16px;border-radius:var(--r);border:1px solid var(--line); background:var(--surface-2)} .tier b{display:block;font-size:14px;font-weight:800;margin-bottom:5px} .tier .mut{display:block;font-size:10.5px} .tier .rb{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:800; color:var(--acc-2);background:rgba(150,196,255,.12);border-radius:var(--r-pill); padding:3px 9px} .tier.on{border-color:rgba(231,184,75,.55); background:linear-gradient(160deg,rgba(231,184,75,.16),var(--surface-2) 62%)} .tier.on b{color:#FFDF9E} .tier.on .rb{color:#FFDF9E;background:rgba(231,184,75,.16)} /* ---------- 23. 两栏对齐 + 明细自己卷 ---------- */ /* 问题:左栏(总览 + 三块数字 + 明细)一直往下长,右栏(VIP + Quick)早就结束了, 右下方就空一大块。做法:两栏等高,左栏的明细卡吃掉剩下的高度, 内容多就在卡片里卷(表头钉住),卡片本身不再撑高页面。 */ .two{align-items:stretch} .two>div{display:flex;flex-direction:column;min-height:0} .two>div>.pcard:last-child{margin-bottom:0} .pcard.fill{flex:1;display:flex;flex-direction:column;min-height:0} .pcard.fill>h4{flex:0 0 auto} /* 要给上限,笔数多的时候才真的会在框里卷;不给的话卡片会一路往下长。340 大约是 8 列。 */ .scrollbox{flex:1;min-height:180px;max-height:340px;overflow-y:auto;scrollbar-width:thin; scrollbar-color:var(--line) transparent} .scrollbox::-webkit-scrollbar{width:8px} .scrollbox::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} .scrollbox::-webkit-scrollbar-track{background:transparent} /* 卷动时表头要留在原地,不然卷两行就不知道哪栏是哪栏 */ table.tb.sticky th{position:sticky;top:0;z-index:2;background:#16294B} /* 右栏的卡片不要被拉长,靠上排就好 */ .two .col2{justify-content:flex-start} /* 帐户总览的头像 */ .av2{width:56px;height:56px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; background:radial-gradient(circle at 50% 30%,#24437F,#111F3C); box-shadow:0 0 0 2px rgba(231,184,75,.7),0 3px 9px rgba(0,0,0,.45)} .av2 img{width:40px;height:40px;object-fit:contain;display:block} .av2 svg{width:28px;height:28px;color:var(--acc)} /* ---------- 24. 顶栏右上:语言 + 玩家名称 ---------- */ .hd .lang2,.hd .acct{position:relative;flex:0 0 auto} .hd .lang2>.gl{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:rgba(255,255,255,.08)} .hd .lang2>.gl img{width:24px;height:24px;object-fit:contain;display:block} .hd .lang2>.gl svg{width:19px;height:19px;color:var(--acc)} .hd .acct>.me{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 6px; border-radius:var(--r-pill);background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10);font-size:12.5px;font-weight:700} .hd .acct>.me img{width:26px;height:26px;object-fit:contain;display:block} .hd .acct>.me svg{width:19px;height:19px;color:var(--acc)} .hd .acct>.me s{text-decoration:none;color:var(--text-3);font-size:11px} .hd .lang2:hover>.gl,.hd .acct:hover>.me{background:rgba(255,255,255,.16)} /* 下拉 */ .hd .pop{position:absolute;right:0;top:calc(100% + 8px);min-width:178px;padding:6px; border-radius:12px;background:var(--surface);border:1px solid var(--line); box-shadow:0 16px 40px rgba(2,6,18,.55),inset 0 1px 0 rgba(255,255,255,.06); display:grid;gap:1px;opacity:0;visibility:hidden;transform:translateY(-5px); transition:opacity .15s,transform .15s,visibility .15s;z-index:40} .hd .lang2:hover .pop,.hd .acct:hover .pop,.hd .pop:hover{opacity:1;visibility:visible; transform:none} .hd .pop a{padding:9px 12px;border-radius:8px;font-size:12.5px;font-weight:600; color:var(--text-2);white-space:nowrap} .hd .pop a:hover{background:rgba(150,196,255,.10);color:var(--text)} .hd .pop a.out{margin-top:5px;border-top:1px solid var(--line-2);border-radius:0 0 8px 8px; color:#FF9B93} /* 未登入 */ .hd .btn-s.rg{background:linear-gradient(180deg,#F6DE94 0%,#E0AE3F 46%,#A9741C 100%)!important; color:#2A1B02!important;border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 3px 0 rgba(0,0,0,.2), 0 5px 10px rgba(120,82,12,.4);text-shadow:none;font-weight:800} .hd .btn-s.lg{font-weight:800} /* ---------- 25. 未登入首页的招呼区 ---------- */ .guest{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch; margin-bottom:16px} .guest .gl2{padding:30px 32px;border-radius:var(--r-lg);border:1px solid var(--line); background:linear-gradient(150deg,rgba(231,184,75,.12),var(--surface-2) 46%,var(--surface)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07)} .guest h2{margin:0 0 10px;font-size:28px;letter-spacing:-.4px} .guest p{margin:0 0 20px;color:var(--text-2);font-size:13.5px;line-height:1.7;max-width:46ch} .guest .gbtn{display:flex;gap:12px;margin-bottom:22px} .guest .gbtn .btn{width:auto;padding:12px 26px} .guest .gtrust{display:flex;gap:10px;flex-wrap:wrap} .guest .gtrust span{font-size:11px;font-weight:700;color:var(--text-3); background:rgba(150,196,255,.08);border:1px solid var(--line-2); border-radius:var(--r-pill);padding:5px 12px} .guest .gr2{display:block;border-radius:var(--r-lg);overflow:hidden;min-width:0} .guest .gr2 img{width:100%;height:100%;object-fit:cover;display:block} /* ---------- 26. 登入 / 注册弹窗(电脑版:横式两栏) ---------- */ /* 原本做成 420px 单栏,在 1920 的画面上看起来就是个手机弹窗。 电脑版要横着做:左边品牌与首存礼、右边表单。 */ .modal .sheet2{width:min(880px,100%);max-height:88vh;position:relative;overflow:hidden; display:grid;grid-template-columns:330px 1fr; border-radius:16px;border:1px solid var(--line); background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 34%); box-shadow:0 30px 80px rgba(2,6,18,.68),inset 0 1px 0 rgba(255,255,255,.07); animation:mpop .18s cubic-bezier(.34,1.4,.64,1)} .modal .sheet2::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:3; background:linear-gradient(90deg,transparent,#C9932E 18%,#F6DE94 50%,#C9932E 82%,transparent)} .modal .sheet2>.mx{position:absolute;right:14px;top:14px;z-index:4} /* 左:品牌视觉 */ .modal .aside{padding:30px 26px;overflow-y:auto;scrollbar-width:none; background:linear-gradient(165deg,rgba(231,184,75,.16),rgba(19,39,74,.9) 52%,var(--surface)); border-right:1px solid var(--line-2)} .modal .aside::-webkit-scrollbar{display:none} .modal .aside .lg2{height:34px;width:auto;display:block;margin-bottom:22px} .modal .aside h3{margin:0 0 6px;font-size:20px;line-height:1.3;letter-spacing:-.2px; color:#FFDF9E} .modal .aside p{margin:0 0 18px;font-size:12px;color:var(--text-2)} .modal .aside .ban2{width:100%;border-radius:var(--r);display:block;margin-bottom:20px; box-shadow:0 8px 20px rgba(2,6,18,.45)} .modal .aside .pts{list-style:none;margin:0;padding:0;display:grid;gap:9px} .modal .aside .pts li{position:relative;padding-left:20px;font-size:11.5px;color:var(--text-2)} .modal .aside .pts li::before{content:'';position:absolute;left:0;top:5px;width:11px;height:6px; border-left:2px solid #6FE0A8;border-bottom:2px solid #6FE0A8;transform:rotate(-45deg)} /* 右:表单 */ .modal .aform{display:flex;flex-direction:column;min-width:0;padding:30px 30px 26px} .atab{display:flex;background:rgba(6,14,32,.45);border:1px solid var(--line-2); border-radius:var(--r-pill);padding:4px;margin-bottom:22px;flex:0 0 auto; /* 让出右上角 ✕(30px + 14px 边距)的位置,不然 Register 那颗会被压住 */ margin-right:22px} .atab a{flex:1;text-align:center;padding:10px;border-radius:var(--r-pill); font-size:13px;font-weight:800;color:var(--text-3)} .atab a.on{background:linear-gradient(180deg,var(--btn-top) 0%,var(--brand) 45%, var(--btn-bottom) 100%);color:#fff; box-shadow:inset 0 1px 1px var(--glint),0 2px 6px var(--btn-shadow)} .abd{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin} .abd section[hidden]{display:none} /* 注册栏位多,排成两栏才不会拉得又细又长 */ .two2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px} .fld{display:block;margin-bottom:15px} .fld>span{display:block;font-size:11px;font-weight:700;color:var(--text-3);margin-bottom:6px; letter-spacing:.3px} .fld input{width:100%;padding:12px 14px;border-radius:10px;font-size:13px; background:rgba(6,14,32,.45);border:1px solid var(--line);color:var(--text); box-shadow:inset 0 1px 3px rgba(0,0,0,.30)} .fld input::placeholder{color:var(--text-3)} .fld input:focus{outline:none;border-color:var(--acc); box-shadow:inset 0 1px 3px rgba(0,0,0,.30),0 0 0 3px rgba(150,196,255,.16)} .fld>i{display:block;font-style:normal;font-size:10.5px;color:var(--text-3);margin-top:5px} .arow{display:flex;align-items:center;justify-content:space-between;gap:10px; margin:2px 0 20px;font-size:12px} .arow a{color:var(--acc);font-weight:600} .arow .ck{margin-bottom:0} .ck{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--text-2); margin-bottom:20px;line-height:1.55} .ck input{width:15px;height:15px;flex:0 0 auto;margin-top:2px;accent-color:var(--brand)} .ck a{color:var(--acc)} .abd .btn{width:100%;padding:14px;font-size:14px} .alt{margin:16px 0 0;text-align:center;font-size:12px;color:var(--text-3)} .alt a{color:var(--acc);font-weight:700} /* 登出确认 */ .modal .sheet3{width:min(360px,100%);padding:26px 26px 22px;text-align:center; border-radius:16px;border:1px solid var(--line); background:linear-gradient(180deg,var(--surface-2),var(--surface) 60%); box-shadow:0 24px 60px rgba(2,6,18,.6);animation:mpop .18s cubic-bezier(.34,1.4,.64,1)} .modal .sheet3 b{display:block;font-size:16px;font-weight:800;margin-bottom:8px} .modal .sheet3 p{margin:0 0 20px;font-size:12.5px;color:var(--text-2)} .modal .sheet3 .brow{display:grid;grid-template-columns:1fr 1fr;gap:10px} .modal .sheet3 .brow .btn-s{padding:11px;text-align:center} /* ---------- 27. 弹窗定案:水蓝左栏 + 白底(水蓝比先前压深一阶) ---------- */ /* 先前那版 #5FA8F5→#2E77D8 亮了一点,这一版压到 #4E96E8→#245FBE, 还是水蓝、但沉得住,跟顶栏的宝蓝接得上。 */ .modal .sheet{background:linear-gradient(180deg,#FFFFFF 0%,#F3F6FB 40%); border-color:#DCE3EE} .modal .sheet::before{background:linear-gradient(90deg,transparent,#245FBE 18%,#7FB6F5 50%, #245FBE 82%,transparent)} .modal .mside{background:linear-gradient(180deg,#4E96E8,#245FBE);border-right:0; box-shadow:6px 0 22px rgba(4,12,32,.28)} .modal .mside h5{color:#fff} .modal a.mv{color:#E4F0FF} .modal a.mv:hover{background:rgba(255,255,255,.16);color:#fff} .modal a.mv.on{background:#FFFFFF;color:#17457F;border-left-color:#245FBE} .modal a.mv.on i svg{color:#245FBE} .modal .mhd{border-bottom-color:#E3E8F1} .modal .mhd b{color:#12203C} .modal .mhd .mx{background:#EDF1F7;color:#5B6880} .modal .mhd .mx:hover{background:#FBE3E1;color:#C92F26} .modal .mbd{color:#28344C} .modal .mtile,.modal .tier,.modal .msg,.modal .vc.off{ background:#FFFFFF;border-color:#E3E8F1;box-shadow:0 2px 8px rgba(16,32,64,.06)} .modal .mtile b,.modal .tier b{color:#12203C} .modal .mut,.modal .mtile .sp2,.modal .tier .mut,.modal .msg i,.modal .vc i, .modal .mtot,.modal .mprof .uid{color:#7A889F} .modal table.tb th{background:#EDF2F9;color:#5B6880;border-bottom-color:#E3E8F1} .modal table.tb td{color:#28344C;border-bottom-color:#EDF1F7} .modal table.tb tr:nth-child(even) td{background:#F7F9FC} .modal table.tb td:last-child{color:inherit} .modal em.up{color:#118A56} .modal em.dn{color:#C92F26} .modal .mfil .seg{background:#EDF2F9;border-color:#E3E8F1} .modal .mfil .seg a{color:#7A889F} .modal .mfil .seg a.on{background:#245FBE;color:#fff} .modal .mfil .dt{background:#fff;border-color:#E3E8F1;color:#5B6880} .modal .mprof{background:linear-gradient(135deg,#E9F2FE,#FFFFFF 60%);border-color:#CBE0F8} .modal .mprof .nm,.modal .mprof .bal2 b{color:#12203C} .modal .mprof .av{background:radial-gradient(circle at 50% 30%,#4E96E8,#245FBE); box-shadow:0 0 0 2px #7FB6F5,0 3px 9px rgba(16,40,80,.22)} .modal .vbar{background:#E3EAF3;box-shadow:inset 0 1px 2px rgba(16,32,64,.10)} .modal .vbar i{background:linear-gradient(90deg,#245FBE,#7FB6F5);box-shadow:none} .modal .vipbar{background:linear-gradient(135deg,#E9F2FE,#FFFFFF 60%);border-color:#CBE0F8} .modal .vlb{color:#7A889F} .modal .tier .rb{background:#EAF1FD;color:#245FBE} .modal .tier.on{background:linear-gradient(160deg,#DCEBFD,#FFFFFF 62%);border-color:#9EC8F5} .modal .tier.on b,.modal .tier.on .rb{color:#17457F} .modal .tier.on .rb{background:#D7E7FC} .modal .vc{border-color:#CBE0F8;background:linear-gradient(100deg,#E9F2FE,#FFFFFF 52%)} .modal .vc .amt{color:#245FBE} .modal .vc.off .amt{color:#6B7A93} .modal .vc b,.modal .msg b{color:#12203C} .modal .msg.rd b{color:#5B6880} /* 登入 / 注册那一颗维持深色 —— 它是「进站前」的门面,白底会跟深色首页打架 */ .modal.auth .sheet2{background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 34%); border-color:var(--line)} /* 白底之後这几处还是浅色文字 —— 白底白字等於看不见 */ .modal .mtot b{color:#12203C} .modal .mtot{border-top-color:#E3E8F1} .modal .ck,.modal .fld>span{color:inherit} /* ---------- 28. 换页不要跳针 ---------- */ /* 顶栏、侧栏、页尾在每一页都一样,换页时让它们「原地不动」—— 只有中间的内容做淡入淡出。没有这几行的话,整个画面(含 logo 与侧栏)会一起重画, 看起来就是闪一下。 */ .pc .hd{view-transition-name:hd} .pc .side{view-transition-name:side} .pc .sub{view-transition-name:sub} .pfoot{view-transition-name:foot} /* 内容区淡入,盖掉「白 → 有内容」那一帧的生硬 */ .wrap>main{animation:pgIn .22s ease both} @keyframes pgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.wrap>main{animation:none}} /* ---------- 29. 共用弹窗:开游戏 / 搜寻 / 客服 / 手机侧抽屉 ---------- */ .modal .sheet3.gm{width:min(400px,100%)} .modal .sheet3.gm img{width:112px;height:150px;object-fit:cover;border-radius:var(--r); display:block;margin:0 auto 16px;box-shadow:0 10px 24px rgba(2,6,18,.5)} .modal .sheet3.gm p{min-height:34px} /* 搜寻 / 客服共用的壳 */ .modal .sheet4{width:min(560px,100%);max-height:80vh;display:flex;flex-direction:column; border-radius:16px;overflow:hidden;border:1px solid var(--line); background:linear-gradient(180deg,var(--surface-2),var(--surface) 30%); box-shadow:0 30px 80px rgba(2,6,18,.66);animation:mpop .18s cubic-bezier(.34,1.4,.64,1)} .modal .shd{display:flex;align-items:center;gap:10px;padding:14px 16px;flex:0 0 auto; border-bottom:1px solid var(--line-2);background:rgba(6,14,32,.35)} .modal .shd .ic{color:var(--text-3);font-size:16px} .modal .shd b{font-size:14px;font-weight:800} .modal .shd .on2{font-size:10.5px;font-weight:800;color:#6FE0A8; background:rgba(111,224,168,.14);border-radius:var(--r-pill);padding:3px 9px} .modal .shd input{flex:1;min-width:0;background:none;border:0;outline:none; font-size:14px;color:var(--text)} .modal .shd input::placeholder{color:var(--text-3)} .modal .sbd{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 18px;scrollbar-width:thin} .shint{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase; color:var(--text-3);margin:4px 0 10px} .stags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .stag{padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line); background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--text-2)} .stag:hover{border-color:var(--acc);color:var(--text)} .sres{display:grid;gap:6px} .srow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px; background:var(--surface-2);border:1px solid var(--line);font-size:12.5px} .srow b{flex:1;font-weight:600} .srow s{text-decoration:none;color:var(--text-3)} .srow:hover{background:var(--surface);color:var(--text)} .sempty{padding:16px;text-align:center;font-size:12px;color:var(--text-3)} /* 客服 */ .modal .cs2 .chat{flex:1;min-height:220px;overflow-y:auto;padding:16px;display:grid; gap:12px;align-content:start;scrollbar-width:thin} .msg2{max-width:78%;display:grid;gap:4px} .msg2 span{padding:10px 13px;border-radius:12px;font-size:12.5px;line-height:1.55} .msg2 i{font-style:normal;font-size:10px;color:var(--text-3)} .msg2.in span{background:var(--surface-2);border:1px solid var(--line); border-bottom-left-radius:4px} .msg2.me2{justify-self:end;text-align:right} .msg2.me2 span{background:linear-gradient(180deg,var(--btn-top),var(--brand));color:#fff; border-bottom-right-radius:4px} .cin{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line-2); background:rgba(6,14,32,.32);flex:0 0 auto} .cin input{flex:1;min-width:0;padding:10px 13px;border-radius:var(--r-pill);font-size:12.5px; background:rgba(6,14,32,.5);border:1px solid var(--line);color:var(--text);outline:none} .cin input::placeholder{color:var(--text-3)} /* 手机侧抽屉 */ .modal.drawer{place-items:stretch;padding:0; /* 列高锁在弹窗高度内,里面的 .dbd 才会自己卷;不锁的话会照内容长高、超出手机外壳 */ grid-template-rows:minmax(0,1fr)} .modal.drawer .dsheet{width:min(300px,84%);height:100%;display:flex;flex-direction:column; background:linear-gradient(180deg,var(--surface-2),var(--surface) 26%); border-right:1px solid var(--line);box-shadow:20px 0 50px rgba(2,6,18,.6); animation:dIn .2s cubic-bezier(.22,.9,.3,1)} @keyframes dIn{from{transform:translateX(-100%)}to{transform:none}} .drawer .dhd{display:flex;align-items:center;padding:14px 16px;flex:0 0 auto; border-bottom:1px solid var(--line-2)} /* 照参考站:✕ 在左、logo 在右 */ .drawer .dhd img{height:24px;width:auto;margin-left:auto} .drawer .dbd{flex:1;min-height:0;overflow-y:auto;padding:12px;scrollbar-width:none; display:flex;flex-direction:column;gap:10px} .drawer .dbd::-webkit-scrollbar{display:none} .drawer .dhr{border:0;border-top:1px solid var(--line-2);margin:4px 2px;width:auto} /* 一、热门游戏卡:标题 + 横滑一排游戏 */ .dcard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px} .dct{display:flex;align-items:center;gap:9px;margin-bottom:10px} .dct i{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center} .dct i img{width:26px;height:26px;object-fit:contain} .dct i svg{width:20px;height:20px;color:#FF8A3D} .dct b{display:block;font-size:14px;font-weight:800} .dct span{display:block;font-size:11px;color:var(--text-3);margin-top:1px} .dgames{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px} .dgames::-webkit-scrollbar{display:none} .dgames a{flex:0 0 60px} .dgames img{width:60px;height:80px;object-fit:cover;border-radius:10px;display:block; box-shadow:0 3px 8px rgba(0,0,0,.35)} /* 二、可展开的一列(游戏厂商 / 语言):右边一颗圆钮,展开时转半圈 */ .dgrp{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .dgh{display:flex;align-items:center;gap:9px;padding:11px 12px;font-size:13.5px;font-weight:800;color:var(--text)} .dgh i{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center} .dgh i img{width:24px;height:24px;object-fit:contain} .dgh i svg{width:19px;height:19px;color:var(--acc)} .dgh b{flex:1;font-weight:800;min-width:0} .dgh s{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; background:var(--brand);color:#fff;text-decoration:none;transition:transform .2s} .dgh s svg{width:15px;height:15px} .dgrp.open .dgh s{transform:rotate(180deg)} .dgrp .dsub{display:none;padding:0 12px 12px} .dgrp.open .dsub{display:block} .dvend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .dvend a{background:rgba(6,14,32,.35);border:1px solid var(--line-2);border-radius:10px; display:grid;place-items:center;height:40px} .dvend img{max-width:80%;max-height:26px;object-fit:contain;display:block} /* 三、快捷钮:两栏胶囊 */ .dpills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .dpill{display:flex;align-items:center;gap:6px;padding:9px 9px;border-radius:12px; background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;color:var(--text);min-width:0} .dpill i{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center} .dpill i img{width:24px;height:24px;object-fit:contain} .dpill i svg{width:18px;height:18px;color:var(--acc)} .dpill b{font-weight:700;min-width:0} .dpill:active,.dpill:hover{border-color:var(--acc)} /* 四、下载 App:两颗渐层胶囊(用我们的按钮蓝) */ .dapps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .dapp{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px; border-radius:var(--r-pill);color:#fff;font-size:13px; background:linear-gradient(180deg,var(--btn-top) 0%,var(--brand) 45%,var(--btn-bottom) 100%); box-shadow:inset 0 1px 1px var(--glint),0 3px 8px var(--btn-shadow)} .dapp svg{width:18px;height:18px} .dapp b{font-weight:800} /* 五、语言清单(抽屉是深色底,跟电脑弹窗的白底清单分开写) */ .drawer .langs{gap:7px} .drawer .lrow{padding:10px 12px;background:rgba(6,14,32,.35);border:1px solid var(--line-2);color:var(--text)} .drawer .lrow span{background:rgba(150,196,255,.12);color:var(--acc)} .drawer .lrow s{color:var(--acc)} .drawer .lrow.on{background:rgba(150,196,255,.12);border-color:var(--acc)} /* 六、社群:一排圆钮 */ .dsoc{display:flex;justify-content:center;gap:14px;padding:2px 0 6px} .dsoc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--line)} .dsoc svg{width:20px;height:20px} .dsoc .telegram{color:#3AA7E6}.dsoc .facebook{color:#4C8BF5}.dsoc .viber{color:#8F6BF0} /* 帮助中心的 FAQ / 语言清单(弹窗里那两块) */ .faq details{border:1px solid #E3E8F1;border-radius:var(--r);margin-bottom:10px; background:#fff;overflow:hidden} .faq summary{padding:13px 15px;font-size:12.5px;font-weight:700;cursor:pointer; list-style:none;color:#12203C} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';float:right;color:#7A889F;font-weight:800} .faq details[open] summary::after{content:'–'} .faq p{margin:0;padding:0 15px 14px;font-size:12px;line-height:1.7;color:#5B6880} .langs{display:grid;gap:9px} .lrow{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r); border:1px solid #E3E8F1;background:#fff;font-size:13px;color:#12203C} .lrow b{font-weight:700} .lrow span{font-size:10.5px;font-weight:800;color:#7A889F;background:#EEF2F8; border-radius:var(--r-pill);padding:3px 9px} .lrow s{margin-left:auto;text-decoration:none;color:#245FBE;font-weight:800} .lrow.on{border-color:#9EC8F5;background:linear-gradient(160deg,#DCEBFD,#FFFFFF 62%)} /* ---------- 30. 弹窗里的充值 ---------- */ /* 左边选通道、右边填金额,跟 639 同一个动线。 */ .dep2{display:grid;grid-template-columns:196px minmax(0,1fr);gap:18px;align-items:start} .pays{display:grid;gap:9px} .pay{display:block;padding:12px 14px;border-radius:var(--r);border:1px solid #E3E8F1; background:#fff;box-shadow:0 2px 8px rgba(16,32,64,.05)} .pay b{display:block;font-size:13px;font-weight:700;color:#12203C} .pay i{display:block;font-style:normal;font-size:10.5px;color:#7A889F;margin-top:3px} .pay.on{border-color:#245FBE;background:linear-gradient(160deg,#E9F2FE,#FFFFFF 62%); box-shadow:0 0 0 1px #245FBE inset,0 4px 12px rgba(36,95,190,.14)} .pay.on b{color:#17457F} .dform .shint{margin-top:2px} .dform .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .dform .chips button{padding:8px 15px;border-radius:9px;border:1px solid #E3E8F1; background:#fff;font-size:12.5px;font-weight:700;color:#28344C} .dform .chips button.on{background:#245FBE;border-color:#245FBE;color:#fff; box-shadow:0 3px 10px rgba(36,95,190,.30)} .dform .field{width:100%;padding:12px 14px;border-radius:10px;font-size:13px; background:#fff;border:1px solid #E3E8F1;color:#12203C} .dform .field::placeholder{color:#9AA7BC} .dform .lim{margin:7px 0 4px;font-size:11px;color:#C92F26} .opts{display:grid;gap:10px;margin-bottom:18px} .opt{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:var(--r); border:1px solid #E3E8F1;background:#fff;cursor:pointer} .opt input{width:16px;height:16px;flex:0 0 auto;accent-color:#245FBE} .opt .sp{flex:1;min-width:0} .opt b{display:block;font-size:12.5px;font-weight:700;color:#12203C} .opt i{display:block;font-style:normal;font-size:10.5px;color:#7A889F;margin-top:3px} .opt.on{border-color:#9EC8F5;background:linear-gradient(160deg,#E9F2FE,#FFFFFF 62%)} /* 提现那一块的两个输入框在白底上 */ .modal .mbd .fld input{background:#fff;border-color:#E3E8F1;color:#12203C; box-shadow:inset 0 1px 2px rgba(16,32,64,.06)} .modal .mbd .fld>span{color:#7A889F} .modal .mbd .btn{width:100%;margin-top:4px} /* 整份文件是 color-scheme:dark,白底弹窗里的原生控件(radio / checkbox / 卷轴) 会跟着画成深色 —— 未选取的圆钮变成一颗黑点。这一层要宣告成 light。 */ .modal .sheet .mbd,.modal .sheet .mbd *{color-scheme:light} /* ---------- 31. 游戏页 ---------- */ /* 639 进了游戏就出不来(只能按浏览器上一页)—— 所以这一条退出列是必须的。 */ .gbar{display:flex;align-items:center;gap:12px;padding:10px 0;position:relative;z-index:5} .gbar .gx{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 11px; border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line); font-size:12.5px;font-weight:800;color:var(--text-2);flex:0 0 auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 10px rgba(2,6,18,.35)} .gbar .gx s{text-decoration:none;font-size:17px;line-height:1;color:var(--acc)} .gbar .gx:hover{color:var(--text);border-color:var(--acc)} .gbar .gnm{font-size:14px;font-weight:800;letter-spacing:.2px; /* 窄画面(360)时退出钮 + 余额 + 全萤幕优先;游戏名可以缩、太长就 … */ flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gbar .gx,.gbar .bal,.gbar .gfs{flex:0 0 auto} .gbar .gfs{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:var(--surface);border:1px solid var(--line);color:var(--text-2);font-size:14px; flex:0 0 auto} .gbar .gfs:hover{color:var(--text);border-color:var(--acc)} .gwrap{padding-bottom:26px} .gstage{position:relative;border-radius:var(--r-lg);overflow:hidden; background:#070B12;border:1px solid var(--line); box-shadow:0 18px 50px rgba(2,6,18,.55); height:calc(100vh - var(--devbar-h) - var(--hd-h) - var(--sub-h) - 110px);min-height:420px} .gstage iframe{width:100%;height:100%;border:0;display:block} .gph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center; gap:12px;text-align:center;padding:30px; background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(36,95,190,.22),transparent 70%),#070B12} .gph[hidden]{display:none} .gph b{font-size:17px;font-weight:800} .gph p{margin:0;font-size:12.5px;color:var(--text-2);line-height:1.7;max-width:46ch} .gspin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(150,196,255,.22); border-top-color:var(--acc);animation:gspin .8s linear infinite} .gph.idle .gspin{display:none} @keyframes gspin{to{transform:rotate(360deg)}} /* 手机版:游戏页不要底部导览,整块都给游戏 */ .app.gapp{padding:0} .app.gapp .gbar{padding:10px 12px;gap:6px} .app.gapp .gbar .gx{padding:7px 11px 7px 8px;gap:5px} .app.gapp .gwrap{padding:0 12px 12px} .app.gapp .gstage{height:calc(100dvh - 118px);min-height:0} /* ---------- 手机:弹窗都关在手机外壳里 ---------- 手机页的弹窗(抽屉 / 搜寻 / 客服 / 个人中心)与 toast 放在 .app 里面(gen.py 的 m_tail), 这里把 fixed 改成 absolute,它们才会跟着那支「手机」,不会跑到整个浏览器视窗的最左边。 */ .app .modal{position:absolute;padding:14px} .app .modal.drawer,.app #pcmodal{padding:0} .app .modal .sheet4{max-height:100%} .app #toast{position:absolute;top:118px;max-width:calc(100% - 28px);text-align:center} /* 个人中心弹窗在手机上:盖满整支手机;左边那条导览改成顶上一排可以横滑的分页 */ .app #pcmodal .sheet{width:100%;height:100%;border-radius:0;border:0; grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)} .app #pcmodal .mside{display:flex;gap:4px;padding:10px;overflow-x:auto;overflow-y:hidden; border-right:0;border-bottom:1px solid var(--line-2)} .app #pcmodal .mside h5{display:none} .app #pcmodal a.mv{flex:0 0 auto;white-space:nowrap;padding:8px 10px} .app #pcmodal .mhd{padding:12px 14px} .app #pcmodal .mbd{padding:14px} /* 弹窗里的内容在 390 宽排不下的,改成直的 */ .app #pcmodal .mprof{flex-wrap:wrap} .app #pcmodal .mprof .bal2{text-align:left;flex:1 0 100%} .app #pcmodal .mgrid,.app #pcmodal .mgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))} .app #pcmodal .tiers{grid-template-columns:repeat(2,minmax(0,1fr))} .app #pcmodal .dep2{grid-template-columns:minmax(0,1fr)} /* 明细表栏位多,在手机上横向滑,不要挤成一团 */ .app #pcmodal table.tb{display:block;overflow-x:auto;white-space:nowrap} /* ---------- 做实:通用 ---------- */ /* hidden 一律藏起来 —— 游戏卡、活动卡、表格列都有自己的 display,会把 hidden 盖掉 */ [hidden]{display:none!important} /* 游戏大厅 / 我的最爱:这一家、这一类还没有游戏时 */ .empty{margin:14px 0 4px;padding:22px 16px;border:1px dashed var(--line);border-radius:var(--r); text-align:center;font-size:12.5px;color:var(--text-3)} .pc .empty{margin:6px 0 14px} /* 栏位检查:红框 + 底下一行字;成功讯息是绿的 */ .bad{border-color:#E0534A!important;box-shadow:0 0 0 3px rgba(224,83,74,.16)!important} .ferr{margin:6px 0 0;font-size:11.5px;color:#E0534A;font-weight:600} .fok{margin:10px 0 0;font-size:12px;color:#118A56;font-weight:600;line-height:1.5} .btn.busy{opacity:.75;pointer-events:none} .ck .ferr{flex-basis:100%} /* 登入弹窗:忘记密码那一页的标题 */ .modal .aform .rst{display:block;font-size:16px;font-weight:800;margin-bottom:8px} /* 已领 / 已复制 */ .btn.off,.btn-s.off{filter:grayscale(.6);opacity:.7;pointer-events:none} .btn-s.done,.btn.done{background:#118A56!important;color:#fff!important;border-color:#118A56!important} .btn-s.auto{cursor:default;pointer-events:none} /* 站内信:点开才看得到内文 */ .msg .mbody{display:none;margin:6px 0 0;font-size:12px;line-height:1.55;color:#5B6880;white-space:normal} .msg.open .mbody{display:block} .msg.open .ar{transform:rotate(90deg)} /* 顶栏选单:点一下也会开(以前只有滑鼠移过去才开) */ .hd .lang2.open .pop,.hd .acct.open .pop{opacity:1;visibility:visible;transform:none} /* 纪录表格:这段日期没有资料 */ table.tb tr.none td{text-align:center;color:#7A889F;padding:18px 10px} /* 手机顶栏:登出后换成登入钮 */ .app .top>.btn-s{margin-right:4px} /* ---------- 做实:内容页 #xsheet(活动规则 / 说明 / 下载 App / 结果 / 手机个人中心子页) ---------- */ /* 跟个人中心弹窗的右半边同一套白底(里面的表格、卡片样式是照白底写的) */ .modal .sheet5{width:min(600px,100%);max-height:86vh;display:flex;flex-direction:column; border-radius:16px;overflow:hidden;border:1px solid #DCE3EE;position:relative; background:linear-gradient(180deg,#FFFFFF 0%,#F3F6FB 40%);color:#28344C; box-shadow:0 30px 80px rgba(2,6,18,.6);animation:mpop .18s cubic-bezier(.34,1.4,.64,1)} .modal .sheet5::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2; background:linear-gradient(90deg,transparent,#245FBE 18%,#7FB6F5 50%,#245FBE 82%,transparent)} .modal .sheet5,.modal .sheet5 *{color-scheme:light} .xhd{display:flex;align-items:center;gap:10px;padding:14px 18px;flex:0 0 auto;border-bottom:1px solid #E3E8F1} .xhd b{flex:1;min-width:0;font-size:15px;font-weight:800;color:#12203C} .xhd .xb{display:none;font-size:24px;line-height:1;color:#245FBE;padding:0 4px} .xhd .mx{background:#EDF1F7;color:#5B6880;width:30px;height:30px;border-radius:9px;display:grid;place-items:center} .xbd{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 20px;scrollbar-width:thin} .xbd .xban{width:100%;border-radius:12px;display:block;margin-bottom:12px} .xbd .xsub{margin:0 0 6px;font-size:13.5px;font-weight:700;color:#12203C;line-height:1.5} .xbd .xmeta{margin:0 0 12px;font-size:11.5px;color:#7A889F;line-height:1.55} .xbd .xh{display:block;margin:16px 0 10px;font-size:13.5px;color:#12203C} .xrules{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px} .xrules li{position:relative;padding:10px 12px 10px 30px;background:#fff;border:1px solid #E3E8F1; border-radius:10px;font-size:12.5px;line-height:1.5} .xrules li::before{content:'';position:absolute;left:12px;top:15px;width:8px;height:8px;border-radius:50%; background:#245FBE} .xcta{margin-top:14px} .xcta .btn{display:block;text-align:center} .xcta.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .xdoc p{margin:0 0 12px;font-size:13px;line-height:1.65} .xapp{background:#fff;border:1px solid #E3E8F1;border-radius:12px;padding:12px 14px;margin:12px 0} .xapp b{display:block;font-size:13.5px;color:#12203C;margin-bottom:6px} .xapp ol{margin:0;padding-left:20px;font-size:12.5px;line-height:1.8} .xkit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .xkit div{background:#fff;border:1px solid #E3E8F1;border-radius:12px;padding:8px;display:grid;gap:8px} .xkit img{width:100%;border-radius:8px;display:block} .xkit .btn-s{text-align:center;color:#245FBE;border-color:#CBE0F8} /* 结果:处理中(转圈) / 成功(绿勾) / 失败(红叹号) */ .xres{display:grid;justify-items:center;text-align:center;gap:8px;padding:18px 6px 6px} .xres b{font-size:17px;color:#12203C} .xres p{margin:0 0 8px;font-size:12.5px;color:#5B6880;line-height:1.55;max-width:380px} .xres .btn{min-width:180px;text-align:center} .xst{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:800; background:#EAF1FD;color:#245FBE} .xst.ok{background:#E3F6EC;color:#118A56} .xst.bad{background:#FBE3E1;color:#C92F26} .xspin{width:28px;height:28px;border-radius:50%;border:3px solid #CBE0F8;border-top-color:#245FBE; animation:xspin .8s linear infinite} @keyframes xspin{to{transform:rotate(360deg)}} /* 手机:内容页盖满整支手机,左上 ‹ 回去 */ .app .modal.xs{padding:0} .app .modal .sheet5{width:100%;height:100%;max-height:none;border-radius:0;border:0} .app .xhd .xb{display:block} .app .xhd .mx{display:none} .app .xbd table.tb{display:block;overflow-x:auto;white-space:nowrap} .app .xbd .mgrid.four,.app .xbd .tiers{grid-template-columns:repeat(2,minmax(0,1fr))} .app .xbd .mprof{flex-wrap:wrap} .app .xbd .mprof .bal2{text-align:left;flex:1 0 100%} /* 优惠页的分页换成清单时 */ .ptab{margin:var(--pad) var(--pad) 0} /* 充值页:从活动过来的,标出正在参加哪一档 */ .pnote{margin-top:10px;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:700; background:rgba(150,196,255,.12);border:1px solid var(--line);color:var(--acc)} /* 白底弹窗 / 内容页里的次要钮(再试一次 / 取消 / 找客服 / 自动发放): 深色主题的浅色字放在白底上看不见(verify 的对比检查会挡) */ .modal .sheet5 .btn.gh,.modal .sheet5 .btn-s.gh,.modal .sheet .btn-s.gh{color:#245FBE;border-color:#CBE0F8;background:#fff} /* 接了后端、游戏没有缩图时:放游戏名,不借别人的图 */ .gcard .gim .nth{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;width:100%;padding:10px;box-sizing:border-box; text-align:center;font-weight:700;font-size:13px;line-height:1.3;color:var(--text,#fff);background:var(--surface-2,#1B2B4D)}