This commit is contained in:
南思 2023-07-07 16:28:25 +08:00
parent 5d2fd4741d
commit 1923dc7cab
1 changed files with 43 additions and 34 deletions

View File

@ -6,41 +6,34 @@
<div class="login_image"></div>
<div class="auto">
<span class="auto_title"> 登录 </span>
<el-form
:model="data"
size="medium"
ref="formRef"
@keyup.enter.native="handleSubmit"
>
<el-form :model="data" size="medium" ref="formRef" @keyup.enter.native="handleSubmit">
<el-row :span="22">
<el-form-item prop="user">
<el-input
v-model="data.user"
style="width: 100%; margin-bottom: 20px"
placeholder="帐号"
prefix-icon="User"
></el-input>
<el-input v-model="data.user" style="width: 100%; margin-bottom: 20px" placeholder="帐号"
prefix-icon="User"></el-input>
</el-form-item>
</el-row>
<el-row :span="22">
<el-form-item prop="password">
<el-input
v-model="data.password"
style="width: 100%; margin-bottom: 48px"
type="password"
placeholder="密码"
prefix-icon="Lock"
show-password
>
<el-input v-model="data.password" style="width: 100%; margin-bottom: 20px" type="password" placeholder="密码"
prefix-icon="Lock" show-password>
</el-input>
</el-form-item>
</el-row>
<el-button
class="login-btn-submit"
type="primary"
@click="handleSubmit()"
:loading="loading"
>
<div style="display: flex; align-items: center;margin-bottom: 30px;">
<el-row :span="21">
<el-form-item prop="password">
<el-input v-model="data.password" style="width: 100%; margin-right: 20px;" type="password" placeholder="验证码"
prefix-icon="Paperclip" >
</el-input>
</el-form-item>
</el-row>
<el-form-item prop="password">
<img src="@/assets/images/login_bg.png" class="codeStyle" @click="handleCode">
</el-form-item>
</div>
<el-button class="login-btn-submit" type="primary" @click="handleSubmit()" :loading="loading">
<span class="info1">&nbsp;</span>
</el-button>
</el-form>
@ -65,7 +58,10 @@ const data = reactive({
});
const loading = ref(false);
const formRef = ref();
const handleCode = () =>{
console.log('111111111');
}
const handleSubmit = async () => {
formRef.value.validate(async (valid) => {
if (valid) {
@ -103,10 +99,12 @@ const handleSubmit = async () => {
.auto {
.el-row {
width: 100%;
.el-form-item {
width: 100%;
}
}
.el-input__inner {
width: 100%;
height: 40px;
@ -118,10 +116,14 @@ const handleSubmit = async () => {
background-color: #fff;
box-shadow: none;
}
.el-form-item__content {
-webkit-user-select: none; /*谷歌 /Chrome*/
-moz-user-select: none; /*火狐/Firefox*/
-ms-user-select: none; /*IE 10+*/
-webkit-user-select: none;
/*谷歌 /Chrome*/
-moz-user-select: none;
/*火狐/Firefox*/
-ms-user-select: none;
/*IE 10+*/
user-select: none;
width: 100%;
}
@ -133,7 +135,11 @@ const handleSubmit = async () => {
.main {
height: 100vh;
width: 100%;
.codeStyle{
width: 100px;
height: 44px;
cursor: pointer;
}
.login {
position: relative;
background: url(@/assets/images/login_bg_3.png);
@ -176,7 +182,6 @@ const handleSubmit = async () => {
.auto {
z-index: 4;
height: 350px;
width: 436px;
position: absolute;
padding: 58px 32px;
@ -227,22 +232,26 @@ const handleSubmit = async () => {
top: 50%;
transform: translate(-50%, -60%);
}
.main .auto {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.main .login {
background-size: 100% 100%;
}
}
@media screen and (max-width: 662px) {
.main .login .login_image {
width: 100%;
transform: translate(-56%, -60%);
}
}
@media screen and (max-width: 420px) {
.main .auto {
width: 100%;