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

88
apps/player/src/views/RechargeView.vue
View File

@@ -368,9 +368,9 @@ onMounted(fetchMethods);
display: flex; align-items: center; justify-content: space-between;
padding: 8px 0 12px;
}
.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1A1A2E; }
.back-btn { background: none; border: none; color: #003D6B; font-size: 22px; cursor: pointer; padding: 0 6px; }
.history-btn { background: none; border: none; color: #003D6B; font-size: 12px; cursor: pointer; font-weight: 600; }
.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.back-btn { background: none; border: none; color: var(--primary); font-size: 22px; cursor: pointer; padding: 0 6px; }
.history-btn { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; font-weight: 600; }
.state { display: flex; justify-content: center; padding: 48px; }
@@ -380,24 +380,24 @@ onMounted(fetchMethods);
border-radius: 8px;
font-size: 12px;
line-height: 1.45;
color: #DC2626;
background: rgba(220, 38, 38, 0.06);
border: 1px solid rgba(220, 38, 38, 0.2);
color: var(--danger);
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.type-tabs {
display: flex; margin-bottom: 12px;
border-radius: 6px; overflow: hidden;
border: 1px solid #E5E7EB;
border: 1px solid var(--border);
}
.tab {
flex: 1; padding: 8px; border: none;
background: #FFFFFF;
color: #6B7280; font-weight: 700; font-size: 13px;
background: var(--bg-card);
color: var(--text-muted); font-weight: 700; font-size: 13px;
cursor: pointer; transition: all 0.2s;
}
.tab.active {
background: #003D6B; color: #FFFFFF;
background: var(--primary); color: #FFFFFF;
}
.methods-list {
@@ -405,19 +405,19 @@ onMounted(fetchMethods);
}
.method-pill {
display: flex; flex-direction: column; gap: 1px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px; padding: 6px 12px;
text-align: left; cursor: pointer;
transition: border-color 0.15s;
}
.method-pill.selected {
border-color: #0066CC;
background: rgba(0, 102, 204, 0.04);
border-color: var(--border-active);
background: rgba(244, 162, 97, 0.1);
}
.pill-name { font-weight: 700; font-size: 12px; color: #1A1A2E; }
.pill-sub { font-size: 10px; color: #6B7280; }
.empty-methods { text-align: center; color: #6B7280; padding: 20px; font-size: 12px; }
.pill-name { font-weight: 700; font-size: 12px; color: var(--text); }
.pill-sub { font-size: 10px; color: var(--text-muted); }
.empty-methods { text-align: center; color: var(--text-muted); padding: 20px; font-size: 12px; }
.bank-card-wrap {
margin-bottom: 16px;
@@ -433,9 +433,9 @@ onMounted(fetchMethods);
flex-direction: column;
justify-content: space-between;
overflow: hidden;
background: linear-gradient(135deg, #003D6B 0%, #005B9F 50%, #003D6B 100%);
background: linear-gradient(135deg, #0F2027 0%, #F4A261 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow);
}
.bank-card-shine {
@@ -464,7 +464,7 @@ onMounted(fetchMethods);
height: 180px;
right: -60px;
bottom: -80px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
background: radial-gradient(circle, rgba(255, 185, 128, 0.15), transparent 70%);
}
.bank-card-deco--2 {
@@ -472,7 +472,7 @@ onMounted(fetchMethods);
height: 100px;
right: 40px;
bottom: 20px;
border-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 185, 128, 0.12);
}
.bank-card-top,
@@ -583,57 +583,57 @@ onMounted(fetchMethods);
}
.method-info {
background: #FFFFFF;
background: var(--bg-card);
border-radius: 8px; padding: 10px 12px;
margin-bottom: 12px;
border: 1px solid #E5E7EB;
border: 1px solid var(--border);
}
.info-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 0;
border-bottom: 1px solid #E5E7EB;
border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 11px; color: #6B7280; flex-shrink: 0; }
.info-label { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.info-value {
font-size: 13px; font-weight: 600;
word-break: break-all; text-align: right;
max-width: 60%;
color: #1A1A2E;
color: var(--text);
}
.copyable {
cursor: pointer; color: #0066CC;
cursor: pointer; color: var(--primary);
display: inline-flex; align-items: center; gap: 4px;
}
.copyable:active { opacity: 0.6; }
.copy-icon { width: 14px; height: 14px; flex-shrink: 0; }
.qr-container { display: flex; justify-content: center; padding: 8px 0 4px; }
.qr-image { width: 140px; height: 140px; object-fit: contain; border-radius: 6px; background: #fff; padding: 6px; border: 1px solid #E5E7EB; }
.qr-image { width: 140px; height: 140px; object-fit: contain; border-radius: 6px; background: #fff; padding: 6px; border: 1px solid var(--border); }
.form-section { margin-bottom: 12px; }
.form-section label {
display: block; font-size: 11px; font-weight: 700;
color: #6B7280; margin-bottom: 4px;
color: var(--text-muted); margin-bottom: 4px;
}
.amount-input {
width: 100%; padding: 10px; background: #FFFFFF;
border: 1px solid #E5E7EB; border-radius: 6px;
color: #1A1A2E; font-size: 16px; font-weight: 700;
width: 100%; padding: 10px; background: var(--bg-input);
border: 1px solid var(--border); border-radius: 6px;
color: var(--text); font-size: 16px; font-weight: 700;
box-sizing: border-box;
}
.amount-input:focus { border-color: #0066CC; outline: none; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
.amount-input:focus { border-color: var(--border-active); outline: none; box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.2); }
.upload-area {
border: 1px dashed #0066CC;
border: 1px dashed var(--primary);
border-radius: 6px; padding: 16px;
text-align: center; position: relative;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
background: rgba(0, 102, 204, 0.02);
background: rgba(244, 162, 97, 0.06);
}
.upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-hint { font-size: 12px; color: #6B7280; }
.compress-hint { font-size: 12px; color: #003D6B; }
.upload-hint { font-size: 12px; color: var(--text-muted); }
.compress-hint { font-size: 12px; color: var(--primary); }
.screenshot-preview { position: relative; display: inline-block; }
.screenshot-preview img { max-width: 100%; max-height: 160px; border-radius: 6px; }
.remove-btn {
@@ -645,21 +645,21 @@ onMounted(fetchMethods);
.btn-submit {
width: 100%; padding: 12px;
background: #003D6B;
background: var(--primary);
color: #FFFFFF; border: none; border-radius: 6px;
font-size: 14px; font-weight: 800;
cursor: pointer; margin-top: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-glow);
}
.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.success-state { text-align: center; padding: 40px 16px; }
.success-icon { font-size: 40px; color: #059669; margin-bottom: 10px; }
.success-state h3 { margin: 0 0 6px; font-size: 16px; color: #1A1A2E; }
.order-no { font-family: monospace; color: #003D6B; font-size: 13px; margin: 4px 0; }
.success-hint { font-size: 12px; color: #6B7280; margin-bottom: 20px; }
.success-icon { font-size: 40px; color: var(--success); margin-bottom: 10px; }
.success-state h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.order-no { font-family: monospace; color: var(--primary); font-size: 13px; margin: 4px 0; }
.success-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
.btn-primary {
background: #003D6B;
background: var(--primary);
color: #FFFFFF; border: none; border-radius: 6px;
padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
}