style(auth): 优化认证页面样式和登录组件

云

2 天以前 3e71d77e7809a709ca2015306ab7ef7935dc82d7

 src/packages/effects/layouts/src/authentication/authentication.vue

@@ -3,7 +3,7 @@

import { computed } from 'vue';

import { preferences, usePreferences } from '..\..\..\..\preferences\src';
import { preferences, usePreferences } from '../../../../preferences/src';

import { Copyright } from '../basic/copyright';
import AuthenticationFormView from './form.vue';
@@ -111,7 +111,7 @@
        <div class="login-background absolute top-0 left-0 size-full"></div>
        <div
          :key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
          class="mr-20 flex-col-center h-full"
          class="mr-20 flex-col-center h-full px-8 text-center"
          :class="{
            'enter-x': authPanelLeft,
            '-enter-x': authPanelRight,
@@ -139,7 +139,7 @@
    <div v-if="authPanelCenter" class="relative flex-center w-full">
      <div class="login-background absolute top-0 left-0 size-full"></div>
      <AuthenticationFormView
        class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
        class="w-full rounded-3xl border border-border/60 pb-20 shadow-float shadow-primary/10 md:w-2/3 md:bg-background/95 lg:w-1/2 xl:w-[36%]"
        data-side="bottom"
      >
        <template v-if="copyright" #copyright>
@@ -173,24 +173,18 @@

<style scoped>
.login-background {
  background: linear-gradient(
    154deg,
    #07070915 30%,
    hsl(var(--primary) / 30%) 48%,
    #07070915 64%
  );
  filter: blur(100px);
  background:
    radial-gradient(circle at 72% 38%, hsl(var(--primary) / 24%), transparent 42%),
    linear-gradient(145deg, hsl(var(--background-deep)) 0%, hsl(var(--background)) 100%);
  filter: blur(70px);
}

.dark {
  .login-background {
    background: linear-gradient(
      154deg,
      #07070915 30%,
      hsl(var(--primary) / 20%) 48%,
      #07070915 64%
    );
    filter: blur(100px);
    background:
      radial-gradient(circle at 72% 38%, hsl(var(--primary) / 18%), transparent 42%),
      linear-gradient(145deg, hsl(var(--background-deep)) 0%, hsl(var(--background)) 100%);
    filter: blur(70px);
  }
}
</style>