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

90
apps/player/src/components/outright/OutrightBetModal.vue
View File

@@ -221,7 +221,7 @@ function formatOdds(odds: string) {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
@@ -233,12 +233,12 @@ function formatOdds(odds: string) {
position: relative;
width: 100%;
max-width: 300px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 18px 16px 16px;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.close-x {
@@ -248,8 +248,8 @@ function formatOdds(odds: string) {
width: 28px;
height: 28px;
border-radius: 50%;
background: #F5F7FA;
color: #6B7280;
background: var(--bg-elevated);
color: var(--text-muted);
font-size: 14px;
line-height: 1;
}
@@ -257,7 +257,7 @@ function formatOdds(odds: string) {
.hint {
font-size: 12px;
font-weight: 600;
color: #6B7280;
color: var(--text-muted);
margin-bottom: 12px;
letter-spacing: 0.04em;
}
@@ -280,21 +280,21 @@ function formatOdds(odds: string) {
height: 32px;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.team {
font-size: 20px;
font-weight: 900;
color: #1A1A2E;
color: var(--text);
letter-spacing: 0.02em;
}
.odds-badge {
display: inline-block;
padding: 3px 10px;
background: #F8971F;
border: 1px solid rgba(248, 151, 31, 0.3);
background: var(--warning);
border: 1px solid rgba(255, 179, 0, 0.3);
color: #FFFFFF;
font-size: 13px;
font-weight: 800;
@@ -303,7 +303,7 @@ function formatOdds(odds: string) {
.event-title {
font-size: 11px;
color: #6B7280;
color: var(--text-muted);
margin-bottom: 12px;
line-height: 1.4;
padding: 0 4px;
@@ -315,28 +315,28 @@ function formatOdds(odds: string) {
align-items: center;
padding: 8px 10px;
margin-bottom: 12px;
background: #F5F7FA;
border: 1px solid #E5E7EB;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 8px;
}
.balance-label {
font-size: 12px;
color: #6B7280;
color: var(--text-muted);
font-weight: 600;
}
.balance-value {
font-size: 14px;
font-weight: 800;
color: #003D6B;
color: var(--primary);
}
.stake-label {
display: block;
text-align: left;
font-size: 11px;
color: #6B7280;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 6px;
}
@@ -346,9 +346,9 @@ function formatOdds(odds: string) {
padding: 11px 12px;
margin-bottom: 8px;
border-radius: 8px;
border: 1px solid #E5E7EB;
background: #F5F7FA;
color: #1A1A2E;
border: 1px solid var(--border);
background: var(--bg-input);
color: var(--text);
font-size: 18px;
font-weight: 800;
text-align: center;
@@ -356,12 +356,12 @@ function formatOdds(odds: string) {
}
.stake-input:focus {
border-color: #003D6B;
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.15);
border-color: var(--primary);
box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.15);
}
.stake-input::placeholder {
color: #6B7280;
color: var(--text-muted);
font-weight: 500;
font-size: 14px;
}
@@ -376,33 +376,33 @@ function formatOdds(odds: string) {
flex: 1;
padding: 6px 4px;
border-radius: 8px;
border: 1px solid #E5E7EB;
background: #FFFFFF;
color: #6B7280;
border: 1px solid var(--border);
background: var(--bg-card-elevated);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
transition: border-color 0.15s ease, background 0.15s ease;
}
.chip:active {
border-color: #003D6B;
color: #003D6B;
background: rgba(0, 61, 107, 0.06);
border-color: var(--primary);
color: var(--primary);
background: rgba(244, 162, 97, 0.06);
}
.est-return {
font-size: 12px;
color: #6B7280;
color: var(--text-muted);
margin-bottom: 12px;
}
.est-value {
color: #003D6B;
color: var(--primary);
font-weight: 800;
}
.error {
color: #DC2626;
color: var(--danger);
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
@@ -417,9 +417,9 @@ function formatOdds(odds: string) {
.btn-cancel {
padding: 10px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
color: #6B7280;
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 14px;
font-weight: 700;
}
@@ -429,7 +429,7 @@ function formatOdds(odds: string) {
border-radius: 8px;
font-size: 14px;
font-weight: 800;
background: #003D6B;
background: var(--gradient-primary);
color: #FFFFFF;
border: none;
}
@@ -443,9 +443,9 @@ function formatOdds(odds: string) {
height: 44px;
margin: 0 auto 8px;
border-radius: 50%;
border: 2px solid #059669;
background: rgba(5, 150, 105, 0.1);
color: #059669;
border: 2px solid var(--success);
background: rgba(16, 185, 129, 0.1);
color: var(--success);
font-size: 24px;
font-weight: 900;
line-height: 40px;
@@ -454,15 +454,15 @@ function formatOdds(odds: string) {
.success-title {
font-size: 16px;
font-weight: 800;
color: #1A1A2E;
color: var(--text);
margin-bottom: 10px;
}
.summary {
margin: 12px 0 14px;
padding: 10px;
background: #F5F7FA;
border: 1px solid #E5E7EB;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 8px;
}
@@ -470,14 +470,14 @@ function formatOdds(odds: string) {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #6B7280;
color: var(--text-muted);
padding: 4px 0;
}
.summary-row + .summary-row {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid #E5E7EB;
border-top: 1px solid var(--border);
}
.btn-done {
@@ -486,7 +486,7 @@ function formatOdds(odds: string) {
border-radius: 8px;
font-size: 14px;
font-weight: 800;
background: #003D6B;
background: var(--gradient-primary);
color: #FFFFFF;
border: none;
}

26
apps/player/src/components/outright/OutrightEventSection.vue
View File

@@ -86,11 +86,11 @@ const headMeta = computed(() => {
position: relative;
isolation: isolate;
margin-bottom: 12px;
border: 1px solid #E5E7EB;
border: 1px solid var(--border);
border-radius: 8px;
background: #FFFFFF;
background: var(--bg-card);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.event-head {
@@ -113,7 +113,7 @@ const headMeta = computed(() => {
position: absolute;
inset: 0;
background: v-bind(matchCardBg) center / 100% 100% no-repeat;
opacity: 0.08;
opacity: 0.04;
z-index: -1;
pointer-events: none;
}
@@ -123,8 +123,8 @@ const headMeta = computed(() => {
width: 26px;
height: 26px;
border-radius: 50%;
background: #F5F7FA;
border: 1px solid #E5E7EB;
background: var(--bg-elevated);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
@@ -132,11 +132,11 @@ const headMeta = computed(() => {
}
.toggle-icon.open {
border-color: #003D6B;
border-color: var(--primary);
}
.toggle-mark {
color: #003D6B;
color: var(--primary);
font-size: 17px;
font-weight: 900;
line-height: 1;
@@ -153,21 +153,21 @@ const headMeta = computed(() => {
.event-title {
font-size: 13px;
font-weight: 800;
color: #003D6B;
color: var(--primary);
line-height: 1.35;
}
.event-league {
font-size: 11px;
font-weight: 600;
color: #6B7280;
color: var(--text-muted);
line-height: 1.3;
}
.event-meta {
font-size: 11px;
font-weight: 600;
color: #6B7280;
color: var(--text-muted);
}
.event-saishi {
@@ -177,7 +177,7 @@ const headMeta = computed(() => {
max-width: 40px;
object-fit: contain;
padding-left: 8px;
border-left: 1px solid #E5E7EB;
border-left: 1px solid var(--border);
}
.options-scroll {
@@ -186,7 +186,7 @@ const headMeta = computed(() => {
-webkit-overflow-scrolling: touch;
padding: 8px 2px 2px;
scrollbar-width: thin;
scrollbar-color: #E5E7EB transparent;
scrollbar-color: var(--border) transparent;
}
.options-grid {

12
apps/player/src/components/outright/OutrightOptionCard.vue
View File

@@ -77,8 +77,8 @@ onUnmounted(() => {
min-width: 0;
padding: 8px 4px 6px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
background: var(--bg-card);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
@@ -89,8 +89,8 @@ onUnmounted(() => {
}
.option-card:active {
border-color: #003D6B;
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.12);
border-color: var(--primary);
box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.12);
}
.flag {
@@ -113,7 +113,7 @@ onUnmounted(() => {
.name {
font-size: 11px;
font-weight: 800;
color: #1A1A2E;
color: var(--text);
line-height: 1.2;
width: 100%;
overflow: hidden;
@@ -124,6 +124,6 @@ onUnmounted(() => {
.odds {
font-size: 11px;
font-weight: 800;
color: #F8971F;
color: var(--warning);
}
</style>

4
apps/player/src/components/outright/OutrightPanel.vue
View File

@@ -178,7 +178,7 @@ function closeModal() {
padding: 0 4px;
font-size: 12px;
font-weight: 600;
color: #6B7280;
color: var(--text-muted);
line-height: 1.4;
}
@@ -189,7 +189,7 @@ function closeModal() {
.state,
.empty {
text-align: center;
color: #6B7280;
color: var(--text-muted);
padding: 48px 20px;
font-weight: 600;
}