ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(player): 统一移动端主题样式并优化多页面视觉一致性

Browse Source 
将玩家端组件与核心页面全面切换为统一主题变量，优化卡片、按钮、弹窗、列表和盘口相关模块的视觉表现，并补充多语言文案以匹配新的交互与布局风格。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-16 15:55:28 +08:00
parent 4a93fcfce0
commit d2c0b575b7
51 changed files with 1539 additions and 1212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
apps/player/src/components/BetSlipDrawer.vue
View File

@@ -457,7 +457,7 @@ watch(
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
background: rgba(0, 0, 0, 0.5);
z-index: 200;
display: flex;
align-items: flex-end;
@@ -466,13 +466,13 @@ watch(
.drawer {
width: 100%;
max-height: 88vh;
background: #FFFFFF;
background: var(--bg-card);
border-radius: 16px 16px 0 0;
border-top: 1px solid #E5E7EB;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
}
.drawer-head {
@@ -484,14 +484,14 @@ watch(
align-items: flex-start;
gap: 12px;
padding: 14px 14px 10px;
background: #FFFFFF;
border-bottom: 1px solid #E5E7EB;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
}
.drawer-kicker {
margin: 0 0 3px;
font-size: 11px;
color: #003D6B;
color: var(--primary);
font-weight: 800;
}
@@ -499,7 +499,7 @@ watch(
margin: 0;
font-size: 17px;
font-weight: 900;
color: #1A1A2E;
color: var(--text);
}
.close-btn {
@@ -509,8 +509,8 @@ watch(
width: 32px;
height: 32px;
border-radius: 50%;
background: #F5F7FA;
color: #6B7280;
background: var(--bg-elevated);
color: var(--text-muted);
font-size: 18px;
padding: 0;
pointer-events: auto;
@@ -523,15 +523,15 @@ watch(
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(0, 61, 107, 0.04);
border-bottom: 1px solid #E5E7EB;
color: #6B7280;
background: rgba(244, 162, 97, 0.04);
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-size: 12px;
}
.balance-bar strong {
justify-self: end;
color: #003D6B;
color: var(--primary);
font-size: 16px;
font-weight: 900;
}
@@ -540,8 +540,8 @@ watch(
width: 28px;
height: 28px;
border-radius: 50%;
background: #F5F7FA;
color: #6B7280;
background: var(--bg-elevated);
color: var(--text-muted);
padding: 0;
}
@@ -550,23 +550,23 @@ watch(
grid-template-columns: repeat(2, 1fr);
padding: 8px 12px 0;
gap: 6px;
background: #FFFFFF;
background: var(--bg-card);
}
.slip-tab {
min-height: 38px;
border-radius: 6px 6px 0 0;
border: 1px solid #E5E7EB;
background: #F5F7FA;
color: #6B7280;
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-muted);
font-size: 13px;
font-weight: 800;
}
.slip-tab.active {
border-color: #003D6B;
background: rgba(0, 61, 107, 0.06);
color: #003D6B;
border-color: var(--primary);
background: rgba(244, 162, 97, 0.06);
color: var(--primary);
}
.tab-count {
@@ -577,7 +577,7 @@ watch(
height: 18px;
margin-left: 6px;
border-radius: 9px;
background: #003D6B;
background: var(--primary);
color: #FFFFFF;
font-size: 11px;
font-weight: 900;
@@ -592,7 +592,7 @@ watch(
.empty {
text-align: center;
color: #6B7280;
color: var(--text-muted);
padding: 26px 12px;
font-size: 13px;
}
@@ -603,15 +603,15 @@ watch(
gap: 10px;
align-items: center;
padding: 11px 12px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 8px;
}
.slip-item--single {
border-color: #003D6B;
background: rgba(0, 61, 107, 0.03);
border-color: var(--primary);
background: rgba(244, 162, 97, 0.03);
}
.item-main {
@@ -621,7 +621,7 @@ watch(
.item-title {
font-size: 13px;
font-weight: 900;
color: #1A1A2E;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -631,19 +631,19 @@ watch(
margin-top: 4px;
font-size: 12px;
font-weight: 800;
color: #003D6B;
color: var(--primary);
}
.item-pick {
margin-top: 3px;
font-size: 12px;
color: #6B7280;
color: var(--text-muted);
line-height: 1.35;
}
.item-odds,
.item-side strong {
color: #003D6B;
color: var(--primary);
font-size: 22px;
font-weight: 900;
}
@@ -657,7 +657,7 @@ watch(
.remove {
background: none;
color: #DC2626;
color: var(--danger);
font-size: 12px;
font-weight: 800;
padding: 0;
@@ -672,12 +672,12 @@ watch(
min-height: 48px;
padding: 0 14px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid #003D6B;
color: #003D6B;
background: var(--bg-card);
border: 1px solid var(--primary);
color: var(--primary);
font-size: 14px;
font-weight: 900;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.btn-add-parlay span {
@@ -687,7 +687,7 @@ watch(
width: 18px;
height: 18px;
border-radius: 50%;
background: #003D6B;
background: var(--primary);
color: #FFFFFF;
font-size: 14px;
line-height: 1;
@@ -698,16 +698,16 @@ watch(
margin: 0 0 10px;
padding: 10px 11px;
border-radius: 6px;
background: rgba(220, 38, 38, 0.06);
border: 1px solid rgba(220, 38, 38, 0.18);
color: #DC2626;
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.18);
color: var(--danger);
font-size: 12px;
line-height: 1.45;
}
.parlay-meta {
margin: 8px 2px 10px;
color: #003D6B;
color: var(--primary);
font-size: 12px;
font-weight: 800;
}
@@ -715,8 +715,8 @@ watch(
.stake-area {
margin: 12px 0 12px;
padding: 12px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
}
@@ -727,12 +727,12 @@ watch(
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: #6B7280;
color: var(--text-muted);
}
.stake-head strong,
.return strong {
color: #003D6B;
color: var(--primary);
font-size: 16px;
font-weight: 900;
}
@@ -742,17 +742,17 @@ watch(
grid-template-columns: auto 1fr auto;
align-items: center;
margin-top: 10px;
border: 1px solid #E5E7EB;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
background: #F5F7FA;
background: var(--bg-input);
}
.currency {
padding: 0 10px;
color: #6B7280;
color: var(--text-muted);
font-size: 13px;
border-right: 1px solid #E5E7EB;
border-right: 1px solid var(--border);
}
.stake-input-row input {
@@ -760,7 +760,7 @@ watch(
height: 42px;
border: none;
background: transparent;
color: #1A1A2E;
color: var(--text);
font-size: 17px;
font-weight: 800;
padding: 0 10px;
@@ -779,7 +779,7 @@ watch(
width: 38px;
height: 42px;
background: transparent;
color: #6B7280;
color: var(--text-muted);
padding: 0;
font-size: 15px;
}
@@ -803,9 +803,9 @@ watch(
.quick-stakes button {
min-height: 52px;
border-radius: 6px;
background: #F5F7FA;
color: #1A1A2E;
border: 1px solid #E5E7EB;
background: var(--bg-elevated);
color: var(--text);
border: 1px solid var(--border);
font-size: 26px;
font-weight: 500;
}
@@ -817,11 +817,11 @@ watch(
.quick-stakes button {
min-height: 50px;
background: #FFFFFF;
color: #1A1A2E;
background: var(--bg-card-elevated);
color: var(--text);
font-size: 20px;
font-weight: 800;
border: 1px solid #E5E7EB;
border: 1px solid var(--border);
}
.return {
@@ -829,7 +829,7 @@ watch(
}
.success {
color: #059669;
color: var(--success);
font-size: 13px;
margin: 0 0 8px;
}
@@ -840,9 +840,9 @@ watch(
grid-template-columns: 1fr;
gap: 10px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: #FFFFFF;
border-top: 1px solid #E5E7EB;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
background: var(--bg-card);
border-top: 1px solid var(--border);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}
.drawer-foot--split {
@@ -853,7 +853,7 @@ watch(
width: 100%;
min-height: 48px;
border-radius: 8px;
background: #003D6B;
background: var(--gradient-primary);
color: #FFFFFF;
font-size: 16px;
font-weight: 900;