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

feat(player): theme-2 认证页 zt2 背景与表单样式优化

Browse Source 
- 登录/注册/找回密码使用 zt2.webp，移除暗色渐变遮罩

- 表单标题、标签、链接改为深蓝/灰色，适配 Pinnacle 浅色主题

- 更新 zt2.webp 资源文件
This commit is contained in:
Mars
2026-06-23 15:56:13 +08:00
parent 6ba541c133
commit f9d68d94ce
4 changed files with 210 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -89,12 +89,32 @@ function goRegister() {
<div class="login-lang">
<LocaleSwitcher compact />
</div>
<form @submit.prevent="submit" class="login-form ps-gold-frame">
<div class="login-stack">
<form @submit.prevent="submit" class="login-form ps-gold-frame">
<div class="auth-tabs">
<button
type="button"
class="auth-tab"
:class="{ active: loginMode === 'account' }"
@click="switchLoginMode('account')"
>
{{ t('auth.login_by_account') }}
</button>
<button
type="button"
class="auth-tab"
:class="{ active: loginMode === 'phone' }"
@click="switchLoginMode('phone')"
>
{{ t('auth.login_by_phone') }}
</button>
</div>
<div v-if="loginMode === 'account'" class="field">
<label>{{ t('auth.username') }}</label>
<input
v-model="account"
class="field-input"
class="field-input ps-gold-input"
required
autocomplete="username"
maxlength="32"
@@ -108,7 +128,7 @@ function goRegister() {
<PhoneCountrySelect v-model="countryIso" />
<input
v-model="phone"
class="field-input"
class="field-input ps-gold-input"
type="tel"
required
autocomplete="tel-national"
@@ -119,30 +139,29 @@ function goRegister() {
<div class="field">
<label>{{ t('auth.password') }}</label>
<input v-model="password" class="field-input" type="password" required autocomplete="current-password" />
<input v-model="password" class="field-input ps-gold-input" type="password" required autocomplete="current-password" />
</div>
<button type="button" class="btn-forgot" @click="goForgotPassword">
{{ t('auth.forgot_password') }}
</button>
<button type="button" class="btn-mode-switch" @click="switchLoginMode(loginMode === 'account' ? 'phone' : 'account')">
{{ loginMode === 'account' ? t('auth.login_by_phone') : t('auth.login_by_account') }}
</button>
<RobotVerify ref="captchaRef" />
<p v-if="resetSuccess" class="success">{{ t('auth.reset_success') }}</p>
<p v-if="error" class="error">{{ error }}</p>
<button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
{{ t('auth.login') }}
</button>
<button type="button" class="btn-skip" @click="goRegister">
{{ t('auth.go_register') }}
</button>
</form>
<button type="button" class="btn-skip-light" @click="continueBrowsing">
{{ t('auth.continue_browsing') }}
</button>
</form>
<div class="login-actions">
<button type="button" class="btn-skip" @click="goRegister">
{{ t('auth.go_register') }}
</button>
<button type="button" class="btn-skip-light" @click="continueBrowsing">
{{ t('auth.continue_browsing') }}
</button>
</div>
</div>
</div>
</template>
@@ -151,7 +170,7 @@ function goRegister() {
position: absolute;
top: max(12px, env(safe-area-inset-top));
right: 16px;
z-index: 2;
z-index: 10;
}
.login-page {
@@ -163,24 +182,67 @@ function goRegister() {
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 34vh 20px calc(15vh + max(28px, env(safe-area-inset-bottom)));
background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
padding: 34vh 20px max(20px, env(safe-area-inset-bottom));
background-color: var(--bg-body);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
.login-form {
.login-stack {
position: relative;
z-index: 1;
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.login-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
}
.login-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 0 14px 4px;
}
.auth-tabs {
display: flex;
gap: 6px;
margin-bottom: 4px;
padding: 4px;
border-radius: var(--radius-sm);
background: var(--bg-body);
border: 1px solid var(--border);
}
.auth-tab {
flex: 1;
min-height: 34px;
padding: 0 8px;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.auth-tab.active {
border-color: var(--primary);
color: var(--text);
background: var(--surface-accent);
}
.field {
@@ -193,18 +255,17 @@ function goRegister() {
width: 100%;
height: 36px;
padding: 0 10px;
border: 1px solid #E5E7EB;
border: 1px solid var(--border);
border-radius: 6px;
background: #FFFFFF;
color: #1A1A2E;
background: var(--bg-input);
color: var(--text);
font-size: 14px;
font-family: inherit;
}
.field-input:focus {
outline: none;
border-color: #0066CC;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
border-color: var(--border-gold-soft);
}
.inline-row {
@@ -220,41 +281,25 @@ function goRegister() {
label {
font-size: 11px;
color: #6B7280;
color: var(--text-muted);
font-weight: 600;
letter-spacing: 0.04em;
}
.btn-mode-switch {
align-self: flex-start;
margin: -2px 0 0;
padding: 0;
border: none;
background: transparent;
color: #005B9F;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.btn-forgot {
align-self: flex-end;
margin: -4px 0 0;
padding: 0;
border: none;
background: transparent;
color: #6B7280;
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.btn-forgot:active {
color: #003D6B;
}
.btn-mode-switch:active {
color: #003D6B;
color: var(--text);
}
.btn-login {
@@ -272,48 +317,45 @@ label {
}
.btn-skip {
margin-top: 2px;
padding: 8px 14px;
padding: 6px 14px;
border: none;
background: transparent;
color: #003D6B;
color: var(--primary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
}
.btn-skip:active {
color: #005B9F;
color: var(--primary-dark);
}
.btn-skip-light {
position: absolute;
bottom: calc(20px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
padding: 6px 16px;
border: none;
background: transparent;
color: #6B7280;
color: var(--text-muted);
font-size: 13px;
font-weight: 400;
cursor: pointer;
white-space: nowrap;
text-align: center;
}
.btn-skip-light:active {
color: #003D6B;
color: var(--text);
}
.error {
color: #DC2626;
color: var(--danger);
font-size: 13px;
font-weight: 600;
}
.success {
margin: 0;
color: #059669;
color: var(--success);
font-size: 12px;
font-weight: 600;
line-height: 1.4;