feat(player): 统一移动端主题样式并优化多页面视觉一致性
将玩家端组件与核心页面全面切换为统一主题变量，优化卡片、按钮、弹窗、列表和盘口相关模块的视觉表现，并补充多语言文案以匹配新的交互与布局风格。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -35,11 +35,11 @@ const text = computed(() => {
|
||||
gap: 10px;
|
||||
margin: -4px -2px 14px;
|
||||
padding: 10px 12px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.marquee-bar.embedded {
|
||||
@@ -47,8 +47,8 @@ const text = computed(() => {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
background: #F5F7FA;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-body);
|
||||
}
|
||||
|
||||
.marquee-bar.embedded .marquee-badge {
|
||||
@@ -67,8 +67,8 @@ const text = computed(() => {
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
color: #FFFFFF;
|
||||
background: #003D6B;
|
||||
border: 1px solid #003D6B;
|
||||
background: var(--gradient-primary);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -90,7 +90,7 @@ const text = computed(() => {
|
||||
padding-right: 80px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #003D6B;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
@@ -44,12 +44,12 @@ const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
color: #003D6B;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border: none;
|
||||
background: var(--gradient-primary);
|
||||
color: #FFFFFF;
|
||||
box-shadow: var(--shadow-glow), 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.back-top-btn.above-nav {
|
||||
@@ -57,7 +57,7 @@ const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
|
||||
}
|
||||
|
||||
.back-top-btn:active {
|
||||
background: rgba(0, 61, 107, 0.06);
|
||||
opacity: 0.9;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
|
||||
@@ -173,7 +173,7 @@ onUnmounted(stopAutoPlay);
|
||||
.media {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #E8EDF2;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.viewport {
|
||||
@@ -197,7 +197,7 @@ onUnmounted(stopAutoPlay);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #F5F7FA, #E8EDF2);
|
||||
background: linear-gradient(135deg, #0B0F1A, #141B2D);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -207,8 +207,8 @@ onUnmounted(stopAutoPlay);
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(245, 247, 250, 0.12), rgba(255, 255, 255, 0.03) 48%, rgba(245, 247, 250, 0.12));
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 61, 107, 0.08);
|
||||
linear-gradient(90deg, rgba(15, 32, 39, 0.12), rgba(15, 32, 39, 0.03) 48%, rgba(15, 32, 39, 0.12));
|
||||
box-shadow: inset 0 -1px 0 rgba(244, 162, 97, 0.08);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -219,7 +219,7 @@ onUnmounted(stopAutoPlay);
|
||||
height: calc(100% + 36px);
|
||||
object-fit: cover;
|
||||
filter: blur(16px);
|
||||
opacity: 0.3;
|
||||
opacity: 0.2;
|
||||
transform: scale(1.04);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -242,10 +242,10 @@ onUnmounted(stopAutoPlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(0, 61, 107, 0.08), #E8EDF2);
|
||||
background: linear-gradient(135deg, rgba(244, 162, 97, 0.08), #141B2D);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.media .nav {
|
||||
@@ -255,9 +255,9 @@ onUnmounted(stopAutoPlay);
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
color: #003D6B;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-glass);
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--border);
|
||||
padding-bottom: 4px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
@@ -265,7 +265,7 @@ onUnmounted(stopAutoPlay);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.nav.prev { left: 8px; }
|
||||
@@ -286,7 +286,7 @@ onUnmounted(stopAutoPlay);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 61, 107, 0.2);
|
||||
background: rgba(148, 163, 184, 0.3);
|
||||
border: 1.5px solid transparent;
|
||||
padding: 0;
|
||||
transition: all 0.25s ease;
|
||||
@@ -295,8 +295,8 @@ onUnmounted(stopAutoPlay);
|
||||
.dot.active {
|
||||
width: 18px;
|
||||
border-radius: 5px;
|
||||
background: #003D6B;
|
||||
border-color: #003D6B;
|
||||
box-shadow: none;
|
||||
background: var(--gradient-primary);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 8px rgba(244, 162, 97, 0.4);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -67,7 +67,7 @@ function close() {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
color: #003D6B;
|
||||
color: #0F2027;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
@@ -115,7 +115,7 @@ function close() {
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: #0F2027;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
padding-right: 24px;
|
||||
@@ -133,7 +133,7 @@ function close() {
|
||||
.guide-body :deep(.flow-name) {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: #0F2027;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
@@ -168,7 +168,7 @@ function close() {
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
background: #003D6B;
|
||||
background: #F4A261;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -149,19 +149,19 @@ function goDetail() {
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, box-shadow 0.15s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.bet-card:active {
|
||||
background: #F5F7FA;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
@@ -182,9 +182,9 @@ function goDetail() {
|
||||
.cashback-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #F8971F;
|
||||
background: rgba(248, 151, 31, 0.08);
|
||||
border: 1px solid rgba(248, 151, 31, 0.2);
|
||||
color: var(--accent);
|
||||
background: rgba(244, 162, 97, 0.08);
|
||||
border: 1px solid rgba(244, 162, 97, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
@@ -192,9 +192,9 @@ function goDetail() {
|
||||
.bet-type-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #003D6B;
|
||||
background: rgba(0, 61, 107, 0.06);
|
||||
border: 1px solid rgba(0, 61, 107, 0.15);
|
||||
color: var(--primary);
|
||||
background: rgba(244, 162, 97, 0.06);
|
||||
border: 1px solid rgba(244, 162, 97, 0.15);
|
||||
border-radius: 4px;
|
||||
padding: 1px 6px;
|
||||
letter-spacing: 0.02em;
|
||||
@@ -202,7 +202,7 @@ function goDetail() {
|
||||
|
||||
.card-date {
|
||||
font-size: 10px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
@@ -211,7 +211,7 @@ function goDetail() {
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -225,7 +225,7 @@ function goDetail() {
|
||||
|
||||
.pick-label {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -237,8 +237,8 @@ function goDetail() {
|
||||
.odds-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: #F8971F;
|
||||
background: rgba(248, 151, 31, 0.08);
|
||||
color: var(--warning);
|
||||
background: rgba(255, 179, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
padding: 1px 6px;
|
||||
flex-shrink: 0;
|
||||
@@ -254,24 +254,24 @@ function goDetail() {
|
||||
|
||||
.stake-amt {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.return-amt {
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.return-amt.highlight { color: #059669; }
|
||||
.return-amt.pending { color: #F8971F; }
|
||||
.return-amt.lost { color: #DC2626; }
|
||||
.return-amt.highlight { color: var(--success); }
|
||||
.return-amt.pending { color: var(--warning); }
|
||||
.return-amt.lost { color: var(--danger); }
|
||||
|
||||
.chevron {
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
color: #E5E7EB;
|
||||
color: var(--border);
|
||||
margin-left: 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -457,7 +457,7 @@ watch(
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@@ -466,13 +466,13 @@ watch(
|
||||
.drawer {
|
||||
width: 100%;
|
||||
max-height: 88vh;
|
||||
background: #FFFFFF;
|
||||
background: var(--bg-card);
|
||||
border-radius: 16px 16px 0 0;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.drawer-head {
|
||||
@@ -484,14 +484,14 @@ watch(
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 14px 14px 10px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.drawer-kicker {
|
||||
margin: 0 0 3px;
|
||||
font-size: 11px;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -499,7 +499,7 @@ watch(
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
@@ -509,8 +509,8 @@ watch(
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #F5F7FA;
|
||||
color: #6B7280;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-muted);
|
||||
font-size: 18px;
|
||||
padding: 0;
|
||||
pointer-events: auto;
|
||||
@@ -523,15 +523,15 @@ watch(
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(0, 61, 107, 0.04);
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
color: #6B7280;
|
||||
background: rgba(244, 162, 97, 0.04);
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.balance-bar strong {
|
||||
justify-self: end;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -540,8 +540,8 @@ watch(
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: #F5F7FA;
|
||||
color: #6B7280;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-muted);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -550,23 +550,23 @@ watch(
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 8px 12px 0;
|
||||
gap: 6px;
|
||||
background: #FFFFFF;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.slip-tab {
|
||||
min-height: 38px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #F5F7FA;
|
||||
color: #6B7280;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.slip-tab.active {
|
||||
border-color: #003D6B;
|
||||
background: rgba(0, 61, 107, 0.06);
|
||||
color: #003D6B;
|
||||
border-color: var(--primary);
|
||||
background: rgba(244, 162, 97, 0.06);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
@@ -577,7 +577,7 @@ watch(
|
||||
height: 18px;
|
||||
margin-left: 6px;
|
||||
border-radius: 9px;
|
||||
background: #003D6B;
|
||||
background: var(--primary);
|
||||
color: #FFFFFF;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
@@ -592,7 +592,7 @@ watch(
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
padding: 26px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -603,15 +603,15 @@ watch(
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 11px 12px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.slip-item--single {
|
||||
border-color: #003D6B;
|
||||
background: rgba(0, 61, 107, 0.03);
|
||||
border-color: var(--primary);
|
||||
background: rgba(244, 162, 97, 0.03);
|
||||
}
|
||||
|
||||
.item-main {
|
||||
@@ -621,7 +621,7 @@ watch(
|
||||
.item-title {
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -631,19 +631,19 @@ watch(
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.item-pick {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.item-odds,
|
||||
.item-side strong {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -657,7 +657,7 @@ watch(
|
||||
|
||||
.remove {
|
||||
background: none;
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
padding: 0;
|
||||
@@ -672,12 +672,12 @@ watch(
|
||||
min-height: 48px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #003D6B;
|
||||
color: #003D6B;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--primary);
|
||||
color: var(--primary);
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-add-parlay span {
|
||||
@@ -687,7 +687,7 @@ watch(
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #003D6B;
|
||||
background: var(--primary);
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
@@ -698,16 +698,16 @@ watch(
|
||||
margin: 0 0 10px;
|
||||
padding: 10px 11px;
|
||||
border-radius: 6px;
|
||||
background: rgba(220, 38, 38, 0.06);
|
||||
border: 1px solid rgba(220, 38, 38, 0.18);
|
||||
color: #DC2626;
|
||||
background: rgba(239, 68, 68, 0.06);
|
||||
border: 1px solid rgba(239, 68, 68, 0.18);
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.parlay-meta {
|
||||
margin: 8px 2px 10px;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -715,8 +715,8 @@ watch(
|
||||
.stake-area {
|
||||
margin: 12px 0 12px;
|
||||
padding: 12px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -727,12 +727,12 @@ watch(
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stake-head strong,
|
||||
.return strong {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -742,17 +742,17 @@ watch(
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: #F5F7FA;
|
||||
background: var(--bg-input);
|
||||
}
|
||||
|
||||
.currency {
|
||||
padding: 0 10px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
border-right: 1px solid #E5E7EB;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.stake-input-row input {
|
||||
@@ -760,7 +760,7 @@ watch(
|
||||
height: 42px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
padding: 0 10px;
|
||||
@@ -779,7 +779,7 @@ watch(
|
||||
width: 38px;
|
||||
height: 42px;
|
||||
background: transparent;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
@@ -803,9 +803,9 @@ watch(
|
||||
.quick-stakes button {
|
||||
min-height: 52px;
|
||||
border-radius: 6px;
|
||||
background: #F5F7FA;
|
||||
color: #1A1A2E;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -817,11 +817,11 @@ watch(
|
||||
|
||||
.quick-stakes button {
|
||||
min-height: 50px;
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
background: var(--bg-card-elevated);
|
||||
color: var(--text);
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.return {
|
||||
@@ -829,7 +829,7 @@ watch(
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #059669;
|
||||
color: var(--success);
|
||||
font-size: 13px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
@@ -840,9 +840,9 @@ watch(
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
|
||||
background: #FFFFFF;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
background: var(--bg-card);
|
||||
border-top: 1px solid var(--border);
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.drawer-foot--split {
|
||||
@@ -853,7 +853,7 @@ watch(
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
border-radius: 8px;
|
||||
background: #003D6B;
|
||||
background: var(--gradient-primary);
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
|
||||
@@ -79,12 +79,12 @@ const stats = computed(() => {
|
||||
|
||||
<style scoped>
|
||||
.stats-panel {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 14px 12px 10px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
@@ -110,28 +110,28 @@ const stats = computed(() => {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stat-val.small {
|
||||
font-size: 14px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-val.gold {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.stat-item.won .stat-val { color: #059669; }
|
||||
.stat-item.lost .stat-val { color: #DC2626; }
|
||||
.stat-item.pending .stat-val { color: #F8971F; }
|
||||
.stat-item.push .stat-val { color: #6B7280; }
|
||||
.stat-item.won .stat-val { color: var(--success); }
|
||||
.stat-item.lost .stat-val { color: var(--danger); }
|
||||
.stat-item.pending .stat-val { color: var(--warning); }
|
||||
.stat-item.push .stat-val { color: var(--text-muted); }
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@@ -145,7 +145,7 @@ const stats = computed(() => {
|
||||
}
|
||||
|
||||
.stats-bar.empty {
|
||||
background: #E8EDF2;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.bar-seg {
|
||||
@@ -153,8 +153,8 @@ const stats = computed(() => {
|
||||
transition: flex 0.3s ease;
|
||||
}
|
||||
|
||||
.bar-seg.won { background: #059669; }
|
||||
.bar-seg.lost { background: #DC2626; }
|
||||
.bar-seg.pending { background: #F8971F; }
|
||||
.bar-seg.push { background: #6B7280; }
|
||||
.bar-seg.won { background: var(--success); }
|
||||
.bar-seg.lost { background: var(--danger); }
|
||||
.bar-seg.pending { background: var(--warning); }
|
||||
.bar-seg.push { background: var(--text-muted); }
|
||||
</style>
|
||||
|
||||
@@ -16,7 +16,7 @@ interface Particle {
|
||||
color: string; shape: number;
|
||||
}
|
||||
|
||||
const COLORS = ['#003D6B', '#005B9F', '#0066CC', '#3388DD', '#1A5FA0', '#4499E0'];
|
||||
const COLORS = ['#F4A261', '#FFB980', '#FFDDD2', '#F4A261', '#E76F51', '#FFDDD2'];
|
||||
let w = 0;
|
||||
let h = 0;
|
||||
|
||||
@@ -111,8 +111,8 @@ onUnmounted(stop);
|
||||
<canvas ref="canvasRef" class="confetti-canvas" />
|
||||
<div class="success-card">
|
||||
<svg class="check" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="check-circle" cx="26" cy="26" r="24" fill="none" stroke="#003D6B" stroke-width="3" />
|
||||
<path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#003D6B" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<circle class="check-circle" cx="26" cy="26" r="24" fill="none" stroke="#10B981" stroke-width="3" />
|
||||
<path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#10B981" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<p class="success-text">{{ t('bet.place_success') }}</p>
|
||||
</div>
|
||||
@@ -125,7 +125,7 @@ onUnmounted(stop);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 300;
|
||||
background: rgba(245, 247, 250, 0.88);
|
||||
background: rgba(15, 32, 39, 0.88);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -166,11 +166,12 @@ onUnmounted(stop);
|
||||
}
|
||||
|
||||
.success-text {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
animation: text-up 0.4s 0.4s ease both;
|
||||
text-shadow: 0 0 20px rgba(244, 162, 97, 0.4);
|
||||
}
|
||||
|
||||
@keyframes card-pop {
|
||||
|
||||
@@ -115,11 +115,11 @@ onUnmounted(() => {
|
||||
padding: 0 8px 0 8px;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
background: var(--bg-card);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.chip-body {
|
||||
@@ -131,7 +131,7 @@ onUnmounted(() => {
|
||||
|
||||
.chip-label {
|
||||
font-size: 8px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
@@ -144,14 +144,14 @@ onUnmounted(() => {
|
||||
.chip-amount {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--accent-light);
|
||||
white-space: nowrap;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
font-size: 10px;
|
||||
color: #003D6B;
|
||||
color: var(--primary-light);
|
||||
transition: transform 0.2s;
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -167,10 +167,10 @@ onUnmounted(() => {
|
||||
width: min(260px, 78vw);
|
||||
padding: 12px 14px;
|
||||
z-index: 130;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
background: var(--bg-card-elevated);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.cash-panel::before {
|
||||
@@ -184,22 +184,22 @@ onUnmounted(() => {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 6px 0;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.panel-row.muted {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.panel-row.highlight {
|
||||
color: #003D6B;
|
||||
color: var(--accent-light);
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.panel-divider {
|
||||
height: 1px;
|
||||
background: #E5E7EB;
|
||||
background: var(--border);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
@@ -208,9 +208,9 @@ onUnmounted(() => {
|
||||
padding: 8px 0;
|
||||
margin-top: 4px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #003D6B;
|
||||
border: 1px solid var(--primary);
|
||||
background: transparent;
|
||||
color: #003D6B;
|
||||
color: var(--primary-light);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
@@ -218,7 +218,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.panel-recharge-btn:active {
|
||||
background: rgba(0, 61, 107, 0.06);
|
||||
background: rgba(244, 162, 97, 0.1);
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
|
||||
@@ -77,7 +77,7 @@ function close() {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
@@ -87,11 +87,11 @@ function close() {
|
||||
flex-direction: column;
|
||||
width: min(100%, 420px);
|
||||
height: min(82vh, 680px);
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cs-header {
|
||||
@@ -101,21 +101,21 @@ function close() {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.cs-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
@@ -123,13 +123,13 @@ function close() {
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.cs-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
background: #F5F7FA;
|
||||
background: var(--bg-body);
|
||||
}
|
||||
|
||||
.cs-frame {
|
||||
@@ -137,7 +137,7 @@ function close() {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
background: var(--bg-body);
|
||||
}
|
||||
|
||||
.cs-empty {
|
||||
@@ -150,7 +150,7 @@ function close() {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
|
||||
@@ -29,16 +29,16 @@ const wrapperStyle = computed(() => {
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="sp-track" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#003D6B" stop-opacity="0.15" />
|
||||
<stop offset="50%" stop-color="#005B9F" stop-opacity="0.22" />
|
||||
<stop offset="100%" stop-color="#003D6B" stop-opacity="0.15" />
|
||||
<stop offset="0%" stop-color="#F4A261" stop-opacity="0.15" />
|
||||
<stop offset="50%" stop-color="#FFB980" stop-opacity="0.22" />
|
||||
<stop offset="100%" stop-color="#F4A261" stop-opacity="0.15" />
|
||||
</linearGradient>
|
||||
<linearGradient id="sp-arc" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#E8F4FD" />
|
||||
<stop offset="22%" stop-color="#7CB9E8" />
|
||||
<stop offset="50%" stop-color="#005B9F" />
|
||||
<stop offset="78%" stop-color="#003D6B" />
|
||||
<stop offset="100%" stop-color="#002847" />
|
||||
<stop offset="0%" stop-color="#FFDDD2" />
|
||||
<stop offset="22%" stop-color="#FFB980" />
|
||||
<stop offset="50%" stop-color="#F4A261" />
|
||||
<stop offset="78%" stop-color="#E76F51" />
|
||||
<stop offset="100%" stop-color="#F4A261" />
|
||||
</linearGradient>
|
||||
<filter id="sp-glow">
|
||||
<feGaussianBlur stdDeviation="1.2" result="blur" />
|
||||
@@ -48,9 +48,9 @@ const wrapperStyle = computed(() => {
|
||||
</feMerge>
|
||||
</filter>
|
||||
<radialGradient id="sp-dot" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#E8F4FD" />
|
||||
<stop offset="60%" stop-color="#7CB9E8" />
|
||||
<stop offset="100%" stop-color="#005B9F" />
|
||||
<stop offset="0%" stop-color="#FFDDD2" />
|
||||
<stop offset="60%" stop-color="#FFB980" />
|
||||
<stop offset="100%" stop-color="#F4A261" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<circle cx="24" cy="24" r="20" stroke="url(#sp-track)" stroke-width="3" fill="none" />
|
||||
@@ -74,13 +74,13 @@ const wrapperStyle = computed(() => {
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#7CB9E8" opacity="0.6">
|
||||
<circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#FFDDD2" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.6;0.15;0.6" dur="0.9s" repeatCount="indefinite" begin="0.15s" />
|
||||
</circle>
|
||||
<circle v-if="active" cx="34" cy="34" r="1.5" fill="#005B9F" opacity="0.4">
|
||||
<circle v-if="active" cx="34" cy="34" r="1.5" fill="#FFB980" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1.1s" repeatCount="indefinite" begin="0.35s" />
|
||||
</circle>
|
||||
<circle v-if="active" cx="14" cy="34" r="1.5" fill="#005B9F" opacity="0.4">
|
||||
<circle v-if="active" cx="14" cy="34" r="1.5" fill="#FFB980" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1s" repeatCount="indefinite" begin="0.55s" />
|
||||
</circle>
|
||||
</svg>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import MatchBetCard from './MatchBetCard.vue';
|
||||
import saishiImg from '../assets/images/saishi.webp';
|
||||
import cardBg from '../assets/images/card-bg.webp';
|
||||
@@ -40,6 +41,7 @@ const props = defineProps<{
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
|
||||
const { t } = useI18n();
|
||||
|
||||
const totalCount = computed(() => props.matches.length);
|
||||
const liveCount = computed(() => props.matches.filter(m => m.matchPhase === 'closed_pending').length);
|
||||
@@ -55,9 +57,9 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
||||
<span class="league-info">
|
||||
<span class="league-title">*{{ leagueName }}</span>
|
||||
<span class="league-stats">
|
||||
<span class="stat-item">{{ totalCount }}场</span>
|
||||
<span v-if="liveCount > 0" class="stat-item stat-live">{{ liveCount }}进行中</span>
|
||||
<span v-if="openCount > 0" class="stat-item stat-open">{{ openCount }}待开赛</span>
|
||||
<span class="stat-item">{{ totalCount }}{{ t('bet.match_unit') }}</span>
|
||||
<span v-if="liveCount > 0" class="stat-item stat-live">{{ liveCount }}{{ t('bet.status_live') }}</span>
|
||||
<span v-if="openCount > 0" class="stat-item stat-open">{{ openCount }}{{ t('bet.status_open') }}</span>
|
||||
</span>
|
||||
</span>
|
||||
<img
|
||||
@@ -87,11 +89,11 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #CBD5E1;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
background: var(--bg-card);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.league-row {
|
||||
@@ -113,7 +115,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
||||
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.02) 0%, transparent 60%);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -127,7 +129,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: #003D6B;
|
||||
background: var(--primary);
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -153,7 +155,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
||||
.league-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
line-height: 1.35;
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -163,16 +165,16 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-live {
|
||||
color: #059669;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.stat-open {
|
||||
color: #D97706;
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.league-saishi {
|
||||
@@ -183,13 +185,13 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
||||
object-fit: contain;
|
||||
margin-left: 4px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid #CBD5E1;
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.match-panel {
|
||||
padding: 8px 0 4px;
|
||||
background: #F0F2F6;
|
||||
border-top: 1px solid #D1D5DB;
|
||||
background: var(--bg-card-elevated);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.match-grid {
|
||||
|
||||
@@ -79,17 +79,17 @@ onUnmounted(() => {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
color: #003D6B;
|
||||
background: var(--bg-card-elevated);
|
||||
color: var(--primary-light);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.locale-switch.compact .locale-trigger {
|
||||
@@ -106,10 +106,10 @@ onUnmounted(() => {
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
list-style: none;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.locale-option {
|
||||
@@ -118,7 +118,7 @@ onUnmounted(() => {
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -127,7 +127,7 @@ onUnmounted(() => {
|
||||
|
||||
.locale-option:hover,
|
||||
.locale-option.active {
|
||||
background: rgba(0, 61, 107, 0.06);
|
||||
color: #003D6B;
|
||||
background: rgba(244, 162, 97, 0.1);
|
||||
color: var(--primary-light);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -55,7 +55,7 @@ function continueBrowsing() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
@@ -64,11 +64,11 @@ function continueBrowsing() {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 360px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 28px 24px 24px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
@@ -77,7 +77,7 @@ function continueBrowsing() {
|
||||
right: 14px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
@@ -85,20 +85,20 @@ function continueBrowsing() {
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
margin: 0 0 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-hint {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
@@ -113,7 +113,7 @@ function continueBrowsing() {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #003D6B;
|
||||
background: var(--gradient-primary);
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
@@ -129,9 +129,9 @@ function continueBrowsing() {
|
||||
.login-secondary {
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -140,8 +140,8 @@ function continueBrowsing() {
|
||||
}
|
||||
|
||||
.login-secondary:active {
|
||||
color: #1A1A2E;
|
||||
border-color: #003D6B;
|
||||
color: var(--text);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -129,20 +129,20 @@ onUnmounted(() => {
|
||||
gap: 3px;
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.country-trigger:active {
|
||||
background: #F5F7FA;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.country-iso {
|
||||
@@ -151,12 +151,12 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.country-sep {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.country-dial {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -167,31 +167,31 @@ onUnmounted(() => {
|
||||
z-index: 60;
|
||||
width: min(260px, calc(100vw - 48px));
|
||||
padding: 4px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.country-search {
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: #F5F7FA;
|
||||
color: #1A1A2E;
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.country-search::placeholder {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.country-search:focus {
|
||||
outline: none;
|
||||
border-color: #003D6B;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.country-menu {
|
||||
@@ -214,20 +214,20 @@ onUnmounted(() => {
|
||||
|
||||
.country-option:hover,
|
||||
.country-option.active {
|
||||
background: #F5F7FA;
|
||||
background: rgba(244, 162, 97, 0.08);
|
||||
}
|
||||
|
||||
.country-option .country-iso {
|
||||
flex-shrink: 0;
|
||||
width: 26px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.country-option .country-dial {
|
||||
flex-shrink: 0;
|
||||
width: 38px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.country-name {
|
||||
@@ -235,17 +235,17 @@ onUnmounted(() => {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.country-option:hover .country-name,
|
||||
.country-option.active .country-name {
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.country-empty {
|
||||
padding: 10px 8px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@ function confirm() {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 210;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -69,11 +69,11 @@ function confirm() {
|
||||
max-width: 360px;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px 14px 14px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.close-x {
|
||||
@@ -83,9 +83,9 @@ function confirm() {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #F5F7FA;
|
||||
color: #6B7280;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
@@ -95,7 +95,7 @@ function confirm() {
|
||||
margin: 0 28px 12px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
@@ -114,14 +114,14 @@ function confirm() {
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
color: #6B7280;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
border: none;
|
||||
background: #003D6B;
|
||||
background: var(--gradient-primary);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -78,7 +78,7 @@ function select(key: string) {
|
||||
.picker-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@@ -87,15 +87,15 @@ function select(key: string) {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #F5F7FA;
|
||||
color: #1A1A2E;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.picker-search:focus {
|
||||
outline: none;
|
||||
border-color: #003D6B;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.picker-grid {
|
||||
@@ -114,16 +114,16 @@ function select(key: string) {
|
||||
gap: 4px;
|
||||
padding: 8px 4px 6px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.picker-item.active {
|
||||
border-color: #003D6B;
|
||||
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.18);
|
||||
background: rgba(0, 61, 107, 0.04);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.18);
|
||||
background: rgba(244, 162, 97, 0.04);
|
||||
}
|
||||
|
||||
.picker-photo {
|
||||
@@ -132,14 +132,14 @@ function select(key: string) {
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.picker-name {
|
||||
width: 100%;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
@@ -150,7 +150,7 @@ function select(key: string) {
|
||||
.picker-meta {
|
||||
width: 100%;
|
||||
font-size: 9px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
@@ -161,7 +161,7 @@ function select(key: string) {
|
||||
.picker-empty {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -139,14 +139,14 @@ defineExpose({ validate, refresh });
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 36px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
background: var(--bg-input);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.captcha-row:focus-within {
|
||||
border-color: #003D6B;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.hp-field {
|
||||
@@ -164,7 +164,7 @@ defineExpose({ validate, refresh });
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
@@ -174,7 +174,7 @@ defineExpose({ validate, refresh });
|
||||
}
|
||||
|
||||
.captcha-input::placeholder {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: none;
|
||||
@@ -187,11 +187,11 @@ defineExpose({ validate, refresh });
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border: none;
|
||||
border-left: 1px solid #E5E7EB;
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.captcha-error {
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin: 4px 0 0;
|
||||
|
||||
@@ -43,26 +43,26 @@ withDefaults(
|
||||
}
|
||||
|
||||
.status-watermark.won {
|
||||
color: #059669;
|
||||
color: rgba(16, 185, 129, 0.12);
|
||||
}
|
||||
|
||||
.status-watermark.lost {
|
||||
color: #DC2626;
|
||||
color: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
|
||||
.status-watermark.push {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.status-watermark.pending {
|
||||
color: #F8971F;
|
||||
color: rgba(255, 179, 0, 0.12);
|
||||
}
|
||||
|
||||
.status-watermark.closed {
|
||||
color: #005B9F;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.status-watermark.settled {
|
||||
color: #0066CC;
|
||||
color: var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -85,8 +85,8 @@ function logout() {
|
||||
height: 36px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #003D6B;
|
||||
background: linear-gradient(145deg, #003D6B, #005B9F);
|
||||
border: 2px solid var(--primary-light);
|
||||
background: linear-gradient(145deg, var(--primary-dark), var(--primary-light));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -94,6 +94,7 @@ function logout() {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
box-shadow: 0 0 12px rgba(244, 162, 97, 0.3);
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
@@ -115,10 +116,12 @@ function logout() {
|
||||
right: 0;
|
||||
min-width: 168px;
|
||||
padding: 8px 0;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
background: var(--bg-card-elevated);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
z-index: 140;
|
||||
}
|
||||
|
||||
@@ -126,8 +129,8 @@ function logout() {
|
||||
padding: 8px 14px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
color: var(--primary-light);
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@@ -136,22 +139,22 @@ function logout() {
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
background: none;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #F5F7FA;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.menu-item.recharge {
|
||||
color: #003D6B;
|
||||
color: var(--primary-light);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.menu-item.danger {
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
|
||||
@@ -76,12 +76,12 @@ const stats = computed(() => {
|
||||
|
||||
<style scoped>
|
||||
.wallet-stats-panel {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
@@ -100,7 +100,7 @@ const stats = computed(() => {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.03em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
@@ -113,16 +113,16 @@ const stats = computed(() => {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stat-val.income { color: #059669; }
|
||||
.stat-val.expense { color: #DC2626; }
|
||||
.stat-val.cashback { color: #F8971F; }
|
||||
.stat-val.income { color: var(--success); }
|
||||
.stat-val.expense { color: var(--danger); }
|
||||
.stat-val.cashback { color: var(--warning); }
|
||||
|
||||
.stats-divider {
|
||||
height: 1px;
|
||||
margin: 6px 8px;
|
||||
background: #E5E7EB;
|
||||
background: var(--border);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -96,18 +96,18 @@ function formatOdds(odds: string) {
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 210;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
background: #FFFFFF;
|
||||
background: var(--bg-card);
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
border-radius: 16px 16px 0 0;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@@ -123,9 +123,9 @@ function formatOdds(odds: string) {
|
||||
.drawer-foot {
|
||||
flex-shrink: 0;
|
||||
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
|
||||
background: #F5F7FA;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
background: var(--bg-elevated);
|
||||
border-top: 1px solid var(--border);
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
@@ -134,32 +134,32 @@ function formatOdds(odds: string) {
|
||||
align-items: center;
|
||||
padding: 14px 14px 12px;
|
||||
flex-shrink: 0;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.drawer-header h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.count {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 20px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.slip-item {
|
||||
padding: 10px 12px;
|
||||
background: #F5F7FA;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@@ -167,17 +167,17 @@ function formatOdds(odds: string) {
|
||||
.item-name {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.item-sel {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.odds {
|
||||
color: #F8971F;
|
||||
color: var(--warning);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -190,24 +190,24 @@ function formatOdds(odds: string) {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.summary-row strong {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.return {
|
||||
font-size: 13px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.return strong {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -75,8 +75,8 @@ function formatOdds(odds: string) {
|
||||
<style scoped>
|
||||
.cs-panel {
|
||||
padding: 6px 8px 0;
|
||||
background: #EDF0F4;
|
||||
border-top: 1px solid #D1D5DB;
|
||||
background: var(--bg-card-elevated);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.cs-panel--locked {
|
||||
@@ -95,7 +95,7 @@ function formatOdds(odds: string) {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #4B5563;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.cols-grid {
|
||||
@@ -118,38 +118,38 @@ function formatOdds(odds: string) {
|
||||
gap: 3px;
|
||||
min-height: 42px;
|
||||
padding: 6px 3px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #CBD5E1;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.score-card.selected {
|
||||
border-color: #003D6B;
|
||||
border-color: var(--primary);
|
||||
border-width: 2px;
|
||||
background: rgba(0, 61, 107, 0.08);
|
||||
background: rgba(244, 162, 97, 0.08);
|
||||
}
|
||||
|
||||
.score-card--locked {
|
||||
background: #E8EDF2;
|
||||
border-color: #E5E7EB;
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.score-card--locked .score-line,
|
||||
.score-card--locked .odds {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.score-line {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.odds {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #E8870A;
|
||||
color: var(--warning);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,8 +57,8 @@ function onPick(id: string) {
|
||||
<style scoped>
|
||||
.wrap {
|
||||
padding: 6px 8px 8px;
|
||||
background: #EDF0F4;
|
||||
border-top: 1px solid #D1D5DB;
|
||||
background: var(--bg-card-elevated);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.wrap.locked {
|
||||
@@ -80,32 +80,32 @@ function onPick(id: string) {
|
||||
min-height: 44px;
|
||||
padding: 6px 4px;
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #CBD5E1;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
text-align: center;
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.odds-btn.selected {
|
||||
border-color: #003D6B;
|
||||
border-color: var(--primary);
|
||||
border-width: 2px;
|
||||
background: rgba(0, 61, 107, 0.08);
|
||||
background: rgba(244, 162, 97, 0.08);
|
||||
}
|
||||
|
||||
.odds-btn--locked {
|
||||
background: #E8EDF2;
|
||||
border-color: #E5E7EB;
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--border);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.odds-btn--locked .label,
|
||||
.odds-btn--locked .odds {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 10px;
|
||||
color: #4B5563;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.15;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -113,6 +113,6 @@ function onPick(id: string) {
|
||||
.odds {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #E8870A;
|
||||
color: var(--warning);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -44,11 +44,11 @@ const { t } = useI18n();
|
||||
}
|
||||
|
||||
.row:not(.disabled):active {
|
||||
background: rgba(0, 61, 107, 0.07);
|
||||
background: rgba(244, 162, 97, 0.07);
|
||||
}
|
||||
|
||||
.row.expanded {
|
||||
background: rgba(0, 61, 107, 0.07);
|
||||
background: rgba(244, 162, 97, 0.07);
|
||||
}
|
||||
|
||||
.row.expanded::before {
|
||||
@@ -58,7 +58,7 @@ const { t } = useI18n();
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
height: 2.5px;
|
||||
background: #003D6B;
|
||||
background: var(--primary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -71,7 +71,7 @@ const { t } = useI18n();
|
||||
min-width: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
@@ -79,32 +79,32 @@ const { t } = useI18n();
|
||||
flex-shrink: 0;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #F8971F;
|
||||
color: var(--warning);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
background: rgba(248, 151, 31, 0.1);
|
||||
border: 1px solid rgba(248, 151, 31, 0.3);
|
||||
background: rgba(255, 179, 0, 0.1);
|
||||
border: 1px solid rgba(255, 179, 0, 0.3);
|
||||
}
|
||||
|
||||
.row.expanded .row-label {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.row-muted {
|
||||
font-size: 10px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.row-chevron {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.row-chevron.open {
|
||||
transform: rotate(90deg);
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -221,7 +221,7 @@ function formatOdds(odds: string) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -233,12 +233,12 @@ function formatOdds(odds: string) {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 18px 16px 16px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.close-x {
|
||||
@@ -248,8 +248,8 @@ function formatOdds(odds: string) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: #F5F7FA;
|
||||
color: #6B7280;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -257,7 +257,7 @@ function formatOdds(odds: string) {
|
||||
.hint {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@@ -280,21 +280,21 @@ function formatOdds(odds: string) {
|
||||
height: 32px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.team {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.odds-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
background: #F8971F;
|
||||
border: 1px solid rgba(248, 151, 31, 0.3);
|
||||
background: var(--warning);
|
||||
border: 1px solid rgba(255, 179, 0, 0.3);
|
||||
color: #FFFFFF;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
@@ -303,7 +303,7 @@ function formatOdds(odds: string) {
|
||||
|
||||
.event-title {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.4;
|
||||
padding: 0 4px;
|
||||
@@ -315,28 +315,28 @@ function formatOdds(odds: string) {
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 12px;
|
||||
background: #F5F7FA;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.balance-label {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.stake-label {
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@@ -346,9 +346,9 @@ function formatOdds(odds: string) {
|
||||
padding: 11px 12px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #F5F7FA;
|
||||
color: #1A1A2E;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
@@ -356,12 +356,12 @@ function formatOdds(odds: string) {
|
||||
}
|
||||
|
||||
.stake-input:focus {
|
||||
border-color: #003D6B;
|
||||
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.15);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.15);
|
||||
}
|
||||
|
||||
.stake-input::placeholder {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -376,33 +376,33 @@ function formatOdds(odds: string) {
|
||||
flex: 1;
|
||||
padding: 6px 4px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
color: #6B7280;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card-elevated);
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.chip:active {
|
||||
border-color: #003D6B;
|
||||
color: #003D6B;
|
||||
background: rgba(0, 61, 107, 0.06);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
background: rgba(244, 162, 97, 0.06);
|
||||
}
|
||||
|
||||
.est-return {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.est-value {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
@@ -417,9 +417,9 @@ function formatOdds(odds: string) {
|
||||
.btn-cancel {
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
color: #6B7280;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -429,7 +429,7 @@ function formatOdds(odds: string) {
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
background: #003D6B;
|
||||
background: var(--gradient-primary);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
}
|
||||
@@ -443,9 +443,9 @@ function formatOdds(odds: string) {
|
||||
height: 44px;
|
||||
margin: 0 auto 8px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #059669;
|
||||
background: rgba(5, 150, 105, 0.1);
|
||||
color: #059669;
|
||||
border: 2px solid var(--success);
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--success);
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
line-height: 40px;
|
||||
@@ -454,15 +454,15 @@ function formatOdds(odds: string) {
|
||||
.success-title {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin: 12px 0 14px;
|
||||
padding: 10px;
|
||||
background: #F5F7FA;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -470,14 +470,14 @@ function formatOdds(odds: string) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.summary-row + .summary-row {
|
||||
margin-top: 4px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-done {
|
||||
@@ -486,7 +486,7 @@ function formatOdds(odds: string) {
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
background: #003D6B;
|
||||
background: var(--gradient-primary);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -86,11 +86,11 @@ const headMeta = computed(() => {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
background: var(--bg-card);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.event-head {
|
||||
@@ -113,7 +113,7 @@ const headMeta = computed(() => {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: v-bind(matchCardBg) center / 100% 100% no-repeat;
|
||||
opacity: 0.08;
|
||||
opacity: 0.04;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -123,8 +123,8 @@ const headMeta = computed(() => {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: #F5F7FA;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -132,11 +132,11 @@ const headMeta = computed(() => {
|
||||
}
|
||||
|
||||
.toggle-icon.open {
|
||||
border-color: #003D6B;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.toggle-mark {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
@@ -153,21 +153,21 @@ const headMeta = computed(() => {
|
||||
.event-title {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.event-league {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.event-meta {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.event-saishi {
|
||||
@@ -177,7 +177,7 @@ const headMeta = computed(() => {
|
||||
max-width: 40px;
|
||||
object-fit: contain;
|
||||
padding-left: 8px;
|
||||
border-left: 1px solid #E5E7EB;
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.options-scroll {
|
||||
@@ -186,7 +186,7 @@ const headMeta = computed(() => {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 8px 2px 2px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #E5E7EB transparent;
|
||||
scrollbar-color: var(--border) transparent;
|
||||
}
|
||||
|
||||
.options-grid {
|
||||
|
||||
@@ -77,8 +77,8 @@ onUnmounted(() => {
|
||||
min-width: 0;
|
||||
padding: 8px 4px 6px;
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -89,8 +89,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.option-card:active {
|
||||
border-color: #003D6B;
|
||||
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.12);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.12);
|
||||
}
|
||||
|
||||
.flag {
|
||||
@@ -113,7 +113,7 @@ onUnmounted(() => {
|
||||
.name {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
line-height: 1.2;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@@ -124,6 +124,6 @@ onUnmounted(() => {
|
||||
.odds {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: #F8971F;
|
||||
color: var(--warning);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -178,7 +178,7 @@ function closeModal() {
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -189,7 +189,7 @@ function closeModal() {
|
||||
.state,
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
padding: 48px 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -266,8 +266,21 @@ export default {
|
||||
tab_outright: 'Outright',
|
||||
tab_today: 'Today',
|
||||
tab_early: 'Early',
|
||||
filter_time: 'Match Time',
|
||||
show_open_only: 'Open only',
|
||||
filter: 'Filter',
|
||||
filter_status: 'Status',
|
||||
filter_leagues: 'Leagues',
|
||||
filter_status_all: 'All',
|
||||
filter_status_open: 'Open',
|
||||
filter_status_settled: 'Settled',
|
||||
filter_leagues_all: 'All Leagues',
|
||||
filter_reset: 'Reset',
|
||||
filter_apply: 'Apply',
|
||||
show_all_matches: 'Show all',
|
||||
status_open: 'Upcoming',
|
||||
status_live: 'Live',
|
||||
match_unit: 'matches',
|
||||
today: 'Today',
|
||||
loading: 'Loading…',
|
||||
no_matches: 'No matches',
|
||||
|
||||
@@ -272,8 +272,21 @@ export default {
|
||||
tab_outright: 'Juara',
|
||||
tab_today: 'Hari Ini',
|
||||
tab_early: 'Awal',
|
||||
filter_time: 'Masa Perlawanan',
|
||||
show_open_only: 'Buka sahaja',
|
||||
filter: 'Tapis',
|
||||
filter_status: 'Status',
|
||||
filter_leagues: 'Liga',
|
||||
filter_status_all: 'Semua',
|
||||
filter_status_open: 'Buka',
|
||||
filter_status_settled: 'Selesai',
|
||||
filter_leagues_all: 'Semua Liga',
|
||||
filter_reset: 'Set Semula',
|
||||
filter_apply: 'Sahkan',
|
||||
show_all_matches: 'Tunjuk semua',
|
||||
status_open: 'Akan datang',
|
||||
status_live: 'Langsung',
|
||||
match_unit: 'perlawanan',
|
||||
today: 'Hari Ini',
|
||||
loading: 'Memuatkan…',
|
||||
no_matches: 'Tiada perlawanan',
|
||||
|
||||
@@ -266,8 +266,21 @@ export default {
|
||||
tab_outright: '优胜冠军',
|
||||
tab_today: '今日',
|
||||
tab_early: '早盘',
|
||||
filter_time: '比赛时间',
|
||||
show_open_only: '仅显示待开赛',
|
||||
filter: '筛选',
|
||||
filter_status: '状态',
|
||||
filter_leagues: '联赛',
|
||||
filter_status_all: '全部',
|
||||
filter_status_open: '待开赛',
|
||||
filter_status_settled: '已结束',
|
||||
filter_leagues_all: '全部联赛',
|
||||
filter_reset: '重置',
|
||||
filter_apply: '确定',
|
||||
show_all_matches: '显示全部',
|
||||
status_open: '待开赛',
|
||||
status_live: '进行中',
|
||||
match_unit: '场',
|
||||
today: '今日',
|
||||
loading: '加载中…',
|
||||
no_matches: '暂无赛事',
|
||||
|
||||
@@ -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>
|
||||
@@ -1,45 +1,68 @@
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
/* Pinnacle-inspired: Navy blue + clean white theme */
|
||||
--primary: #003D6B;
|
||||
--primary-dark: #002847;
|
||||
--primary-light: #005B9F;
|
||||
--secondary: #E8EDF2;
|
||||
--tertiary: #F5F7FA;
|
||||
--neutral: #6B7280;
|
||||
--bg-body: #F5F7FA;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-hover: #F0F4F8;
|
||||
--bg-elevated: #FFFFFF;
|
||||
--text: #1A1A2E;
|
||||
--text-muted: #6B7280;
|
||||
--border: #E5E7EB;
|
||||
--border-active: #0066CC;
|
||||
/* ── 蓉色珊瑚 — Dusk Coral Theme ── */
|
||||
--primary: #F4A261;
|
||||
--primary-dark: #E76F51;
|
||||
--primary-light: #FFB980;
|
||||
--primary-glow: #FFDDD2;
|
||||
--accent: #E76F51;
|
||||
--accent-light: #FFDDD2;
|
||||
--gradient-primary: linear-gradient(135deg, #E76F51, #F4A261);
|
||||
--gradient-accent: linear-gradient(135deg, #F4A261, #FFDDD2);
|
||||
--gradient-hot: linear-gradient(135deg, #E76F51, #F4A261, #FFDDD2);
|
||||
--gradient-success: linear-gradient(135deg, #2C5364, #203A43);
|
||||
--gradient-hero: linear-gradient(135deg, #0F2027, #203A43, #0F2027);
|
||||
|
||||
--secondary: #203A43;
|
||||
--tertiary: #1A3038;
|
||||
--neutral: #8FA3AD;
|
||||
|
||||
--bg-body: #0F2027;
|
||||
--bg-card: #203A43;
|
||||
--bg-card-elevated: #2C5364;
|
||||
--bg-hover: #345E70;
|
||||
--bg-elevated: #2C5364;
|
||||
--bg-input: #162D36;
|
||||
--bg-glass: rgba(15, 32, 39, 0.85);
|
||||
|
||||
--text: #FFFFFF;
|
||||
--text-secondary: #D4E4EB;
|
||||
--text-muted: #8FA3AD;
|
||||
--text-dim: #5E7A86;
|
||||
|
||||
--border: rgba(255, 255, 255, 0.08);
|
||||
--border-active: #F4A261;
|
||||
--border-w: 1px;
|
||||
--border-w-thick: 1px;
|
||||
--danger: #DC2626;
|
||||
--success: #059669;
|
||||
--warning: #F8971F;
|
||||
--radius: 8px;
|
||||
--radius-sm: 6px;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
|
||||
--danger: #EF4444;
|
||||
--success: #4ADE80;
|
||||
--warning: #FBBF24;
|
||||
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
--radius-lg: 16px;
|
||||
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
|
||||
--shadow-glow: 0 0 20px rgba(244, 162, 97, 0.2);
|
||||
--shadow-glow-accent: 0 0 20px rgba(231, 111, 81, 0.2);
|
||||
}
|
||||
|
||||
/* Gold kept only for odds/betting accent as orange-amber */
|
||||
/* Odds / betting accent — coral orange */
|
||||
:root {
|
||||
--odds-accent: #F8971F;
|
||||
--odds-accent-light: #FBBF24;
|
||||
--odds-accent-soft: rgba(248, 151, 31, 0.1);
|
||||
--odds-accent: #F4A261;
|
||||
--odds-accent-light: #FFB980;
|
||||
--odds-accent-soft: rgba(244, 162, 97, 0.1);
|
||||
}
|
||||
|
||||
/* ── Global resets ── */
|
||||
html, body, #app { height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
@@ -50,10 +73,16 @@ body {
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { cursor: pointer; border: none; font-family: inherit; }
|
||||
|
||||
/* ── Scrollbar ── */
|
||||
::-webkit-scrollbar { width: 4px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(244, 162, 97, 0.3); border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(244, 162, 97, 0.5); }
|
||||
|
||||
/* ── Input ── */
|
||||
input {
|
||||
font-family: inherit;
|
||||
background: #FFFFFF;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 12px 14px;
|
||||
@@ -63,10 +92,11 @@ input {
|
||||
font-weight: 500;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
input::placeholder { color: var(--text-dim); }
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: var(--border-active);
|
||||
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.15);
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
@@ -75,12 +105,12 @@ input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--text);
|
||||
caret-color: var(--text);
|
||||
box-shadow: 0 0 0 1000px #F0F4F8 inset;
|
||||
box-shadow: 0 0 0 1000px var(--bg-input) inset;
|
||||
border: 1px solid var(--border);
|
||||
transition: background-color 99999s ease-out 0s;
|
||||
}
|
||||
|
||||
/* ── Primary button (blue CTA) ── */
|
||||
/* ── Primary button (coral gradient CTA) ── */
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -89,83 +119,83 @@ input:-webkit-autofill:active {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--primary);
|
||||
background: var(--gradient-primary);
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.02em;
|
||||
width: 100%;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
box-shadow: 0 2px 8px rgba(0, 61, 107, 0.2);
|
||||
transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s;
|
||||
box-shadow: 0 4px 15px rgba(231, 111, 81, 0.35);
|
||||
}
|
||||
.btn-primary:hover { background: var(--primary-light); }
|
||||
.btn-primary:hover { opacity: 0.9; box-shadow: 0 4px 20px rgba(244, 162, 97, 0.4); }
|
||||
.btn-primary:active:not(:disabled) {
|
||||
background: var(--primary-dark);
|
||||
transform: scale(0.985);
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.45;
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Gold-outline (now blue outline) ── */
|
||||
/* ── Outline button ── */
|
||||
.btn-gold-outline {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border-active);
|
||||
color: var(--primary);
|
||||
background: transparent;
|
||||
border: 1px solid var(--primary);
|
||||
color: var(--primary-light);
|
||||
font-weight: 700;
|
||||
}
|
||||
.btn-gold-outline:active:not(:disabled) {
|
||||
background: rgba(0, 102, 204, 0.06);
|
||||
border-color: var(--primary);
|
||||
background: rgba(244, 162, 97, 0.08);
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
/* ── Active tab: light blue ── */
|
||||
/* ── Active tab ── */
|
||||
.tab-gold-active {
|
||||
background: rgba(0, 102, 204, 0.06) !important;
|
||||
border-color: var(--border-active) !important;
|
||||
color: var(--primary) !important;
|
||||
background: rgba(244, 162, 97, 0.1) !important;
|
||||
border-color: var(--primary) !important;
|
||||
color: var(--primary-light) !important;
|
||||
}
|
||||
|
||||
/* ── Gold frame (now light blue frame) ── */
|
||||
/* ── Card frame ── */
|
||||
.ps-gold-frame {
|
||||
position: relative;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius);
|
||||
background: #FFFFFF !important;
|
||||
background: var(--bg-card) !important;
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.ps-gold-frame::before,
|
||||
.ps-gold-frame::after { display: none; }
|
||||
|
||||
.ps-gold-input {
|
||||
background: #F9FAFB !important;
|
||||
background: var(--bg-input) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: none;
|
||||
color: var(--text);
|
||||
}
|
||||
.ps-gold-input::placeholder { color: rgba(0, 0, 0, 0.3); }
|
||||
.ps-gold-input::placeholder { color: var(--text-dim); }
|
||||
.ps-gold-input:focus {
|
||||
border-color: var(--border-active) !important;
|
||||
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
|
||||
border-color: var(--primary) !important;
|
||||
box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.15) !important;
|
||||
}
|
||||
|
||||
/* ── Odds button ── */
|
||||
.odds-btn {
|
||||
background: #FFFFFF;
|
||||
background: var(--bg-card-elevated);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
text-align: center;
|
||||
min-width: 78px;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s, background 0.2s;
|
||||
}
|
||||
.odds-btn:active { transform: scale(0.96); }
|
||||
.odds-btn.selected {
|
||||
border: 1px solid var(--border-active);
|
||||
background: rgba(0, 102, 204, 0.06);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--primary);
|
||||
background: rgba(244, 162, 97, 0.1);
|
||||
box-shadow: 0 0 12px rgba(244, 162, 97, 0.12);
|
||||
}
|
||||
.odds-btn.selected::before,
|
||||
.odds-btn.selected::after { display: none; }
|
||||
@@ -217,4 +247,4 @@ input:-webkit-autofill:active {
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -202,7 +202,7 @@ const pullIndicatorStyle = () => ({
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
padding: 4px 0 8px;
|
||||
@@ -226,7 +226,7 @@ const pullIndicatorStyle = () => ({
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
padding: 56px 20px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -244,28 +244,28 @@ const pullIndicatorStyle = () => ({
|
||||
padding: 18px 16px 16px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(0, 61, 107, 0.06), #FFFFFF);
|
||||
border: 1px solid #E5E7EB;
|
||||
background: linear-gradient(135deg, rgba(244, 162, 97, 0.15), var(--bg-card));
|
||||
border: 1px solid var(--border);
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.hero-amount {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 10.5px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -273,16 +273,16 @@ const pullIndicatorStyle = () => ({
|
||||
}
|
||||
|
||||
.list-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.record-row {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.record-row:last-child {
|
||||
@@ -290,15 +290,15 @@ const pullIndicatorStyle = () => ({
|
||||
}
|
||||
|
||||
.record-row--highlight {
|
||||
background: rgba(0, 61, 107, 0.04);
|
||||
box-shadow: inset 3px 0 0 #003D6B;
|
||||
background: rgba(244, 162, 97, 0.1);
|
||||
box-shadow: inset 3px 0 0 var(--primary);
|
||||
}
|
||||
|
||||
.ledger-hint {
|
||||
margin: 0 0 12px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.row-main {
|
||||
@@ -318,12 +318,12 @@ const pullIndicatorStyle = () => ({
|
||||
.row-amount {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.row-period {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -331,9 +331,9 @@ const pullIndicatorStyle = () => ({
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #F8971F;
|
||||
background: rgba(248, 151, 31, 0.08);
|
||||
border: 1px solid rgba(248, 151, 31, 0.22);
|
||||
color: var(--warning);
|
||||
background: rgba(255, 179, 0, 0.12);
|
||||
border: 1px solid rgba(255, 179, 0, 0.3);
|
||||
border-radius: 999px;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
@@ -344,7 +344,7 @@ const pullIndicatorStyle = () => ({
|
||||
gap: 8px 16px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.row-foot {
|
||||
@@ -354,9 +354,9 @@ const pullIndicatorStyle = () => ({
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #E5E7EB;
|
||||
border-top: 1px dashed var(--border);
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.row-batch {
|
||||
@@ -380,14 +380,14 @@ const pullIndicatorStyle = () => ({
|
||||
margin: 0 0 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sentinel {
|
||||
@@ -403,7 +403,7 @@ const pullIndicatorStyle = () => ({
|
||||
.end-hint {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
padding: 16px 0 4px;
|
||||
letter-spacing: 0.03em;
|
||||
|
||||
@@ -16,7 +16,6 @@ import {
|
||||
} from '@thebet365/shared';
|
||||
|
||||
type MainTab = 'matches' | 'outright';
|
||||
type TimeTab = 'today' | 'early';
|
||||
|
||||
interface Match {
|
||||
id: string;
|
||||
@@ -62,17 +61,16 @@ const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const mainTab = ref<MainTab>('matches');
|
||||
const timeTab = ref<TimeTab>('today');
|
||||
const showAll = ref(false);
|
||||
const filterState = ref({
|
||||
time: 'all' as 'all' | 'today' | 'early',
|
||||
status: 'open' as 'all' | 'open' | 'settled',
|
||||
leagueIds: [] as string[]
|
||||
});
|
||||
const outrightActivated = ref(false);
|
||||
const filterNow = ref(new Date());
|
||||
const { summaryMatches, summaryLoading, loadSummary } = usePlayerMatches();
|
||||
const matches = summaryMatches;
|
||||
const loading = summaryLoading;
|
||||
const expandedLeagues = ref<Record<TimeTab, Set<string>>>({
|
||||
today: new Set(),
|
||||
early: new Set(),
|
||||
});
|
||||
|
||||
async function loadMatches() {
|
||||
filterNow.value = new Date();
|
||||
@@ -90,18 +88,73 @@ const pullIndicatorStyle = () => ({
|
||||
opacity: Math.min(pullDistance.value / 48, 1),
|
||||
});
|
||||
|
||||
function filterMatchesForTab(tab: TimeTab) {
|
||||
const filteredMatches = computed(() => {
|
||||
if (mainTab.value !== 'matches') return [];
|
||||
const now = filterNow.value;
|
||||
return matches.value.filter((m) => {
|
||||
const timeMatch =
|
||||
tab === 'today'
|
||||
? isInTodayMatchWindow(m.startTime, now)
|
||||
: isAfterTodayMatchWindow(m.startTime, now);
|
||||
let timeMatch = true;
|
||||
if (filterState.value.time === 'today') {
|
||||
timeMatch = isInTodayMatchWindow(m.startTime, now);
|
||||
} else if (filterState.value.time === 'early') {
|
||||
timeMatch = isAfterTodayMatchWindow(m.startTime, now);
|
||||
}
|
||||
if (!timeMatch) return false;
|
||||
if (!showAll.value && m.matchPhase !== 'open' && m.matchPhase !== undefined) return false;
|
||||
|
||||
if (filterState.value.status === 'open' && m.matchPhase !== 'open' && m.matchPhase !== undefined) return false;
|
||||
if (filterState.value.status === 'settled' && m.matchPhase !== 'settled') return false;
|
||||
|
||||
if (filterState.value.leagueIds.length > 0) {
|
||||
const id = m.leagueId ?? m.leagueName;
|
||||
if (!filterState.value.leagueIds.includes(id)) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
const availableLeagues = computed(() => {
|
||||
const map = new Map<string, { id: string, name: string }>();
|
||||
for (const m of matches.value) {
|
||||
let timeMatch = true;
|
||||
if (filterState.value.time === 'today') {
|
||||
timeMatch = isInTodayMatchWindow(m.startTime, filterNow.value);
|
||||
} else if (filterState.value.time === 'early') {
|
||||
timeMatch = isAfterTodayMatchWindow(m.startTime, filterNow.value);
|
||||
}
|
||||
if (!timeMatch) continue;
|
||||
|
||||
const id = m.leagueId ?? m.leagueName;
|
||||
if (!map.has(id)) {
|
||||
map.set(id, { id, name: m.leagueName });
|
||||
}
|
||||
}
|
||||
return [...map.values()].sort((a, b) => a.name.localeCompare(b.name));
|
||||
});
|
||||
|
||||
watch(() => filterState.value.time, () => {
|
||||
filterState.value.leagueIds = [];
|
||||
});
|
||||
|
||||
const dropdownOpen = ref(false);
|
||||
|
||||
const selectedLeagueName = computed(() => {
|
||||
if (filterState.value.leagueIds.length === 0) return '';
|
||||
const firstId = filterState.value.leagueIds[0];
|
||||
const lg = availableLeagues.value.find(l => l.id === firstId);
|
||||
return lg ? lg.name : '';
|
||||
});
|
||||
|
||||
function selectLeague(id: string) {
|
||||
if (id === '') {
|
||||
filterState.value.leagueIds = [];
|
||||
} else {
|
||||
filterState.value.leagueIds = [id];
|
||||
}
|
||||
dropdownOpen.value = false;
|
||||
}
|
||||
|
||||
function toggleStatusOpen() {
|
||||
filterState.value.status = filterState.value.status === 'open' ? 'all' : 'open';
|
||||
}
|
||||
|
||||
function buildLeagueGroups(source: Match[]): LeagueGroup[] {
|
||||
@@ -133,32 +186,28 @@ function buildLeagueGroups(source: Match[]): LeagueGroup[] {
|
||||
);
|
||||
}
|
||||
|
||||
const todayLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('today')));
|
||||
const earlyLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('early')));
|
||||
const leagueGroups = computed(() => buildLeagueGroups(filteredMatches.value));
|
||||
|
||||
function syncExpandedLeagues(groups: LeagueGroup[], tab: TimeTab) {
|
||||
const current = expandedLeagues.value[tab];
|
||||
const ids = new Set(current);
|
||||
const expandedLeagues = ref(new Set<string>());
|
||||
|
||||
watch(leagueGroups, (groups) => {
|
||||
const ids = new Set(expandedLeagues.value);
|
||||
for (const id of [...ids]) {
|
||||
if (!groups.some((g) => g.leagueId === id)) ids.delete(id);
|
||||
}
|
||||
if (groups.length > 0 && ids.size === 0) {
|
||||
ids.add(groups[0].leagueId);
|
||||
}
|
||||
if (ids.size !== current.size || [...ids].some((id) => !current.has(id))) {
|
||||
expandedLeagues.value = { ...expandedLeagues.value, [tab]: ids };
|
||||
if (ids.size !== expandedLeagues.value.size || [...ids].some((id) => !expandedLeagues.value.has(id))) {
|
||||
expandedLeagues.value = ids;
|
||||
}
|
||||
}
|
||||
|
||||
watch(todayLeagueGroups, (groups) => syncExpandedLeagues(groups, 'today'));
|
||||
watch(earlyLeagueGroups, (groups) => syncExpandedLeagues(groups, 'early'));
|
||||
});
|
||||
|
||||
function toggleLeague(leagueId: string) {
|
||||
const tab = timeTab.value;
|
||||
const next = new Set(expandedLeagues.value[tab]);
|
||||
const next = new Set(expandedLeagues.value);
|
||||
if (next.has(leagueId)) next.delete(leagueId);
|
||||
else next.add(leagueId);
|
||||
expandedLeagues.value = { ...expandedLeagues.value, [tab]: next };
|
||||
expandedLeagues.value = next;
|
||||
}
|
||||
|
||||
function selectMainTab(tab: MainTab) {
|
||||
@@ -168,7 +217,7 @@ function selectMainTab(tab: MainTab) {
|
||||
|
||||
onActivated(() => {
|
||||
filterNow.value = new Date();
|
||||
timeTab.value = 'today';
|
||||
filterState.value.time = 'all';
|
||||
void loadSummary(true, true);
|
||||
});
|
||||
|
||||
@@ -208,72 +257,90 @@ function goMatch(id: string) {
|
||||
</div>
|
||||
|
||||
<div :class="['tab-panel', { 'tab-panel--hidden': mainTab !== 'matches' }]">
|
||||
<div class="time-tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="time-tab"
|
||||
:class="{ active: timeTab === 'today', 'tab-gold-active': timeTab === 'today' }"
|
||||
@click="timeTab = 'today'"
|
||||
>
|
||||
{{ t('bet.tab_today') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="time-tab"
|
||||
:class="{ active: timeTab === 'early', 'tab-gold-active': timeTab === 'early' }"
|
||||
@click="timeTab = 'early'"
|
||||
>
|
||||
{{ t('bet.tab_early') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="filters-bar">
|
||||
<div class="phase-filter">
|
||||
<div class="league-dropdown">
|
||||
<button type="button" class="dropdown-trigger" @click="dropdownOpen = !dropdownOpen">
|
||||
<span>{{ selectedLeagueName || t('bet.filter_leagues_all') }}</span>
|
||||
<span class="arrow-icon" :class="{ open: dropdownOpen }">▼</span>
|
||||
</button>
|
||||
<div v-if="dropdownOpen" class="dropdown-backdrop" @click="dropdownOpen = false"></div>
|
||||
<div v-if="dropdownOpen" class="dropdown-menu">
|
||||
<div
|
||||
class="dropdown-item"
|
||||
:class="{ active: filterState.leagueIds.length === 0 }"
|
||||
@click="selectLeague('')"
|
||||
>
|
||||
{{ t('bet.filter_leagues_all') }}
|
||||
</div>
|
||||
<div
|
||||
v-for="lg in availableLeagues"
|
||||
:key="lg.id"
|
||||
class="dropdown-item"
|
||||
:class="{ active: filterState.leagueIds.includes(lg.id) }"
|
||||
@click="selectLeague(lg.id)"
|
||||
>
|
||||
{{ lg.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phase-filter">
|
||||
<button
|
||||
type="button"
|
||||
class="phase-toggle"
|
||||
:class="{ 'phase-toggle--active': !showAll }"
|
||||
:aria-pressed="!showAll"
|
||||
@click="showAll = !showAll"
|
||||
>
|
||||
<span class="phase-toggle-dot" />
|
||||
{{ t('bet.show_open_only') }}
|
||||
</button>
|
||||
<div class="right-filters">
|
||||
<div class="time-tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="time-tab"
|
||||
:class="{ active: filterState.time === 'all' }"
|
||||
@click="filterState.time = 'all'"
|
||||
>
|
||||
{{ t('bet.filter_status_all') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="time-tab"
|
||||
:class="{ active: filterState.time === 'today' }"
|
||||
@click="filterState.time = 'today'"
|
||||
>
|
||||
{{ t('bet.tab_today') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="time-tab"
|
||||
:class="{ active: filterState.time === 'early' }"
|
||||
@click="filterState.time = 'early'"
|
||||
>
|
||||
{{ t('bet.tab_early') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="status-toggle-btn"
|
||||
:class="{ active: filterState.status === 'open' }"
|
||||
@click="toggleStatusOpen"
|
||||
>
|
||||
{{ t('bet.filter_status_open') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="state">
|
||||
<GoldSpinner :size="36" />
|
||||
</div>
|
||||
<template v-else>
|
||||
<div v-show="timeTab === 'today'">
|
||||
<div v-if="todayLeagueGroups.length" class="league-list">
|
||||
<div>
|
||||
<div v-if="leagueGroups.length" class="league-list">
|
||||
<LeagueAccordionItem
|
||||
v-for="group in todayLeagueGroups"
|
||||
:key="`today-${group.leagueId}`"
|
||||
v-for="group in leagueGroups"
|
||||
:key="group.leagueId"
|
||||
:league-id="group.leagueId"
|
||||
:league-name="group.leagueName"
|
||||
:league-logo-url="group.leagueLogoUrl"
|
||||
:matches="group.matches"
|
||||
:expanded="expandedLeagues.today.has(group.leagueId)"
|
||||
@toggle="toggleLeague(group.leagueId)"
|
||||
@bet="goMatch"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="empty">
|
||||
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
|
||||
<p>{{ t('bet.no_matches') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="timeTab === 'early'">
|
||||
<div v-if="earlyLeagueGroups.length" class="league-list">
|
||||
<LeagueAccordionItem
|
||||
v-for="group in earlyLeagueGroups"
|
||||
:key="`early-${group.leagueId}`"
|
||||
:league-id="group.leagueId"
|
||||
:league-name="group.leagueName"
|
||||
:league-logo-url="group.leagueLogoUrl"
|
||||
:matches="group.matches"
|
||||
:expanded="expandedLeagues.early.has(group.leagueId)"
|
||||
:expanded="expandedLeagues.has(group.leagueId)"
|
||||
@toggle="toggleLeague(group.leagueId)"
|
||||
@bet="goMatch"
|
||||
/>
|
||||
@@ -292,6 +359,8 @@ function goMatch(id: string) {
|
||||
:activated="mainTab === 'outright'"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -307,7 +376,7 @@ function goMatch(id: string) {
|
||||
.bet-page {
|
||||
margin: 0 -16px;
|
||||
padding-bottom: 8px;
|
||||
background: #E8EDF2;
|
||||
background: var(--bg-body);
|
||||
}
|
||||
|
||||
/* Tab panel toggle: avoid display:none to prevent browser releasing image resources */
|
||||
@@ -341,22 +410,22 @@ function goMatch(id: string) {
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 8px;
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #CBD5E1;
|
||||
color: #6B7280;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow);
|
||||
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.main-tab.active {
|
||||
font-weight: 700;
|
||||
background: #EBF3FB;
|
||||
border-color: #003D6B;
|
||||
color: #003D6B;
|
||||
background: rgba(244, 162, 97, 0.1);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
@@ -364,68 +433,166 @@ function goMatch(id: string) {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.time-tabs {
|
||||
.filters-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 0 12px 14px;
|
||||
}
|
||||
|
||||
.time-tab {
|
||||
flex: 1;
|
||||
padding: 9px 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #003D6B;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #CBD5E1;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.time-tab.active {
|
||||
background: #003D6B !important;
|
||||
border-color: #003D6B !important;
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px rgba(0, 61, 107, 0.25);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
padding: 0 16px 12px;
|
||||
}
|
||||
|
||||
.phase-filter {
|
||||
padding: 0 12px 10px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.phase-toggle {
|
||||
.right-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.time-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.time-tab {
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.time-tab.active {
|
||||
color: var(--primary-light);
|
||||
background: rgba(244, 162, 97, 0.15);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.right-filters .divider {
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.status-toggle-btn {
|
||||
padding: 0 8px;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status-toggle-btn.active {
|
||||
color: var(--primary-light);
|
||||
background: rgba(244, 162, 97, 0.15);
|
||||
border-color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* League Dropdown Selector */
|
||||
.league-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #6B7280;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #CBD5E1;
|
||||
padding: 0 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.phase-toggle--active {
|
||||
color: #003D6B;
|
||||
border-color: #003D6B;
|
||||
background: rgba(0, 61, 107, 0.06);
|
||||
.dropdown-trigger .arrow-icon {
|
||||
font-size: 8px;
|
||||
color: var(--text-muted);
|
||||
transition: transform 0.2s ease;
|
||||
display: inline-block;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.phase-toggle-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #CBD5E1;
|
||||
transition: background 0.2s ease;
|
||||
.dropdown-trigger .arrow-icon.open {
|
||||
transform: scale(0.8) rotate(180deg);
|
||||
}
|
||||
|
||||
.phase-toggle--active .phase-toggle-dot {
|
||||
background: #003D6B;
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 98;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
min-width: 140px;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
background: var(--bg-card-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:active {
|
||||
background: var(--bg-body);
|
||||
}
|
||||
|
||||
.dropdown-item.active {
|
||||
color: var(--primary-light);
|
||||
background: rgba(244, 162, 97, 0.1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.league-list {
|
||||
@@ -436,7 +603,7 @@ function goMatch(id: string) {
|
||||
.placeholder,
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
padding: 48px 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -197,30 +197,48 @@ function goLogin() {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
|
||||
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
|
||||
background-color: var(--bg-body);
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.login-page::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(15, 32, 39, 0.7);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-page::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.form-title {
|
||||
margin: 0 0 2px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -232,7 +250,7 @@ function goLogin() {
|
||||
|
||||
label {
|
||||
font-size: 10px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
@@ -241,22 +259,22 @@ label {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
color: rgba(107, 114, 128, 0.6);
|
||||
color: rgba(148, 163, 184, 0.6);
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066CC;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
|
||||
}
|
||||
|
||||
.inline-row {
|
||||
@@ -274,10 +292,10 @@ label {
|
||||
flex-shrink: 0;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #F5F7FA;
|
||||
color: #003D6B;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
@@ -307,19 +325,19 @@ label {
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-skip:active {
|
||||
color: #005B9F;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -164,23 +164,41 @@ function goRegister() {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 34vh 20px calc(15vh + max(28px, env(safe-area-inset-bottom)));
|
||||
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
|
||||
background-color: var(--bg-body);
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.login-page::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(15, 32, 39, 0.7);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-page::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.field {
|
||||
@@ -193,18 +211,18 @@ function goRegister() {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066CC;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
|
||||
}
|
||||
|
||||
.inline-row {
|
||||
@@ -220,7 +238,7 @@ function goRegister() {
|
||||
|
||||
label {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@@ -231,7 +249,7 @@ label {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #005B9F;
|
||||
color: var(--primary-light);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -243,18 +261,18 @@ label {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-forgot:active {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.btn-mode-switch:active {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
@@ -276,14 +294,14 @@ label {
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-skip:active {
|
||||
color: #005B9F;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.btn-skip-light {
|
||||
@@ -291,10 +309,12 @@ label {
|
||||
bottom: calc(20px + env(safe-area-inset-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
@@ -302,18 +322,18 @@ label {
|
||||
}
|
||||
|
||||
.btn-skip-light:active {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.success {
|
||||
margin: 0;
|
||||
color: #059669;
|
||||
color: var(--success);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
|
||||
@@ -307,11 +307,11 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
<svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="hzDetailGrad" 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
|
||||
@@ -360,7 +360,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
|
||||
<!-- 我的投注 -->
|
||||
<section v-if="myBets.length" class="my-bets-section">
|
||||
<h3 class="my-bets-title">{{ t('history.my_bets') || '我的投注' }}</h3>
|
||||
<h3 class="my-bets-title">{{ t('history.my_bets') }}</h3>
|
||||
<div class="my-bets-list">
|
||||
<div v-for="bet in myBets" :key="bet.betNo" class="my-bet-card" @click="router.push(`/bets/${bet.betNo}`)">
|
||||
<div class="bet-header">
|
||||
@@ -423,7 +423,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
.detail-page {
|
||||
margin: 0 -16px;
|
||||
padding-bottom: 16px;
|
||||
background: #E8EDF2;
|
||||
background: var(--bg-body);
|
||||
}
|
||||
|
||||
.pull-indicator {
|
||||
@@ -444,8 +444,9 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
top: -12px;
|
||||
z-index: 50;
|
||||
margin-top: -12px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #CBD5E1;
|
||||
background: var(--bg-glass);
|
||||
border-bottom: 1px solid var(--border);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
@@ -453,7 +454,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #003D6B;
|
||||
color: var(--primary-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -471,9 +472,9 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #F5F7FA;
|
||||
color: #003D6B;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-body);
|
||||
color: var(--primary-light);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
@@ -491,10 +492,10 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
margin: 0 12px 10px;
|
||||
padding: 14px 12px 16px;
|
||||
overflow: hidden;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #CBD5E1;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.match-hero--phase {
|
||||
@@ -516,17 +517,17 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
}
|
||||
|
||||
.status-tag--settled {
|
||||
background: #E8EDF2;
|
||||
color: #4B5563;
|
||||
border-bottom: 1px solid #D1D5DB;
|
||||
border-left: 1px solid #D1D5DB;
|
||||
background: var(--secondary);
|
||||
color: var(--text-muted);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.status-tag--pending {
|
||||
background: #FEF3C7;
|
||||
color: #92400E;
|
||||
border-bottom: 1px solid #FDE68A;
|
||||
border-left: 1px solid #FDE68A;
|
||||
background: rgba(255, 179, 0, 0.1);
|
||||
color: #FFB300;
|
||||
border-bottom: 1px solid rgba(255, 179, 0, 0.25);
|
||||
border-left: 1px solid rgba(255, 179, 0, 0.25);
|
||||
}
|
||||
|
||||
/* -- market panel smaller status tag -- */
|
||||
@@ -544,17 +545,17 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
}
|
||||
|
||||
.market-status-tag--settled {
|
||||
background: #E8EDF2;
|
||||
color: #4B5563;
|
||||
border-bottom: 1px solid #D1D5DB;
|
||||
border-left: 1px solid #D1D5DB;
|
||||
background: var(--secondary);
|
||||
color: var(--text-muted);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.market-status-tag--pending {
|
||||
background: #FEF3C7;
|
||||
color: #92400E;
|
||||
border-bottom: 1px solid #FDE68A;
|
||||
border-left: 1px solid #FDE68A;
|
||||
background: rgba(255, 179, 0, 0.1);
|
||||
color: #FFB300;
|
||||
border-bottom: 1px solid rgba(255, 179, 0, 0.25);
|
||||
border-left: 1px solid rgba(255, 179, 0, 0.25);
|
||||
}
|
||||
|
||||
.market-panel-wrap {
|
||||
@@ -570,7 +571,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
padding-left: 2px;
|
||||
@@ -582,17 +583,17 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
margin: 8px 0 0;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #003D6B;
|
||||
color: var(--primary-light);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-stats-section {
|
||||
margin: 0 10px 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid #CBD5E1;
|
||||
border-radius: 8px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-card);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.result-stats-head {
|
||||
@@ -608,7 +609,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
color: #003D6B;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.result-stats-head span {
|
||||
@@ -618,7 +619,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.result-stats-grid {
|
||||
@@ -635,8 +636,8 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
background: #F5F7FA;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-body);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.result-stat-label {
|
||||
@@ -645,7 +646,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.result-stat-value {
|
||||
@@ -653,7 +654,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hero-teams {
|
||||
@@ -677,7 +678,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
.hero-name {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
line-height: 1.25;
|
||||
white-space: nowrap;
|
||||
@@ -712,7 +713,7 @@ function onPickSelection(selId: string, marketId: 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;
|
||||
}
|
||||
|
||||
@@ -737,11 +738,11 @@ function onPickSelection(selId: string, marketId: 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);
|
||||
@@ -783,11 +784,11 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
@keyframes vs-glow {
|
||||
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));
|
||||
filter: drop-shadow(0 0 3px rgba(244, 162, 97, 0.5)) drop-shadow(0 0 6px rgba(255, 185, 128, 0.25));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -807,17 +808,17 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
}
|
||||
|
||||
.market-group {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #CBD5E1;
|
||||
background: #FFFFFF;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.market-group.open {
|
||||
border-color: #9CA3AF;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
border-color: var(--border);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.market-group :deep(.row) {
|
||||
@@ -834,9 +835,9 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
margin: 0 8px 10px;
|
||||
padding: 9px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #F5F7FA;
|
||||
color: #003D6B;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-body);
|
||||
color: var(--primary-light);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -844,13 +845,13 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
.state {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cs-toast {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #003D6B;
|
||||
color: var(--primary-light);
|
||||
padding: 2px 0 6px;
|
||||
}
|
||||
|
||||
@@ -863,7 +864,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
.my-bets-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
@@ -874,17 +875,17 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
}
|
||||
|
||||
.my-bet-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #CBD5E1;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.my-bet-card:active {
|
||||
background: #F5F7FA;
|
||||
background: var(--bg-body);
|
||||
}
|
||||
|
||||
.bet-header {
|
||||
@@ -897,7 +898,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
.bet-type {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -914,18 +915,18 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
}
|
||||
|
||||
.bet-status-won {
|
||||
background: #E6F4EA;
|
||||
color: #059669;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.bet-status-lost {
|
||||
background: #FDE8E8;
|
||||
color: #DC2626;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #EF4444;
|
||||
}
|
||||
|
||||
.bet-status-pending {
|
||||
background: #FEF3C7;
|
||||
color: #D97706;
|
||||
background: rgba(255, 179, 0, 0.1);
|
||||
color: #FFB300;
|
||||
}
|
||||
|
||||
.bet-footer {
|
||||
@@ -936,7 +937,7 @@ function onPickSelection(selId: string, marketId: string) {
|
||||
|
||||
.bet-stake {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.bet-return {
|
||||
|
||||
@@ -176,16 +176,16 @@ const pullIndicatorStyle = () => ({
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #6B7280;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
color: #003D6B;
|
||||
background: rgba(0, 61, 107, 0.08);
|
||||
border-color: #003D6B;
|
||||
color: var(--primary);
|
||||
background: rgba(244, 162, 97, 0.15);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.state {
|
||||
@@ -194,7 +194,7 @@ const pullIndicatorStyle = () => ({
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
padding: 56px 20px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -217,7 +217,7 @@ const pullIndicatorStyle = () => ({
|
||||
.end-hint {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
padding: 16px 0 4px;
|
||||
letter-spacing: 0.03em;
|
||||
|
||||
@@ -328,7 +328,7 @@ function back() {
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
@@ -338,14 +338,14 @@ function back() {
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.avatar-card,
|
||||
.form-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -361,12 +361,12 @@ function back() {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #E5E7EB;
|
||||
border: 2px solid var(--border);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #E8EDF2;
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
@@ -379,9 +379,9 @@ function back() {
|
||||
.avatar-change-btn {
|
||||
padding: 7px 18px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #003D6B;
|
||||
background: rgba(0, 61, 107, 0.04);
|
||||
color: #003D6B;
|
||||
border: 1px solid var(--primary);
|
||||
background: rgba(244, 162, 97, 0.1);
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -396,12 +396,12 @@ function back() {
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 1px;
|
||||
background: #E5E7EB;
|
||||
background: var(--border);
|
||||
margin: 6px 0 12px;
|
||||
}
|
||||
|
||||
@@ -412,13 +412,13 @@ function back() {
|
||||
justify-content: space-between;
|
||||
padding: 4px 0 12px;
|
||||
background: none;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
transition: transform 0.15s ease;
|
||||
@@ -442,7 +442,7 @@ function back() {
|
||||
|
||||
.field-hint {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
margin: 6px 0 0;
|
||||
line-height: 1.45;
|
||||
}
|
||||
@@ -469,10 +469,10 @@ function back() {
|
||||
min-width: 48px;
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
border-left: 1px solid #E5E7EB;
|
||||
border-left: 1px solid var(--border);
|
||||
border-radius: 0 6px 6px 0;
|
||||
background: #F5F7FA;
|
||||
color: #003D6B;
|
||||
background: var(--bg-body);
|
||||
color: var(--primary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
@@ -491,7 +491,7 @@ function back() {
|
||||
label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@@ -504,28 +504,28 @@ label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066CC;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
|
||||
border-color: var(--border-active);
|
||||
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.2);
|
||||
}
|
||||
|
||||
.field-input:-webkit-autofill,
|
||||
.field-input:-webkit-autofill:hover,
|
||||
.field-input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: #1A1A2E;
|
||||
box-shadow: 0 0 0 1000px #FFFFFF inset;
|
||||
border: 1px solid #E5E7EB;
|
||||
-webkit-text-fill-color: var(--text);
|
||||
box-shadow: 0 0 0 1000px var(--bg-input) inset;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
color: rgba(107, 114, 128, 0.6);
|
||||
color: rgba(148, 163, 184, 0.5);
|
||||
}
|
||||
|
||||
.readonly {
|
||||
@@ -555,10 +555,10 @@ label {
|
||||
}
|
||||
|
||||
.msg.ok {
|
||||
color: #059669;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.msg.err {
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -142,21 +142,21 @@ const balanceAmountClass = computed(() => {
|
||||
</div>
|
||||
|
||||
<div class="bank-card-balance">
|
||||
<span class="bank-card-label">当前余额</span>
|
||||
<span class="bank-card-label">{{ t('wallet.balance') }}</span>
|
||||
<p class="bank-card-number balance-amount" :class="balanceAmountClass">{{ balanceDisplay }}</p>
|
||||
</div>
|
||||
|
||||
<div class="bank-card-footer">
|
||||
<div class="bank-card-field">
|
||||
<span class="bank-card-label">持卡人</span>
|
||||
<span class="bank-card-label">{{ t('wallet.card_holder') }}</span>
|
||||
<span class="bank-card-holder">{{ profileRaw?.username }}</span>
|
||||
</div>
|
||||
<div class="bank-card-field bank-card-field--center">
|
||||
<span class="bank-card-label">累计返水</span>
|
||||
<span class="bank-card-label">{{ t('cashback.total_received') }}</span>
|
||||
<span class="bank-card-stat">{{ formatMoney(cashbackTotal, locale) }}</span>
|
||||
</div>
|
||||
<div class="bank-card-field bank-card-field--right">
|
||||
<span class="bank-card-label">未结算</span>
|
||||
<span class="bank-card-label">{{ t('wallet.unsettled') }}</span>
|
||||
<span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -288,7 +288,7 @@ const balanceAmountClass = computed(() => {
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -296,16 +296,16 @@ const balanceAmountClass = computed(() => {
|
||||
.retry-btn {
|
||||
padding: 8px 24px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #003D6B;
|
||||
border: 1px solid var(--primary);
|
||||
background: transparent;
|
||||
color: #005B9F;
|
||||
color: var(--primary-light);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.retry-btn:active {
|
||||
background: rgba(0, 61, 107, 0.08);
|
||||
background: rgba(244, 162, 97, 0.15);
|
||||
}
|
||||
|
||||
.wallet-banner {
|
||||
@@ -315,7 +315,7 @@ const balanceAmountClass = computed(() => {
|
||||
aspect-ratio: 1.75 / 1;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.wallet-banner::after {
|
||||
@@ -346,9 +346,9 @@ const balanceAmountClass = computed(() => {
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#003D6B 0%,
|
||||
#005B9F 50%,
|
||||
#003D6B 100%
|
||||
#0F2027 0%,
|
||||
#F4A261 50%,
|
||||
#203A43 100%
|
||||
);
|
||||
}
|
||||
|
||||
@@ -523,74 +523,84 @@ const balanceAmountClass = computed(() => {
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-areas:
|
||||
"a a b b"
|
||||
"c c d d";
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.qa-item:nth-child(1) { grid-area: a; }
|
||||
.qa-item:nth-child(2) { grid-area: b; }
|
||||
.qa-item:nth-child(3) { grid-area: c; }
|
||||
.qa-item:nth-child(4) { grid-area: d; }
|
||||
|
||||
.qa-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 14px 4px 12px;
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #CBD5E1;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
gap: 10px;
|
||||
padding: 12px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qa-item:active {
|
||||
transform: scale(0.96);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.qa-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.qa-icon--wallet {
|
||||
background: rgba(0, 61, 107, 0.1);
|
||||
color: #003D6B;
|
||||
background: rgba(244, 162, 97, 0.15);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.qa-icon--recharge {
|
||||
background: rgba(5, 150, 105, 0.1);
|
||||
color: #059669;
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.qa-icon--cashback {
|
||||
background: rgba(248, 151, 31, 0.1);
|
||||
color: #E8870A;
|
||||
background: rgba(255, 179, 0, 0.15);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.qa-icon--history {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
color: #6366F1;
|
||||
background: rgba(244, 162, 97, 0.15);
|
||||
color: #F4A261;
|
||||
}
|
||||
|
||||
.qa-label {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1A1A2E;
|
||||
text-align: center;
|
||||
color: var(--text);
|
||||
text-align: left;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -604,11 +614,11 @@ const balanceAmountClass = computed(() => {
|
||||
min-height: 42px;
|
||||
padding: 0 14px;
|
||||
background: none;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.settings-cell:last-child {
|
||||
@@ -616,7 +626,7 @@ const balanceAmountClass = computed(() => {
|
||||
}
|
||||
|
||||
.settings-cell:active {
|
||||
background: #F5F7FA;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.settings-cell--stack {
|
||||
@@ -639,7 +649,7 @@ const balanceAmountClass = computed(() => {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cell-head {
|
||||
@@ -649,11 +659,11 @@ const balanceAmountClass = computed(() => {
|
||||
}
|
||||
|
||||
.cell-label {
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.cell-chevron {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
@@ -672,7 +682,7 @@ const balanceAmountClass = computed(() => {
|
||||
|
||||
.rules-cell .rules-body {
|
||||
padding: 0 14px 12px;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.lang-segment {
|
||||
@@ -687,19 +697,23 @@ const balanceAmountClass = computed(() => {
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-height: 30px;
|
||||
min-width: 0;
|
||||
padding: 0 5px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
color: #6B7280;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lang-opt.active {
|
||||
border-color: #003D6B;
|
||||
color: #003D6B;
|
||||
background: rgba(0, 61, 107, 0.06);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
background: rgba(244, 162, 97, 0.12);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
@@ -708,21 +722,21 @@ const balanceAmountClass = computed(() => {
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #DC2626;
|
||||
background: #FFFFFF;
|
||||
color: #DC2626;
|
||||
border: 1px solid var(--danger);
|
||||
background: var(--bg-card);
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logout-btn:active {
|
||||
background: rgba(220, 38, 38, 0.06);
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
|
||||
.rules-body {
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.rules-body p {
|
||||
|
||||
@@ -411,24 +411,24 @@ function auditStepCount(order: DepositOrder) {
|
||||
<style scoped>
|
||||
.recharge-history-page { padding: 0 16px 24px; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
|
||||
.page-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: #1A1A2E; }
|
||||
.back-btn { background: none; border: none; color: #003D6B; font-size: 24px; cursor: pointer; padding: 0 8px; }
|
||||
.recharge-btn { background: none; border: none; color: #003D6B; font-size: 13px; cursor: pointer; font-weight: 600; }
|
||||
.page-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
|
||||
.back-btn { background: none; border: none; color: var(--primary); font-size: 24px; cursor: pointer; padding: 0 8px; }
|
||||
.recharge-btn { background: none; border: none; color: var(--primary); font-size: 13px; cursor: pointer; font-weight: 600; }
|
||||
.state { display: flex; justify-content: center; padding: 48px; }
|
||||
.empty { text-align: center; color: #6B7280; padding: 48px 16px; font-weight: 600; }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 48px 16px; font-weight: 600; }
|
||||
.pull-indicator { display: flex; align-items: center; justify-content: center; overflow: hidden; transition: height 0.15s ease; }
|
||||
|
||||
.order-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.order-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.order-card:active {
|
||||
opacity: 0.92;
|
||||
@@ -438,66 +438,66 @@ function auditStepCount(order: DepositOrder) {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #003D6B, transparent);
|
||||
background: linear-gradient(90deg, transparent, #F4A261, transparent);
|
||||
}
|
||||
.order-card.rejected {
|
||||
background: #FFFFFF;
|
||||
border-color: rgba(220, 38, 38, 0.25);
|
||||
background: var(--bg-card);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
.order-card.rejected::before {
|
||||
background: linear-gradient(90deg, transparent, #DC2626, transparent);
|
||||
background: linear-gradient(90deg, transparent, #EF4444, transparent);
|
||||
}
|
||||
.order-card.rejected .order-amount {
|
||||
background: none;
|
||||
-webkit-background-clip: unset;
|
||||
background-clip: unset;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.order-card.rejected .info-label {
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
|
||||
.method-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
|
||||
.method-badge.bank { background: rgba(0, 61, 107, 0.08); color: #005B9F; }
|
||||
.method-badge.usdt { background: rgba(5, 150, 105, 0.08); color: #059669; }
|
||||
.method-badge.bank { background: rgba(244, 162, 97, 0.15); color: var(--primary-light); }
|
||||
.method-badge.usdt { background: rgba(16, 185, 129, 0.15); color: var(--success); }
|
||||
.status-badge { font-size: 12px; font-weight: 700; }
|
||||
.status-pending { color: #F8971F; }
|
||||
.status-approved { color: #059669; }
|
||||
.status-rejected { color: #DC2626; }
|
||||
.status-pending { color: var(--warning); }
|
||||
.status-approved { color: var(--success); }
|
||||
.status-rejected { color: var(--danger); }
|
||||
.order-body { }
|
||||
.order-amount {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 4px;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
.approved-amount { font-size: 12px; color: #059669; margin-bottom: 6px; font-weight: 600; }
|
||||
.approved-amount { font-size: 12px; color: var(--success); margin-bottom: 6px; font-weight: 600; }
|
||||
.order-info-row { margin-bottom: 8px; }
|
||||
.info-label { font-size: 13px; color: #003D6B; font-weight: 600; }
|
||||
.info-label { font-size: 13px; color: var(--primary); font-weight: 600; }
|
||||
.order-times { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
|
||||
.time-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.time-label { font-size: 11px; color: #6B7280; }
|
||||
.time-value { font-size: 11px; color: #1A1A2E; font-variant-numeric: tabular-nums; }
|
||||
.time-label { font-size: 11px; color: var(--text-muted); }
|
||||
.time-value { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
|
||||
.order-remark {
|
||||
font-size: 12px;
|
||||
color: #003D6B;
|
||||
background: rgba(0, 61, 107, 0.04);
|
||||
color: var(--primary);
|
||||
background: rgba(244, 162, 97, 0.08);
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
margin-top: 6px;
|
||||
border-left: 2px solid #003D6B;
|
||||
border-left: 2px solid var(--primary);
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
.reject-reason {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
background: transparent;
|
||||
padding: 6px 0 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(220, 38, 38, 0.18);
|
||||
border-top: 1px solid rgba(239, 68, 68, 0.25);
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -508,16 +508,16 @@ function auditStepCount(order: DepositOrder) {
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.card-detail-summary {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-detail-link {
|
||||
font-size: 11px;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -530,7 +530,7 @@ function auditStepCount(order: DepositOrder) {
|
||||
background: none;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -548,7 +548,7 @@ function auditStepCount(order: DepositOrder) {
|
||||
.end-hint {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
padding: 16px 0 4px;
|
||||
letter-spacing: 0.03em;
|
||||
@@ -558,7 +558,7 @@ function auditStepCount(order: DepositOrder) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
@@ -571,12 +571,12 @@ function auditStepCount(order: DepositOrder) {
|
||||
max-width: 480px;
|
||||
max-height: min(88vh, 720px);
|
||||
overflow-y: auto;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-bottom: none;
|
||||
border-radius: 14px 14px 0 0;
|
||||
padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
|
||||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.detail-close {
|
||||
@@ -588,7 +588,7 @@ function auditStepCount(order: DepositOrder) {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
@@ -598,15 +598,15 @@ function auditStepCount(order: DepositOrder) {
|
||||
margin: 0 28px 12px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.detail-summary {
|
||||
margin-bottom: 14px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: #F5F7FA;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-body);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.detail-summary-head {
|
||||
@@ -620,13 +620,13 @@ function auditStepCount(order: DepositOrder) {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.detail-method-name {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@@ -641,13 +641,13 @@ function auditStepCount(order: DepositOrder) {
|
||||
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 12px;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
text-align: right;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -655,12 +655,12 @@ function auditStepCount(order: DepositOrder) {
|
||||
.detail-summary .order-remark {
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
background: transparent;
|
||||
padding: 6px 0 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
border-top: 1px solid var(--border);
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -668,12 +668,12 @@ function auditStepCount(order: DepositOrder) {
|
||||
.detail-summary .reject-reason {
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
background: transparent;
|
||||
padding: 6px 0 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(220, 38, 38, 0.15);
|
||||
border-top: 1px solid rgba(239, 68, 68, 0.2);
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -686,14 +686,14 @@ function auditStepCount(order: DepositOrder) {
|
||||
.detail-audit {
|
||||
margin-top: 2px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.detail-audit-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
@@ -721,7 +721,7 @@ function auditStepCount(order: DepositOrder) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #E5E7EB;
|
||||
background: var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -730,7 +730,7 @@ function auditStepCount(order: DepositOrder) {
|
||||
width: 1px;
|
||||
min-height: 10px;
|
||||
margin: 3px 0;
|
||||
background: #E5E7EB;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.audit-step-body {
|
||||
@@ -753,13 +753,13 @@ function auditStepCount(order: DepositOrder) {
|
||||
.audit-step-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.audit-step-time {
|
||||
font-size: 10px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
@@ -768,7 +768,7 @@ function auditStepCount(order: DepositOrder) {
|
||||
.audit-step-actor {
|
||||
margin: 2px 0 0;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -776,14 +776,14 @@ function auditStepCount(order: DepositOrder) {
|
||||
margin: 3px 0 0;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #059669;
|
||||
color: var(--success);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.audit-step-note {
|
||||
margin: 4px 0 0;
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -801,35 +801,35 @@ function auditStepCount(order: DepositOrder) {
|
||||
|
||||
.audit-step-box--reject {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(220, 38, 38, 0.22);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.audit-step-box-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.audit-step-box-text {
|
||||
font-size: 11px;
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.audit-step--submitted .audit-dot {
|
||||
background: #003D6B;
|
||||
background: var(--primary);
|
||||
}
|
||||
.audit-step--approved .audit-dot {
|
||||
background: #059669;
|
||||
background: var(--success);
|
||||
}
|
||||
.audit-step--rejected .audit-dot {
|
||||
background: #DC2626;
|
||||
background: var(--danger);
|
||||
}
|
||||
.audit-step--revoked .audit-dot {
|
||||
background: #6B7280;
|
||||
background: var(--text-muted);
|
||||
}
|
||||
.audit-step--reopened .audit-dot {
|
||||
background: #003D6B;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.modal-reapply-btn {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -227,24 +227,41 @@ const fieldError = () => {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
|
||||
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
|
||||
background-color: var(--bg-body);
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.login-page::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(15, 32, 39, 0.7);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-page::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.login-form.is-busy {
|
||||
@@ -261,8 +278,8 @@ const fieldError = () => {
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: inherit;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(2px);
|
||||
background: rgba(15, 32, 39, 0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@@ -270,7 +287,7 @@ const fieldError = () => {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
@@ -285,7 +302,7 @@ const fieldError = () => {
|
||||
margin: 0 0 2px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -301,7 +318,7 @@ const fieldError = () => {
|
||||
|
||||
label {
|
||||
font-size: 10px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
@@ -309,29 +326,29 @@ label {
|
||||
.optional-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.field-input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
color: rgba(107, 114, 128, 0.6);
|
||||
color: rgba(148, 163, 184, 0.6);
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
outline: none;
|
||||
border-color: #0066CC;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
|
||||
}
|
||||
|
||||
.inline-row {
|
||||
@@ -349,10 +366,10 @@ label {
|
||||
flex-shrink: 0;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #F5F7FA;
|
||||
color: #003D6B;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
@@ -386,14 +403,14 @@ label {
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-skip:active {
|
||||
color: #005B9F;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.btn-skip-light {
|
||||
@@ -401,10 +418,11 @@ label {
|
||||
bottom: calc(20px + env(safe-area-inset-bottom));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
@@ -412,12 +430,12 @@ label {
|
||||
}
|
||||
|
||||
.btn-skip-light:active {
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #DC2626;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
|
||||
@@ -238,7 +238,7 @@ const pullIndicatorStyle = () => ({
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
padding: 4px 0 8px;
|
||||
@@ -273,16 +273,16 @@ const pullIndicatorStyle = () => ({
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #6B7280;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
color: #FFFFFF;
|
||||
background: #003D6B;
|
||||
border-color: #003D6B;
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.state {
|
||||
@@ -291,7 +291,7 @@ const pullIndicatorStyle = () => ({
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
padding: 56px 20px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -312,8 +312,8 @@ const pullIndicatorStyle = () => ({
|
||||
font-size: 14px;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -322,7 +322,7 @@ const pullIndicatorStyle = () => ({
|
||||
}
|
||||
|
||||
.tx-row:active {
|
||||
background: #F5F7FA;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.tx-main {
|
||||
@@ -341,7 +341,7 @@ const pullIndicatorStyle = () => ({
|
||||
|
||||
.tx-summary {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -355,11 +355,11 @@ const pullIndicatorStyle = () => ({
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tx-type { font-weight: 700; color: #1A1A2E; }
|
||||
.pos { color: #003D6B; font-weight: 800; font-size: 15px; }
|
||||
.neg { color: #DC2626; font-weight: 700; }
|
||||
.tx-time { font-size: 11px; color: #6B7280; }
|
||||
.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
|
||||
.tx-type { font-weight: 700; color: var(--text); }
|
||||
.pos { color: var(--accent-light); font-weight: 800; font-size: 15px; }
|
||||
.neg { color: var(--danger); font-weight: 700; }
|
||||
.tx-time { font-size: 11px; color: var(--text-muted); }
|
||||
.tx-arrow { font-size: 16px; color: var(--text-muted); font-weight: 700; line-height: 1; }
|
||||
|
||||
.sentinel {
|
||||
height: 1px;
|
||||
@@ -374,11 +374,11 @@ const pullIndicatorStyle = () => ({
|
||||
.end-hint {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
padding: 16px 0 4px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.empty { text-align: center; color: #6B7280; padding: 40px 16px; font-weight: 600; }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
|
||||
</style>
|
||||
|
||||
@@ -238,7 +238,7 @@ function goCashbackDetail() {
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
padding: 4px 0 8px;
|
||||
@@ -251,7 +251,7 @@ function goCashbackDetail() {
|
||||
.state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -265,19 +265,19 @@ function goCashbackDetail() {
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.hero.pos {
|
||||
border-color: rgba(0, 61, 107, 0.2);
|
||||
background: linear-gradient(135deg, rgba(0, 61, 107, 0.04), #FFFFFF);
|
||||
border-color: rgba(244, 162, 97, 0.3);
|
||||
background: linear-gradient(135deg, rgba(244, 162, 97, 0.15), var(--bg-card));
|
||||
}
|
||||
|
||||
.hero.neg {
|
||||
border-color: rgba(220, 38, 38, 0.2);
|
||||
background: linear-gradient(135deg, rgba(220, 38, 38, 0.04), #FFFFFF);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), var(--bg-card));
|
||||
}
|
||||
|
||||
.hero-type {
|
||||
@@ -285,13 +285,13 @@ function goCashbackDetail() {
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.hero-summary {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
max-width: 100%;
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -302,28 +302,28 @@ function goCashbackDetail() {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.hero.pos .hero-amount { color: #003D6B; }
|
||||
.hero.neg .hero-amount { color: #DC2626; }
|
||||
.hero.pos .hero-amount { color: var(--primary); }
|
||||
.hero.neg .hero-amount { color: var(--danger); }
|
||||
|
||||
.hero-time {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.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-title {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -340,22 +340,23 @@ function goCashbackDetail() {
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sum-row span:last-child {
|
||||
color: #1A1A2E;
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.pos { color: #003D6B !important; }
|
||||
.neg { color: #DC2626 !important; }
|
||||
.pos { color: var(--primary) !important; }
|
||||
.neg { color: var(--danger) !important; }
|
||||
|
||||
.mono {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.remark {
|
||||
@@ -368,9 +369,9 @@ function goCashbackDetail() {
|
||||
margin-top: 12px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #003D6B;
|
||||
background: rgba(0, 61, 107, 0.04);
|
||||
color: #003D6B;
|
||||
border: 1px solid var(--primary);
|
||||
background: rgba(244, 162, 97, 0.1);
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
@@ -379,7 +380,7 @@ function goCashbackDetail() {
|
||||
.tx-id {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
color: #1A1A2E;
|
||||
color: var(--text-secondary);
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -158,7 +158,7 @@ const pullIndicatorStyle = () => ({
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
padding: 56px 20px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -179,8 +179,8 @@ const pullIndicatorStyle = () => ({
|
||||
font-size: 13px;
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -189,7 +189,7 @@ const pullIndicatorStyle = () => ({
|
||||
}
|
||||
|
||||
.tx-row:active {
|
||||
background: #F5F7FA;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.tx-main {
|
||||
@@ -208,7 +208,7 @@ const pullIndicatorStyle = () => ({
|
||||
|
||||
.tx-summary {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -222,11 +222,11 @@ const pullIndicatorStyle = () => ({
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.tx-type { font-weight: 700; color: #1A1A2E; }
|
||||
.pos { color: #003D6B; font-weight: 800; font-size: 14px; }
|
||||
.neg { color: #DC2626; font-weight: 700; }
|
||||
.tx-time { font-size: 11px; color: #6B7280; }
|
||||
.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
|
||||
.tx-type { font-weight: 700; color: var(--text); }
|
||||
.pos { color: var(--accent-light); font-weight: 800; font-size: 14px; }
|
||||
.neg { color: var(--danger); font-weight: 700; }
|
||||
.tx-time { font-size: 11px; color: var(--text-muted); }
|
||||
.tx-arrow { font-size: 16px; color: var(--text-muted); font-weight: 700; line-height: 1; }
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
@@ -237,13 +237,13 @@ const pullIndicatorStyle = () => ({
|
||||
}
|
||||
|
||||
.top-bar .more-link.secondary {
|
||||
color: #005B9F;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.more-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #003D6B;
|
||||
color: var(--primary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
@@ -256,5 +256,5 @@ const pullIndicatorStyle = () => ({
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.empty { text-align: center; color: #6B7280; padding: 28px 14px; font-weight: 600; }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 28px 14px; font-weight: 600; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user