HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化登录界面代码

This commit is contained in:
wangsongsole 2022-08-29 10:54:56 +08:00
parent 8cc7012a18
commit 685ad20e3a
1 changed files with 81 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/pages/login/login.less
View File

@ -1,18 +1,22 @@
.loginPage{ .loginPage {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #f5f9ff; background-color: #f5f9ff;
overflow: hidden; overflow: hidden;
.zent-form-reactive{
width:60%!important; .zent-form-reactive {
} width: 60% !important;
.login-box .zent-input-wrapper.zent-input--size-normal, .login-box .zent-input{ }
width: 100%!important;
.login-box .zent-input-wrapper.zent-input--size-normal,
.login-box .zent-input {
width: 100% !important;
border-radius: 4px; border-radius: 4px;
} }
} }
.login-title{
.login-title {
width: 400px; width: 400px;
height: 40px; height: 40px;
margin: 80px auto; margin: 80px auto;
@ -20,44 +24,57 @@ overflow: hidden;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.login-title-label{
.login-title-label {
font-size: 32px; font-size: 32px;
} }
.login-title-icon img{
.login-title-icon img {
width: auto; width: auto;
height: 40px; height: 40px;
padding-right: 20px; padding-right: 20px;
} }
.login-box{
.login-box {
margin: 0 auto; margin: 0 auto;
width: 520px; width: 520px;
background-color: #fff; background-color: #fff;
box-sizing: "border-box"; box-sizing: border-box;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 0px 20px rgba(0,60,179,0.12); box-shadow: 0px 0px 5px rgba(0, 60, 179, 0.12);
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
.zent-input-wrapper.zent-input--size-normal,.zent-input{ &:hover {
box-shadow: 0px 0px 20px rgba(0, 60, 179, 0.12);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.zent-input-wrapper.zent-input--size-normal,
.zent-input {
width: 268px !important; width: 268px !important;
height: 40px !important; height: 40px !important;
} }
.zent-btn-disabled[data-zv="9.11.0"], .zent-btn-disabled[data-zv="9.11.0"][disabled]{
background-color: #f7f7f7!important; .zent-btn-disabled[data-zv="9.11.0"],
border:1px solid #e0e0e0!important; .zent-btn-disabled[data-zv="9.11.0"][disabled] {
background-color: #f7f7f7 !important;
border: 1px solid #e0e0e0 !important;
} }
} }
.loginBtn{
width: 100%!important; .loginBtn {
width: 100% !important;
width: 272px; width: 272px;
height: 41px; height: 41px;
line-height: 41px; line-height: 41px;
color: #FFF; color: #FFF;
background-color:#1e6fff; background-color: #1e6fff;
border: none; border: none;
outline: none; outline: none;
border-radius: 2px; border-radius: 2px;
@ -67,64 +84,75 @@ overflow: hidden;
cursor: pointer; cursor: pointer;
margin-bottom: 70px; margin-bottom: 70px;
margin-top: 5px; margin-top: 5px;
.login-Btntxt{
.login-Btntxt {
display: inline-block; display: inline-block;
letter-spacing:50px; letter-spacing: 50px;
text-indent: 50px; text-indent: 50px;
} }
} }
.box-title{
.box-title {
width: 100%; width: 100%;
height: 52px; height: 52px;
font-size:20px; font-size: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 40px; margin-bottom: 40px;
border-bottom: 1px solid rgba(44,114,255,0.1); border-bottom: 1px solid rgba(44, 114, 255, 0.1);
} }
.box-title>div{
.box-title>div {
width: 60%; width: 60%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content:center; justify-content: center;
} }
.box-title>div span{
.box-title>div span {
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
display: flex; display: flex;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
align-items: center; align-items: center;
&.activeLogin{
&.activeLogin {
color: #1e6fff; color: #1e6fff;
border-bottom: 2px solid #1e6fff; border-bottom: 2px solid #1e6fff;
} }
} }
.yzmcodeIpt{
.yzmcodeIpt {
height: 40px; height: 40px;
.zent-form-control[data-zv="9.11.0"]{
.zent-form-control[data-zv="9.11.0"] {
float: left; float: left;
} }
margin-bottom: 30px; margin-bottom: 30px;
display: flex; display: flex;
} }
.yzmcode{
.yzmcode {
width: 38%; width: 38%;
height: 40px; height: 40px;
float: left; float: left;
.zent-btn{
height: 100%!important; .zent-btn {
height: 100% !important;
width: 100%; width: 100%;
} }
} }
.forget{
.forget {
text-align: right; text-align: right;
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 30px; margin-top: 30px;
color: #1e6fff; color: #1e6fff;
cursor: pointer; cursor: pointer;
} }