github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-26 08:36:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: improve login page UI (#4142)

Browse Source 
* perf: improve login page UI

* chore: update docs
This commit is contained in:
Vben
2024-08-13 21:17:10 +08:00
committed by GitHub
parent e8dff517ba
commit 738bc456c8
27 changed files with 86 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/effects/layouts/src/authentication/authentication.vue
View File

@@ -26,7 +26,6 @@ const logoSource = computed(() => preferences.logo.source);
<!-- 头部 Logo 和应用名称 -->
<div class="absolute left-0 top-0 z-10 flex flex-1">
<div
:class="authPanelLeft ? 'lg:text-foreground' : 'lg:text-white'"
class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
>
<img :alt="appName" :src="logoSource" class="mr-2" width="42" />
@@ -38,7 +37,8 @@ const logoSource = computed(() => preferences.logo.source);
<!-- 中间内容 -->
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
<div class="bg-authentication absolute inset-0 h-full w-full">
<div class="absolute inset-0 h-full w-full bg-[#070709]">
<div class="login-background absolute left-0 top-0 size-full"></div>
<div class="flex-col-center -enter-x mr-20 h-full">
<SloganIcon :alt="appName" class="animate-float h-64 w-2/5" />
<div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
@@ -52,9 +52,10 @@ const logoSource = computed(() => preferences.logo.source);
</div>
<!-- 中心认证面板 -->
<div v-if="authPanelCenter" class="flex-center bg-authentication w-full">
<div v-if="authPanelCenter" class="flex-center relative w-full">
<div class="login-background absolute left-0 top-0 size-full"></div>
<AuthenticationFormView
class="md:bg-background w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-2/5"
class="md:bg-background shadow-primary/10 w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-[36%]"
/>
</div>
@@ -65,3 +66,15 @@ const logoSource = computed(() => preferences.logo.source);
/>
</div>
</template>
<style scoped>
.login-background {
background: linear-gradient(
154deg,
hsl(var(--background) / 15%) 30%,
hsl(var(--primary) / 15%) 48%,
hsl(var(--background) / 8%) 64%
);
filter: blur(100px);
}
</style>