/*登录的样式*/ html { height: 100%; } body { height: 100%; background-color: #ffffff; } .header { height: 110px; position: relative; } .header .logo { width: 350px; height: 60px; display: block; font-size: 0; position: absolute; left: 20%; top: 25px; } .footer { height: 126px; } .footer p { line-height: 30px; margin: 0; padding: 0; font-size: 12px; color: #000000; } .footer p a { text-decoration: none; color: #000000; } .footer p:nth-of-type(1) { padding-top: 36px; } .signin { width: 100%; position: relative; height: calc(100% - 236px); background-color: #000000; overflow: hidden; } .signin_bgl { position: absolute; top: 50%; left: 20%; margin-top: -253px; width: 660px; height: 506px; background-size: 100% 100%; background: url("../img/sign_bg.png") left top no-repeat } .signin .signin_bg { position: absolute; top: 50%; margin-top: -183px; right: 20%; width: 394px; height: 366px; overflow: hidden; border-box: box-sizing; border-radius: 2px; background-color: #FFFFFF; border: 1px solid #cdcdcd; } .login_tab { list-style: none; border-bottom: 1px solid #cdcdcd; padding: 0px 50px; margin: 0; } .login_tab li { font-size: 16px; color: #243747; width: 50%; text-align: center; cursor: pointer; float: left; line-height: 60px; padding: 0 20px; border-bottom: 1px solid transparent; margin-bottom: -1px; } .login_tab li.active { border-bottom: 1px solid #249fea; } .signin .signin_panel { padding: 24px 50px; width: 100%; text-align: center; overflow: hidden; border-box: box-sizing; } .signin_panel input.form-control { height: 38px; line-height: 38px; border-box: box-sizing; border: 1px solid #E3E3E3; border-radius: 4px; font-size: 14px; color: #000; font-family: "微软雅黑"; outline: 0; -webkit-box-shadow: none; box-shadow: none; padding-left: 42px; padding-right: 20px } .signin_panel input.form-control:focus .signin_password .signin_icons { background-image: url("../img/password_icons_active.png") } .signin_panel .signin_extensionnumber, .signin_panel .signin_password, .signin_panel .signin_user { position: relative; width: 100%; margin: 0 auto 10px } .signin_icons { position: absolute; left: 6px; top: 9.5px; height: 19px; width: 18px; display: inline-block; padding-right: 6px } .signin_icons::after { content: ""; position: absolute; left: 25px; top: -2px; height: 24px; border-right: 1px solid #cdcdcd } .signin_extensionnumber .signin_icons::after{ top: -5.5px; } .signin_user .signin_icons { background: url("../img/user_icons.png") center top no-repeat } .signin_extensionnumber .signin_icons { top: 13px; background: url("../img/extensionNumber_icons.png") center top no-repeat } .signin_password .signin_icons { background: url("../img/password_icons.png") center top no-repeat } .signin_panel .signin_user.active .signin_icons { background: url("../img/user_icons_active.png") center top no-repeat } .signin_panel .signin_extensionnumber.active .signin_icons { background: url("../img/extensionNumber_icons_active.png") center top no-repeat } .signin_panel .signin_password.active .signin_icons { background: url("../img/password_icons_active.png") center top no-repeat } .signin_panel .form-control-feedback { top: 0; right: -4px; font-size: 14px; font-weight: normal } .btns { position: absolute; bottom: 54px; left: 50px; width: calc(100% - 100px); margin: 0 auto; height: 50px; line-height: 50px; background-color: #249fea; border-radius: 4px; color: #ffffff; font-size: 16px; font-family: "微软雅黑"; text-align: center; border: 0; outline: none; cursor: pointer } .btns[disabled] { cursor: no-drop } .login_panel_footer { position: absolute; width: calc(100% - 100px); bottom: 20px; font-size: 14px; color: #999999; } .login_panel_footer .footer_text::before { content: ''; width: 104px; border-top: 2px solid #d7d7d7; display: inline-block; margin-bottom: 4px; margin-right: 5px; } .login_panel_footer .footer_text::after { content: ''; width: 104px; border-top: 2px solid #d7d7d7; display: inline-block; margin-bottom: 4px; margin-left: 5px; } .alert { width: 100%; text-align: left; margin: -18px auto 0; display: none; padding: 10px 6px; background-color: transparent; border-color: transparent } #login_msg { font-size: 12px; color: #ec4747 } .alert-danger { color: #ec4747 } .glyphicon { top: 2px } .signin_panel input.form-control:focus { border-color: #249fea } .has-error .form-control-feedback { color: transparent } .has-error .form-control:focus { -webkit-box-shadow: none; box-shadow: none } .has-success .form-control-feedback { color: #249fea } .has-success .form-control:focus { -webkit-box-shadow: none; box-shadow: none } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-family: '微软雅黑'; color: #cbcbcb; font-size: 14px } input:-moz-placeholder, textarea:-moz-placeholder { font-family: '微软雅黑'; color: #cbcbcb; font-size: 14px } input::-moz-placeholder, textarea::-moz-placeholder { font-family: '微软雅黑'; color: #cbcbcb; font-size: 14px } input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-family: '微软雅黑'; color: #cbcbcb; font-size: 14px } .header .logo, .signin_bgl, .signin .signin_bg { transition: all .3s; } @media only screen and (max-width: 1680px) { .header .logo, .signin_bgl { left: 10%; } .signin .signin_bg { right: 10%; } } @media only screen and (max-width: 1366px) { .signin .signin_bg, .header .logo, .signin_bgl { -webkit-transform: scale(.8); transform: scale(.8) } } @media only screen and (max-width: 1280px) { .signin .signin_bg, .header .logo, .signin_bgl { -webkit-transform: scale(.6); transform: scale(.6) } } @media only screen and (max-width: 1066px) { .signin_bgl { display: none; } .signin .signin_bg { left: 50%; margin-left: -197px; } } @media only screen and (max-width: 1170px) {} @media only screen and (max-width: 1024px) {}