/*登录的样式*/ html { height: 100%; } .signin { width: 100%; position: relative; height: 100%; overflow: hidden; background: url(../img/signin_bg.png) left top no-repeat; background-size: cover; display: flex; display: -webkit-flex; /* Safari */ display: -ms-flex; /* IE */ align-items: center; /*垂直居中*/ justify-content: center; /*水平居中*/ } .signin_panel { width: 1100px; height: 720px; background-color: #fff; border-radius: 10px; } .signin .signin_left, .signin .signin_right { float: left; -webkit-transition: all .2s; transition: all .2s; } .signin_panel .signin_left { height: 100%; width: 38.2%; background: url(../img/siginpanel_left_bg.png) left top no-repeat; /*background-size: cover;*/ } .signin_left_content { width: 100%; margin: 256px 0 0 0; padding: 0; color: #fff; list-style: none; text-align: center; } .signin_left_content .signin_left_item { margin-bottom: 52px; opacity: 0; } .signin_left_content .signin_left_item1 { -webkit-animation: showrun .5s ease-in-out 1s 1 forwards; -moz-animation: showrun .5s ease-in-out 1s 1 forwards; -o-animation: showrun .5s ease-in-out 1s 1 forwards; animation: showrun .5s ease-in-out 1s 1 forwards; } .signin_left_content .signin_left_item2 { -webkit-animation: showrun .5s ease-in-out 1s 1 forwards; -moz-animation: showrun .5s ease-in-out 1s 1 forwards; -o-animation: showrun .5s ease-in-out 1s 1 forwards; animation: showrun .5s ease-in-out 1.5s 1 forwards; } .signin_left_content .signin_left_item3 { -webkit-animation: showrun .5s ease-in-out 1s 1 forwards; -moz-animation: showrun .5s ease-in-out 1s 1 forwards; -o-animation: showrun .5s ease-in-out 1s 1 forwards; animation: showrun .5s ease-in-out 2s 1 forwards; } .signin_left_content .signin_left_item4 { -webkit-animation: showrun .5s ease-in-out 1s 1 forwards; -moz-animation: showrun .5s ease-in-out 1s 1 forwards; -o-animation: showrun .5s ease-in-out 1s 1 forwards; animation: showrun .5s ease-in-out 2.5s 1 forwards; } @-webkit-keyframes showrun { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(100px); transform: translateX(0); opacity: 1; } } @-moz-keyframes showrun { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(100px); transform: translateX(0); opacity: 1; } } @-o-keyframes showrun { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(100px); transform: translateX(0); opacity: 1; } } @keyframes showrun { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(100px); transform: translateX(0); opacity: 1; } } .signin_left_item .signin_left_item_content { display: inline-block; vertical-align: middle; } .signin_left_item .signin_left_item_content p { line-height: 26px; margin: 0; padding: 0; } .signin_left_content .signin_left_icon { display: inline-block; width: 42px; height: 42px; margin-right: 36px; vertical-align: middle; } .signin_left_content .signin_left_icon_efficiency { background: url(../img/icon_efficiency.png) left center no-repeat; } .signin_left_content .signin_left_icon_qulity { background: url(../img/icon_qulity.png) left center no-repeat; } .signin_left_content .signin_left_icon_service { background: url(../img/icon_service.png) left center no-repeat; } .signin_left_content .signin_left_icon_intelligence { background: url(../img/icon_intelligence.png) left center no-repeat; } .signin_panel .signin_right { text-align: left; width: 61.8%; height: 100%; position: relative; padding: 0 120px; } .signin_right .signin_title_logo { width: 276px; height: 48px; margin-top: 70px; margin-bottom: 50px; font-size: 0; display: none; } .signin_right .signin_title { margin-top: 70px; margin-bottom: 50px; font-size: 30px; color: #333; font-weight: 500; } .signin_right .signin_subtitle { color: #979797; font-size: 16px; font-weight: normal; letter-spacing: 1.8px; } .signin_right .signin_subtitle::before { content: ''; display: inline-block; width: 100px; height: 2px; background-color: #e7e7e7; vertical-align: middle; margin-right: 22px; } .signin_right .signin_subtitle::after { content: ''; display: inline-block; width: 120px; height: 2px; background-color: #e7e7e7; vertical-align: middle; margin-left: 22px; } .signin_right .signin_user, .signin_right .signin_extension, .signin_right .signin_password { position: relative; width: 440px; margin: 0 auto 20px auto; } .signin_right .signin_extension { display: none; } .signin_label { position: absolute; left: 26px; top: 18px; color: #666666; font-size: 16px; } .signin_icons { position: absolute; right: 16px; bottom: 14px; width: 21px; display: inline-block; } .signin_user .signin_icons { height: 25px; background: url(../img/signin_user_icon.png) center top no-repeat; } .signin_extension .signin_icons { height: 22px; background: url(../img/signin_ext_icon.png) center top no-repeat; } .signin_password .signin_icons { height: 26px; background: url(../img/signin_pass_icon.png) center top no-repeat; } .signin_panel .form-control { padding-left: 80px; padding-right: 60px; height: 54px; /* line-height: 54px; */ font-size: 16px; color: #000; border: 2px solid #e7e7e7; border-radius: 4px; font-family: "微软雅黑"; } .signin_panel .form-control { outline: 0; -webkit-box-shadow: none; box-shadow: none; } .has-error .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border-color: #e7e7e7; } .has-success .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border-color: #e7e7e7; } .signin_panel .signin_places { margin-bottom: 0; margin-top: 70px; padding: 16px 0; text-align: left; color: #979797; } .btns { width: 440px; height: 54px; line-height: 54px; background: url("../img/signin_btn_bgs.png") left top no-repeat; color: #ffffff; font-size: 18px; font-family: "微软雅黑"; text-align: center; border: 0; margin-top: 64px; outline: none; cursor: pointer; } .btns[disabled] { cursor: no-drop; } .alert { position: absolute; bottom: 0; height: 80px; line-height: 80px; margin: 0; padding: 0 0 0 120px; width: 100%; text-align: left; display: none; background-color: #eff1f5; border-color: transparent; border-radius: 0; border-bottom-right-radius: 10px; transition: all .4s; margin-left: -120px; } .alert-danger { color: #f52828; } .signin_panel .form-control-feedback { top: 12px; right: 38px; font-size: 16px; } ::-webkit-input-placeholder { /* WebKit browsers */ font-family: '微软雅黑'; color: #aba9a9; font-size: 18px; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-family: '微软雅黑'; color: #aba9a9; font-size: 18px; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ font-family: '微软雅黑'; color: #aba9a9; font-size: 18px; } :-ms-input-placeholder { /* Internet Explorer 10+ */ font-family: '微软雅黑' !important; color: #aba9a9 !important; font-size: 18px !important; } @media only screen and (max-width: 1366px) { .signin_panel { -webkit-transform: scale(.8); transform: scale(.8); } } @media only screen and (max-width: 1280px) { .signin_panel { -webkit-transform: scale(.65); transform: scale(.65); } } @media only screen and (max-width: 1100px) { .signin_panel .signin_left { display: none; } .signin_panel .signin_right { width: 100%; text-align: center; } .signin_right .signin_places { text-align: center; } .signin_right .alert { text-align: center; padding-left: 0; } .signin_right .signin_title { display: none; } .signin_right .signin_title_logo { display: block; margin-left: auto; margin-right: auto; } .signin_right .logins_btn { left: 50%; margin-left: -220px; } } @media only screen and (max-width: 600px) { .signin_panel .signin_right { padding: 0 20px; } .signin_right .alert { margin-left: -20px; } .signin_right .loginTypes { right: 60px; } } .logins_btn { position: absolute; bottom: 152px; margin: 0; } .loginTypes { position: absolute; bottom: 100px; right: 120px; color: #249fea; } .loginTypes p { cursor: pointer; } #admin_login { display: none; } input::-ms-clear { display: none !important; } input::-ms-reveal { display: none !important; } .outside_input { position: absolute; left: -550%; }