cf-platform/Public/Mobile/css/unlr.css

/**
 * 登录注册样式
 * @author 鹿文学
 */
/*  */
.unlr .header {}
.login-header~.occupy{height:0;}
.banner {background:url(../images/user_bg.png) center 0 no-repeat;background-size:100% 100%;text-align:center;color:#FFF;padding-top:1rem;}
.login-banner {padding-top:5rem;}
.login-banner .imgbox {padding:3rem 0;}
.login-banner .imgbox img {width: 9rem;
    height: 9rem;
    border-radius: 100%;
    background: #FFF;
    display: block;
    margin: 2.8vw auto 0rem;box-shadow:0 0 0 4px rgba(255,255,255,.6);}

.t-form .login-box {margin:4rem 1.5rem;font-size:1.8rem;color:#777;}
.t-form .form-group {background:#FFF;border-radius:1rem;}
.t-form .input-group {position:relative;}
.t-form .input-group~.input-group {border-top:1px solid #F1F1F1;}    
.t-form .input-group .input-fix {position:absolute;top:1.3rem;text-align:center;}
.t-form .input-group .input-prefix {left:0;width:16%;}
.t-form .input-group .input-suffix {right:0;width:8%;}
.t-form .input-group .input-fix .iconfont {font-size:3rem;color:#999;height:100%;line-height:1.4;}
.t-form .input-group .input-suffix .iconfont {font-weight:100;color:#ddd;}
.t-form .input-group .txt {font-size:2.2rem;border:1px solid #FFF;}
.t-form .input-group .txt::-webkit-input-placeholder{color:#666;}
.t-form .input-group .txt::-moz-placeholder{color:#666;}
.t-form .agree {text-align:center;margin:1rem 0 2rem;}
.t-form .agree a {color:#18B1EA;}
.t-form .btn-group {}
.t-form .btn-group .submit {background:#18B1EA;color:#FFF;font-size:2.6rem;width:100%;border:none;border-radius:4rem;padding:1.5vw 0;}    
.t-form .link-group {padding:1rem 0;}
.t-form .link-group .register-btn{color:#18B1EA;float:left;}
.t-form .link-group .line{color:#999;}
.t-form .link-group .forget-btn {float:right;}

.login-form .input-group {padding:1.3rem 12% 1.3rem 16%;}
.login-form .input-group .txt{border-left-color:#F1F1F1;width:92%;margin:0 -8% 0 0;padding:.3rem 1% .3rem 6%;}


.forget-box,.register-box {margin:0 1.5rem 1rem 1.5rem;}
.forget-box .input-group,.register-box .input-group {padding:1rem 3%;overflow:hidden;}
.forget-box .input-group .txt,.register-box .txt {width:100%;}
.forget-form .btn-group,.register-box .btn-group {padding-top:2rem;}
.t-form .input-group .getcode,.t-form .input-group .getcode2{color:#777;text-align:center;font-size:2rem;border-radius:2rem;background:#E5E9EC;}
.t-form .input-group .getcode{top:.8rem; right:2%;padding:.6rem 0rem;position:absolute;width:38%;}
.t-form .input-group .getcode.disabled,.t-form .input-group .getcode2.disabled {color:#aaa;}

.t-form .input-mark {margin:0;font-size:2.2rem;color:#666;padding:.3rem 0;}
.t-form .input-mark span {margin-right:3%;}
.register-box .zonebox {padding-left:30%;padding-right:12%;}
/* .register-box .zonebox {padding-left:28%;padding-right:12%;}
.register-box .input-group .zone {color:#777;position:absolute;top:0;left:0;width:24%;line-height:3;text-align:center;font-size:2.4rem;border-right:1px solid #E5E9EC;height:100%;vertical-align:middle;}
 */
.register-box .input-group .zone {color:#777;
  position:absolute;
  overflow:hidden;
  top:0;
  left:0;
  width:24%;
 /* margin-left:3%;*/
  line-height:2.2;
  font-size:2.4rem;
  border-right:1px solid #E5E9EC;
  height:100%;
  vertical-align:middle;}
.register-box .input-group .input-suffix {width:8%;text-align:right;margin-right:2%;}
.register-box .input-group .input-suffix .iconfont {color:#777;font-size:2.6rem;}
.register-box .input-group .zone~.txt {}

.register-box .input-group .getcode2 {padding:.4rem 1rem;}

.register-box .table {width:100%;height:100%;}
.register-box .table .table-cell {vertical-align:middle;text-align:center;}
.register-box .mark-text {position:absolute;top:0;left:0;height:100%;width:20%;font-size:2rem;}
.register-box .inputbox {margin-left:20%;width:80%;font-size:2rem;height:100%;display:inline-block;}

.register-box .inputbox .input-radio .iconfont {vertical-align:middle;display:inline-block;border-radius:100%;text-align:center;}
.register-box .inputbox .input-radio {display:inline-block;width:38%;color:#777;position:relative;}
.register-box .inputbox .radio {opacity:0;position:absolute;left:0;top:0;margin-left:0;}
.register-box .inputbox .radio.sex~.iconfont {font-size:2rem;width:2.5rem;height:2.5rem;line-height:2.5rem;color:#D6D6D6;border:1px solid #D6D6D6;margin-right:1rem;}
.register-box .inputbox .radio.sex.on~.iconfont {background:#18B1EA;color:#FFF;border-color:#18B1EA;}

.forget-notice {color: #666;
    font-size: 2rem;
    text-align: center;
    margin: 0;
    padding: 2.65rem .8rem 0.78rem;
    line-height: 1.5;}

.forget-notice a {
    color: #23BBF3;
}

@media screen and (max-width:650px) {
  /* .register-box .zonebox {padding-left:20%;}
  .register-box .input-group .zone {width:17%;} */
  
  .register-box .zonebox {padding-left:31%;}
  .register-box .input-group .zone {width:25%;}
  
}

@media screen and (max-width:600px) {
  /* .register-box .zonebox {padding-left:18%;}
  .register-box .input-group .zone {width:15%;} */
  .register-box .zonebox {padding-left:33%;}
  .register-box .input-group .zone {width:27%;}
  
  .forget-notice {font-size:1.8rem;}
}
@media screen and (max-width:550px) {
  .register-box .zonebox {padding-left:35%;}
  .register-box .input-group .zone {width:30%;}
}
@media screen and (max-width:500px) {
  .login-banner .imgbox img{width:8rem;height:8rem;}
  
  .t-form .login-box {font-size:1.6rem;}
  .t-form .input-group .input-fix .iconfont {font-size:2.8rem;}
  .t-form .input-group .txt,.t-form .input-group .getcode,.register-box .input-group .getcode2,.t-form .input-mark {font-size:1.8rem;}
  .t-form .btn-group .submit {font-size:2.4rem;}
  
  .register-box .input-group .input-suffix .iconfont {font-size:2.4rem;}
  .register-box .input-group .zone {font-size:2.2rem;}

  .register-box .zonebox {padding-left:36%;}
  .register-box .input-group .zone {width:31%;}
  
  .forget-notice {font-size:1.5rem;}
}
@media screen and (max-width:450px) {
  .login-banner .imgbox img {width:7rem;height:7rem;}
  .register-box .zonebox {padding-left:38%;}
  .register-box .input-group .zone {width:33%;}
  .register-box .input-group .getcode2 {padding:0rem .6rem;}
  
}
@media screen and (max-width:400px) {
  .header .hbtn {font-size:1.4rem;}
  
  .login-banner .imgbox {padding:2rem 0;}
  .login-banner .imgbox img {width:6rem;height:6rem;}
  
  .t-form .login-box {font-size:1.4rem;}
  .t-form .input-group .input-fix .iconfont {font-size:2.6rem;}
  .t-form .input-group .txt,.t-form .input-group .getcode,.register-box .input-group .getcode2,.t-form .input-mark {font-size:1.8rem;}
  .t-form .btn-group .submit {font-size:2.2rem;}
  
  .register-box .input-group .input-suffix .iconfont {font-size:2.2rem;}
  .register-box .input-group .zone {font-size:2rem;}
  
 
}
@media screen and (max-width:350px) {
  .login-banner .imgbox {padding:1.8rem 0;}
  .login-banner .imgbox img {width:5rem;height:5rem;}
  
  
  .t-form .login-box {font-size:1.3rem;}
  .login-form .input-group {padding-left:20%;padding-right:16%;}
  .t-form .input-group .input-prefix {left:0;width:20%;}
  .t-form .input-group .input-suffix {right:0;width:16%;}

  .t-form .input-group .input-fix .iconfont {font-size:2.4rem;}
  .t-form .input-group .txt,.t-form .input-group .getcode,.register-box .input-group .getcode2,.t-form .input-mark {font-size:1.6rem;}
  .t-form .btn-group .submit {font-size:2rem;}
  
  .register-box .input-group .input-suffix .iconfont {font-size:2rem;}
  .register-box .input-group .zone {font-size:1.8rem;}
  
  .register-box .zonebox {padding-left:42%;}
  .register-box .input-group .zone {width:36%;}
  
  .forget-notice {font-size:1rem;}
  
}
.span-flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width:1024px){
	.t-form .btn-group .submit{
		padding: 1vw 0;
	}
	.t-form .input-group .getcode {
		width:25%;
	}
}