From 0f18c4e3a4943dd27e2eeb381e3c00e46218077b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 19 二月 2025 17:54:47 +0800
Subject: [PATCH] 铜材料下单-联调
---
src/views/login.vue | 230 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 130 insertions(+), 100 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index 6e2d936..107f37f 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,63 +1,69 @@
<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"
+ >
+ <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>
+ <!-- 搴曢儴 -->
+<!-- <div class="el-login-footer">-->
+<!-- <span>Copyright 漏 2018-2025 ruoyi.vip All Rights Reserved.</span>-->
+<!-- </div>-->
</div>
</template>
@@ -85,7 +91,7 @@
password: [
{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" }
],
- code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }]
+ code: [{ required: false, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }]
},
loading: false,
// 楠岃瘉鐮佸紑鍏�
@@ -156,49 +162,76 @@
</script>
<style rel="stylesheet/scss" lang="scss">
+//.login {
+// display: flex;
+// justify-content: center;
+// align-items: center;
+// height: 100%;
+// background-image: url("../assets/images/login-background.jpg");
+// background-size: cover;
+//}
.login {
+ width: 100vw;
+ height: 100vh;
display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- background-image: url("../assets/images/login-background.jpg");
- background-size: cover;
-}
-.title {
- margin: 0px auto 30px auto;
- text-align: center;
- color: #707070;
-}
-
-.login-form {
- border-radius: 6px;
- background: #ffffff;
- width: 400px;
- padding: 25px 25px 5px 25px;
- .el-input {
- height: 38px;
- input {
- height: 38px;
+ background-image: url("~@/assets/images/login.png");
+ background-size: 100% 100%;
+ .leftImg {
+ width: calc(100% - 500px);
+ height: 100%;
+ overflow: hidden;
+ img {
+ width: 100%;
+ min-height: 100%;
}
}
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 2px;
- }
-}
-.login-tip {
- font-size: 13px;
- text-align: center;
- color: #bfbfbf;
-}
-.login-code {
- width: 33%;
- height: 38px;
- float: right;
- img {
- cursor: pointer;
- vertical-align: middle;
+
+ .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;
+ }
+ }
+ }
}
}
.el-login-footer {
@@ -212,8 +245,5 @@
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
-}
-.login-code-img {
- height: 38px;
}
</style>
--
Gitblit v1.9.3