feat(player): 全站 UI 主题重构与布局优化 — 从暗金奢华风格迁移至 Pinnacle 风格蓝白专业主题
一、全局主题重构（52 文件） - 设计体系从深色/金色奢华调性全面迁移至 Pinnacle 风格的清爽专业调性 - 主色：深海蓝 #003D6B，辅色：橙色 #F8971F / #E8870A（赔率强调色） - 背景从纯黑/深灰改为白色/浅灰 (#F5F7FA, #E8EDF2) - 更新 CSS 变量设计令牌体系：--primary, --border, --text-muted, --bg-body, --bg-hover, --radius-sm 等 - styles.css 全量重写，所有组件 scoped CSS 同步适配 二、紧凑布局优化 - 首页：BannerCarousel 轮播高度缩减 (clamp 148→120px)，MatchBetCard 内边距/间距/字号全面收紧 - 首页：赛事卡片 padding 14px→10px，队旗尺寸 72×48→56×38，VS 区域缩小 - 个人中心：钱包横幅宽高比 2/1→1.75/1，设置单元格 min-height 48→42px - 钱包页：交易行 padding/字号收紧，金额字号 15→14px - MainLayout：顶栏高度 50→48px，底部导航间距微调 三、对比度与可读性增强 - 赛事详情/投注页背景从透明加深至 #E8EDF2 - 所有卡片边框从 #E5E7EB 加深至 #CBD5E1，阴影强度提升 - 盘口选择面板背景 #F5F7FA→#EDF0F4，增加 border-top 分隔线 - 赔率颜色从 #F8971F 加深至 #E8870A，选中态 border-width 加粗至 2px - 标签字号增大并加粗 (font-weight: 600)，颜色从 #6B7280 加深至 #4B5563 四、首页快捷入口 & 个人中心网格布局 - 首页新增 4 宫格快捷入口（投注/充值/账单/活动），彩色图标区分功能 - 个人中心重构为「4 宫格快捷操作 + 列表」结构：钱包/充值/返水/记录 - 移除原个人中心金色入口列表项，精简设置列表为修改资料/投注规则/语言 五、顶部导航栏重设计 - Logo 从 img 标签替换为内联 SVG 纯文字：THE(灰) + BET(深蓝) + 365(橙) - 客服按钮改为纯图标圆形按钮 (32×32px)，增加竖线分隔符 - Chip 高度 34→32px，间距 8→6px - 底部导航激活态指示条加粗至 2.5px，左右缩进从 22% 调至 18% 六、SVG Favicon - 新增纯路径 SVG favicon（无 <text> 元素，确保浏览器 favicon 沙箱兼容） - 深蓝圆角方块 + 白色 "B" 字母路径 + 橙色圆点 + 白色 "365" 数字路径 - index.html 更新 favicon 引用为 /favicon.svg 🤖 Generated with [Qoder][https://qoder.com]
This commit is contained in:
@@ -3,13 +3,13 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#003D6B" />
|
||||||
<link rel="icon" type="image/png" href="/logo.png" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<link rel="apple-touch-icon" href="/logo.png" />
|
<link rel="apple-touch-icon" href="/logo.png" />
|
||||||
<link rel="manifest" href="/site.webmanifest" />
|
<link rel="manifest" href="/site.webmanifest" />
|
||||||
<title>TheBet365</title>
|
<title>TheBet365</title>
|
||||||
<style>
|
<style>
|
||||||
html, body { margin: 0; padding: 0; height: 100%; background: #000; }
|
html, body { margin: 0; padding: 0; height: 100%; background: #F5F7FA; }
|
||||||
#app-loading {
|
#app-loading {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #000;
|
background: #F5F7FA;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
#app-loading svg {
|
#app-loading svg {
|
||||||
@@ -35,16 +35,16 @@
|
|||||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="gs-track" x1="0%" y1="0%" x2="100%" y2="100%">
|
<linearGradient id="gs-track" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<stop offset="0%" stop-color="#D4AF37" stop-opacity="0.18" />
|
<stop offset="0%" stop-color="#003D6B" stop-opacity="0.18" />
|
||||||
<stop offset="50%" stop-color="#F0D875" stop-opacity="0.25" />
|
<stop offset="50%" stop-color="#005B9F" stop-opacity="0.25" />
|
||||||
<stop offset="100%" stop-color="#D4AF37" stop-opacity="0.18" />
|
<stop offset="100%" stop-color="#003D6B" stop-opacity="0.18" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="gs-arc" x1="0%" y1="0%" x2="100%" y2="100%">
|
<linearGradient id="gs-arc" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<stop offset="0%" stop-color="#FFF4C8" />
|
<stop offset="0%" stop-color="#E8F4FD" />
|
||||||
<stop offset="22%" stop-color="#F0D875" />
|
<stop offset="22%" stop-color="#7CB9E8" />
|
||||||
<stop offset="50%" stop-color="#D4AF37" />
|
<stop offset="50%" stop-color="#005B9F" />
|
||||||
<stop offset="78%" stop-color="#B8942B" />
|
<stop offset="78%" stop-color="#003D6B" />
|
||||||
<stop offset="100%" stop-color="#8B6914" />
|
<stop offset="100%" stop-color="#002847" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<filter id="gs-glow">
|
<filter id="gs-glow">
|
||||||
<feGaussianBlur stdDeviation="1.2" result="blur" />
|
<feGaussianBlur stdDeviation="1.2" result="blur" />
|
||||||
@@ -54,9 +54,9 @@
|
|||||||
</feMerge>
|
</feMerge>
|
||||||
</filter>
|
</filter>
|
||||||
<radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
|
<radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
|
||||||
<stop offset="0%" stop-color="#FFF4C8" />
|
<stop offset="0%" stop-color="#E8F4FD" />
|
||||||
<stop offset="60%" stop-color="#F0D875" />
|
<stop offset="60%" stop-color="#7CB9E8" />
|
||||||
<stop offset="100%" stop-color="#D4AF37" />
|
<stop offset="100%" stop-color="#005B9F" />
|
||||||
</radialGradient>
|
</radialGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
|
<circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
|
||||||
|
|||||||
@@ -35,10 +35,11 @@ const text = computed(() => {
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin: -4px -2px 14px;
|
margin: -4px -2px 14px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee-bar.embedded {
|
.marquee-bar.embedded {
|
||||||
@@ -46,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 var(--border);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
background: #111;
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee-bar.embedded .marquee-badge {
|
.marquee-bar.embedded .marquee-badge {
|
||||||
@@ -65,9 +66,9 @@ const text = computed(() => {
|
|||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
color: #1A1000;
|
color: #FFFFFF;
|
||||||
background: var(--gradient-gold);
|
background: #003D6B;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: 1px solid #003D6B;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -89,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: var(--primary-light);
|
color: #003D6B;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -44,10 +44,10 @@ const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
|
|||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid var(--border-gold-soft, rgba(200, 168, 78, 0.35));
|
border: 1px solid #E5E7EB;
|
||||||
background: rgba(17, 17, 17, 0.92);
|
background: #FFFFFF;
|
||||||
color: var(--primary-light, #c8a84e);
|
color: #003D6B;
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.2s, transform 0.2s;
|
transition: background 0.2s, transform 0.2s;
|
||||||
}
|
}
|
||||||
@@ -57,7 +57,7 @@ const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
|
|||||||
}
|
}
|
||||||
|
|
||||||
.back-top-btn:active {
|
.back-top-btn:active {
|
||||||
background: rgba(200, 168, 78, 0.16);
|
background: rgba(0, 61, 107, 0.06);
|
||||||
transform: scale(0.96);
|
transform: scale(0.96);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -166,20 +166,20 @@ onUnmounted(stopAutoPlay);
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.carousel {
|
.carousel {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: -12px -16px 14px;
|
margin: -12px -16px 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media {
|
.media {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #05080d;
|
background: #E8EDF2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewport {
|
.viewport {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: clamp(148px, 41.86vw, 180px);
|
height: clamp(120px, 34vw, 150px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.track {
|
.track {
|
||||||
@@ -197,9 +197,7 @@ onUnmounted(stopAutoPlay);
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background:
|
background: linear-gradient(135deg, #F5F7FA, #E8EDF2);
|
||||||
linear-gradient(135deg, rgba(7, 18, 31, 0.94), rgba(6, 8, 12, 0.98)),
|
|
||||||
#070d15;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -209,8 +207,8 @@ onUnmounted(stopAutoPlay);
|
|||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background:
|
background:
|
||||||
linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.03) 48%, rgba(0, 0, 0, 0.18));
|
linear-gradient(90deg, rgba(245, 247, 250, 0.12), rgba(255, 255, 255, 0.03) 48%, rgba(245, 247, 250, 0.12));
|
||||||
box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.16);
|
box-shadow: inset 0 -1px 0 rgba(0, 61, 107, 0.08);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -221,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.42;
|
opacity: 0.3;
|
||||||
transform: scale(1.04);
|
transform: scale(1.04);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@@ -244,29 +242,30 @@ onUnmounted(stopAutoPlay);
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), var(--secondary));
|
background: linear-gradient(135deg, rgba(0, 61, 107, 0.08), #E8EDF2);
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media .nav {
|
.media .nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
width: 32px;
|
width: 26px;
|
||||||
height: 32px;
|
height: 26px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(0, 0, 0, 0.55);
|
background: rgba(255, 255, 255, 0.85);
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 4px;
|
||||||
font-size: 22px;
|
font-size: 18px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav.prev { left: 8px; }
|
.nav.prev { left: 8px; }
|
||||||
@@ -274,29 +273,30 @@ onUnmounted(stopAutoPlay);
|
|||||||
|
|
||||||
.media .dots {
|
.media .dots {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10px;
|
bottom: 8px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 8px;
|
gap: 6px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
width: 8px;
|
width: 6px;
|
||||||
height: 8px;
|
height: 6px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(255, 255, 255, 0.35);
|
background: rgba(0, 61, 107, 0.2);
|
||||||
border: 2px solid transparent;
|
border: 1.5px solid transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
transition: all 0.25s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot.active {
|
.dot.active {
|
||||||
width: 22px;
|
width: 18px;
|
||||||
border-radius: 6px;
|
border-radius: 5px;
|
||||||
background: var(--gradient-gold);
|
background: #003D6B;
|
||||||
border-color: var(--primary-light);
|
border-color: #003D6B;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -65,9 +65,9 @@ function close() {
|
|||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: 1px solid #E5E7EB;
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: #FFFFFF;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -79,7 +79,7 @@ function close() {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 205;
|
z-index: 205;
|
||||||
background: rgba(0, 0, 0, 0.72);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -93,11 +93,11 @@ function close() {
|
|||||||
max-width: 340px;
|
max-width: 340px;
|
||||||
max-height: 85vh;
|
max-height: 85vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
padding: 16px 14px 14px;
|
padding: 16px 14px 14px;
|
||||||
box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-x {
|
.close-x {
|
||||||
@@ -107,15 +107,15 @@ function close() {
|
|||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(255, 255, 255, 0.06);
|
background: #F5F7FA;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
padding-right: 24px;
|
padding-right: 24px;
|
||||||
@@ -126,14 +126,14 @@ function close() {
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-body :deep(.flow-name) {
|
.guide-body :deep(.flow-name) {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -152,21 +152,24 @@ function close() {
|
|||||||
|
|
||||||
.guide-body :deep(.flow-block) {
|
.guide-body :deep(.flow-block) {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-body :deep(.rules-link) {
|
.guide-body :deep(.rules-link) {
|
||||||
margin: 4px 0 0;
|
margin: 4px 0 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
border-top: 1px dashed var(--border);
|
border-top: 1px dashed #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-ok {
|
.btn-ok {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
background: #003D6B;
|
||||||
|
color: #FFFFFF;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -149,15 +149,19 @@ function goDetail() {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
border-bottom: 1px solid var(--border);
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #E5E7EB;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-card:active {
|
.bet-card:active {
|
||||||
background: rgba(255, 255, 255, 0.02);
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
@@ -178,9 +182,9 @@ function goDetail() {
|
|||||||
.cashback-tag {
|
.cashback-tag {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #f0b90b;
|
color: #F8971F;
|
||||||
background: rgba(240, 185, 11, 0.1);
|
background: rgba(248, 151, 31, 0.08);
|
||||||
border: 1px solid rgba(240, 185, 11, 0.25);
|
border: 1px solid rgba(248, 151, 31, 0.2);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
}
|
}
|
||||||
@@ -188,9 +192,9 @@ function goDetail() {
|
|||||||
.bet-type-tag {
|
.bet-type-tag {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--primary-light, #c8a84e);
|
color: #003D6B;
|
||||||
background: rgba(200, 168, 78, 0.12);
|
background: rgba(0, 61, 107, 0.06);
|
||||||
border: 1px solid rgba(200, 168, 78, 0.25);
|
border: 1px solid rgba(0, 61, 107, 0.15);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
@@ -198,7 +202,7 @@ function goDetail() {
|
|||||||
|
|
||||||
.card-date {
|
.card-date {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@@ -207,7 +211,7 @@ function goDetail() {
|
|||||||
.title {
|
.title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #e8e8e8;
|
color: #1A1A2E;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -221,7 +225,7 @@ function goDetail() {
|
|||||||
|
|
||||||
.pick-label {
|
.pick-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -233,8 +237,8 @@ function goDetail() {
|
|||||||
.odds-badge {
|
.odds-badge {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #c8a84e;
|
color: #F8971F;
|
||||||
background: rgba(200, 168, 78, 0.1);
|
background: rgba(248, 151, 31, 0.08);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -250,24 +254,24 @@ function goDetail() {
|
|||||||
|
|
||||||
.stake-amt {
|
.stake-amt {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.return-amt {
|
.return-amt {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.return-amt.highlight { color: #3db865; }
|
.return-amt.highlight { color: #059669; }
|
||||||
.return-amt.pending { color: #e8c84a; }
|
.return-amt.pending { color: #F8971F; }
|
||||||
.return-amt.lost { color: #e05050; }
|
.return-amt.lost { color: #DC2626; }
|
||||||
|
|
||||||
.chevron {
|
.chevron {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #333;
|
color: #E5E7EB;
|
||||||
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.75);
|
background: rgba(0, 0, 0, 0.35);
|
||||||
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: #101010;
|
background: #FFFFFF;
|
||||||
border-radius: 16px 16px 0 0;
|
border-radius: 16px 16px 0 0;
|
||||||
border-top: 1px solid var(--border-gold-soft);
|
border-top: 1px solid #E5E7EB;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.48);
|
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: linear-gradient(180deg, #1d1d1d 0%, #111 100%);
|
background: #FFFFFF;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-kicker {
|
.drawer-kicker {
|
||||||
margin: 0 0 3px;
|
margin: 0 0 3px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
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: var(--text);
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
@@ -509,8 +509,8 @@ watch(
|
|||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: #F5F7FA;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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(212, 175, 55, 0.08);
|
background: rgba(0, 61, 107, 0.04);
|
||||||
border-bottom: 1px solid rgba(212, 175, 55, 0.18);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance-bar strong {
|
.balance-bar strong {
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
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: rgba(255, 255, 255, 0.04);
|
background: #F5F7FA;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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: #101010;
|
background: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
background: #171717;
|
background: #F5F7FA;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slip-tab.active {
|
.slip-tab.active {
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
background: rgba(212, 175, 55, 0.13);
|
background: rgba(0, 61, 107, 0.06);
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-count {
|
.tab-count {
|
||||||
@@ -577,8 +577,8 @@ watch(
|
|||||||
height: 18px;
|
height: 18px;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
border-radius: 9px;
|
border-radius: 9px;
|
||||||
background: var(--primary);
|
background: #003D6B;
|
||||||
color: #111;
|
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: var(--text-muted);
|
color: #6B7280;
|
||||||
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: #151515;
|
background: #FFFFFF;
|
||||||
border: 1px solid #292929;
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 7px;
|
border-radius: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slip-item--single {
|
.slip-item--single {
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(18, 18, 18, 0.94));
|
background: rgba(0, 61, 107, 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: var(--text);
|
color: #1A1A2E;
|
||||||
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: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-pick {
|
.item-pick {
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-odds,
|
.item-odds,
|
||||||
.item-side strong {
|
.item-side strong {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
@@ -657,7 +657,7 @@ watch(
|
|||||||
|
|
||||||
.remove {
|
.remove {
|
||||||
background: none;
|
background: none;
|
||||||
color: var(--danger);
|
color: #DC2626;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -672,14 +672,12 @@ watch(
|
|||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
padding: 0 14px;
|
padding: 0 14px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: linear-gradient(180deg, #4b370d 0%, #241905 100%);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--primary-light);
|
border: 1px solid #003D6B;
|
||||||
color: #ffe892;
|
color: #003D6B;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
box-shadow:
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
0 0 0 1px rgba(255, 232, 146, 0.18) inset,
|
|
||||||
0 6px 18px rgba(212, 175, 55, 0.18);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-add-parlay span {
|
.btn-add-parlay span {
|
||||||
@@ -689,8 +687,8 @@ watch(
|
|||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--primary-light);
|
background: #003D6B;
|
||||||
color: #191100;
|
color: #FFFFFF;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
@@ -700,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(255, 77, 79, 0.12);
|
background: rgba(220, 38, 38, 0.06);
|
||||||
border: 1px solid rgba(255, 77, 79, 0.25);
|
border: 1px solid rgba(220, 38, 38, 0.18);
|
||||||
color: #ff8b8b;
|
color: #DC2626;
|
||||||
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: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
@@ -717,8 +715,8 @@ watch(
|
|||||||
.stake-area {
|
.stake-area {
|
||||||
margin: 12px 0 12px;
|
margin: 12px 0 12px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background: #151515;
|
background: #FFFFFF;
|
||||||
border: 1px solid #292929;
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -729,12 +727,12 @@ watch(
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stake-head strong,
|
.stake-head strong,
|
||||||
.return strong {
|
.return strong {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
@@ -744,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 var(--border-gold-soft);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #0c0c0c;
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.currency {
|
.currency {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
border-right: 1px solid #2d2d2d;
|
border-right: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stake-input-row input {
|
.stake-input-row input {
|
||||||
@@ -762,7 +760,7 @@ watch(
|
|||||||
height: 42px;
|
height: 42px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
@@ -781,7 +779,7 @@ watch(
|
|||||||
width: 38px;
|
width: 38px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
@@ -804,10 +802,10 @@ watch(
|
|||||||
.number-key,
|
.number-key,
|
||||||
.quick-stakes button {
|
.quick-stakes button {
|
||||||
min-height: 52px;
|
min-height: 52px;
|
||||||
border-radius: 5px;
|
border-radius: 6px;
|
||||||
background: #f4f1f6;
|
background: #F5F7FA;
|
||||||
color: #221f26;
|
color: #1A1A2E;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
border: 1px solid #E5E7EB;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -819,10 +817,11 @@ watch(
|
|||||||
|
|
||||||
.quick-stakes button {
|
.quick-stakes button {
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
background: #7b787d;
|
background: #FFFFFF;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
border: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.return {
|
.return {
|
||||||
@@ -830,7 +829,7 @@ watch(
|
|||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
color: var(--primary-light);
|
color: #059669;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
@@ -841,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: rgba(14, 14, 14, 0.98);
|
background: #FFFFFF;
|
||||||
border-top: 1px solid var(--border-gold-soft);
|
border-top: 1px solid #E5E7EB;
|
||||||
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-foot--split {
|
.drawer-foot--split {
|
||||||
@@ -853,9 +852,9 @@ watch(
|
|||||||
.btn-primary {
|
.btn-primary {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
border-radius: 7px;
|
border-radius: 8px;
|
||||||
background: linear-gradient(180deg, var(--primary-light), var(--primary));
|
background: #003D6B;
|
||||||
color: #111;
|
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: var(--bg-card);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
padding: 14px 12px 10px;
|
padding: 14px 12px 10px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
backdrop-filter: blur(10px);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-row {
|
.stats-row {
|
||||||
@@ -110,27 +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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-val.small {
|
.stat-val.small {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-val.gold {
|
.stat-val.gold {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item.won .stat-val { color: #3db865; }
|
.stat-item.won .stat-val { color: #059669; }
|
||||||
.stat-item.lost .stat-val { color: #e05050; }
|
.stat-item.lost .stat-val { color: #DC2626; }
|
||||||
.stat-item.pending .stat-val { color: #e8c84a; }
|
.stat-item.pending .stat-val { color: #F8971F; }
|
||||||
.stat-item.push .stat-val { color: #888; }
|
.stat-item.push .stat-val { color: #6B7280; }
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
@@ -144,7 +145,7 @@ const stats = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stats-bar.empty {
|
.stats-bar.empty {
|
||||||
background: rgba(255, 255, 255, 0.08);
|
background: #E8EDF2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-seg {
|
.bar-seg {
|
||||||
@@ -152,8 +153,8 @@ const stats = computed(() => {
|
|||||||
transition: flex 0.3s ease;
|
transition: flex 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-seg.won { background: #3db865; }
|
.bar-seg.won { background: #059669; }
|
||||||
.bar-seg.lost { background: #e05050; }
|
.bar-seg.lost { background: #DC2626; }
|
||||||
.bar-seg.pending { background: #e8c84a; }
|
.bar-seg.pending { background: #F8971F; }
|
||||||
.bar-seg.push { background: #444; }
|
.bar-seg.push { background: #6B7280; }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ interface Particle {
|
|||||||
color: string; shape: number;
|
color: string; shape: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const COLORS = ['#D4AF37', '#FFD700', '#F0C040', '#C8A02E', '#E6C84C', '#B8960C'];
|
const COLORS = ['#003D6B', '#005B9F', '#0066CC', '#3388DD', '#1A5FA0', '#4499E0'];
|
||||||
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="#D4AF37" stroke-width="3" />
|
<circle class="check-circle" cx="26" cy="26" r="24" fill="none" stroke="#003D6B" stroke-width="3" />
|
||||||
<path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#D4AF37" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
|
<path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#003D6B" 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(0, 0, 0, 0.82);
|
background: rgba(245, 247, 250, 0.88);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -166,7 +166,7 @@ onUnmounted(stop);
|
|||||||
}
|
}
|
||||||
|
|
||||||
.success-text {
|
.success-text {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
|
|||||||
@@ -115,10 +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 var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip-body {
|
.chip-body {
|
||||||
@@ -130,7 +131,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.chip-label {
|
.chip-label {
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -143,14 +144,14 @@ onUnmounted(() => {
|
|||||||
.chip-amount {
|
.chip-amount {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chevron {
|
.chevron {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@@ -166,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 var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: 8px;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cash-panel::before {
|
.cash-panel::before {
|
||||||
@@ -183,21 +184,22 @@ onUnmounted(() => {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-row.muted {
|
.panel-row.muted {
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-row.highlight {
|
.panel-row.highlight {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-divider {
|
.panel-divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: linear-gradient(90deg, transparent, var(--border-gold-soft), transparent);
|
background: #E5E7EB;
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -206,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 var(--primary, #c8a84e);
|
border: 1px solid #003D6B;
|
||||||
background: rgba(200, 168, 78, 0.12);
|
background: transparent;
|
||||||
color: var(--primary-light, #c8a84e);
|
color: #003D6B;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -216,7 +218,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.panel-recharge-btn:active {
|
.panel-recharge-btn:active {
|
||||||
background: rgba(200, 168, 78, 0.24);
|
background: rgba(0, 61, 107, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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.72);
|
background: rgba(0, 0, 0, 0.35);
|
||||||
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: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border-gold-soft, rgba(200, 168, 78, 0.25));
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 var(--border, #2a2a2a);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
background: rgba(26, 26, 26, 0.98);
|
background: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-title {
|
.cs-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light, #c8a84e);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
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: #aaa;
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-body {
|
.cs-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
background: #0d0d0d;
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-frame {
|
.cs-frame {
|
||||||
@@ -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: #888;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ const wrapperStyle = computed(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<svg
|
<svg
|
||||||
:class="['gold-spinner', { 'is-active': active }]"
|
:class="['spinner', { 'is-active': active }]"
|
||||||
:width="size ?? 48"
|
:width="size ?? 48"
|
||||||
:height="size ?? 48"
|
:height="size ?? 48"
|
||||||
viewBox="0 0 48 48"
|
viewBox="0 0 48 48"
|
||||||
@@ -28,44 +28,44 @@ const wrapperStyle = computed(() => {
|
|||||||
:style="!active ? wrapperStyle : undefined"
|
:style="!active ? wrapperStyle : undefined"
|
||||||
>
|
>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="gs-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="#D4AF37" stop-opacity="0.18" />
|
<stop offset="0%" stop-color="#003D6B" stop-opacity="0.15" />
|
||||||
<stop offset="50%" stop-color="#F0D875" stop-opacity="0.25" />
|
<stop offset="50%" stop-color="#005B9F" stop-opacity="0.22" />
|
||||||
<stop offset="100%" stop-color="#D4AF37" stop-opacity="0.18" />
|
<stop offset="100%" stop-color="#003D6B" stop-opacity="0.15" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="gs-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="#FFF4C8" />
|
<stop offset="0%" stop-color="#E8F4FD" />
|
||||||
<stop offset="22%" stop-color="#F0D875" />
|
<stop offset="22%" stop-color="#7CB9E8" />
|
||||||
<stop offset="50%" stop-color="#D4AF37" />
|
<stop offset="50%" stop-color="#005B9F" />
|
||||||
<stop offset="78%" stop-color="#B8942B" />
|
<stop offset="78%" stop-color="#003D6B" />
|
||||||
<stop offset="100%" stop-color="#8B6914" />
|
<stop offset="100%" stop-color="#002847" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<filter id="gs-glow">
|
<filter id="sp-glow">
|
||||||
<feGaussianBlur stdDeviation="1.2" result="blur" />
|
<feGaussianBlur stdDeviation="1.2" result="blur" />
|
||||||
<feMerge>
|
<feMerge>
|
||||||
<feMergeNode in="blur" />
|
<feMergeNode in="blur" />
|
||||||
<feMergeNode in="SourceGraphic" />
|
<feMergeNode in="SourceGraphic" />
|
||||||
</feMerge>
|
</feMerge>
|
||||||
</filter>
|
</filter>
|
||||||
<radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
|
<radialGradient id="sp-dot" cx="50%" cy="50%" r="50%">
|
||||||
<stop offset="0%" stop-color="#FFF4C8" />
|
<stop offset="0%" stop-color="#E8F4FD" />
|
||||||
<stop offset="60%" stop-color="#F0D875" />
|
<stop offset="60%" stop-color="#7CB9E8" />
|
||||||
<stop offset="100%" stop-color="#D4AF37" />
|
<stop offset="100%" stop-color="#005B9F" />
|
||||||
</radialGradient>
|
</radialGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
|
<circle cx="24" cy="24" r="20" stroke="url(#sp-track)" stroke-width="3" fill="none" />
|
||||||
<circle
|
<circle
|
||||||
cx="24"
|
cx="24"
|
||||||
cy="24"
|
cy="24"
|
||||||
r="20"
|
r="20"
|
||||||
stroke="url(#gs-arc)"
|
stroke="url(#sp-arc)"
|
||||||
stroke-width="3"
|
stroke-width="3"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-dasharray="31.4 94.2"
|
stroke-dasharray="31.4 94.2"
|
||||||
filter="url(#gs-glow)"
|
filter="url(#sp-glow)"
|
||||||
/>
|
/>
|
||||||
<circle cx="24" cy="4" r="2.5" fill="url(#gs-dot)" filter="url(#gs-glow)">
|
<circle cx="24" cy="4" r="2.5" fill="url(#sp-dot)" filter="url(#sp-glow)">
|
||||||
<animate
|
<animate
|
||||||
v-if="active"
|
v-if="active"
|
||||||
attributeName="r"
|
attributeName="r"
|
||||||
@@ -74,29 +74,27 @@ const wrapperStyle = computed(() => {
|
|||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
</circle>
|
</circle>
|
||||||
<circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#F0D875" opacity="0.6">
|
<circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#7CB9E8" 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="#D4AF37" opacity="0.4">
|
<circle v-if="active" cx="34" cy="34" r="1.5" fill="#005B9F" 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="#D4AF37" opacity="0.4">
|
<circle v-if="active" cx="14" cy="34" r="1.5" fill="#005B9F" 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>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.gold-spinner {
|
.spinner {
|
||||||
display: block;
|
display: block;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
.spinner.is-active {
|
||||||
.gold-spinner.is-active {
|
animation: sp-spin 0.8s linear infinite;
|
||||||
animation: gs-spin 0.8s linear infinite;
|
|
||||||
}
|
}
|
||||||
|
@keyframes sp-spin {
|
||||||
@keyframes gs-spin {
|
|
||||||
to { transform: rotate(360deg); }
|
to { transform: rotate(360deg); }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -86,11 +86,12 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
|||||||
.league-block {
|
.league-block {
|
||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 10px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #CBD5E1;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
background: var(--bg-card);
|
background: #FFFFFF;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.league-row {
|
.league-row {
|
||||||
@@ -112,8 +113,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
|||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: v-bind(matchCardBg) center / 100% 100% no-repeat;
|
background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 60%);
|
||||||
opacity: 0.25;
|
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@@ -127,17 +127,17 @@ 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: #141414;
|
background: #003D6B;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-mark {
|
.toggle-mark {
|
||||||
color: var(--primary-light);
|
color: #FFFFFF;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 900;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
}
|
}
|
||||||
@@ -152,8 +152,8 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
|
|||||||
|
|
||||||
.league-title {
|
.league-title {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
color: #fff;
|
color: #1A1A2E;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
@@ -163,16 +163,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: #ccc;
|
color: #6B7280;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-live {
|
.stat-live {
|
||||||
color: #3db865;
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-open {
|
.stat-open {
|
||||||
color: #c8a84e;
|
color: #D97706;
|
||||||
}
|
}
|
||||||
|
|
||||||
.league-saishi {
|
.league-saishi {
|
||||||
@@ -183,11 +183,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 #2a2a2a;
|
border-left: 1px solid #CBD5E1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-panel {
|
.match-panel {
|
||||||
padding: 10px 0 4px;
|
padding: 8px 0 4px;
|
||||||
|
background: #F0F2F6;
|
||||||
|
border-top: 1px solid #D1D5DB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-grid {
|
.match-grid {
|
||||||
|
|||||||
@@ -27,6 +27,6 @@ const src = computed(() => `/flags/${countryCode.value}.svg`);
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -79,16 +79,17 @@ onUnmounted(() => {
|
|||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #0d0d0d;
|
background: #FFFFFF;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.locale-switch.compact .locale-trigger {
|
.locale-switch.compact .locale-trigger {
|
||||||
@@ -105,10 +106,10 @@ onUnmounted(() => {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.locale-option {
|
.locale-option {
|
||||||
@@ -117,7 +118,7 @@ onUnmounted(() => {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -126,7 +127,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.locale-option:hover,
|
.locale-option:hover,
|
||||||
.locale-option.active {
|
.locale-option.active {
|
||||||
background: rgba(212, 175, 55, 0.1);
|
background: rgba(0, 61, 107, 0.06);
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
</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.7);
|
background: rgba(0, 0, 0, 0.35);
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
-webkit-backdrop-filter: blur(4px);
|
-webkit-backdrop-filter: blur(4px);
|
||||||
}
|
}
|
||||||
@@ -64,10 +64,11 @@ function continueBrowsing() {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 360px;
|
max-width: 360px;
|
||||||
background: #1a1a1a;
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border-gold-soft, rgba(200, 168, 78, 0.25));
|
border: 1px solid #E5E7EB;
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
@@ -76,7 +77,7 @@ function continueBrowsing() {
|
|||||||
right: 14px;
|
right: 14px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
@@ -84,20 +85,20 @@ function continueBrowsing() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.close-btn:hover {
|
.close-btn:hover {
|
||||||
color: #aaa;
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light, #c8a84e);
|
color: #003D6B;
|
||||||
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: #888;
|
color: #6B7280;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 0 24px;
|
margin: 0 0 24px;
|
||||||
}
|
}
|
||||||
@@ -112,8 +113,8 @@ function continueBrowsing() {
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: none;
|
border: none;
|
||||||
background: linear-gradient(135deg, #d4a017, #e8c84a);
|
background: #003D6B;
|
||||||
color: #1a1a1a;
|
color: #FFFFFF;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -128,9 +129,9 @@ function continueBrowsing() {
|
|||||||
.login-secondary {
|
.login-secondary {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #333;
|
border: 1px solid #E5E7EB;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -139,8 +140,8 @@ function continueBrowsing() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-secondary:active {
|
.login-secondary:active {
|
||||||
color: #aaa;
|
color: #1A1A2E;
|
||||||
border-color: #444;
|
border-color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
|
|||||||
@@ -130,30 +130,32 @@ const liveScoreText = computed(() => {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.match-card {
|
.match-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
|
background: #FFFFFF;
|
||||||
border: 1px solid rgba(140, 140, 140, 0.35);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
padding: 10px 8px 10px;
|
padding: 8px 6px 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 6px;
|
||||||
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);
|
||||||
|
transition: transform 0.15s, box-shadow 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-card::before {
|
.match-card::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
|
background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 50%, rgba(0, 91, 159, 0.02) 100%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-card--phase {
|
.match-card--phase {
|
||||||
/* inherits base dark style */
|
opacity: 0.95;
|
||||||
}
|
}
|
||||||
|
|
||||||
.teams-row {
|
.teams-row {
|
||||||
@@ -170,9 +172,9 @@ const liveScoreText = computed(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 4px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
transform: translateY(8px);
|
transform: translateY(6px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-name {
|
.team-name {
|
||||||
@@ -180,32 +182,31 @@ const liveScoreText = computed(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 17px;
|
font-size: 14px;
|
||||||
font-weight: 900;
|
font-weight: 700;
|
||||||
color: #fff;
|
color: #1A1A2E;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
|
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0 6px;
|
padding: 0 4px;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-card--phase .team-name {
|
.match-card--phase .team-name {
|
||||||
color: #d8d8d8;
|
color: #4B5563;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-flag {
|
.team-flag {
|
||||||
width: 72px;
|
width: 56px;
|
||||||
height: 48px;
|
height: 38px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-flag.flag-logo {
|
.team-flag.flag-logo {
|
||||||
width: 48px;
|
width: 38px;
|
||||||
height: 48px;
|
height: 38px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -215,37 +216,33 @@ const liveScoreText = computed(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 4px;
|
gap: 3px;
|
||||||
min-width: 56px;
|
min-width: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kickoff {
|
.kickoff {
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: #fff;
|
color: #1A1A2E;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 96px;
|
max-width: 80px;
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.live-score {
|
.live-score {
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #fff;
|
color: #003D6B;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: 0.04em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vs {
|
.vs {
|
||||||
font-size: 22px;
|
font-size: 18px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #fff;
|
color: #003D6B;
|
||||||
letter-spacing: 0.08em;
|
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag {
|
.status-tag {
|
||||||
@@ -254,49 +251,48 @@ const liveScoreText = computed(() => {
|
|||||||
right: 0;
|
right: 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
padding: 3px 10px;
|
padding: 2px 8px;
|
||||||
border-radius: 0 6px 0 8px;
|
border-radius: 0 6px 0 8px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--open {
|
.status-tag--open {
|
||||||
background: linear-gradient(135deg, #e8c84a, #d4a017);
|
background: #FEF3C7;
|
||||||
color: #1a1a1a;
|
color: #92400E;
|
||||||
box-shadow: 0 2px 6px rgba(212, 160, 23, 0.4);
|
border-bottom: 1px solid #FDE68A;
|
||||||
|
border-left: 1px solid #FDE68A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--settled {
|
.status-tag--settled {
|
||||||
background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
|
background: #E8EDF2;
|
||||||
color: #8a9ab8;
|
color: #4B5563;
|
||||||
border-bottom: 1px solid rgba(120, 140, 180, 0.3);
|
border-bottom: 1px solid #D1D5DB;
|
||||||
border-left: 1px solid rgba(120, 140, 180, 0.3);
|
border-left: 1px solid #D1D5DB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--pending {
|
.status-tag--pending {
|
||||||
background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
|
background: #FEF3C7;
|
||||||
color: #c8a84e;
|
color: #D97706;
|
||||||
border-bottom: 1px solid rgba(200, 168, 78, 0.3);
|
border-bottom: 1px solid #FDE68A;
|
||||||
border-left: 1px solid rgba(200, 168, 78, 0.3);
|
border-left: 1px solid #FDE68A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-btn {
|
.bet-btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
width: auto;
|
width: auto;
|
||||||
min-width: 80px;
|
min-width: 72px;
|
||||||
padding: 5px 24px;
|
padding: 4px 20px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
letter-spacing: 0.04em;
|
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-btn--view {
|
.bet-btn--view {
|
||||||
background: #1a1a1a;
|
background: #F5F7FA;
|
||||||
border: 1px solid #444;
|
border: 1px solid #E5E7EB;
|
||||||
color: #aaa;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -129,19 +129,20 @@ onUnmounted(() => {
|
|||||||
gap: 3px;
|
gap: 3px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #0d0d0d;
|
background: #FFFFFF;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-trigger:active {
|
.country-trigger:active {
|
||||||
background: var(--bg-hover);
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-iso {
|
.country-iso {
|
||||||
@@ -150,12 +151,12 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.country-sep {
|
.country-sep {
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-dial {
|
.country-dial {
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -166,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: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-search {
|
.country-search {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #0d0d0d;
|
background: #F5F7FA;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-search::placeholder {
|
.country-search::placeholder {
|
||||||
color: rgba(255, 255, 255, 0.35);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-search:focus {
|
.country-search:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #555;
|
border-color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-menu {
|
.country-menu {
|
||||||
@@ -213,20 +214,20 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.country-option:hover,
|
.country-option:hover,
|
||||||
.country-option.active {
|
.country-option.active {
|
||||||
background: var(--bg-hover);
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: var(--text);
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-option .country-dial {
|
.country-option .country-dial {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 38px;
|
width: 38px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-name {
|
.country-name {
|
||||||
@@ -234,17 +235,17 @@ onUnmounted(() => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-option:hover .country-name,
|
.country-option:hover .country-name,
|
||||||
.country-option.active .country-name {
|
.country-option.active .country-name {
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-empty {
|
.country-empty {
|
||||||
padding: 10px 8px;
|
padding: 10px 8px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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.72);
|
background: rgba(0, 0, 0, 0.35);
|
||||||
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: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 12px;
|
||||||
padding: 16px 14px 14px;
|
padding: 16px 14px 14px;
|
||||||
box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: #F5F7FA;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
@@ -114,12 +114,14 @@ function confirm() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-cancel {
|
.btn-cancel {
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
background: #0a0a0a;
|
background: #FFFFFF;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-confirm {
|
.btn-confirm {
|
||||||
border: none;
|
border: none;
|
||||||
|
background: #003D6B;
|
||||||
|
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: var(--text-muted);
|
color: #6B7280;
|
||||||
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 var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
background: #0a0a0a;
|
background: #F5F7FA;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-search:focus {
|
.picker-search:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
background: #0a0a0a;
|
background: #FFFFFF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-item.active {
|
.picker-item.active {
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18);
|
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.18);
|
||||||
background: rgba(212, 175, 55, 0.08);
|
background: rgba(0, 61, 107, 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 rgba(255, 255, 255, 0.08);
|
border: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-name {
|
.picker-name {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
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 var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
background: #0d0d0d;
|
background: #FFFFFF;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-row:focus-within {
|
.captcha-row:focus-within {
|
||||||
border-color: #555;
|
border-color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: var(--text);
|
color: #1A1A2E;
|
||||||
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: rgba(255, 255, 255, 0.32);
|
color: #6B7280;
|
||||||
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 var(--border);
|
border-left: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-error {
|
.captcha-error {
|
||||||
color: var(--danger);
|
color: #DC2626;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 4px 0 0;
|
margin: 4px 0 0;
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ withDefaults(
|
|||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
opacity: 0.2;
|
opacity: 0.15;
|
||||||
max-width: 92%;
|
max-width: 92%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -43,26 +43,26 @@ withDefaults(
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.won {
|
.status-watermark.won {
|
||||||
color: #3db865;
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.lost {
|
.status-watermark.lost {
|
||||||
color: #e05050;
|
color: #DC2626;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.push {
|
.status-watermark.push {
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.pending {
|
.status-watermark.pending {
|
||||||
color: #e8c84a;
|
color: #F8971F;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.closed {
|
.status-watermark.closed {
|
||||||
color: #c9a84a;
|
color: #005B9F;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-watermark.settled {
|
.status-watermark.settled {
|
||||||
color: #7a9ab8;
|
color: #0066CC;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ watch(
|
|||||||
/* 队徽（非国旗）：圆角 + 投影 */
|
/* 队徽（非国旗）：圆角 + 投影 */
|
||||||
.team-emblem--logo {
|
.team-emblem--logo {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-emblem--sm {
|
.team-emblem--sm {
|
||||||
|
|||||||
@@ -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: 1px solid var(--border-gold-soft);
|
border: 2px solid #003D6B;
|
||||||
background: linear-gradient(145deg, #2a2210, #141008);
|
background: linear-gradient(145deg, #003D6B, #005B9F);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -106,7 +106,7 @@ function logout() {
|
|||||||
.avatar-letter {
|
.avatar-letter {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-menu {
|
.avatar-menu {
|
||||||
@@ -115,10 +115,10 @@ function logout() {
|
|||||||
right: 0;
|
right: 0;
|
||||||
min-width: 168px;
|
min-width: 168px;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: 8px;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
z-index: 140;
|
z-index: 140;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -126,8 +126,8 @@ function logout() {
|
|||||||
padding: 8px 14px 10px;
|
padding: 8px 14px 10px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -136,22 +136,22 @@ function logout() {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
background: none;
|
background: none;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item:hover {
|
.menu-item:hover {
|
||||||
background: rgba(255, 255, 255, 0.04);
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item.recharge {
|
.menu-item.recharge {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item.danger {
|
.menu-item.danger {
|
||||||
color: var(--danger);
|
color: #DC2626;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop {
|
.backdrop {
|
||||||
|
|||||||
@@ -76,11 +76,12 @@ const stats = computed(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.wallet-stats-panel {
|
.wallet-stats-panel {
|
||||||
background: var(--bg-card);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-row {
|
.stats-row {
|
||||||
@@ -99,7 +100,7 @@ const stats = computed(() => {
|
|||||||
display: block;
|
display: block;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
@@ -112,15 +113,16 @@ const stats = computed(() => {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-val.income { color: #3db865; }
|
.stat-val.income { color: #059669; }
|
||||||
.stat-val.expense { color: #e05050; }
|
.stat-val.expense { color: #DC2626; }
|
||||||
.stat-val.cashback { color: #f0b90b; }
|
.stat-val.cashback { color: #F8971F; }
|
||||||
|
|
||||||
.stats-divider {
|
.stats-divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: 6px 8px;
|
margin: 6px 8px;
|
||||||
background: linear-gradient(90deg, transparent, var(--border), transparent);
|
background: #E5E7EB;
|
||||||
}
|
}
|
||||||
</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.75);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
z-index: 210;
|
z-index: 210;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer {
|
.drawer {
|
||||||
background: linear-gradient(180deg, #222 0%, #141414 100%);
|
background: #FFFFFF;
|
||||||
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 var(--border);
|
border-top: 1px solid #E5E7EB;
|
||||||
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: rgba(14, 14, 14, 0.98);
|
background: #F5F7FA;
|
||||||
border-top: 1px solid var(--border-gold-soft);
|
border-top: 1px solid #E5E7EB;
|
||||||
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-header {
|
.drawer-header {
|
||||||
@@ -134,48 +134,50 @@ 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: rgba(14, 14, 14, 0.98);
|
background: #FFFFFF;
|
||||||
border-bottom: 1px solid #2a2a2a;
|
border-bottom: 1px solid #E5E7EB;
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.count {
|
.count {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
background: none;
|
background: none;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slip-item {
|
.slip-item {
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
background: #111;
|
background: #F5F7FA;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-name {
|
.item-name {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-sel {
|
.item-sel {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds {
|
.odds {
|
||||||
color: var(--primary-light);
|
color: #F8971F;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -188,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: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-row strong {
|
.summary-row strong {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.return {
|
.return {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.return strong {
|
.return strong {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -75,6 +75,8 @@ function formatOdds(odds: string) {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.cs-panel {
|
.cs-panel {
|
||||||
padding: 6px 8px 0;
|
padding: 6px 8px 0;
|
||||||
|
background: #EDF0F4;
|
||||||
|
border-top: 1px solid #D1D5DB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-panel--locked {
|
.cs-panel--locked {
|
||||||
@@ -93,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: var(--text-muted);
|
color: #4B5563;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cols-grid {
|
.cols-grid {
|
||||||
@@ -116,36 +118,38 @@ function formatOdds(odds: string) {
|
|||||||
gap: 3px;
|
gap: 3px;
|
||||||
min-height: 42px;
|
min-height: 42px;
|
||||||
padding: 6px 3px;
|
padding: 6px 3px;
|
||||||
background: #161616;
|
background: #FFFFFF;
|
||||||
border: 1px solid #282828;
|
border: 1px solid #CBD5E1;
|
||||||
border-radius: 3px;
|
border-radius: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-card.selected {
|
.score-card.selected {
|
||||||
border-color: var(--primary);
|
border-color: #003D6B;
|
||||||
background: rgba(212, 175, 55, 0.1);
|
border-width: 2px;
|
||||||
|
background: rgba(0, 61, 107, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-card--locked {
|
.score-card--locked {
|
||||||
background: #111;
|
background: #E8EDF2;
|
||||||
border-color: #333;
|
border-color: #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-card--locked .score-line,
|
.score-card--locked .score-line,
|
||||||
.score-card--locked .odds {
|
.score-card--locked .odds {
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-line {
|
.score-line {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds {
|
.odds {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--primary-light);
|
color: #E8870A;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -57,7 +57,8 @@ function onPick(id: string) {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.wrap {
|
.wrap {
|
||||||
padding: 6px 8px 8px;
|
padding: 6px 8px 8px;
|
||||||
background: #0c0c0c;
|
background: #EDF0F4;
|
||||||
|
border-top: 1px solid #D1D5DB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap.locked {
|
.wrap.locked {
|
||||||
@@ -78,37 +79,40 @@ function onPick(id: string) {
|
|||||||
gap: 2px;
|
gap: 2px;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
padding: 6px 4px;
|
padding: 6px 4px;
|
||||||
border-radius: 4px;
|
border-radius: 8px;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid #262626;
|
border: 1px solid #CBD5E1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-btn.selected {
|
.odds-btn.selected {
|
||||||
border-color: var(--primary);
|
border-color: #003D6B;
|
||||||
background: rgba(212, 175, 55, 0.1);
|
border-width: 2px;
|
||||||
|
background: rgba(0, 61, 107, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-btn--locked {
|
.odds-btn--locked {
|
||||||
background: #111;
|
background: #E8EDF2;
|
||||||
border-color: #333;
|
border-color: #E5E7EB;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-btn--locked .label,
|
.odds-btn--locked .label,
|
||||||
.odds-btn--locked .odds {
|
.odds-btn--locked .odds {
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-size: 9px;
|
font-size: 10px;
|
||||||
color: var(--text-muted);
|
color: #4B5563;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds {
|
.odds {
|
||||||
font-size: 14px;
|
font-size: 15px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #E8870A;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -44,11 +44,11 @@ const { t } = useI18n();
|
|||||||
}
|
}
|
||||||
|
|
||||||
.row:not(.disabled):active {
|
.row:not(.disabled):active {
|
||||||
background: rgba(255, 255, 255, 0.025);
|
background: rgba(0, 61, 107, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.expanded {
|
.row.expanded {
|
||||||
background: rgba(255, 255, 255, 0.03);
|
background: rgba(0, 61, 107, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.expanded::before {
|
.row.expanded::before {
|
||||||
@@ -57,9 +57,9 @@ const { t } = useI18n();
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 12px;
|
left: 12px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
height: 2px;
|
height: 2.5px;
|
||||||
background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--primary-light) 50%, var(--primary) 70%, transparent 100%);
|
background: #003D6B;
|
||||||
opacity: 0.6;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.disabled {
|
.row.disabled {
|
||||||
@@ -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: var(--text);
|
color: #1A1A2E;
|
||||||
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: #ffb800;
|
color: #F8971F;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: rgba(255, 184, 0, 0.12);
|
background: rgba(248, 151, 31, 0.1);
|
||||||
border: 1px solid rgba(255, 184, 0, 0.35);
|
border: 1px solid rgba(248, 151, 31, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.expanded .row-label {
|
.row.expanded .row-label {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-muted {
|
.row-muted {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-chevron {
|
.row-chevron {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
</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.72);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
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: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
padding: 18px 16px 16px;
|
padding: 18px 16px 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: rgba(255, 255, 255, 0.06);
|
background: #F5F7FA;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
@@ -280,22 +280,22 @@ function formatOdds(odds: string) {
|
|||||||
height: 32px;
|
height: 32px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.team {
|
.team {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: var(--primary-light);
|
color: #1A1A2E;
|
||||||
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: rgba(198, 40, 40, 0.85);
|
background: #F8971F;
|
||||||
border: 1px solid rgba(255, 120, 120, 0.35);
|
border: 1px solid rgba(248, 151, 31, 0.3);
|
||||||
color: #fff;
|
color: #FFFFFF;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@@ -303,7 +303,7 @@ function formatOdds(odds: string) {
|
|||||||
|
|
||||||
.event-title {
|
.event-title {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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: rgba(0, 0, 0, 0.35);
|
background: #F5F7FA;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance-label {
|
.balance-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance-value {
|
.balance-value {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stake-label {
|
.stake-label {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
@@ -345,10 +345,10 @@ function formatOdds(odds: string) {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 11px 12px;
|
padding: 11px 12px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
background: #0a0a0a;
|
background: #F5F7FA;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
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: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15);
|
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stake-input::placeholder {
|
.stake-input::placeholder {
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
@@ -375,33 +375,34 @@ function formatOdds(odds: string) {
|
|||||||
.chip {
|
.chip {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 6px 4px;
|
padding: 6px 4px;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip:active {
|
.chip:active {
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
background: rgba(212, 175, 55, 0.08);
|
background: rgba(0, 61, 107, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.est-return {
|
.est-return {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.est-value {
|
.est-value {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
color: var(--danger);
|
color: #DC2626;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@@ -415,19 +416,22 @@ function formatOdds(odds: string) {
|
|||||||
|
|
||||||
.btn-cancel {
|
.btn-cancel {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
background: #1a1a1a;
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-confirm {
|
.btn-confirm {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
background: #003D6B;
|
||||||
|
color: #FFFFFF;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-confirm:disabled {
|
.btn-confirm:disabled {
|
||||||
@@ -439,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 rgba(46, 158, 94, 0.8);
|
border: 2px solid #059669;
|
||||||
background: rgba(46, 158, 94, 0.12);
|
background: rgba(5, 150, 105, 0.1);
|
||||||
color: #4ade80;
|
color: #059669;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
@@ -450,37 +454,40 @@ function formatOdds(odds: string) {
|
|||||||
.success-title {
|
.success-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #1A1A2E;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary {
|
.summary {
|
||||||
margin: 12px 0 14px;
|
margin: 12px 0 14px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: #F5F7FA;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-row {
|
.summary-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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 var(--border);
|
border-top: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-done {
|
.btn-done {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 11px;
|
padding: 11px;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
background: #003D6B;
|
||||||
|
color: #FFFFFF;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -86,10 +86,11 @@ const headMeta = computed(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
background: var(--bg-card);
|
background: #FFFFFF;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-head {
|
.event-head {
|
||||||
@@ -112,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.25;
|
opacity: 0.08;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@@ -122,8 +123,8 @@ const headMeta = computed(() => {
|
|||||||
width: 26px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #141414;
|
background: #F5F7FA;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: 1px solid #E5E7EB;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -131,11 +132,11 @@ const headMeta = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.toggle-icon.open {
|
.toggle-icon.open {
|
||||||
border-color: var(--primary-light);
|
border-color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-mark {
|
.toggle-mark {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -152,21 +153,21 @@ const headMeta = computed(() => {
|
|||||||
.event-title {
|
.event-title {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
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: #888;
|
color: #6B7280;
|
||||||
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: #666;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-saishi {
|
.event-saishi {
|
||||||
@@ -176,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 #2a2a2a;
|
border-left: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-scroll {
|
.options-scroll {
|
||||||
@@ -185,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: #333 transparent;
|
scrollbar-color: #E5E7EB transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-grid {
|
.options-grid {
|
||||||
|
|||||||
@@ -76,27 +76,21 @@ onUnmounted(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 8px 4px 6px;
|
padding: 8px 4px 6px;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
|
background: #FFFFFF;
|
||||||
border: 1px solid rgba(140, 140, 140, 0.35);
|
border: 1px solid #E5E7EB;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||||
|
|
||||||
.option-card::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-card:active {
|
.option-card:active {
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
|
box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flag {
|
.flag {
|
||||||
@@ -119,7 +113,7 @@ onUnmounted(() => {
|
|||||||
.name {
|
.name {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #1A1A2E;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -130,6 +124,6 @@ onUnmounted(() => {
|
|||||||
.odds {
|
.odds {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #F8971F;
|
||||||
}
|
}
|
||||||
</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: var(--text-muted);
|
color: #6B7280;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
padding: 48px 20px;
|
padding: 48px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -106,7 +106,11 @@ watch(
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout">
|
<div class="layout">
|
||||||
<header v-if="showHeader" class="header">
|
<header v-if="showHeader" class="header">
|
||||||
<img src="/logo.png" alt="TheBet365" class="logo" />
|
<svg class="logo" viewBox="0 0 130 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="TheBet365">
|
||||||
|
<text x="0" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="11" font-weight="800" fill="#6B7280" letter-spacing="0.14em">THE</text>
|
||||||
|
<text x="32" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#003D6B" letter-spacing="0.01em">BET</text>
|
||||||
|
<text x="74" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#F8971F" letter-spacing="0.01em">365</text>
|
||||||
|
</svg>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -126,8 +130,8 @@ watch(
|
|||||||
<circle cx="12" cy="11" r="1" fill="currentColor" />
|
<circle cx="12" cy="11" r="1" fill="currentColor" />
|
||||||
<circle cx="15" cy="11" r="1" fill="currentColor" />
|
<circle cx="15" cy="11" r="1" fill="currentColor" />
|
||||||
</svg>
|
</svg>
|
||||||
<span class="support-label">{{ t('support.short') }}</span>
|
|
||||||
</button>
|
</button>
|
||||||
|
<div class="header-divider" />
|
||||||
<LocaleSwitcher />
|
<LocaleSwitcher />
|
||||||
<template v-if="auth.user">
|
<template v-if="auth.user">
|
||||||
<CashBalanceChip />
|
<CashBalanceChip />
|
||||||
@@ -193,22 +197,27 @@ watch(
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100dvh;
|
min-height: 100dvh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: transparent;
|
background: var(--bg-body);
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex; justify-content: space-between; align-items: center;
|
display: flex;
|
||||||
padding: 8px 12px;
|
justify-content: space-between;
|
||||||
background: rgba(17, 17, 17, 0.94);
|
align-items: center;
|
||||||
|
padding: 0 12px;
|
||||||
|
height: 48px;
|
||||||
|
background: #FFFFFF;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
z-index: 110;
|
z-index: 110;
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
height: 36px; width: auto; display: block;
|
height: 22px;
|
||||||
filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.2));
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.header-actions {
|
.header-actions {
|
||||||
--header-chip-h: 36px;
|
--header-chip-h: 32px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -224,59 +233,66 @@ watch(
|
|||||||
width: var(--header-chip-h);
|
width: var(--header-chip-h);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-divider {
|
||||||
|
width: 1px;
|
||||||
|
height: 18px;
|
||||||
|
background: #E5E7EB;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.support-btn {
|
.support-btn {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
justify-content: center;
|
||||||
height: var(--header-chip-h, 36px);
|
gap: 0;
|
||||||
padding: 0 10px;
|
width: var(--header-chip-h, 32px);
|
||||||
border-radius: 6px;
|
height: var(--header-chip-h, 32px);
|
||||||
border: 1px solid var(--border-gold-soft, rgba(200, 168, 78, 0.25));
|
padding: 0;
|
||||||
background: rgba(200, 168, 78, 0.08);
|
border-radius: 50%;
|
||||||
color: var(--primary-light, #c8a84e);
|
border: 1px solid var(--border);
|
||||||
|
background: #F5F7FA;
|
||||||
|
color: var(--primary);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.2s;
|
transition: background 0.15s, border-color 0.15s;
|
||||||
flex-shrink: 1;
|
flex-shrink: 0;
|
||||||
min-width: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.support-btn:active {
|
.support-btn:active {
|
||||||
background: rgba(200, 168, 78, 0.16);
|
background: var(--bg-hover);
|
||||||
|
border-color: var(--border-active);
|
||||||
}
|
}
|
||||||
|
|
||||||
.support-icon {
|
.support-icon {
|
||||||
width: 18px;
|
width: 16px;
|
||||||
height: 18px;
|
height: 16px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.support-label {
|
.support-label {
|
||||||
max-width: 48px;
|
display: none;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-btn {
|
.login-btn {
|
||||||
padding: 6px 16px;
|
padding: 6px 18px;
|
||||||
border-radius: 6px;
|
border-radius: var(--radius-sm);
|
||||||
border: 1px solid var(--primary, #c8a84e);
|
border: 1px solid var(--primary);
|
||||||
background: transparent;
|
background: var(--primary);
|
||||||
color: var(--primary-light, #c8a84e);
|
color: #FFFFFF;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
.login-btn:active {
|
||||||
|
background: var(--primary-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-btn:active {
|
|
||||||
background: rgba(200, 168, 78, 0.15);
|
|
||||||
}
|
|
||||||
.announce-strip {
|
.announce-strip {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
z-index: 105;
|
z-index: 105;
|
||||||
|
background: #FFFFFF;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -286,17 +302,16 @@ watch(
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
padding: 12px 16px 0;
|
padding: 10px 14px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main.has-nav {
|
.main.has-nav {
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-nav {
|
.bottom-nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: rgba(17, 17, 17, 0.96);
|
background: #FFFFFF;
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
|
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||||
}
|
}
|
||||||
@@ -307,15 +322,16 @@ watch(
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 3px;
|
gap: 3px;
|
||||||
padding: 6px 2px 8px;
|
padding: 7px 2px 8px;
|
||||||
font-size: 9px;
|
font-size: 10px;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.01em;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-label {
|
.nav-label {
|
||||||
@@ -327,22 +343,23 @@ watch(
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active {
|
.nav-item.active {
|
||||||
color: var(--primary-light);
|
color: var(--primary);
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active :deep(.nav-icon) {
|
.nav-item.active :deep(.nav-icon) {
|
||||||
filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.35));
|
color: var(--primary);
|
||||||
|
filter: drop-shadow(0 1px 2px rgba(0, 61, 107, 0.2));
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active::after {
|
.nav-item.active::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 22%;
|
left: 18%;
|
||||||
right: 22%;
|
right: 18%;
|
||||||
height: 2px;
|
height: 2.5px;
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
border-radius: 0 0 4px 4px;
|
border-radius: 0 0 3px 3px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,236 +1,72 @@
|
|||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--primary: #D4AF37;
|
/* Pinnacle-inspired: Navy blue + clean white theme */
|
||||||
--primary-dark: #A8841F;
|
--primary: #003D6B;
|
||||||
--primary-light: #F0D875;
|
--primary-dark: #002847;
|
||||||
--secondary: #1A1A1A;
|
--primary-light: #005B9F;
|
||||||
--tertiary: #000000;
|
--secondary: #E8EDF2;
|
||||||
--neutral: #8E8E93;
|
--tertiary: #F5F7FA;
|
||||||
--bg-body: #000000;
|
--neutral: #6B7280;
|
||||||
--bg-card: rgba(20, 20, 20, 0.65);
|
--bg-body: #F5F7FA;
|
||||||
--bg-hover: rgba(34, 34, 34, 0.65);
|
--bg-card: #FFFFFF;
|
||||||
--bg-elevated: rgba(42, 42, 42, 0.65);
|
--bg-hover: #F0F4F8;
|
||||||
--text: #FFFFFF;
|
--bg-elevated: #FFFFFF;
|
||||||
--text-muted: #8E8E93;
|
--text: #1A1A2E;
|
||||||
--border: #333333;
|
--text-muted: #6B7280;
|
||||||
--border-gold: #D4AF37;
|
--border: #E5E7EB;
|
||||||
--border-gold-soft: rgba(212, 175, 55, 0.28);
|
--border-active: #0066CC;
|
||||||
--border-w: 1px;
|
--border-w: 1px;
|
||||||
--border-w-thick: 1px;
|
--border-w-thick: 1px;
|
||||||
--danger: #FF453A;
|
--danger: #DC2626;
|
||||||
--radius: 12px;
|
--success: #059669;
|
||||||
--radius-sm: 8px;
|
--warning: #F8971F;
|
||||||
--shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
|
--radius: 8px;
|
||||||
--shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.12);
|
--radius-sm: 6px;
|
||||||
--glow-gold: 0 0 8px rgba(212, 175, 55, 0.2);
|
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||||
--gradient-gold: linear-gradient(
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
180deg,
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||||
#FFF4C8 0%,
|
|
||||||
#F0D875 18%,
|
|
||||||
#D4AF37 50%,
|
|
||||||
#B8942B 78%,
|
|
||||||
#8B6914 100%
|
|
||||||
);
|
|
||||||
--gradient-gold-border: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
#FFF8DC 0%,
|
|
||||||
#E8C96A 35%,
|
|
||||||
#A8841F 70%,
|
|
||||||
#5C4A12 100%
|
|
||||||
);
|
|
||||||
--gradient-card: linear-gradient(160deg, #1E1A12 0%, #141414 40%, #0A0A0A 100%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 金色描边按钮（避免大面积实心填充） */
|
/* Gold kept only for odds/betting accent as orange-amber */
|
||||||
.btn-gold-outline {
|
:root {
|
||||||
background: #141414;
|
--odds-accent: #F8971F;
|
||||||
border: 1px solid var(--border-gold-soft);
|
--odds-accent-light: #FBBF24;
|
||||||
color: var(--primary-light);
|
--odds-accent-soft: rgba(248, 151, 31, 0.1);
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
.btn-gold-outline:active:not(:disabled) {
|
|
||||||
background: rgba(212, 175, 55, 0.1);
|
|
||||||
border-color: var(--border-gold);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 选中态：浅底 + 金边，非整块金色 */
|
/* ── Global resets ── */
|
||||||
.tab-gold-active {
|
html, body, #app { height: 100%; }
|
||||||
background: rgba(212, 175, 55, 0.08) !important;
|
|
||||||
border-color: var(--border-gold) !important;
|
|
||||||
color: var(--primary-light) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 登录等关键区域：轻量金边（非厚重 PS 描边） */
|
|
||||||
.ps-gold-frame {
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid var(--border-gold-soft) !important;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
background: rgba(14, 14, 14, 0.92) !important;
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ps-gold-frame::before,
|
|
||||||
.ps-gold-frame::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ps-gold-input {
|
|
||||||
background: #0d0d0d !important;
|
|
||||||
border: 1px solid var(--border) !important;
|
|
||||||
box-shadow: none;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ps-gold-input::placeholder {
|
|
||||||
color: rgba(255, 255, 255, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ps-gold-input:focus {
|
|
||||||
border-color: var(--border-gold-soft) !important;
|
|
||||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 主按钮：斜面浮雕 + 渐变描边 + 外发光 */
|
|
||||||
.btn-primary {
|
|
||||||
position: relative;
|
|
||||||
isolation: isolate;
|
|
||||||
padding: 17px 24px;
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
background: transparent;
|
|
||||||
color: #3D2800;
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: 16px;
|
|
||||||
width: 100%;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-shadow:
|
|
||||||
0 1px 0 rgba(255, 252, 235, 0.95),
|
|
||||||
0 -1px 0 rgba(120, 85, 15, 0.35);
|
|
||||||
transition: transform 0.12s ease;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: -3px;
|
|
||||||
border-radius: calc(var(--radius-sm) + 3px);
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
#FFFCE8 0%,
|
|
||||||
#F7E08A 12%,
|
|
||||||
#D4AF37 35%,
|
|
||||||
#8B6914 55%,
|
|
||||||
#5C4A12 72%,
|
|
||||||
#E8C040 90%,
|
|
||||||
#FFF8DC 100%
|
|
||||||
);
|
|
||||||
z-index: -2;
|
|
||||||
box-shadow:
|
|
||||||
0 0 14px rgba(255, 210, 70, 0.55),
|
|
||||||
0 0 28px rgba(212, 175, 55, 0.28),
|
|
||||||
0 6px 14px rgba(0, 0, 0, 0.55);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 2px;
|
|
||||||
border-radius: calc(var(--radius-sm) - 1px);
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
#FFFBE8 0%,
|
|
||||||
#FFE566 6%,
|
|
||||||
#F0D050 22%,
|
|
||||||
#D4AF37 48%,
|
|
||||||
#B8860B 72%,
|
|
||||||
#8B6914 100%
|
|
||||||
);
|
|
||||||
z-index: -1;
|
|
||||||
box-shadow:
|
|
||||||
inset 0 2px 0 rgba(255, 255, 255, 0.95),
|
|
||||||
inset 0 4px 10px rgba(255, 240, 180, 0.45),
|
|
||||||
inset 0 -2px 0 rgba(90, 65, 12, 0.85),
|
|
||||||
inset 0 -6px 14px rgba(45, 32, 6, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:active:not(:disabled) {
|
|
||||||
transform: translateY(2px) scale(0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:active:not(:disabled)::after {
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
#E8C040 0%,
|
|
||||||
#C9962A 40%,
|
|
||||||
#8B6914 100%
|
|
||||||
);
|
|
||||||
box-shadow:
|
|
||||||
inset 0 4px 10px rgba(35, 24, 4, 0.65),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:active:not(:disabled)::before {
|
|
||||||
box-shadow:
|
|
||||||
0 0 10px rgba(255, 200, 50, 0.35),
|
|
||||||
0 2px 6px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
filter: saturate(0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
#app {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
/* 保留 bg 位图；用 scroll 替代 fixed，减轻移动端滚动重绘（后续可换 WebP/AVIF） */
|
background-color: var(--bg-body);
|
||||||
background-color: var(--tertiary);
|
|
||||||
background-image:
|
|
||||||
radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.14), transparent 55%),
|
|
||||||
linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.88)),
|
|
||||||
url('./assets/images/bg.webp');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
background-attachment: scroll;
|
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
a { color: inherit; text-decoration: none; }
|
a { color: inherit; text-decoration: none; }
|
||||||
|
button { cursor: pointer; border: none; font-family: inherit; }
|
||||||
|
|
||||||
button {
|
/* ── Input ── */
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
background: #0D0D0D;
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
padding: 14px 16px;
|
padding: 12px 14px;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
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:focus {
|
input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--border-gold-soft);
|
border-color: var(--border-active);
|
||||||
|
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:-webkit-autofill,
|
input:-webkit-autofill,
|
||||||
@@ -239,13 +75,84 @@ 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 #0a0a0a inset;
|
box-shadow: 0 0 0 1000px #F0F4F8 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) ── */
|
||||||
|
.btn-primary {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 48px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: var(--primary);
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 15px;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
width: 100%;
|
||||||
|
transition: background 0.15s, transform 0.1s;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 61, 107, 0.2);
|
||||||
|
}
|
||||||
|
.btn-primary:hover { background: var(--primary-light); }
|
||||||
|
.btn-primary:active:not(:disabled) {
|
||||||
|
background: var(--primary-dark);
|
||||||
|
transform: scale(0.985);
|
||||||
|
}
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Gold-outline (now blue outline) ── */
|
||||||
|
.btn-gold-outline {
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid var(--border-active);
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.btn-gold-outline:active:not(:disabled) {
|
||||||
|
background: rgba(0, 102, 204, 0.06);
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Active tab: light blue ── */
|
||||||
|
.tab-gold-active {
|
||||||
|
background: rgba(0, 102, 204, 0.06) !important;
|
||||||
|
border-color: var(--border-active) !important;
|
||||||
|
color: var(--primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Gold frame (now light blue frame) ── */
|
||||||
|
.ps-gold-frame {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: #FFFFFF !important;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.ps-gold-frame::before,
|
||||||
|
.ps-gold-frame::after { display: none; }
|
||||||
|
|
||||||
|
.ps-gold-input {
|
||||||
|
background: #F9FAFB !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
box-shadow: none;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.ps-gold-input::placeholder { color: rgba(0, 0, 0, 0.3); }
|
||||||
|
.ps-gold-input:focus {
|
||||||
|
border-color: var(--border-active) !important;
|
||||||
|
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Odds button ── */
|
||||||
.odds-btn {
|
.odds-btn {
|
||||||
background: #161616;
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
@@ -254,25 +161,14 @@ input:-webkit-autofill:active {
|
|||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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-gold-soft);
|
border: 1px solid var(--border-active);
|
||||||
background: rgba(212, 175, 55, 0.12);
|
background: rgba(0, 102, 204, 0.06);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-btn.selected::before,
|
.odds-btn.selected::before,
|
||||||
.odds-btn.selected::after {
|
.odds-btn.selected::after { display: none; }
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.odds-btn.selected .label,
|
|
||||||
.odds-btn.selected .value {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.odds-btn .label {
|
.odds-btn .label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@@ -281,15 +177,14 @@ input:-webkit-autofill:active {
|
|||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-btn .value {
|
.odds-btn .value {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: var(--primary);
|
||||||
text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
|
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Card ── */
|
||||||
.card {
|
.card {
|
||||||
background: var(--bg-card);
|
background: var(--bg-card);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
@@ -297,20 +192,20 @@ input:-webkit-autofill:active {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
background: rgba(26, 26, 26, 0.92);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Section title ── */
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 12px;
|
||||||
padding: 4px 0 4px 12px;
|
padding: 4px 0 4px 12px;
|
||||||
border-left: 3px solid var(--border-gold);
|
border-left: 3px solid var(--primary);
|
||||||
color: var(--primary-light);
|
color: var(--text);
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.02em;
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Empty / loading state ── */
|
||||||
.state {
|
.state {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -275,7 +275,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
.back-btn {
|
.back-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: var(--primary-light, #d4af37);
|
color: #003D6B;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 4px 0 8px;
|
padding: 4px 0 8px;
|
||||||
@@ -288,14 +288,14 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
.state {
|
.state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 60px 20px;
|
padding: 60px 20px;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── hero ── */
|
/* ── hero ── */
|
||||||
.hero {
|
.hero {
|
||||||
border-radius: 14px;
|
border-radius: 12px;
|
||||||
padding: 20px 20px 18px;
|
padding: 20px 20px 18px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -305,22 +305,22 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero.won { background: linear-gradient(135deg, rgba(61,184,101,0.15), rgba(61,184,101,0.06)); border: 1px solid rgba(61,184,101,0.25); }
|
.hero.won { background: rgba(5, 150, 105, 0.08); border: 1px solid rgba(5, 150, 105, 0.2); }
|
||||||
.hero.lost { background: linear-gradient(135deg, rgba(224,80,80,0.12), rgba(224,80,80,0.05)); border: 1px solid rgba(224,80,80,0.2); }
|
.hero.lost { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.15); }
|
||||||
.hero.pending { background: linear-gradient(135deg, rgba(232,200,74,0.1), rgba(232,200,74,0.04)); border: 1px solid rgba(232,200,74,0.2); }
|
.hero.pending { background: rgba(248, 151, 31, 0.06); border: 1px solid rgba(248, 151, 31, 0.18); }
|
||||||
.hero.push { background: #181818; border: 1px solid #2a2a2a; }
|
.hero.push { background: #FFFFFF; border: 1px solid #E5E7EB; }
|
||||||
|
|
||||||
.hero-status {
|
.hero-status {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
opacity: 0.7;
|
opacity: 0.85;
|
||||||
}
|
}
|
||||||
.hero.won .hero-status { color: #3db865; }
|
.hero.won .hero-status { color: #059669; }
|
||||||
.hero.lost .hero-status { color: #e05050; }
|
.hero.lost .hero-status { color: #DC2626; }
|
||||||
.hero.pending .hero-status { color: #e8c84a; }
|
.hero.pending .hero-status { color: #F8971F; }
|
||||||
.hero.push .hero-status { color: #888; }
|
.hero.push .hero-status { color: #6B7280; }
|
||||||
|
|
||||||
.hero-return {
|
.hero-return {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
@@ -328,25 +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: #3db865; text-shadow: 0 0 24px rgba(61,184,101,0.3); }
|
.hero.won .hero-return { color: #059669; }
|
||||||
.hero.lost .hero-return { color: #e05050; }
|
.hero.lost .hero-return { color: #DC2626; }
|
||||||
.hero.pending .hero-return { color: #e8c84a; }
|
.hero.pending .hero-return { color: #F8971F; }
|
||||||
.hero.push .hero-return { color: #777; }
|
.hero.push .hero-return { color: #6B7280; }
|
||||||
|
|
||||||
.hero-return-label {
|
.hero-return-label {
|
||||||
font-size: 10.5px;
|
font-size: 10.5px;
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── sections ── */
|
/* ── sections ── */
|
||||||
.section {
|
.section {
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid #222;
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 12px;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-head {
|
.section-head {
|
||||||
@@ -358,20 +359,20 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
|
|
||||||
.league-tag {
|
.league-tag {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.placed-time {
|
.placed-time {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-name {
|
.match-name {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #f0f0f0;
|
color: #1A1A2E;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
@@ -398,18 +399,18 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
|
|
||||||
.row-label {
|
.row-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-val {
|
.row-val {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #c8c8c8;
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-val.pick {
|
.row-val.pick {
|
||||||
color: #d4af37;
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-chips {
|
.score-chips {
|
||||||
@@ -421,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: #1e1e1e;
|
background: #F5F7FA;
|
||||||
border: 1px solid #2a2a2a;
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-period {
|
.score-period {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@@ -438,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: #e8e8e8;
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-value.muted {
|
.score-value.muted {
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-score {
|
.no-score {
|
||||||
font-size: 11.5px;
|
font-size: 11.5px;
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* section title */
|
/* section title */
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 10.5px;
|
font-size: 10.5px;
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@@ -474,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: #1a1a1a;
|
background: #F5F7FA;
|
||||||
border: 1px solid #252525;
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 9px;
|
border-radius: 8px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-row.won { border-color: rgba(61,184,101,0.2); }
|
.leg-row.won { border-color: rgba(5, 150, 105, 0.25); }
|
||||||
.leg-row.lost { border-color: rgba(224,80,80,0.18); }
|
.leg-row.lost { border-color: rgba(220, 38, 38, 0.2); }
|
||||||
|
|
||||||
.leg-left {
|
.leg-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -496,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: #2a2a2a;
|
background: #E8EDF2;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -506,8 +507,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-num.won { background: rgba(61,184,101,0.18); color: #3db865; }
|
.leg-num.won { background: rgba(5, 150, 105, 0.12); color: #059669; }
|
||||||
.leg-num.lost { background: rgba(224,80,80,0.18); color: #e05050; }
|
.leg-num.lost { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
|
||||||
|
|
||||||
.leg-body {
|
.leg-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -519,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: #d0d0d0;
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-pick-line {
|
.leg-pick-line {
|
||||||
font-size: 11.5px;
|
font-size: 11.5px;
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -537,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: #c8c8c8;
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-scores .muted-score {
|
.leg-scores .muted-score {
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-right {
|
.leg-right {
|
||||||
@@ -555,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: #b8a04a;
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-result-badge {
|
.leg-result-badge {
|
||||||
@@ -567,10 +568,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leg-result-badge.won { color: #3db865; background: rgba(61,184,101,0.12); }
|
.leg-result-badge.won { color: #059669; background: rgba(5, 150, 105, 0.1); }
|
||||||
.leg-result-badge.lost { color: #e05050; background: rgba(224,80,80,0.1); }
|
.leg-result-badge.lost { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
|
||||||
.leg-result-badge.push { color: #888; background: #222; }
|
.leg-result-badge.push { color: #6B7280; background: #E8EDF2; }
|
||||||
.leg-result-badge.pending { color: #666; background: #1e1e1e; }
|
.leg-result-badge.pending { color: #6B7280; background: #F5F7FA; }
|
||||||
|
|
||||||
/* summary */
|
/* summary */
|
||||||
.summary-rows {
|
.summary-rows {
|
||||||
@@ -584,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 #1c1c1c;
|
border-bottom: 1px solid #E5E7EB;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #b0b0b0;
|
color: #1A1A2E;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -595,28 +596,28 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sum-row.muted {
|
.sum-row.muted {
|
||||||
color: #444;
|
color: #6B7280;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odds-val {
|
.odds-val {
|
||||||
color: #b8a04a;
|
color: #F8971F;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amt-won {
|
.amt-won {
|
||||||
color: #3db865;
|
color: #059669;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amt-pending {
|
.amt-pending {
|
||||||
color: #e8c84a;
|
color: #F8971F;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amt-lost {
|
.amt-lost {
|
||||||
color: #e05050;
|
color: #DC2626;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -202,7 +202,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
.back-btn {
|
.back-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: var(--primary-light, #d4af37);
|
color: #003D6B;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
padding: 56px 20px;
|
padding: 56px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -243,29 +243,29 @@ const pullIndicatorStyle = () => ({
|
|||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 18px 16px 16px;
|
padding: 18px 16px 16px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
border-radius: var(--radius, 12px);
|
border-radius: 12px;
|
||||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(26, 26, 26, 0.92));
|
background: linear-gradient(135deg, rgba(0, 61, 107, 0.06), #FFFFFF);
|
||||||
border: 1px solid rgba(212, 175, 55, 0.28);
|
border: 1px solid #E5E7EB;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-amount {
|
.hero-amount {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #f0b90b;
|
color: #003D6B;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
text-shadow: 0 0 20px rgba(240, 185, 11, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-sub {
|
.hero-sub {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 10.5px;
|
font-size: 10.5px;
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
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: var(--bg-card);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
backdrop-filter: blur(10px);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-row {
|
.record-row {
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-row:last-child {
|
.record-row:last-child {
|
||||||
@@ -290,15 +290,15 @@ const pullIndicatorStyle = () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.record-row--highlight {
|
.record-row--highlight {
|
||||||
background: rgba(212, 175, 55, 0.08);
|
background: rgba(0, 61, 107, 0.04);
|
||||||
box-shadow: inset 3px 0 0 #d4af37;
|
box-shadow: inset 3px 0 0 #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: #666;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-period {
|
.row-period {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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: #f0b90b;
|
color: #F8971F;
|
||||||
background: rgba(240, 185, 11, 0.1);
|
background: rgba(248, 151, 31, 0.08);
|
||||||
border: 1px solid rgba(240, 185, 11, 0.22);
|
border: 1px solid rgba(248, 151, 31, 0.22);
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 rgba(255, 255, 255, 0.06);
|
border-top: 1px dashed #E5E7EB;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-hint {
|
.empty-hint {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: #555;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 16px 0 4px;
|
padding: 16px 0 4px;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
|
|||||||
@@ -307,9 +307,10 @@ function goMatch(id: string) {
|
|||||||
.bet-page {
|
.bet-page {
|
||||||
margin: 0 -16px;
|
margin: 0 -16px;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
|
background: #E8EDF2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tab 面板切换：不用 display:none，避免浏览器释放图片资源导致重新加载 */
|
/* Tab panel toggle: avoid display:none to prevent browser releasing image resources */
|
||||||
.tab-panel {
|
.tab-panel {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@@ -339,18 +340,23 @@ function goMatch(id: string) {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 12px 8px;
|
padding: 10px 8px;
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
background: #1a1a1a;
|
background: #FFFFFF;
|
||||||
border: 1px solid #2a2a2a;
|
border: 1px solid #CBD5E1;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-tab.active {
|
.main-tab.active {
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
|
background: #EBF3FB;
|
||||||
|
border-color: #003D6B;
|
||||||
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-icon {
|
.tab-icon {
|
||||||
@@ -366,24 +372,23 @@ function goMatch(id: string) {
|
|||||||
|
|
||||||
.time-tab {
|
.time-tab {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 10px 16px;
|
padding: 9px 16px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--primary);
|
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 {
|
.time-tab.active {
|
||||||
background: var(--gradient-gold) !important;
|
background: #003D6B !important;
|
||||||
border-color: #fff1a8 !important;
|
border-color: #003D6B !important;
|
||||||
color: #2a1a00 !important;
|
color: #FFFFFF !important;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
box-shadow:
|
box-shadow: 0 2px 8px rgba(0, 61, 107, 0.25);
|
||||||
0 0 0 1px rgba(255, 244, 200, 0.28) inset,
|
|
||||||
0 4px 16px rgba(212, 175, 55, 0.28);
|
|
||||||
text-shadow: 0 1px 0 rgba(255, 252, 235, 0.75);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-filter {
|
.phase-filter {
|
||||||
@@ -398,29 +403,29 @@ function goMatch(id: string) {
|
|||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #999;
|
color: #6B7280;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid #333;
|
border: 1px solid #CBD5E1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-toggle--active {
|
.phase-toggle--active {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
border-color: var(--primary);
|
border-color: #003D6B;
|
||||||
background: rgba(200, 168, 78, 0.08);
|
background: rgba(0, 61, 107, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-toggle-dot {
|
.phase-toggle-dot {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #555;
|
background: #CBD5E1;
|
||||||
transition: background 0.2s ease;
|
transition: background 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-toggle--active .phase-toggle-dot {
|
.phase-toggle--active .phase-toggle-dot {
|
||||||
background: var(--primary-light);
|
background: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.league-list {
|
.league-list {
|
||||||
@@ -431,7 +436,7 @@ function goMatch(id: string) {
|
|||||||
.placeholder,
|
.placeholder,
|
||||||
.empty {
|
.empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
padding: 48px 20px;
|
padding: 48px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -197,7 +197,7 @@ 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-color: var(--tertiary);
|
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@@ -209,14 +209,18 @@ function goLogin() {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 12px;
|
padding: 20px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #E5E7EB;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: #fff;
|
color: #1A1A2E;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -228,7 +232,7 @@ function goLogin() {
|
|||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
@@ -237,21 +241,22 @@ label {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #0d0d0d;
|
background: #FFFFFF;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input::placeholder {
|
.field-input::placeholder {
|
||||||
color: rgba(255, 255, 255, 0.32);
|
color: rgba(107, 114, 128, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
.field-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #555;
|
border-color: #0066CC;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-row {
|
.inline-row {
|
||||||
@@ -269,10 +274,10 @@ label {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #141414;
|
background: #F5F7FA;
|
||||||
color: var(--text);
|
color: #003D6B;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -302,19 +307,19 @@ label {
|
|||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: rgba(255, 255, 255, 0.55);
|
color: #003D6B;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip:active {
|
.btn-skip:active {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: #005B9F;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--danger);
|
color: #DC2626;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
|
|||||||
@@ -49,6 +49,33 @@ 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
|
||||||
v-for="(match, index) in hotMatches"
|
v-for="(match, index) in hotMatches"
|
||||||
@@ -118,22 +145,100 @@ function formatKickoff(startTime: string) {
|
|||||||
transition: height 0.15s ease;
|
transition: height 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quick-entries {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qe-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 12px 4px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #E5E7EB;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.15s, box-shadow 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qe-item:active {
|
||||||
|
transform: scale(0.96);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qe-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qe-icon--bet {
|
||||||
|
background: rgba(0, 61, 107, 0.1);
|
||||||
|
color: #003D6B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qe-icon--recharge {
|
||||||
|
background: rgba(5, 150, 105, 0.1);
|
||||||
|
color: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qe-icon--bill {
|
||||||
|
background: rgba(248, 151, 31, 0.1);
|
||||||
|
color: #E8870A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qe-icon--promo {
|
||||||
|
background: rgba(220, 38, 38, 0.08);
|
||||||
|
color: #DC2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qe-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1A1A2E;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1A1A2E;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
padding-left: 10px;
|
||||||
|
border-left: 3px solid #003D6B;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
.match-card {
|
.match-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 12px;
|
gap: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
padding: 14px 16px;
|
padding: 10px 12px;
|
||||||
min-height: 72px;
|
min-height: 60px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
box-shadow: none;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
background: var(--bg-card);
|
background: #FFFFFF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: opacity 0.2s, transform 0.2s;
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -141,15 +246,14 @@ function formatKickoff(startTime: string) {
|
|||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: v-bind(matchCardBg) center / 100% 100% no-repeat;
|
background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 60%);
|
||||||
opacity: 0.25;
|
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-card:active {
|
.match-card:active {
|
||||||
opacity: 0.92;
|
|
||||||
transform: scale(0.995);
|
transform: scale(0.995);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-info,
|
.match-info,
|
||||||
@@ -164,15 +268,16 @@ function formatKickoff(startTime: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.match-teams {
|
.match-teams {
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 4px;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-time {
|
.match-time {
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -180,15 +285,15 @@ function formatKickoff(startTime: string) {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 3px;
|
||||||
max-width: 46%;
|
max-width: 46%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vs-arena {
|
.vs-arena {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 64px;
|
width: 52px;
|
||||||
height: 52px;
|
height: 42px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -209,7 +314,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(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
|
filter: drop-shadow(0 0 4px rgba(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -234,11 +339,11 @@ function formatKickoff(startTime: string) {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
rgba(94, 184, 255, 0) 0%,
|
rgba(0, 91, 159, 0) 0%,
|
||||||
rgba(184, 236, 255, 0.95) 28%,
|
rgba(0, 102, 204, 0.7) 28%,
|
||||||
#fff 50%,
|
#0066CC 50%,
|
||||||
rgba(255, 208, 128, 0.95) 72%,
|
rgba(0, 91, 159, 0.7) 72%,
|
||||||
rgba(255, 144, 64, 0) 100%
|
rgba(0, 61, 107, 0) 100%
|
||||||
);
|
);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
filter: blur(0.4px);
|
filter: blur(0.4px);
|
||||||
@@ -252,10 +357,10 @@ function formatKickoff(startTime: string) {
|
|||||||
.vs-img {
|
.vs-img {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
width: 48px;
|
width: 40px;
|
||||||
height: auto;
|
height: auto;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
|
filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-card--live-anim .vs-img {
|
.match-card--live-anim .vs-img {
|
||||||
@@ -343,21 +448,21 @@ function formatKickoff(startTime: string) {
|
|||||||
0%,
|
0%,
|
||||||
100% {
|
100% {
|
||||||
opacity: 0.82;
|
opacity: 0.82;
|
||||||
filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
|
filter: drop-shadow(0 0 2px rgba(0, 61, 107, 0.2));
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
filter:
|
filter:
|
||||||
drop-shadow(0 0 3px rgba(255, 230, 140, 0.7))
|
drop-shadow(0 0 3px rgba(0, 102, 204, 0.5))
|
||||||
drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
|
drop-shadow(0 0 6px rgba(0, 61, 107, 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(212, 175, 55, 0.35));
|
filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
|
||||||
}
|
}
|
||||||
|
|
||||||
.hz-path,
|
.hz-path,
|
||||||
@@ -369,14 +474,14 @@ function formatKickoff(startTime: string) {
|
|||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
padding: 40px 20px;
|
padding: 28px 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-icon {
|
.empty-icon {
|
||||||
width: 96px;
|
width: 72px;
|
||||||
height: 96px;
|
height: 72px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -164,7 +164,7 @@ 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-color: var(--tertiary);
|
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@@ -176,7 +176,11 @@ function goRegister() {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 12px;
|
padding: 20px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #E5E7EB;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field {
|
.field {
|
||||||
@@ -189,17 +193,18 @@ function goRegister() {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #0d0d0d;
|
background: #FFFFFF;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
.field-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #555;
|
border-color: #0066CC;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-row {
|
.inline-row {
|
||||||
@@ -215,7 +220,7 @@ function goRegister() {
|
|||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
@@ -226,7 +231,7 @@ label {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: rgba(240, 216, 117, 0.75);
|
color: #005B9F;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -238,18 +243,18 @@ label {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: #6B7280;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-forgot:active {
|
.btn-forgot:active {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-mode-switch:active {
|
.btn-mode-switch:active {
|
||||||
color: rgba(240, 216, 117, 0.95);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-login {
|
.btn-login {
|
||||||
@@ -271,14 +276,14 @@ label {
|
|||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: rgba(255, 255, 255, 0.55);
|
color: #003D6B;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip:active {
|
.btn-skip:active {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: #005B9F;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip-light {
|
.btn-skip-light {
|
||||||
@@ -289,26 +294,26 @@ label {
|
|||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: rgba(255, 255, 255, 0.45);
|
color: #6B7280;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip-light:active {
|
.btn-skip-light:active {
|
||||||
color: rgba(255, 255, 255, 0.65);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
color: var(--danger);
|
color: #DC2626;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #6ee7a0;
|
color: #059669;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
|||||||
@@ -423,6 +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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pull-indicator {
|
.pull-indicator {
|
||||||
@@ -443,16 +444,16 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
top: -12px;
|
top: -12px;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
margin-top: -12px;
|
margin-top: -12px;
|
||||||
background: rgba(0, 0, 0, 0.55);
|
background: #FFFFFF;
|
||||||
backdrop-filter: blur(4px);
|
border-bottom: 1px solid #CBD5E1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-title {
|
.toolbar-title {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -470,9 +471,9 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: 1px solid #E5E7EB;
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: #F5F7FA;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -483,75 +484,77 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
opacity: 0.45;
|
opacity: 0.45;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── match hero ── */
|
/* -- match hero -- */
|
||||||
.match-hero {
|
.match-hero {
|
||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
margin: 0 0 10px;
|
margin: 0 12px 10px;
|
||||||
padding: 14px 12px 16px;
|
padding: 14px 12px 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #CBD5E1;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-hero--phase {
|
.match-hero--phase {
|
||||||
opacity: 0.98;
|
opacity: 0.98;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── hero status tag (top-right corner) ── */
|
/* -- hero status tag (top-right corner) -- */
|
||||||
.status-tag {
|
.status-tag {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
padding: 4px 14px;
|
padding: 4px 14px;
|
||||||
border-radius: 0 6px 0 10px;
|
border-radius: 0 6px 0 10px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--settled {
|
.status-tag--settled {
|
||||||
background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
|
background: #E8EDF2;
|
||||||
color: #8a9ab8;
|
color: #4B5563;
|
||||||
border-bottom: 1px solid rgba(120, 140, 180, 0.3);
|
border-bottom: 1px solid #D1D5DB;
|
||||||
border-left: 1px solid rgba(120, 140, 180, 0.3);
|
border-left: 1px solid #D1D5DB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag--pending {
|
.status-tag--pending {
|
||||||
background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
|
background: #FEF3C7;
|
||||||
color: #c8a84e;
|
color: #92400E;
|
||||||
border-bottom: 1px solid rgba(200, 168, 78, 0.3);
|
border-bottom: 1px solid #FDE68A;
|
||||||
border-left: 1px solid rgba(200, 168, 78, 0.3);
|
border-left: 1px solid #FDE68A;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── market panel smaller status tag ── */
|
/* -- market panel smaller status tag -- */
|
||||||
.market-status-tag {
|
.market-status-tag {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
padding: 3px 10px;
|
padding: 3px 10px;
|
||||||
border-radius: 0 4px 0 8px;
|
border-radius: 0 4px 0 8px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-status-tag--settled {
|
.market-status-tag--settled {
|
||||||
background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
|
background: #E8EDF2;
|
||||||
color: #8a9ab8;
|
color: #4B5563;
|
||||||
border-bottom: 1px solid rgba(120, 140, 180, 0.3);
|
border-bottom: 1px solid #D1D5DB;
|
||||||
border-left: 1px solid rgba(120, 140, 180, 0.3);
|
border-left: 1px solid #D1D5DB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-status-tag--pending {
|
.market-status-tag--pending {
|
||||||
background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
|
background: #FEF3C7;
|
||||||
color: #c8a84e;
|
color: #92400E;
|
||||||
border-bottom: 1px solid rgba(200, 168, 78, 0.3);
|
border-bottom: 1px solid #FDE68A;
|
||||||
border-left: 1px solid rgba(200, 168, 78, 0.3);
|
border-left: 1px solid #FDE68A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-panel-wrap {
|
.market-panel-wrap {
|
||||||
@@ -567,7 +570,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
@@ -579,18 +582,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: #fff;
|
color: #003D6B;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: 0.06em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stats-section {
|
.result-stats-section {
|
||||||
margin: 0 10px 12px;
|
margin: 0 10px 12px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border: 1px solid rgba(212, 175, 55, 0.22);
|
border: 1px solid #CBD5E1;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: linear-gradient(180deg, #1b1b1b 0%, #121212 100%);
|
background: #FFFFFF;
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stats-head {
|
.result-stats-head {
|
||||||
@@ -605,8 +607,8 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
font-weight: 900;
|
font-weight: 700;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stats-head span {
|
.result-stats-head span {
|
||||||
@@ -616,7 +618,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: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stats-grid {
|
.result-stats-grid {
|
||||||
@@ -633,8 +635,8 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: rgba(255, 255, 255, 0.035);
|
background: #F5F7FA;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
border: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stat-label {
|
.result-stat-label {
|
||||||
@@ -643,15 +645,15 @@ 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: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-stat-value {
|
.result-stat-value {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-weight: 900;
|
font-weight: 700;
|
||||||
color: #fff;
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-teams {
|
.hero-teams {
|
||||||
@@ -674,8 +676,8 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
|
|
||||||
.hero-name {
|
.hero-name {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
color: var(--primary-light);
|
color: #1A1A2E;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -684,7 +686,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* VS arena — same as HomeView */
|
/* VS arena -- blue themed */
|
||||||
.vs-arena {
|
.vs-arena {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -710,7 +712,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(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
|
filter: drop-shadow(0 0 4px rgba(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -735,11 +737,11 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
rgba(94, 184, 255, 0) 0%,
|
rgba(0, 91, 159, 0) 0%,
|
||||||
rgba(184, 236, 255, 0.95) 28%,
|
rgba(0, 102, 204, 0.7) 28%,
|
||||||
#fff 50%,
|
#0066CC 50%,
|
||||||
rgba(255, 208, 128, 0.95) 72%,
|
rgba(0, 91, 159, 0.7) 72%,
|
||||||
rgba(255, 144, 64, 0) 100%
|
rgba(0, 61, 107, 0) 100%
|
||||||
);
|
);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
filter: blur(0.4px);
|
filter: blur(0.4px);
|
||||||
@@ -781,11 +783,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(212, 175, 55, 0.3));
|
filter: drop-shadow(0 0 2px rgba(0, 61, 107, 0.2));
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
filter: drop-shadow(0 0 3px rgba(255, 230, 140, 0.7)) drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
|
filter: drop-shadow(0 0 3px rgba(0, 102, 204, 0.5)) drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -800,22 +802,22 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
.market-list {
|
.market-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: 8px;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-group {
|
.market-group {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #252525;
|
border: 1px solid #CBD5E1;
|
||||||
background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
|
background: #FFFFFF;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.35);
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||||
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: rgba(212, 175, 55, 0.25);
|
border-color: #9CA3AF;
|
||||||
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.08);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-group :deep(.row) {
|
.market-group :deep(.row) {
|
||||||
@@ -831,28 +833,28 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
width: calc(100% - 16px);
|
width: calc(100% - 16px);
|
||||||
margin: 0 8px 10px;
|
margin: 0 8px 10px;
|
||||||
padding: 9px;
|
padding: 9px;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
border: 1px solid var(--border-gold-soft);
|
border: 1px solid #E5E7EB;
|
||||||
background: rgba(212, 175, 55, 0.1);
|
background: #F5F7FA;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.state {
|
.state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 48px;
|
padding: 48px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cs-toast {
|
.cs-toast {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
padding: 2px 0 6px;
|
padding: 2px 0 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── 我的投注 ── */
|
/* -- my bets -- */
|
||||||
.my-bets-section {
|
.my-bets-section {
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
@@ -861,7 +863,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: #ccc;
|
color: #1A1A2E;
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -872,16 +874,17 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.my-bet-card {
|
.my-bet-card {
|
||||||
background: #1c1c1c;
|
background: #FFFFFF;
|
||||||
border: 1px solid #2e2e2e;
|
border: 1px solid #CBD5E1;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-bet-card:active {
|
.my-bet-card:active {
|
||||||
background: #252525;
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-header {
|
.bet-header {
|
||||||
@@ -894,7 +897,7 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
.bet-type {
|
.bet-type {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #fff;
|
color: #1A1A2E;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -911,18 +914,18 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bet-status-won {
|
.bet-status-won {
|
||||||
background: rgba(61, 184, 101, 0.15);
|
background: #E6F4EA;
|
||||||
color: #3db865;
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-status-lost {
|
.bet-status-lost {
|
||||||
background: rgba(224, 80, 80, 0.15);
|
background: #FDE8E8;
|
||||||
color: #e05050;
|
color: #DC2626;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-status-pending {
|
.bet-status-pending {
|
||||||
background: rgba(232, 200, 74, 0.15);
|
background: #FEF3C7;
|
||||||
color: #e8c84a;
|
color: #D97706;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-footer {
|
.bet-footer {
|
||||||
@@ -933,12 +936,12 @@ function onPickSelection(selId: string, marketId: string) {
|
|||||||
|
|
||||||
.bet-stake {
|
.bet-stake {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bet-return {
|
.bet-return {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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: var(--text-muted);
|
color: #6B7280;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid #2a2a2a;
|
border: 1px solid #E5E7EB;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-tab.active {
|
.filter-tab.active {
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
background: rgba(212, 175, 55, 0.1);
|
background: rgba(0, 61, 107, 0.08);
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: var(--text-muted);
|
color: #6B7280;
|
||||||
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: #555;
|
color: #6B7280;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
@@ -338,15 +338,15 @@ function back() {
|
|||||||
.page-title {
|
.page-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-card,
|
.avatar-card,
|
||||||
.form-card {
|
.form-card {
|
||||||
background: var(--bg-card);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-card {
|
.avatar-card {
|
||||||
@@ -361,12 +361,12 @@ function back() {
|
|||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid var(--border-gold-soft);
|
border: 2px solid #E5E7EB;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(145deg, #2a2210, #141008);
|
background: #E8EDF2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 var(--border-gold-soft);
|
border: 1px solid #003D6B;
|
||||||
background: rgba(212, 175, 55, 0.08);
|
background: rgba(0, 61, 107, 0.04);
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-divider {
|
.section-divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: var(--border);
|
background: #E5E7EB;
|
||||||
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: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chevron {
|
.chevron {
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
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 var(--border);
|
border-left: 1px solid #E5E7EB;
|
||||||
border-radius: 0 6px 6px 0;
|
border-radius: 0 6px 6px 0;
|
||||||
background: rgba(212, 175, 55, 0.06);
|
background: #F5F7FA;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
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 var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
background: #0a0a0a;
|
background: #FFFFFF;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
transition: border-color 0.2s;
|
transition: border-color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
.field-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #0066CC;
|
||||||
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
|
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: var(--text);
|
-webkit-text-fill-color: #1A1A2E;
|
||||||
box-shadow: 0 0 0 1000px #0a0a0a inset;
|
box-shadow: 0 0 0 1000px #FFFFFF inset;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input::placeholder {
|
.field-input::placeholder {
|
||||||
color: #555;
|
color: rgba(107, 114, 128, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.readonly {
|
.readonly {
|
||||||
@@ -555,10 +555,10 @@ label {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.msg.ok {
|
.msg.ok {
|
||||||
color: var(--primary-light);
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg.err {
|
.msg.err {
|
||||||
color: var(--danger);
|
color: #DC2626;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -163,40 +163,34 @@ const balanceAmountClass = computed(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="quick-actions">
|
||||||
|
<RouterLink to="/wallet/detail" class="qa-item">
|
||||||
|
<span class="qa-icon qa-icon--wallet">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><path d="M21 12V7H5a2 2 0 010-4h14v4"/><path d="M3 5v14a2 2 0 002 2h16v-5"/><path d="M18 12a2 2 0 100 4 2 2 0 000-4z"/></svg>
|
||||||
|
</span>
|
||||||
|
<span class="qa-label">{{ t('wallet.view_all') }}</span>
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink to="/wallet/recharge" class="qa-item">
|
||||||
|
<span class="qa-icon qa-icon--recharge">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
|
||||||
|
</span>
|
||||||
|
<span class="qa-label">{{ t('recharge.title') }}</span>
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink to="/profile/cashbacks" class="qa-item">
|
||||||
|
<span class="qa-icon qa-icon--cashback">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l2.5 2.5"/></svg>
|
||||||
|
</span>
|
||||||
|
<span class="qa-label">{{ t('wallet.view_cashbacks') }}</span>
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink to="/wallet/recharge/history" class="qa-item">
|
||||||
|
<span class="qa-icon qa-icon--history">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg>
|
||||||
|
</span>
|
||||||
|
<span class="qa-label">{{ t('recharge.history_title') }}</span>
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section class="settings-group">
|
<section class="settings-group">
|
||||||
<RouterLink to="/wallet/detail" class="settings-cell settings-cell--gold-entry">
|
|
||||||
<span class="cell-main">
|
|
||||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
|
||||||
<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 class="cell-label">{{ t('wallet.view_all') }}</span>
|
|
||||||
</span>
|
|
||||||
<span class="cell-chevron" aria-hidden="true">›</span>
|
|
||||||
</RouterLink>
|
|
||||||
|
|
||||||
<RouterLink to="/profile/cashbacks" class="settings-cell settings-cell--gold-entry">
|
|
||||||
<span class="cell-main">
|
|
||||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
|
||||||
<circle cx="12" cy="12" r="8" />
|
|
||||||
<path d="M12 8v4l2.5 2.5" />
|
|
||||||
</svg>
|
|
||||||
<span class="cell-label">{{ t('wallet.view_cashbacks') }}</span>
|
|
||||||
</span>
|
|
||||||
<span class="cell-chevron" aria-hidden="true">›</span>
|
|
||||||
</RouterLink>
|
|
||||||
|
|
||||||
<RouterLink to="/wallet/recharge/history" class="settings-cell settings-cell--gold-entry">
|
|
||||||
<span class="cell-main">
|
|
||||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
|
||||||
<path d="M12 8v8M8 12h8" />
|
|
||||||
<circle cx="12" cy="12" r="8" />
|
|
||||||
</svg>
|
|
||||||
<span class="cell-label">{{ t('recharge.history_title') }}</span>
|
|
||||||
</span>
|
|
||||||
<span class="cell-chevron" aria-hidden="true">›</span>
|
|
||||||
</RouterLink>
|
|
||||||
|
|
||||||
<RouterLink to="/profile/edit" class="settings-cell">
|
<RouterLink to="/profile/edit" class="settings-cell">
|
||||||
<span class="cell-main">
|
<span class="cell-main">
|
||||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||||||
@@ -274,7 +268,7 @@ const balanceAmountClass = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.profile-page {
|
.profile-page {
|
||||||
padding: 8px 0 12px;
|
padding: 6px 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-state {
|
.loading-state {
|
||||||
@@ -294,7 +288,7 @@ const balanceAmountClass = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.error-text {
|
.error-text {
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -302,28 +296,26 @@ const balanceAmountClass = computed(() => {
|
|||||||
.retry-btn {
|
.retry-btn {
|
||||||
padding: 8px 24px;
|
padding: 8px 24px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid var(--primary);
|
border: 1px solid #003D6B;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--primary-light);
|
color: #005B9F;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.retry-btn:active {
|
.retry-btn:active {
|
||||||
background: rgba(200, 168, 78, 0.15);
|
background: rgba(0, 61, 107, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wallet-banner {
|
.wallet-banner {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 10px;
|
||||||
aspect-ratio: 2 / 1;
|
aspect-ratio: 1.75 / 1;
|
||||||
border-radius: 16px;
|
border-radius: 12px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow:
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
0 3px 10px rgba(0, 0, 0, 0.28),
|
|
||||||
0 1px 3px rgba(0, 0, 0, 0.18);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wallet-banner::after {
|
.wallet-banner::after {
|
||||||
@@ -332,7 +324,6 @@ const balanceAmountClass = computed(() => {
|
|||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.22);
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -344,9 +335,6 @@ const balanceAmountClass = computed(() => {
|
|||||||
display: block;
|
display: block;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center center;
|
object-position: center center;
|
||||||
transform: scale(1.12);
|
|
||||||
transform-origin: center center;
|
|
||||||
filter: brightness(0.86);
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
@@ -357,10 +345,10 @@ const balanceAmountClass = computed(() => {
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
180deg,
|
135deg,
|
||||||
rgba(0, 0, 0, 0.4) 0%,
|
#003D6B 0%,
|
||||||
rgba(0, 0, 0, 0.18) 42%,
|
#005B9F 50%,
|
||||||
rgba(0, 0, 0, 0.46) 100%
|
#003D6B 100%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -370,7 +358,7 @@ const balanceAmountClass = computed(() => {
|
|||||||
z-index: 3;
|
z-index: 3;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 14px 16px 12px;
|
padding: 10px 14px 10px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
@@ -391,8 +379,8 @@ const balanceAmountClass = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.brand-logo {
|
.brand-logo {
|
||||||
width: 22px;
|
width: 18px;
|
||||||
height: 22px;
|
height: 18px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
@@ -407,17 +395,16 @@ const balanceAmountClass = computed(() => {
|
|||||||
.brand-name {
|
.brand-name {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #fff;
|
color: #FFFFFF;
|
||||||
letter-spacing: 0.14em;
|
letter-spacing: 0.14em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-card-type {
|
.bank-card-type {
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.14em;
|
letter-spacing: 0.14em;
|
||||||
color: rgba(212, 175, 55, 0.65);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
@@ -428,9 +415,8 @@ const balanceAmountClass = computed(() => {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: rgba(255, 255, 255, 0.82);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.recharge-btn {
|
.recharge-btn {
|
||||||
@@ -440,20 +426,19 @@ const balanceAmountClass = computed(() => {
|
|||||||
gap: 3px;
|
gap: 3px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
background: rgba(0, 0, 0, 0.45);
|
background: rgba(255, 255, 255, 0.15);
|
||||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
color: var(--primary-light);
|
color: #FFFFFF;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
transition: background 0.15s ease;
|
transition: background 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recharge-btn:active {
|
.recharge-btn:active {
|
||||||
background: rgba(212, 175, 55, 0.15);
|
background: rgba(255, 255, 255, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.recharge-icon {
|
.recharge-icon {
|
||||||
@@ -468,8 +453,8 @@ const balanceAmountClass = computed(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
padding: 2px 0;
|
padding: 1px 0;
|
||||||
gap: 5px;
|
gap: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-card-number {
|
.bank-card-number {
|
||||||
@@ -478,39 +463,38 @@ const balanceAmountClass = computed(() => {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
color: var(--primary-light);
|
color: #FFFFFF;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance-amount {
|
.balance-amount {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance-amount--xl { font-size: clamp(24px, 6.2vw, 30px); }
|
.balance-amount--xl { font-size: clamp(22px, 5.6vw, 27px); }
|
||||||
.balance-amount--lg { font-size: clamp(21px, 5.6vw, 26px); }
|
.balance-amount--lg { font-size: clamp(19px, 5vw, 24px); }
|
||||||
.balance-amount--md { font-size: clamp(18px, 4.9vw, 22px); }
|
.balance-amount--md { font-size: clamp(16px, 4.4vw, 20px); }
|
||||||
.balance-amount--sm { font-size: clamp(16px, 4.2vw, 19px); }
|
.balance-amount--sm { font-size: clamp(14px, 3.8vw, 17px); }
|
||||||
.balance-amount--xs { font-size: clamp(14px, 3.6vw, 16px); }
|
.balance-amount--xs { font-size: clamp(12px, 3.2vw, 14px); }
|
||||||
|
|
||||||
.bank-card-footer {
|
.bank-card-footer {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 8px;
|
gap: 6px;
|
||||||
padding-top: 8px;
|
padding-top: 6px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-card-field {
|
.bank-card-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 3px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -520,11 +504,10 @@ const balanceAmountClass = computed(() => {
|
|||||||
.bank-card-holder {
|
.bank-card-holder {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #fff;
|
color: #FFFFFF;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -532,16 +515,83 @@ const balanceAmountClass = computed(() => {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
color: #fff;
|
color: #FFFFFF;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.quick-actions {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 14px 4px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #CBD5E1;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.15s, box-shadow 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-item:active {
|
||||||
|
transform: scale(0.96);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-icon {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-icon--wallet {
|
||||||
|
background: rgba(0, 61, 107, 0.1);
|
||||||
|
color: #003D6B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-icon--recharge {
|
||||||
|
background: rgba(5, 150, 105, 0.1);
|
||||||
|
color: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-icon--cashback {
|
||||||
|
background: rgba(248, 151, 31, 0.1);
|
||||||
|
color: #E8870A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-icon--history {
|
||||||
|
background: rgba(99, 102, 241, 0.1);
|
||||||
|
color: #6366F1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qa-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1A1A2E;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.settings-group {
|
.settings-group {
|
||||||
background: var(--bg-card);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -549,16 +599,16 @@ const balanceAmountClass = computed(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 12px;
|
gap: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 48px;
|
min-height: 42px;
|
||||||
padding: 0 16px;
|
padding: 0 14px;
|
||||||
background: none;
|
background: none;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-cell:last-child {
|
.settings-cell:last-child {
|
||||||
@@ -566,41 +616,15 @@ const balanceAmountClass = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.settings-cell:active {
|
.settings-cell:active {
|
||||||
background: rgba(255, 255, 255, 0.03);
|
background: #F5F7FA;
|
||||||
}
|
|
||||||
|
|
||||||
.settings-cell--gold-entry {
|
|
||||||
position: relative;
|
|
||||||
min-height: 50px;
|
|
||||||
border-color: rgba(212, 175, 55, 0.18);
|
|
||||||
border-bottom-color: rgba(212, 175, 55, 0.18);
|
|
||||||
background:
|
|
||||||
linear-gradient(90deg, rgba(212, 175, 55, 0.08), rgba(20, 20, 20, 0.65) 46%, rgba(212, 175, 55, 0.04));
|
|
||||||
box-shadow:
|
|
||||||
inset 1px 0 0 rgba(212, 175, 55, 0.22),
|
|
||||||
inset 0 1px 0 rgba(255, 244, 200, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-cell--gold-entry:active {
|
|
||||||
background:
|
|
||||||
linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(20, 20, 20, 0.74) 46%, rgba(212, 175, 55, 0.06));
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-cell--gold-entry .cell-label {
|
|
||||||
color: #f4dc8b;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-cell--gold-entry .cell-chevron {
|
|
||||||
color: rgba(240, 216, 117, 0.78);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-cell--stack {
|
.settings-cell--stack {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
padding: 12px 16px 14px;
|
padding: 10px 14px 12px;
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -615,11 +639,7 @@ const balanceAmountClass = computed(() => {
|
|||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
|
||||||
|
|
||||||
.settings-cell--gold-entry .cell-icon {
|
|
||||||
color: var(--primary-light);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-head {
|
.cell-head {
|
||||||
@@ -629,11 +649,11 @@ const balanceAmountClass = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cell-label {
|
.cell-label {
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-chevron {
|
.cell-chevron {
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
@@ -651,8 +671,8 @@ const balanceAmountClass = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rules-cell .rules-body {
|
.rules-cell .rules-body {
|
||||||
padding: 0 16px 14px;
|
padding: 0 14px 12px;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lang-segment {
|
.lang-segment {
|
||||||
@@ -666,43 +686,43 @@ const balanceAmountClass = computed(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
min-height: 34px;
|
min-height: 30px;
|
||||||
padding: 0 6px;
|
padding: 0 5px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
background: #0a0a0a;
|
background: #FFFFFF;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lang-opt.active {
|
.lang-opt.active {
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
background: rgba(212, 175, 55, 0.1);
|
background: rgba(0, 61, 107, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn {
|
.logout-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 12px;
|
margin-top: 10px;
|
||||||
min-height: 44px;
|
min-height: 40px;
|
||||||
padding: 0 16px;
|
padding: 0 14px;
|
||||||
border-radius: var(--radius);
|
border-radius: 8px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #DC2626;
|
||||||
background: var(--bg-card);
|
background: #FFFFFF;
|
||||||
color: var(--danger);
|
color: #DC2626;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn:active {
|
.logout-btn:active {
|
||||||
background: rgba(255, 69, 58, 0.08);
|
background: rgba(220, 38, 38, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rules-body {
|
.rules-body {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rules-body p {
|
.rules-body p {
|
||||||
|
|||||||
@@ -411,23 +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; }
|
.page-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: #1A1A2E; }
|
||||||
.back-btn { background: none; border: none; color: var(--primary-light); font-size: 24px; cursor: pointer; padding: 0 8px; }
|
.back-btn { background: none; border: none; color: #003D6B; font-size: 24px; cursor: pointer; padding: 0 8px; }
|
||||||
.recharge-btn { background: none; border: none; color: var(--primary-light); font-size: 13px; cursor: pointer; font-weight: 600; }
|
.recharge-btn { background: none; border: none; color: #003D6B; 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: #666; padding: 48px 16px; font-weight: 600; }
|
.empty { text-align: center; color: #6B7280; 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: linear-gradient(135deg, #1a1810 0%, #1f1b0e 40%, #16140c 100%);
|
background: #FFFFFF;
|
||||||
border: 1px solid rgba(212, 175, 55, 0.2);
|
border: 1px solid #E5E7EB;
|
||||||
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);
|
||||||
}
|
}
|
||||||
.order-card:active {
|
.order-card:active {
|
||||||
opacity: 0.92;
|
opacity: 0.92;
|
||||||
@@ -437,69 +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, rgba(212, 175, 55, 0.6), transparent);
|
background: linear-gradient(90deg, transparent, #003D6B, transparent);
|
||||||
}
|
}
|
||||||
.order-card.rejected {
|
.order-card.rejected {
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border-color: rgba(245, 108, 108, 0.22);
|
border-color: rgba(220, 38, 38, 0.25);
|
||||||
}
|
}
|
||||||
.order-card.rejected::before {
|
.order-card.rejected::before {
|
||||||
background: linear-gradient(90deg, transparent, rgba(245, 108, 108, 0.35), transparent);
|
background: linear-gradient(90deg, transparent, #DC2626, 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: #bbb;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
.order-card.rejected .info-label {
|
.order-card.rejected .info-label {
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
.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(30, 58, 95, 0.6); color: #66b1ff; }
|
.method-badge.bank { background: rgba(0, 61, 107, 0.08); color: #005B9F; }
|
||||||
.method-badge.usdt { background: rgba(26, 58, 42, 0.6); color: #67c23a; }
|
.method-badge.usdt { background: rgba(5, 150, 105, 0.08); color: #059669; }
|
||||||
.status-badge { font-size: 12px; font-weight: 700; }
|
.status-badge { font-size: 12px; font-weight: 700; }
|
||||||
.status-pending { color: #e6a23c; }
|
.status-pending { color: #F8971F; }
|
||||||
.status-approved { color: #67c23a; }
|
.status-approved { color: #059669; }
|
||||||
.status-rejected { color: #f56c6c; }
|
.status-rejected { color: #DC2626; }
|
||||||
.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;
|
||||||
background: linear-gradient(135deg, #f0d060, #d4a830);
|
color: #003D6B;
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
}
|
}
|
||||||
.approved-amount { font-size: 12px; color: #67c23a; margin-bottom: 6px; font-weight: 600; }
|
.approved-amount { font-size: 12px; color: #059669; margin-bottom: 6px; font-weight: 600; }
|
||||||
.order-info-row { margin-bottom: 8px; }
|
.order-info-row { margin-bottom: 8px; }
|
||||||
.info-label { font-size: 13px; color: rgba(212, 175, 55, 0.7); font-weight: 600; }
|
.info-label { font-size: 13px; color: #003D6B; 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: #888; }
|
.time-label { font-size: 11px; color: #6B7280; }
|
||||||
.time-value { font-size: 11px; color: #aaa; font-variant-numeric: tabular-nums; }
|
.time-value { font-size: 11px; color: #1A1A2E; font-variant-numeric: tabular-nums; }
|
||||||
.order-remark {
|
.order-remark {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: rgba(212, 175, 55, 0.8);
|
color: #003D6B;
|
||||||
background: rgba(212, 175, 55, 0.06);
|
background: rgba(0, 61, 107, 0.04);
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
border-left: 2px solid rgba(212, 175, 55, 0.3);
|
border-left: 2px solid #003D6B;
|
||||||
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: #c07070;
|
color: #DC2626;
|
||||||
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(245, 108, 108, 0.18);
|
border-top: 1px solid rgba(220, 38, 38, 0.18);
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -510,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 rgba(212, 175, 55, 0.12);
|
border-top: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
.card-detail-summary {
|
.card-detail-summary {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: rgba(212, 175, 55, 0.65);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.card-detail-link {
|
.card-detail-link {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -532,7 +530,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
background: none;
|
background: none;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -550,7 +548,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
.end-hint {
|
.end-hint {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 16px 0 4px;
|
padding: 16px 0 4px;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
@@ -560,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.48);
|
background: rgba(0, 0, 0, 0.3);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -573,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: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid #2a2a2a;
|
border: 1px solid #E5E7EB;
|
||||||
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.28);
|
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-close {
|
.detail-close {
|
||||||
@@ -590,7 +588,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #777;
|
color: #6B7280;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -600,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: #e8e8e8;
|
color: #1A1A2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-summary {
|
.detail-summary {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: rgba(255, 255, 255, 0.02);
|
background: #F5F7FA;
|
||||||
border: 1px solid #222;
|
border: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-summary-head {
|
.detail-summary-head {
|
||||||
@@ -622,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: var(--primary-light, #d4af37);
|
color: #003D6B;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-method-name {
|
.detail-method-name {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: #6B7280;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
@@ -643,13 +641,13 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #ccc;
|
color: #1A1A2E;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -657,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: #999;
|
color: #6B7280;
|
||||||
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 #222;
|
border-top: 1px solid #E5E7EB;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -670,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: #b08888;
|
color: #DC2626;
|
||||||
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(245, 108, 108, 0.15);
|
border-top: 1px solid rgba(220, 38, 38, 0.15);
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -688,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 #222;
|
border-top: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: #888;
|
color: #6B7280;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -723,7 +721,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
width: 5px;
|
width: 5px;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #555;
|
background: #E5E7EB;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -732,7 +730,7 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
width: 1px;
|
width: 1px;
|
||||||
min-height: 10px;
|
min-height: 10px;
|
||||||
margin: 3px 0;
|
margin: 3px 0;
|
||||||
background: #2a2a2a;
|
background: #E5E7EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step-body {
|
.audit-step-body {
|
||||||
@@ -755,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: #ccc;
|
color: #1A1A2E;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step-time {
|
.audit-step-time {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #666;
|
color: #6B7280;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -770,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: #999;
|
color: #6B7280;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -778,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: #7eb87a;
|
color: #059669;
|
||||||
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: #888;
|
color: #6B7280;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -803,35 +801,35 @@ function auditStepCount(order: DepositOrder) {
|
|||||||
|
|
||||||
.audit-step-box--reject {
|
.audit-step-box--reject {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid rgba(245, 108, 108, 0.22);
|
border: 1px solid rgba(220, 38, 38, 0.22);
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step-box-label {
|
.audit-step-box-label {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #c07070;
|
color: #DC2626;
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step-box-text {
|
.audit-step-box-text {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #b08888;
|
color: #DC2626;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audit-step--submitted .audit-dot {
|
.audit-step--submitted .audit-dot {
|
||||||
background: #c9a227;
|
background: #003D6B;
|
||||||
}
|
}
|
||||||
.audit-step--approved .audit-dot {
|
.audit-step--approved .audit-dot {
|
||||||
background: #5fad5a;
|
background: #059669;
|
||||||
}
|
}
|
||||||
.audit-step--rejected .audit-dot {
|
.audit-step--rejected .audit-dot {
|
||||||
background: #d06060;
|
background: #DC2626;
|
||||||
}
|
}
|
||||||
.audit-step--revoked .audit-dot {
|
.audit-step--revoked .audit-dot {
|
||||||
background: #777;
|
background: #6B7280;
|
||||||
}
|
}
|
||||||
.audit-step--reopened .audit-dot {
|
.audit-step--reopened .audit-dot {
|
||||||
background: #c9a227;
|
background: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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; }
|
.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1A1A2E; }
|
||||||
.back-btn { background: none; border: none; color: var(--primary-light); font-size: 22px; cursor: pointer; padding: 0 6px; }
|
.back-btn { background: none; border: none; color: #003D6B; font-size: 22px; cursor: pointer; padding: 0 6px; }
|
||||||
.history-btn { background: none; border: none; color: var(--primary-light); font-size: 12px; cursor: pointer; font-weight: 600; }
|
.history-btn { background: none; border: none; color: #003D6B; 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: #ffd0d0;
|
color: #DC2626;
|
||||||
background: rgba(245, 108, 108, 0.12);
|
background: rgba(220, 38, 38, 0.06);
|
||||||
border: 1px solid rgba(245, 108, 108, 0.25);
|
border: 1px solid rgba(220, 38, 38, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 rgba(212, 175, 55, 0.2);
|
border: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
.tab {
|
.tab {
|
||||||
flex: 1; padding: 8px; border: none;
|
flex: 1; padding: 8px; border: none;
|
||||||
background: rgba(20, 20, 20, 0.8);
|
background: #FFFFFF;
|
||||||
color: var(--text-muted); font-weight: 700; font-size: 13px;
|
color: #6B7280; font-weight: 700; font-size: 13px;
|
||||||
cursor: pointer; transition: all 0.2s;
|
cursor: pointer; transition: all 0.2s;
|
||||||
}
|
}
|
||||||
.tab.active {
|
.tab.active {
|
||||||
background: var(--primary-light); color: #000;
|
background: #003D6B; 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: rgba(20, 20, 20, 0.8);
|
background: #FFFFFF;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
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: var(--primary-light);
|
border-color: #0066CC;
|
||||||
background: rgba(212, 175, 55, 0.06);
|
background: rgba(0, 102, 204, 0.04);
|
||||||
}
|
}
|
||||||
.pill-name { font-weight: 700; font-size: 12px; color: var(--text); }
|
.pill-name { font-weight: 700; font-size: 12px; color: #1A1A2E; }
|
||||||
.pill-sub { font-size: 10px; color: var(--text-muted); }
|
.pill-sub { font-size: 10px; color: #6B7280; }
|
||||||
.empty-methods { text-align: center; color: var(--text-muted); padding: 20px; font-size: 12px; }
|
.empty-methods { text-align: center; color: #6B7280; padding: 20px; font-size: 12px; }
|
||||||
|
|
||||||
.bank-card-wrap {
|
.bank-card-wrap {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
@@ -433,15 +433,9 @@ onMounted(fetchMethods);
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background:
|
background: linear-gradient(135deg, #003D6B 0%, #005B9F 50%, #003D6B 100%);
|
||||||
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(212, 175, 55, 0.22), transparent 55%),
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(212, 175, 55, 0.1), transparent 50%),
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
linear-gradient(135deg, #2a2218 0%, #1a1610 35%, #12100c 70%, #0a0908 100%);
|
|
||||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
|
||||||
box-shadow:
|
|
||||||
0 8px 24px rgba(0, 0, 0, 0.55),
|
|
||||||
0 2px 8px rgba(212, 175, 55, 0.12),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-card-shine {
|
.bank-card-shine {
|
||||||
@@ -450,9 +444,9 @@ onMounted(fetchMethods);
|
|||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
115deg,
|
115deg,
|
||||||
transparent 30%,
|
transparent 30%,
|
||||||
rgba(255, 255, 255, 0.04) 45%,
|
rgba(255, 255, 255, 0.03) 45%,
|
||||||
rgba(255, 255, 255, 0.08) 50%,
|
rgba(255, 255, 255, 0.06) 50%,
|
||||||
rgba(255, 255, 255, 0.04) 55%,
|
rgba(255, 255, 255, 0.03) 55%,
|
||||||
transparent 70%
|
transparent 70%
|
||||||
);
|
);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@@ -461,7 +455,7 @@ onMounted(fetchMethods);
|
|||||||
.bank-card-deco {
|
.bank-card-deco {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid rgba(212, 175, 55, 0.12);
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -470,7 +464,7 @@ onMounted(fetchMethods);
|
|||||||
height: 180px;
|
height: 180px;
|
||||||
right: -60px;
|
right: -60px;
|
||||||
bottom: -80px;
|
bottom: -80px;
|
||||||
background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 70%);
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-card-deco--2 {
|
.bank-card-deco--2 {
|
||||||
@@ -478,7 +472,7 @@ onMounted(fetchMethods);
|
|||||||
height: 100px;
|
height: 100px;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
border-color: rgba(212, 175, 55, 0.08);
|
border-color: rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-card-top,
|
.bank-card-top,
|
||||||
@@ -498,10 +492,9 @@ onMounted(fetchMethods);
|
|||||||
.bank-card-bank {
|
.bank-card-bank {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #fff;
|
color: #FFFFFF;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
max-width: 58%;
|
max-width: 58%;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
@@ -520,8 +513,7 @@ onMounted(fetchMethods);
|
|||||||
font-size: clamp(15px, 4.2vw, 19px);
|
font-size: clamp(15px, 4.2vw, 19px);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.14em;
|
letter-spacing: 0.14em;
|
||||||
color: var(--primary-light);
|
color: #FFFFFF;
|
||||||
text-shadow: 0 0 12px rgba(240, 216, 117, 0.25);
|
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
@@ -531,9 +523,9 @@ onMounted(fetchMethods);
|
|||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||||
background: rgba(0, 0, 0, 0.25);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
color: var(--primary-light);
|
color: #FFFFFF;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -548,7 +540,7 @@ onMounted(fetchMethods);
|
|||||||
|
|
||||||
.bank-card-copy:active {
|
.bank-card-copy:active {
|
||||||
opacity: 0.65;
|
opacity: 0.65;
|
||||||
background: rgba(212, 175, 55, 0.12);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-card-bottom {
|
.bank-card-bottom {
|
||||||
@@ -570,15 +562,14 @@ onMounted(fetchMethods);
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: rgba(255, 255, 255, 0.45);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-card-holder-name {
|
.bank-card-holder-name {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #fff;
|
color: #FFFFFF;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
|
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -587,87 +578,89 @@ onMounted(fetchMethods);
|
|||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0.18em;
|
letter-spacing: 0.18em;
|
||||||
color: rgba(212, 175, 55, 0.55);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.method-info {
|
.method-info {
|
||||||
background: rgba(17, 17, 17, 0.9);
|
background: #FFFFFF;
|
||||||
border-radius: 8px; padding: 10px 12px;
|
border-radius: 8px; padding: 10px 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
.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 rgba(255, 255, 255, 0.04);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
}
|
}
|
||||||
.info-row:last-child { border-bottom: none; }
|
.info-row:last-child { border-bottom: none; }
|
||||||
.info-label { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
|
.info-label { font-size: 11px; color: #6B7280; 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;
|
||||||
}
|
}
|
||||||
.copyable {
|
.copyable {
|
||||||
cursor: pointer; color: var(--primary-light);
|
cursor: pointer; color: #0066CC;
|
||||||
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; }
|
.qr-image { width: 140px; height: 140px; object-fit: contain; border-radius: 6px; background: #fff; padding: 6px; border: 1px solid #E5E7EB; }
|
||||||
|
|
||||||
.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: var(--text-muted); margin-bottom: 4px;
|
color: #6B7280; margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
.amount-input {
|
.amount-input {
|
||||||
width: 100%; padding: 10px; background: #111;
|
width: 100%; padding: 10px; background: #FFFFFF;
|
||||||
border: 1px solid var(--border); border-radius: 6px;
|
border: 1px solid #E5E7EB; border-radius: 6px;
|
||||||
color: #fff; font-size: 16px; font-weight: 700;
|
color: #1A1A2E; font-size: 16px; font-weight: 700;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.amount-input:focus { border-color: var(--primary-light); outline: none; }
|
.amount-input:focus { border-color: #0066CC; outline: none; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
|
||||||
|
|
||||||
.upload-area {
|
.upload-area {
|
||||||
border: 1px dashed rgba(212, 175, 55, 0.3);
|
border: 1px dashed #0066CC;
|
||||||
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);
|
||||||
}
|
}
|
||||||
.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: var(--text-muted); }
|
.upload-hint { font-size: 12px; color: #6B7280; }
|
||||||
.compress-hint { font-size: 12px; color: var(--primary-light); }
|
.compress-hint { font-size: 12px; color: #003D6B; }
|
||||||
.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 {
|
||||||
position: absolute; top: 4px; right: 4px;
|
position: absolute; top: 4px; right: 4px;
|
||||||
background: rgba(0,0,0,0.7); border: none; color: #fff;
|
background: rgba(0, 0, 0, 0.6); border: none; color: #fff;
|
||||||
width: 20px; height: 20px; border-radius: 50%;
|
width: 20px; height: 20px; border-radius: 50%;
|
||||||
cursor: pointer; font-size: 11px;
|
cursor: pointer; font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-submit {
|
.btn-submit {
|
||||||
width: 100%; padding: 12px;
|
width: 100%; padding: 12px;
|
||||||
background: linear-gradient(135deg, #f0d060, #d4a830);
|
background: #003D6B;
|
||||||
color: #000; 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 2px 8px rgba(212, 175, 55, 0.2);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
.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: #67c23a; margin-bottom: 10px; }
|
.success-icon { font-size: 40px; color: #059669; margin-bottom: 10px; }
|
||||||
.success-state h3 { margin: 0 0 6px; font-size: 16px; }
|
.success-state h3 { margin: 0 0 6px; font-size: 16px; color: #1A1A2E; }
|
||||||
.order-no { font-family: monospace; color: var(--primary-light); font-size: 13px; margin: 4px 0; }
|
.order-no { font-family: monospace; color: #003D6B; font-size: 13px; margin: 4px 0; }
|
||||||
.success-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
|
.success-hint { font-size: 12px; color: #6B7280; margin-bottom: 20px; }
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: linear-gradient(135deg, #f0d060, #d4a830);
|
background: #003D6B;
|
||||||
color: #000; 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;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -227,7 +227,7 @@ 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-color: var(--tertiary);
|
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@@ -240,7 +240,11 @@ const fieldError = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 12px;
|
padding: 20px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #E5E7EB;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form.is-busy {
|
.login-form.is-busy {
|
||||||
@@ -257,7 +261,7 @@ const fieldError = () => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
background: rgba(8, 8, 8, 0.72);
|
background: rgba(255, 255, 255, 0.85);
|
||||||
backdrop-filter: blur(2px);
|
backdrop-filter: blur(2px);
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
@@ -266,7 +270,7 @@ const fieldError = () => {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: rgba(240, 216, 117, 0.95);
|
color: #003D6B;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -281,7 +285,7 @@ const fieldError = () => {
|
|||||||
margin: 0 0 2px;
|
margin: 0 0 2px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #fff;
|
color: #1A1A2E;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -297,7 +301,7 @@ const fieldError = () => {
|
|||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
@@ -305,28 +309,29 @@ label {
|
|||||||
.optional-tag {
|
.optional-tag {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(255, 255, 255, 0.4);
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input {
|
.field-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #0d0d0d;
|
background: #FFFFFF;
|
||||||
color: var(--text);
|
color: #1A1A2E;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input::placeholder {
|
.field-input::placeholder {
|
||||||
color: rgba(255, 255, 255, 0.32);
|
color: rgba(107, 114, 128, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-input:focus {
|
.field-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #555;
|
border-color: #0066CC;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-row {
|
.inline-row {
|
||||||
@@ -344,10 +349,10 @@ label {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #141414;
|
background: #F5F7FA;
|
||||||
color: var(--text);
|
color: #003D6B;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -381,14 +386,14 @@ label {
|
|||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: rgba(255, 255, 255, 0.55);
|
color: #003D6B;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip:active {
|
.btn-skip:active {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: #005B9F;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip-light {
|
.btn-skip-light {
|
||||||
@@ -399,20 +404,20 @@ label {
|
|||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: rgba(255, 255, 255, 0.45);
|
color: #6B7280;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-skip-light:active {
|
.btn-skip-light:active {
|
||||||
color: rgba(255, 255, 255, 0.65);
|
color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--danger);
|
color: #DC2626;
|
||||||
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: var(--primary-light, #d4af37);
|
color: #003D6B;
|
||||||
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: var(--text-muted);
|
color: #6B7280;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid #2a2a2a;
|
border: 1px solid #E5E7EB;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-tab.active {
|
.filter-tab.active {
|
||||||
color: var(--primary-light);
|
color: #FFFFFF;
|
||||||
background: rgba(212, 175, 55, 0.1);
|
background: #003D6B;
|
||||||
border-color: var(--border-gold-soft);
|
border-color: #003D6B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: var(--text-muted);
|
color: #6B7280;
|
||||||
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 var(--border);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
background: transparent;
|
background: #FFFFFF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -322,7 +322,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tx-row:active {
|
.tx-row:active {
|
||||||
background: rgba(255, 255, 255, 0.03);
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-main {
|
.tx-main {
|
||||||
@@ -341,7 +341,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
|
|
||||||
.tx-summary {
|
.tx-summary {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
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: var(--text); }
|
.tx-type { font-weight: 700; color: #1A1A2E; }
|
||||||
.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
|
.pos { color: #003D6B; font-weight: 800; font-size: 15px; }
|
||||||
.neg { color: var(--danger); font-weight: 700; }
|
.neg { color: #DC2626; font-weight: 700; }
|
||||||
.tx-time { font-size: 11px; color: var(--text-muted); }
|
.tx-time { font-size: 11px; color: #6B7280; }
|
||||||
.tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
|
.tx-arrow { font-size: 16px; color: #6B7280; 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: #555;
|
color: #6B7280;
|
||||||
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: var(--text-muted); padding: 40px 16px; font-weight: 600; }
|
.empty { text-align: center; color: #6B7280; 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: var(--primary-light, #d4af37);
|
color: #003D6B;
|
||||||
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: #666;
|
color: #6B7280;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -265,18 +265,19 @@ function goCashbackDetail() {
|
|||||||
gap: 6px;
|
gap: 6px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid #222;
|
border: 1px solid #E5E7EB;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero.pos {
|
.hero.pos {
|
||||||
border-color: rgba(212, 175, 55, 0.25);
|
border-color: rgba(0, 61, 107, 0.2);
|
||||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.03));
|
background: linear-gradient(135deg, rgba(0, 61, 107, 0.04), #FFFFFF);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero.neg {
|
.hero.neg {
|
||||||
border-color: rgba(224, 80, 80, 0.2);
|
border-color: rgba(220, 38, 38, 0.2);
|
||||||
background: linear-gradient(135deg, rgba(224, 80, 80, 0.1), rgba(224, 80, 80, 0.03));
|
background: linear-gradient(135deg, rgba(220, 38, 38, 0.04), #FFFFFF);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-type {
|
.hero-type {
|
||||||
@@ -284,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: #888;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-summary {
|
.hero-summary {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #bbb;
|
color: #6B7280;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
@@ -301,27 +302,28 @@ function goCashbackDetail() {
|
|||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero.pos .hero-amount { color: var(--primary-light); }
|
.hero.pos .hero-amount { color: #003D6B; }
|
||||||
.hero.neg .hero-amount { color: var(--danger); }
|
.hero.neg .hero-amount { color: #DC2626; }
|
||||||
|
|
||||||
.hero-time {
|
.hero-time {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #555;
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
background: #141414;
|
background: #FFFFFF;
|
||||||
border: 1px solid #222;
|
border: 1px solid #E5E7EB;
|
||||||
border-radius: 12px;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #888;
|
color: #6B7280;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
@@ -338,18 +340,18 @@ function goCashbackDetail() {
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #aaa;
|
color: #6B7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sum-row span:last-child {
|
.sum-row span:last-child {
|
||||||
color: #f0f0f0;
|
color: #1A1A2E;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pos { color: var(--primary-light) !important; }
|
.pos { color: #003D6B !important; }
|
||||||
.neg { color: var(--danger) !important; }
|
.neg { color: #DC2626 !important; }
|
||||||
|
|
||||||
.mono {
|
.mono {
|
||||||
font-family: ui-monospace, monospace;
|
font-family: ui-monospace, monospace;
|
||||||
@@ -366,9 +368,9 @@ function goCashbackDetail() {
|
|||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid var(--border-gold-soft, rgba(212, 175, 55, 0.35));
|
border: 1px solid #003D6B;
|
||||||
background: rgba(212, 175, 55, 0.08);
|
background: rgba(0, 61, 107, 0.04);
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -377,7 +379,7 @@ function goCashbackDetail() {
|
|||||||
.tx-id {
|
.tx-id {
|
||||||
font-family: ui-monospace, monospace;
|
font-family: ui-monospace, monospace;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #ccc;
|
color: #1A1A2E;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -141,7 +141,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.wallet-page {
|
.wallet-page {
|
||||||
padding-bottom: 24px;
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pull-indicator {
|
.pull-indicator {
|
||||||
@@ -158,7 +158,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
padding: 56px 20px;
|
padding: 56px 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -176,11 +176,11 @@ const pullIndicatorStyle = () => ({
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
padding: 8px 12px;
|
padding: 6px 10px;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid #E5E7EB;
|
||||||
background: transparent;
|
background: #FFFFFF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -189,7 +189,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tx-row:active {
|
.tx-row:active {
|
||||||
background: rgba(255, 255, 255, 0.03);
|
background: #F5F7FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-main {
|
.tx-main {
|
||||||
@@ -208,7 +208,7 @@ const pullIndicatorStyle = () => ({
|
|||||||
|
|
||||||
.tx-summary {
|
.tx-summary {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--text-muted);
|
color: #6B7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -219,31 +219,31 @@ const pullIndicatorStyle = () => ({
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 4px;
|
margin-top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-type { font-weight: 700; color: var(--text); }
|
.tx-type { font-weight: 700; color: #1A1A2E; }
|
||||||
.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
|
.pos { color: #003D6B; font-weight: 800; font-size: 14px; }
|
||||||
.neg { color: var(--danger); font-weight: 700; }
|
.neg { color: #DC2626; font-weight: 700; }
|
||||||
.tx-time { font-size: 11px; color: var(--text-muted); }
|
.tx-time { font-size: 11px; color: #6B7280; }
|
||||||
.tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
|
.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
|
||||||
|
|
||||||
.top-bar {
|
.top-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 4px 2px;
|
padding: 0 4px 1px;
|
||||||
margin-top: -8px;
|
margin-top: -6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-bar .more-link.secondary {
|
.top-bar .more-link.secondary {
|
||||||
color: #f0b90b;
|
color: #005B9F;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-link {
|
.more-link {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: var(--primary-light);
|
color: #003D6B;
|
||||||
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: var(--text-muted); padding: 40px 16px; font-weight: 600; }
|
.empty { text-align: center; color: #6B7280; padding: 28px 14px; font-weight: 600; }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,3 +1,10 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||||
<image xlink:href="/logo.png" width="32" height="32" preserveAspectRatio="xMidYMid meet" />
|
<rect width="32" height="32" rx="6" fill="#003D6B"/>
|
||||||
|
<path d="M7.5 6.5h6.2c2.8 0 4.8 1.4 4.8 3.6 0 1.6-1 2.7-2.4 3.2v.1c1.8.4 3.1 1.8 3.1 3.7 0 2.5-2.2 4-5.2 4H7.5V6.5zm4.5 5.9h1.6c1.1 0 1.7-.6 1.7-1.5s-.6-1.5-1.7-1.5H12v3zm0 6h1.9c1.2 0 1.9-.6 1.9-1.6s-.7-1.6-1.9-1.6H12v3.2z" fill="#FFF"/>
|
||||||
|
<circle cx="24.5" cy="24.5" r="5" fill="#F8971F"/>
|
||||||
|
<g fill="#FFF">
|
||||||
|
<path d="M21.3 22.8h1.4l-.1.7h-1.2v.8h1v.7h-1v.8h1.2l.1.7h-1.4z" />
|
||||||
|
<path d="M23.2 22.8h1.9v.7h-1.3v.6h1.1v.7h-1.1v.6h1.3v.7h-1.9z" />
|
||||||
|
<path d="M25.5 22.8h1.5l-.1.7h-1.3v.5h1.1c.3 0 .5.2.5.5v1.2c0 .3-.2.5-.5.5h-1.4l.1-.7h1.1v-1h-1.1c-.3 0-.5-.2-.5-.5v-.7c0-.3.2-.5.5-.5z" />
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 205 B After Width: | Height: | Size: 729 B |
Reference in New Issue
Block a user