Skip to content

9
91isoft_vue_manage
Commit 244ae5df authored by 张伯涛's avatar 张伯涛
Browse files
Options

登录页面样式调整

parent 990a30d9
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 48 deletions
src/assets/themeBImage/login-background.png 0 → 100644
View file @ 244ae5df
This diff is collapsed.
src/styles/themeA/login.scss
View file @ 244ae5df
...@@ -5,12 +5,37 @@ ...@@ -5,12 +5,37 @@
height: 100%; height: 100%;
background-image: url("../../assets/image/login-background.jpg"); background-image: url("../../assets/image/login-background.jpg");
background-size: cover; background-size: cover;
.title { .login_logoRow{
margin: 7vh auto 7vh auto; padding-top: 40px;
text-align: center; display: flex;
color: black; justify-content: center;
font-size: 36px; width: 100%;
.login_form_logo{
width: 64px;
height: 64px;
background-image: url("../../assets/themeBImage/login_logo.png");
}
}
.loginTitleRow{
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
.title {
font-size: 36px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
text-align: CENTER;
color: #333333;
line-height: 28px;
}
} }
//.title {
// margin: 7vh auto 7vh auto;
// text-align: center;
// color: black;
font-size: 36px;
//}
.el-input__prefix{ .el-input__prefix{
left: 14px; left: 14px;
} }
...@@ -48,6 +73,16 @@ ...@@ -48,6 +73,16 @@
border-radius: 4px; border-radius: 4px;
} }
} }
.loginCode_formItem{
width: 80%;
display: flex;
justify-content: space-between;
//align-items: center;
line-height: 0;
.el-form-item{
width: 400px;
}
}
.blue-btn{ .blue-btn{
width: 36vw; width: 36vw;
height: 40px; height: 40px;
...@@ -73,10 +108,11 @@ ...@@ -73,10 +108,11 @@
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; //width: 33%;
height: 38px; height: 38px;
float: right; //float: right;
img { img {
height: 38px;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
......
src/styles/themeB/login.scss
View file @ 244ae5df
...@@ -3,13 +3,32 @@ ...@@ -3,13 +3,32 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../../assets/image/login-background.jpg"); background-image: url("../../assets/themeBImage/login-background.png");
background-size: cover; background-size: cover;
.title { .login_logoRow{
margin: 7vh auto 7vh auto; padding-top: 40px;
text-align: center; display: flex;
color: black; justify-content: center;
font-size: 36px; width: 100%;
.login_form_logo{
width: 64px;
height: 64px;
background-image: url("../../assets/themeBImage/login_logo.png");
}
}
.loginTitleRow{
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
.title {
font-size: 24px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
text-align: CENTER;
color: #333333;
line-height: 28px;
}
} }
.el-input__prefix{ .el-input__prefix{
left: 14px; left: 14px;
...@@ -24,41 +43,61 @@ ...@@ -24,41 +43,61 @@
} }
.login-form { .login-form {
width: 479px;
height: 540px;
background: rgba(255,255,255,0.90);
border-radius: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
border-radius: 6px;
background: #ffffff no-repeat; background: #ffffff no-repeat;
background-size: 59%; background-size: 59%;
background-position-y: 57px; background-position-y: 57px;
width: 78vw;
height: 76vh;
padding: 25px 25px 5px 25px;
.login-form-content{ .login-form-content{
position: absolute; padding-top: 35px;
top: 40%; width: 100%;
right: 28%;
width: 45%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.el-form-item{ .el-form-item{
width: 80%; width: 343px;
height: 44px;
background: #ffffff;
border: 1px solid #d9d9d9;
border-radius: 4px;
margin-bottom: 30px!important;
.el-input__inner{ .el-input__inner{
border-radius: 4px; border-radius: 4px;
} }
} }
.loginCode_formItem{
width: 343px;
display: flex;
justify-content: space-between;
.el-form-item{
width: 200px;
}
}
.loginBtn_formItem{
margin: 10px 0 20px!important;
}
.blue-btn{ .blue-btn{
width: 36vw; width: 343px;
height: 40px; height: 44px;
background: #03a487;
border-radius: 4px; border-radius: 4px;
font-size: 18px; font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
text-align: CENTER;
color: #ffffff;
line-height: 19px;
} }
} }
.el-input { .el-input {
height: 38px; height: 44px;
input { input {
height: 38px; height: 44px;
} }
} }
.input-icon { .input-icon {
...@@ -73,10 +112,9 @@ ...@@ -73,10 +112,9 @@
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; height: 44px;
height: 38px;
float: right;
img { img {
height: 44px;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
...@@ -95,9 +133,8 @@ ...@@ -95,9 +133,8 @@
} }
.login_buttons-content{ .login_buttons-content{
display: flex; display: flex;
width: 80%; width: 343px;
justify-content: space-between; justify-content: space-between;
padding: 0 14px;
.rem-code span{ .rem-code span{
color: $font-dark; color: $font-dark;
} }
......
src/views/login/login.vue
View file @ 244ae5df
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" v-loading="vLoading"> <el-form ref="loginForm" v-loading="vLoading" :model="loginForm" :rules="rules" class="login-form">
<!-- <img class="fy-logo" src="../../assets/image/denglu_logo.png">--> <!-- <img class="fy-logo" src="../../assets/image/denglu_logo.png">-->
<h3 class="title">信息化管理系统</h3> <div class="login_logoRow">
<div class="login_form_logo" />
</div>
<div class="loginTitleRow">
<div class="title">信息化管理系统</div>
</div>
<div class="login-form-content"> <div class="login-form-content">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
...@@ -20,20 +25,21 @@ ...@@ -20,20 +25,21 @@
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="captchaType === 'MATH' || captchaType === 'CHAR'" prop="code"> <div class="loginCode_formItem">
<el-input <el-form-item v-if="captchaType === 'MATH' || captchaType === 'CHAR'" prop="code">
v-model="loginForm.code" <el-input
auto-complete="off" v-model="loginForm.code"
placeholder="验证码" auto-complete="off"
style="width: 63%" placeholder="验证码"
@keypress.enter.native="handleLogin" @keypress.enter.native="handleLogin"
> >
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode"> <img class="login-codeImg" :src="codeUrl" @click="getCode">
</div> </div>
</el-form-item> </div>
<Verify <Verify
v-if="captchaType === 'BLOCK' || captchaType === 'WORD'" v-if="captchaType === 'BLOCK' || captchaType === 'WORD'"
ref="verify" ref="verify"
...@@ -42,7 +48,7 @@ ...@@ -42,7 +48,7 @@
:img-size="{ width: '330px', height: '155px' }" :img-size="{ width: '330px', height: '155px' }"
@success="capctchaCheckSuccess" @success="capctchaCheckSuccess"
/> />
<el-form-item style="width:80%;margin-bottom: 20px"> <el-form-item class="loginBtn_formItem">
<el-button <el-button
class="blue-btn" class="blue-btn"
:loading="loading" :loading="loading"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment