From 0573f0d4fddd4aceec2a17d195b8b4532fe9cac8 Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Thu, 4 Sep 2025 15:17:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=99=BB=E5=BD=95=E9=A1=B5=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=8A=A8=E6=80=81=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-web/src/view/Login.vue    |  75 +++++++++++++++++---
 im-web/src/view/Register.vue | 133 +++++++++++++++++++++++++----------
 2 files changed, 163 insertions(+), 45 deletions(-)

diff --git a/im-web/src/view/Login.vue b/im-web/src/view/Login.vue
index f3953a8..1bc8d3a 100644
--- a/im-web/src/view/Login.vue
+++ b/im-web/src/view/Login.vue
@@ -1,5 +1,8 @@
 <template>
 	<div class="login-view">
+		<div class="decoration decoration-1"></div>
+		<div class="decoration decoration-2"></div>
+		<div class="decoration decoration-3"></div>
 		<div class="content">
 			<el-form class="form" :model="loginForm" status-icon :rules="rules" ref="loginForm"
 				@keyup.enter.native="submitForm('loginForm')">
@@ -121,10 +124,67 @@ export default {
 .login-view {
 	width: 100%;
 	height: 100%;
-	background: #E8F2FF;
-	background-size: cover;
 	box-sizing: border-box;
+	background: linear-gradient(135deg,
+			#87adeb 0%,
+			#8287ec 25%,
+			#87adeb 50%,
+			#898ee3 75%,
+			#87adeb 100%);
+	
+		/* 装饰性元素 */
+	.decoration {
+		position: absolute;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.2);
+	}
+
+	.decoration-1 {
+		width: 450px;
+		height: 450px;
+		background: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(200, 220, 240, 0.4) 100%);
+		top: -250px;
+		right: -100px;
+		animation: float 16s infinite ease-in-out;
+	}
+
+	.decoration-2 {
+		width: 400px;
+		height: 400px;
+		background: linear-gradient(135deg, rgba(200, 220, 240, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%);
+		bottom: -200px;
+		left: -100px;
+		animation: float 12s infinite ease-in-out;
+	}
+
+	.decoration-3 {
+		width: 300px;
+		height: 300px;
+		background: linear-gradient(45deg, rgba(161, 196, 253, 0.3) 0%, rgba(194, 233, 251, 0.4) 100%);
+		top: 50%;
+		right: 50px;
+		animation: float 8s infinite ease-in-out;
+	}
 
+	@keyframes float {
+		0%,
+		100% {
+			transform: translateY(0) translateX(0);
+		}
+
+		25% {
+			transform: translateY(-60px) translateX(30px);
+		}
+
+		50% {
+			transform: translateY(30px) translateX(-45px);
+		}
+
+		75% {
+			transform: translateY(-30px) translateX(-30px);
+		}
+	}
+		
 
 	.content {
 		position: relative;
@@ -134,15 +194,14 @@ export default {
 		padding: 10%;
 
 		.form {
-			height: 340px;
-			width: 400px;
+			width: 360px;
+			height: 380px;
 			padding: 30px;
-			background: white;
-			opacity: 0.9;
-			box-shadow: 0px 0px 1px #ccc;
+			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+			background: rgba(255, 255, 255, 0.85);
+			backdrop-filter: blur(8px);
 			border-radius: 3%;
 			overflow: hidden;
-			border: 1px solid #ccc;
 
 			.title {
 				display: flex;
diff --git a/im-web/src/view/Register.vue b/im-web/src/view/Register.vue
index d90ca4b..cd34bc1 100644
--- a/im-web/src/view/Register.vue
+++ b/im-web/src/view/Register.vue
@@ -1,37 +1,37 @@
 <template>
 	<el-container class="register-view">
-		<div>
-			<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px"
-				class="content">
-				<div class="title">
-					<img class="logo" src="../../public/logo.png" />
-					<div>欢迎成为盒子IM的用户</div>
-				</div>
-				<el-form-item label="用户名" prop="userName">
-					<el-input type="userName" v-model="registerForm.userName" autocomplete="off" placeholder="用户名(登录使用)"
-						maxlength="20"></el-input>
-				</el-form-item>
-				<el-form-item label="昵称" prop="nickName">
-					<el-input type="nickName" v-model="registerForm.nickName" autocomplete="off" placeholder="昵称"
-						maxlength="20"></el-input>
-				</el-form-item>
-				<el-form-item label="密码" prop="password">
-					<el-input type="password" v-model="registerForm.password" autocomplete="off" placeholder="密码"
-						maxlength="20"></el-input>
-				</el-form-item>
-				<el-form-item label="确认密码" prop="confirmPassword">
-					<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"
-						placeholder="确认密码" maxlength="20"></el-input>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
-					<el-button @click="resetForm('registerForm')">清空</el-button>
-				</el-form-item>
-				<div class="to-login">
-					<router-link to="/login">已有账号,前往登录</router-link>
-				</div>
-			</el-form>
-		</div>
+		<div class="decoration decoration-1"></div>
+		<div class="decoration decoration-2"></div>
+		<div class="decoration decoration-3"></div>
+		<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px" class="content">
+			<div class="title">
+				<img class="logo" src="../../public/logo.png" />
+				<div>欢迎成为盒子IM的用户</div>
+			</div>
+			<el-form-item label="用户名" prop="userName">
+				<el-input type="userName" v-model="registerForm.userName" autocomplete="off" placeholder="用户名(登录使用)"
+					maxlength="20"></el-input>
+			</el-form-item>
+			<el-form-item label="昵称" prop="nickName">
+				<el-input type="nickName" v-model="registerForm.nickName" autocomplete="off" placeholder="昵称"
+					maxlength="20"></el-input>
+			</el-form-item>
+			<el-form-item label="密码" prop="password">
+				<el-input type="password" v-model="registerForm.password" autocomplete="off" placeholder="密码"
+					maxlength="20"></el-input>
+			</el-form-item>
+			<el-form-item label="确认密码" prop="confirmPassword">
+				<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off" placeholder="确认密码"
+					maxlength="20"></el-input>
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
+				<el-button @click="resetForm('registerForm')">清空</el-button>
+			</el-form-item>
+			<div class="to-login">
+				<router-link to="/login">已有账号,前往登录</router-link>
+			</div>
+		</el-form>
 		<icp></icp>
 	</el-container>
 </template>
@@ -131,18 +131,77 @@ export default {
 	align-items: center;
 	width: 100%;
 	height: 100%;
-	background: rgb(232, 242, 255);
+	background: linear-gradient(135deg,
+			#87adeb 0%,
+			#8287ec 25%,
+			#87adeb 50%,
+			#898ee3 75%,
+			#87adeb 100%);
+
+	/* 装饰性元素 */
+	.decoration {
+		position: absolute;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.2);
+	}
+
+	.decoration-1 {
+		width: 450px;
+		height: 450px;
+		background: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(200, 220, 240, 0.4) 100%);
+		top: -250px;
+		right: -100px;
+		animation: float 16s infinite ease-in-out;
+	}
+
+	.decoration-2 {
+		width: 400px;
+		height: 400px;
+		background: linear-gradient(135deg, rgba(200, 220, 240, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%);
+		bottom: -200px;
+		left: -100px;
+		animation: float 12s infinite ease-in-out;
+	}
+
+	.decoration-3 {
+		width: 300px;
+		height: 300px;
+		background: linear-gradient(45deg, rgba(161, 196, 253, 0.3) 0%, rgba(194, 233, 251, 0.5) 100%);
+		top: 50%;
+		right: 50px;
+		animation: float 8s infinite ease-in-out;
+	}
+
+	@keyframes float {
+
+		0%,
+		100% {
+			transform: translateY(0) translateX(0);
+		}
+
+		25% {
+			transform: translateY(-60px) translateX(30px);
+		}
+
+		50% {
+			transform: translateY(30px) translateX(-45px);
+		}
+
+		75% {
+			transform: translateY(-30px) translateX(-30px);
+		}
+	}
 
 	.content {
-		width: 500px;
+		width: 400px;
 		height: 450px;
 		padding: 20px;
-		background: white;
-		opacity: 0.9;
-		box-shadow: 0px 0px 1px #ccc;
 		border-radius: 3px;
 		overflow: hidden;
 		border-radius: 3%;
+		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+		background: rgba(255, 255, 255, 0.85);
+		backdrop-filter: blur(8px);
 
 		.title {
 			display: flex;