修改登录页面

This commit is contained in:
limengnan 2025-12-25 14:04:16 +08:00
parent 9475db4619
commit 033579d549
5 changed files with 24 additions and 20 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 343 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 452 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 540 B

View File

@ -1,11 +1,9 @@
<template>
<div class="login-container">
<img src="@/assets/images/bg.png" alt="" style="position: absolute;top: 0;left: 0;width: 100%;height: 100vh;object-fit: cover;">
<div class="login-container-center">
<div class="login-container-left">
<el-image
:src="loginImg"
fit="cover"
/>
</div>
<div class="login-container-right">
<el-form
@ -17,12 +15,12 @@
label-position="left"
>
<div class="title-container">
<h3 class="title">{{$t('login.title')}}</h3>
<div class="title">账号登录</div>
</div>
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-class="user" />
<img src="@/assets/login/username.png" alt="">
</span>
<el-input
ref="username"
@ -43,7 +41,7 @@
>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
<img src="@/assets/login/password.png" alt="">
</span>
<el-input
ref="passwordRef"
@ -73,7 +71,7 @@
class="login-code"
>
<span class="svg-container">
<svg-icon icon-class="valid_code" />
<img src="@/assets/login/valid_code.png" alt="">
</span>
<el-input
style="width: 60%;"
@ -102,7 +100,7 @@
size="default"
:loading="loading"
type="primary"
style="width: 100%;height: 50px; margin-bottom: 10px"
style="width: 100%;height: 50px; margin-bottom: 10px;margin-top: 10px;"
@click.prevent="handleLogin"
>{{ $t('login.login') }}
</el-button>
@ -321,11 +319,12 @@ $light_gray: #000000;
position: relative;
.title {
font-size: 36px;
color: $light_gray;
margin: 0px auto 40px auto;
font-family: '微软雅黑';
font-weight: 400;
font-style: normal;
font-size: 30px;
color: #363636;
text-align: center;
font-weight: bold;
}
.set-language {
@ -413,7 +412,7 @@ $light_gray: #eee;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
justify-content: space-between;
.login-container-left {
.el-image {
min-height: 420px;
@ -422,18 +421,23 @@ $light_gray: #eee;
}
}
.login-container-right {
width: 625px;
height: calc(100vh - 200px);
min-height: 420px;
min-width: 350px;
border-radius: 5px 5px 0;
box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
position: relative;
margin-bottom: 40px;
width: 500px;
height: 539px;
background: rgba(255, 255, 255, 1);
border: none;
border-radius: 10px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
}
}
.login-container {