html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; outline-style: none }
@keyframes fade-in {
0% { opacity: 0; }
/*初始状态 透明度为0*/
40% { opacity: 0; }
/*过渡状态 透明度为0*/
100% { opacity: 1; }
/*结束状态 透明度为1*/ }
@-webkit-keyframes fade-in {
/*针对webkit内核*/
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
#wrapper { animation: fade-in;/*动画名称*/ animation-duration: .6s;/*动画持续时间*/ -webkit-animation: fade-in .6s;/*针对webkit内核*/ }
body { line-height: 1; font: 14px/1.5 "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Roboto, Arial, sans-serif; }
a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent }
a:hover, a:focus { text-decoration: none; bblr: expression(this.onFocus=this.blur()); outline-style: none }
table { border-collapse: collapse; border-spacing: 0 }
input, select { vertical-align: middle }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix::before, .clearfix::after { content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both }
.clearfix:after { clear: both }
.clearfix { *zoom: 1 }
/* login */
html, body { height: 100%; }
.page-login-v3:before { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; content: ''; background: #62a8ea; background: url(../../img/login_bg.jpg) center center/cover no-repeat !important; }
.container {text-align: right;height: 100%;}
.container:before { display: inline-block; height: 100%; vertical-align: middle; content: ""; }
.login-body {display: inline-block;
vertical-align: middle;
width: 40%;
height: 100%;
margin: 0;
background: rgb(255 255 255);
padding: 0px 80px 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
box-shadow: 0px 0 20px rgb(0 0 0 / 85%);}
.login-content {margin-top: 20%;}
.login-content .brand .brand-img { width: 50px; }
.login-content .brand .brand-text {
font-size: 28px !important;
text-shadow: rgb(0 0 0 / 15%) 0 0 1px;
font-weight: normal;
text-align: left;
color: #2e2d3c;
}
.login-content .brand h3{
text-align: left;
color: #2e2d3c;
font-size: 16px;
font-weight: normal;
margin-top: 10px;
}
.login-content .brand h3>a{
color:#ff5060;
padding: 0 5px;
}
.region a{
color: #2e2d3c;
padding:10px;
}
.login-form { margin: 45px 0 30px; }
.login-form .form-group { margin: 30px 0; text-align: left;}
label {
display: inline-block;
width:100%
}
.form-group input[type=number], .form-group input[type=search], .form-group input[type=text], .form-group input[type=password], .form-group input[type=datetime], .form-group input[type=datetime-local], .form-group input[type=date], .form-group input[type=month], .form-group input[type=time], .form-group input[type=week], .form-group input[type=email], .form-group input[type=url], .form-group input[type=tel], .form-group input[type=color], .form-group select, .form-group textarea, .form-group-field {
display: block;
border: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
width: 100%;
border-bottom: 1px solid #E4EAEC;
font-size: 14px;
height: 42px;
line-height: 1.5;
outline: none;
padding: 0 5px;
color: #a3afb7;
font: 14px/1.5 "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Roboto, Arial, sans-serif;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.form-group input[type=radio]{
border: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 1px solid #E4EAEC;
font-size: 14px;
height: 21px;
width: 18px;
line-height: 1.5;
outline: none;
padding: 0;
color: #a3afb7;
font: 14px/1.5 "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Roboto, Arial, sans-serif;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.login-form input:focus { border-bottom: 1px solid #ff5060; }
.login-form button { width: 100%; margin-top: 20px; padding: 10px 18px; font-size: 18px; line-height: 1.3333333; border-radius: 4px; white-space: normal; -webkit-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear; -o-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear; transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear; -webkit-font-smoothing: subpixel-antialiased; color: #fff; background-color: #ff5060; border-color: #ff5060; background-image: none; border: 1px solid transparent; cursor: pointer; outline: none; }
.login-form button[disabled], .login-form button[disabled]:hover { color: #fff; background-color: #a2caee; border-color: #a2caee; cursor: not-allowed; opacity: .65; }
.login-form button:hover { background-color: #fd717e; border-color: #fd717e; }
@media screen and (max-width: 404px) {
.login-body{
width: 310px;
padding: 50px 30px 40px;
}
}
.login-footer{bottom: 0px;
right: 0px;
position: fixed;
width: 40%;
text-align: center;}
.login-footer p{ padding: 20px;
border-top: 1px solid #ddd;}