feat(player): 完善 H5 投注端与 API 演示数据
- 球赛/串关/优胜冠军、赛事详情、历史投注与个人资料编辑 - 固定顶栏、公告与底栏，仅内容区滚动 - 底部导航与站点 favicon 使用 logo，登录页精简 - API 种子、冠军盘与历史注单增强 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,58 +1,299 @@
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--primary: #D4AF37;
|
||||
--primary-dark: #A8841F;
|
||||
--primary-light: #F0D875;
|
||||
--secondary: #1A1A1A;
|
||||
--tertiary: #000000;
|
||||
--neutral: #8E8E93;
|
||||
--bg-body: #000000;
|
||||
--bg-card: #141414;
|
||||
--bg-hover: #222222;
|
||||
--bg-elevated: #2A2A2A;
|
||||
--text: #FFFFFF;
|
||||
--text-muted: #8E8E93;
|
||||
--border: #333333;
|
||||
--border-gold: #D4AF37;
|
||||
--border-gold-soft: rgba(212, 175, 55, 0.28);
|
||||
--border-w: 1px;
|
||||
--border-w-thick: 1px;
|
||||
--danger: #FF453A;
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
--shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
|
||||
--shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.12);
|
||||
--glow-gold: 0 0 8px rgba(212, 175, 55, 0.2);
|
||||
--gradient-gold: linear-gradient(
|
||||
180deg,
|
||||
#FFF4C8 0%,
|
||||
#F0D875 18%,
|
||||
#D4AF37 50%,
|
||||
#B8942B 78%,
|
||||
#8B6914 100%
|
||||
);
|
||||
--gradient-gold-border: linear-gradient(
|
||||
180deg,
|
||||
#FFF8DC 0%,
|
||||
#E8C96A 35%,
|
||||
#A8841F 70%,
|
||||
#5C4A12 100%
|
||||
);
|
||||
--gradient-card: linear-gradient(160deg, #1E1A12 0%, #141414 40%, #0A0A0A 100%);
|
||||
}
|
||||
|
||||
/** 金色描边按钮（避免大面积实心填充） */
|
||||
.btn-gold-outline {
|
||||
background: #141414;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
color: var(--primary-light);
|
||||
font-weight: 800;
|
||||
}
|
||||
.btn-gold-outline:active:not(:disabled) {
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
border-color: var(--border-gold);
|
||||
}
|
||||
|
||||
/** 选中态：浅底 + 金边，非整块金色 */
|
||||
.tab-gold-active {
|
||||
background: rgba(212, 175, 55, 0.08) !important;
|
||||
border-color: var(--border-gold) !important;
|
||||
color: var(--primary-light) !important;
|
||||
}
|
||||
|
||||
/* 登录等关键区域：轻量金边（非厚重 PS 描边） */
|
||||
.ps-gold-frame {
|
||||
position: relative;
|
||||
border: 1px solid var(--border-gold-soft) !important;
|
||||
border-radius: var(--radius);
|
||||
background: rgba(14, 14, 14, 0.92) !important;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.ps-gold-frame::before,
|
||||
.ps-gold-frame::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ps-gold-input {
|
||||
background: #0d0d0d !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ps-gold-input:focus {
|
||||
border-color: var(--border-gold-soft) !important;
|
||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12) !important;
|
||||
}
|
||||
|
||||
/* 主按钮：斜面浮雕 + 渐变描边 + 外发光 */
|
||||
.btn-primary {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding: 17px 24px;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: #3D2800;
|
||||
font-weight: 900;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-shadow:
|
||||
0 1px 0 rgba(255, 252, 235, 0.95),
|
||||
0 -1px 0 rgba(120, 85, 15, 0.35);
|
||||
transition: transform 0.12s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.btn-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
border-radius: calc(var(--radius-sm) + 3px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#FFFCE8 0%,
|
||||
#F7E08A 12%,
|
||||
#D4AF37 35%,
|
||||
#8B6914 55%,
|
||||
#5C4A12 72%,
|
||||
#E8C040 90%,
|
||||
#FFF8DC 100%
|
||||
);
|
||||
z-index: -2;
|
||||
box-shadow:
|
||||
0 0 14px rgba(255, 210, 70, 0.55),
|
||||
0 0 28px rgba(212, 175, 55, 0.28),
|
||||
0 6px 14px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.btn-primary::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
border-radius: calc(var(--radius-sm) - 1px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#FFFBE8 0%,
|
||||
#FFE566 6%,
|
||||
#F0D050 22%,
|
||||
#D4AF37 48%,
|
||||
#B8860B 72%,
|
||||
#8B6914 100%
|
||||
);
|
||||
z-index: -1;
|
||||
box-shadow:
|
||||
inset 0 2px 0 rgba(255, 255, 255, 0.95),
|
||||
inset 0 4px 10px rgba(255, 240, 180, 0.45),
|
||||
inset 0 -2px 0 rgba(90, 65, 12, 0.85),
|
||||
inset 0 -6px 14px rgba(45, 32, 6, 0.5);
|
||||
}
|
||||
|
||||
.btn-primary:active:not(:disabled) {
|
||||
transform: translateY(2px) scale(0.985);
|
||||
}
|
||||
|
||||
.btn-primary:active:not(:disabled)::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#E8C040 0%,
|
||||
#C9962A 40%,
|
||||
#8B6914 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 4px 10px rgba(35, 24, 4, 0.65),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.btn-primary:active:not(:disabled)::before {
|
||||
box-shadow:
|
||||
0 0 10px rgba(255, 200, 50, 0.35),
|
||||
0 2px 6px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
filter: saturate(0.4);
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #0f1419;
|
||||
color: #e8eaed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
:root {
|
||||
--primary: #00a826;
|
||||
--primary-dark: #008a1f;
|
||||
--bg-card: #1a2332;
|
||||
--bg-hover: #243044;
|
||||
--text-muted: #8b95a5;
|
||||
--border: #2d3a4d;
|
||||
--danger: #ff4444;
|
||||
background:
|
||||
radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.14), transparent 55%),
|
||||
var(--bg-body);
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: inherit;
|
||||
background: var(--bg-card);
|
||||
background: #0D0D0D;
|
||||
border: 1px solid var(--border);
|
||||
color: #fff;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
padding: 14px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: var(--border-gold-soft);
|
||||
}
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--text);
|
||||
caret-color: var(--text);
|
||||
box-shadow: 0 0 0 1000px #0a0a0a inset;
|
||||
border: 1px solid var(--border);
|
||||
transition: background-color 99999s ease-out 0s;
|
||||
}
|
||||
|
||||
.odds-btn {
|
||||
background: var(--bg-card);
|
||||
background: #161616;
|
||||
border: 1px solid var(--border);
|
||||
color: #fff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
text-align: center;
|
||||
min-width: 70px;
|
||||
min-width: 78px;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
|
||||
}
|
||||
.odds-btn.selected { background: var(--primary); border-color: var(--primary); }
|
||||
.odds-btn .label { font-size: 11px; color: var(--text-muted); }
|
||||
.odds-btn .value { font-size: 15px; font-weight: 700; color: #ffd700; }
|
||||
|
||||
.odds-btn:active { transform: scale(0.96); }
|
||||
|
||||
.odds-btn.selected {
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.odds-btn.selected::before,
|
||||
.odds-btn.selected::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.odds-btn.selected .label,
|
||||
.odds-btn.selected .value {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.odds-btn .label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.odds-btn .value {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 14px;
|
||||
padding: 4px 0 4px 12px;
|
||||
border-left: 3px solid var(--border-gold);
|
||||
color: var(--primary-light);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user