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

113
apps/player/src/views/BetDetailView.vue
View File

@@ -275,7 +275,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.back-btn {
background: none;
border: none;
color: #003D6B;
color: var(--primary);
font-size: 15px;
font-weight: 700;
padding: 4px 0 8px;
@@ -288,12 +288,12 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.state {
text-align: center;
padding: 60px 20px;
color: #6B7280;
color: var(--text-muted);
font-size: 14px;
font-weight: 600;
}
/* ── hero ── */
/* ─ hero ── */
.hero {
border-radius: 12px;
padding: 20px 20px 18px;
@@ -305,10 +305,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
text-align: center;
}
.hero.won { background: rgba(5, 150, 105, 0.08); border: 1px solid rgba(5, 150, 105, 0.2); }
.hero.lost { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.15); }
.hero.pending { background: rgba(248, 151, 31, 0.06); border: 1px solid rgba(248, 151, 31, 0.18); }
.hero.push { background: #FFFFFF; border: 1px solid #E5E7EB; }
.hero.won { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); }
.hero.lost { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); }
.hero.pending { background: rgba(255, 179, 0, 0.1); border: 1px solid rgba(255, 179, 0, 0.25); }
.hero.push { background: var(--bg-card); border: 1px solid var(--border); }
.hero-status {
font-size: 11px;
@@ -317,10 +317,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
text-transform: uppercase;
opacity: 0.85;
}
.hero.won .hero-status { color: #059669; }
.hero.lost .hero-status { color: #DC2626; }
.hero.pending .hero-status { color: #F8971F; }
.hero.push .hero-status { color: #6B7280; }
.hero.won .hero-status { color: var(--success); }
.hero.lost .hero-status { color: var(--danger); }
.hero.pending .hero-status { color: var(--warning); }
.hero.push .hero-status { color: var(--text-muted); }
.hero-return {
font-size: 36px;
@@ -328,26 +328,26 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
letter-spacing: -0.01em;
line-height: 1.1;
}
.hero.won .hero-return { color: #059669; }
.hero.lost .hero-return { color: #DC2626; }
.hero.pending .hero-return { color: #F8971F; }
.hero.push .hero-return { color: #6B7280; }
.hero.won .hero-return { color: var(--success); }
.hero.lost .hero-return { color: var(--danger); }
.hero.pending .hero-return { color: var(--warning); }
.hero.push .hero-return { color: var(--text-muted); }
.hero-return-label {
font-size: 10.5px;
color: #6B7280;
color: var(--text-muted);
font-weight: 600;
letter-spacing: 0.04em;
}
/* ── sections ── */
.section {
background: #FFFFFF;
border: 1px solid #E5E7EB;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow);
}
.section-head {
@@ -359,20 +359,20 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.league-tag {
font-size: 11px;
color: #6B7280;
color: var(--text-muted);
font-weight: 700;
}
.placed-time {
font-size: 11px;
color: #6B7280;
color: var(--text-muted);
font-weight: 600;
}
.match-name {
font-size: 17px;
font-weight: 900;
color: #1A1A2E;
color: var(--text);
line-height: 1.3;
margin-bottom: 10px;
}
@@ -399,18 +399,18 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.row-label {
font-size: 11px;
color: #6B7280;
color: var(--text-muted);
font-weight: 600;
}
.row-val {
font-size: 13px;
font-weight: 700;
color: #1A1A2E;
color: var(--text);
}
.row-val.pick {
color: #003D6B;
color: var(--primary);
}
.score-chips {
@@ -422,15 +422,15 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
display: flex;
align-items: center;
gap: 5px;
background: #F5F7FA;
border: 1px solid #E5E7EB;
background: var(--bg-body);
border: 1px solid var(--border);
border-radius: 7px;
padding: 5px 10px;
}
.score-period {
font-size: 10px;
color: #6B7280;
color: var(--text-muted);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
@@ -439,24 +439,24 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.score-value {
font-size: 16px;
font-weight: 900;
color: #1A1A2E;
color: var(--text);
}
.score-value.muted {
color: #6B7280;
color: var(--text-muted);
font-size: 13px;
}
.no-score {
font-size: 11.5px;
color: #6B7280;
color: var(--text-muted);
font-style: italic;
}
/* section title */
.section-title {
font-size: 10.5px;
color: #6B7280;
color: var(--text-muted);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
@@ -475,14 +475,14 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
justify-content: space-between;
align-items: flex-start;
gap: 10px;
background: #F5F7FA;
border: 1px solid #E5E7EB;
background: var(--bg-body);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
}
.leg-row.won { border-color: rgba(5, 150, 105, 0.25); }
.leg-row.lost { border-color: rgba(220, 38, 38, 0.2); }
.leg-row.won { border-color: rgba(16, 185, 129, 0.3); }
.leg-row.lost { border-color: rgba(239, 68, 68, 0.3); }
.leg-left {
display: flex;
@@ -497,8 +497,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
width: 20px;
height: 20px;
border-radius: 50%;
background: #E8EDF2;
color: #6B7280;
background: var(--secondary);
color: var(--text-muted);
font-size: 10px;
font-weight: 800;
display: flex;
@@ -507,8 +507,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
margin-top: 1px;
}
.leg-num.won { background: rgba(5, 150, 105, 0.12); color: #059669; }
.leg-num.lost { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
.leg-num.won { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.leg-num.lost { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.leg-body {
display: flex;
@@ -520,12 +520,12 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.leg-match {
font-size: 12.5px;
font-weight: 800;
color: #1A1A2E;
color: var(--text);
}
.leg-pick-line {
font-size: 11.5px;
color: #6B7280;
color: var(--text-muted);
font-weight: 600;
}
@@ -538,11 +538,11 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.leg-scores span {
font-size: 11px;
font-weight: 700;
color: #1A1A2E;
color: var(--text);
}
.leg-scores .muted-score {
color: #6B7280;
color: var(--text-muted);
}
.leg-right {
@@ -556,7 +556,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.leg-odds-val {
font-size: 15px;
font-weight: 900;
color: #003D6B;
color: var(--primary);
}
.leg-result-badge {
@@ -568,10 +568,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
border-radius: 10px;
}
.leg-result-badge.won { color: #059669; background: rgba(5, 150, 105, 0.1); }
.leg-result-badge.lost { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
.leg-result-badge.push { color: #6B7280; background: #E8EDF2; }
.leg-result-badge.pending { color: #6B7280; background: #F5F7FA; }
.leg-result-badge.won { color: var(--success); background: rgba(16, 185, 129, 0.12); }
.leg-result-badge.lost { color: var(--danger); background: rgba(239, 68, 68, 0.12); }
.leg-result-badge.push { color: var(--text-muted); background: var(--secondary); }
.leg-result-badge.pending { color: var(--text-muted); background: var(--bg-body); }
/* summary */
.summary-rows {
@@ -585,9 +585,9 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #E5E7EB;
border-bottom: 1px solid var(--border);
font-size: 13px;
color: #1A1A2E;
color: var(--text);
font-weight: 600;
}
@@ -596,28 +596,28 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
}
.sum-row.muted {
color: #6B7280;
color: var(--text-muted);
font-size: 11px;
}
.odds-val {
color: #F8971F;
color: var(--warning);
font-weight: 800;
}
.amt-won {
color: #059669;
color: var(--success);
font-weight: 900;
font-size: 15px;
}
.amt-pending {
color: #F8971F;
color: var(--warning);
font-weight: 900;
}
.amt-lost {
color: #DC2626;
color: var(--danger);
font-weight: 900;
font-size: 15px;
}
@@ -625,5 +625,6 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.bet-no-val {
font-family: monospace;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
</style>