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

41
apps/player/src/layouts/MainLayout.vue
View File

@@ -107,9 +107,9 @@ watch(
<div class="layout">
<header v-if="showHeader" class="header">
<svg class="logo" viewBox="0 0 130 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="TheBet365">
<text x="0" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="11" font-weight="800" fill="#6B7280" letter-spacing="0.14em">THE</text>
<text x="32" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#003D6B" letter-spacing="0.01em">BET</text>
<text x="74" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#F8971F" letter-spacing="0.01em">365</text>
<text x="0" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="11" font-weight="800" fill="#94A3B8" letter-spacing="0.14em">THE</text>
<text x="32" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#FFB980" letter-spacing="0.01em">BET</text>
<text x="74" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#FFDDD2" letter-spacing="0.01em">365</text>
</svg>
<div class="header-actions">
<button
@@ -206,7 +206,9 @@ watch(
align-items: center;
padding: 0 12px;
height: 48px;
background: #FFFFFF;
background: var(--bg-glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
z-index: 110;
}
@@ -236,7 +238,7 @@ watch(
.header-divider {
width: 1px;
height: 18px;
background: #E5E7EB;
background: var(--border);
flex-shrink: 0;
margin: 0 2px;
}
@@ -251,8 +253,8 @@ watch(
padding: 0;
border-radius: 50%;
border: 1px solid var(--border);
background: #F5F7FA;
color: var(--primary);
background: var(--bg-card-elevated);
color: var(--primary-light);
font-size: 12px;
font-weight: 600;
cursor: pointer;
@@ -277,22 +279,24 @@ watch(
.login-btn {
padding: 6px 18px;
border-radius: var(--radius-sm);
border: 1px solid var(--primary);
background: var(--primary);
border: none;
background: var(--gradient-primary);
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
transition: opacity 0.15s, transform 0.15s;
box-shadow: var(--shadow-glow);
}
.login-btn:active {
background: var(--primary-dark);
opacity: 0.9;
transform: scale(0.98);
}
.announce-strip {
flex-shrink: 0;
z-index: 105;
background: #FFFFFF;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
}
@@ -310,7 +314,9 @@ watch(
.bottom-nav {
display: flex;
background: #FFFFFF;
background: var(--bg-glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--border);
z-index: 100;
padding-bottom: env(safe-area-inset-bottom, 0);
@@ -343,13 +349,14 @@ watch(
}
.nav-item.active {
color: var(--primary);
color: var(--primary-light);
font-weight: 700;
text-shadow: 0 0 8px rgba(255, 185, 128, 0.4);
}
.nav-item.active :deep(.nav-icon) {
color: var(--primary);
filter: drop-shadow(0 1px 2px rgba(0, 61, 107, 0.2));
color: var(--primary-light);
filter: drop-shadow(0 0 6px rgba(255, 185, 128, 0.5));
}
.nav-item.active::after {
@@ -359,7 +366,7 @@ watch(
left: 18%;
right: 18%;
height: 2.5px;
background: var(--primary);
background: var(--gradient-primary);
border-radius: 0 0 3px 3px;
}
</style>