You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
7.7 KiB
CSS
195 lines
7.7 KiB
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%;
|
|
}
|
|
}
|
|
|
|
|