feat(player): 全站 UI 主题重构与布局优化 — 从暗金奢华风格迁移至 Pinnacle 风格蓝白专业主题
一、全局主题重构（52 文件） - 设计体系从深色/金色奢华调性全面迁移至 Pinnacle 风格的清爽专业调性 - 主色：深海蓝 #003D6B，辅色：橙色 #F8971F / #E8870A（赔率强调色） - 背景从纯黑/深灰改为白色/浅灰 (#F5F7FA, #E8EDF2) - 更新 CSS 变量设计令牌体系：--primary, --border, --text-muted, --bg-body, --bg-hover, --radius-sm 等 - styles.css 全量重写，所有组件 scoped CSS 同步适配 二、紧凑布局优化 - 首页：BannerCarousel 轮播高度缩减 (clamp 148→120px)，MatchBetCard 内边距/间距/字号全面收紧 - 首页：赛事卡片 padding 14px→10px，队旗尺寸 72×48→56×38，VS 区域缩小 - 个人中心：钱包横幅宽高比 2/1→1.75/1，设置单元格 min-height 48→42px - 钱包页：交易行 padding/字号收紧，金额字号 15→14px - MainLayout：顶栏高度 50→48px，底部导航间距微调 三、对比度与可读性增强 - 赛事详情/投注页背景从透明加深至 #E8EDF2 - 所有卡片边框从 #E5E7EB 加深至 #CBD5E1，阴影强度提升 - 盘口选择面板背景 #F5F7FA→#EDF0F4，增加 border-top 分隔线 - 赔率颜色从 #F8971F 加深至 #E8870A，选中态 border-width 加粗至 2px - 标签字号增大并加粗 (font-weight: 600)，颜色从 #6B7280 加深至 #4B5563 四、首页快捷入口 & 个人中心网格布局 - 首页新增 4 宫格快捷入口（投注/充值/账单/活动），彩色图标区分功能 - 个人中心重构为「4 宫格快捷操作 + 列表」结构：钱包/充值/返水/记录 - 移除原个人中心金色入口列表项，精简设置列表为修改资料/投注规则/语言 五、顶部导航栏重设计 - Logo 从 img 标签替换为内联 SVG 纯文字：THE(灰) + BET(深蓝) + 365(橙) - 客服按钮改为纯图标圆形按钮 (32×32px)，增加竖线分隔符 - Chip 高度 34→32px，间距 8→6px - 底部导航激活态指示条加粗至 2.5px，左右缩进从 22% 调至 18% 六、SVG Favicon - 新增纯路径 SVG favicon（无 <text> 元素，确保浏览器 favicon 沙箱兼容） - 深蓝圆角方块 + 白色 "B" 字母路径 + 橙色圆点 + 白色 "365" 数字路径 - index.html 更新 favicon 引用为 /favicon.svg 🤖 Generated with [Qoder][https://qoder.com]
This commit is contained in:
@@ -1,236 +1,72 @@
|
||||
* { 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: rgba(20, 20, 20, 0.65);
|
||||
--bg-hover: rgba(34, 34, 34, 0.65);
|
||||
--bg-elevated: rgba(42, 42, 42, 0.65);
|
||||
--text: #FFFFFF;
|
||||
--text-muted: #8E8E93;
|
||||
--border: #333333;
|
||||
--border-gold: #D4AF37;
|
||||
--border-gold-soft: rgba(212, 175, 55, 0.28);
|
||||
/* Pinnacle-inspired: Navy blue + clean white theme */
|
||||
--primary: #003D6B;
|
||||
--primary-dark: #002847;
|
||||
--primary-light: #005B9F;
|
||||
--secondary: #E8EDF2;
|
||||
--tertiary: #F5F7FA;
|
||||
--neutral: #6B7280;
|
||||
--bg-body: #F5F7FA;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-hover: #F0F4F8;
|
||||
--bg-elevated: #FFFFFF;
|
||||
--text: #1A1A2E;
|
||||
--text-muted: #6B7280;
|
||||
--border: #E5E7EB;
|
||||
--border-active: #0066CC;
|
||||
--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%);
|
||||
--danger: #DC2626;
|
||||
--success: #059669;
|
||||
--warning: #F8971F;
|
||||
--radius: 8px;
|
||||
--radius-sm: 6px;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/** 金色描边按钮（避免大面积实心填充） */
|
||||
.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);
|
||||
/* Gold kept only for odds/betting accent as orange-amber */
|
||||
:root {
|
||||
--odds-accent: #F8971F;
|
||||
--odds-accent-light: #FBBF24;
|
||||
--odds-accent-soft: rgba(248, 151, 31, 0.1);
|
||||
}
|
||||
|
||||
/** 选中态：浅底 + 金边，非整块金色 */
|
||||
.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;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.ps-gold-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
/* ── Global resets ── */
|
||||
html, body, #app { height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
/* 保留 bg 位图；用 scroll 替代 fixed，减轻移动端滚动重绘（后续可换 WebP/AVIF） */
|
||||
background-color: var(--tertiary);
|
||||
background-image:
|
||||
radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.14), transparent 55%),
|
||||
linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.88)),
|
||||
url('./assets/images/bg.webp');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-attachment: scroll;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { cursor: pointer; border: none; font-family: inherit; }
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* ── Input ── */
|
||||
input {
|
||||
font-family: inherit;
|
||||
background: #0D0D0D;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 14px 16px;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: var(--border-gold-soft);
|
||||
border-color: var(--border-active);
|
||||
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
@@ -239,13 +75,84 @@ 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;
|
||||
box-shadow: 0 0 0 1000px #F0F4F8 inset;
|
||||
border: 1px solid var(--border);
|
||||
transition: background-color 99999s ease-out 0s;
|
||||
}
|
||||
|
||||
/* ── Primary button (blue CTA) ── */
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--primary);
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.02em;
|
||||
width: 100%;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
box-shadow: 0 2px 8px rgba(0, 61, 107, 0.2);
|
||||
}
|
||||
.btn-primary:hover { background: var(--primary-light); }
|
||||
.btn-primary:active:not(:disabled) {
|
||||
background: var(--primary-dark);
|
||||
transform: scale(0.985);
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Gold-outline (now blue outline) ── */
|
||||
.btn-gold-outline {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border-active);
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
.btn-gold-outline:active:not(:disabled) {
|
||||
background: rgba(0, 102, 204, 0.06);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* ── Active tab: light blue ── */
|
||||
.tab-gold-active {
|
||||
background: rgba(0, 102, 204, 0.06) !important;
|
||||
border-color: var(--border-active) !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* ── Gold frame (now light blue frame) ── */
|
||||
.ps-gold-frame {
|
||||
position: relative;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius);
|
||||
background: #FFFFFF !important;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.ps-gold-frame::before,
|
||||
.ps-gold-frame::after { display: none; }
|
||||
|
||||
.ps-gold-input {
|
||||
background: #F9FAFB !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: none;
|
||||
color: var(--text);
|
||||
}
|
||||
.ps-gold-input::placeholder { color: rgba(0, 0, 0, 0.3); }
|
||||
.ps-gold-input:focus {
|
||||
border-color: var(--border-active) !important;
|
||||
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
|
||||
}
|
||||
|
||||
/* ── Odds button ── */
|
||||
.odds-btn {
|
||||
background: #161616;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 12px 14px;
|
||||
@@ -254,25 +161,14 @@ input:-webkit-autofill:active {
|
||||
min-width: 78px;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
|
||||
}
|
||||
|
||||
.odds-btn:active { transform: scale(0.96); }
|
||||
|
||||
.odds-btn.selected {
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
border: 1px solid var(--border-active);
|
||||
background: rgba(0, 102, 204, 0.06);
|
||||
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.selected::after { display: none; }
|
||||
|
||||
.odds-btn .label {
|
||||
font-size: 11px;
|
||||
@@ -281,15 +177,14 @@ input:-webkit-autofill:active {
|
||||
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);
|
||||
color: var(--primary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ── Card ── */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
@@ -297,20 +192,20 @@ input:-webkit-autofill:active {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: var(--shadow);
|
||||
background: rgba(26, 26, 26, 0.92);
|
||||
}
|
||||
|
||||
/* ── Section title ── */
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
padding: 4px 0 4px 12px;
|
||||
border-left: 3px solid var(--border-gold);
|
||||
color: var(--primary-light);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
border-left: 3px solid var(--primary);
|
||||
color: var(--text);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* ── Empty / loading state ── */
|
||||
.state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -322,4 +217,4 @@ input:-webkit-autofill:active {
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user