ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(player): 全站 UI 主题重构与布局优化 — 从暗金奢华风格迁移至 Pinnacle 风格蓝白专业主题

Browse Source 
一、全局主题重构（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:
Mars
2026-06-16 12:24:41 +08:00
parent 06d85953ba
commit 4a93fcfce0
52 changed files with 1605 additions and 1519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
apps/player/src/views/BetDetailView.vue
View File

@@ -275,7 +275,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.back-btn {
background: none;
border: none;
color: var(--primary-light, #d4af37);
color: #003D6B;
font-size: 15px;
font-weight: 700;
padding: 4px 0 8px;
@@ -288,14 +288,14 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.state {
text-align: center;
padding: 60px 20px;
color: #666;
color: #6B7280;
font-size: 14px;
font-weight: 600;
}
/* ── hero ── */
.hero {
border-radius: 14px;
border-radius: 12px;
padding: 20px 20px 18px;
display: flex;
flex-direction: column;
@@ -305,22 +305,22 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
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.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.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.push { background: #181818; border: 1px solid #2a2a2a; }
.hero.won { background: rgba(5, 150, 105, 0.08); border: 1px solid rgba(5, 150, 105, 0.2); }
.hero.lost { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.15); }
.hero.pending { background: rgba(248, 151, 31, 0.06); border: 1px solid rgba(248, 151, 31, 0.18); }
.hero.push { background: #FFFFFF; border: 1px solid #E5E7EB; }
.hero-status {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
opacity: 0.85;
}
.hero.won .hero-status { color: #3db865; }
.hero.lost .hero-status { color: #e05050; }
.hero.pending .hero-status { color: #e8c84a; }
.hero.push .hero-status { color: #888; }
.hero.won .hero-status { color: #059669; }
.hero.lost .hero-status { color: #DC2626; }
.hero.pending .hero-status { color: #F8971F; }
.hero.push .hero-status { color: #6B7280; }
.hero-return {
font-size: 36px;
@@ -328,25 +328,26 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
letter-spacing: -0.01em;
line-height: 1.1;
}
.hero.won .hero-return { color: #3db865; text-shadow: 0 0 24px rgba(61,184,101,0.3); }
.hero.lost .hero-return { color: #e05050; }
.hero.pending .hero-return { color: #e8c84a; }
.hero.push .hero-return { color: #777; }
.hero.won .hero-return { color: #059669; }
.hero.lost .hero-return { color: #DC2626; }
.hero.pending .hero-return { color: #F8971F; }
.hero.push .hero-return { color: #6B7280; }
.hero-return-label {
font-size: 10.5px;
color: #555;
color: #6B7280;
font-weight: 600;
letter-spacing: 0.04em;
}
/* ── sections ── */
.section {
background: #141414;
border: 1px solid #222;
border-radius: 12px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.section-head {
@@ -358,20 +359,20 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.league-tag {
font-size: 11px;
color: #888;
color: #6B7280;
font-weight: 700;
}
.placed-time {
font-size: 11px;
color: #555;
color: #6B7280;
font-weight: 600;
}
.match-name {
font-size: 17px;
font-weight: 900;
color: #f0f0f0;
color: #1A1A2E;
line-height: 1.3;
margin-bottom: 10px;
}
@@ -398,18 +399,18 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.row-label {
font-size: 11px;
color: #666;
color: #6B7280;
font-weight: 600;
}
.row-val {
font-size: 13px;
font-weight: 700;
color: #c8c8c8;
color: #1A1A2E;
}
.row-val.pick {
color: #d4af37;
color: #003D6B;
}
.score-chips {
@@ -421,15 +422,15 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
display: flex;
align-items: center;
gap: 5px;
background: #1e1e1e;
border: 1px solid #2a2a2a;
background: #F5F7FA;
border: 1px solid #E5E7EB;
border-radius: 7px;
padding: 5px 10px;
}
.score-period {
font-size: 10px;
color: #666;
color: #6B7280;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
@@ -438,24 +439,24 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.score-value {
font-size: 16px;
font-weight: 900;
color: #e8e8e8;
color: #1A1A2E;
}
.score-value.muted {
color: #666;
color: #6B7280;
font-size: 13px;
}
.no-score {
font-size: 11.5px;
color: #555;
color: #6B7280;
font-style: italic;
}
/* section title */
.section-title {
font-size: 10.5px;
color: #555;
color: #6B7280;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
@@ -474,14 +475,14 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
justify-content: space-between;
align-items: flex-start;
gap: 10px;
background: #1a1a1a;
border: 1px solid #252525;
border-radius: 9px;
background: #F5F7FA;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 10px 12px;
}
.leg-row.won { border-color: rgba(61,184,101,0.2); }
.leg-row.lost { border-color: rgba(224,80,80,0.18); }
.leg-row.won { border-color: rgba(5, 150, 105, 0.25); }
.leg-row.lost { border-color: rgba(220, 38, 38, 0.2); }
.leg-left {
display: flex;
@@ -496,8 +497,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
width: 20px;
height: 20px;
border-radius: 50%;
background: #2a2a2a;
color: #666;
background: #E8EDF2;
color: #6B7280;
font-size: 10px;
font-weight: 800;
display: flex;
@@ -506,8 +507,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
margin-top: 1px;
}
.leg-num.won { background: rgba(61,184,101,0.18); color: #3db865; }
.leg-num.lost { background: rgba(224,80,80,0.18); color: #e05050; }
.leg-num.won { background: rgba(5, 150, 105, 0.12); color: #059669; }
.leg-num.lost { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
.leg-body {
display: flex;
@@ -519,12 +520,12 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.leg-match {
font-size: 12.5px;
font-weight: 800;
color: #d0d0d0;
color: #1A1A2E;
}
.leg-pick-line {
font-size: 11.5px;
color: #888;
color: #6B7280;
font-weight: 600;
}
@@ -537,11 +538,11 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.leg-scores span {
font-size: 11px;
font-weight: 700;
color: #c8c8c8;
color: #1A1A2E;
}
.leg-scores .muted-score {
color: #555;
color: #6B7280;
}
.leg-right {
@@ -555,7 +556,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
.leg-odds-val {
font-size: 15px;
font-weight: 900;
color: #b8a04a;
color: #003D6B;
}
.leg-result-badge {
@@ -567,10 +568,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
border-radius: 10px;
}
.leg-result-badge.won { color: #3db865; background: rgba(61,184,101,0.12); }
.leg-result-badge.lost { color: #e05050; background: rgba(224,80,80,0.1); }
.leg-result-badge.push { color: #888; background: #222; }
.leg-result-badge.pending { color: #666; background: #1e1e1e; }
.leg-result-badge.won { color: #059669; background: rgba(5, 150, 105, 0.1); }
.leg-result-badge.lost { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
.leg-result-badge.push { color: #6B7280; background: #E8EDF2; }
.leg-result-badge.pending { color: #6B7280; background: #F5F7FA; }
/* summary */
.summary-rows {
@@ -584,9 +585,9 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #1c1c1c;
border-bottom: 1px solid #E5E7EB;
font-size: 13px;
color: #b0b0b0;
color: #1A1A2E;
font-weight: 600;
}
@@ -595,28 +596,28 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
}
.sum-row.muted {
color: #444;
color: #6B7280;
font-size: 11px;
}
.odds-val {
color: #b8a04a;
color: #F8971F;
font-weight: 800;
}
.amt-won {
color: #3db865;
color: #059669;
font-weight: 900;
font-size: 15px;
}
.amt-pending {
color: #e8c84a;
color: #F8971F;
font-weight: 900;
}
.amt-lost {
color: #e05050;
color: #DC2626;
font-weight: 900;
font-size: 15px;
}

56
apps/player/src/views/CashbackRecordsView.vue
View File

@@ -202,7 +202,7 @@ const pullIndicatorStyle = () => ({
.back-btn {
background: none;
border: none;
color: var(--primary-light, #d4af37);
color: #003D6B;
font-size: 15px;
font-weight: 700;
padding: 4px 0 8px;
@@ -226,7 +226,7 @@ const pullIndicatorStyle = () => ({
align-items: center;
gap: 12px;
text-align: center;
color: var(--text-muted);
color: #6B7280;
padding: 56px 20px;
font-weight: 600;
font-size: 14px;
@@ -243,29 +243,29 @@ const pullIndicatorStyle = () => ({
gap: 4px;
padding: 18px 16px 16px;
margin-bottom: 14px;
border-radius: var(--radius, 12px);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(26, 26, 26, 0.92));
border: 1px solid rgba(212, 175, 55, 0.28);
border-radius: 12px;
background: linear-gradient(135deg, rgba(0, 61, 107, 0.06), #FFFFFF);
border: 1px solid #E5E7EB;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.hero-amount {
font-size: 28px;
font-weight: 800;
color: #f0b90b;
color: #003D6B;
line-height: 1.2;
text-shadow: 0 0 20px rgba(240, 185, 11, 0.2);
}
.hero-sub {
font-size: 12px;
color: var(--text-muted);
color: #6B7280;
line-height: 1.4;
}
.section-title {
font-size: 10.5px;
color: #555;
color: #6B7280;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
@@ -273,16 +273,16 @@ const pullIndicatorStyle = () => ({
}
.list-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
overflow: hidden;
backdrop-filter: blur(10px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.record-row {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
border-bottom: 1px solid #E5E7EB;
}
.record-row:last-child {
@@ -290,15 +290,15 @@ const pullIndicatorStyle = () => ({
}
.record-row--highlight {
background: rgba(212, 175, 55, 0.08);
box-shadow: inset 3px 0 0 #d4af37;
background: rgba(0, 61, 107, 0.04);
box-shadow: inset 3px 0 0 #003D6B;
}
.ledger-hint {
margin: 0 0 12px;
font-size: 12px;
line-height: 1.5;
color: #666;
color: #6B7280;
}
.row-main {
@@ -318,12 +318,12 @@ const pullIndicatorStyle = () => ({
.row-amount {
font-size: 17px;
font-weight: 800;
color: var(--primary-light);
color: #003D6B;
}
.row-period {
font-size: 12px;
color: var(--text-muted);
color: #6B7280;
font-weight: 600;
}
@@ -331,9 +331,9 @@ const pullIndicatorStyle = () => ({
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
color: #f0b90b;
background: rgba(240, 185, 11, 0.1);
border: 1px solid rgba(240, 185, 11, 0.22);
color: #F8971F;
background: rgba(248, 151, 31, 0.08);
border: 1px solid rgba(248, 151, 31, 0.22);
border-radius: 999px;
padding: 3px 10px;
}
@@ -344,7 +344,7 @@ const pullIndicatorStyle = () => ({
gap: 8px 16px;
margin-top: 8px;
font-size: 12px;
color: var(--text-muted);
color: #6B7280;
}
.row-foot {
@@ -354,9 +354,9 @@ const pullIndicatorStyle = () => ({
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(255, 255, 255, 0.06);
border-top: 1px dashed #E5E7EB;
font-size: 11px;
color: #666;
color: #6B7280;
}
.row-batch {
@@ -380,14 +380,14 @@ const pullIndicatorStyle = () => ({
margin: 0 0 8px;
font-size: 15px;
font-weight: 700;
color: var(--text-muted);
color: #6B7280;
}
.empty-hint {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: #666;
color: #6B7280;
}
.sentinel {
@@ -403,7 +403,7 @@ const pullIndicatorStyle = () => ({
.end-hint {
text-align: center;
font-size: 12px;
color: #555;
color: #6B7280;
font-weight: 600;
padding: 16px 0 4px;
letter-spacing: 0.03em;

65
apps/player/src/views/FootballView.vue
View File

@@ -307,9 +307,10 @@ function goMatch(id: string) {
.bet-page {
margin: 0 -16px;
padding-bottom: 8px;
background: #E8EDF2;
}
/* Tab 面板切换：不用 display:none，避免浏览器释放图片资源导致重新加载 */
/* Tab panel toggle: avoid display:none to prevent browser releasing image resources */
.tab-panel {
display: block;
}
@@ -339,18 +340,23 @@ function goMatch(id: string) {
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 8px;
border-radius: 10px;
background: #1a1a1a;
border: 1px solid #2a2a2a;
color: var(--text-muted);
padding: 10px 8px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid #CBD5E1;
color: #6B7280;
font-size: 13px;
font-weight: 700;
font-weight: 600;
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 {
font-weight: 800;
font-weight: 700;
background: #EBF3FB;
border-color: #003D6B;
color: #003D6B;
}
.tab-icon {
@@ -366,24 +372,23 @@ function goMatch(id: string) {
.time-tab {
flex: 1;
padding: 10px 16px;
padding: 9px 16px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
color: var(--primary-light);
background: #141414;
border: 1px solid var(--primary);
font-weight: 700;
color: #003D6B;
background: #FFFFFF;
border: 1px solid #CBD5E1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.time-tab.active {
background: var(--gradient-gold) !important;
border-color: #fff1a8 !important;
color: #2a1a00 !important;
font-weight: 800;
box-shadow:
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);
background: #003D6B !important;
border-color: #003D6B !important;
color: #FFFFFF !important;
font-weight: 700;
box-shadow: 0 2px 8px rgba(0, 61, 107, 0.25);
}
.phase-filter {
@@ -398,29 +403,29 @@ function goMatch(id: string) {
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #999;
background: #141414;
border: 1px solid #333;
color: #6B7280;
background: #FFFFFF;
border: 1px solid #CBD5E1;
cursor: pointer;
transition: all 0.2s ease;
}
.phase-toggle--active {
color: var(--primary-light);
border-color: var(--primary);
background: rgba(200, 168, 78, 0.08);
color: #003D6B;
border-color: #003D6B;
background: rgba(0, 61, 107, 0.06);
}
.phase-toggle-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #555;
background: #CBD5E1;
transition: background 0.2s ease;
}
.phase-toggle--active .phase-toggle-dot {
background: var(--primary-light);
background: #003D6B;
}
.league-list {
@@ -431,7 +436,7 @@ function goMatch(id: string) {
.placeholder,
.empty {
text-align: center;
color: var(--text-muted);
color: #6B7280;
padding: 48px 20px;
font-weight: 600;
}

35
apps/player/src/views/ForgotPasswordView.vue
View File

@@ -197,7 +197,7 @@ function goLogin() {
align-items: center;
justify-content: flex-end;
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-position: center top;
background-repeat: no-repeat;
@@ -209,14 +209,18 @@ function goLogin() {
display: flex;
flex-direction: column;
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 {
margin: 0 0 2px;
font-size: 16px;
font-weight: 800;
color: #fff;
color: #1A1A2E;
text-align: center;
}
@@ -228,7 +232,7 @@ function goLogin() {
label {
font-size: 10px;
color: var(--text-muted);
color: #6B7280;
font-weight: 600;
letter-spacing: 0.03em;
}
@@ -237,21 +241,22 @@ label {
width: 100%;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border: 1px solid #E5E7EB;
border-radius: 6px;
background: #0d0d0d;
color: var(--text);
background: #FFFFFF;
color: #1A1A2E;
font-size: 14px;
font-family: inherit;
}
.field-input::placeholder {
color: rgba(255, 255, 255, 0.32);
color: rgba(107, 114, 128, 0.6);
}
.field-input:focus {
outline: none;
border-color: #555;
border-color: #0066CC;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}
.inline-row {
@@ -269,10 +274,10 @@ label {
flex-shrink: 0;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border: 1px solid #E5E7EB;
border-radius: 6px;
background: #141414;
color: var(--text);
background: #F5F7FA;
color: #003D6B;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
@@ -302,19 +307,19 @@ label {
padding: 8px 14px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.55);
color: #003D6B;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.btn-skip:active {
color: rgba(255, 255, 255, 0.75);
color: #005B9F;
}
.error {
margin: 0;
color: var(--danger);
color: #DC2626;
font-size: 12px;
font-weight: 600;
line-height: 1.3;

179
apps/player/src/views/HomeView.vue
View File

@@ -49,6 +49,33 @@ function formatKickoff(startTime: string) {
<BannerCarousel :banners="banners" />
<div class="quick-entries">
<button type="button" class="qe-item" @click="router.push('/bet')">
<span class="qe-icon qe-icon--bet">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 000 20 14.5 14.5 0 000-20M2 12h20"/></svg>
</span>
<span class="qe-label">{{ t('nav.bet') }}</span>
</button>
<button type="button" class="qe-item" @click="router.push('/wallet/recharge')">
<span class="qe-icon qe-icon--recharge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M12 15h4"/></svg>
</span>
<span class="qe-label">{{ t('recharge.title') }}</span>
</button>
<button type="button" class="qe-item" @click="router.push('/wallet/detail')">
<span class="qe-icon qe-icon--bill">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><path d="M9 5H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V9"/><path d="M9 5a2 2 0 012-2h2a2 2 0 012 2v0M9 12h6M9 16h4"/></svg>
</span>
<span class="qe-label">{{ t('wallet.view_all') }}</span>
</button>
<button type="button" class="qe-item" @click="router.push('/bet')">
<span class="qe-icon qe-icon--promo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
</span>
<span class="qe-label">{{ t('home.hot_matches') || '热门赛事' }}</span>
</button>
</div>
<h2 class="section-title">{{ t('home.hot_matches') }}</h2>
<div
v-for="(match, index) in hotMatches"
@@ -118,22 +145,100 @@ function formatKickoff(startTime: string) {
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 {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
padding: 14px 16px;
min-height: 72px;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: none;
background: var(--bg-card);
gap: 8px;
margin-bottom: 8px;
padding: 10px 12px;
min-height: 60px;
border: 1px solid #E5E7EB;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
background: #FFFFFF;
cursor: pointer;
transition: opacity 0.2s, transform 0.2s;
transition: transform 0.2s, box-shadow 0.2s;
overflow: hidden;
}
@@ -141,15 +246,14 @@ function formatKickoff(startTime: string) {
content: '';
position: absolute;
inset: 0;
background: v-bind(matchCardBg) center / 100% 100% no-repeat;
opacity: 0.25;
background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 60%);
z-index: 0;
pointer-events: none;
}
.match-card:active {
opacity: 0.92;
transform: scale(0.995);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.match-info,
@@ -164,15 +268,16 @@ function formatKickoff(startTime: string) {
}
.match-teams {
font-weight: 800;
margin-bottom: 8px;
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
font-size: 14px;
line-height: 1.3;
color: #1A1A2E;
}
.match-time {
font-size: 13px;
color: var(--text-muted);
font-size: 12px;
color: #6B7280;
font-weight: 500;
}
@@ -180,15 +285,15 @@ function formatKickoff(startTime: string) {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
gap: 3px;
max-width: 46%;
}
.vs-arena {
position: relative;
flex-shrink: 0;
width: 64px;
height: 52px;
width: 52px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
@@ -209,7 +314,7 @@ function formatKickoff(startTime: string) {
stroke-width: 2.2;
stroke-linecap: 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;
}
@@ -234,11 +339,11 @@ function formatKickoff(startTime: string) {
z-index: 1;
background: linear-gradient(
90deg,
rgba(94, 184, 255, 0) 0%,
rgba(184, 236, 255, 0.95) 28%,
#fff 50%,
rgba(255, 208, 128, 0.95) 72%,
rgba(255, 144, 64, 0) 100%
rgba(0, 91, 159, 0) 0%,
rgba(0, 102, 204, 0.7) 28%,
#0066CC 50%,
rgba(0, 91, 159, 0.7) 72%,
rgba(0, 61, 107, 0) 100%
);
opacity: 0;
filter: blur(0.4px);
@@ -252,10 +357,10 @@ function formatKickoff(startTime: string) {
.vs-img {
position: relative;
z-index: 0;
width: 48px;
width: 40px;
height: auto;
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 {
@@ -343,21 +448,21 @@ function formatKickoff(startTime: string) {
0%,
100% {
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% {
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));
drop-shadow(0 0 3px rgba(0, 102, 204, 0.5))
drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
}
}
@media (prefers-reduced-motion: reduce) {
.vs-img {
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,
@@ -369,14 +474,14 @@ function formatKickoff(startTime: string) {
.empty {
text-align: center;
color: var(--text-muted);
padding: 40px 20px;
color: #6B7280;
padding: 28px 16px;
font-weight: 600;
}
.empty-icon {
width: 96px;
height: 96px;
margin-bottom: 14px;
width: 72px;
height: 72px;
margin-bottom: 10px;
}
</style>

41
apps/player/src/views/LoginView.vue
View File

@@ -164,7 +164,7 @@ function goRegister() {
align-items: center;
justify-content: flex-end;
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-position: center top;
background-repeat: no-repeat;
@@ -176,7 +176,11 @@ function goRegister() {
display: flex;
flex-direction: column;
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 {
@@ -189,17 +193,18 @@ function goRegister() {
width: 100%;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border: 1px solid #E5E7EB;
border-radius: 6px;
background: #0d0d0d;
color: var(--text);
background: #FFFFFF;
color: #1A1A2E;
font-size: 14px;
font-family: inherit;
}
.field-input:focus {
outline: none;
border-color: #555;
border-color: #0066CC;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}
.inline-row {
@@ -215,7 +220,7 @@ function goRegister() {
label {
font-size: 11px;
color: var(--text-muted);
color: #6B7280;
font-weight: 600;
letter-spacing: 0.04em;
}
@@ -226,7 +231,7 @@ label {
padding: 0;
border: none;
background: transparent;
color: rgba(240, 216, 117, 0.75);
color: #005B9F;
font-size: 12px;
font-weight: 600;
cursor: pointer;
@@ -238,18 +243,18 @@ label {
padding: 0;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.5);
color: #6B7280;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.btn-forgot:active {
color: rgba(255, 255, 255, 0.75);
color: #003D6B;
}
.btn-mode-switch:active {
color: rgba(240, 216, 117, 0.95);
color: #003D6B;
}
.btn-login {
@@ -271,14 +276,14 @@ label {
padding: 8px 14px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.55);
color: #003D6B;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.btn-skip:active {
color: rgba(255, 255, 255, 0.75);
color: #005B9F;
}
.btn-skip-light {
@@ -289,26 +294,26 @@ label {
padding: 8px 16px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.45);
color: #6B7280;
font-size: 13px;
font-weight: 300;
font-weight: 400;
cursor: pointer;
white-space: nowrap;
}
.btn-skip-light:active {
color: rgba(255, 255, 255, 0.65);
color: #003D6B;
}
.error {
color: var(--danger);
color: #DC2626;
font-size: 13px;
font-weight: 600;
}
.success {
margin: 0;
color: #6ee7a0;
color: #059669;
font-size: 12px;
font-weight: 600;
line-height: 1.4;

169
apps/player/src/views/MatchDetailView.vue
View File

@@ -423,6 +423,7 @@ function onPickSelection(selId: string, marketId: string) {
.detail-page {
margin: 0 -16px;
padding-bottom: 16px;
background: #E8EDF2;
}
.pull-indicator {
@@ -443,16 +444,16 @@ function onPickSelection(selId: string, marketId: string) {
top: -12px;
z-index: 50;
margin-top: -12px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
background: #FFFFFF;
border-bottom: 1px solid #CBD5E1;
}
.toolbar-title {
flex: 1;
text-align: center;
font-size: 13px;
font-weight: 800;
color: var(--primary-light);
font-weight: 700;
color: #003D6B;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -470,9 +471,9 @@ function onPickSelection(selId: string, marketId: string) {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--border-gold-soft);
background: rgba(0, 0, 0, 0.2);
color: var(--primary-light);
border: 1px solid #E5E7EB;
background: #F5F7FA;
color: #003D6B;
font-size: 16px;
font-weight: 700;
line-height: 1;
@@ -483,75 +484,77 @@ function onPickSelection(selId: string, marketId: string) {
opacity: 0.45;
}
/* ── match hero ── */
/* -- match hero -- */
.match-hero {
position: relative;
isolation: isolate;
margin: 0 0 10px;
margin: 0 12px 10px;
padding: 14px 12px 16px;
overflow: hidden;
background: #FFFFFF;
border: 1px solid #CBD5E1;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.match-hero--phase {
opacity: 0.98;
}
/* ── hero status tag (top-right corner) ── */
/* -- hero status tag (top-right corner) -- */
.status-tag {
position: absolute;
top: 0;
right: 0;
z-index: 5;
font-size: 11px;
font-weight: 800;
font-weight: 700;
padding: 4px 14px;
border-radius: 0 6px 0 10px;
line-height: 1.3;
white-space: nowrap;
letter-spacing: 0.02em;
}
.status-tag--settled {
background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
color: #8a9ab8;
border-bottom: 1px solid rgba(120, 140, 180, 0.3);
border-left: 1px solid rgba(120, 140, 180, 0.3);
background: #E8EDF2;
color: #4B5563;
border-bottom: 1px solid #D1D5DB;
border-left: 1px solid #D1D5DB;
}
.status-tag--pending {
background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
color: #c8a84e;
border-bottom: 1px solid rgba(200, 168, 78, 0.3);
border-left: 1px solid rgba(200, 168, 78, 0.3);
background: #FEF3C7;
color: #92400E;
border-bottom: 1px solid #FDE68A;
border-left: 1px solid #FDE68A;
}
/* ── market panel smaller status tag ── */
/* -- market panel smaller status tag -- */
.market-status-tag {
position: absolute;
top: 0;
right: 0;
z-index: 5;
font-size: 10px;
font-weight: 800;
font-weight: 700;
padding: 3px 10px;
border-radius: 0 4px 0 8px;
line-height: 1.3;
white-space: nowrap;
letter-spacing: 0.02em;
}
.market-status-tag--settled {
background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
color: #8a9ab8;
border-bottom: 1px solid rgba(120, 140, 180, 0.3);
border-left: 1px solid rgba(120, 140, 180, 0.3);
background: #E8EDF2;
color: #4B5563;
border-bottom: 1px solid #D1D5DB;
border-left: 1px solid #D1D5DB;
}
.market-status-tag--pending {
background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
color: #c8a84e;
border-bottom: 1px solid rgba(200, 168, 78, 0.3);
border-left: 1px solid rgba(200, 168, 78, 0.3);
background: #FEF3C7;
color: #92400E;
border-bottom: 1px solid #FDE68A;
border-left: 1px solid #FDE68A;
}
.market-panel-wrap {
@@ -567,7 +570,7 @@ function onPickSelection(selId: string, marketId: string) {
position: relative;
z-index: 1;
font-size: 11px;
color: var(--text-muted);
color: #6B7280;
text-align: left;
margin-top: 10px;
padding-left: 2px;
@@ -579,18 +582,17 @@ function onPickSelection(selId: string, marketId: string) {
margin: 8px 0 0;
font-size: 28px;
font-weight: 900;
color: #fff;
color: #003D6B;
text-align: center;
letter-spacing: 0.06em;
}
.result-stats-section {
margin: 0 10px 12px;
padding: 12px;
border: 1px solid rgba(212, 175, 55, 0.22);
border: 1px solid #CBD5E1;
border-radius: 8px;
background: linear-gradient(180deg, #1b1b1b 0%, #121212 100%);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
background: #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.result-stats-head {
@@ -605,8 +607,8 @@ function onPickSelection(selId: string, marketId: string) {
margin: 0;
font-size: 14px;
line-height: 1.2;
font-weight: 900;
color: var(--primary-light);
font-weight: 700;
color: #003D6B;
}
.result-stats-head span {
@@ -616,7 +618,7 @@ function onPickSelection(selId: string, marketId: string) {
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
color: var(--text-muted);
color: #6B7280;
}
.result-stats-grid {
@@ -633,8 +635,8 @@ function onPickSelection(selId: string, marketId: string) {
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
background: #F5F7FA;
border: 1px solid #E5E7EB;
}
.result-stat-label {
@@ -643,15 +645,15 @@ function onPickSelection(selId: string, marketId: string) {
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
color: var(--text-muted);
color: #6B7280;
}
.result-stat-value {
flex-shrink: 0;
font-size: 14px;
line-height: 1;
font-weight: 900;
color: #fff;
font-weight: 700;
color: #1A1A2E;
}
.hero-teams {
@@ -674,8 +676,8 @@ function onPickSelection(selId: string, marketId: string) {
.hero-name {
font-size: 13px;
font-weight: 800;
color: var(--primary-light);
font-weight: 700;
color: #1A1A2E;
text-align: center;
line-height: 1.25;
white-space: nowrap;
@@ -684,7 +686,7 @@ function onPickSelection(selId: string, marketId: string) {
max-width: 100%;
}
/* VS arena — same as HomeView */
/* VS arena -- blue themed */
.vs-arena {
position: relative;
flex-shrink: 0;
@@ -710,7 +712,7 @@ function onPickSelection(selId: string, marketId: string) {
stroke-width: 2.2;
stroke-linecap: 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;
}
@@ -735,11 +737,11 @@ function onPickSelection(selId: string, marketId: string) {
z-index: 1;
background: linear-gradient(
90deg,
rgba(94, 184, 255, 0) 0%,
rgba(184, 236, 255, 0.95) 28%,
#fff 50%,
rgba(255, 208, 128, 0.95) 72%,
rgba(255, 144, 64, 0) 100%
rgba(0, 91, 159, 0) 0%,
rgba(0, 102, 204, 0.7) 28%,
#0066CC 50%,
rgba(0, 91, 159, 0.7) 72%,
rgba(0, 61, 107, 0) 100%
);
opacity: 0;
filter: blur(0.4px);
@@ -781,11 +783,11 @@ function onPickSelection(selId: string, marketId: string) {
@keyframes vs-glow {
0%, 100% {
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% {
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 {
display: flex;
flex-direction: column;
gap: 6px;
gap: 8px;
padding: 4px 0;
}
.market-group {
border-radius: 8px;
border: 1px solid #252525;
background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
border: 1px solid #CBD5E1;
background: #FFFFFF;
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;
}
.market-group.open {
border-color: rgba(212, 175, 55, 0.25);
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.08);
border-color: #9CA3AF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.market-group :deep(.row) {
@@ -831,28 +833,28 @@ function onPickSelection(selId: string, marketId: string) {
width: calc(100% - 16px);
margin: 0 8px 10px;
padding: 9px;
border-radius: 4px;
border: 1px solid var(--border-gold-soft);
background: rgba(212, 175, 55, 0.1);
color: var(--primary-light);
border-radius: 6px;
border: 1px solid #E5E7EB;
background: #F5F7FA;
color: #003D6B;
font-size: 13px;
font-weight: 800;
font-weight: 700;
}
.state {
text-align: center;
padding: 48px;
color: var(--text-muted);
color: #6B7280;
}
.cs-toast {
text-align: center;
font-size: 12px;
color: var(--primary-light);
color: #003D6B;
padding: 2px 0 6px;
}
/* ── 我的投注 ── */
/* -- my bets -- */
.my-bets-section {
padding: 0 12px;
margin-bottom: 12px;
@@ -861,7 +863,7 @@ function onPickSelection(selId: string, marketId: string) {
.my-bets-title {
font-size: 14px;
font-weight: 700;
color: #ccc;
color: #1A1A2E;
margin: 0 0 8px;
}
@@ -872,16 +874,17 @@ function onPickSelection(selId: string, marketId: string) {
}
.my-bet-card {
background: #1c1c1c;
border: 1px solid #2e2e2e;
background: #FFFFFF;
border: 1px solid #CBD5E1;
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
transition: background 0.15s;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.my-bet-card:active {
background: #252525;
background: #F5F7FA;
}
.bet-header {
@@ -894,7 +897,7 @@ function onPickSelection(selId: string, marketId: string) {
.bet-type {
font-size: 12px;
font-weight: 700;
color: #fff;
color: #1A1A2E;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -911,18 +914,18 @@ function onPickSelection(selId: string, marketId: string) {
}
.bet-status-won {
background: rgba(61, 184, 101, 0.15);
color: #3db865;
background: #E6F4EA;
color: #059669;
}
.bet-status-lost {
background: rgba(224, 80, 80, 0.15);
color: #e05050;
background: #FDE8E8;
color: #DC2626;
}
.bet-status-pending {
background: rgba(232, 200, 74, 0.15);
color: #e8c84a;
background: #FEF3C7;
color: #D97706;
}
.bet-footer {
@@ -933,12 +936,12 @@ function onPickSelection(selId: string, marketId: string) {
.bet-stake {
font-size: 11px;
color: #888;
color: #6B7280;
}
.bet-return {
font-size: 13px;
font-weight: 800;
font-weight: 700;
}
</style>

16
apps/player/src/views/MyBetsView.vue
View File

@@ -176,16 +176,16 @@ const pullIndicatorStyle = () => ({
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
background: #141414;
border: 1px solid #2a2a2a;
color: #6B7280;
background: #FFFFFF;
border: 1px solid #E5E7EB;
transition: all 0.2s;
}
.filter-tab.active {
color: var(--primary-light);
background: rgba(212, 175, 55, 0.1);
border-color: var(--border-gold-soft);
color: #003D6B;
background: rgba(0, 61, 107, 0.08);
border-color: #003D6B;
}
.state {
@@ -194,7 +194,7 @@ const pullIndicatorStyle = () => ({
align-items: center;
gap: 12px;
text-align: center;
color: var(--text-muted);
color: #6B7280;
padding: 56px 20px;
font-weight: 600;
font-size: 14px;
@@ -217,7 +217,7 @@ const pullIndicatorStyle = () => ({
.end-hint {
text-align: center;
font-size: 12px;
color: #555;
color: #6B7280;
font-weight: 600;
padding: 16px 0 4px;
letter-spacing: 0.03em;

60
apps/player/src/views/ProfileEditView.vue
View File

@@ -328,7 +328,7 @@ function back() {
.back-btn {
background: none;
color: var(--text-muted);
color: #6B7280;
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
@@ -338,15 +338,15 @@ function back() {
.page-title {
font-size: 16px;
font-weight: 800;
color: var(--primary-light);
color: #003D6B;
letter-spacing: 0.04em;
}
.avatar-card,
.form-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
}
.avatar-card {
@@ -361,12 +361,12 @@ function back() {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid var(--border-gold-soft);
border: 2px solid #E5E7EB;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #2a2210, #141008);
background: #E8EDF2;
}
.avatar-img {
@@ -379,9 +379,9 @@ function back() {
.avatar-change-btn {
padding: 7px 18px;
border-radius: 999px;
border: 1px solid var(--border-gold-soft);
background: rgba(212, 175, 55, 0.08);
color: var(--primary-light);
border: 1px solid #003D6B;
background: rgba(0, 61, 107, 0.04);
color: #003D6B;
font-size: 13px;
font-weight: 700;
}
@@ -396,12 +396,12 @@ function back() {
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
color: #6B7280;
}
.section-divider {
height: 1px;
background: var(--border);
background: #E5E7EB;
margin: 6px 0 12px;
}
@@ -412,13 +412,13 @@ function back() {
justify-content: space-between;
padding: 4px 0 12px;
background: none;
color: var(--text);
color: #1A1A2E;
font-size: 14px;
font-weight: 700;
}
.chevron {
color: var(--text-muted);
color: #6B7280;
font-size: 20px;
line-height: 1;
transition: transform 0.15s ease;
@@ -442,7 +442,7 @@ function back() {
.field-hint {
font-size: 11px;
color: var(--text-muted);
color: #6B7280;
margin: 6px 0 0;
line-height: 1.45;
}
@@ -469,10 +469,10 @@ function back() {
min-width: 48px;
padding: 0 10px;
border: none;
border-left: 1px solid var(--border);
border-left: 1px solid #E5E7EB;
border-radius: 0 6px 6px 0;
background: rgba(212, 175, 55, 0.06);
color: var(--primary-light);
background: #F5F7FA;
color: #003D6B;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
@@ -491,7 +491,7 @@ function back() {
label {
display: block;
font-size: 11px;
color: var(--text-muted);
color: #6B7280;
font-weight: 600;
margin-bottom: 6px;
}
@@ -504,28 +504,28 @@ label {
font-size: 14px;
font-weight: 500;
border-radius: 6px;
border: 1px solid var(--border);
background: #0a0a0a;
color: var(--text);
border: 1px solid #E5E7EB;
background: #FFFFFF;
color: #1A1A2E;
transition: border-color 0.2s;
}
.field-input:focus {
outline: none;
border-color: var(--border-gold-soft);
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
border-color: #0066CC;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
}
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--text);
box-shadow: 0 0 0 1000px #0a0a0a inset;
border: 1px solid var(--border);
-webkit-text-fill-color: #1A1A2E;
box-shadow: 0 0 0 1000px #FFFFFF inset;
border: 1px solid #E5E7EB;
}
.field-input::placeholder {
color: #555;
color: rgba(107, 114, 128, 0.6);
}
.readonly {
@@ -555,10 +555,10 @@ label {
}
.msg.ok {
color: var(--primary-light);
color: #059669;
}
.msg.err {
color: var(--danger);
color: #DC2626;
}
</style>

314
apps/player/src/views/ProfileView.vue
View File

@@ -163,40 +163,34 @@ const balanceAmountClass = computed(() => {
</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">
<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">
<span class="cell-main">
<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 {
padding: 8px 0 12px;
padding: 6px 0 10px;
}
.loading-state {
@@ -294,7 +288,7 @@ const balanceAmountClass = computed(() => {
}
.error-text {
color: var(--text-muted);
color: #6B7280;
font-size: 14px;
font-weight: 600;
}
@@ -302,28 +296,26 @@ const balanceAmountClass = computed(() => {
.retry-btn {
padding: 8px 24px;
border-radius: 6px;
border: 1px solid var(--primary);
border: 1px solid #003D6B;
background: transparent;
color: var(--primary-light);
color: #005B9F;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.retry-btn:active {
background: rgba(200, 168, 78, 0.15);
background: rgba(0, 61, 107, 0.08);
}
.wallet-banner {
position: relative;
width: 100%;
margin-bottom: 12px;
aspect-ratio: 2 / 1;
border-radius: 16px;
margin-bottom: 10px;
aspect-ratio: 1.75 / 1;
border-radius: 12px;
overflow: hidden;
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.28),
0 1px 3px rgba(0, 0, 0, 0.18);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.wallet-banner::after {
@@ -332,7 +324,6 @@ const balanceAmountClass = computed(() => {
inset: 0;
z-index: 1;
border-radius: inherit;
box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.22);
pointer-events: none;
}
@@ -344,9 +335,6 @@ const balanceAmountClass = computed(() => {
display: block;
object-fit: cover;
object-position: center center;
transform: scale(1.12);
transform-origin: center center;
filter: brightness(0.86);
pointer-events: none;
user-select: none;
}
@@ -357,10 +345,10 @@ const balanceAmountClass = computed(() => {
z-index: 2;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.18) 42%,
rgba(0, 0, 0, 0.46) 100%
135deg,
#003D6B 0%,
#005B9F 50%,
#003D6B 100%
);
}
@@ -370,7 +358,7 @@ const balanceAmountClass = computed(() => {
z-index: 3;
display: flex;
flex-direction: column;
padding: 14px 16px 12px;
padding: 10px 14px 10px;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
}
@@ -391,8 +379,8 @@ const balanceAmountClass = computed(() => {
}
.brand-logo {
width: 22px;
height: 22px;
width: 18px;
height: 18px;
flex-shrink: 0;
object-fit: contain;
}
@@ -407,17 +395,16 @@ const balanceAmountClass = computed(() => {
.brand-name {
font-size: 11px;
font-weight: 700;
color: #fff;
color: #FFFFFF;
letter-spacing: 0.14em;
line-height: 1;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.bank-card-type {
font-size: 8px;
font-weight: 800;
letter-spacing: 0.14em;
color: rgba(212, 175, 55, 0.65);
color: rgba(255, 255, 255, 0.6);
font-style: italic;
line-height: 1;
}
@@ -428,9 +415,8 @@ const balanceAmountClass = computed(() => {
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
color: rgba(255, 255, 255, 0.75);
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.recharge-btn {
@@ -440,20 +426,19 @@ const balanceAmountClass = computed(() => {
gap: 3px;
padding: 5px 10px;
border-radius: 14px;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(212, 175, 55, 0.35);
color: var(--primary-light);
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #FFFFFF;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
text-decoration: none;
backdrop-filter: blur(6px);
transition: background 0.15s ease;
}
.recharge-btn:active {
background: rgba(212, 175, 55, 0.15);
background: rgba(255, 255, 255, 0.25);
}
.recharge-icon {
@@ -468,8 +453,8 @@ const balanceAmountClass = computed(() => {
flex-direction: column;
justify-content: center;
min-height: 0;
padding: 2px 0;
gap: 5px;
padding: 1px 0;
gap: 3px;
}
.bank-card-number {
@@ -478,39 +463,38 @@ const balanceAmountClass = computed(() => {
font-weight: 700;
font-style: normal;
font-variant-numeric: tabular-nums;
color: var(--primary-light);
color: #FFFFFF;
line-height: 1.1;
letter-spacing: 0.04em;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.balance-amount {
margin: 0;
}
.balance-amount--xl { font-size: clamp(24px, 6.2vw, 30px); }
.balance-amount--lg { font-size: clamp(21px, 5.6vw, 26px); }
.balance-amount--md { font-size: clamp(18px, 4.9vw, 22px); }
.balance-amount--sm { font-size: clamp(16px, 4.2vw, 19px); }
.balance-amount--xs { font-size: clamp(14px, 3.6vw, 16px); }
.balance-amount--xl { font-size: clamp(22px, 5.6vw, 27px); }
.balance-amount--lg { font-size: clamp(19px, 5vw, 24px); }
.balance-amount--md { font-size: clamp(16px, 4.4vw, 20px); }
.balance-amount--sm { font-size: clamp(14px, 3.8vw, 17px); }
.balance-amount--xs { font-size: clamp(12px, 3.2vw, 14px); }
.bank-card-footer {
flex-shrink: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
gap: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.bank-card-field {
display: flex;
flex-direction: column;
gap: 4px;
gap: 3px;
min-width: 0;
}
@@ -520,11 +504,10 @@ const balanceAmountClass = computed(() => {
.bank-card-holder {
font-size: 12px;
font-weight: 700;
color: #fff;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.2;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
word-break: break-all;
}
@@ -532,16 +515,83 @@ const balanceAmountClass = computed(() => {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #fff;
color: #FFFFFF;
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 {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
overflow: hidden;
}
@@ -549,16 +599,16 @@ const balanceAmountClass = computed(() => {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 0 16px;
min-height: 42px;
padding: 0 14px;
background: none;
color: var(--text);
font-size: 14px;
color: #1A1A2E;
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--border);
border-bottom: 1px solid #E5E7EB;
}
.settings-cell:last-child {
@@ -566,41 +616,15 @@ const balanceAmountClass = computed(() => {
}
.settings-cell:active {
background: rgba(255, 255, 255, 0.03);
}
.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);
background: #F5F7FA;
}
.settings-cell--stack {
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 10px;
padding: 12px 16px 14px;
gap: 8px;
padding: 10px 14px 12px;
min-height: auto;
}
@@ -615,11 +639,7 @@ const balanceAmountClass = computed(() => {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--text-muted);
}
.settings-cell--gold-entry .cell-icon {
color: var(--primary-light);
color: #6B7280;
}
.cell-head {
@@ -629,11 +649,11 @@ const balanceAmountClass = computed(() => {
}
.cell-label {
color: var(--text);
color: #1A1A2E;
}
.cell-chevron {
color: var(--text-muted);
color: #6B7280;
font-size: 20px;
line-height: 1;
font-weight: 300;
@@ -651,8 +671,8 @@ const balanceAmountClass = computed(() => {
}
.rules-cell .rules-body {
padding: 0 16px 14px;
border-bottom: 1px solid var(--border);
padding: 0 14px 12px;
border-bottom: 1px solid #E5E7EB;
}
.lang-segment {
@@ -666,43 +686,43 @@ const balanceAmountClass = computed(() => {
align-items: center;
justify-content: center;
gap: 4px;
min-height: 34px;
padding: 0 6px;
min-height: 30px;
padding: 0 5px;
border-radius: 6px;
border: 1px solid var(--border);
background: #0a0a0a;
color: var(--text-muted);
border: 1px solid #E5E7EB;
background: #FFFFFF;
color: #6B7280;
font-size: 12px;
font-weight: 700;
}
.lang-opt.active {
border-color: var(--border-gold-soft);
color: var(--primary-light);
background: rgba(212, 175, 55, 0.1);
border-color: #003D6B;
color: #003D6B;
background: rgba(0, 61, 107, 0.06);
}
.logout-btn {
width: 100%;
margin-top: 12px;
min-height: 44px;
padding: 0 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--danger);
font-size: 14px;
margin-top: 10px;
min-height: 40px;
padding: 0 14px;
border-radius: 8px;
border: 1px solid #DC2626;
background: #FFFFFF;
color: #DC2626;
font-size: 13px;
font-weight: 700;
}
.logout-btn:active {
background: rgba(255, 69, 58, 0.08);
background: rgba(220, 38, 38, 0.06);
}
.rules-body {
font-size: 12px;
line-height: 1.55;
color: var(--text-muted);
color: #6B7280;
}
.rules-body p {

134
apps/player/src/views/RechargeHistoryView.vue
View File

@@ -411,23 +411,24 @@ function auditStepCount(order: DepositOrder) {
<style scoped>
.recharge-history-page { padding: 0 16px 24px; }
.page-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.page-header h2 { margin: 0; font-size: 17px; font-weight: 700; }
.back-btn { background: none; border: none; color: var(--primary-light); 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; }
.page-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: #1A1A2E; }
.back-btn { background: none; border: none; color: #003D6B; font-size: 24px; cursor: pointer; padding: 0 8px; }
.recharge-btn { background: none; border: none; color: #003D6B; font-size: 13px; cursor: pointer; font-weight: 600; }
.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; }
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-card {
background: linear-gradient(135deg, #1a1810 0%, #1f1b0e 40%, #16140c 100%);
border: 1px solid rgba(212, 175, 55, 0.2);
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 16px;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.order-card:active {
opacity: 0.92;
@@ -437,69 +438,66 @@ function auditStepCount(order: DepositOrder) {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
background: linear-gradient(90deg, transparent, #003D6B, transparent);
}
.order-card.rejected {
background: #141414;
border-color: rgba(245, 108, 108, 0.22);
background: #FFFFFF;
border-color: rgba(220, 38, 38, 0.25);
}
.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 {
background: none;
-webkit-background-clip: unset;
background-clip: unset;
color: #bbb;
color: #6B7280;
}
.order-card.rejected .info-label {
color: #888;
color: #6B7280;
}
.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.method-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.method-badge.bank { background: rgba(30, 58, 95, 0.6); color: #66b1ff; }
.method-badge.usdt { background: rgba(26, 58, 42, 0.6); color: #67c23a; }
.method-badge.bank { background: rgba(0, 61, 107, 0.08); color: #005B9F; }
.method-badge.usdt { background: rgba(5, 150, 105, 0.08); color: #059669; }
.status-badge { font-size: 12px; font-weight: 700; }
.status-pending { color: #e6a23c; }
.status-approved { color: #67c23a; }
.status-rejected { color: #f56c6c; }
.status-pending { color: #F8971F; }
.status-approved { color: #059669; }
.status-rejected { color: #DC2626; }
.order-body { }
.order-amount {
font-size: 22px;
font-weight: 900;
margin-bottom: 4px;
background: linear-gradient(135deg, #f0d060, #d4a830);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
color: #003D6B;
}
.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; }
.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; }
.time-row { display: flex; justify-content: space-between; align-items: center; }
.time-label { font-size: 11px; color: #888; }
.time-value { font-size: 11px; color: #aaa; font-variant-numeric: tabular-nums; }
.time-label { font-size: 11px; color: #6B7280; }
.time-value { font-size: 11px; color: #1A1A2E; font-variant-numeric: tabular-nums; }
.order-remark {
font-size: 12px;
color: rgba(212, 175, 55, 0.8);
background: rgba(212, 175, 55, 0.06);
color: #003D6B;
background: rgba(0, 61, 107, 0.04);
padding: 6px 10px;
border-radius: 6px;
margin-top: 6px;
border-left: 2px solid rgba(212, 175, 55, 0.3);
border-left: 2px solid #003D6B;
line-height: 1.45;
word-break: break-word;
}
.reject-reason {
margin-top: 8px;
font-size: 12px;
color: #c07070;
color: #DC2626;
background: transparent;
padding: 6px 0 0;
border-radius: 0;
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;
word-break: break-word;
}
@@ -510,16 +508,16 @@ function auditStepCount(order: DepositOrder) {
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(212, 175, 55, 0.12);
border-top: 1px solid #E5E7EB;
}
.card-detail-summary {
font-size: 11px;
color: rgba(212, 175, 55, 0.65);
color: #6B7280;
font-weight: 600;
}
.card-detail-link {
font-size: 11px;
color: var(--primary-light);
color: #003D6B;
font-weight: 700;
white-space: nowrap;
}
@@ -532,7 +530,7 @@ function auditStepCount(order: DepositOrder) {
background: none;
text-align: right;
font-size: 11px;
color: var(--primary-light);
color: #003D6B;
font-weight: 700;
cursor: pointer;
}
@@ -550,7 +548,7 @@ function auditStepCount(order: DepositOrder) {
.end-hint {
text-align: center;
font-size: 12px;
color: #555;
color: #6B7280;
font-weight: 600;
padding: 16px 0 4px;
letter-spacing: 0.03em;
@@ -560,7 +558,7 @@ function auditStepCount(order: DepositOrder) {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0, 0, 0, 0.48);
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: flex-end;
justify-content: center;
@@ -573,12 +571,12 @@ function auditStepCount(order: DepositOrder) {
max-width: 480px;
max-height: min(88vh, 720px);
overflow-y: auto;
background: #141414;
border: 1px solid #2a2a2a;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-bottom: none;
border-radius: 14px 14px 0 0;
padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.28);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
.detail-close {
@@ -590,7 +588,7 @@ function auditStepCount(order: DepositOrder) {
border: none;
border-radius: 50%;
background: transparent;
color: #777;
color: #6B7280;
font-size: 13px;
cursor: pointer;
line-height: 1;
@@ -600,15 +598,15 @@ function auditStepCount(order: DepositOrder) {
margin: 0 28px 12px 0;
font-size: 15px;
font-weight: 600;
color: #e8e8e8;
color: #1A1A2E;
}
.detail-summary {
margin-bottom: 14px;
padding: 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid #222;
background: #F5F7FA;
border: 1px solid #E5E7EB;
}
.detail-summary-head {
@@ -622,13 +620,13 @@ function auditStepCount(order: DepositOrder) {
font-size: 22px;
font-weight: 700;
margin-bottom: 4px;
color: var(--primary-light, #d4af37);
color: #003D6B;
letter-spacing: -0.02em;
}
.detail-method-name {
font-size: 12px;
color: #999;
color: #6B7280;
font-weight: 500;
margin-bottom: 8px;
}
@@ -643,13 +641,13 @@ function auditStepCount(order: DepositOrder) {
.detail-label {
font-size: 12px;
color: #888;
color: #6B7280;
flex-shrink: 0;
}
.detail-value {
font-size: 12px;
color: #ccc;
color: #1A1A2E;
text-align: right;
word-break: break-word;
}
@@ -657,12 +655,12 @@ function auditStepCount(order: DepositOrder) {
.detail-summary .order-remark {
margin-top: 8px;
font-size: 11px;
color: #999;
color: #6B7280;
background: transparent;
padding: 6px 0 0;
border-radius: 0;
border: none;
border-top: 1px solid #222;
border-top: 1px solid #E5E7EB;
line-height: 1.45;
word-break: break-word;
}
@@ -670,12 +668,12 @@ function auditStepCount(order: DepositOrder) {
.detail-summary .reject-reason {
margin-top: 8px;
font-size: 11px;
color: #b08888;
color: #DC2626;
background: transparent;
padding: 6px 0 0;
border-radius: 0;
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;
word-break: break-word;
}
@@ -688,14 +686,14 @@ function auditStepCount(order: DepositOrder) {
.detail-audit {
margin-top: 2px;
padding-top: 12px;
border-top: 1px solid #222;
border-top: 1px solid #E5E7EB;
}
.detail-audit-title {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
color: #888;
color: #6B7280;
letter-spacing: 0.02em;
}
@@ -723,7 +721,7 @@ function auditStepCount(order: DepositOrder) {
width: 5px;
height: 5px;
border-radius: 50%;
background: #555;
background: #E5E7EB;
flex-shrink: 0;
}
@@ -732,7 +730,7 @@ function auditStepCount(order: DepositOrder) {
width: 1px;
min-height: 10px;
margin: 3px 0;
background: #2a2a2a;
background: #E5E7EB;
}
.audit-step-body {
@@ -755,13 +753,13 @@ function auditStepCount(order: DepositOrder) {
.audit-step-title {
font-size: 12px;
font-weight: 600;
color: #ccc;
color: #1A1A2E;
line-height: 1.35;
}
.audit-step-time {
font-size: 10px;
color: #666;
color: #6B7280;
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
@@ -770,7 +768,7 @@ function auditStepCount(order: DepositOrder) {
.audit-step-actor {
margin: 2px 0 0;
font-size: 11px;
color: #999;
color: #6B7280;
line-height: 1.4;
}
@@ -778,14 +776,14 @@ function auditStepCount(order: DepositOrder) {
margin: 3px 0 0;
font-size: 11px;
font-weight: 500;
color: #7eb87a;
color: #059669;
line-height: 1.4;
}
.audit-step-note {
margin: 4px 0 0;
font-size: 11px;
color: #888;
color: #6B7280;
line-height: 1.45;
word-break: break-word;
}
@@ -803,35 +801,35 @@ function auditStepCount(order: DepositOrder) {
.audit-step-box--reject {
background: transparent;
border: 1px solid rgba(245, 108, 108, 0.22);
border: 1px solid rgba(220, 38, 38, 0.22);
}
.audit-step-box-label {
font-size: 10px;
font-weight: 500;
color: #c07070;
color: #DC2626;
letter-spacing: 0.01em;
}
.audit-step-box-text {
font-size: 11px;
color: #b08888;
color: #DC2626;
}
.audit-step--submitted .audit-dot {
background: #c9a227;
background: #003D6B;
}
.audit-step--approved .audit-dot {
background: #5fad5a;
background: #059669;
}
.audit-step--rejected .audit-dot {
background: #d06060;
background: #DC2626;
}
.audit-step--revoked .audit-dot {
background: #777;
background: #6B7280;
}
.audit-step--reopened .audit-dot {
background: #c9a227;
background: #003D6B;
}
.modal-reapply-btn {

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

@@ -368,9 +368,9 @@ onMounted(fetchMethods);
display: flex; align-items: center; justify-content: space-between;
padding: 8px 0 12px;
}
.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; }
.back-btn { background: none; border: none; color: var(--primary-light); 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; }
.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1A1A2E; }
.back-btn { background: none; border: none; color: #003D6B; font-size: 22px; cursor: pointer; padding: 0 6px; }
.history-btn { background: none; border: none; color: #003D6B; font-size: 12px; cursor: pointer; font-weight: 600; }
.state { display: flex; justify-content: center; padding: 48px; }
@@ -380,24 +380,24 @@ onMounted(fetchMethods);
border-radius: 8px;
font-size: 12px;
line-height: 1.45;
color: #ffd0d0;
background: rgba(245, 108, 108, 0.12);
border: 1px solid rgba(245, 108, 108, 0.25);
color: #DC2626;
background: rgba(220, 38, 38, 0.06);
border: 1px solid rgba(220, 38, 38, 0.2);
}
.type-tabs {
display: flex; margin-bottom: 12px;
border-radius: 6px; overflow: hidden;
border: 1px solid rgba(212, 175, 55, 0.2);
border: 1px solid #E5E7EB;
}
.tab {
flex: 1; padding: 8px; border: none;
background: rgba(20, 20, 20, 0.8);
color: var(--text-muted); font-weight: 700; font-size: 13px;
background: #FFFFFF;
color: #6B7280; font-weight: 700; font-size: 13px;
cursor: pointer; transition: all 0.2s;
}
.tab.active {
background: var(--primary-light); color: #000;
background: #003D6B; color: #FFFFFF;
}
.methods-list {
@@ -405,19 +405,19 @@ onMounted(fetchMethods);
}
.method-pill {
display: flex; flex-direction: column; gap: 1px;
background: rgba(20, 20, 20, 0.8);
border: 1px solid var(--border);
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 6px; padding: 6px 12px;
text-align: left; cursor: pointer;
transition: border-color 0.15s;
}
.method-pill.selected {
border-color: var(--primary-light);
background: rgba(212, 175, 55, 0.06);
border-color: #0066CC;
background: rgba(0, 102, 204, 0.04);
}
.pill-name { font-weight: 700; font-size: 12px; color: var(--text); }
.pill-sub { font-size: 10px; color: var(--text-muted); }
.empty-methods { text-align: center; color: var(--text-muted); padding: 20px; font-size: 12px; }
.pill-name { font-weight: 700; font-size: 12px; color: #1A1A2E; }
.pill-sub { font-size: 10px; color: #6B7280; }
.empty-methods { text-align: center; color: #6B7280; padding: 20px; font-size: 12px; }
.bank-card-wrap {
margin-bottom: 16px;
@@ -433,15 +433,9 @@ onMounted(fetchMethods);
flex-direction: column;
justify-content: space-between;
overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(212, 175, 55, 0.22), transparent 55%),
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(212, 175, 55, 0.1), transparent 50%),
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);
background: linear-gradient(135deg, #003D6B 0%, #005B9F 50%, #003D6B 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.bank-card-shine {
@@ -450,9 +444,9 @@ onMounted(fetchMethods);
background: linear-gradient(
115deg,
transparent 30%,
rgba(255, 255, 255, 0.04) 45%,
rgba(255, 255, 255, 0.08) 50%,
rgba(255, 255, 255, 0.04) 55%,
rgba(255, 255, 255, 0.03) 45%,
rgba(255, 255, 255, 0.06) 50%,
rgba(255, 255, 255, 0.03) 55%,
transparent 70%
);
pointer-events: none;
@@ -461,7 +455,7 @@ onMounted(fetchMethods);
.bank-card-deco {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.12);
border: 1px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
}
@@ -470,7 +464,7 @@ onMounted(fetchMethods);
height: 180px;
right: -60px;
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 {
@@ -478,7 +472,7 @@ onMounted(fetchMethods);
height: 100px;
right: 40px;
bottom: 20px;
border-color: rgba(212, 175, 55, 0.08);
border-color: rgba(255, 255, 255, 0.05);
}
.bank-card-top,
@@ -498,10 +492,9 @@ onMounted(fetchMethods);
.bank-card-bank {
font-size: 15px;
font-weight: 800;
color: #fff;
color: #FFFFFF;
text-align: right;
letter-spacing: 0.5px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
line-height: 1.3;
max-width: 58%;
word-break: break-all;
@@ -520,8 +513,7 @@ onMounted(fetchMethods);
font-size: clamp(15px, 4.2vw, 19px);
font-weight: 700;
letter-spacing: 0.14em;
color: var(--primary-light);
text-shadow: 0 0 12px rgba(240, 216, 117, 0.25);
color: #FFFFFF;
word-break: break-all;
line-height: 1.3;
}
@@ -531,9 +523,9 @@ onMounted(fetchMethods);
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid rgba(212, 175, 55, 0.35);
background: rgba(0, 0, 0, 0.25);
color: var(--primary-light);
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.1);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -548,7 +540,7 @@ onMounted(fetchMethods);
.bank-card-copy:active {
opacity: 0.65;
background: rgba(212, 175, 55, 0.12);
background: rgba(255, 255, 255, 0.2);
}
.bank-card-bottom {
@@ -570,15 +562,14 @@ onMounted(fetchMethods);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
color: rgba(255, 255, 255, 0.6);
}
.bank-card-holder-name {
font-size: 14px;
font-weight: 700;
color: #fff;
color: #FFFFFF;
letter-spacing: 0.04em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
word-break: break-all;
}
@@ -587,87 +578,89 @@ onMounted(fetchMethods);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
color: rgba(212, 175, 55, 0.55);
color: rgba(255, 255, 255, 0.5);
font-style: italic;
}
.method-info {
background: rgba(17, 17, 17, 0.9);
background: #FFFFFF;
border-radius: 8px; padding: 10px 12px;
margin-bottom: 12px;
border: 1px solid var(--border);
border: 1px solid #E5E7EB;
}
.info-row {
display: flex; justify-content: space-between; align-items: baseline;
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-label { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.info-label { font-size: 11px; color: #6B7280; flex-shrink: 0; }
.info-value {
font-size: 13px; font-weight: 600;
word-break: break-all; text-align: right;
max-width: 60%;
color: #1A1A2E;
}
.copyable {
cursor: pointer; color: var(--primary-light);
cursor: pointer; color: #0066CC;
display: inline-flex; align-items: center; gap: 4px;
}
.copyable:active { opacity: 0.6; }
.copy-icon { width: 14px; height: 14px; flex-shrink: 0; }
.qr-container { display: flex; justify-content: center; padding: 8px 0 4px; }
.qr-image { width: 140px; height: 140px; object-fit: contain; border-radius: 6px; background: #fff; padding: 6px; }
.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 label {
display: block; font-size: 11px; font-weight: 700;
color: var(--text-muted); margin-bottom: 4px;
color: #6B7280; margin-bottom: 4px;
}
.amount-input {
width: 100%; padding: 10px; background: #111;
border: 1px solid var(--border); border-radius: 6px;
color: #fff; font-size: 16px; font-weight: 700;
width: 100%; padding: 10px; background: #FFFFFF;
border: 1px solid #E5E7EB; border-radius: 6px;
color: #1A1A2E; font-size: 16px; font-weight: 700;
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 {
border: 1px dashed rgba(212, 175, 55, 0.3);
border: 1px dashed #0066CC;
border-radius: 6px; padding: 16px;
text-align: center; position: relative;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
background: rgba(0, 102, 204, 0.02);
}
.upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-hint { font-size: 12px; color: var(--text-muted); }
.compress-hint { font-size: 12px; color: var(--primary-light); }
.upload-hint { font-size: 12px; color: #6B7280; }
.compress-hint { font-size: 12px; color: #003D6B; }
.screenshot-preview { position: relative; display: inline-block; }
.screenshot-preview img { max-width: 100%; max-height: 160px; border-radius: 6px; }
.remove-btn {
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%;
cursor: pointer; font-size: 11px;
}
.btn-submit {
width: 100%; padding: 12px;
background: linear-gradient(135deg, #f0d060, #d4a830);
color: #000; border: none; border-radius: 6px;
background: #003D6B;
color: #FFFFFF; border: none; border-radius: 6px;
font-size: 14px; font-weight: 800;
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; }
.success-state { text-align: center; padding: 40px 16px; }
.success-icon { font-size: 40px; color: #67c23a; margin-bottom: 10px; }
.success-state h3 { margin: 0 0 6px; font-size: 16px; }
.order-no { font-family: monospace; color: var(--primary-light); font-size: 13px; margin: 4px 0; }
.success-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
.success-icon { font-size: 40px; color: #059669; margin-bottom: 10px; }
.success-state h3 { margin: 0 0 6px; font-size: 16px; color: #1A1A2E; }
.order-no { font-family: monospace; color: #003D6B; font-size: 13px; margin: 4px 0; }
.success-hint { font-size: 12px; color: #6B7280; margin-bottom: 20px; }
.btn-primary {
background: linear-gradient(135deg, #f0d060, #d4a830);
color: #000; border: none; border-radius: 6px;
background: #003D6B;
color: #FFFFFF; border: none; border-radius: 6px;
padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
}
</style>

47
apps/player/src/views/RegisterView.vue
View File

@@ -227,7 +227,7 @@ const fieldError = () => {
align-items: center;
justify-content: flex-end;
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-position: center top;
background-repeat: no-repeat;
@@ -240,7 +240,11 @@ const fieldError = () => {
display: flex;
flex-direction: column;
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 {
@@ -257,7 +261,7 @@ const fieldError = () => {
justify-content: center;
gap: 10px;
border-radius: inherit;
background: rgba(8, 8, 8, 0.72);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(2px);
pointer-events: all;
}
@@ -266,7 +270,7 @@ const fieldError = () => {
margin: 0;
font-size: 13px;
font-weight: 700;
color: rgba(240, 216, 117, 0.95);
color: #003D6B;
letter-spacing: 0.04em;
}
@@ -281,7 +285,7 @@ const fieldError = () => {
margin: 0 0 2px;
font-size: 16px;
font-weight: 800;
color: #fff;
color: #1A1A2E;
text-align: center;
}
@@ -297,7 +301,7 @@ const fieldError = () => {
label {
font-size: 10px;
color: var(--text-muted);
color: #6B7280;
font-weight: 600;
letter-spacing: 0.03em;
}
@@ -305,28 +309,29 @@ label {
.optional-tag {
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.4);
color: #6B7280;
}
.field-input {
width: 100%;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border: 1px solid #E5E7EB;
border-radius: 6px;
background: #0d0d0d;
color: var(--text);
background: #FFFFFF;
color: #1A1A2E;
font-size: 14px;
font-family: inherit;
}
.field-input::placeholder {
color: rgba(255, 255, 255, 0.32);
color: rgba(107, 114, 128, 0.6);
}
.field-input:focus {
outline: none;
border-color: #555;
border-color: #0066CC;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}
.inline-row {
@@ -344,10 +349,10 @@ label {
flex-shrink: 0;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border: 1px solid #E5E7EB;
border-radius: 6px;
background: #141414;
color: var(--text);
background: #F5F7FA;
color: #003D6B;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
@@ -381,14 +386,14 @@ label {
padding: 8px 14px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.55);
color: #003D6B;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.btn-skip:active {
color: rgba(255, 255, 255, 0.75);
color: #005B9F;
}
.btn-skip-light {
@@ -399,20 +404,20 @@ label {
padding: 8px 16px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.45);
color: #6B7280;
font-size: 13px;
font-weight: 300;
font-weight: 400;
cursor: pointer;
white-space: nowrap;
}
.btn-skip-light:active {
color: rgba(255, 255, 255, 0.65);
color: #003D6B;
}
.error {
margin: 0;
color: var(--danger);
color: #DC2626;
font-size: 12px;
font-weight: 600;
line-height: 1.3;

38
apps/player/src/views/WalletDetailView.vue
View File

@@ -238,7 +238,7 @@ const pullIndicatorStyle = () => ({
.back-btn {
background: none;
border: none;
color: var(--primary-light, #d4af37);
color: #003D6B;
font-size: 15px;
font-weight: 700;
padding: 4px 0 8px;
@@ -273,16 +273,16 @@ const pullIndicatorStyle = () => ({
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
background: #141414;
border: 1px solid #2a2a2a;
color: #6B7280;
background: #FFFFFF;
border: 1px solid #E5E7EB;
transition: all 0.2s;
}
.filter-tab.active {
color: var(--primary-light);
background: rgba(212, 175, 55, 0.1);
border-color: var(--border-gold-soft);
color: #FFFFFF;
background: #003D6B;
border-color: #003D6B;
}
.state {
@@ -291,7 +291,7 @@ const pullIndicatorStyle = () => ({
align-items: center;
gap: 12px;
text-align: center;
color: var(--text-muted);
color: #6B7280;
padding: 56px 20px;
font-weight: 600;
font-size: 14px;
@@ -312,8 +312,8 @@ const pullIndicatorStyle = () => ({
font-size: 14px;
padding: 12px 16px;
border: none;
border-bottom: 1px solid var(--border);
background: transparent;
border-bottom: 1px solid #E5E7EB;
background: #FFFFFF;
cursor: pointer;
}
@@ -322,7 +322,7 @@ const pullIndicatorStyle = () => ({
}
.tx-row:active {
background: rgba(255, 255, 255, 0.03);
background: #F5F7FA;
}
.tx-main {
@@ -341,7 +341,7 @@ const pullIndicatorStyle = () => ({
.tx-summary {
font-size: 11px;
color: var(--text-muted);
color: #6B7280;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
@@ -355,11 +355,11 @@ const pullIndicatorStyle = () => ({
margin-top: 4px;
}
.tx-type { font-weight: 700; color: var(--text); }
.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
.neg { color: var(--danger); font-weight: 700; }
.tx-time { font-size: 11px; color: var(--text-muted); }
.tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
.tx-type { font-weight: 700; color: #1A1A2E; }
.pos { color: #003D6B; font-weight: 800; font-size: 15px; }
.neg { color: #DC2626; font-weight: 700; }
.tx-time { font-size: 11px; color: #6B7280; }
.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
.sentinel {
height: 1px;
@@ -374,11 +374,11 @@ const pullIndicatorStyle = () => ({
.end-hint {
text-align: center;
font-size: 12px;
color: #555;
color: #6B7280;
font-weight: 600;
padding: 16px 0 4px;
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>

52
apps/player/src/views/WalletTransactionDetailView.vue
View File

@@ -238,7 +238,7 @@ function goCashbackDetail() {
.back-btn {
background: none;
border: none;
color: var(--primary-light, #d4af37);
color: #003D6B;
font-size: 15px;
font-weight: 700;
padding: 4px 0 8px;
@@ -251,7 +251,7 @@ function goCashbackDetail() {
.state {
text-align: center;
padding: 60px 20px;
color: #666;
color: #6B7280;
font-size: 14px;
font-weight: 600;
}
@@ -265,18 +265,19 @@ function goCashbackDetail() {
gap: 6px;
margin-bottom: 12px;
text-align: center;
background: #141414;
border: 1px solid #222;
background: #FFFFFF;
border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.hero.pos {
border-color: rgba(212, 175, 55, 0.25);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.03));
border-color: rgba(0, 61, 107, 0.2);
background: linear-gradient(135deg, rgba(0, 61, 107, 0.04), #FFFFFF);
}
.hero.neg {
border-color: rgba(224, 80, 80, 0.2);
background: linear-gradient(135deg, rgba(224, 80, 80, 0.1), rgba(224, 80, 80, 0.03));
border-color: rgba(220, 38, 38, 0.2);
background: linear-gradient(135deg, rgba(220, 38, 38, 0.04), #FFFFFF);
}
.hero-type {
@@ -284,13 +285,13 @@ function goCashbackDetail() {
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #888;
color: #6B7280;
}
.hero-summary {
font-size: 13px;
font-weight: 600;
color: #bbb;
color: #6B7280;
max-width: 100%;
word-break: break-all;
}
@@ -301,27 +302,28 @@ function goCashbackDetail() {
line-height: 1.1;
}
.hero.pos .hero-amount { color: var(--primary-light); }
.hero.neg .hero-amount { color: var(--danger); }
.hero.pos .hero-amount { color: #003D6B; }
.hero.neg .hero-amount { color: #DC2626; }
.hero-time {
font-size: 11px;
color: #555;
color: #6B7280;
font-weight: 600;
}
.section {
background: #141414;
border: 1px solid #222;
border-radius: 12px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.section-title {
font-size: 12px;
font-weight: 800;
color: #888;
color: #6B7280;
letter-spacing: 0.04em;
margin-bottom: 10px;
}
@@ -338,18 +340,18 @@ function goCashbackDetail() {
align-items: flex-start;
gap: 12px;
font-size: 13px;
color: #aaa;
color: #6B7280;
}
.sum-row span:last-child {
color: #f0f0f0;
color: #1A1A2E;
font-weight: 700;
text-align: right;
word-break: break-all;
}
.pos { color: var(--primary-light) !important; }
.neg { color: var(--danger) !important; }
.pos { color: #003D6B !important; }
.neg { color: #DC2626 !important; }
.mono {
font-family: ui-monospace, monospace;
@@ -366,9 +368,9 @@ function goCashbackDetail() {
margin-top: 12px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--border-gold-soft, rgba(212, 175, 55, 0.35));
background: rgba(212, 175, 55, 0.08);
color: var(--primary-light);
border: 1px solid #003D6B;
background: rgba(0, 61, 107, 0.04);
color: #003D6B;
font-size: 13px;
font-weight: 700;
cursor: pointer;
@@ -377,7 +379,7 @@ function goCashbackDetail() {
.tx-id {
font-family: ui-monospace, monospace;
font-size: 12px;
color: #ccc;
color: #1A1A2E;
word-break: break-all;
line-height: 1.5;
}

38
apps/player/src/views/WalletView.vue
View File

@@ -141,7 +141,7 @@ const pullIndicatorStyle = () => ({
<style scoped>
.wallet-page {
padding-bottom: 24px;
padding-bottom: 16px;
}
.pull-indicator {
@@ -158,7 +158,7 @@ const pullIndicatorStyle = () => ({
align-items: center;
gap: 12px;
text-align: center;
color: var(--text-muted);
color: #6B7280;
padding: 56px 20px;
font-weight: 600;
font-size: 14px;
@@ -176,11 +176,11 @@ const pullIndicatorStyle = () => ({
display: block;
width: 100%;
text-align: left;
font-size: 14px;
padding: 8px 12px;
font-size: 13px;
padding: 6px 10px;
border: none;
border-bottom: 1px solid var(--border);
background: transparent;
border-bottom: 1px solid #E5E7EB;
background: #FFFFFF;
cursor: pointer;
}
@@ -189,7 +189,7 @@ const pullIndicatorStyle = () => ({
}
.tx-row:active {
background: rgba(255, 255, 255, 0.03);
background: #F5F7FA;
}
.tx-main {
@@ -208,7 +208,7 @@ const pullIndicatorStyle = () => ({
.tx-summary {
font-size: 11px;
color: var(--text-muted);
color: #6B7280;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
@@ -219,31 +219,31 @@ const pullIndicatorStyle = () => ({
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
margin-top: 3px;
}
.tx-type { font-weight: 700; color: var(--text); }
.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
.neg { color: var(--danger); font-weight: 700; }
.tx-time { font-size: 11px; color: var(--text-muted); }
.tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
.tx-type { font-weight: 700; color: #1A1A2E; }
.pos { color: #003D6B; font-weight: 800; font-size: 14px; }
.neg { color: #DC2626; font-weight: 700; }
.tx-time { font-size: 11px; color: #6B7280; }
.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4px 2px;
margin-top: -8px;
padding: 0 4px 1px;
margin-top: -6px;
}
.top-bar .more-link.secondary {
color: #f0b90b;
color: #005B9F;
}
.more-link {
background: none;
border: none;
color: var(--primary-light);
color: #003D6B;
font-size: 12px;
font-weight: 600;
padding: 2px 6px;
@@ -256,5 +256,5 @@ const pullIndicatorStyle = () => ({
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>