feat(login): 优化登录注册页UI和交互体验
- 使用全屏背景图和渐变叠加提升视觉效果 - 增加登录注册切换标签及动画过渡效果 - 表单输入框增加图标和玻璃质感样式 - 调整表单布局，简化登录表单，丰富注册表单字段 - 替换原有按钮为渐变风格提升点击感 - 引入FontAwesome图标库支持图标显示 - 增加输入框聚焦和悬停状态样式 - 优化Loading状态文案展示逻辑
This commit is contained in:
@@ -1,72 +1,94 @@
|
||||
|
||||
<template>
|
||||
<div class="w-screen h-screen overflow-hidden flex">
|
||||
<div class="flex-1 bg-black">
|
||||
<el-image fit="cover" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
|
||||
style="width: 100%; height: 100%" />
|
||||
<div
|
||||
class="min-h-screen relative flex items-center justify-center bg-fixed bg-cover bg-center bg-[url('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg')]">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-[rgba(30,20,50,0.4)] to-[rgba(10,10,20,0.6)]"></div>
|
||||
|
||||
<div
|
||||
class="relative z-10 w-[400px] max-w-[92%] bg-white/10 backdrop-blur-2xl border border-white/20 rounded-2xl p-8 shadow-2xl text-white">
|
||||
<div class="text-center mb-6">
|
||||
<h2 class="text-2xl font-semibold tracking-wide mb-1">Welcome Back</h2>
|
||||
<p class="text-sm text-white/80">智慧英语 · 让学习更简单</p>
|
||||
</div>
|
||||
<div class="w-[500px] z-10 bg-white dark:bg-gray-800 p-8">
|
||||
<div class="mb-4 grid grid-cols-2 gap-2 justify-center pt-64">
|
||||
<button type="button" @click="switchMode('login')" class="w-full px-3 py-1.5 rounded text-sm"
|
||||
:class="mode === 'login' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
|
||||
登录
|
||||
</button>
|
||||
<button type="button" @click="switchMode('register')" class="w-full px-3 py-1.5 rounded text-sm"
|
||||
:class="mode === 'register' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
|
||||
注册
|
||||
</button>
|
||||
|
||||
<div class="flex justify-center mb-6 border-b border-white/10">
|
||||
<button class="px-5 py-2 text-white/70 hover:text-white transition"
|
||||
:class="mode === 'login' ? 'font-bold text-white border-b-2 border-white' : ''"
|
||||
@click="switchMode('login')">登录</button>
|
||||
<button class="px-5 py-2 text-white/70 hover:text-white transition"
|
||||
:class="mode === 'register' ? 'font-bold text-white border-b-2 border-white' : ''"
|
||||
@click="switchMode('register')">注册</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<h1 class="text-2xl font-bold" v-if="mode === 'login'">登录</h1>
|
||||
<h1 class="text-2xl font-bold" v-else>注册新用户</h1>
|
||||
<p class="text-sm text-gray-500" v-if="mode === 'login'">请输入手机号和密码进行登录</p>
|
||||
<p class="text-sm text-gray-500" v-else>请填写以下信息进行注册</p>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="formRef" class="space-y-4">
|
||||
|
||||
<el-form :model="form" :rules="rules" ref="formRef" class="mt-2">
|
||||
<el-form-item prop="phone">
|
||||
<el-input v-model="form.phone" maxlength="11" placeholder="手机号" />
|
||||
<div class="input-glass relative mb-4 w-full">
|
||||
<el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号 / 账号" />
|
||||
<i class="fas fa-user absolute left-4 top-1/2 -translate-y-1/2 text-white/80 text-lg pointer-events-none"></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<transition name="tabfade" mode="out-in">
|
||||
<div :key="mode">
|
||||
<template v-if="mode === 'login'">
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="form.password" type="password" maxlength="20" placeholder="密码" />
|
||||
<div class="input-glass relative mb-4 w-full">
|
||||
<el-input v-model="form.password" type="password" maxlength="20" placeholder="请输入密码" />
|
||||
<i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-white/80 text-lg pointer-events-none"></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item prop="name">
|
||||
<div class="input-glass relative mb-4 w-full">
|
||||
<el-input v-model="form.name" maxlength="20" placeholder="姓名" />
|
||||
<i class="fas fa-id-card absolute left-4 top-1/2 -translate-y-1/2 text-white/80 text-lg pointer-events-none"></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<div class="input-glass relative mb-4 w-full">
|
||||
<el-input v-model="form.password" type="password" maxlength="20" placeholder="设置密码" />
|
||||
<i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-white/80 text-lg pointer-events-none"></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password_repeat">
|
||||
<div class="input-glass relative mb-4 w-full">
|
||||
<el-input v-model="form.password_repeat" type="password" maxlength="20" placeholder="重复密码" />
|
||||
<i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-white/80 text-lg pointer-events-none"></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="invitationCode">
|
||||
<div class="input-glass relative mb-4 w-full">
|
||||
<el-input v-model="form.invitationCode" maxlength="6" placeholder="邀请码" />
|
||||
<i class="fas fa-ticket absolute left-4 top-1/2 -translate-y-1/2 text-white/80 text-lg pointer-events-none"></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<div class="flex items-center gap-2 w-full">
|
||||
<div class="relative mb-2 flex items-center gap-2">
|
||||
<div class="input-glass relative flex-1">
|
||||
<el-input v-model="form.code" maxlength="6" placeholder="验证码" />
|
||||
<el-button type="primary" @click="sendCode" :disabled="codeDisabled || !form.phone">
|
||||
<i class="fas fa-shield absolute left-4 top-1/2 -translate-y-1/2 text-white/80 text-lg pointer-events-none"></i>
|
||||
</div>
|
||||
<el-button class="rounded-lg bg-gradient-to-r from-blue-600 to-blue-400 text-white px-3 py-2"
|
||||
@click="sendCode" :disabled="codeDisabled || !form.phone">
|
||||
{{ codeBtnText }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</el-form>
|
||||
<div class="mt-6">
|
||||
<el-button :type="mode === 'login' ? 'success' : 'warning'" plain class="w-full" :disabled="loading"
|
||||
@click="userLogin">
|
||||
|
||||
<button
|
||||
class="w-full mt-3 px-4 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-blue-400 text-white font-semibold shadow-lg hover:-translate-y-0.5 hover:shadow-xl transition disabled:opacity-70 disabled:cursor-not-allowed"
|
||||
:disabled="loading" @click="userLogin">
|
||||
<span v-if="!loading && mode === 'login'">立即登录</span>
|
||||
<span v-if="loading && mode === 'login'">登录中...</span>
|
||||
<span v-if="!loading && mode === 'register'">立即注册</span>
|
||||
<span v-if="loading && mode === 'register'">处理中...</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-2 left-6 text-white drop-shadow">
|
||||
<h2 class="text-xl">欢迎来到智慧英语</h2>
|
||||
</button>
|
||||
</div>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -200,4 +222,26 @@ async function sendCode() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.input-glass :deep(.el-input__wrapper) {
|
||||
@apply w-full bg-white/10 border border-white/10 rounded-xl pl-10 transition;
|
||||
}
|
||||
.input-glass :deep(.el-input__wrapper:hover),
|
||||
.input-glass :deep(.el-input__wrapper.is-focus) {
|
||||
@apply bg-white/15 border-white/50;
|
||||
}
|
||||
.input-glass :deep(.el-input__inner) {
|
||||
@apply text-white placeholder:text-white/70;
|
||||
}
|
||||
.tabfade-enter-active, .tabfade-leave-active {
|
||||
transition: all .25s ease;
|
||||
}
|
||||
.tabfade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(.98);
|
||||
}
|
||||
.tabfade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px) scale(.98);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user