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

50
apps/player/src/components/MatchBetCard.vue
View File

@@ -78,7 +78,7 @@ const liveScoreText = computed(() => {
:class="{ 'match-card--phase': phase !== 'open' }"
@click="emit('bet', match.id)"
>
<span v-if="phase === 'open'" class="status-tag status-tag--open">待开赛</span>
<span v-if="phase === 'open'" class="status-tag status-tag--open">{{ t('bet.status_open') }}</span>
<span v-else-if="phase === 'settled'" class="status-tag status-tag--settled">{{ phaseLabel }}</span>
<span v-else class="status-tag status-tag--pending">{{ phaseLabel }}</span>
@@ -130,8 +130,8 @@ const liveScoreText = computed(() => {
<style scoped>
.match-card {
position: relative;
background: #FFFFFF;
border: 1px solid #E5E7EB;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 6px 8px;
display: flex;
@@ -141,7 +141,7 @@ const liveScoreText = computed(() => {
min-width: 0;
overflow: hidden;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.15s, box-shadow 0.15s;
}
@@ -149,7 +149,7 @@ const liveScoreText = computed(() => {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 50%, rgba(0, 91, 159, 0.02) 100%);
background: linear-gradient(135deg, rgba(244, 162, 97, 0.02) 0%, transparent 50%, rgba(59, 130, 246, 0.02) 100%);
pointer-events: none;
z-index: 0;
}
@@ -184,7 +184,7 @@ const liveScoreText = computed(() => {
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #1A1A2E;
color: var(--text);
line-height: 1.2;
word-break: break-word;
text-align: center;
@@ -193,7 +193,7 @@ const liveScoreText = computed(() => {
}
.match-card--phase .team-name {
color: #4B5563;
color: var(--text-dim);
}
.team-flag {
@@ -223,7 +223,7 @@ const liveScoreText = computed(() => {
.kickoff {
font-size: 12px;
font-weight: 600;
color: #1A1A2E;
color: var(--text);
line-height: 1.15;
white-space: normal;
text-align: center;
@@ -234,14 +234,14 @@ const liveScoreText = computed(() => {
.live-score {
font-size: 18px;
font-weight: 900;
color: #003D6B;
color: var(--primary);
line-height: 1;
}
.vs {
font-size: 18px;
font-weight: 900;
color: #003D6B;
color: var(--primary);
line-height: 1;
}
@@ -259,24 +259,24 @@ const liveScoreText = computed(() => {
}
.status-tag--open {
background: #FEF3C7;
color: #92400E;
border-bottom: 1px solid #FDE68A;
border-left: 1px solid #FDE68A;
background: rgba(255, 179, 0, 0.15);
color: #FFB300;
border-bottom: 1px solid rgba(255, 179, 0, 0.3);
border-left: 1px solid rgba(255, 179, 0, 0.3);
}
.status-tag--settled {
background: #E8EDF2;
color: #4B5563;
border-bottom: 1px solid #D1D5DB;
border-left: 1px solid #D1D5DB;
background: var(--bg-elevated);
color: var(--text-dim);
border-bottom: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.status-tag--pending {
background: #FEF3C7;
color: #D97706;
border-bottom: 1px solid #FDE68A;
border-left: 1px solid #FDE68A;
background: rgba(255, 179, 0, 0.15);
color: #FFB300;
border-bottom: 1px solid rgba(255, 179, 0, 0.3);
border-left: 1px solid rgba(255, 179, 0, 0.3);
}
.bet-btn {
@@ -291,8 +291,8 @@ const liveScoreText = computed(() => {
}
.bet-btn--view {
background: #F5F7FA;
border: 1px solid #E5E7EB;
color: #6B7280;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-muted);
}
</style>