feat(login): 重构登录页面为左右分栏现代化设计
- 采用左右分栏布局，左侧展示产品介绍，右侧为登录表单 - 新增精美的3D等距风格图标，包含平台基座、圆形中心和装饰旗帜 - 添加渐变背景和浮动粒子效果，提升视觉体验 - 实现动态主题色系统，所有视觉元素跟随系统主题色变化 - 保持响应式设计，小屏幕设备自动隐藏左侧介绍区域
This commit is contained in:
Leo
parent
8970326414
commit
2e69b2e9a0
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Login, Register, ResetPwd } from './components'
|
||||
import { useAppStore } from '@/store'
|
||||
|
||||
type IformType = 'login' | 'register' | 'resetPwd'
|
||||
const formType: Ref<IformType> = ref('login')
|
||||
@ -9,35 +10,182 @@ const formComponets = {
|
||||
resetPwd: ResetPwd,
|
||||
}
|
||||
|
||||
const appName = import.meta.env.VITE_APP_NAME
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 获取主题色
|
||||
const primaryColor = computed(() => appStore.primaryColor)
|
||||
const primaryColorHover = computed(() => appStore.theme.common.primaryColorHover)
|
||||
const primaryColorPressed = computed(() => appStore.theme.common.primaryColorPressed)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-el class="wh-full flex-center" style="background-color: var(--body-color);">
|
||||
<div class="fixed top-40px right-40px text-lg">
|
||||
<div class="h-screen w-screen overflow-hidden">
|
||||
<!-- 全局设置按钮 -->
|
||||
<div class="fixed top-6 right-6 z-50 text-lg">
|
||||
<DarkModeSwitch />
|
||||
<LangsSwitch />
|
||||
</div>
|
||||
<n-el
|
||||
class="p-4xl h-full w-full sm:w-450px sm:h-unset"
|
||||
style="background: var(--card-color);box-shadow: var(--box-shadow-1);"
|
||||
|
||||
<div class="h-full w-full flex">
|
||||
<!-- 左侧介绍区域 -->
|
||||
<div
|
||||
class="hidden lg:flex lg:w-1/2 xl:w-3/5 relative"
|
||||
:style="{
|
||||
background: `linear-gradient(135deg, ${primaryColor}, ${primaryColorPressed})`,
|
||||
}"
|
||||
>
|
||||
<div class="w-full flex flex-col items-center">
|
||||
<SvgIconsLogo class="text-6em" />
|
||||
<n-h3>{{ appName }} </n-h3>
|
||||
<transition
|
||||
name="fade-slide"
|
||||
mode="out-in"
|
||||
<div
|
||||
class="absolute inset-0"
|
||||
:style="{
|
||||
background: `linear-gradient(135deg, ${primaryColor}33, ${primaryColorHover}33)`,
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- 装饰性图案 -->
|
||||
<div class="absolute top-20 left-20 w-32 h-32 bg-white/10 rounded-full blur-xl" />
|
||||
<div class="absolute bottom-40 right-20 w-24 h-24 bg-white/10 rounded-full blur-lg" />
|
||||
<div class="absolute top-1/2 left-10 w-16 h-16 bg-white/10 rounded-full blur-md" />
|
||||
|
||||
<div class="relative z-10 flex flex-col justify-center items-center w-full px-16 text-white">
|
||||
<!-- 3D等距图标区域 -->
|
||||
<div class="mb-12">
|
||||
<div class="relative w-80 h-80 flex items-center justify-center">
|
||||
<!-- 主要3D平台 -->
|
||||
<div class="relative">
|
||||
<!-- 平台基座 -->
|
||||
<div
|
||||
class="w-64 h-20 rounded-lg transform perspective-1000 rotate-x-60 shadow-2xl relative overflow-hidden"
|
||||
:style="{
|
||||
background: `linear-gradient(90deg, ${primaryColorHover}, ${primaryColor})`,
|
||||
}"
|
||||
>
|
||||
<!-- 平台表面纹理 -->
|
||||
<div
|
||||
class="absolute inset-0"
|
||||
:style="{
|
||||
background: `linear-gradient(90deg, ${primaryColorHover}4D, ${primaryColorPressed}4D)`,
|
||||
}"
|
||||
/>
|
||||
<!-- 网格纹理 -->
|
||||
<div class="absolute inset-0 opacity-20" style="background-image: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.1) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.1) 75%); background-size: 20px 20px;" />
|
||||
</div>
|
||||
|
||||
<!-- 中央圆形平台 -->
|
||||
<div
|
||||
class="absolute top-[-40px] left-1/2 transform -translate-x-1/2 w-32 h-32 rounded-full shadow-xl border-4"
|
||||
:style="{
|
||||
background: `linear-gradient(180deg, ${primaryColor}, ${primaryColorHover})`,
|
||||
borderColor: `${primaryColorHover}80`,
|
||||
}"
|
||||
>
|
||||
<!-- 内圈发光效果 -->
|
||||
<div
|
||||
class="absolute inset-2 rounded-full"
|
||||
:style="{
|
||||
background: `linear-gradient(180deg, ${primaryColorHover}, ${primaryColorPressed})`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-4 rounded-full animate-pulse"
|
||||
:style="{
|
||||
background: `linear-gradient(180deg, ${primaryColorHover}, rgba(255,255,255,0.9))`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 左侧旗帜 -->
|
||||
<div
|
||||
class="absolute top-[-80px] left-8 w-2 h-20 rounded-full shadow-lg"
|
||||
:style="{
|
||||
background: `linear-gradient(180deg, ${primaryColorPressed}, ${primaryColorHover})`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 left-2 w-12 h-8 rounded-r transform -skew-y-12 shadow-md"
|
||||
:style="{
|
||||
background: `linear-gradient(90deg, ${primaryColorHover}, ${primaryColor})`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧旗帜 -->
|
||||
<div
|
||||
class="absolute top-[-70px] right-12 w-2 h-16 rounded-full shadow-lg"
|
||||
:style="{
|
||||
background: `linear-gradient(180deg, ${primaryColorPressed}, ${primaryColorHover})`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 right-2 w-10 h-6 rounded-l transform skew-y-12 shadow-md"
|
||||
:style="{
|
||||
background: `linear-gradient(90deg, ${primaryColor}, ${primaryColorHover})`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 装饰性云朵 -->
|
||||
<div class="absolute top-[-60px] left-[-20px] w-8 h-8 bg-white/30 rounded-full" />
|
||||
<div class="absolute top-[-50px] left-[-15px] w-6 h-6 bg-white/20 rounded-full" />
|
||||
<div class="absolute top-[-70px] right-[-10px] w-6 h-6 bg-white/25 rounded-full" />
|
||||
</div>
|
||||
|
||||
<!-- 浮动粒子效果 -->
|
||||
<div class="absolute top-10 left-10 w-2 h-2 bg-white/60 rounded-full animate-bounce" style="animation-delay: 0s; animation-duration: 2s;" />
|
||||
<div class="absolute top-20 right-16 w-1.5 h-1.5 bg-white/40 rounded-full animate-bounce" style="animation-delay: 0.5s; animation-duration: 2.5s;" />
|
||||
<div class="absolute bottom-20 left-20 w-1 h-1 bg-white/50 rounded-full animate-bounce" style="animation-delay: 1s; animation-duration: 3s;" />
|
||||
<div class="absolute bottom-16 right-8 w-2 h-2 bg-white/30 rounded-full animate-bounce" style="animation-delay: 1.5s; animation-duration: 2s;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文字内容 -->
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-bold mb-4 leading-tight">
|
||||
开箱即用的大型中后台管理系统
|
||||
</h1>
|
||||
<p class="text-xl text-blue-100 max-w-md leading-relaxed">
|
||||
工程化、高可拓、高性能的前端模板
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧登录区域 -->
|
||||
<div class="w-full lg:w-1/2 xl:w-2/5 bg-white dark:bg-gray-900 flex items-center justify-center p-8">
|
||||
<div class="w-full max-w-md">
|
||||
<transition name="fade-slide" mode="out-in">
|
||||
<component
|
||||
:is="formComponets[formType]"
|
||||
v-model="formType"
|
||||
class="w-85%"
|
||||
class="w-full"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</n-el>
|
||||
|
||||
<div />
|
||||
</n-el>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.perspective-1000 {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.rotate-x-60 {
|
||||
transform: rotateX(60deg);
|
||||
}
|
||||
|
||||
.fade-slide-enter-active,
|
||||
.fade-slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user