Skip to content

9
91isoft_sys_web
Commit 4a4eca3d authored by zhangyichen's avatar zhangyichen
Browse files
Options

登录回滚

parent 13b7ea1b
Hide whitespace changes
Inline Side-by-side
Showing with 35 additions and 84 deletions
src/views/login/login.vue
View file @ 4a4eca3d
<template> <template>
<div class="login"> <div class="login">
<div class="login-form1"></div> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<div class="login-form"> <!-- <img class="fy-logo" src="../../assets/image/denglu_logo.png">-->
<el-form ref="loginForm" :model="loginForm" :rules="loginRules"> <h3 class="title">信息化管理系统</h3>
<div class="fy-logo">
<img src="../../assets/image/logo_index.png">
</div>
<h3 class="title">网络设备监控管理平台</h3>
<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="请输入用户名" :maxlength="30"> <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名" :maxlength="30">
...@@ -25,7 +21,7 @@ ...@@ -25,7 +21,7 @@
<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 style="margin-bottom: 20px;margin-top: 15px;"> <el-form-item style="width:80%;margin-bottom: 20px">
<el-button <el-button
class="blue-btn" class="blue-btn"
:loading="loading" :loading="loading"
...@@ -40,11 +36,10 @@ ...@@ -40,11 +36,10 @@
<div <div
class="buttons-content" class="buttons-content"
> >
<el-checkbox v-model="loginForm.rememberMe" class="rem-code">记住用户名</el-checkbox> <el-checkbox v-model="loginForm.rememberMe" class="rem-code">记住密码</el-checkbox>
</div> </div>
</div> </div>
</el-form> </el-form>
</div>
<!-- 底部 --> <!-- 底部 -->
<div class="el-login-footer" /> <div class="el-login-footer" />
</div> </div>
...@@ -146,11 +141,8 @@ export default { ...@@ -146,11 +141,8 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../../assets/image/bg1.png"); background-image: url("../../assets/image/login-background.jpg");
background-size: cover; background-size: cover;
.el-form-item--small .el-form-item__error {
padding-top: 8px;
}
.el-input__prefix{ .el-input__prefix{
left: 14px; left: 14px;
} }
...@@ -159,78 +151,52 @@ export default { ...@@ -159,78 +151,52 @@ export default {
font-size: 16px; font-size: 16px;
} }
.el-form-item { .el-form-item {
margin-bottom: 30px; margin-bottom: 4vh;
} }
.login-form .el-input input {
height: 44px;
}
.login-form .login-form-content .el-form-item .el-input__inner {
border-radius: 6px;
}
.login-form .input-icon {
height: 44px;
}
.login-form .input-icon {
margin-left: 6px;
transform: scale(1.3, 1.5);
color: #1f6aa2;
}
} }
.fy-logo{ .fy-logo{
// position: fixed; position: fixed;
margin: 0 auto; top: 20px;
width: 76px; left: 45%;
height: 88px; width: 8vw;
img {
width: 100%;
height: 100%;
}
} }
.title { .title {
margin: 38px auto 0 auto; margin: 7vh auto 7vh auto;
text-align: center; text-align: center;
color: #fff; color: black;
font-size: 26px; font-size: 36px;
}
.login-form1 {
position: absolute;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
background: rgba(255,255,255,0.2) ;
border-radius: 15px;
width: 472px;
height: 585px;
} }
.login-form { .login-form {
position: absolute; display: flex;
//background: rgba(255,255,255,.2); flex-direction: column;
left: 50%; align-items: flex-end;
bottom: 50%; border-radius: 6px;
transform: translate(-50%, 50%); background: #ffffff no-repeat;
border-radius: 15px; background-size: 59%;
width: 472px; background-position-y: 57px;
height: 585px; width: 78vw;
padding: 41px 44px; height: 76vh;
padding: 25px 25px 5px 25px;
.login-form-content{ .login-form-content{
margin-top: 69px; position: absolute;
width: 100%; top: 40%;
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: 100%; width: 80%;
.el-input__inner{ .el-input__inner{
border-radius: 4px; border-radius: 4px;
} }
} }
.blue-btn{ .blue-btn{
width: 100%; width: 36vw;
height: 40px; height: 40px;
border-radius: 4px; border-radius: 4px;
font-size: 18px; font-size: 18px;
background-color: #1f6aa2;
border-color: #1f6aa2;
} }
} }
.el-input { .el-input {
...@@ -273,32 +239,17 @@ export default { ...@@ -273,32 +239,17 @@ export default {
} }
.buttons-content{ .buttons-content{
display: flex; display: flex;
width: 100%; width: 80%;
justify-content: space-between; justify-content: space-between;
padding: 0 14px;
.rem-code span{ .rem-code span{
color: #fff; color: $font-dark;
} }
.el-link span{ .el-link span{
color: #fff; color: $color-theme;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #fff;
} }
.rem-code span, .el-link span{ .rem-code span, .el-link span{
font-size: 16px; font-size: 16px;
} }
.el-checkbox__input.is-checked+.el-checkbox__label {
// color: #333;
}
.el-checkbox .el-checkbox__inner:hover {
// border: 1px solid #333;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #fff;
// border-color: #333;
}
.el-checkbox__inner::after {
border-color: #333;
}
} }
</style> </style>
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