feat: 新增登录页面插图资源和组件
This commit is contained in:
1
apps/web-antd/public/login-illustration.svg
Normal file
1
apps/web-antd/public/login-illustration.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 615 KiB |
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user