From 248b86fe3c07321d840165f9a097f8030a638682 Mon Sep 17 00:00:00 2001 From: ray <1490493387@qq.com> Date: Mon, 9 Sep 2024 00:48:11 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/gitee.svg | 1 + src/assets/icons/qq.svg | 1 + src/assets/icons/wechat.svg | 1 + src/assets/images/login-image.svg | 1 + src/lang/package/en.ts | 3 + src/lang/package/zh-cn.ts | 3 + src/styles/login.scss | 72 ++++++--- src/views/login/index.vue | 258 +++++++++++++++++++----------- 8 files changed, 225 insertions(+), 115 deletions(-) create mode 100644 src/assets/icons/gitee.svg create mode 100644 src/assets/icons/qq.svg create mode 100644 src/assets/icons/wechat.svg create mode 100644 src/assets/images/login-image.svg diff --git a/src/assets/icons/gitee.svg b/src/assets/icons/gitee.svg new file mode 100644 index 00000000..c799c2f3 --- /dev/null +++ b/src/assets/icons/gitee.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/qq.svg b/src/assets/icons/qq.svg new file mode 100644 index 00000000..a59086b4 --- /dev/null +++ b/src/assets/icons/qq.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/wechat.svg b/src/assets/icons/wechat.svg new file mode 100644 index 00000000..2fc58038 --- /dev/null +++ b/src/assets/icons/wechat.svg @@ -0,0 +1 @@ + diff --git a/src/assets/images/login-image.svg b/src/assets/images/login-image.svg new file mode 100644 index 00000000..f42e56b6 --- /dev/null +++ b/src/assets/images/login-image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 7eac43b3..77e9e4f9 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -11,6 +11,8 @@ export default { login: "Login", captchaCode: "Verify Code", capsLock: "Caps Lock is On", + rememberMe: "Remember Me", + forgetPassword: "Forget Password", message: { username: { required: "Please enter Username", @@ -23,6 +25,7 @@ export default { required: "Please enter Verify Code", }, }, + otherLoginMethods: "Other login methods", }, // 导航栏国际化 navbar: { diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 36764dc9..e8093cf1 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -11,6 +11,8 @@ export default { login: "登 录", captchaCode: "验证码", capsLock: "大写锁定已打开", + rememberMe: "记住我", + forgetPassword: "忘记密码", message: { username: { required: "请输入用户名", @@ -23,6 +25,7 @@ export default { required: "请输入验证码", }, }, + otherLoginMethods: "其他登录方式", }, // 导航栏国际化 navbar: { diff --git a/src/styles/login.scss b/src/styles/login.scss index ede34896..3f4f382c 100644 --- a/src/styles/login.scss +++ b/src/styles/login.scss @@ -8,25 +8,47 @@ background: url("@/assets/images/login-background-light.jpg") no-repeat center right; - .top-bar { - position: absolute; - top: 0; - left: 0; + .login-content { display: flex; - align-items: center; - justify-content: flex-end; width: 100%; - padding: 10px; - } + min-width: 400px; + max-width: 850px; + overflow: hidden; + background-color: #fff; + border-radius: 5px; + box-shadow: var(--el-box-shadow-light); - .login-card { - width: 400px; - background: transparent; - border: none; - border-radius: 4%; + @media (width <= 768px) { + flex-direction: column; + max-width: 100%; + height: 100vh; + border-radius: 0; + box-shadow: none; + } - @media (width <= 640px) { - width: 340px; + .login-image { + display: flex; + flex: 3; + align-items: center; + justify-content: center; + background: linear-gradient(60deg, #165dff, #6aa1ff); + + @media (width <= 768px) { + display: none; + } + } + + .login-box { + display: flex; + flex: 2; + flex-direction: column; + justify-content: center; + min-width: 400px; + padding: 30px; + + @media (width <= 768px) { + width: 100%; + } } .input-wrapper { @@ -43,13 +65,6 @@ } } - .icp-info { - position: absolute; - bottom: 4px; - font-size: 12px; - text-align: center; - } - .el-form-item { background: var(--el-input-bg-color); border: 1px solid var(--el-border-color); @@ -75,7 +90,14 @@ } } -html.dark .login-container { - background: url("@/assets/images/login-background-dark.jpg") no-repeat center - right; +html.dark { + .login-container { + background: url("@/assets/images/login-background-dark.jpg") no-repeat + center right; + + .login-content { + background: transparent; + box-shadow: var(--el-box-shadow); + } + } } diff --git a/src/views/login/index.vue b/src/views/login/index.vue index e2dd4699..5067f5fe 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,115 +1,181 @@ @@ -153,6 +219,12 @@ const captchaBase64 = ref(); // 登录表单ref const loginFormRef = ref(); +const logo = ref(new URL(`../../assets/logo.png`, import.meta.url).href); + +const loginImage = ref( + new URL(`../../assets/images/login-image.svg`, import.meta.url).href +); + const loginData = ref({ username: "admin", password: "123456", @@ -263,6 +335,12 @@ function checkCapslock(event: KeyboardEvent) { } } +/** 设置登录凭证 */ +const setLoginCredentials = (username: string, password: string) => { + loginData.value.username = username; + loginData.value.password = password; +}; + onMounted(() => { getCaptcha(); });