From 5c10825622ac1c9e370541906a4a7c4b7e6662b5 Mon Sep 17 00:00:00 2001 From: "xie.bx" Date: Wed, 1 Nov 2023 22:03:43 +0800 Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E7=95=8C=E9=9D=A2=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- im-ui/src/view/Login.vue | 167 ++++++++++++++++++++++++------------ im-ui/src/view/Register.vue | 17 ++-- 2 files changed, 117 insertions(+), 67 deletions(-) diff --git a/im-ui/src/view/Login.vue b/im-ui/src/view/Login.vue index 149bdeb..e4bb06e 100644 --- a/im-ui/src/view/Login.vue +++ b/im-ui/src/view/Login.vue @@ -1,27 +1,56 @@ @@ -71,11 +100,11 @@ }) .then((data) => { // 保存密码到cookie(不安全) - this.setCookie('username',this.loginForm.userName); - this.setCookie('password',this.loginForm.password); + this.setCookie('username', this.loginForm.userName); + this.setCookie('password', this.loginForm.password); // 保存token - sessionStorage.setItem("accessToken",data.accessToken); - sessionStorage.setItem("refreshToken",data.refreshToken); + sessionStorage.setItem("accessToken", data.accessToken); + sessionStorage.setItem("refreshToken", data.refreshToken); this.$message.success("登陆成功"); this.$router.push("/home/chat"); }) @@ -90,26 +119,27 @@ getCookie(name) { let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); let arr = document.cookie.match(reg) - if (arr){ - return unescape(arr[2]); + if (arr) { + return unescape(arr[2]); } - return ''; - }, - // 设置cookie,增加到vue实例方便全局调用 - setCookie (name, value, expiredays) { - var exdate = new Date(); - exdate.setDate(exdate.getDate() + expiredays); - document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); - }, - // 删除cookie - delCookie (name) { - var exp = new Date(); - exp.setTime(exp.getTime() - 1); - var cval = this.getCookie(name); - if (cval != null){ + return ''; + }, + // 设置cookie,增加到vue实例方便全局调用 + setCookie(name, value, expiredays) { + var exdate = new Date(); + exdate.setDate(exdate.getDate() + expiredays); + document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate + .toGMTString()); + }, + // 删除cookie + delCookie(name) { + var exp = new Date(); + exp.setTime(exp.getTime() - 1); + var cval = this.getCookie(name); + if (cval != null) { document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); } - } + } }, mounted() { this.loginForm.userName = this.getCookie("username"); @@ -124,21 +154,46 @@ 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; - - .web-ruleForm { + 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; + } + + .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); - box-shadow: 0px 0px 1px #ccc; - border-radius: 5px; + width: 400px; + padding: 30px; + background: white; + opacity: 0.9; + box-shadow: 0px 0px 1px #ccc; + border-radius: 3%; overflow: hidden; - - + border: 1px solid #ccc; + .login-brand { line-height: 50px; margin: 30px 0 40px 0; @@ -148,7 +203,7 @@ text-transform: uppercase; text-align: center; } - + .register { display: flex; flex-direction: row-reverse; @@ -158,6 +213,4 @@ } } } - - - + \ No newline at end of file diff --git a/im-ui/src/view/Register.vue b/im-ui/src/view/Register.vue index d1c4907..625da63 100644 --- a/im-ui/src/view/Register.vue +++ b/im-ui/src/view/Register.vue @@ -3,7 +3,7 @@
-
欢迎注册
+
欢迎成为盒子IM的用户
@@ -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;