From e5454b769d44a34af423bf87ac8a740bf8c20341 Mon Sep 17 00:00:00 2001 From: Crunchy <3114200645@qq.com> Date: 星期二, 29 四月 2025 13:25:29 +0800 Subject: [PATCH] Merge branch 'dev' into dev_tides --- src/views/login.vue | 258 ++++++++++++++++++++++++++++----------------------- 1 files changed, 142 insertions(+), 116 deletions(-) diff --git a/src/views/login.vue b/src/views/login.vue index 6e2d936..ad52f89 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -1,69 +1,55 @@ <template> <div class="login"> - <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> - <h3 class="title">鑻ヤ緷鍚庡彴绠$悊绯荤粺</h3> - <el-form-item prop="username"> - <el-input - v-model="loginForm.username" - type="text" - auto-complete="off" - placeholder="璐﹀彿" - > - <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> - </el-input> - </el-form-item> - <el-form-item prop="password"> - <el-input - v-model="loginForm.password" - type="password" - auto-complete="off" - placeholder="瀵嗙爜" - @keyup.enter.native="handleLogin" - > - <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> - </el-input> - </el-form-item> - <el-form-item prop="code" v-if="captchaEnabled"> - <el-input - v-model="loginForm.code" - auto-complete="off" - placeholder="楠岃瘉鐮�" - style="width: 63%" - @keyup.enter.native="handleLogin" - > - <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> - </el-input> - <div class="login-code"> - <img :src="codeUrl" @click="getCode" class="login-code-img"/> - </div> - </el-form-item> - <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">璁颁綇瀵嗙爜</el-checkbox> - <el-form-item style="width:100%;"> - <el-button - :loading="loading" - size="medium" - type="primary" - style="width:100%;" - @click.native.prevent="handleLogin" - > - <span v-if="!loading">鐧� 褰�</span> - <span v-else>鐧� 褰� 涓�...</span> - </el-button> - <div style="float: right;" v-if="register"> - <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link> - </div> - </el-form-item> - </el-form> - <!-- 搴曢儴 --> - <div class="el-login-footer"> - <span>Copyright 漏 2018-2025 ruoyi.vip All Rights Reserved.</span> + <div class="leftImg"> + <img src="@/assets/images/loginBackground.png" alt=""> </div> + <div class="rightForm"> + <div class="title_big">娆㈣繋鎮ㄧ櫥褰曪紒</div> + <div class="title_small">瑁呭LIMS瀹為獙瀹ょ鐞嗙郴缁�</div> + <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> + <el-form-item prop="username"> + <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="璐﹀彿"> + <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> + </el-input> + </el-form-item> + <el-form-item prop="password"> + <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="瀵嗙爜" + @keyup.enter.native="handleLogin" show-password> + <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> + </el-input> + </el-form-item> +<!-- <el-form-item prop="code" v-if="captchaEnabled">--> +<!-- <el-input v-model="loginForm.code" auto-complete="off" placeholder="楠岃瘉鐮�" style="width: 63%"--> +<!-- @keyup.enter.native="handleLogin">--> +<!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />--> +<!-- </el-input>--> +<!-- <div class="login-code">--> +<!-- <img :src="codeUrl" @click="getCode" class="login-code-img" />--> +<!-- </div>--> +<!-- </el-form-item>--> +<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">璁颁綇瀵嗙爜</el-checkbox>--> + <el-form-item style="width:100%;"> + <el-button :loading="loading" size="medium" type="primary" style="width:100%;" + @click.native.prevent="handleLogin"> + <span v-if="!loading">鐧� 褰�</span> + <span v-else>鐧� 褰� 涓�...</span> + </el-button> + <div style="float: right;" v-if="register"> + <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link> + </div> + </el-form-item> + <el-button v-if="true" type="primary" plain @click="goLogin">闆嗗洟闆嗘垚鐧诲綍</el-button> + </el-form> + </div> + <!-- 搴曢儴 --> + <!-- <div class="el-login-footer">--> + <!-- <span>Copyright 漏 2018-2025 ruoyi.vip All Rights Reserved.</span>--> + <!-- </div>--> </div> </template> <script> -import { getCodeImg } from "@/api/login"; -import Cookies from "js-cookie"; +import { getCodeImg, getSsoAuthUrl } from "@/api/login"; import { encrypt, decrypt } from '@/utils/jsencrypt' export default { @@ -72,8 +58,8 @@ return { codeUrl: "", loginForm: { - username: "admin", - password: "admin123", + username: "ZT-", + password: "", rememberMe: false, code: "", uuid: "" @@ -85,7 +71,7 @@ password: [ { required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" } ], - code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }] + code: [{ required: false, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }] }, loading: false, // 楠岃瘉鐮佸紑鍏� @@ -97,17 +83,22 @@ }, watch: { $route: { - handler: function(route) { + handler: function (route) { this.redirect = route.query && route.query.redirect; }, immediate: true } }, created() { - this.getCode(); - this.getCookie(); + // this.getCode(); + // this.getCookie(); }, methods: { + async goLogin() { + await getSsoAuthUrl().then(res => { + window.location.href = res.data + }) + }, getCode() { getCodeImg().then(res => { this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled; @@ -118,9 +109,9 @@ }); }, getCookie() { - const username = Cookies.get("username"); - const password = Cookies.get("password"); - const rememberMe = Cookies.get('rememberMe') + const username = localStorage.getItem("username"); + const password = localStorage.getItem("password"); + const rememberMe = localStorage.getItem('rememberMe') this.loginForm = { username: username === undefined ? this.loginForm.username : username, password: password === undefined ? this.loginForm.password : decrypt(password), @@ -131,22 +122,22 @@ this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true; - if (this.loginForm.rememberMe) { - Cookies.set("username", this.loginForm.username, { expires: 30 }); - Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); - Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); - } else { - Cookies.remove("username"); - Cookies.remove("password"); - Cookies.remove('rememberMe'); - } + // if (this.loginForm.rememberMe) { + // localStorage.setItem("username", this.loginForm.username, { expires: 30 }); + // localStorage.setItem("password", encrypt(this.loginForm.password), { expires: 30 }); + // localStorage.setItem('rememberMe', this.loginForm.rememberMe, { expires: 30 }); + // } else { + // localStorage.removeItem("username"); + // localStorage.removeItem("password"); + // localStorage.removeItem('rememberMe'); + // } this.$store.dispatch("Login", this.loginForm).then(() => { - this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); + this.$router.push({ path: "/" }).catch(() => { }); }).catch(() => { this.loading = false; - if (this.captchaEnabled) { - this.getCode(); - } + // if (this.captchaEnabled) { + // this.getCode(); + // } }); } }); @@ -164,43 +155,81 @@ background-image: url("../assets/images/login-background.jpg"); background-size: cover; } -.title { - margin: 0px auto 30px auto; - text-align: center; - color: #707070; -} +.login { + width: 100vw; + height: 100vh; + display: flex; + background-image: url("~@/assets/images/login.png"); + background-size: 100% 100%; -.login-form { - border-radius: 6px; - background: #ffffff; - width: 400px; - padding: 25px 25px 5px 25px; - .el-input { - height: 38px; - input { - height: 38px; + .leftImg { + width: calc(100% - 500px); + height: 100%; + overflow: hidden; + + img { + width: 100%; + min-height: 100%; } } - .input-icon { - height: 39px; - width: 14px; - margin-left: 2px; + + .rightForm { + width: 600px; + overflow-y: auto; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + + .title_big { + color: #004EA2; + font-size: 40px; + margin-bottom: 8px; + } + + .title_small { + color: #004EA2; + font-size: 24px; + } + + .login-form { + border-radius: 6px; + background: #ffffff; + width: 400px; + padding: 25px 25px 5px 25px; + + .el-input { + height: 38px; + + input { + height: 38px; + } + } + + .input-icon { + height: 39px; + width: 14px; + margin-left: 2px; + } + + .login-code { + width: 33%; + height: 38px; + float: right; + + img { + cursor: pointer; + vertical-align: middle; + } + + .login-code-img { + height: 38px; + } + } + } } } -.login-tip { - font-size: 13px; - text-align: center; - color: #bfbfbf; -} -.login-code { - width: 33%; - height: 38px; - float: right; - img { - cursor: pointer; - vertical-align: middle; - } -} + .el-login-footer { height: 40px; line-height: 40px; @@ -212,8 +241,5 @@ font-family: Arial; font-size: 12px; letter-spacing: 1px; -} -.login-code-img { - height: 38px; } </style> -- Gitblit v1.9.3