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

143
apps/player/src/views/HomeView.vue
View File

@@ -49,32 +49,7 @@ function formatKickoff(startTime: string) {
<BannerCarousel :banners="banners" />
<div class="quick-entries">
<button type="button" class="qe-item" @click="router.push('/bet')">
<span class="qe-icon qe-icon--bet">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 000 20 14.5 14.5 0 000-20M2 12h20"/></svg>
</span>
<span class="qe-label">{{ t('nav.bet') }}</span>
</button>
<button type="button" class="qe-item" @click="router.push('/wallet/recharge')">
<span class="qe-icon qe-icon--recharge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M12 15h4"/></svg>
</span>
<span class="qe-label">{{ t('recharge.title') }}</span>
</button>
<button type="button" class="qe-item" @click="router.push('/wallet/detail')">
<span class="qe-icon qe-icon--bill">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><path d="M9 5H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V9"/><path d="M9 5a2 2 0 012-2h2a2 2 0 012 2v0M9 12h6M9 16h4"/></svg>
</span>
<span class="qe-label">{{ t('wallet.view_all') }}</span>
</button>
<button type="button" class="qe-item" @click="router.push('/bet')">
<span class="qe-icon qe-icon--promo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
</span>
<span class="qe-label">{{ t('home.hot_matches') || '热门赛事' }}</span>
</button>
</div>
<h2 class="section-title">{{ t('home.hot_matches') }}</h2>
<div
@@ -99,11 +74,11 @@ function formatKickoff(startTime: string) {
<svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
<defs>
<linearGradient :id="`hzBoltGrad-${match.id}`" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#5eb8ff" stop-opacity="0.2" />
<stop offset="35%" stop-color="#b8ecff" stop-opacity="1" />
<stop offset="50%" stop-color="#ffffff" stop-opacity="1" />
<stop offset="65%" stop-color="#ffd080" stop-opacity="1" />
<stop offset="100%" stop-color="#ff9040" stop-opacity="0.2" />
<stop offset="0%" stop-color="#FFB980" stop-opacity="0.2" />
<stop offset="35%" stop-color="#FFDDD2" stop-opacity="1" />
<stop offset="50%" stop-color="#FFFFFF" stop-opacity="1" />
<stop offset="65%" stop-color="#FFDDD2" stop-opacity="1" />
<stop offset="100%" stop-color="#FFDDD2" stop-opacity="0.2" />
</linearGradient>
</defs>
<path
@@ -148,8 +123,11 @@ function formatKickoff(startTime: string) {
.quick-entries {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"a a b b"
"c d e f";
gap: 8px;
margin-bottom: 14px;
margin-bottom: 16px;
padding: 0 2px;
}
@@ -159,17 +137,44 @@ function formatKickoff(startTime: string) {
align-items: center;
gap: 6px;
padding: 12px 4px 10px;
border-radius: 10px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
border-radius: var(--radius-sm);
min-width: 0;
overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.qe-item:active {
transform: scale(0.96);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.qe-item:nth-child(1) { grid-area: a; }
.qe-item:nth-child(2) { grid-area: b; }
.qe-item:nth-child(3) { grid-area: c; }
.qe-item:nth-child(4) { grid-area: d; }
.qe-item:nth-child(5) { grid-area: e; }
.qe-item:nth-child(6) { grid-area: f; }
.qe-item--wide {
flex-direction: row;
gap: 10px;
padding: 14px 12px;
justify-content: flex-start;
}
.qe-item.qe-item--wide .qe-icon {
width: 36px;
height: 36px;
border-radius: 8px;
}
.qe-item.qe-item--wide .qe-label {
font-size: 13px;
font-weight: 700;
}
.qe-icon {
@@ -182,29 +187,29 @@ function formatKickoff(startTime: string) {
}
.qe-icon--bet {
background: rgba(0, 61, 107, 0.1);
color: #003D6B;
background: rgba(244, 162, 97, 0.15);
color: #FFB980;
}
.qe-icon--recharge {
background: rgba(5, 150, 105, 0.1);
color: #059669;
background: rgba(16, 185, 129, 0.15);
color: #10B981;
}
.qe-icon--bill {
background: rgba(248, 151, 31, 0.1);
color: #E8870A;
background: rgba(255, 179, 0, 0.15);
color: #FFB300;
}
.qe-icon--promo {
background: rgba(220, 38, 38, 0.08);
color: #DC2626;
.qe-icon--history {
background: rgba(231, 111, 81, 0.15);
color: #E76F51;
}
.qe-label {
font-size: 11px;
font-weight: 600;
color: #1A1A2E;
color: var(--text);
text-align: center;
line-height: 1.2;
white-space: nowrap;
@@ -216,10 +221,10 @@ function formatKickoff(startTime: string) {
.section-title {
font-size: 15px;
font-weight: 700;
color: #1A1A2E;
color: var(--text);
margin: 0 0 8px;
padding-left: 10px;
border-left: 3px solid #003D6B;
border-left: 3px solid var(--primary);
line-height: 1.3;
}
@@ -233,10 +238,10 @@ function formatKickoff(startTime: string) {
margin-bottom: 8px;
padding: 10px 12px;
min-height: 60px;
border: 1px solid #E5E7EB;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
background: var(--bg-card);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
overflow: hidden;
@@ -246,14 +251,14 @@ function formatKickoff(startTime: string) {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 60%);
background: linear-gradient(135deg, rgba(244, 162, 97, 0.06) 0%, transparent 60%);
z-index: 0;
pointer-events: none;
}
.match-card:active {
transform: scale(0.995);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.match-info,
@@ -272,12 +277,12 @@ function formatKickoff(startTime: string) {
margin-bottom: 4px;
font-size: 14px;
line-height: 1.3;
color: #1A1A2E;
color: var(--text);
}
.match-time {
font-size: 12px;
color: #6B7280;
color: var(--text-muted);
font-weight: 500;
}
@@ -314,7 +319,7 @@ function formatKickoff(startTime: string) {
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 4px rgba(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
filter: drop-shadow(0 0 4px rgba(244, 162, 97, 0.6)) drop-shadow(0 0 8px rgba(255, 185, 128, 0.35));
opacity: 0;
}
@@ -339,11 +344,11 @@ function formatKickoff(startTime: string) {
z-index: 1;
background: linear-gradient(
90deg,
rgba(0, 91, 159, 0) 0%,
rgba(0, 102, 204, 0.7) 28%,
#0066CC 50%,
rgba(0, 91, 159, 0.7) 72%,
rgba(0, 61, 107, 0) 100%
rgba(255, 185, 128, 0) 0%,
rgba(244, 162, 97, 0.7) 28%,
#F4A261 50%,
rgba(255, 185, 128, 0.7) 72%,
rgba(109, 40, 217, 0) 100%
);
opacity: 0;
filter: blur(0.4px);
@@ -360,7 +365,7 @@ function formatKickoff(startTime: string) {
width: 40px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
filter: drop-shadow(0 0 3px rgba(244, 162, 97, 0.25));
}
.match-card--live-anim .vs-img {
@@ -448,21 +453,21 @@ function formatKickoff(startTime: string) {
0%,
100% {
opacity: 0.82;
filter: drop-shadow(0 0 2px rgba(0, 61, 107, 0.2));
filter: drop-shadow(0 0 2px rgba(244, 162, 97, 0.2));
}
50% {
opacity: 1;
filter:
drop-shadow(0 0 3px rgba(0, 102, 204, 0.5))
drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
drop-shadow(0 0 3px rgba(244, 162, 97, 0.5))
drop-shadow(0 0 6px rgba(255, 185, 128, 0.25));
}
}
@media (prefers-reduced-motion: reduce) {
.vs-img {
animation: none;
filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
filter: drop-shadow(0 0 3px rgba(244, 162, 97, 0.25));
}
.hz-path,
@@ -474,7 +479,7 @@ function formatKickoff(startTime: string) {
.empty {
text-align: center;
color: #6B7280;
color: var(--text-muted);
padding: 28px 16px;
font-weight: 600;
}