style: 代码格式化调整

- 应用 linter 和 prettier 格式化规则
This commit is contained in:
lzh
2025-12-19 13:54:09 +08:00
parent 53f0595786
commit b14bd96cb2
6 changed files with 155 additions and 123 deletions

View File

@@ -43,16 +43,16 @@ yudao-ui-admin-vben/
### 技术栈
| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.x | 渐进式 JavaScript 框架 |
| Vite | 5.x | 下一代前端构建工具 |
| TypeScript | 5.x | 类型安全 |
| Ant Design Vue | 4.x | UI 组件库 |
| Pinia | 2.x | 状态管理 |
| Vue Router | 4.x | 路由管理 |
| Tailwind CSS | 3.x | 原子化 CSS |
| VueUse | 10.x | Vue Composition API 工具集 |
| 技术 | 版本 | 说明 |
| -------------- | ---- | -------------------------- |
| Vue | 3.x | 渐进式 JavaScript 框架 |
| Vite | 5.x | 下一代前端构建工具 |
| TypeScript | 5.x | 类型安全 |
| Ant Design Vue | 4.x | UI 组件库 |
| Pinia | 2.x | 状态管理 |
| Vue Router | 4.x | 路由管理 |
| Tailwind CSS | 3.x | 原子化 CSS |
| VueUse | 10.x | Vue Composition API 工具集 |
---
@@ -193,7 +193,7 @@ import {
VbenToast,
VbenDropdown,
VbenSelect,
VbenPinInput, // 验证码输入框
VbenPinInput, // 验证码输入框
VbenLoading,
VbenSpinner,
// ... 更多组件
@@ -201,6 +201,7 @@ import {
```
**常用组件**
- **按钮类**: `VbenButton`, `VbenIconButton`
- **输入类**: `VbenInput`, `VbenInputPassword`, `VbenPinInput`
- **选择类**: `VbenSelect`, `VbenDropdown`, `VbenCheckbox`, `VbenRadio`
@@ -268,23 +269,24 @@ import { VbenModal, VbenDrawer } from '@vben-core/popup-ui';
```typescript
import {
// 布局组件
AuthPageLayout, // 认证页布局
LoginIllustration, // 登录插图 (自定义新增)
AuthPageLayout, // 认证页布局
LoginIllustration, // 登录插图 (自定义新增)
// 小部件
ThemeToggle, // 主题切换
LanguageToggle, // 语言切换
ColorToggle, // 颜色选择器
LayoutToggle, // 布局切换
UserDropdown, // 用户下拉菜单
Breadcrumb, // 面包屑
GlobalSearch, // 全局搜索
LockScreen, // 锁屏
Notification, // 通知
ThemeToggle, // 主题切换
LanguageToggle, // 语言切换
ColorToggle, // 颜色选择器
LayoutToggle, // 布局切换
UserDropdown, // 用户下拉菜单
Breadcrumb, // 面包屑
GlobalSearch, // 全局搜索
LockScreen, // 锁屏
Notification, // 通知
} from '@vben/layouts';
```
**目录结构**
```
packages/effects/layouts/src/
├── authentication/ # 认证相关
@@ -309,17 +311,17 @@ packages/effects/layouts/src/
```typescript
import {
// 认证组件
AuthenticationLogin, // 登录表单
AuthenticationCodeLogin, // 验证码登录
AuthenticationLogin, // 登录表单
AuthenticationCodeLogin, // 验证码登录
AuthenticationForgetPassword, // 忘记密码
AuthenticationRegister, // 注册
AuthenticationRegister, // 注册
// 其他通用组件
Page, // 页面容器
DocAlert, // 文档提醒
Description, // 描述列表
Ellipsis, // 文本省略
Iframe, // 内嵌页面
Page, // 页面容器
DocAlert, // 文档提醒
Description, // 描述列表
Ellipsis, // 文本省略
Iframe, // 内嵌页面
// ...
} from '@vben/common-ui';
```
@@ -330,10 +332,10 @@ import {
```typescript
import {
useWatermark, // 水印
useTabs, // 标签页管理
useContentHeight, // 内容高度自适应
isTenantEnable, // 租户功能是否启用
useWatermark, // 水印
useTabs, // 标签页管理
useContentHeight, // 内容高度自适应
isTenantEnable, // 租户功能是否启用
} from '@vben/hooks';
```
@@ -366,6 +368,7 @@ $t('authentication.username');
```
**语言包位置**
- 中文: `packages/locales/src/langs/zh-CN/*.json`
- 英文: `packages/locales/src/langs/en-US/*.json`
@@ -373,10 +376,10 @@ $t('authentication.username');
```typescript
import {
useUserStore, // 用户信息
useAccessStore, // 权限信息
useTabsStore, // 标签页
useAppStore, // 应用配置
useUserStore, // 用户信息
useAccessStore, // 权限信息
useTabsStore, // 标签页
useAppStore, // 应用配置
} from '@vben/stores';
const userStore = useUserStore();
@@ -387,9 +390,9 @@ await userStore.fetchUserInfo();
```typescript
import {
preferences, // 偏好设置对象
updatePreferences, // 更新偏好设置
usePreferences, // 响应式偏好设置
preferences, // 偏好设置对象
updatePreferences, // 更新偏好设置
usePreferences, // 响应式偏好设置
} from '@vben/preferences';
// 读取
@@ -411,12 +414,12 @@ import {
// 路由工具
mapTree,
resetRoutes,
// 通用工具
formatDate,
formatDateTime,
openWindow,
// 验证器
isEmail,
isPhone,
@@ -431,7 +434,7 @@ import {
// 核心常量
LOGIN_PATH,
VBEN_DOC_URL,
// 业务枚举
DictEnum,
SystemEnum,
@@ -485,6 +488,7 @@ export default defineConfig(async () => {
```
**路径别名**
- `#/*``./src/*` (应用内部)
- `@vben/*``packages/*` (公共包)
@@ -519,7 +523,7 @@ VITE_APP_NAMESPACE=vben-web-antd
```typescript
const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
{
color: 'hsl(37 100% 52%)', // #FFA00A
color: 'hsl(37 100% 52%)', // #FFA00A
type: 'amber',
},
// ... 其他颜色
@@ -532,7 +536,7 @@ export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8);
```typescript
type BuiltinThemeType =
| 'amber' // 新增
| 'amber' // 新增
| 'default'
| 'orange'
| 'red'
@@ -545,10 +549,10 @@ type BuiltinThemeType =
```typescript
const defaultPreferences: Preferences = {
theme: {
builtinType: 'amber', // 默认主题类型
builtinType: 'amber', // 默认主题类型
colorPrimary: 'hsl(37 100% 52%)', // 主色调
mode: 'dark', // 暗色模式
radius: '0.5', // 圆角
mode: 'dark', // 暗色模式
radius: '0.5', // 圆角
},
// ...
};
@@ -564,11 +568,12 @@ const defaultPreferences: Preferences = {
.loader::after {
background: hsl(var(--primary, 37 100% 52%)); /* 橙色 #FFA00A */
}
/* 标题样式 */
.title {
font-weight: 600 !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
</style>
```
@@ -584,6 +589,7 @@ const defaultPreferences: Preferences = {
**文件**: `apps/web-antd/src/layouts/auth.vue`
**主要特性**
- ✅ 橙色渐变背景 (`rgb(218,125,68)``#FFA00A`)
- ✅ 浮动插图动画(左侧)
- ✅ 表单卡片居右
@@ -592,12 +598,9 @@ const defaultPreferences: Preferences = {
- ✅ 快速过渡动画
**组件引用**
```typescript
import {
LanguageToggle,
LoginIllustration,
ThemeToggle,
} from '@vben/layouts';
import { LanguageToggle, LoginIllustration, ThemeToggle } from '@vben/layouts';
```
**详细文档**: 参见 `apps/web-antd/LOGIN_LAYOUT_README.md`
@@ -607,12 +610,14 @@ import {
**文件**: `apps/web-antd/src/views/_core/authentication/login.vue`
**功能**
- 用户名/密码登录
- 图形验证码
- 记住密码
- 第三方登录(手机、二维码)
**表单配置示例**
```typescript
const formSchema = computed((): VbenFormSchema[] => [
{
@@ -634,16 +639,19 @@ const formSchema = computed((): VbenFormSchema[] => [
### 验证码登录/忘记密码
**文件**
- `apps/web-antd/src/views/_core/authentication/code-login.vue`
- `apps/web-antd/src/views/_core/authentication/forget-password.vue`
**验证码组件** (`VbenPinInput`):
- ✅ 验证码长度: 6 位
- ✅ 发送前验证手机号
- ✅ 倒计时 60 秒
- ✅ 失败自动清除倒计时
**修复**: `packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue`
```typescript
async function handleSend(e: Event) {
try {
@@ -722,6 +730,7 @@ pnpm update
#### 1. Vue DevTools
安装 Vue DevTools 浏览器扩展,可以查看:
- 组件树
- Pinia 状态
- 路由信息
@@ -730,6 +739,7 @@ pnpm update
#### 2. 网络请求调试
打开浏览器开发者工具 Network 面板:
- 查看 API 请求/响应
- 检查请求头/响应头
- 查看接口耗时
@@ -746,6 +756,7 @@ console.log('权限列表:', accessStore.accessCodes);
#### 4. 断点调试
在 VS Code 中配置 `.vscode/launch.json`:
```json
{
"version": "0.2.0",
@@ -764,6 +775,7 @@ console.log('权限列表:', accessStore.accessCodes);
#### 5. 性能分析
使用 Vue DevTools Performance 功能:
- 记录组件渲染时间
- 查找性能瓶颈
- 优化重渲染
@@ -775,11 +787,12 @@ console.log('权限列表:', accessStore.accessCodes);
### 1. 主题色定制 (#FFA00A - 橙色)
#### 文件: `packages/@core/preferences/src/constants.ts`
```typescript
// 新增 amber 主题色
const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
{
color: 'hsl(37 100% 52%)', // #FFA00A
color: 'hsl(37 100% 52%)', // #FFA00A
type: 'amber',
},
// ...
@@ -788,18 +801,20 @@ export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8); // 7→8
```
#### 文件: `packages/@core/base/typings/src/app.d.ts`
```typescript
type BuiltinThemeType =
| 'amber' // ← 新增
| 'default'
// ...
| 'amber' // ← 新增
| 'default';
// ...
```
#### 文件: `packages/@core/preferences/src/config.ts`
```typescript
const defaultPreferences: Preferences = {
theme: {
builtinType: 'amber', // ← 设为默认
builtinType: 'amber', // ← 设为默认
colorPrimary: 'hsl(37 100% 52%)', // ← 设为默认
// ...
},
@@ -813,6 +828,7 @@ const defaultPreferences: Preferences = {
#### 文件: `apps/web-antd/src/layouts/auth.vue`
**完全重构,新增功能**
- ✅ 橙色渐变背景 (从 `rgb(218,125,68)``#FFA00A`)
- ✅ 浮动插图组件 (左侧,带动画)
- ✅ 白色 Logo 文字,带阴影
@@ -822,30 +838,32 @@ const defaultPreferences: Preferences = {
- ✅ 保留原有 Toolbar (主题、语言切换)
**关键代码**
```vue
<template>
<div class="relative flex h-screen w-full overflow-hidden font-sans">
<!-- 橙色渐变背景 -->
<div class="absolute inset-0 bg-gradient-to-r
from-[rgb(218,125,68)]
via-[#FFA00A]/30
to-[#FFA00A]/8">
<div
class="to-[#FFA00A]/8 absolute inset-0 bg-gradient-to-r from-[rgb(218,125,68)] via-[#FFA00A]/30"
>
<!-- 浮动插图 -->
<div class="absolute -left-[5%] top-1/2
hidden h-[48rem] w-[65%] -translate-y-1/2 lg:block">
<div
class="absolute -left-[5%] top-1/2 hidden h-[48rem] w-[65%] -translate-y-1/2 lg:block"
>
<LoginIllustration :alt="appName" />
</div>
</div>
<!-- Logo - 白色字体 -->
<div class="absolute left-4 top-4">
<img :src="logo" :alt="appName" />
<span class="text-xl font-semibold text-white
drop-shadow-[0_2px_4px_rgba(0,0,0,0.3)]">
<span
class="text-xl font-semibold text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.3)]"
>
{{ appName }}
</span>
</div>
<!-- 登录卡片 - 右侧居中 -->
<div class="flex w-full flex-1 items-center justify-end">
<div class="w-full md:w-[480px] lg:mr-[10%]">
@@ -868,6 +886,7 @@ const defaultPreferences: Preferences = {
```
#### 备份文件: `apps/web-antd/src/layouts/auth-original.vue`
保留了原始布局,可随时切换回去。
---
@@ -877,6 +896,7 @@ const defaultPreferences: Preferences = {
#### 文件: `packages/effects/layouts/src/authentication/icons/login-illustration.vue`
**新建组件**
```vue
<script setup lang="ts">
defineOptions({
@@ -893,7 +913,7 @@ defineProps<{
<img
src="/login-illustration.svg"
:alt="alt || 'Login Illustration'"
class="animate-float w-full opacity-40"
class="w-full animate-float opacity-40"
/>
</div>
</template>
@@ -905,7 +925,8 @@ defineProps<{
}
@keyframes float-smooth {
0%, 100% {
0%,
100% {
transform: scale(1.2) translateY(0);
}
50% {
@@ -916,6 +937,7 @@ defineProps<{
```
#### 文件: `packages/effects/layouts/src/authentication/index.ts`
```typescript
export { default as AuthPageLayout } from './authentication.vue';
export { default as LoginIllustration } from './icons/login-illustration.vue'; // ← 新增导出
@@ -923,6 +945,7 @@ export * from './types';
```
#### 静态资源: `apps/web-antd/public/login-illustration.svg`
插图 SVG 文件放置在 public 目录。
---
@@ -932,6 +955,7 @@ export * from './types';
#### 文件: `apps/web-antd/src/views/_core/authentication/login.vue`
**修改内容**
- ✅ 移除内部标题,使用组件默认标题
- ✅ 新增"其他登录方式"分隔线
- ✅ 图标按钮样式统一
@@ -939,12 +963,13 @@ export * from './types';
- ✅ 多语言支持
**其他登录方式**
```vue
<template>
<div class="mt-8">
<!-- 分隔线 -->
<div class="relative mb-6 flex justify-center text-xs">
<span class="bg-background relative z-10 px-3">
<span class="relative z-10 bg-background px-3">
{{ $t('authentication.otherLoginMethods') }}
</span>
<div class="absolute inset-0 flex items-center">
@@ -956,22 +981,20 @@ export * from './types';
<div class="flex justify-center gap-8">
<!-- 手机登录 -->
<button
class="flex size-12 items-center justify-center
rounded-2xl border bg-slate-50
transition-all hover:scale-110 hover:shadow-md"
@click="$router.push('/auth/code-login')">
class="flex size-12 items-center justify-center rounded-2xl border bg-slate-50 transition-all hover:scale-110 hover:shadow-md"
@click="$router.push('/auth/code-login')"
>
<svg><!-- 手机图标 --></svg>
</button>
<!-- 二维码登录 -->
<button
class="flex size-12 items-center justify-center
rounded-2xl border bg-slate-50
transition-all hover:scale-110 hover:shadow-md"
@click="$router.push('/auth/qrcode-login')">
class="flex size-12 items-center justify-center rounded-2xl border bg-slate-50 transition-all hover:scale-110 hover:shadow-md"
@click="$router.push('/auth/qrcode-login')"
>
<svg><!-- 二维码图标 --></svg>
</button>
<!-- 微信登录 (已注释) -->
<!-- <button ...>...</button> -->
</div>
@@ -1009,12 +1032,13 @@ async function handleSend(e: Event) {
```
#### 文件: `apps/web-antd/src/views/_core/authentication/forget-password.vue`
#### 文件: `apps/web-antd/src/views/_core/authentication/code-login.vue`
**修改**: 验证码长度从 4 位改为 6 位。
```typescript
const CODE_LENGTH = 6; // 4 → 6
const CODE_LENGTH = 6; // 4 → 6
```
---
@@ -1022,6 +1046,7 @@ const CODE_LENGTH = 6; // 4 → 6
### 6. 国际化新增
#### 文件: `packages/locales/src/langs/zh-CN/authentication.json`
```json
{
"otherLoginMethods": "或使用以下方式登录",
@@ -1031,6 +1056,7 @@ const CODE_LENGTH = 6; // 4 → 6
```
#### 文件: `packages/locales/src/langs/en-US/authentication.json`
```json
{
"otherLoginMethods": "Or sign in with",
@@ -1045,29 +1071,32 @@ const CODE_LENGTH = 6; // 4 → 6
#### 文件: `internal/vite-config/src/plugins/inject-app-loading/default-loading.html`
**问题**:
**问题**:
- Loading 动画颜色先蓝后橙(闪烁)
- 标题字体粗细变化
**修复**:
```html
<style data-app-loading="inject-css">
/* 修改主题色回退值为橙色 */
.loader::before {
background: hsl(var(--primary, 37 100% 52%) / 50%); /* 蓝色 → 橙色 */
}
.loader::after {
background: hsl(var(--primary, 37 100% 52%)); /* 蓝色 → 橙色 */
}
/* 锁定标题样式 */
.title {
font-weight: 600 !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
color: rgb(0 0 0 / 85%) !important;
}
.dark .title {
color: #fff !important;
}
@@ -1094,7 +1123,7 @@ const CODE_LENGTH = 6; // 4 → 6
### 我要修改...
| 需求 | 文件位置 |
|------|---------|
| --- | --- |
| **登录页布局** | `apps/web-antd/src/layouts/auth.vue` |
| **登录表单** | `apps/web-antd/src/views/_core/authentication/login.vue` |
| **验证码登录** | `apps/web-antd/src/views/_core/authentication/code-login.vue` |
@@ -1111,20 +1140,23 @@ const CODE_LENGTH = 6; // 4 → 6
### 常见问题
#### Q: 如何切换回原始登录布局?
A: 修改路由配置,将 `auth.vue` 改为 `auth-original.vue`
#### Q: 如何添加新的主题色?
A: 参见 [主题定制](#主题定制) 章节。
#### Q: 修改 Loading 页面后不生效?
A: 必须重启开发服务器 (`Ctrl+C` 然后 `pnpm dev`)。
#### Q: 如何自定义登录插图?
A: 替换 `apps/web-antd/public/login-illustration.svg` 文件。
#### Q: 验证码长度如何修改?
A: 修改对应页面的 `CODE_LENGTH` 常量。
---

View File

@@ -23,4 +23,3 @@ const logoDark = computed(() => preferences.logo.sourceDark);
<!-- <template #toolbar></template> -->
</AuthPageLayout>
</template>

View File

@@ -1,11 +1,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
import {
LanguageToggle,
LoginIllustration,
ThemeToggle,
} from '@vben/layouts';
import { LanguageToggle, LoginIllustration, ThemeToggle } from '@vben/layouts';
import { preferences, usePreferences } from '@vben/preferences';
const appName = computed(() => preferences.app.name);
@@ -22,7 +18,7 @@ const { isDark } = usePreferences();
<div class="absolute inset-0 z-0 size-full">
<!-- 橙色渐变背景 - 从左到右依次变淡 -->
<div
class="absolute inset-0 size-full bg-gradient-to-r from-[rgb(218,125,68)] via-[#FFA00A]/30 to-[#FFA00A]/8 dark:from-[rgb(218,125,68)] dark:via-[#FFA00A]/40 dark:to-[#FFA00A]/12"
class="to-[#FFA00A]/8 dark:to-[#FFA00A]/12 absolute inset-0 size-full bg-gradient-to-r from-[rgb(218,125,68)] via-[#FFA00A]/30 dark:from-[rgb(218,125,68)] dark:via-[#FFA00A]/40"
>
<!-- 浮动插图 - 左侧区域 -->
<div
@@ -51,7 +47,7 @@ const { isDark } = usePreferences();
<!-- 右上角 Toolbar -->
<div
class="bg-accent absolute right-2 top-4 z-20 flex items-center gap-1 rounded-3xl px-3 py-1 lg:right-6 lg:top-6"
class="absolute right-2 top-4 z-20 flex items-center gap-1 rounded-3xl bg-accent px-3 py-1 lg:right-6 lg:top-6"
>
<LanguageToggle v-if="preferences.widget.languageToggle" />
<ThemeToggle v-if="preferences.widget.themeToggle" />
@@ -64,7 +60,7 @@ const { isDark } = usePreferences();
<!-- 登录卡片 - 响应式居中/靠右 -->
<div class="w-full md:w-[480px] lg:mr-[10%]">
<div
class="bg-background relative overflow-hidden rounded-[2.5rem] p-8 shadow-[0_30px_60px_-15px_rgba(255,160,10,0.2)] dark:shadow-[0_30px_60px_-15px_rgba(255,160,10,0.3)]"
class="relative overflow-hidden rounded-[2.5rem] bg-background p-8 shadow-[0_30px_60px_-15px_rgba(255,160,10,0.2)] dark:shadow-[0_30px_60px_-15px_rgba(255,160,10,0.3)]"
>
<!-- 登录表单 - RouterView 渲染实际的登录组件 -->
<div class="login-form-container">
@@ -79,7 +75,7 @@ const { isDark } = usePreferences();
<!-- 遇到问题 -->
<div class="mt-6 text-center">
<span class="text-muted-foreground text-xs">
<span class="text-xs text-muted-foreground">
{{ $t('authentication.contactSupport') }}
<a
href="#"

View File

@@ -185,12 +185,14 @@ const formSchema = computed((): VbenFormSchema[] => {
<div class="mt-8">
<div class="relative mb-6 flex justify-center text-xs text-slate-400">
<span
class="bg-background dark:bg-slate-900 relative z-10 px-3 font-medium"
class="relative z-10 bg-background px-3 font-medium dark:bg-slate-900"
>
{{ $t('authentication.otherLoginMethods') }}
</span>
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-slate-100 dark:border-slate-700"></div>
<div
class="w-full border-t border-slate-100 dark:border-slate-700"
></div>
</div>
</div>
@@ -238,7 +240,7 @@ const formSchema = computed((): VbenFormSchema[] => {
<circle cx="6.5" cy="17.5" r="1" fill="currentColor" />
</svg>
</button>
<!-- 微信扫码登录 -->
<!-- <button
class="flex size-12 items-center justify-center rounded-2xl border border-slate-100 bg-slate-50 text-xl text-slate-400 transition-all hover:scale-110 hover:bg-white hover:text-[#46AF35] hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"

View File

@@ -22,8 +22,8 @@
}
.loading.hidden {
pointer-events: none;
visibility: hidden;
pointer-events: none;
opacity: 0;
transition: all 0.8s ease-out;
}
@@ -34,10 +34,12 @@
.title {
margin-top: 66px;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, sans-serif !important;
font-size: 28px;
font-weight: 600 !important;
color: rgb(0 0 0 / 85%) !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
.dark .title {

View File

@@ -14,18 +14,29 @@ defineProps<{
src="/login-illustration.svg"
:alt="alt || 'Login Illustration'"
class="animate-float w-full opacity-40"
style="max-width: none; height: auto;"
style="max-width: none; height: auto"
/>
</div>
</template>
<style scoped>
@keyframes float-smooth {
0%,
100% {
transform: scale(1.2) translateY(0);
}
50% {
transform: scale(1.2) translateY(-15px);
}
}
.login-illustration-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: visible;
}
@@ -40,14 +51,4 @@ defineProps<{
.login-illustration-container img.animate-float {
animation: float-smooth 3s ease-in-out 0ms infinite;
}
@keyframes float-smooth {
0%, 100% {
transform: scale(1.2) translateY(0);
}
50% {
transform: scale(1.2) translateY(-15px);
}
}
</style>