登录界面优化

im-ui/src/view/Login.vue

@@ -1,7 +1,36 @@
 <template>
 	<div class="login-view">
-			<el-form :model="loginForm"  status-icon :rules="rules" ref="loginForm"  label-width="60px" class="web-ruleForm" @keyup.enter.native="submitForm('loginForm')">
-				<div class="login-brand">欢迎登陆</div>
+		<div class="login-intro">
+			<!--<img src="@/assets/image/login.gif"/>-->
+			<div class="login-title"></div>
+			<div>
+				<h3>盒子IM 2.0版本正式发布：</h3>
+				<ul>
+					<li>发布uniapp移动版本，支持移动端和web端同时在线，多端消息同步</li>
+					<li>目前移动端仅兼容h5和微信小程序，后续会继续兼容更多终端类型</li>
+					<li>页面风格优化：表情包更新、自动生成文字头像等</li>
+				</ul>
+			</div>
+			<div>
+				<h3>项目依旧完全开源，可内网部署。如果项目对您有帮助,请帮忙点个star:</h3>
+			</div>
+			<div class="login-icons">
+				<a class="login-icon">
+					<img src="https://img.shields.io/badge/license-MIT-red" />
+				</a>
+				<a class="login-icon" href="https://gitee.com/bluexsx/box-im" target="_blank">
+					<img src="https://gitee.com/bluexsx/box-im/badge/star.svg" />
+				</a>
+				<a class="login-icon" href="https://gitee.com/bluexsx/box-im" target="_blank">
+					<img src="https://img.shields.io/github/stars/bluexsx/box-im.svg?style=flat&logo=GitHub" />
+				</a>
+
+			</div>
+
+		</div>
+		<el-form class="login-form" :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="60px"
+			@keyup.enter.native="submitForm('loginForm')">
+			<div class="login-brand">登陆盒子IM</div>
 			<el-form-item label="终端" prop="userName" v-show="false">
 				<el-input type="terminal" v-model="loginForm.terminal" autocomplete="off"></el-input>
 
@@ -99,7 +128,8 @@
 			setCookie(name, value, expiredays) {
 				var exdate = new Date();
 				exdate.setDate(exdate.getDate() + expiredays);
-			    document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
+				document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate
+					.toGMTString());
 			},
 			// 删除cookie
 			delCookie(name) {
@@ -124,20 +154,45 @@
 		position: relative;
 		display: flex;
 		justify-content: space-around;
+		align-items: center;
 		width: 100%;
 		height: 100%;
-		background:  linear-gradient(#65807a, #182e3c); 
+		background: rgb(232, 242, 255);
 		background-size: cover;
+		box-sizing: border-box;
+		padding: 10%;
+
+		.login-intro {
+			flex: 1;
+			height: 300px;
+			padding: 40px;
+			max-width: 600px;
+			.login-title {
+				text-align: center;
+				font-weight: 600;
+				font-size: 30px;
+			}
 
-		.web-ruleForm {
+			.login-icons {
+				display: flex;
+				align-items: center;
+
+				.login-icon {
+					padding-left: 5px;
+				}
+			}
+		}
+
+		.login-form {
 			height: 340px;
-			padding: 20px;
-			margin-top: 150px ;
-			background: rgba(255,255,255,.75);
+			width: 400px;
+			padding: 30px;
+			background: white;
+			opacity: 0.9;
 			box-shadow: 0px 0px 1px #ccc;
-			border-radius: 5px;
+			border-radius: 3%;
 			overflow: hidden;
-	
+			border: 1px solid #ccc;
 
 			.login-brand {
 				line-height: 50px;
@@ -158,6 +213,4 @@
 			}
 		}
 	}
-
-	
 </style>

im-ui/src/view/Register.vue

@@ -3,7 +3,7 @@
 		<div>
 			
 			<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px" class="web-ruleForm">
-				<div class="register-brand">欢迎注册</div>
+				<div class="register-brand">欢迎成为盒子IM的用户</div>
 				<el-form-item label="用户名" prop="userName">
 					<el-input type="userName" v-model="registerForm.userName" autocomplete="off"></el-input>
 				</el-form-item>
@@ -117,24 +117,21 @@
 		position: fixed;
 		display: flex;
 		justify-content: space-around;
+		align-items: center;
 		width: 100%;
 		height: 100%;
-		background: #466368;
-		background: linear-gradient(#65807a, #182e3c); 
-		background-size: cover;
-		-webkit-user-select: none;
-		background-size: cover;
-		
+		background: rgb(232, 242, 255);
 		
 		.web-ruleForm {
 			width: 500px;
-			height: 430px;
+			height: 450px;
 			padding: 20px;
-			margin-top: 100px ;
-			background: rgba(255,255,255,.75);
+			background: white;
+			opacity: 0.9;
 			box-shadow: 0px 0px  1px #ccc;
 			border-radius: 3px;
 			overflow: hidden;
+			border-radius: 3%;
 			
 			.register-brand {
 				line-height: 50px;