修改登录页面
This commit is contained in:
parent
9475db4619
commit
033579d549
BIN
business-css/frontend/src/assets/images/bg.png
Normal file
BIN
business-css/frontend/src/assets/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
business-css/frontend/src/assets/login/password.png
Normal file
BIN
business-css/frontend/src/assets/login/password.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 343 B |
BIN
business-css/frontend/src/assets/login/username.png
Normal file
BIN
business-css/frontend/src/assets/login/username.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 452 B |
BIN
business-css/frontend/src/assets/login/valid_code.png
Normal file
BIN
business-css/frontend/src/assets/login/valid_code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 540 B |
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user