html, body{
height: 100%;
font-family: 'Microsoft YaHei';
}
.background{
display:block;
position: fixed;
background: url(/wengine-auth-static/js/image/background.jpg?v=10600);
background-repeat: no-repeat;
background-size: cover;
top:0px;
height:100%;
width: 100%;
z-index: -10;
overflow: hidden;
}
.main{
text-align:center;
height:100%;
}
.header{
padding-top: 70px;
text-align: left;
margin: 0 auto;
height: 48px;
width: 70%;
}
.portal-logo{
display: inline-block;
height:100%;
vertical-align: bottom;
}
.portal-logo::after{
height: 90%;
display: inline-block;
vertical-align: middle;
content:"";
width:2px;
margin-left:20px;
background-color:white;
}
.portal-blank-logo{
display: inline-block;
height:100%;
width: 0px;
}
.portal-title{
display: inline-block;
margin-left:20px;
font-size: 33px;
color: #ffffff;
height: 100%;
vertical-align: bottom;
}
.no-logo {
margin-left:0 !important;
}
.container{
position: relative;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
width: 70%;
height:100%;
max-height:420px;
display:flex;
}
.notice-panel{
flex: 5;
float:left;
height: 100%;
background-color: rgba(0,0,0,0.66);
overflow: auto;
display:block;
border-radius:6px;
}
.mobile-notice-panel{
display:none;
}
.notice-break-line{
background-color:white;
width:100%;
margin-top:14px;
margin-bottom:20px;
height:2px;
}
.notice-box {
padding-top: 40px;
padding-left: 50px;
padding-right: 50px;
}
.notice-title{
font-weight:bold;
font-size: 21px;
color:white;
}
.notice-content{
text-align:left;
text-indent:2em;
font-size: 16px;
color:white;
line-height: 2;
}
.notice-content img{
max-width: 100%;
}
.login-panel {
color:white;
margin-left:20px;
width: 350px;
height: 100%;
border-radius:6px;
background-color: rgba(0,0,0,0.66);
}
.login-panel a {
color: white;
}
.login-nav {
font-size: 16px;
display:flex;
}
.login-box{
padding-top: 40px;
padding-left: 30px;
padding-right: 30px;
}
.login-nav div{
flex:1;
height: 44px;
line-height: 44px;
cursor:pointer;
border-bottom: 1px solid white;
}
.login-nav div.on{
box-sizing: border-box;
border-bottom: 2px solid white;
}
.login-nav.only-auth div.on{
height: auto;
line-height: normal;
padding-bottom:14px;
font-weight:bold;
font-size: 21px;
}
.login-form-item {
height:40px;
margin-top:20px;
}
::placeholder {
color: white;
opacity: 1;
}
.el-input {
background-repeat:no-repeat;
background-position:left;
background-position-x: 15px;
background-size:19px 19px;
font-size: 14px;
width:100%;
height:42px;
}
.user-input{
background-image:url(/wengine-auth-static/js/image/login-user.png?v=10600);
}
.password-input{
background-image:url(/wengine-auth-static/js/image/password.png?v=10600);
}
.phone-code-input{
background-image:url(/wengine-auth-static/js/image/code.png?v=10600);
}
.phone-input{
background-image:url(/wengine-auth-static/js/image/phone.png?v=10600);
}
.code-input{
background-image:url(/wengine-auth-static/js/image/code.png?v=10600);
}
.footer{
width: 100%;
bottom: 5px;
font-size: 14px;
color: white;
position: absolute;
}
.link-field{
margin-top:0;
margin-left:auto;
display:flex;
font-size:14px;
color:white;
text-align:left;
}
.link-login{
flex: 1;
padding-left:5px;
}
.link-login img{
width: 22px;
margin-right:5px;
}
.upper-login-field{
margin-top:10px;
display:flex;
}
.remember-field{
margin-left: auto;
text-align: right;
font-size: 14px;
width: 120px;
}
.msg{
text-align:left;
color:#ff4505;
flex:1;
padding-left:5px;
}
.el-input input{
background:none;
text-indent:41px;
-webkit-appearance: none;
border-radius: 14px;
border: 1px solid white;
box-sizing: border-box;
color: white;
display: block;
font-size: inherit;
height: 42px;
line-height: 1;
outline: 0;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
}
.phone-code-input{
display:flex;
}
.code-input{
display:flex;
}
.captcha-div{
height:42px;
float:left;
line-height:1;
vertical-align:middle;
margin-left:17px;
width:100px;
}
.captcha{
background:white;
display:block;
height:40px;
width:100px;
border-radius:15px;
}
.captcha-img{
height:100%;
width:100%;
}
.el-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
transition: .1s;
font-weight: 500;
border-radius: 4px;
}
#send-sms{
float:left;
height:42px;
width:118px;
margin-left:11px;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
transition: .1s;
font-weight: 500;
border-radius: 15px;
background-color: white;
color: black;
line-height:42px;
}
.el-button-send {
padding: 8px;
font-size: 14px;
height: 40px;
color: #fff;
background-color: #409eff;
border-color: #409eff;
margin-left: 11px;
}
.el-button-login {
padding: 6px 20px;
font-size: 14px;
font-weight: bold;
margin-top: 10px;
height: 47px;
width:100%;
color: #000;
background-color: #fff;
border:none;
border-radius: 15px;
}
.help-mark{
height: 22px;
width: 22px;
display: inline-block;
margin-top: 10px;
margin-left: 7px;
text-align: center;
}
.captcha--input{
width:150px;
}
.layer-form-title{
width: 100%;
height: 40px;
text-align: left;
background: #fff;
font-size: 16px;
font-weight: bold;
padding-left: 20px;
line-height: 40px;
border-bottom: 1px solid #e5e5e5;
}
.second-login-layer{
width: 400px;
height: 200px;
background: #fff;
font-size: 14px;
padding: 20px;
}
@media only screen and (max-width: 1367px) {
.container{
margin-top: 40px;
}
}
@media only screen and (max-width: 769px){
body{
background: url(/wengine-auth-static/js/image/background_mobile.jpg);
background-attachment: fixed;
font-size: 12px;
height:auto;
}
.background{
display:none;
}
.header{
padding-top: 50px;
height: 100%;
text-align: center;
display:block;
}
.portal-blank-logo{
display:none;
}
.portal-logo{
height: 33px;
}
.portal-logo::after{
width:0;
margin-left:0;
}
.portal-title{
margin-left:auto;
margin-right:auto;
font-size: 25px;
color: #ffffff;
}
.notice-panel{
display:none;
}
.mobile-notice-panel{
display:block;
}
.container{
margin-top: 33px;
margin-left:0;
margin-right:0;
height:auto;
width:100%;
max-height: none;
}
.login-box{
padding-top: 23px;
}
.el-form-item {
width:auto;
}
.el-input{
}
#send-sms{
width: 78px;
}
.login-panel {
width: 500px;
margin-bottom: 10px;
margin-left:auto;
margin-right:auto;
}
.notice-title{
margin-top:11px;
font-size: 20px;
}
.notice-box{
padding-top:10px;
padding-bottom: 20px;
padding-left:0;
padding-right:0;
}
.notice-content{
font-size: 12px;
line-height:24px;
margin:12px 5px;
width:auto;
}
.el-button-login {
width:95%;
}
.oauth-field {
width:95%;
}
.footer{
position:relative;
padding: 7px 0 9px;
width: 100%;
margin-top: 30px;
margin-bottom: 20px;
text-align: center;
font-size: 14px;
color: white;
}
}
div.el-button-login {
padding: 20px 0px;
height: auto;
}
.login-nav-header {
border-bottom: 1px solid #fff;
color: #fff;
padding: 0;
position: relative;
margin: 0 0 15px;
}
.login-nav-wrap {
overflow: hidden;
margin-bottom: -1px;
position: relative;
padding: 0 15px;
}
.login-nav-prev {
left: 0;
position: absolute;
cursor: pointer;
line-height: 44px;
font-size: 12px;
color: #8392a5;
}
.login-nav-next {
right: 0;
position: absolute;
cursor: pointer;
line-height: 44px;
font-size: 12px;
color: #8392a5;
}
.login-nav-scroll {
overflow: hidden;
}
.login-nav-nav {
position: relative;
transition: transform .3s;
float: left;
transform: translateX(0px);
white-space: nowrap;
}
.login-nav-active-bar {
width: 84px;
transform: translateX(0px);
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: #1b9ef3;
z-index: 1;
transition: transform .3s cubic-bezier(.645,.045,.355,1);
list-style: none;
}
.login-nav-item {
padding: 0 10px;
height: 44px;
box-sizing: border-box;
line-height: 44px;
display: inline-block;
list-style: none;
font-size: 16px;
color: #8392a5;
position: relative;
border-bottom: 1px solid #fff;
color: #fff;
}
.login-nav-nav div.on{
box-sizing: border-box;
border-bottom: 2px solid white;
}
@media only screen and (max-width: 416px){
.login-panel {
width: 90%;
margin-bottom: 10px;
margin-left:auto;
margin-right:auto;
}
}