feat: 新增登录页面插图资源和组件

This commit is contained in:
lzh
2025-12-19 13:49:39 +08:00
parent 7fd767a22b
commit fc7b405805
2 changed files with 54 additions and 0 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 615 KiB

View File

@@ -0,0 +1,53 @@
<script setup lang="ts">
defineOptions({
name: 'LoginIllustration',
});
defineProps<{
alt?: string;
}>();
</script>
<template>
<div class="login-illustration-container">
<img
src="/login-illustration.svg"
:alt="alt || 'Login Illustration'"
class="animate-float w-full opacity-40"
style="max-width: none; height: auto;"
/>
</div>
</template>
<style scoped>
.login-illustration-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.login-illustration-container img {
min-width: 100%;
max-height: 100%;
object-fit: contain;
transform: scale(1.2);
}
/* 覆盖 Tailwind 的 animate-float使用更快速流畅的动画 */
.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>