| | |
|---|
| | | <template> |
|---|
| | | <div |
|---|
| | | :class="[isDark ? 'dark' : '']" |
|---|
| | | class="flex min-h-full flex-1 overflow-x-hidden select-none" |
|---|
| | | class="fieldflow-auth flex min-h-full flex-1 overflow-x-hidden select-none" |
|---|
| | | > |
|---|
| | | <template v-if="toolbar"> |
|---|
| | | <slot name="toolbar"> |
|---|
| | |
|---|
| | | <!-- 中心认证面板 --> |
|---|
| | | <div v-if="authPanelCenter" class="relative flex-center w-full"> |
|---|
| | | <div class="login-background absolute top-0 left-0 size-full"></div> |
|---|
| | | <div class="fieldflow-grid absolute inset-0"></div> |
|---|
| | | <div class="fieldflow-orb fieldflow-orb-one absolute"></div> |
|---|
| | | <div class="fieldflow-orb fieldflow-orb-two absolute"></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="fieldflow-card relative z-10 w-full rounded-[28px] pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]" |
|---|
| | | data-side="bottom" |
|---|
| | | > |
|---|
| | | <template v-if="copyright" #copyright> |
|---|
| | |
|---|
| | | filter: blur(100px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fieldflow-auth { |
|---|
| | | background: #f3f1fb; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fieldflow-grid { |
|---|
| | | opacity: .36; |
|---|
| | | background-image: linear-gradient(#7d73c91a 1px, transparent 1px), linear-gradient(90deg, #7d73c91a 1px, transparent 1px); |
|---|
| | | background-size: 36px 36px; |
|---|
| | | mask-image: radial-gradient(circle at center, black, transparent 72%); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fieldflow-orb { border-radius: 999px; filter: blur(2px); pointer-events: none; } |
|---|
| | | .fieldflow-orb-one { top: 12%; left: 18%; width: 180px; height: 180px; background: #b9b0ff66; } |
|---|
| | | .fieldflow-orb-two { right: 14%; bottom: 9%; width: 260px; height: 260px; background: #ffb68b55; } |
|---|
| | | .fieldflow-card { border: 1px solid #fff; background: rgb(255 255 255 / 82%); backdrop-filter: blur(18px); } |
|---|
| | | .fieldflow-auth :deep(.side-content) { max-width: 420px; } |
|---|
| | | .fieldflow-auth :deep(.ant-btn-primary) { min-height: 48px; border-radius: 14px; box-shadow: 0 14px 28px rgb(92 77 190 / 24%); } |
|---|
| | | .fieldflow-auth :deep(input) { height: 50px; border-radius: 12px; border-color: #ddd9f0; background: #fff; } |
|---|
| | | |
|---|
| | | .dark { |
|---|
| | | .fieldflow-auth { background: #151329; } |
|---|
| | | .fieldflow-card { border-color: #302b54; background: rgb(28 25 53 / 88%); } |
|---|
| | | .login-background { |
|---|
| | | background: linear-gradient( |
|---|
| | | 154deg, |
|---|
