From 09b326c07ab5467c870ef9b526504b3b9b3802c3 Mon Sep 17 00:00:00 2001
From: lbw <1192299468@qq.com>
Date: Mon, 5 Jan 2026 12:56:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(login):=20=E4=BC=98=E5=8C=96=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E6=B3=A8=E5=86=8C=E9=A1=B5UI=E5=92=8C=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用全屏背景图和渐变叠加提升视觉效果
- 增加登录注册切换标签及动画过渡效果
- 表单输入框增加图标和玻璃质感样式
- 调整表单布局，简化登录表单，丰富注册表单字段
- 替换原有按钮为渐变风格提升点击感
- 引入FontAwesome图标库支持图标显示
- 增加输入框聚焦和悬停状态样式
- 优化Loading状态文案展示逻辑
---
 enlish-vue/src/pages/Login.vue | 170 +++++++++++++++++++++------------
 1 file changed, 107 insertions(+), 63 deletions(-)

diff --git a/enlish-vue/src/pages/Login.vue b/enlish-vue/src/pages/Login.vue
index e275006..c48f862 100644
--- a/enlish-vue/src/pages/Login.vue
+++ b/enlish-vue/src/pages/Login.vue
@@ -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>
-		<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="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="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 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>
-			<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>
-				<template v-if="mode === 'login'">
-					<el-form-item prop="password">
-						<el-input v-model="form.password" type="password" maxlength="20" placeholder="密码" />
-					</el-form-item>
-				</template>
-				<template v-else>
-					<el-form-item prop="name">
-						<el-input v-model="form.name" maxlength="20" placeholder="姓名" />
-					</el-form-item>
-					<el-form-item prop="password">
-						<el-input v-model="form.password" type="password" maxlength="20" placeholder="设置密码" />
-					</el-form-item>
-					<el-form-item prop="password_repeat">
-						<el-input v-model="form.password_repeat" type="password" maxlength="20" placeholder="重复密码" />
-					</el-form-item>
-					<el-form-item prop="invitationCode">
-						<el-input v-model="form.invitationCode" maxlength="6" placeholder="邀请码" />
-					</el-form-item>
-					<el-form-item prop="code">
-						<div class="flex items-center gap-2 w-full">
-							<el-input v-model="form.code" maxlength="6" placeholder="验证码" />
-							<el-button type="primary" @click="sendCode" :disabled="codeDisabled || !form.phone">
-								{{ codeBtnText }}
-							</el-button>
-						</div>
-					</el-form-item>
-				</template>
+
+				<transition name="tabfade" mode="out-in">
+					<div :key="mode">
+						<template v-if="mode === 'login'">
+							<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>
+						</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="relative mb-2 flex items-center gap-2">
+									<div class="input-glass relative flex-1">
+										<el-input v-model="form.code" maxlength="6" placeholder="验证码" />
+										<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">
-					<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
+				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>
+			</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>