172 lines
3.4 KiB
Vue
172 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* PC auth shell — admin-style card: large logo left, form slot right (theme-2).
|
|
*/
|
|
import LocaleSwitcher from '../LocaleSwitcher.vue';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
wide?: boolean;
|
|
}>(),
|
|
{ wide: false },
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="desktop-auth-page">
|
|
<div class="ambient-glow ambient-glow--1" aria-hidden="true"></div>
|
|
<div class="ambient-glow ambient-glow--2" aria-hidden="true"></div>
|
|
|
|
<div class="auth-wrap">
|
|
<div class="auth-card" :class="{ 'auth-card--wide': wide }">
|
|
<div class="form-lang">
|
|
<LocaleSwitcher compact />
|
|
</div>
|
|
<div class="form-body">
|
|
<aside class="form-brand">
|
|
<img src="/logo.png" alt="TheBet365" class="logo-large" />
|
|
</aside>
|
|
<div class="form-fields">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.desktop-auth-page {
|
|
position: relative;
|
|
min-height: 100dvh;
|
|
background: linear-gradient(160deg, #f5f7fa 0%, #e8edf2 55%, #f5f7fa 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.desktop-auth-page::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(ellipse 70% 60% at 50% 20%, rgba(0, 102, 204, 0.08) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ambient-glow {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(70px);
|
|
pointer-events: none;
|
|
opacity: 0.35;
|
|
z-index: 0;
|
|
}
|
|
|
|
.ambient-glow--1 {
|
|
width: 360px;
|
|
height: 360px;
|
|
top: 8%;
|
|
left: 10%;
|
|
background: radial-gradient(circle, rgba(0, 91, 159, 0.22) 0%, transparent 70%);
|
|
}
|
|
|
|
.ambient-glow--2 {
|
|
width: 320px;
|
|
height: 320px;
|
|
bottom: 10%;
|
|
right: 8%;
|
|
background: radial-gradient(circle, rgba(0, 102, 204, 0.16) 0%, transparent 70%);
|
|
}
|
|
|
|
.auth-wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100dvh;
|
|
padding: 24px 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.auth-card {
|
|
width: 100%;
|
|
max-width: 720px;
|
|
background: var(--glass-bg-strong);
|
|
backdrop-filter: var(--blur-lg);
|
|
-webkit-backdrop-filter: var(--blur-lg);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 102, 204, 0.06);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.auth-card--wide {
|
|
max-width: 820px;
|
|
}
|
|
|
|
.form-lang {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 14px 18px 0;
|
|
}
|
|
|
|
.form-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(200px, 260px) 1fr;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.form-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-9) var(--space-8);
|
|
background: linear-gradient(180deg, rgba(0, 102, 204, 0.05) 0%, rgba(232, 237, 242, 0.65) 100%);
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
.logo-large {
|
|
width: 100%;
|
|
max-width: 220px;
|
|
height: auto;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 6px 20px rgba(0, 91, 159, 0.18));
|
|
}
|
|
|
|
.form-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
padding: 22px 24px 24px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.auth-wrap {
|
|
align-items: flex-start;
|
|
padding: 18px;
|
|
}
|
|
|
|
.auth-card,
|
|
.auth-card--wide {
|
|
max-width: 420px;
|
|
}
|
|
|
|
.form-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-brand {
|
|
padding: 20px 24px 12px;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.logo-large {
|
|
max-width: 180px;
|
|
}
|
|
|
|
.form-fields {
|
|
padding: 18px 20px 22px;
|
|
}
|
|
}
|
|
</style>
|