Mars
7f563326d8
桌面端： - 新增 DesktopWalletPageHeader 统一钱包子导航，移除重复大标题 - 重构我的余额页布局（居中窄卡片 + 余额/统计/账户设置） - 新增 DesktopBetSlipRail 可折叠注单侧栏，优化 BetSlipPanel 交互 - 首页 upcoming 赛事卡片支持胜平负/让球/大小球快速下注 - 优化 DesktopShell 布局、3D 轮播、各账户/消息/充值页面样式 移动端： - 重构 MobileWalletView 钱包页 UI - 修复 MarketSelectionsPanel 下注区黑色背景问题 - 新增 PageBackButton 与 useSmartBack 智能返回逻辑 - 优化公告/消息/个人中心等详情页导航 API： - listUpcomingPublished 支持 includeMarkets，返回首页卡片所需核心玩法
123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* Desktop Register View
|
||
* Reuses the existing RegisterView form in a centered desktop auth layout.
|
||
*/
|
||
import { RouterLink } from 'vue-router';
|
||
import { useI18n } from 'vue-i18n';
|
||
import RegisterView from '../RegisterView.vue';
|
||
|
||
const { t } = useI18n();
|
||
</script>
|
||
|
||
<template>
|
||
<div class="desktop-auth-shell">
|
||
<RouterLink to="/" class="auth-back-link">{{ t('common.back') }}</RouterLink>
|
||
<div class="auth-brand">
|
||
<div class="brand-inner">
|
||
<img src="/logo.png" alt="TheBet365" class="brand-logo" />
|
||
<h1 class="brand-name">THEBET365</h1>
|
||
<p class="brand-tagline">加入我们，开始精彩体育投注</p>
|
||
</div>
|
||
</div>
|
||
<div class="auth-card-wrap">
|
||
<div class="auth-card">
|
||
<RegisterView />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.desktop-auth-shell {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
background: var(--desktop-bg);
|
||
position: relative;
|
||
}
|
||
|
||
.auth-back-link {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 24px;
|
||
z-index: 2;
|
||
color: var(--text-muted);
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.auth-back-link:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
.auth-brand {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card) 50%, var(--bg-card) 100%);
|
||
border-right: 1px solid var(--desktop-border);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.auth-brand::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(0, 102, 204,0.06) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.brand-inner {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 40px;
|
||
}
|
||
|
||
.brand-logo {
|
||
width: 64px;
|
||
height: 64px;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 4px 16px rgba(0, 102, 204,0.3));
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 28px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.12em;
|
||
color: var(--primary-light);
|
||
margin: 0;
|
||
}
|
||
|
||
.brand-tagline {
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
margin: 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.auth-card-wrap {
|
||
width: 520px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px;
|
||
background: var(--desktop-bg);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.auth-card {
|
||
width: 100%;
|
||
max-width: 420px;
|
||
}
|
||
</style>
|