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

fix(player): login footer layout, lang switcher z-index, profile.settings i18n; dev Vite proxy reads API PORT

Browse Source
This commit is contained in:
Mars
2026-06-23 14:41:15 +08:00
parent 9cef985974
commit 0c5541fc57
9 changed files with 108 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,7 +102,8 @@ function goLogin() {
<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">
<h2 class="form-title">{{ t('auth.forgot_password_title') }}</h2>
<div class="field">
@@ -175,7 +176,8 @@ function goLogin() {
<button type="button" class="btn-skip" @click="goLogin">
{{ t('auth.back_to_login') }}
</button>
</form>
</form>
</div>
</div>
</template>
@@ -184,7 +186,7 @@ function goLogin() {
position: absolute;
top: max(12px, env(safe-area-inset-top));
right: 16px;
z-index: 2;
z-index: 10;
}
.login-page {
@@ -217,14 +219,15 @@ function goLogin() {
z-index: 0;
}
.login-page > * {
.login-stack {
position: relative;
z-index: 1;
width: 100%;
max-width: 320px;
}
.login-form {
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 8px;

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

@@ -89,7 +89,8 @@ 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"
@@ -151,13 +152,16 @@ function goRegister() {
<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>
@@ -166,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 {
@@ -178,7 +182,7 @@ function goRegister() {
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 34vh 20px calc(15vh + max(28px, env(safe-area-inset-bottom)));
padding: 34vh 20px max(20px, env(safe-area-inset-bottom));
background-color: var(--bg-body);
background-size: cover;
background-position: center top;
@@ -199,20 +203,32 @@ function goRegister() {
z-index: 0;
}
.login-page > * {
.login-stack {
position: relative;
z-index: 1;
}
.login-form {
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 8px;
}
.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;
@@ -315,14 +331,14 @@ label {
}
.btn-skip {
margin-top: 2px;
padding: 8px 14px;
padding: 6px 14px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
}
.btn-skip:active {
@@ -330,11 +346,7 @@ label {
}
.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: rgba(255, 255, 255, 0.45);
@@ -342,6 +354,7 @@ label {
font-weight: 300;
cursor: pointer;
white-space: nowrap;
text-align: center;
}
.btn-skip-light:active {

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

@@ -105,7 +105,8 @@ const fieldError = () => {
<div class="login-lang">
<LocaleSwitcher compact />
</div>
<form @submit.prevent="submit" class="login-form ps-gold-frame" :class="{ 'is-busy': loading }">
<div class="login-stack">
<form @submit.prevent="submit" class="login-form ps-gold-frame" :class="{ 'is-busy': loading }">
<div v-if="loading" class="form-busy-overlay" aria-hidden="true">
<GoldSpinner :size="40" :active="true" />
<p class="form-busy-text">{{ t('auth.registering') }}</p>
@@ -199,13 +200,16 @@ const fieldError = () => {
</span>
<span v-else>{{ t('auth.register_btn') }}</span>
</button>
<button type="button" class="btn-skip" :disabled="loading" @click="goLogin">
{{ t('auth.have_account') }}
</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" :disabled="loading" @click="goLogin">
{{ t('auth.have_account') }}
</button>
<button type="button" class="btn-skip-light" :disabled="loading" @click="continueBrowsing">
{{ t('auth.continue_browsing') }}
</button>
</div>
</div>
</div>
</template>
@@ -214,7 +218,7 @@ const fieldError = () => {
position: absolute;
top: max(12px, env(safe-area-inset-top));
right: 16px;
z-index: 2;
z-index: 10;
}
.login-page {
@@ -226,7 +230,7 @@ const fieldError = () => {
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
padding: 30vh 16px max(20px, env(safe-area-inset-bottom));
background-color: var(--bg-body);
background-size: cover;
background-position: center top;
@@ -247,21 +251,33 @@ const fieldError = () => {
z-index: 0;
}
.login-page > * {
.login-stack {
position: relative;
z-index: 1;
}
.login-form {
position: relative;
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 8px;
}
.login-form {
position: relative;
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;
}
.login-form.is-busy {
pointer-events: none;
}
@@ -403,14 +419,14 @@ label {
}
.btn-skip {
margin-top: 2px;
padding: 8px 14px;
padding: 6px 14px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
}
.btn-skip:active {
@@ -418,11 +434,7 @@ label {
}
.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: rgba(255, 255, 255, 0.45);
@@ -430,6 +442,7 @@ label {
font-weight: 300;
cursor: pointer;
white-space: nowrap;
text-align: center;
}
.btn-skip-light:active {