feat(player): 统一移动端主题样式并优化多页面视觉一致性
将玩家端组件与核心页面全面切换为统一主题变量，优化卡片、按钮、弹窗、列表和盘口相关模块的视觉表现，并补充多语言文案以匹配新的交互与布局风格。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -35,11 +35,11 @@ const text = computed(() => {
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin: -4px -2px 14px;
|
margin: -4px -2px 14px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee-bar.embedded {
|
.marquee-bar.embedded {
|
||||||
@@ -47,8 +47,8 @@ const text = computed(() => {
|
|||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee-bar.embedded .marquee-badge {
|
.marquee-bar.embedded .marquee-badge {
|
||||||
@@ -67,8 +67,8 @@ const text = computed(() => {
|
|||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background: #003D6B;
|
background: var(--gradient-primary);
|
||||||
border: 1px solid #003D6B;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -90,7 +90,7 @@ const text = computed(() => {
|
|||||||
padding-right: 80px;
|
padding-right: 80px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #003D6B;
|
color: var(--text-secondary);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -44,12 +44,12 @@ const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
|
|||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid #E5E7EB;
|
border: none;
|
||||||
background: #FFFFFF;
|
background: var(--gradient-primary);
|
||||||
color: #003D6B;
|
color: #FFFFFF;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: var(--shadow-glow), 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.2s, transform 0.2s;
|
transition: opacity 0.2s, transform 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-top-btn.above-nav {
|
.back-top-btn.above-nav {
|
||||||
@@ -57,7 +57,7 @@ const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
|
|||||||
}
|
}
|
||||||
|
|
||||||
.back-top-btn:active {
|
.back-top-btn:active {
|
||||||
background: rgba(0, 61, 107, 0.06);
|
opacity: 0.9;
|
||||||
transform: scale(0.96);
|
transform: scale(0.96);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -173,7 +173,7 @@ onUnmounted(stopAutoPlay);
|
|||||||
.media {
|
.media {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #E8EDF2;
|
background: var(--bg-card);
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewport {
|
.viewport {
|
||||||
@@ -197,7 +197,7 @@ onUnmounted(stopAutoPlay);
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: linear-gradient(135deg, #F5F7FA, #E8EDF2);
|
background: linear-gradient(135deg, #0B0F1A, #141B2D);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -207,8 +207,8 @@ onUnmounted(stopAutoPlay);
|
|||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background:
|
background:
|
||||||
linear-gradient(90deg, rgba(245, 247, 250, 0.12), rgba(255, 255, 255, 0.03) 48%, rgba(245, 247, 250, 0.12));
|
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(0, 61, 107, 0.08);
|
box-shadow: inset 0 -1px 0 rgba(244, 162, 97, 0.08);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -219,7 +219,7 @@ onUnmounted(stopAutoPlay);
|
|||||||
height: calc(100% + 36px);
|
height: calc(100% + 36px);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
filter: blur(16px);
|
filter: blur(16px);
|
||||||
opacity: 0.3;
|
opacity: 0.2;
|
||||||
transform: scale(1.04);
|
transform: scale(1.04);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@@ -242,10 +242,10 @@ onUnmounted(stopAutoPlay);
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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-size: 22px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.media .nav {
|
.media .nav {
|
||||||
@@ -255,9 +255,9 @@ onUnmounted(stopAutoPlay);
|
|||||||
width: 26px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(255, 255, 255, 0.85);
|
background: var(--bg-glass);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -265,7 +265,7 @@ onUnmounted(stopAutoPlay);
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 2;
|
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; }
|
.nav.prev { left: 8px; }
|
||||||
@@ -286,7 +286,7 @@ onUnmounted(stopAutoPlay);
|
|||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(0, 61, 107, 0.2);
|
background: rgba(148, 163, 184, 0.3);
|
||||||
border: 1.5px solid transparent;
|
border: 1.5px solid transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: all 0.25s ease;
|
transition: all 0.25s ease;
|
||||||
@@ -295,8 +295,8 @@ onUnmounted(stopAutoPlay);
|
|||||||
.dot.active {
|
.dot.active {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: #003D6B;
|
background: var(--gradient-primary);
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
box-shadow: none;
|
box-shadow: 0 0 8px rgba(244, 162, 97, 0.4);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ function close() {
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid #E5E7EB;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
color: #003D6B;
|
color: #0F2027;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -115,7 +115,7 @@ function close() {
|
|||||||
.title {
|
.title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: #0F2027;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
padding-right: 24px;
|
padding-right: 24px;
|
||||||
@@ -133,7 +133,7 @@ function close() {
|
|||||||
.guide-body :deep(.flow-name) {
|
.guide-body :deep(.flow-name) {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: #0F2027;
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -168,7 +168,7 @@ function close() {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
background: #003D6B;
|
background: #F4A261;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -149,19 +149,19 @@ function goDetail() {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.15s, box-shadow 0.15s;
|
transition: background 0.15s, box-shadow 0.15s;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
overflow: hidden;
|
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 {
|
.bet-card:active {
|
||||||
background: #F5F7FA;
|
background: var(--bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
@@ -182,9 +182,9 @@ function goDetail() {
|
|||||||
.cashback-tag {
|
.cashback-tag {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #F8971F;
|
color: var(--accent);
|
||||||
background: rgba(248, 151, 31, 0.08);
|
background: rgba(244, 162, 97, 0.08);
|
||||||
border: 1px solid rgba(248, 151, 31, 0.2);
|
border: 1px solid rgba(244, 162, 97, 0.2);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
}
|
}
|
||||||
@@ -192,9 +192,9 @@ function goDetail() {
|
|||||||
.bet-type-tag {
|
.bet-type-tag {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
background: rgba(0, 61, 107, 0.06);
|
background: rgba(244, 162, 97, 0.06);
|
||||||
border: 1px solid rgba(0, 61, 107, 0.15);
|
border: 1px solid rgba(244, 162, 97, 0.15);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
@@ -202,7 +202,7 @@ function goDetail() {
|
|||||||
|
|
||||||
.card-date {
|
.card-date {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@@ -211,7 +211,7 @@ function goDetail() {
|
|||||||
.title {
|
.title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -225,7 +225,7 @@ function goDetail() {
|
|||||||
|
|
||||||
.pick-label {
|
.pick-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -237,8 +237,8 @@ function goDetail() {
|
|||||||
.odds-badge {
|
.odds-badge {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #F8971F;
|
color: var(--warning);
|
||||||
background: rgba(248, 151, 31, 0.08);
|
background: rgba(255, 179, 0, 0.08);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -254,24 +254,24 @@ function goDetail() {
|
|||||||
|
|
||||||
.stake-amt {
|
.stake-amt {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.return-amt {
|
.return-amt {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.return-amt.highlight { color: #059669; }
|
.return-amt.highlight { color: var(--success); }
|
||||||
.return-amt.pending { color: #F8971F; }
|
.return-amt.pending { color: var(--warning); }
|
||||||
.return-amt.lost { color: #DC2626; }
|
.return-amt.lost { color: var(--danger); }
|
||||||
|
|
||||||
.chevron {
|
.chevron {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #E5E7EB;
|
color: var(--border);
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -457,7 +457,7 @@ watch(
|
|||||||
.overlay {
|
.overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
@@ -466,13 +466,13 @@ watch(
|
|||||||
.drawer {
|
.drawer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 88vh;
|
max-height: 88vh;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border-radius: 16px 16px 0 0;
|
border-radius: 16px 16px 0 0;
|
||||||
border-top: 1px solid #E5E7EB;
|
border-top: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
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 {
|
.drawer-head {
|
||||||
@@ -484,14 +484,14 @@ watch(
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 14px 14px 10px;
|
padding: 14px 14px 10px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-kicker {
|
.drawer-kicker {
|
||||||
margin: 0 0 3px;
|
margin: 0 0 3px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -499,7 +499,7 @@ watch(
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
@@ -509,8 +509,8 @@ watch(
|
|||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
@@ -523,15 +523,15 @@ watch(
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
background: rgba(0, 61, 107, 0.04);
|
background: rgba(244, 162, 97, 0.04);
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance-bar strong {
|
.balance-bar strong {
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
@@ -540,8 +540,8 @@ watch(
|
|||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -550,23 +550,23 @@ watch(
|
|||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
padding: 8px 12px 0;
|
padding: 8px 12px 0;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slip-tab {
|
.slip-tab {
|
||||||
min-height: 38px;
|
min-height: 38px;
|
||||||
border-radius: 6px 6px 0 0;
|
border-radius: 6px 6px 0 0;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slip-tab.active {
|
.slip-tab.active {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
background: rgba(0, 61, 107, 0.06);
|
background: rgba(244, 162, 97, 0.06);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-count {
|
.tab-count {
|
||||||
@@ -577,7 +577,7 @@ watch(
|
|||||||
height: 18px;
|
height: 18px;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
border-radius: 9px;
|
border-radius: 9px;
|
||||||
background: #003D6B;
|
background: var(--primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
@@ -592,7 +592,7 @@ watch(
|
|||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 26px 12px;
|
padding: 26px 12px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
@@ -603,15 +603,15 @@ watch(
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 11px 12px;
|
padding: 11px 12px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slip-item--single {
|
.slip-item--single {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
background: rgba(0, 61, 107, 0.03);
|
background: rgba(244, 162, 97, 0.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-main {
|
.item-main {
|
||||||
@@ -621,7 +621,7 @@ watch(
|
|||||||
.item-title {
|
.item-title {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -631,19 +631,19 @@ watch(
|
|||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-pick {
|
.item-pick {
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-odds,
|
.item-odds,
|
||||||
.item-side strong {
|
.item-side strong {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
@@ -657,7 +657,7 @@ watch(
|
|||||||
|
|
||||||
.remove {
|
.remove {
|
||||||
background: none;
|
background: none;
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -672,12 +672,12 @@ watch(
|
|||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
padding: 0 14px;
|
padding: 0 14px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #003D6B;
|
border: 1px solid var(--primary);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 900;
|
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 {
|
.btn-add-parlay span {
|
||||||
@@ -687,7 +687,7 @@ watch(
|
|||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #003D6B;
|
background: var(--primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -698,16 +698,16 @@ watch(
|
|||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
padding: 10px 11px;
|
padding: 10px 11px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: rgba(220, 38, 38, 0.06);
|
background: rgba(239, 68, 68, 0.06);
|
||||||
border: 1px solid rgba(220, 38, 38, 0.18);
|
border: 1px solid rgba(239, 68, 68, 0.18);
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parlay-meta {
|
.parlay-meta {
|
||||||
margin: 8px 2px 10px;
|
margin: 8px 2px 10px;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
@@ -715,8 +715,8 @@ watch(
|
|||||||
.stake-area {
|
.stake-area {
|
||||||
margin: 12px 0 12px;
|
margin: 12px 0 12px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -727,12 +727,12 @@ watch(
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stake-head strong,
|
.stake-head strong,
|
||||||
.return strong {
|
.return strong {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
@@ -742,17 +742,17 @@ watch(
|
|||||||
grid-template-columns: auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #F5F7FA;
|
background: var(--bg-input);
|
||||||
}
|
}
|
||||||
|
|
||||||
.currency {
|
.currency {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
border-right: 1px solid #E5E7EB;
|
border-right: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stake-input-row input {
|
.stake-input-row input {
|
||||||
@@ -760,7 +760,7 @@ watch(
|
|||||||
height: 42px;
|
height: 42px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
@@ -779,7 +779,7 @@ watch(
|
|||||||
width: 38px;
|
width: 38px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
@@ -803,9 +803,9 @@ watch(
|
|||||||
.quick-stakes button {
|
.quick-stakes button {
|
||||||
min-height: 52px;
|
min-height: 52px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -817,11 +817,11 @@ watch(
|
|||||||
|
|
||||||
.quick-stakes button {
|
.quick-stakes button {
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.return {
|
.return {
|
||||||
@@ -829,7 +829,7 @@ watch(
|
|||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
color: #059669;
|
color: var(--success);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
@@ -840,9 +840,9 @@ watch(
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
|
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border-top: 1px solid #E5E7EB;
|
border-top: 1px solid var(--border);
|
||||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-foot--split {
|
.drawer-foot--split {
|
||||||
@@ -853,7 +853,7 @@ watch(
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #003D6B;
|
background: var(--gradient-primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
|
|||||||
@@ -79,12 +79,12 @@ const stats = computed(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.stats-panel {
|
.stats-panel {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 14px 12px 10px;
|
padding: 14px 12px 10px;
|
||||||
margin-bottom: 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 {
|
.stats-row {
|
||||||
@@ -110,28 +110,28 @@ const stats = computed(() => {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-val.small {
|
.stat-val.small {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-val.gold {
|
.stat-val.gold {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item.won .stat-val { color: #059669; }
|
.stat-item.won .stat-val { color: var(--success); }
|
||||||
.stat-item.lost .stat-val { color: #DC2626; }
|
.stat-item.lost .stat-val { color: var(--danger); }
|
||||||
.stat-item.pending .stat-val { color: #F8971F; }
|
.stat-item.pending .stat-val { color: var(--warning); }
|
||||||
.stat-item.push .stat-val { color: #6B7280; }
|
.stat-item.push .stat-val { color: var(--text-muted); }
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
@@ -145,7 +145,7 @@ const stats = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stats-bar.empty {
|
.stats-bar.empty {
|
||||||
background: #E8EDF2;
|
background: var(--bg-elevated);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-seg {
|
.bar-seg {
|
||||||
@@ -153,8 +153,8 @@ const stats = computed(() => {
|
|||||||
transition: flex 0.3s ease;
|
transition: flex 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-seg.won { background: #059669; }
|
.bar-seg.won { background: var(--success); }
|
||||||
.bar-seg.lost { background: #DC2626; }
|
.bar-seg.lost { background: var(--danger); }
|
||||||
.bar-seg.pending { background: #F8971F; }
|
.bar-seg.pending { background: var(--warning); }
|
||||||
.bar-seg.push { background: #6B7280; }
|
.bar-seg.push { background: var(--text-muted); }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ interface Particle {
|
|||||||
color: string; shape: number;
|
color: string; shape: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const COLORS = ['#003D6B', '#005B9F', '#0066CC', '#3388DD', '#1A5FA0', '#4499E0'];
|
const COLORS = ['#F4A261', '#FFB980', '#FFDDD2', '#F4A261', '#E76F51', '#FFDDD2'];
|
||||||
let w = 0;
|
let w = 0;
|
||||||
let h = 0;
|
let h = 0;
|
||||||
|
|
||||||
@@ -111,8 +111,8 @@ onUnmounted(stop);
|
|||||||
<canvas ref="canvasRef" class="confetti-canvas" />
|
<canvas ref="canvasRef" class="confetti-canvas" />
|
||||||
<div class="success-card">
|
<div class="success-card">
|
||||||
<svg class="check" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
|
<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" />
|
<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="#003D6B" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
|
<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>
|
</svg>
|
||||||
<p class="success-text">{{ t('bet.place_success') }}</p>
|
<p class="success-text">{{ t('bet.place_success') }}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -125,7 +125,7 @@ onUnmounted(stop);
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 300;
|
z-index: 300;
|
||||||
background: rgba(245, 247, 250, 0.88);
|
background: rgba(15, 32, 39, 0.88);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -166,11 +166,12 @@ onUnmounted(stop);
|
|||||||
}
|
}
|
||||||
|
|
||||||
.success-text {
|
.success-text {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
animation: text-up 0.4s 0.4s ease both;
|
animation: text-up 0.4s 0.4s ease both;
|
||||||
|
text-shadow: 0 0 20px rgba(244, 162, 97, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes card-pop {
|
@keyframes card-pop {
|
||||||
|
|||||||
@@ -115,11 +115,11 @@ onUnmounted(() => {
|
|||||||
padding: 0 8px 0 8px;
|
padding: 0 8px 0 8px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip-body {
|
.chip-body {
|
||||||
@@ -131,7 +131,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.chip-label {
|
.chip-label {
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -144,14 +144,14 @@ onUnmounted(() => {
|
|||||||
.chip-amount {
|
.chip-amount {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--accent-light);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chevron {
|
.chevron {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@@ -167,10 +167,10 @@ onUnmounted(() => {
|
|||||||
width: min(260px, 78vw);
|
width: min(260px, 78vw);
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
z-index: 130;
|
z-index: 130;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cash-panel::before {
|
.cash-panel::before {
|
||||||
@@ -184,22 +184,22 @@ onUnmounted(() => {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-row.muted {
|
.panel-row.muted {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-row.highlight {
|
.panel-row.highlight {
|
||||||
color: #003D6B;
|
color: var(--accent-light);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-divider {
|
.panel-divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -208,9 +208,9 @@ onUnmounted(() => {
|
|||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid #003D6B;
|
border: 1px solid var(--primary);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -218,7 +218,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.panel-recharge-btn:active {
|
.panel-recharge-btn:active {
|
||||||
background: rgba(0, 61, 107, 0.06);
|
background: rgba(244, 162, 97, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop {
|
.backdrop {
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ function close() {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
-webkit-backdrop-filter: blur(4px);
|
-webkit-backdrop-filter: blur(4px);
|
||||||
}
|
}
|
||||||
@@ -87,11 +87,11 @@ function close() {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: min(100%, 420px);
|
width: min(100%, 420px);
|
||||||
height: min(82vh, 680px);
|
height: min(82vh, 680px);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
overflow: hidden;
|
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 {
|
.cs-header {
|
||||||
@@ -101,21 +101,21 @@ function close() {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-title {
|
.cs-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
@@ -123,13 +123,13 @@ function close() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.close-btn:hover {
|
.close-btn:hover {
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-body {
|
.cs-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-frame {
|
.cs-frame {
|
||||||
@@ -137,7 +137,7 @@ function close() {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: #fff;
|
background: var(--bg-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-empty {
|
.cs-empty {
|
||||||
@@ -150,7 +150,7 @@ function close() {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
|
|||||||
@@ -29,16 +29,16 @@ const wrapperStyle = computed(() => {
|
|||||||
>
|
>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="sp-track" x1="0%" y1="0%" x2="100%" y2="100%">
|
<linearGradient id="sp-track" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<stop offset="0%" stop-color="#003D6B" stop-opacity="0.15" />
|
<stop offset="0%" stop-color="#F4A261" stop-opacity="0.15" />
|
||||||
<stop offset="50%" stop-color="#005B9F" stop-opacity="0.22" />
|
<stop offset="50%" stop-color="#FFB980" stop-opacity="0.22" />
|
||||||
<stop offset="100%" stop-color="#003D6B" stop-opacity="0.15" />
|
<stop offset="100%" stop-color="#F4A261" stop-opacity="0.15" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="sp-arc" x1="0%" y1="0%" x2="100%" y2="100%">
|
<linearGradient id="sp-arc" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<stop offset="0%" stop-color="#E8F4FD" />
|
<stop offset="0%" stop-color="#FFDDD2" />
|
||||||
<stop offset="22%" stop-color="#7CB9E8" />
|
<stop offset="22%" stop-color="#FFB980" />
|
||||||
<stop offset="50%" stop-color="#005B9F" />
|
<stop offset="50%" stop-color="#F4A261" />
|
||||||
<stop offset="78%" stop-color="#003D6B" />
|
<stop offset="78%" stop-color="#E76F51" />
|
||||||
<stop offset="100%" stop-color="#002847" />
|
<stop offset="100%" stop-color="#F4A261" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<filter id="sp-glow">
|
<filter id="sp-glow">
|
||||||
<feGaussianBlur stdDeviation="1.2" result="blur" />
|
<feGaussianBlur stdDeviation="1.2" result="blur" />
|
||||||
@@ -48,9 +48,9 @@ const wrapperStyle = computed(() => {
|
|||||||
</feMerge>
|
</feMerge>
|
||||||
</filter>
|
</filter>
|
||||||
<radialGradient id="sp-dot" cx="50%" cy="50%" r="50%">
|
<radialGradient id="sp-dot" cx="50%" cy="50%" r="50%">
|
||||||
<stop offset="0%" stop-color="#E8F4FD" />
|
<stop offset="0%" stop-color="#FFDDD2" />
|
||||||
<stop offset="60%" stop-color="#7CB9E8" />
|
<stop offset="60%" stop-color="#FFB980" />
|
||||||
<stop offset="100%" stop-color="#005B9F" />
|
<stop offset="100%" stop-color="#F4A261" />
|
||||||
</radialGradient>
|
</radialGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<circle cx="24" cy="24" r="20" stroke="url(#sp-track)" stroke-width="3" fill="none" />
|
<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"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
</circle>
|
</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" />
|
<animate attributeName="opacity" values="0.6;0.15;0.6" dur="0.9s" repeatCount="indefinite" begin="0.15s" />
|
||||||
</circle>
|
</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" />
|
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1.1s" repeatCount="indefinite" begin="0.35s" />
|
||||||
</circle>
|
</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" />
|
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1s" repeatCount="indefinite" begin="0.55s" />
|
||||||
</circle>
|
</circle>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
import MatchBetCard from './MatchBetCard.vue';
|
import MatchBetCard from './MatchBetCard.vue';
|
||||||
import saishiImg from '../assets/images/saishi.webp';
|
import saishiImg from '../assets/images/saishi.webp';
|
||||||
import cardBg from '../assets/images/card-bg.webp';
|
import cardBg from '../assets/images/card-bg.webp';
|
||||||
@@ -40,6 +41,7 @@ const props = defineProps<{
|
|||||||
}>();
|
}>();
|
||||||
|
|
||||||
const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
|
const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
const totalCount = computed(() => props.matches.length);
|
const totalCount = computed(() => props.matches.length);
|
||||||
const liveCount = computed(() => props.matches.filter(m => m.matchPhase === 'closed_pending').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-info">
|
||||||
<span class="league-title">*{{ leagueName }}</span>
|
<span class="league-title">*{{ leagueName }}</span>
|
||||||
<span class="league-stats">
|
<span class="league-stats">
|
||||||
<span class="stat-item">{{ totalCount }}场</span>
|
<span class="stat-item">{{ totalCount }}{{ t('bet.match_unit') }}</span>
|
||||||
<span v-if="liveCount > 0" class="stat-item stat-live">{{ liveCount }}进行中</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 }}待开赛</span>
|
<span v-if="openCount > 0" class="stat-item stat-open">{{ openCount }}{{ t('bet.status_open') }}</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<img
|
<img
|
||||||
@@ -87,11 +89,11 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
|||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border: 1px solid #CBD5E1;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
overflow: hidden;
|
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 {
|
.league-row {
|
||||||
@@ -113,7 +115,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
|||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
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;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@@ -127,7 +129,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
|||||||
width: 26px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #003D6B;
|
background: var(--primary);
|
||||||
border: none;
|
border: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -153,7 +155,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
|||||||
.league-title {
|
.league-title {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
@@ -163,16 +165,16 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-live {
|
.stat-live {
|
||||||
color: #059669;
|
color: var(--success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-open {
|
.stat-open {
|
||||||
color: #D97706;
|
color: var(--warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
.league-saishi {
|
.league-saishi {
|
||||||
@@ -183,13 +185,13 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
|||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
border-left: 1px solid #CBD5E1;
|
border-left: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-panel {
|
.match-panel {
|
||||||
padding: 8px 0 4px;
|
padding: 8px 0 4px;
|
||||||
background: #F0F2F6;
|
background: var(--bg-card-elevated);
|
||||||
border-top: 1px solid #D1D5DB;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-grid {
|
.match-grid {
|
||||||
|
|||||||
@@ -79,17 +79,17 @@ onUnmounted(() => {
|
|||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.locale-switch.compact .locale-trigger {
|
.locale-switch.compact .locale-trigger {
|
||||||
@@ -106,10 +106,10 @@ onUnmounted(() => {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
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 {
|
.locale-option {
|
||||||
@@ -118,7 +118,7 @@ onUnmounted(() => {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -127,7 +127,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.locale-option:hover,
|
.locale-option:hover,
|
||||||
.locale-option.active {
|
.locale-option.active {
|
||||||
background: rgba(0, 61, 107, 0.06);
|
background: rgba(244, 162, 97, 0.1);
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -55,7 +55,7 @@ function continueBrowsing() {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
-webkit-backdrop-filter: blur(4px);
|
-webkit-backdrop-filter: blur(4px);
|
||||||
}
|
}
|
||||||
@@ -64,11 +64,11 @@ function continueBrowsing() {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 360px;
|
max-width: 360px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 28px 24px 24px;
|
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 {
|
.close-btn {
|
||||||
@@ -77,7 +77,7 @@ function continueBrowsing() {
|
|||||||
right: 14px;
|
right: 14px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
@@ -85,20 +85,20 @@ function continueBrowsing() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.close-btn:hover {
|
.close-btn:hover {
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
margin: 0 0 6px;
|
margin: 0 0 6px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-hint {
|
.login-hint {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 0 24px;
|
margin: 0 0 24px;
|
||||||
}
|
}
|
||||||
@@ -113,7 +113,7 @@ function continueBrowsing() {
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: none;
|
border: none;
|
||||||
background: #003D6B;
|
background: var(--gradient-primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
@@ -129,9 +129,9 @@ function continueBrowsing() {
|
|||||||
.login-secondary {
|
.login-secondary {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -140,8 +140,8 @@ function continueBrowsing() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-secondary:active {
|
.login-secondary:active {
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
|
|||||||
@@ -78,7 +78,7 @@ const liveScoreText = computed(() => {
|
|||||||
:class="{ 'match-card--phase': phase !== 'open' }"
|
:class="{ 'match-card--phase': phase !== 'open' }"
|
||||||
@click="emit('bet', match.id)"
|
@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-if="phase === 'settled'" class="status-tag status-tag--settled">{{ phaseLabel }}</span>
|
||||||
<span v-else class="status-tag status-tag--pending">{{ phaseLabel }}</span>
|
<span v-else class="status-tag status-tag--pending">{{ phaseLabel }}</span>
|
||||||
|
|
||||||
@@ -130,8 +130,8 @@ const liveScoreText = computed(() => {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.match-card {
|
.match-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 8px 6px 8px;
|
padding: 8px 6px 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -141,7 +141,7 @@ const liveScoreText = computed(() => {
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
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;
|
transition: transform 0.15s, box-shadow 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -149,7 +149,7 @@ const liveScoreText = computed(() => {
|
|||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
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;
|
pointer-events: none;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
@@ -184,7 +184,7 @@ const liveScoreText = computed(() => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -193,7 +193,7 @@ const liveScoreText = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.match-card--phase .team-name {
|
.match-card--phase .team-name {
|
||||||
color: #4B5563;
|
color: var(--text-dim);
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-flag {
|
.team-flag {
|
||||||
@@ -223,7 +223,7 @@ const liveScoreText = computed(() => {
|
|||||||
.kickoff {
|
.kickoff {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -234,14 +234,14 @@ const liveScoreText = computed(() => {
|
|||||||
.live-score {
|
.live-score {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vs {
|
.vs {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -259,24 +259,24 @@ const liveScoreText = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--open {
|
.status-tag--open {
|
||||||
background: #FEF3C7;
|
background: rgba(255, 179, 0, 0.15);
|
||||||
color: #92400E;
|
color: #FFB300;
|
||||||
border-bottom: 1px solid #FDE68A;
|
border-bottom: 1px solid rgba(255, 179, 0, 0.3);
|
||||||
border-left: 1px solid #FDE68A;
|
border-left: 1px solid rgba(255, 179, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--settled {
|
.status-tag--settled {
|
||||||
background: #E8EDF2;
|
background: var(--bg-elevated);
|
||||||
color: #4B5563;
|
color: var(--text-dim);
|
||||||
border-bottom: 1px solid #D1D5DB;
|
border-bottom: 1px solid var(--border);
|
||||||
border-left: 1px solid #D1D5DB;
|
border-left: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--pending {
|
.status-tag--pending {
|
||||||
background: #FEF3C7;
|
background: rgba(255, 179, 0, 0.15);
|
||||||
color: #D97706;
|
color: #FFB300;
|
||||||
border-bottom: 1px solid #FDE68A;
|
border-bottom: 1px solid rgba(255, 179, 0, 0.3);
|
||||||
border-left: 1px solid #FDE68A;
|
border-left: 1px solid rgba(255, 179, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-btn {
|
.bet-btn {
|
||||||
@@ -291,8 +291,8 @@ const liveScoreText = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bet-btn--view {
|
.bet-btn--view {
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -129,20 +129,20 @@ onUnmounted(() => {
|
|||||||
gap: 3px;
|
gap: 3px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-input);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
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 {
|
.country-trigger:active {
|
||||||
background: #F5F7FA;
|
background: var(--bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-iso {
|
.country-iso {
|
||||||
@@ -151,12 +151,12 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.country-sep {
|
.country-sep {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-dial {
|
.country-dial {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -167,31 +167,31 @@ onUnmounted(() => {
|
|||||||
z-index: 60;
|
z-index: 60;
|
||||||
width: min(260px, calc(100vw - 48px));
|
width: min(260px, calc(100vw - 48px));
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
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 {
|
.country-search {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-input);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-search::placeholder {
|
.country-search::placeholder {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-search:focus {
|
.country-search:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-menu {
|
.country-menu {
|
||||||
@@ -214,20 +214,20 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.country-option:hover,
|
.country-option:hover,
|
||||||
.country-option.active {
|
.country-option.active {
|
||||||
background: #F5F7FA;
|
background: rgba(244, 162, 97, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-option .country-iso {
|
.country-option .country-iso {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 26px;
|
width: 26px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-option .country-dial {
|
.country-option .country-dial {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 38px;
|
width: 38px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-name {
|
.country-name {
|
||||||
@@ -235,17 +235,17 @@ onUnmounted(() => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-option:hover .country-name,
|
.country-option:hover .country-name,
|
||||||
.country-option.active .country-name {
|
.country-option.active .country-name {
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-empty {
|
.country-empty {
|
||||||
padding: 10px 8px;
|
padding: 10px 8px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -55,7 +55,7 @@ function confirm() {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 210;
|
z-index: 210;
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -69,11 +69,11 @@ function confirm() {
|
|||||||
max-width: 360px;
|
max-width: 360px;
|
||||||
max-height: 85vh;
|
max-height: 85vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 16px 14px 14px;
|
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 {
|
.close-x {
|
||||||
@@ -83,9 +83,9 @@ function confirm() {
|
|||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -95,7 +95,7 @@ function confirm() {
|
|||||||
margin: 0 28px 12px 0;
|
margin: 0 28px 12px 0;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
@@ -114,14 +114,14 @@ function confirm() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-cancel {
|
.btn-cancel {
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-confirm {
|
.btn-confirm {
|
||||||
border: none;
|
border: none;
|
||||||
background: #003D6B;
|
background: var(--gradient-primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -78,7 +78,7 @@ function select(key: string) {
|
|||||||
.picker-label {
|
.picker-label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
@@ -87,15 +87,15 @@ function select(key: string) {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #F5F7FA;
|
background: var(--bg-input);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-search:focus {
|
.picker-search:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-grid {
|
.picker-grid {
|
||||||
@@ -114,16 +114,16 @@ function select(key: string) {
|
|||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 8px 4px 6px;
|
padding: 8px 4px 6px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-item.active {
|
.picker-item.active {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.18);
|
box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.18);
|
||||||
background: rgba(0, 61, 107, 0.04);
|
background: rgba(244, 162, 97, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-photo {
|
.picker-photo {
|
||||||
@@ -132,14 +132,14 @@ function select(key: string) {
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: top;
|
object-position: top;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-name {
|
.picker-name {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -150,7 +150,7 @@ function select(key: string) {
|
|||||||
.picker-meta {
|
.picker-meta {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -161,7 +161,7 @@ function select(key: string) {
|
|||||||
.picker-empty {
|
.picker-empty {
|
||||||
margin: 8px 0 0;
|
margin: 8px 0 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -139,14 +139,14 @@ defineExpose({ validate, refresh });
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-input);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-row:focus-within {
|
.captcha-row:focus-within {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hp-field {
|
.hp-field {
|
||||||
@@ -164,7 +164,7 @@ defineExpose({ validate, refresh });
|
|||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
@@ -174,7 +174,7 @@ defineExpose({ validate, refresh });
|
|||||||
}
|
}
|
||||||
|
|
||||||
.captcha-input::placeholder {
|
.captcha-input::placeholder {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
@@ -187,11 +187,11 @@ defineExpose({ validate, refresh });
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
border: none;
|
border: none;
|
||||||
border-left: 1px solid #E5E7EB;
|
border-left: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-error {
|
.captcha-error {
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 4px 0 0;
|
margin: 4px 0 0;
|
||||||
|
|||||||
@@ -43,26 +43,26 @@ withDefaults(
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.won {
|
.status-watermark.won {
|
||||||
color: #059669;
|
color: rgba(16, 185, 129, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.lost {
|
.status-watermark.lost {
|
||||||
color: #DC2626;
|
color: rgba(239, 68, 68, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.push {
|
.status-watermark.push {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.pending {
|
.status-watermark.pending {
|
||||||
color: #F8971F;
|
color: rgba(255, 179, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.closed {
|
.status-watermark.closed {
|
||||||
color: #005B9F;
|
color: var(--primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.settled {
|
.status-watermark.settled {
|
||||||
color: #0066CC;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -85,8 +85,8 @@ function logout() {
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #003D6B;
|
border: 2px solid var(--primary-light);
|
||||||
background: linear-gradient(145deg, #003D6B, #005B9F);
|
background: linear-gradient(145deg, var(--primary-dark), var(--primary-light));
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -94,6 +94,7 @@ function logout() {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
box-shadow: 0 0 12px rgba(244, 162, 97, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-img {
|
.avatar-img {
|
||||||
@@ -115,10 +116,12 @@ function logout() {
|
|||||||
right: 0;
|
right: 0;
|
||||||
min-width: 168px;
|
min-width: 168px;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||||
z-index: 140;
|
z-index: 140;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -126,8 +129,8 @@ function logout() {
|
|||||||
padding: 8px 14px 10px;
|
padding: 8px 14px 10px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -136,22 +139,22 @@ function logout() {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
background: none;
|
background: none;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item:hover {
|
.menu-item:hover {
|
||||||
background: #F5F7FA;
|
background: var(--bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item.recharge {
|
.menu-item.recharge {
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item.danger {
|
.menu-item.danger {
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop {
|
.backdrop {
|
||||||
|
|||||||
@@ -76,12 +76,12 @@ const stats = computed(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.wallet-stats-panel {
|
.wallet-stats-panel {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin-bottom: 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 {
|
.stats-row {
|
||||||
@@ -100,7 +100,7 @@ const stats = computed(() => {
|
|||||||
display: block;
|
display: block;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
@@ -113,16 +113,16 @@ const stats = computed(() => {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-val.income { color: #059669; }
|
.stat-val.income { color: var(--success); }
|
||||||
.stat-val.expense { color: #DC2626; }
|
.stat-val.expense { color: var(--danger); }
|
||||||
.stat-val.cashback { color: #F8971F; }
|
.stat-val.cashback { color: var(--warning); }
|
||||||
|
|
||||||
.stats-divider {
|
.stats-divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: 6px 8px;
|
margin: 6px 8px;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -96,18 +96,18 @@ function formatOdds(odds: string) {
|
|||||||
.overlay {
|
.overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 210;
|
z-index: 210;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer {
|
.drawer {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
border-radius: 16px 16px 0 0;
|
border-radius: 16px 16px 0 0;
|
||||||
border-top: 1px solid #E5E7EB;
|
border-top: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -123,9 +123,9 @@ function formatOdds(odds: string) {
|
|||||||
.drawer-foot {
|
.drawer-foot {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
|
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
border-top: 1px solid #E5E7EB;
|
border-top: 1px solid var(--border);
|
||||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-header {
|
.drawer-header {
|
||||||
@@ -134,32 +134,32 @@ function formatOdds(odds: string) {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 14px 14px 12px;
|
padding: 14px 14px 12px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-header h3 {
|
.drawer-header h3 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.count {
|
.count {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
background: none;
|
background: none;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slip-item {
|
.slip-item {
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
@@ -167,17 +167,17 @@ function formatOdds(odds: string) {
|
|||||||
.item-name {
|
.item-name {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-sel {
|
.item-sel {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds {
|
.odds {
|
||||||
color: #F8971F;
|
color: var(--warning);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -190,24 +190,24 @@ function formatOdds(odds: string) {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-row strong {
|
.summary-row strong {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.return {
|
.return {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.return strong {
|
.return strong {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -75,8 +75,8 @@ function formatOdds(odds: string) {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.cs-panel {
|
.cs-panel {
|
||||||
padding: 6px 8px 0;
|
padding: 6px 8px 0;
|
||||||
background: #EDF0F4;
|
background: var(--bg-card-elevated);
|
||||||
border-top: 1px solid #D1D5DB;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-panel--locked {
|
.cs-panel--locked {
|
||||||
@@ -95,7 +95,7 @@ function formatOdds(odds: string) {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #4B5563;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cols-grid {
|
.cols-grid {
|
||||||
@@ -118,38 +118,38 @@ function formatOdds(odds: string) {
|
|||||||
gap: 3px;
|
gap: 3px;
|
||||||
min-height: 42px;
|
min-height: 42px;
|
||||||
padding: 6px 3px;
|
padding: 6px 3px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #CBD5E1;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: border-color 0.15s ease, background 0.15s ease;
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-card.selected {
|
.score-card.selected {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
background: rgba(0, 61, 107, 0.08);
|
background: rgba(244, 162, 97, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-card--locked {
|
.score-card--locked {
|
||||||
background: #E8EDF2;
|
background: var(--bg-elevated);
|
||||||
border-color: #E5E7EB;
|
border-color: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-card--locked .score-line,
|
.score-card--locked .score-line,
|
||||||
.score-card--locked .odds {
|
.score-card--locked .odds {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-line {
|
.score-line {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds {
|
.odds {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #E8870A;
|
color: var(--warning);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -57,8 +57,8 @@ function onPick(id: string) {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.wrap {
|
.wrap {
|
||||||
padding: 6px 8px 8px;
|
padding: 6px 8px 8px;
|
||||||
background: #EDF0F4;
|
background: var(--bg-card-elevated);
|
||||||
border-top: 1px solid #D1D5DB;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap.locked {
|
.wrap.locked {
|
||||||
@@ -80,32 +80,32 @@ function onPick(id: string) {
|
|||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
padding: 6px 4px;
|
padding: 6px 4px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #CBD5E1;
|
border: 1px solid var(--border);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: border-color 0.15s ease, background 0.15s ease;
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-btn.selected {
|
.odds-btn.selected {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
background: rgba(0, 61, 107, 0.08);
|
background: rgba(244, 162, 97, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-btn--locked {
|
.odds-btn--locked {
|
||||||
background: #E8EDF2;
|
background: var(--bg-elevated);
|
||||||
border-color: #E5E7EB;
|
border-color: var(--border);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-btn--locked .label,
|
.odds-btn--locked .label,
|
||||||
.odds-btn--locked .odds {
|
.odds-btn--locked .odds {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #4B5563;
|
color: var(--text-secondary);
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -113,6 +113,6 @@ function onPick(id: string) {
|
|||||||
.odds {
|
.odds {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #E8870A;
|
color: var(--warning);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -44,11 +44,11 @@ const { t } = useI18n();
|
|||||||
}
|
}
|
||||||
|
|
||||||
.row:not(.disabled):active {
|
.row:not(.disabled):active {
|
||||||
background: rgba(0, 61, 107, 0.07);
|
background: rgba(244, 162, 97, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.expanded {
|
.row.expanded {
|
||||||
background: rgba(0, 61, 107, 0.07);
|
background: rgba(244, 162, 97, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.expanded::before {
|
.row.expanded::before {
|
||||||
@@ -58,7 +58,7 @@ const { t } = useI18n();
|
|||||||
left: 12px;
|
left: 12px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
height: 2.5px;
|
height: 2.5px;
|
||||||
background: #003D6B;
|
background: var(--primary);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -71,7 +71,7 @@ const { t } = useI18n();
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -79,32 +79,32 @@ const { t } = useI18n();
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #F8971F;
|
color: var(--warning);
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: rgba(248, 151, 31, 0.1);
|
background: rgba(255, 179, 0, 0.1);
|
||||||
border: 1px solid rgba(248, 151, 31, 0.3);
|
border: 1px solid rgba(255, 179, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.expanded .row-label {
|
.row.expanded .row-label {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-muted {
|
.row-muted {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-chevron {
|
.row-chevron {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
|
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-chevron.open {
|
.row-chevron.open {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -221,7 +221,7 @@ function formatOdds(odds: string) {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -233,12 +233,12 @@ function formatOdds(odds: string) {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 18px 16px 16px;
|
padding: 18px 16px 16px;
|
||||||
text-align: center;
|
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 {
|
.close-x {
|
||||||
@@ -248,8 +248,8 @@ function formatOdds(odds: string) {
|
|||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
@@ -257,7 +257,7 @@ function formatOdds(odds: string) {
|
|||||||
.hint {
|
.hint {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
@@ -280,21 +280,21 @@ function formatOdds(odds: string) {
|
|||||||
height: 32px;
|
height: 32px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 4px;
|
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 {
|
.team {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-badge {
|
.odds-badge {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 3px 10px;
|
padding: 3px 10px;
|
||||||
background: #F8971F;
|
background: var(--warning);
|
||||||
border: 1px solid rgba(248, 151, 31, 0.3);
|
border: 1px solid rgba(255, 179, 0, 0.3);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
@@ -303,7 +303,7 @@ function formatOdds(odds: string) {
|
|||||||
|
|
||||||
.event-title {
|
.event-title {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
@@ -315,28 +315,28 @@ function formatOdds(odds: string) {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance-label {
|
.balance-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance-value {
|
.balance-value {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stake-label {
|
.stake-label {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
@@ -346,9 +346,9 @@ function formatOdds(odds: string) {
|
|||||||
padding: 11px 12px;
|
padding: 11px 12px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #F5F7FA;
|
background: var(--bg-input);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -356,12 +356,12 @@ function formatOdds(odds: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stake-input:focus {
|
.stake-input:focus {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.15);
|
box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stake-input::placeholder {
|
.stake-input::placeholder {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
@@ -376,33 +376,33 @@ function formatOdds(odds: string) {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 6px 4px;
|
padding: 6px 4px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
transition: border-color 0.15s ease, background 0.15s ease;
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip:active {
|
.chip:active {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
background: rgba(0, 61, 107, 0.06);
|
background: rgba(244, 162, 97, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.est-return {
|
.est-return {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.est-value {
|
.est-value {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@@ -417,9 +417,9 @@ function formatOdds(odds: string) {
|
|||||||
.btn-cancel {
|
.btn-cancel {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@@ -429,7 +429,7 @@ function formatOdds(odds: string) {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
background: #003D6B;
|
background: var(--gradient-primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
@@ -443,9 +443,9 @@ function formatOdds(odds: string) {
|
|||||||
height: 44px;
|
height: 44px;
|
||||||
margin: 0 auto 8px;
|
margin: 0 auto 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #059669;
|
border: 2px solid var(--success);
|
||||||
background: rgba(5, 150, 105, 0.1);
|
background: rgba(16, 185, 129, 0.1);
|
||||||
color: #059669;
|
color: var(--success);
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
@@ -454,15 +454,15 @@ function formatOdds(odds: string) {
|
|||||||
.success-title {
|
.success-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary {
|
.summary {
|
||||||
margin: 12px 0 14px;
|
margin: 12px 0 14px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -470,14 +470,14 @@ function formatOdds(odds: string) {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-row + .summary-row {
|
.summary-row + .summary-row {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
border-top: 1px solid #E5E7EB;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-done {
|
.btn-done {
|
||||||
@@ -486,7 +486,7 @@ function formatOdds(odds: string) {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
background: #003D6B;
|
background: var(--gradient-primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -86,11 +86,11 @@ const headMeta = computed(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
overflow: hidden;
|
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 {
|
.event-head {
|
||||||
@@ -113,7 +113,7 @@ const headMeta = computed(() => {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: v-bind(matchCardBg) center / 100% 100% no-repeat;
|
background: v-bind(matchCardBg) center / 100% 100% no-repeat;
|
||||||
opacity: 0.08;
|
opacity: 0.04;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@@ -123,8 +123,8 @@ const headMeta = computed(() => {
|
|||||||
width: 26px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -132,11 +132,11 @@ const headMeta = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.toggle-icon.open {
|
.toggle-icon.open {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-mark {
|
.toggle-mark {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -153,21 +153,21 @@ const headMeta = computed(() => {
|
|||||||
.event-title {
|
.event-title {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-league {
|
.event-league {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-meta {
|
.event-meta {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-saishi {
|
.event-saishi {
|
||||||
@@ -177,7 +177,7 @@ const headMeta = computed(() => {
|
|||||||
max-width: 40px;
|
max-width: 40px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
border-left: 1px solid #E5E7EB;
|
border-left: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-scroll {
|
.options-scroll {
|
||||||
@@ -186,7 +186,7 @@ const headMeta = computed(() => {
|
|||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
padding: 8px 2px 2px;
|
padding: 8px 2px 2px;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: #E5E7EB transparent;
|
scrollbar-color: var(--border) transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-grid {
|
.options-grid {
|
||||||
|
|||||||
@@ -77,8 +77,8 @@ onUnmounted(() => {
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 8px 4px 6px;
|
padding: 8px 4px 6px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -89,8 +89,8 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.option-card:active {
|
.option-card:active {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.12);
|
box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flag {
|
.flag {
|
||||||
@@ -113,7 +113,7 @@ onUnmounted(() => {
|
|||||||
.name {
|
.name {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -124,6 +124,6 @@ onUnmounted(() => {
|
|||||||
.odds {
|
.odds {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #F8971F;
|
color: var(--warning);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -178,7 +178,7 @@ function closeModal() {
|
|||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -189,7 +189,7 @@ function closeModal() {
|
|||||||
.state,
|
.state,
|
||||||
.empty {
|
.empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 48px 20px;
|
padding: 48px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -266,8 +266,21 @@ export default {
|
|||||||
tab_outright: 'Outright',
|
tab_outright: 'Outright',
|
||||||
tab_today: 'Today',
|
tab_today: 'Today',
|
||||||
tab_early: 'Early',
|
tab_early: 'Early',
|
||||||
|
filter_time: 'Match Time',
|
||||||
show_open_only: 'Open only',
|
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',
|
show_all_matches: 'Show all',
|
||||||
|
status_open: 'Upcoming',
|
||||||
|
status_live: 'Live',
|
||||||
|
match_unit: 'matches',
|
||||||
today: 'Today',
|
today: 'Today',
|
||||||
loading: 'Loading…',
|
loading: 'Loading…',
|
||||||
no_matches: 'No matches',
|
no_matches: 'No matches',
|
||||||
|
|||||||
@@ -272,8 +272,21 @@ export default {
|
|||||||
tab_outright: 'Juara',
|
tab_outright: 'Juara',
|
||||||
tab_today: 'Hari Ini',
|
tab_today: 'Hari Ini',
|
||||||
tab_early: 'Awal',
|
tab_early: 'Awal',
|
||||||
|
filter_time: 'Masa Perlawanan',
|
||||||
show_open_only: 'Buka sahaja',
|
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',
|
show_all_matches: 'Tunjuk semua',
|
||||||
|
status_open: 'Akan datang',
|
||||||
|
status_live: 'Langsung',
|
||||||
|
match_unit: 'perlawanan',
|
||||||
today: 'Hari Ini',
|
today: 'Hari Ini',
|
||||||
loading: 'Memuatkan…',
|
loading: 'Memuatkan…',
|
||||||
no_matches: 'Tiada perlawanan',
|
no_matches: 'Tiada perlawanan',
|
||||||
|
|||||||
@@ -266,8 +266,21 @@ export default {
|
|||||||
tab_outright: '优胜冠军',
|
tab_outright: '优胜冠军',
|
||||||
tab_today: '今日',
|
tab_today: '今日',
|
||||||
tab_early: '早盘',
|
tab_early: '早盘',
|
||||||
|
filter_time: '比赛时间',
|
||||||
show_open_only: '仅显示待开赛',
|
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: '显示全部',
|
show_all_matches: '显示全部',
|
||||||
|
status_open: '待开赛',
|
||||||
|
status_live: '进行中',
|
||||||
|
match_unit: '场',
|
||||||
today: '今日',
|
today: '今日',
|
||||||
loading: '加载中…',
|
loading: '加载中…',
|
||||||
no_matches: '暂无赛事',
|
no_matches: '暂无赛事',
|
||||||
|
|||||||
@@ -107,9 +107,9 @@ watch(
|
|||||||
<div class="layout">
|
<div class="layout">
|
||||||
<header v-if="showHeader" class="header">
|
<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">
|
<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="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="#003D6B" letter-spacing="0.01em">BET</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="#F8971F" letter-spacing="0.01em">365</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>
|
</svg>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<button
|
<button
|
||||||
@@ -206,7 +206,9 @@ watch(
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-glass);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
-webkit-backdrop-filter: blur(16px);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
z-index: 110;
|
z-index: 110;
|
||||||
}
|
}
|
||||||
@@ -236,7 +238,7 @@ watch(
|
|||||||
.header-divider {
|
.header-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
}
|
}
|
||||||
@@ -251,8 +253,8 @@ watch(
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
background: #F5F7FA;
|
background: var(--bg-card-elevated);
|
||||||
color: var(--primary);
|
color: var(--primary-light);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -277,22 +279,24 @@ watch(
|
|||||||
.login-btn {
|
.login-btn {
|
||||||
padding: 6px 18px;
|
padding: 6px 18px;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
border: 1px solid var(--primary);
|
border: none;
|
||||||
background: var(--primary);
|
background: var(--gradient-primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.15s;
|
transition: opacity 0.15s, transform 0.15s;
|
||||||
|
box-shadow: var(--shadow-glow);
|
||||||
}
|
}
|
||||||
.login-btn:active {
|
.login-btn:active {
|
||||||
background: var(--primary-dark);
|
opacity: 0.9;
|
||||||
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
.announce-strip {
|
.announce-strip {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
z-index: 105;
|
z-index: 105;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -310,7 +314,9 @@ watch(
|
|||||||
|
|
||||||
.bottom-nav {
|
.bottom-nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #FFFFFF;
|
background: var(--bg-glass);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
-webkit-backdrop-filter: blur(16px);
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||||
@@ -343,13 +349,14 @@ watch(
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active {
|
.nav-item.active {
|
||||||
color: var(--primary);
|
color: var(--primary-light);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
text-shadow: 0 0 8px rgba(255, 185, 128, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active :deep(.nav-icon) {
|
.nav-item.active :deep(.nav-icon) {
|
||||||
color: var(--primary);
|
color: var(--primary-light);
|
||||||
filter: drop-shadow(0 1px 2px rgba(0, 61, 107, 0.2));
|
filter: drop-shadow(0 0 6px rgba(255, 185, 128, 0.5));
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active::after {
|
.nav-item.active::after {
|
||||||
@@ -359,7 +366,7 @@ watch(
|
|||||||
left: 18%;
|
left: 18%;
|
||||||
right: 18%;
|
right: 18%;
|
||||||
height: 2.5px;
|
height: 2.5px;
|
||||||
background: var(--primary);
|
background: var(--gradient-primary);
|
||||||
border-radius: 0 0 3px 3px;
|
border-radius: 0 0 3px 3px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,45 +1,68 @@
|
|||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Pinnacle-inspired: Navy blue + clean white theme */
|
/* ── 蓉色珊瑚 — Dusk Coral Theme ── */
|
||||||
--primary: #003D6B;
|
--primary: #F4A261;
|
||||||
--primary-dark: #002847;
|
--primary-dark: #E76F51;
|
||||||
--primary-light: #005B9F;
|
--primary-light: #FFB980;
|
||||||
--secondary: #E8EDF2;
|
--primary-glow: #FFDDD2;
|
||||||
--tertiary: #F5F7FA;
|
--accent: #E76F51;
|
||||||
--neutral: #6B7280;
|
--accent-light: #FFDDD2;
|
||||||
--bg-body: #F5F7FA;
|
--gradient-primary: linear-gradient(135deg, #E76F51, #F4A261);
|
||||||
--bg-card: #FFFFFF;
|
--gradient-accent: linear-gradient(135deg, #F4A261, #FFDDD2);
|
||||||
--bg-hover: #F0F4F8;
|
--gradient-hot: linear-gradient(135deg, #E76F51, #F4A261, #FFDDD2);
|
||||||
--bg-elevated: #FFFFFF;
|
--gradient-success: linear-gradient(135deg, #2C5364, #203A43);
|
||||||
--text: #1A1A2E;
|
--gradient-hero: linear-gradient(135deg, #0F2027, #203A43, #0F2027);
|
||||||
--text-muted: #6B7280;
|
|
||||||
--border: #E5E7EB;
|
--secondary: #203A43;
|
||||||
--border-active: #0066CC;
|
--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: 1px;
|
||||||
--border-w-thick: 1px;
|
--border-w-thick: 1px;
|
||||||
--danger: #DC2626;
|
|
||||||
--success: #059669;
|
--danger: #EF4444;
|
||||||
--warning: #F8971F;
|
--success: #4ADE80;
|
||||||
--radius: 8px;
|
--warning: #FBBF24;
|
||||||
--radius-sm: 6px;
|
|
||||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
|
--radius: 12px;
|
||||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
|
--radius-sm: 8px;
|
||||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
--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 {
|
:root {
|
||||||
--odds-accent: #F8971F;
|
--odds-accent: #F4A261;
|
||||||
--odds-accent-light: #FBBF24;
|
--odds-accent-light: #FFB980;
|
||||||
--odds-accent-soft: rgba(248, 151, 31, 0.1);
|
--odds-accent-soft: rgba(244, 162, 97, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Global resets ── */
|
/* ── Global resets ── */
|
||||||
html, body, #app { height: 100%; }
|
html, body, #app { height: 100%; }
|
||||||
|
|
||||||
body {
|
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);
|
background-color: var(--bg-body);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -50,10 +73,16 @@ body {
|
|||||||
a { color: inherit; text-decoration: none; }
|
a { color: inherit; text-decoration: none; }
|
||||||
button { cursor: pointer; border: none; font-family: inherit; }
|
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 ── */
|
||||||
input {
|
input {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
background: #FFFFFF;
|
background: var(--bg-input);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
@@ -63,10 +92,11 @@ input {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: border-color 0.2s, box-shadow 0.2s;
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
}
|
}
|
||||||
|
input::placeholder { color: var(--text-dim); }
|
||||||
input:focus {
|
input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--border-active);
|
border-color: var(--primary);
|
||||||
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
|
box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:-webkit-autofill,
|
input:-webkit-autofill,
|
||||||
@@ -75,12 +105,12 @@ input:-webkit-autofill:focus,
|
|||||||
input:-webkit-autofill:active {
|
input:-webkit-autofill:active {
|
||||||
-webkit-text-fill-color: var(--text);
|
-webkit-text-fill-color: var(--text);
|
||||||
caret-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);
|
border: 1px solid var(--border);
|
||||||
transition: background-color 99999s ease-out 0s;
|
transition: background-color 99999s ease-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Primary button (blue CTA) ── */
|
/* ── Primary button (coral gradient CTA) ── */
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -89,83 +119,83 @@ input:-webkit-autofill:active {
|
|||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
background: var(--primary);
|
background: var(--gradient-primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: background 0.15s, transform 0.1s;
|
transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s;
|
||||||
box-shadow: 0 2px 8px rgba(0, 61, 107, 0.2);
|
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) {
|
.btn-primary:active:not(:disabled) {
|
||||||
background: var(--primary-dark);
|
|
||||||
transform: scale(0.985);
|
transform: scale(0.985);
|
||||||
}
|
}
|
||||||
.btn-primary:disabled {
|
.btn-primary:disabled {
|
||||||
opacity: 0.45;
|
opacity: 0.4;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Gold-outline (now blue outline) ── */
|
/* ── Outline button ── */
|
||||||
.btn-gold-outline {
|
.btn-gold-outline {
|
||||||
background: #FFFFFF;
|
background: transparent;
|
||||||
border: 1px solid var(--border-active);
|
border: 1px solid var(--primary);
|
||||||
color: var(--primary);
|
color: var(--primary-light);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.btn-gold-outline:active:not(:disabled) {
|
.btn-gold-outline:active:not(:disabled) {
|
||||||
background: rgba(0, 102, 204, 0.06);
|
background: rgba(244, 162, 97, 0.08);
|
||||||
border-color: var(--primary);
|
border-color: var(--primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Active tab: light blue ── */
|
/* ── Active tab ── */
|
||||||
.tab-gold-active {
|
.tab-gold-active {
|
||||||
background: rgba(0, 102, 204, 0.06) !important;
|
background: rgba(244, 162, 97, 0.1) !important;
|
||||||
border-color: var(--border-active) !important;
|
border-color: var(--primary) !important;
|
||||||
color: var(--primary) !important;
|
color: var(--primary-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Gold frame (now light blue frame) ── */
|
/* ── Card frame ── */
|
||||||
.ps-gold-frame {
|
.ps-gold-frame {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid var(--border) !important;
|
border: 1px solid var(--border) !important;
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
background: #FFFFFF !important;
|
background: var(--bg-card) !important;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
}
|
}
|
||||||
.ps-gold-frame::before,
|
.ps-gold-frame::before,
|
||||||
.ps-gold-frame::after { display: none; }
|
.ps-gold-frame::after { display: none; }
|
||||||
|
|
||||||
.ps-gold-input {
|
.ps-gold-input {
|
||||||
background: #F9FAFB !important;
|
background: var(--bg-input) !important;
|
||||||
border: 1px solid var(--border) !important;
|
border: 1px solid var(--border) !important;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: var(--text);
|
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 {
|
.ps-gold-input:focus {
|
||||||
border-color: var(--border-active) !important;
|
border-color: var(--primary) !important;
|
||||||
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
|
box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.15) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Odds button ── */
|
/* ── Odds button ── */
|
||||||
.odds-btn {
|
.odds-btn {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card-elevated);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
min-width: 78px;
|
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:active { transform: scale(0.96); }
|
||||||
.odds-btn.selected {
|
.odds-btn.selected {
|
||||||
border: 1px solid var(--border-active);
|
border: 1px solid var(--primary);
|
||||||
background: rgba(0, 102, 204, 0.06);
|
background: rgba(244, 162, 97, 0.1);
|
||||||
box-shadow: none;
|
box-shadow: 0 0 12px rgba(244, 162, 97, 0.12);
|
||||||
}
|
}
|
||||||
.odds-btn.selected::before,
|
.odds-btn.selected::before,
|
||||||
.odds-btn.selected::after { display: none; }
|
.odds-btn.selected::after { display: none; }
|
||||||
@@ -217,4 +247,4 @@ input:-webkit-autofill:active {
|
|||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -275,7 +275,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
.back-btn {
|
.back-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 4px 0 8px;
|
padding: 4px 0 8px;
|
||||||
@@ -288,12 +288,12 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
.state {
|
.state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 60px 20px;
|
padding: 60px 20px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── hero ── */
|
/* ─ hero ── */
|
||||||
.hero {
|
.hero {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 20px 20px 18px;
|
padding: 20px 20px 18px;
|
||||||
@@ -305,10 +305,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero.won { background: rgba(5, 150, 105, 0.08); border: 1px solid rgba(5, 150, 105, 0.2); }
|
.hero.won { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); }
|
||||||
.hero.lost { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.15); }
|
.hero.lost { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); }
|
||||||
.hero.pending { background: rgba(248, 151, 31, 0.06); border: 1px solid rgba(248, 151, 31, 0.18); }
|
.hero.pending { background: rgba(255, 179, 0, 0.1); border: 1px solid rgba(255, 179, 0, 0.25); }
|
||||||
.hero.push { background: #FFFFFF; border: 1px solid #E5E7EB; }
|
.hero.push { background: var(--bg-card); border: 1px solid var(--border); }
|
||||||
|
|
||||||
.hero-status {
|
.hero-status {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@@ -317,10 +317,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
}
|
}
|
||||||
.hero.won .hero-status { color: #059669; }
|
.hero.won .hero-status { color: var(--success); }
|
||||||
.hero.lost .hero-status { color: #DC2626; }
|
.hero.lost .hero-status { color: var(--danger); }
|
||||||
.hero.pending .hero-status { color: #F8971F; }
|
.hero.pending .hero-status { color: var(--warning); }
|
||||||
.hero.push .hero-status { color: #6B7280; }
|
.hero.push .hero-status { color: var(--text-muted); }
|
||||||
|
|
||||||
.hero-return {
|
.hero-return {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
@@ -328,26 +328,26 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
.hero.won .hero-return { color: #059669; }
|
.hero.won .hero-return { color: var(--success); }
|
||||||
.hero.lost .hero-return { color: #DC2626; }
|
.hero.lost .hero-return { color: var(--danger); }
|
||||||
.hero.pending .hero-return { color: #F8971F; }
|
.hero.pending .hero-return { color: var(--warning); }
|
||||||
.hero.push .hero-return { color: #6B7280; }
|
.hero.push .hero-return { color: var(--text-muted); }
|
||||||
|
|
||||||
.hero-return-label {
|
.hero-return-label {
|
||||||
font-size: 10.5px;
|
font-size: 10.5px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── sections ── */
|
/* ── sections ── */
|
||||||
.section {
|
.section {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-head {
|
.section-head {
|
||||||
@@ -359,20 +359,20 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
|
|
||||||
.league-tag {
|
.league-tag {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.placed-time {
|
.placed-time {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-name {
|
.match-name {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
@@ -399,18 +399,18 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
|
|
||||||
.row-label {
|
.row-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-val {
|
.row-val {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-val.pick {
|
.row-val.pick {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-chips {
|
.score-chips {
|
||||||
@@ -422,15 +422,15 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-period {
|
.score-period {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@@ -439,24 +439,24 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
.score-value {
|
.score-value {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-value.muted {
|
.score-value.muted {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-score {
|
.no-score {
|
||||||
font-size: 11.5px;
|
font-size: 11.5px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* section title */
|
/* section title */
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 10.5px;
|
font-size: 10.5px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@@ -475,14 +475,14 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-row.won { border-color: rgba(5, 150, 105, 0.25); }
|
.leg-row.won { border-color: rgba(16, 185, 129, 0.3); }
|
||||||
.leg-row.lost { border-color: rgba(220, 38, 38, 0.2); }
|
.leg-row.lost { border-color: rgba(239, 68, 68, 0.3); }
|
||||||
|
|
||||||
.leg-left {
|
.leg-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -497,8 +497,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #E8EDF2;
|
background: var(--secondary);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -507,8 +507,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-num.won { background: rgba(5, 150, 105, 0.12); color: #059669; }
|
.leg-num.won { background: rgba(16, 185, 129, 0.15); color: var(--success); }
|
||||||
.leg-num.lost { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
|
.leg-num.lost { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
|
||||||
|
|
||||||
.leg-body {
|
.leg-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -520,12 +520,12 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
.leg-match {
|
.leg-match {
|
||||||
font-size: 12.5px;
|
font-size: 12.5px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-pick-line {
|
.leg-pick-line {
|
||||||
font-size: 11.5px;
|
font-size: 11.5px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -538,11 +538,11 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
.leg-scores span {
|
.leg-scores span {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-scores .muted-score {
|
.leg-scores .muted-score {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-right {
|
.leg-right {
|
||||||
@@ -556,7 +556,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
.leg-odds-val {
|
.leg-odds-val {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-result-badge {
|
.leg-result-badge {
|
||||||
@@ -568,10 +568,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-result-badge.won { color: #059669; background: rgba(5, 150, 105, 0.1); }
|
.leg-result-badge.won { color: var(--success); background: rgba(16, 185, 129, 0.12); }
|
||||||
.leg-result-badge.lost { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
|
.leg-result-badge.lost { color: var(--danger); background: rgba(239, 68, 68, 0.12); }
|
||||||
.leg-result-badge.push { color: #6B7280; background: #E8EDF2; }
|
.leg-result-badge.push { color: var(--text-muted); background: var(--secondary); }
|
||||||
.leg-result-badge.pending { color: #6B7280; background: #F5F7FA; }
|
.leg-result-badge.pending { color: var(--text-muted); background: var(--bg-body); }
|
||||||
|
|
||||||
/* summary */
|
/* summary */
|
||||||
.summary-rows {
|
.summary-rows {
|
||||||
@@ -585,9 +585,9 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -596,28 +596,28 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sum-row.muted {
|
.sum-row.muted {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-val {
|
.odds-val {
|
||||||
color: #F8971F;
|
color: var(--warning);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amt-won {
|
.amt-won {
|
||||||
color: #059669;
|
color: var(--success);
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amt-pending {
|
.amt-pending {
|
||||||
color: #F8971F;
|
color: var(--warning);
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amt-lost {
|
.amt-lost {
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
@@ -625,5 +625,6 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
.bet-no-val {
|
.bet-no-val {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -202,7 +202,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
.back-btn {
|
.back-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 4px 0 8px;
|
padding: 4px 0 8px;
|
||||||
@@ -226,7 +226,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 56px 20px;
|
padding: 56px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -244,28 +244,28 @@ const pullIndicatorStyle = () => ({
|
|||||||
padding: 18px 16px 16px;
|
padding: 18px 16px 16px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: linear-gradient(135deg, rgba(0, 61, 107, 0.06), #FFFFFF);
|
background: linear-gradient(135deg, rgba(244, 162, 97, 0.15), var(--bg-card));
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-amount {
|
.hero-amount {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-sub {
|
.hero-sub {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 10.5px;
|
font-size: 10.5px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@@ -273,16 +273,16 @@ const pullIndicatorStyle = () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.list-card {
|
.list-card {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-row {
|
.record-row {
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-row:last-child {
|
.record-row:last-child {
|
||||||
@@ -290,15 +290,15 @@ const pullIndicatorStyle = () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.record-row--highlight {
|
.record-row--highlight {
|
||||||
background: rgba(0, 61, 107, 0.04);
|
background: rgba(244, 162, 97, 0.1);
|
||||||
box-shadow: inset 3px 0 0 #003D6B;
|
box-shadow: inset 3px 0 0 var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ledger-hint {
|
.ledger-hint {
|
||||||
margin: 0 0 12px;
|
margin: 0 0 12px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-main {
|
.row-main {
|
||||||
@@ -318,12 +318,12 @@ const pullIndicatorStyle = () => ({
|
|||||||
.row-amount {
|
.row-amount {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-period {
|
.row-period {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -331,9 +331,9 @@ const pullIndicatorStyle = () => ({
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #F8971F;
|
color: var(--warning);
|
||||||
background: rgba(248, 151, 31, 0.08);
|
background: rgba(255, 179, 0, 0.12);
|
||||||
border: 1px solid rgba(248, 151, 31, 0.22);
|
border: 1px solid rgba(255, 179, 0, 0.3);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
padding: 3px 10px;
|
padding: 3px 10px;
|
||||||
}
|
}
|
||||||
@@ -344,7 +344,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
gap: 8px 16px;
|
gap: 8px 16px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-foot {
|
.row-foot {
|
||||||
@@ -354,9 +354,9 @@ const pullIndicatorStyle = () => ({
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
border-top: 1px dashed #E5E7EB;
|
border-top: 1px dashed var(--border);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-batch {
|
.row-batch {
|
||||||
@@ -380,14 +380,14 @@ const pullIndicatorStyle = () => ({
|
|||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-hint {
|
.empty-hint {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sentinel {
|
.sentinel {
|
||||||
@@ -403,7 +403,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
.end-hint {
|
.end-hint {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 16px 0 4px;
|
padding: 16px 0 4px;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ import {
|
|||||||
} from '@thebet365/shared';
|
} from '@thebet365/shared';
|
||||||
|
|
||||||
type MainTab = 'matches' | 'outright';
|
type MainTab = 'matches' | 'outright';
|
||||||
type TimeTab = 'today' | 'early';
|
|
||||||
|
|
||||||
interface Match {
|
interface Match {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -62,17 +61,16 @@ const { t } = useI18n();
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const mainTab = ref<MainTab>('matches');
|
const mainTab = ref<MainTab>('matches');
|
||||||
const timeTab = ref<TimeTab>('today');
|
const filterState = ref({
|
||||||
const showAll = ref(false);
|
time: 'all' as 'all' | 'today' | 'early',
|
||||||
|
status: 'open' as 'all' | 'open' | 'settled',
|
||||||
|
leagueIds: [] as string[]
|
||||||
|
});
|
||||||
const outrightActivated = ref(false);
|
const outrightActivated = ref(false);
|
||||||
const filterNow = ref(new Date());
|
const filterNow = ref(new Date());
|
||||||
const { summaryMatches, summaryLoading, loadSummary } = usePlayerMatches();
|
const { summaryMatches, summaryLoading, loadSummary } = usePlayerMatches();
|
||||||
const matches = summaryMatches;
|
const matches = summaryMatches;
|
||||||
const loading = summaryLoading;
|
const loading = summaryLoading;
|
||||||
const expandedLeagues = ref<Record<TimeTab, Set<string>>>({
|
|
||||||
today: new Set(),
|
|
||||||
early: new Set(),
|
|
||||||
});
|
|
||||||
|
|
||||||
async function loadMatches() {
|
async function loadMatches() {
|
||||||
filterNow.value = new Date();
|
filterNow.value = new Date();
|
||||||
@@ -90,18 +88,73 @@ const pullIndicatorStyle = () => ({
|
|||||||
opacity: Math.min(pullDistance.value / 48, 1),
|
opacity: Math.min(pullDistance.value / 48, 1),
|
||||||
});
|
});
|
||||||
|
|
||||||
function filterMatchesForTab(tab: TimeTab) {
|
const filteredMatches = computed(() => {
|
||||||
if (mainTab.value !== 'matches') return [];
|
if (mainTab.value !== 'matches') return [];
|
||||||
const now = filterNow.value;
|
const now = filterNow.value;
|
||||||
return matches.value.filter((m) => {
|
return matches.value.filter((m) => {
|
||||||
const timeMatch =
|
let timeMatch = true;
|
||||||
tab === 'today'
|
if (filterState.value.time === 'today') {
|
||||||
? isInTodayMatchWindow(m.startTime, now)
|
timeMatch = isInTodayMatchWindow(m.startTime, now);
|
||||||
: isAfterTodayMatchWindow(m.startTime, now);
|
} else if (filterState.value.time === 'early') {
|
||||||
|
timeMatch = isAfterTodayMatchWindow(m.startTime, now);
|
||||||
|
}
|
||||||
if (!timeMatch) return false;
|
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;
|
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[] {
|
function buildLeagueGroups(source: Match[]): LeagueGroup[] {
|
||||||
@@ -133,32 +186,28 @@ function buildLeagueGroups(source: Match[]): LeagueGroup[] {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const todayLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('today')));
|
const leagueGroups = computed(() => buildLeagueGroups(filteredMatches.value));
|
||||||
const earlyLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('early')));
|
|
||||||
|
|
||||||
function syncExpandedLeagues(groups: LeagueGroup[], tab: TimeTab) {
|
const expandedLeagues = ref(new Set<string>());
|
||||||
const current = expandedLeagues.value[tab];
|
|
||||||
const ids = new Set(current);
|
watch(leagueGroups, (groups) => {
|
||||||
|
const ids = new Set(expandedLeagues.value);
|
||||||
for (const id of [...ids]) {
|
for (const id of [...ids]) {
|
||||||
if (!groups.some((g) => g.leagueId === id)) ids.delete(id);
|
if (!groups.some((g) => g.leagueId === id)) ids.delete(id);
|
||||||
}
|
}
|
||||||
if (groups.length > 0 && ids.size === 0) {
|
if (groups.length > 0 && ids.size === 0) {
|
||||||
ids.add(groups[0].leagueId);
|
ids.add(groups[0].leagueId);
|
||||||
}
|
}
|
||||||
if (ids.size !== current.size || [...ids].some((id) => !current.has(id))) {
|
if (ids.size !== expandedLeagues.value.size || [...ids].some((id) => !expandedLeagues.value.has(id))) {
|
||||||
expandedLeagues.value = { ...expandedLeagues.value, [tab]: ids };
|
expandedLeagues.value = ids;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
watch(todayLeagueGroups, (groups) => syncExpandedLeagues(groups, 'today'));
|
|
||||||
watch(earlyLeagueGroups, (groups) => syncExpandedLeagues(groups, 'early'));
|
|
||||||
|
|
||||||
function toggleLeague(leagueId: string) {
|
function toggleLeague(leagueId: string) {
|
||||||
const tab = timeTab.value;
|
const next = new Set(expandedLeagues.value);
|
||||||
const next = new Set(expandedLeagues.value[tab]);
|
|
||||||
if (next.has(leagueId)) next.delete(leagueId);
|
if (next.has(leagueId)) next.delete(leagueId);
|
||||||
else next.add(leagueId);
|
else next.add(leagueId);
|
||||||
expandedLeagues.value = { ...expandedLeagues.value, [tab]: next };
|
expandedLeagues.value = next;
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectMainTab(tab: MainTab) {
|
function selectMainTab(tab: MainTab) {
|
||||||
@@ -168,7 +217,7 @@ function selectMainTab(tab: MainTab) {
|
|||||||
|
|
||||||
onActivated(() => {
|
onActivated(() => {
|
||||||
filterNow.value = new Date();
|
filterNow.value = new Date();
|
||||||
timeTab.value = 'today';
|
filterState.value.time = 'all';
|
||||||
void loadSummary(true, true);
|
void loadSummary(true, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -208,72 +257,90 @@ function goMatch(id: string) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="['tab-panel', { 'tab-panel--hidden': mainTab !== 'matches' }]">
|
<div :class="['tab-panel', { 'tab-panel--hidden': mainTab !== 'matches' }]">
|
||||||
<div class="time-tabs">
|
<div class="filters-bar">
|
||||||
<button
|
<div class="phase-filter">
|
||||||
type="button"
|
<div class="league-dropdown">
|
||||||
class="time-tab"
|
<button type="button" class="dropdown-trigger" @click="dropdownOpen = !dropdownOpen">
|
||||||
:class="{ active: timeTab === 'today', 'tab-gold-active': timeTab === 'today' }"
|
<span>{{ selectedLeagueName || t('bet.filter_leagues_all') }}</span>
|
||||||
@click="timeTab = 'today'"
|
<span class="arrow-icon" :class="{ open: dropdownOpen }">▼</span>
|
||||||
>
|
</button>
|
||||||
{{ t('bet.tab_today') }}
|
<div v-if="dropdownOpen" class="dropdown-backdrop" @click="dropdownOpen = false"></div>
|
||||||
</button>
|
<div v-if="dropdownOpen" class="dropdown-menu">
|
||||||
<button
|
<div
|
||||||
type="button"
|
class="dropdown-item"
|
||||||
class="time-tab"
|
:class="{ active: filterState.leagueIds.length === 0 }"
|
||||||
:class="{ active: timeTab === 'early', 'tab-gold-active': timeTab === 'early' }"
|
@click="selectLeague('')"
|
||||||
@click="timeTab = 'early'"
|
>
|
||||||
>
|
{{ t('bet.filter_leagues_all') }}
|
||||||
{{ t('bet.tab_early') }}
|
</div>
|
||||||
</button>
|
<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">
|
<div class="right-filters">
|
||||||
<button
|
<div class="time-tabs">
|
||||||
type="button"
|
<button
|
||||||
class="phase-toggle"
|
type="button"
|
||||||
:class="{ 'phase-toggle--active': !showAll }"
|
class="time-tab"
|
||||||
:aria-pressed="!showAll"
|
:class="{ active: filterState.time === 'all' }"
|
||||||
@click="showAll = !showAll"
|
@click="filterState.time = 'all'"
|
||||||
>
|
>
|
||||||
<span class="phase-toggle-dot" />
|
{{ t('bet.filter_status_all') }}
|
||||||
{{ t('bet.show_open_only') }}
|
</button>
|
||||||
</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>
|
||||||
|
|
||||||
<div v-if="loading" class="state">
|
<div v-if="loading" class="state">
|
||||||
<GoldSpinner :size="36" />
|
<GoldSpinner :size="36" />
|
||||||
</div>
|
</div>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div v-show="timeTab === 'today'">
|
<div>
|
||||||
<div v-if="todayLeagueGroups.length" class="league-list">
|
<div v-if="leagueGroups.length" class="league-list">
|
||||||
<LeagueAccordionItem
|
<LeagueAccordionItem
|
||||||
v-for="group in todayLeagueGroups"
|
v-for="group in leagueGroups"
|
||||||
:key="`today-${group.leagueId}`"
|
:key="group.leagueId"
|
||||||
:league-id="group.leagueId"
|
:league-id="group.leagueId"
|
||||||
:league-name="group.leagueName"
|
:league-name="group.leagueName"
|
||||||
:league-logo-url="group.leagueLogoUrl"
|
:league-logo-url="group.leagueLogoUrl"
|
||||||
:matches="group.matches"
|
:matches="group.matches"
|
||||||
:expanded="expandedLeagues.today.has(group.leagueId)"
|
:expanded="expandedLeagues.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)"
|
|
||||||
@toggle="toggleLeague(group.leagueId)"
|
@toggle="toggleLeague(group.leagueId)"
|
||||||
@bet="goMatch"
|
@bet="goMatch"
|
||||||
/>
|
/>
|
||||||
@@ -292,6 +359,8 @@ function goMatch(id: string) {
|
|||||||
:activated="mainTab === 'outright'"
|
:activated="mainTab === 'outright'"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -307,7 +376,7 @@ function goMatch(id: string) {
|
|||||||
.bet-page {
|
.bet-page {
|
||||||
margin: 0 -16px;
|
margin: 0 -16px;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
background: #E8EDF2;
|
background: var(--bg-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tab panel toggle: avoid display:none to prevent browser releasing image resources */
|
/* Tab panel toggle: avoid display:none to prevent browser releasing image resources */
|
||||||
@@ -341,22 +410,22 @@ function goMatch(id: string) {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 10px 8px;
|
padding: 10px 8px;
|
||||||
border-radius: 8px;
|
border-radius: var(--radius-sm);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #CBD5E1;
|
border: 1px solid var(--border);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
position: relative;
|
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;
|
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-tab.active {
|
.main-tab.active {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background: #EBF3FB;
|
background: rgba(244, 162, 97, 0.1);
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-icon {
|
.tab-icon {
|
||||||
@@ -364,68 +433,166 @@ function goMatch(id: string) {
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-tabs {
|
.filters-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
align-items: center;
|
||||||
padding: 0 12px 14px;
|
justify-content: flex-start;
|
||||||
}
|
gap: 12px;
|
||||||
|
padding: 0 16px 12px;
|
||||||
.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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-filter {
|
.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;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 6px 14px;
|
padding: 0 10px;
|
||||||
border-radius: 999px;
|
font-size: 11px;
|
||||||
font-size: 12px;
|
font-weight: 500;
|
||||||
font-weight: 600;
|
color: var(--text);
|
||||||
color: #6B7280;
|
background: var(--bg-card);
|
||||||
background: #FFFFFF;
|
border: 1px solid var(--border);
|
||||||
border: 1px solid #CBD5E1;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
height: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-toggle--active {
|
.dropdown-trigger .arrow-icon {
|
||||||
color: #003D6B;
|
font-size: 8px;
|
||||||
border-color: #003D6B;
|
color: var(--text-muted);
|
||||||
background: rgba(0, 61, 107, 0.06);
|
transition: transform 0.2s ease;
|
||||||
|
display: inline-block;
|
||||||
|
transform: scale(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-toggle-dot {
|
.dropdown-trigger .arrow-icon.open {
|
||||||
width: 6px;
|
transform: scale(0.8) rotate(180deg);
|
||||||
height: 6px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #CBD5E1;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-toggle--active .phase-toggle-dot {
|
.dropdown-backdrop {
|
||||||
background: #003D6B;
|
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 {
|
.league-list {
|
||||||
@@ -436,7 +603,7 @@ function goMatch(id: string) {
|
|||||||
.placeholder,
|
.placeholder,
|
||||||
.empty {
|
.empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 48px 20px;
|
padding: 48px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -197,30 +197,48 @@ function goLogin() {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
|
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-size: cover;
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
background-repeat: no-repeat;
|
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 {
|
.login-form {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
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 {
|
.form-title {
|
||||||
margin: 0 0 2px;
|
margin: 0 0 2px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -232,7 +250,7 @@ function goLogin() {
|
|||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
@@ -241,22 +259,22 @@ label {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-input);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input::placeholder {
|
.field-input::placeholder {
|
||||||
color: rgba(107, 114, 128, 0.6);
|
color: rgba(148, 163, 184, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
.field-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #0066CC;
|
border-color: var(--primary);
|
||||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-row {
|
.inline-row {
|
||||||
@@ -274,10 +292,10 @@ label {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -307,19 +325,19 @@ label {
|
|||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip:active {
|
.btn-skip:active {
|
||||||
color: #005B9F;
|
color: var(--primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
|
|||||||
@@ -49,32 +49,7 @@ function formatKickoff(startTime: string) {
|
|||||||
|
|
||||||
<BannerCarousel :banners="banners" />
|
<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>
|
<h2 class="section-title">{{ t('home.hot_matches') }}</h2>
|
||||||
<div
|
<div
|
||||||
@@ -99,11 +74,11 @@ function formatKickoff(startTime: string) {
|
|||||||
<svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
|
<svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient :id="`hzBoltGrad-${match.id}`" x1="0%" y1="0%" x2="100%" y2="0%">
|
<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="0%" stop-color="#FFB980" stop-opacity="0.2" />
|
||||||
<stop offset="35%" stop-color="#b8ecff" stop-opacity="1" />
|
<stop offset="35%" stop-color="#FFDDD2" stop-opacity="1" />
|
||||||
<stop offset="50%" stop-color="#ffffff" stop-opacity="1" />
|
<stop offset="50%" stop-color="#FFFFFF" stop-opacity="1" />
|
||||||
<stop offset="65%" stop-color="#ffd080" stop-opacity="1" />
|
<stop offset="65%" stop-color="#FFDDD2" stop-opacity="1" />
|
||||||
<stop offset="100%" stop-color="#ff9040" stop-opacity="0.2" />
|
<stop offset="100%" stop-color="#FFDDD2" stop-opacity="0.2" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<path
|
<path
|
||||||
@@ -148,8 +123,11 @@ function formatKickoff(startTime: string) {
|
|||||||
.quick-entries {
|
.quick-entries {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-template-areas:
|
||||||
|
"a a b b"
|
||||||
|
"c d e f";
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 16px;
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -159,17 +137,44 @@ function formatKickoff(startTime: string) {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 12px 4px 10px;
|
padding: 12px 4px 10px;
|
||||||
border-radius: 10px;
|
border-radius: var(--radius-sm);
|
||||||
background: #FFFFFF;
|
min-width: 0;
|
||||||
border: 1px solid #E5E7EB;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.15s, box-shadow 0.15s;
|
transition: transform 0.15s, box-shadow 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qe-item:active {
|
.qe-item:active {
|
||||||
transform: scale(0.96);
|
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 {
|
.qe-icon {
|
||||||
@@ -182,29 +187,29 @@ function formatKickoff(startTime: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.qe-icon--bet {
|
.qe-icon--bet {
|
||||||
background: rgba(0, 61, 107, 0.1);
|
background: rgba(244, 162, 97, 0.15);
|
||||||
color: #003D6B;
|
color: #FFB980;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qe-icon--recharge {
|
.qe-icon--recharge {
|
||||||
background: rgba(5, 150, 105, 0.1);
|
background: rgba(16, 185, 129, 0.15);
|
||||||
color: #059669;
|
color: #10B981;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qe-icon--bill {
|
.qe-icon--bill {
|
||||||
background: rgba(248, 151, 31, 0.1);
|
background: rgba(255, 179, 0, 0.15);
|
||||||
color: #E8870A;
|
color: #FFB300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qe-icon--promo {
|
.qe-icon--history {
|
||||||
background: rgba(220, 38, 38, 0.08);
|
background: rgba(231, 111, 81, 0.15);
|
||||||
color: #DC2626;
|
color: #E76F51;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qe-label {
|
.qe-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -216,10 +221,10 @@ function formatKickoff(startTime: string) {
|
|||||||
.section-title {
|
.section-title {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
border-left: 3px solid #003D6B;
|
border-left: 3px solid var(--primary);
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -233,10 +238,10 @@ function formatKickoff(startTime: string) {
|
|||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: var(--radius-sm);
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -246,14 +251,14 @@ function formatKickoff(startTime: string) {
|
|||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
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;
|
z-index: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-card:active {
|
.match-card:active {
|
||||||
transform: scale(0.995);
|
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,
|
.match-info,
|
||||||
@@ -272,12 +277,12 @@ function formatKickoff(startTime: string) {
|
|||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-time {
|
.match-time {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -314,7 +319,7 @@ function formatKickoff(startTime: string) {
|
|||||||
stroke-width: 2.2;
|
stroke-width: 2.2;
|
||||||
stroke-linecap: round;
|
stroke-linecap: round;
|
||||||
stroke-linejoin: 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;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -339,11 +344,11 @@ function formatKickoff(startTime: string) {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
rgba(0, 91, 159, 0) 0%,
|
rgba(255, 185, 128, 0) 0%,
|
||||||
rgba(0, 102, 204, 0.7) 28%,
|
rgba(244, 162, 97, 0.7) 28%,
|
||||||
#0066CC 50%,
|
#F4A261 50%,
|
||||||
rgba(0, 91, 159, 0.7) 72%,
|
rgba(255, 185, 128, 0.7) 72%,
|
||||||
rgba(0, 61, 107, 0) 100%
|
rgba(109, 40, 217, 0) 100%
|
||||||
);
|
);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
filter: blur(0.4px);
|
filter: blur(0.4px);
|
||||||
@@ -360,7 +365,7 @@ function formatKickoff(startTime: string) {
|
|||||||
width: 40px;
|
width: 40px;
|
||||||
height: auto;
|
height: auto;
|
||||||
object-fit: contain;
|
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 {
|
.match-card--live-anim .vs-img {
|
||||||
@@ -448,21 +453,21 @@ function formatKickoff(startTime: string) {
|
|||||||
0%,
|
0%,
|
||||||
100% {
|
100% {
|
||||||
opacity: 0.82;
|
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% {
|
50% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
filter:
|
filter:
|
||||||
drop-shadow(0 0 3px rgba(0, 102, 204, 0.5))
|
drop-shadow(0 0 3px rgba(244, 162, 97, 0.5))
|
||||||
drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
|
drop-shadow(0 0 6px rgba(255, 185, 128, 0.25));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.vs-img {
|
.vs-img {
|
||||||
animation: none;
|
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,
|
.hz-path,
|
||||||
@@ -474,7 +479,7 @@ function formatKickoff(startTime: string) {
|
|||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 28px 16px;
|
padding: 28px 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -164,23 +164,41 @@ function goRegister() {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: 34vh 20px calc(15vh + max(28px, env(safe-area-inset-bottom)));
|
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-size: cover;
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
background-repeat: no-repeat;
|
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 {
|
.login-form {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
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 {
|
.field {
|
||||||
@@ -193,18 +211,18 @@ function goRegister() {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-input);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
.field-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #0066CC;
|
border-color: var(--primary);
|
||||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-row {
|
.inline-row {
|
||||||
@@ -220,7 +238,7 @@ function goRegister() {
|
|||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
@@ -231,7 +249,7 @@ label {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #005B9F;
|
color: var(--primary-light);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -243,18 +261,18 @@ label {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-forgot:active {
|
.btn-forgot:active {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-mode-switch:active {
|
.btn-mode-switch:active {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-login {
|
.btn-login {
|
||||||
@@ -276,14 +294,14 @@ label {
|
|||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip:active {
|
.btn-skip:active {
|
||||||
color: #005B9F;
|
color: var(--primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip-light {
|
.btn-skip-light {
|
||||||
@@ -291,10 +309,12 @@ label {
|
|||||||
bottom: calc(20px + env(safe-area-inset-bottom));
|
bottom: calc(20px + env(safe-area-inset-bottom));
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
z-index: 1;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
border: none;
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 6px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -302,18 +322,18 @@ label {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip-light:active {
|
.btn-skip-light:active {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #059669;
|
color: var(--success);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.4;
|
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">
|
<svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="hzDetailGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
<linearGradient id="hzDetailGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
<stop offset="0%" stop-color="#5eb8ff" stop-opacity="0.2" />
|
<stop offset="0%" stop-color="#FFB980" stop-opacity="0.2" />
|
||||||
<stop offset="35%" stop-color="#b8ecff" stop-opacity="1" />
|
<stop offset="35%" stop-color="#FFDDD2" stop-opacity="1" />
|
||||||
<stop offset="50%" stop-color="#ffffff" stop-opacity="1" />
|
<stop offset="50%" stop-color="#FFFFFF" stop-opacity="1" />
|
||||||
<stop offset="65%" stop-color="#ffd080" stop-opacity="1" />
|
<stop offset="65%" stop-color="#FFDDD2" stop-opacity="1" />
|
||||||
<stop offset="100%" stop-color="#ff9040" stop-opacity="0.2" />
|
<stop offset="100%" stop-color="#FFDDD2" stop-opacity="0.2" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<path
|
<path
|
||||||
@@ -360,7 +360,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
|
|
||||||
<!-- 我的投注 -->
|
<!-- 我的投注 -->
|
||||||
<section v-if="myBets.length" class="my-bets-section">
|
<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 class="my-bets-list">
|
||||||
<div v-for="bet in myBets" :key="bet.betNo" class="my-bet-card" @click="router.push(`/bets/${bet.betNo}`)">
|
<div v-for="bet in myBets" :key="bet.betNo" class="my-bet-card" @click="router.push(`/bets/${bet.betNo}`)">
|
||||||
<div class="bet-header">
|
<div class="bet-header">
|
||||||
@@ -423,7 +423,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
.detail-page {
|
.detail-page {
|
||||||
margin: 0 -16px;
|
margin: 0 -16px;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
background: #E8EDF2;
|
background: var(--bg-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pull-indicator {
|
.pull-indicator {
|
||||||
@@ -444,8 +444,9 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
top: -12px;
|
top: -12px;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
margin-top: -12px;
|
margin-top: -12px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-glass);
|
||||||
border-bottom: 1px solid #CBD5E1;
|
border-bottom: 1px solid var(--border);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-title {
|
.toolbar-title {
|
||||||
@@ -453,7 +454,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -471,9 +472,9 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -491,10 +492,10 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
margin: 0 12px 10px;
|
margin: 0 12px 10px;
|
||||||
padding: 14px 12px 16px;
|
padding: 14px 12px 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #CBD5E1;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: var(--radius-sm);
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-hero--phase {
|
.match-hero--phase {
|
||||||
@@ -516,17 +517,17 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--settled {
|
.status-tag--settled {
|
||||||
background: #E8EDF2;
|
background: var(--secondary);
|
||||||
color: #4B5563;
|
color: var(--text-muted);
|
||||||
border-bottom: 1px solid #D1D5DB;
|
border-bottom: 1px solid var(--border);
|
||||||
border-left: 1px solid #D1D5DB;
|
border-left: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--pending {
|
.status-tag--pending {
|
||||||
background: #FEF3C7;
|
background: rgba(255, 179, 0, 0.1);
|
||||||
color: #92400E;
|
color: #FFB300;
|
||||||
border-bottom: 1px solid #FDE68A;
|
border-bottom: 1px solid rgba(255, 179, 0, 0.25);
|
||||||
border-left: 1px solid #FDE68A;
|
border-left: 1px solid rgba(255, 179, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* -- market panel smaller status tag -- */
|
/* -- market panel smaller status tag -- */
|
||||||
@@ -544,17 +545,17 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.market-status-tag--settled {
|
.market-status-tag--settled {
|
||||||
background: #E8EDF2;
|
background: var(--secondary);
|
||||||
color: #4B5563;
|
color: var(--text-muted);
|
||||||
border-bottom: 1px solid #D1D5DB;
|
border-bottom: 1px solid var(--border);
|
||||||
border-left: 1px solid #D1D5DB;
|
border-left: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-status-tag--pending {
|
.market-status-tag--pending {
|
||||||
background: #FEF3C7;
|
background: rgba(255, 179, 0, 0.1);
|
||||||
color: #92400E;
|
color: #FFB300;
|
||||||
border-bottom: 1px solid #FDE68A;
|
border-bottom: 1px solid rgba(255, 179, 0, 0.25);
|
||||||
border-left: 1px solid #FDE68A;
|
border-left: 1px solid rgba(255, 179, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-panel-wrap {
|
.market-panel-wrap {
|
||||||
@@ -570,7 +571,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
@@ -582,17 +583,17 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
margin: 8px 0 0;
|
margin: 8px 0 0;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stats-section {
|
.result-stats-section {
|
||||||
margin: 0 10px 12px;
|
margin: 0 10px 12px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border: 1px solid #CBD5E1;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: var(--radius-sm);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stats-head {
|
.result-stats-head {
|
||||||
@@ -608,7 +609,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stats-head span {
|
.result-stats-head span {
|
||||||
@@ -618,7 +619,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stats-grid {
|
.result-stats-grid {
|
||||||
@@ -635,8 +636,8 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stat-label {
|
.result-stat-label {
|
||||||
@@ -645,7 +646,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stat-value {
|
.result-stat-value {
|
||||||
@@ -653,7 +654,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-teams {
|
.hero-teams {
|
||||||
@@ -677,7 +678,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
.hero-name {
|
.hero-name {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -712,7 +713,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
stroke-width: 2.2;
|
stroke-width: 2.2;
|
||||||
stroke-linecap: round;
|
stroke-linecap: round;
|
||||||
stroke-linejoin: 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;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -737,11 +738,11 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
rgba(0, 91, 159, 0) 0%,
|
rgba(255, 185, 128, 0) 0%,
|
||||||
rgba(0, 102, 204, 0.7) 28%,
|
rgba(244, 162, 97, 0.7) 28%,
|
||||||
#0066CC 50%,
|
#F4A261 50%,
|
||||||
rgba(0, 91, 159, 0.7) 72%,
|
rgba(255, 185, 128, 0.7) 72%,
|
||||||
rgba(0, 61, 107, 0) 100%
|
rgba(109, 40, 217, 0) 100%
|
||||||
);
|
);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
filter: blur(0.4px);
|
filter: blur(0.4px);
|
||||||
@@ -783,11 +784,11 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
@keyframes vs-glow {
|
@keyframes vs-glow {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
opacity: 0.82;
|
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% {
|
50% {
|
||||||
opacity: 1;
|
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 {
|
.market-group {
|
||||||
border-radius: 8px;
|
border-radius: var(--radius-sm);
|
||||||
border: 1px solid #CBD5E1;
|
border: 1px solid var(--border);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
overflow: hidden;
|
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;
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-group.open {
|
.market-group.open {
|
||||||
border-color: #9CA3AF;
|
border-color: var(--border);
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-group :deep(.row) {
|
.market-group :deep(.row) {
|
||||||
@@ -834,9 +835,9 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
margin: 0 8px 10px;
|
margin: 0 8px 10px;
|
||||||
padding: 9px;
|
padding: 9px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@@ -844,13 +845,13 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
.state {
|
.state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 48px;
|
padding: 48px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-toast {
|
.cs-toast {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #003D6B;
|
color: var(--primary-light);
|
||||||
padding: 2px 0 6px;
|
padding: 2px 0 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -863,7 +864,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
.my-bets-title {
|
.my-bets-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -874,17 +875,17 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.my-bet-card {
|
.my-bet-card {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #CBD5E1;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: var(--radius-sm);
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.15s;
|
transition: background 0.15s;
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-bet-card:active {
|
.my-bet-card:active {
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-header {
|
.bet-header {
|
||||||
@@ -897,7 +898,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
.bet-type {
|
.bet-type {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -914,18 +915,18 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bet-status-won {
|
.bet-status-won {
|
||||||
background: #E6F4EA;
|
background: rgba(16, 185, 129, 0.1);
|
||||||
color: #059669;
|
color: #10B981;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-status-lost {
|
.bet-status-lost {
|
||||||
background: #FDE8E8;
|
background: rgba(239, 68, 68, 0.1);
|
||||||
color: #DC2626;
|
color: #EF4444;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-status-pending {
|
.bet-status-pending {
|
||||||
background: #FEF3C7;
|
background: rgba(255, 179, 0, 0.1);
|
||||||
color: #D97706;
|
color: #FFB300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-footer {
|
.bet-footer {
|
||||||
@@ -936,7 +937,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
|
|
||||||
.bet-stake {
|
.bet-stake {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-return {
|
.bet-return {
|
||||||
|
|||||||
@@ -176,16 +176,16 @@ const pullIndicatorStyle = () => ({
|
|||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-tab.active {
|
.filter-tab.active {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
background: rgba(0, 61, 107, 0.08);
|
background: rgba(244, 162, 97, 0.15);
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.state {
|
.state {
|
||||||
@@ -194,7 +194,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 56px 20px;
|
padding: 56px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -217,7 +217,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
.end-hint {
|
.end-hint {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 16px 0 4px;
|
padding: 16px 0 4px;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
|
|||||||
@@ -328,7 +328,7 @@ function back() {
|
|||||||
|
|
||||||
.back-btn {
|
.back-btn {
|
||||||
background: none;
|
background: none;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
@@ -338,14 +338,14 @@ function back() {
|
|||||||
.page-title {
|
.page-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-card,
|
.avatar-card,
|
||||||
.form-card {
|
.form-card {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -361,12 +361,12 @@ function back() {
|
|||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #E5E7EB;
|
border: 2px solid var(--border);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #E8EDF2;
|
background: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-img {
|
.avatar-img {
|
||||||
@@ -379,9 +379,9 @@ function back() {
|
|||||||
.avatar-change-btn {
|
.avatar-change-btn {
|
||||||
padding: 7px 18px;
|
padding: 7px 18px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
border: 1px solid #003D6B;
|
border: 1px solid var(--primary);
|
||||||
background: rgba(0, 61, 107, 0.04);
|
background: rgba(244, 162, 97, 0.1);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@@ -396,12 +396,12 @@ function back() {
|
|||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-divider {
|
.section-divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
margin: 6px 0 12px;
|
margin: 6px 0 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -412,13 +412,13 @@ function back() {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 4px 0 12px;
|
padding: 4px 0 12px;
|
||||||
background: none;
|
background: none;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chevron {
|
.chevron {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
transition: transform 0.15s ease;
|
transition: transform 0.15s ease;
|
||||||
@@ -442,7 +442,7 @@ function back() {
|
|||||||
|
|
||||||
.field-hint {
|
.field-hint {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
margin: 6px 0 0;
|
margin: 6px 0 0;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
}
|
}
|
||||||
@@ -469,10 +469,10 @@ function back() {
|
|||||||
min-width: 48px;
|
min-width: 48px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: none;
|
border: none;
|
||||||
border-left: 1px solid #E5E7EB;
|
border-left: 1px solid var(--border);
|
||||||
border-radius: 0 6px 6px 0;
|
border-radius: 0 6px 6px 0;
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
@@ -491,7 +491,7 @@ function back() {
|
|||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
@@ -504,28 +504,28 @@ label {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #FFFFFF;
|
background: var(--bg-input);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
transition: border-color 0.2s;
|
transition: border-color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
.field-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #0066CC;
|
border-color: var(--border-active);
|
||||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
|
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:-webkit-autofill,
|
.field-input:-webkit-autofill,
|
||||||
.field-input:-webkit-autofill:hover,
|
.field-input:-webkit-autofill:hover,
|
||||||
.field-input:-webkit-autofill:focus {
|
.field-input:-webkit-autofill:focus {
|
||||||
-webkit-text-fill-color: #1A1A2E;
|
-webkit-text-fill-color: var(--text);
|
||||||
box-shadow: 0 0 0 1000px #FFFFFF inset;
|
box-shadow: 0 0 0 1000px var(--bg-input) inset;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input::placeholder {
|
.field-input::placeholder {
|
||||||
color: rgba(107, 114, 128, 0.6);
|
color: rgba(148, 163, 184, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.readonly {
|
.readonly {
|
||||||
@@ -555,10 +555,10 @@ label {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.msg.ok {
|
.msg.ok {
|
||||||
color: #059669;
|
color: var(--success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg.err {
|
.msg.err {
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -142,21 +142,21 @@ const balanceAmountClass = computed(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bank-card-balance">
|
<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>
|
<p class="bank-card-number balance-amount" :class="balanceAmountClass">{{ balanceDisplay }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bank-card-footer">
|
<div class="bank-card-footer">
|
||||||
<div class="bank-card-field">
|
<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>
|
<span class="bank-card-holder">{{ profileRaw?.username }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="bank-card-field bank-card-field--center">
|
<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>
|
<span class="bank-card-stat">{{ formatMoney(cashbackTotal, locale) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="bank-card-field bank-card-field--right">
|
<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>
|
<span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -288,7 +288,7 @@ const balanceAmountClass = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.error-text {
|
.error-text {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -296,16 +296,16 @@ const balanceAmountClass = computed(() => {
|
|||||||
.retry-btn {
|
.retry-btn {
|
||||||
padding: 8px 24px;
|
padding: 8px 24px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid #003D6B;
|
border: 1px solid var(--primary);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #005B9F;
|
color: var(--primary-light);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.retry-btn:active {
|
.retry-btn:active {
|
||||||
background: rgba(0, 61, 107, 0.08);
|
background: rgba(244, 162, 97, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wallet-banner {
|
.wallet-banner {
|
||||||
@@ -315,7 +315,7 @@ const balanceAmountClass = computed(() => {
|
|||||||
aspect-ratio: 1.75 / 1;
|
aspect-ratio: 1.75 / 1;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wallet-banner::after {
|
.wallet-banner::after {
|
||||||
@@ -346,9 +346,9 @@ const balanceAmountClass = computed(() => {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
135deg,
|
135deg,
|
||||||
#003D6B 0%,
|
#0F2027 0%,
|
||||||
#005B9F 50%,
|
#F4A261 50%,
|
||||||
#003D6B 100%
|
#203A43 100%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -523,74 +523,84 @@ const balanceAmountClass = computed(() => {
|
|||||||
.quick-actions {
|
.quick-actions {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-template-areas:
|
||||||
|
"a a b b"
|
||||||
|
"c c d d";
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-bottom: 10px;
|
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 {
|
.qa-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 10px;
|
||||||
padding: 14px 4px 12px;
|
padding: 12px 10px;
|
||||||
border-radius: 10px;
|
border-radius: var(--radius-sm);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #CBD5E1;
|
border: 1px solid var(--border);
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.15s, box-shadow 0.15s;
|
transition: transform 0.15s, box-shadow 0.15s;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qa-item:active {
|
.qa-item:active {
|
||||||
transform: scale(0.96);
|
transform: scale(0.96);
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qa-icon {
|
.qa-icon {
|
||||||
width: 44px;
|
width: 36px;
|
||||||
height: 44px;
|
height: 36px;
|
||||||
border-radius: 12px;
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qa-icon--wallet {
|
.qa-icon--wallet {
|
||||||
background: rgba(0, 61, 107, 0.1);
|
background: rgba(244, 162, 97, 0.15);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.qa-icon--recharge {
|
.qa-icon--recharge {
|
||||||
background: rgba(5, 150, 105, 0.1);
|
background: rgba(16, 185, 129, 0.15);
|
||||||
color: #059669;
|
color: var(--success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.qa-icon--cashback {
|
.qa-icon--cashback {
|
||||||
background: rgba(248, 151, 31, 0.1);
|
background: rgba(255, 179, 0, 0.15);
|
||||||
color: #E8870A;
|
color: var(--warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
.qa-icon--history {
|
.qa-icon--history {
|
||||||
background: rgba(99, 102, 241, 0.1);
|
background: rgba(244, 162, 97, 0.15);
|
||||||
color: #6366F1;
|
color: #F4A261;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qa-label {
|
.qa-label {
|
||||||
font-size: 11px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
text-align: center;
|
text-align: left;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
max-width: 100%;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-group {
|
.settings-group {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -604,11 +614,11 @@ const balanceAmountClass = computed(() => {
|
|||||||
min-height: 42px;
|
min-height: 42px;
|
||||||
padding: 0 14px;
|
padding: 0 14px;
|
||||||
background: none;
|
background: none;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-cell:last-child {
|
.settings-cell:last-child {
|
||||||
@@ -616,7 +626,7 @@ const balanceAmountClass = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.settings-cell:active {
|
.settings-cell:active {
|
||||||
background: #F5F7FA;
|
background: var(--bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-cell--stack {
|
.settings-cell--stack {
|
||||||
@@ -639,7 +649,7 @@ const balanceAmountClass = computed(() => {
|
|||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-head {
|
.cell-head {
|
||||||
@@ -649,11 +659,11 @@ const balanceAmountClass = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cell-label {
|
.cell-label {
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-chevron {
|
.cell-chevron {
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
@@ -672,7 +682,7 @@ const balanceAmountClass = computed(() => {
|
|||||||
|
|
||||||
.rules-cell .rules-body {
|
.rules-cell .rules-body {
|
||||||
padding: 0 14px 12px;
|
padding: 0 14px 12px;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.lang-segment {
|
.lang-segment {
|
||||||
@@ -687,19 +697,23 @@ const balanceAmountClass = computed(() => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
min-height: 30px;
|
min-height: 30px;
|
||||||
|
min-width: 0;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lang-opt.active {
|
.lang-opt.active {
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
background: rgba(0, 61, 107, 0.06);
|
background: rgba(244, 162, 97, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn {
|
.logout-btn {
|
||||||
@@ -708,21 +722,21 @@ const balanceAmountClass = computed(() => {
|
|||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
padding: 0 14px;
|
padding: 0 14px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #DC2626;
|
border: 1px solid var(--danger);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn:active {
|
.logout-btn:active {
|
||||||
background: rgba(220, 38, 38, 0.06);
|
background: rgba(239, 68, 68, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rules-body {
|
.rules-body {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rules-body p {
|
.rules-body p {
|
||||||
|
|||||||
@@ -411,24 +411,24 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.recharge-history-page { padding: 0 16px 24px; }
|
.recharge-history-page { padding: 0 16px 24px; }
|
||||||
.page-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
|
.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; }
|
.page-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
|
||||||
.back-btn { background: none; border: none; color: #003D6B; font-size: 24px; cursor: pointer; padding: 0 8px; }
|
.back-btn { background: none; border: none; color: var(--primary); font-size: 24px; cursor: pointer; padding: 0 8px; }
|
||||||
.recharge-btn { background: none; border: none; color: #003D6B; font-size: 13px; cursor: pointer; font-weight: 600; }
|
.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; }
|
.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; }
|
.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-list { display: flex; flex-direction: column; gap: 12px; }
|
||||||
.order-card {
|
.order-card {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
.order-card:active {
|
.order-card:active {
|
||||||
opacity: 0.92;
|
opacity: 0.92;
|
||||||
@@ -438,66 +438,66 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0; left: 0; right: 0;
|
top: 0; left: 0; right: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: linear-gradient(90deg, transparent, #003D6B, transparent);
|
background: linear-gradient(90deg, transparent, #F4A261, transparent);
|
||||||
}
|
}
|
||||||
.order-card.rejected {
|
.order-card.rejected {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border-color: rgba(220, 38, 38, 0.25);
|
border-color: rgba(239, 68, 68, 0.3);
|
||||||
}
|
}
|
||||||
.order-card.rejected::before {
|
.order-card.rejected::before {
|
||||||
background: linear-gradient(90deg, transparent, #DC2626, transparent);
|
background: linear-gradient(90deg, transparent, #EF4444, transparent);
|
||||||
}
|
}
|
||||||
.order-card.rejected .order-amount {
|
.order-card.rejected .order-amount {
|
||||||
background: none;
|
background: none;
|
||||||
-webkit-background-clip: unset;
|
-webkit-background-clip: unset;
|
||||||
background-clip: unset;
|
background-clip: unset;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
.order-card.rejected .info-label {
|
.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; }
|
.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 { 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.bank { background: rgba(244, 162, 97, 0.15); color: var(--primary-light); }
|
||||||
.method-badge.usdt { background: rgba(5, 150, 105, 0.08); color: #059669; }
|
.method-badge.usdt { background: rgba(16, 185, 129, 0.15); color: var(--success); }
|
||||||
.status-badge { font-size: 12px; font-weight: 700; }
|
.status-badge { font-size: 12px; font-weight: 700; }
|
||||||
.status-pending { color: #F8971F; }
|
.status-pending { color: var(--warning); }
|
||||||
.status-approved { color: #059669; }
|
.status-approved { color: var(--success); }
|
||||||
.status-rejected { color: #DC2626; }
|
.status-rejected { color: var(--danger); }
|
||||||
.order-body { }
|
.order-body { }
|
||||||
.order-amount {
|
.order-amount {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
margin-bottom: 4px;
|
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; }
|
.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; }
|
.order-times { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
|
||||||
.time-row { display: flex; justify-content: space-between; align-items: center; }
|
.time-row { display: flex; justify-content: space-between; align-items: center; }
|
||||||
.time-label { font-size: 11px; color: #6B7280; }
|
.time-label { font-size: 11px; color: var(--text-muted); }
|
||||||
.time-value { font-size: 11px; color: #1A1A2E; font-variant-numeric: tabular-nums; }
|
.time-value { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
|
||||||
.order-remark {
|
.order-remark {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
background: rgba(0, 61, 107, 0.04);
|
background: rgba(244, 162, 97, 0.08);
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
border-left: 2px solid #003D6B;
|
border-left: 2px solid var(--primary);
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
.reject-reason {
|
.reject-reason {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 6px 0 0;
|
padding: 6px 0 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
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;
|
line-height: 1.45;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -508,16 +508,16 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
border-top: 1px solid #E5E7EB;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
.card-detail-summary {
|
.card-detail-summary {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.card-detail-link {
|
.card-detail-link {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -530,7 +530,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
background: none;
|
background: none;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -548,7 +548,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
.end-hint {
|
.end-hint {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 16px 0 4px;
|
padding: 16px 0 4px;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
@@ -558,7 +558,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background: rgba(0, 0, 0, 0.55);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -571,12 +571,12 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
max-width: 480px;
|
max-width: 480px;
|
||||||
max-height: min(88vh, 720px);
|
max-height: min(88vh, 720px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: 14px 14px 0 0;
|
border-radius: 14px 14px 0 0;
|
||||||
padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
|
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 {
|
.detail-close {
|
||||||
@@ -588,7 +588,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -598,15 +598,15 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
margin: 0 28px 12px 0;
|
margin: 0 28px 12px 0;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-summary {
|
.detail-summary {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-body);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-summary-head {
|
.detail-summary-head {
|
||||||
@@ -620,13 +620,13 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-method-name {
|
.detail-method-name {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
@@ -641,13 +641,13 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
text-align: right;
|
text-align: right;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -655,12 +655,12 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
.detail-summary .order-remark {
|
.detail-summary .order-remark {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 6px 0 0;
|
padding: 6px 0 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
border-top: 1px solid #E5E7EB;
|
border-top: 1px solid var(--border);
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -668,12 +668,12 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
.detail-summary .reject-reason {
|
.detail-summary .reject-reason {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 6px 0 0;
|
padding: 6px 0 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
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;
|
line-height: 1.45;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -686,14 +686,14 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
.detail-audit {
|
.detail-audit {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
border-top: 1px solid #E5E7EB;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-audit-title {
|
.detail-audit-title {
|
||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -721,7 +721,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
width: 5px;
|
width: 5px;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -730,7 +730,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
width: 1px;
|
width: 1px;
|
||||||
min-height: 10px;
|
min-height: 10px;
|
||||||
margin: 3px 0;
|
margin: 3px 0;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step-body {
|
.audit-step-body {
|
||||||
@@ -753,13 +753,13 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
.audit-step-title {
|
.audit-step-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step-time {
|
.audit-step-time {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -768,7 +768,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
.audit-step-actor {
|
.audit-step-actor {
|
||||||
margin: 2px 0 0;
|
margin: 2px 0 0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -776,14 +776,14 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
margin: 3px 0 0;
|
margin: 3px 0 0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #059669;
|
color: var(--success);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step-note {
|
.audit-step-note {
|
||||||
margin: 4px 0 0;
|
margin: 4px 0 0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -801,35 +801,35 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
|
|
||||||
.audit-step-box--reject {
|
.audit-step-box--reject {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid rgba(220, 38, 38, 0.22);
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step-box-label {
|
.audit-step-box-label {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step-box-text {
|
.audit-step-box-text {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step--submitted .audit-dot {
|
.audit-step--submitted .audit-dot {
|
||||||
background: #003D6B;
|
background: var(--primary);
|
||||||
}
|
}
|
||||||
.audit-step--approved .audit-dot {
|
.audit-step--approved .audit-dot {
|
||||||
background: #059669;
|
background: var(--success);
|
||||||
}
|
}
|
||||||
.audit-step--rejected .audit-dot {
|
.audit-step--rejected .audit-dot {
|
||||||
background: #DC2626;
|
background: var(--danger);
|
||||||
}
|
}
|
||||||
.audit-step--revoked .audit-dot {
|
.audit-step--revoked .audit-dot {
|
||||||
background: #6B7280;
|
background: var(--text-muted);
|
||||||
}
|
}
|
||||||
.audit-step--reopened .audit-dot {
|
.audit-step--reopened .audit-dot {
|
||||||
background: #003D6B;
|
background: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-reapply-btn {
|
.modal-reapply-btn {
|
||||||
|
|||||||
@@ -368,9 +368,9 @@ onMounted(fetchMethods);
|
|||||||
display: flex; align-items: center; justify-content: space-between;
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
padding: 8px 0 12px;
|
padding: 8px 0 12px;
|
||||||
}
|
}
|
||||||
.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1A1A2E; }
|
.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
|
||||||
.back-btn { background: none; border: none; color: #003D6B; font-size: 22px; cursor: pointer; padding: 0 6px; }
|
.back-btn { background: none; border: none; color: var(--primary); font-size: 22px; cursor: pointer; padding: 0 6px; }
|
||||||
.history-btn { background: none; border: none; color: #003D6B; font-size: 12px; cursor: pointer; font-weight: 600; }
|
.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; }
|
.state { display: flex; justify-content: center; padding: 48px; }
|
||||||
|
|
||||||
@@ -380,24 +380,24 @@ onMounted(fetchMethods);
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
background: rgba(220, 38, 38, 0.06);
|
background: rgba(239, 68, 68, 0.12);
|
||||||
border: 1px solid rgba(220, 38, 38, 0.2);
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.type-tabs {
|
.type-tabs {
|
||||||
display: flex; margin-bottom: 12px;
|
display: flex; margin-bottom: 12px;
|
||||||
border-radius: 6px; overflow: hidden;
|
border-radius: 6px; overflow: hidden;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
.tab {
|
.tab {
|
||||||
flex: 1; padding: 8px; border: none;
|
flex: 1; padding: 8px; border: none;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
color: #6B7280; font-weight: 700; font-size: 13px;
|
color: var(--text-muted); font-weight: 700; font-size: 13px;
|
||||||
cursor: pointer; transition: all 0.2s;
|
cursor: pointer; transition: all 0.2s;
|
||||||
}
|
}
|
||||||
.tab.active {
|
.tab.active {
|
||||||
background: #003D6B; color: #FFFFFF;
|
background: var(--primary); color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.methods-list {
|
.methods-list {
|
||||||
@@ -405,19 +405,19 @@ onMounted(fetchMethods);
|
|||||||
}
|
}
|
||||||
.method-pill {
|
.method-pill {
|
||||||
display: flex; flex-direction: column; gap: 1px;
|
display: flex; flex-direction: column; gap: 1px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px; padding: 6px 12px;
|
border-radius: 6px; padding: 6px 12px;
|
||||||
text-align: left; cursor: pointer;
|
text-align: left; cursor: pointer;
|
||||||
transition: border-color 0.15s;
|
transition: border-color 0.15s;
|
||||||
}
|
}
|
||||||
.method-pill.selected {
|
.method-pill.selected {
|
||||||
border-color: #0066CC;
|
border-color: var(--border-active);
|
||||||
background: rgba(0, 102, 204, 0.04);
|
background: rgba(244, 162, 97, 0.1);
|
||||||
}
|
}
|
||||||
.pill-name { font-weight: 700; font-size: 12px; color: #1A1A2E; }
|
.pill-name { font-weight: 700; font-size: 12px; color: var(--text); }
|
||||||
.pill-sub { font-size: 10px; color: #6B7280; }
|
.pill-sub { font-size: 10px; color: var(--text-muted); }
|
||||||
.empty-methods { text-align: center; color: #6B7280; padding: 20px; font-size: 12px; }
|
.empty-methods { text-align: center; color: var(--text-muted); padding: 20px; font-size: 12px; }
|
||||||
|
|
||||||
.bank-card-wrap {
|
.bank-card-wrap {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
@@ -433,9 +433,9 @@ onMounted(fetchMethods);
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
overflow: hidden;
|
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);
|
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 {
|
.bank-card-shine {
|
||||||
@@ -464,7 +464,7 @@ onMounted(fetchMethods);
|
|||||||
height: 180px;
|
height: 180px;
|
||||||
right: -60px;
|
right: -60px;
|
||||||
bottom: -80px;
|
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 {
|
.bank-card-deco--2 {
|
||||||
@@ -472,7 +472,7 @@ onMounted(fetchMethods);
|
|||||||
height: 100px;
|
height: 100px;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
border-color: rgba(255, 255, 255, 0.05);
|
border-color: rgba(255, 185, 128, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-card-top,
|
.bank-card-top,
|
||||||
@@ -583,57 +583,57 @@ onMounted(fetchMethods);
|
|||||||
}
|
}
|
||||||
|
|
||||||
.method-info {
|
.method-info {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border-radius: 8px; padding: 10px 12px;
|
border-radius: 8px; padding: 10px 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
.info-row {
|
.info-row {
|
||||||
display: flex; justify-content: space-between; align-items: baseline;
|
display: flex; justify-content: space-between; align-items: baseline;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
.info-row:last-child { border-bottom: none; }
|
.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 {
|
.info-value {
|
||||||
font-size: 13px; font-weight: 600;
|
font-size: 13px; font-weight: 600;
|
||||||
word-break: break-all; text-align: right;
|
word-break: break-all; text-align: right;
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
}
|
}
|
||||||
.copyable {
|
.copyable {
|
||||||
cursor: pointer; color: #0066CC;
|
cursor: pointer; color: var(--primary);
|
||||||
display: inline-flex; align-items: center; gap: 4px;
|
display: inline-flex; align-items: center; gap: 4px;
|
||||||
}
|
}
|
||||||
.copyable:active { opacity: 0.6; }
|
.copyable:active { opacity: 0.6; }
|
||||||
.copy-icon { width: 14px; height: 14px; flex-shrink: 0; }
|
.copy-icon { width: 14px; height: 14px; flex-shrink: 0; }
|
||||||
.qr-container { display: flex; justify-content: center; padding: 8px 0 4px; }
|
.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 { margin-bottom: 12px; }
|
||||||
.form-section label {
|
.form-section label {
|
||||||
display: block; font-size: 11px; font-weight: 700;
|
display: block; font-size: 11px; font-weight: 700;
|
||||||
color: #6B7280; margin-bottom: 4px;
|
color: var(--text-muted); margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
.amount-input {
|
.amount-input {
|
||||||
width: 100%; padding: 10px; background: #FFFFFF;
|
width: 100%; padding: 10px; background: var(--bg-input);
|
||||||
border: 1px solid #E5E7EB; border-radius: 6px;
|
border: 1px solid var(--border); border-radius: 6px;
|
||||||
color: #1A1A2E; font-size: 16px; font-weight: 700;
|
color: var(--text); font-size: 16px; font-weight: 700;
|
||||||
box-sizing: border-box;
|
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 {
|
.upload-area {
|
||||||
border: 1px dashed #0066CC;
|
border: 1px dashed var(--primary);
|
||||||
border-radius: 6px; padding: 16px;
|
border-radius: 6px; padding: 16px;
|
||||||
text-align: center; position: relative;
|
text-align: center; position: relative;
|
||||||
display: flex; align-items: center; justify-content: center;
|
display: flex; align-items: center; justify-content: center;
|
||||||
cursor: pointer;
|
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-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
|
||||||
.upload-hint { font-size: 12px; color: #6B7280; }
|
.upload-hint { font-size: 12px; color: var(--text-muted); }
|
||||||
.compress-hint { font-size: 12px; color: #003D6B; }
|
.compress-hint { font-size: 12px; color: var(--primary); }
|
||||||
.screenshot-preview { position: relative; display: inline-block; }
|
.screenshot-preview { position: relative; display: inline-block; }
|
||||||
.screenshot-preview img { max-width: 100%; max-height: 160px; border-radius: 6px; }
|
.screenshot-preview img { max-width: 100%; max-height: 160px; border-radius: 6px; }
|
||||||
.remove-btn {
|
.remove-btn {
|
||||||
@@ -645,21 +645,21 @@ onMounted(fetchMethods);
|
|||||||
|
|
||||||
.btn-submit {
|
.btn-submit {
|
||||||
width: 100%; padding: 12px;
|
width: 100%; padding: 12px;
|
||||||
background: #003D6B;
|
background: var(--primary);
|
||||||
color: #FFFFFF; border: none; border-radius: 6px;
|
color: #FFFFFF; border: none; border-radius: 6px;
|
||||||
font-size: 14px; font-weight: 800;
|
font-size: 14px; font-weight: 800;
|
||||||
cursor: pointer; margin-top: 8px;
|
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; }
|
.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||||
|
|
||||||
.success-state { text-align: center; padding: 40px 16px; }
|
.success-state { text-align: center; padding: 40px 16px; }
|
||||||
.success-icon { font-size: 40px; color: #059669; margin-bottom: 10px; }
|
.success-icon { font-size: 40px; color: var(--success); margin-bottom: 10px; }
|
||||||
.success-state h3 { margin: 0 0 6px; font-size: 16px; color: #1A1A2E; }
|
.success-state h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
|
||||||
.order-no { font-family: monospace; color: #003D6B; font-size: 13px; margin: 4px 0; }
|
.order-no { font-family: monospace; color: var(--primary); font-size: 13px; margin: 4px 0; }
|
||||||
.success-hint { font-size: 12px; color: #6B7280; margin-bottom: 20px; }
|
.success-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: #003D6B;
|
background: var(--primary);
|
||||||
color: #FFFFFF; border: none; border-radius: 6px;
|
color: #FFFFFF; border: none; border-radius: 6px;
|
||||||
padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
|
padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -227,24 +227,41 @@ const fieldError = () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
|
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-size: cover;
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
background-repeat: no-repeat;
|
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 {
|
.login-form {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
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 {
|
.login-form.is-busy {
|
||||||
@@ -261,8 +278,8 @@ const fieldError = () => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
background: rgba(255, 255, 255, 0.85);
|
background: rgba(15, 32, 39, 0.85);
|
||||||
backdrop-filter: blur(2px);
|
backdrop-filter: blur(4px);
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -270,7 +287,7 @@ const fieldError = () => {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -285,7 +302,7 @@ const fieldError = () => {
|
|||||||
margin: 0 0 2px;
|
margin: 0 0 2px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -301,7 +318,7 @@ const fieldError = () => {
|
|||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
@@ -309,29 +326,29 @@ label {
|
|||||||
.optional-tag {
|
.optional-tag {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input {
|
.field-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-input);
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input::placeholder {
|
.field-input::placeholder {
|
||||||
color: rgba(107, 114, 128, 0.6);
|
color: rgba(148, 163, 184, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
.field-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #0066CC;
|
border-color: var(--primary);
|
||||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-row {
|
.inline-row {
|
||||||
@@ -349,10 +366,10 @@ label {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #F5F7FA;
|
background: var(--bg-elevated);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -386,14 +403,14 @@ label {
|
|||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip:active {
|
.btn-skip:active {
|
||||||
color: #005B9F;
|
color: var(--primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip-light {
|
.btn-skip-light {
|
||||||
@@ -401,10 +418,11 @@ label {
|
|||||||
bottom: calc(20px + env(safe-area-inset-bottom));
|
bottom: calc(20px + env(safe-area-inset-bottom));
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
z-index: 1;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -412,12 +430,12 @@ label {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip-light:active {
|
.btn-skip-light:active {
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #DC2626;
|
color: var(--danger);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
|
|||||||
@@ -238,7 +238,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
.back-btn {
|
.back-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 4px 0 8px;
|
padding: 4px 0 8px;
|
||||||
@@ -273,16 +273,16 @@ const pullIndicatorStyle = () => ({
|
|||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-tab.active {
|
.filter-tab.active {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background: #003D6B;
|
background: var(--primary);
|
||||||
border-color: #003D6B;
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.state {
|
.state {
|
||||||
@@ -291,7 +291,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 56px 20px;
|
padding: 56px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -312,8 +312,8 @@ const pullIndicatorStyle = () => ({
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -322,7 +322,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tx-row:active {
|
.tx-row:active {
|
||||||
background: #F5F7FA;
|
background: var(--bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-main {
|
.tx-main {
|
||||||
@@ -341,7 +341,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
|
|
||||||
.tx-summary {
|
.tx-summary {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -355,11 +355,11 @@ const pullIndicatorStyle = () => ({
|
|||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-type { font-weight: 700; color: #1A1A2E; }
|
.tx-type { font-weight: 700; color: var(--text); }
|
||||||
.pos { color: #003D6B; font-weight: 800; font-size: 15px; }
|
.pos { color: var(--accent-light); font-weight: 800; font-size: 15px; }
|
||||||
.neg { color: #DC2626; font-weight: 700; }
|
.neg { color: var(--danger); font-weight: 700; }
|
||||||
.tx-time { font-size: 11px; color: #6B7280; }
|
.tx-time { font-size: 11px; color: var(--text-muted); }
|
||||||
.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
|
.tx-arrow { font-size: 16px; color: var(--text-muted); font-weight: 700; line-height: 1; }
|
||||||
|
|
||||||
.sentinel {
|
.sentinel {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
@@ -374,11 +374,11 @@ const pullIndicatorStyle = () => ({
|
|||||||
.end-hint {
|
.end-hint {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 16px 0 4px;
|
padding: 16px 0 4px;
|
||||||
letter-spacing: 0.03em;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -238,7 +238,7 @@ function goCashbackDetail() {
|
|||||||
.back-btn {
|
.back-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 4px 0 8px;
|
padding: 4px 0 8px;
|
||||||
@@ -251,7 +251,7 @@ function goCashbackDetail() {
|
|||||||
.state {
|
.state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 60px 20px;
|
padding: 60px 20px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -265,19 +265,19 @@ function goCashbackDetail() {
|
|||||||
gap: 6px;
|
gap: 6px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero.pos {
|
.hero.pos {
|
||||||
border-color: rgba(0, 61, 107, 0.2);
|
border-color: rgba(244, 162, 97, 0.3);
|
||||||
background: linear-gradient(135deg, rgba(0, 61, 107, 0.04), #FFFFFF);
|
background: linear-gradient(135deg, rgba(244, 162, 97, 0.15), var(--bg-card));
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero.neg {
|
.hero.neg {
|
||||||
border-color: rgba(220, 38, 38, 0.2);
|
border-color: rgba(239, 68, 68, 0.3);
|
||||||
background: linear-gradient(135deg, rgba(220, 38, 38, 0.04), #FFFFFF);
|
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), var(--bg-card));
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-type {
|
.hero-type {
|
||||||
@@ -285,13 +285,13 @@ function goCashbackDetail() {
|
|||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-summary {
|
.hero-summary {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
@@ -302,28 +302,28 @@ function goCashbackDetail() {
|
|||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero.pos .hero-amount { color: #003D6B; }
|
.hero.pos .hero-amount { color: var(--primary); }
|
||||||
.hero.neg .hero-amount { color: #DC2626; }
|
.hero.neg .hero-amount { color: var(--danger); }
|
||||||
|
|
||||||
.hero-time {
|
.hero-time {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
@@ -340,22 +340,23 @@ function goCashbackDetail() {
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sum-row span:last-child {
|
.sum-row span:last-child {
|
||||||
color: #1A1A2E;
|
color: var(--text);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pos { color: #003D6B !important; }
|
.pos { color: var(--primary) !important; }
|
||||||
.neg { color: #DC2626 !important; }
|
.neg { color: var(--danger) !important; }
|
||||||
|
|
||||||
.mono {
|
.mono {
|
||||||
font-family: ui-monospace, monospace;
|
font-family: ui-monospace, monospace;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.remark {
|
.remark {
|
||||||
@@ -368,9 +369,9 @@ function goCashbackDetail() {
|
|||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid #003D6B;
|
border: 1px solid var(--primary);
|
||||||
background: rgba(0, 61, 107, 0.04);
|
background: rgba(244, 162, 97, 0.1);
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -379,7 +380,7 @@ function goCashbackDetail() {
|
|||||||
.tx-id {
|
.tx-id {
|
||||||
font-family: ui-monospace, monospace;
|
font-family: ui-monospace, monospace;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #1A1A2E;
|
color: var(--text-secondary);
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -158,7 +158,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
padding: 56px 20px;
|
padding: 56px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -179,8 +179,8 @@ const pullIndicatorStyle = () => ({
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid var(--border);
|
||||||
background: #FFFFFF;
|
background: var(--bg-card);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -189,7 +189,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tx-row:active {
|
.tx-row:active {
|
||||||
background: #F5F7FA;
|
background: var(--bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-main {
|
.tx-main {
|
||||||
@@ -208,7 +208,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
|
|
||||||
.tx-summary {
|
.tx-summary {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -222,11 +222,11 @@ const pullIndicatorStyle = () => ({
|
|||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-type { font-weight: 700; color: #1A1A2E; }
|
.tx-type { font-weight: 700; color: var(--text); }
|
||||||
.pos { color: #003D6B; font-weight: 800; font-size: 14px; }
|
.pos { color: var(--accent-light); font-weight: 800; font-size: 14px; }
|
||||||
.neg { color: #DC2626; font-weight: 700; }
|
.neg { color: var(--danger); font-weight: 700; }
|
||||||
.tx-time { font-size: 11px; color: #6B7280; }
|
.tx-time { font-size: 11px; color: var(--text-muted); }
|
||||||
.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
|
.tx-arrow { font-size: 16px; color: var(--text-muted); font-weight: 700; line-height: 1; }
|
||||||
|
|
||||||
.top-bar {
|
.top-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -237,13 +237,13 @@ const pullIndicatorStyle = () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.top-bar .more-link.secondary {
|
.top-bar .more-link.secondary {
|
||||||
color: #005B9F;
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-link {
|
.more-link {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #003D6B;
|
color: var(--primary);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
@@ -256,5 +256,5 @@ const pullIndicatorStyle = () => ({
|
|||||||
opacity: 1;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user