feat(theme-4): fix dark backgrounds, quick bet, inbox spacing, customer service theme
This commit is contained in:
mars
233
apps/player/src/components/desktop/DesktopAuthLayout.vue
Normal file
233
apps/player/src/components/desktop/DesktopAuthLayout.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* PC auth shell — admin-style card: large logo left, form slot right.
|
||||
*/
|
||||
import MouseRippleGrid from '../MouseRippleGrid.vue';
|
||||
import LocaleSwitcher from '../LocaleSwitcher.vue';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
/** Wider card for register / forgot-password forms */
|
||||
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>
|
||||
<MouseRippleGrid />
|
||||
|
||||
<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(135deg, #001A33 0%, #001A33 50%, #002244 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.desktop-auth-page::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ambient-glow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
pointer-events: none;
|
||||
opacity: 0.12;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ambient-glow--1 {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
top: 10%;
|
||||
left: 12%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
|
||||
animation: ambient-drift-1 12s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.ambient-glow--2 {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
bottom: 12%;
|
||||
right: 12%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
|
||||
animation: ambient-drift-2 16s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes ambient-drift-1 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: translate(30px, -20px) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ambient-drift-2 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-25px, 15px) scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
background: linear-gradient(
|
||||
165deg,
|
||||
rgba(255, 255, 255, 0.06) 0%,
|
||||
rgba(255, 255, 255, 0.03) 28%,
|
||||
rgba(10, 37, 64, 0.55) 65%,
|
||||
rgba(0, 20, 40, 0.75) 100%
|
||||
);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
||||
0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.auth-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.28) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.auth-card--wide {
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.form-lang {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
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: 28px 20px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.03) 0%,
|
||||
rgba(0, 26, 51, 0.3) 100%
|
||||
);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.logo-large {
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 4px 24px rgba(255, 255, 255, 0.25));
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
padding: 22px 28px 28px;
|
||||
}
|
||||
|
||||
@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 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.logo-large {
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
padding: 18px 20px 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ambient-glow--1,
|
||||
.ambient-glow--2 {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user