feat(player): 重构 PC 端登录注册布局并优化注单栏与加载态

- 新增 DesktopAuthLayout 与 MouseRippleGrid,登录/注册/忘记密码采用管理端左右卡片布局(左侧大 Logo)

- 登录页补齐 GoldSpinner 全表单加载遮罩与三语 logging_in 文案

- 注单栏与 Hub 侧栏使用 cebian.webp 背景,左侧联赛栏保持纯色
This commit is contained in:
mars
2026-07-07 14:09:54 +08:00
parent ebcfaad264
commit cca74310ed
17 changed files with 998 additions and 336 deletions

View File

@@ -1,100 +1,10 @@
<script setup lang="ts">
/**
* Desktop Register View
* Reuses the existing RegisterView form in a centered desktop auth layout.
*/
import DesktopAuthLayout from '../../components/desktop/DesktopAuthLayout.vue';
import RegisterView from '../RegisterView.vue';
</script>
<template>
<div class="desktop-auth-shell">
<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>
<DesktopAuthLayout wide>
<RegisterView desktop />
</DesktopAuthLayout>
</template>
<style scoped>
.desktop-auth-shell {
display: flex;
min-height: 100vh;
background: var(--desktop-bg);
}
.auth-brand {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0d0d0d 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(212,175,55,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(212,175,55,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>