/* 登录页背景 */ body { background-image: url('../images/new/lbg.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; background-color: #434343; } html { height: 100%; } div.container { margin-top: 60px; margin-left: auto; margin-right: auto; width: 400px; } /* 输入框整体 */ .container .login-form { background-color: #ffffff; } div.tab-pane { } .login-form .tab-content { border-top: 0px; } /* 输入框Tab */ #loginTab { border-bottom: 0px; } #loginTab li { width: 50%; } #loginTab li.active a { border-top-color: #e45138; border-top-width: 3px; border-bottom-color: #ffffff; } #loginTab li a { border-radius: 0px; border-right: 0px; border-color: #efefee; text-align: center; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体"; font-size: 16px; font-weight: bold; color: #e65d45; padding-top: 20px; padding-bottom: 20px; } /* 输入框 */ .login-form .tab-content .form-signin { margin: 30px 40px 20px 40px; } .login-form .tab-content .form-signin .form-group { margin-bottom: 30px; } .login-form .tab-content .form-signin .form-group .input-group .input-group-addon { border-color: #e45138; } .login-form .tab-content .form-signin .form-group .input-group .input-group-addon img { height: 30px; } .login-form .tab-content .form-signin input { height: 45px; border-left: 0px; border-color: #e45138; border-width: 1px; } img#imageVerifyBox.vcode-img { display: inline; height: 45px; width: 50%; } /* 提交按钮 */ .login-form .tab-content .form-signin button { width: 100%; height: 45px; border-radius: 0px; border: 0px; background-color: #e45138; color: #ffffff; font-size: 18px; margin-bottom: 10px; } /* 复选框 */ .login-form .tab-content .form-signin .checkbox input[type="checkbox"] { height: 30px; width: 16px; margin-left: 0px; margin-top: 0px; } .login-form .tab-content .form-signin .checkbox input[type="checkbox"] + label { margin-left: -20px; color: #e45138; } .login-form .tab-content .form-signin .checkbox + div { text-align: right; margin-right: 4px; } .login-form .tab-content .form-signin .checkbox + div a { line-height: 30px; color: #e45138; text-decoration: underline; } .login-form .tab-content .form-signin + div { border-top: 1px; border-top-color: #e45138; border-top-style: dashed; color: #e45138; text-align: right; padding: 20px 40px; } .login-form .tab-content .form-signin + div a { color: #e45138; text-decoration: underline; } /* 二维码 */ #qrCode { height: 300px; text-align: center; padding-top: 70px; } .login-container{ width: 1200px; height:570px; background-color: #fff; margin: 0 auto; position: relative; } .banner-container{ position: absolute; height: 570px; top:0; left: 0; width: 690px; border-right: 1px solid #d5dade; } .banner-container>.imgwrap{ display: inline-block; margin-top: 137.5px; margin-left: 30px; cursor: pointer; height: 295px; overflow: hidden; } .banner-container img{ height: 295px; display: inline-block; min-width: 629px; cursor: pointer; overflow: hidden; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; } .banner-container img:hover{ transform: scale(1.1,1.1); } .form-container{ position: absolute; height: 570px; top:0; right: 0; width: 510px; } .form-container >form{ margin: 40px; } .login-header{ margin-top:60px; height: 70px; } .login-header >h3{ color: #758591; margin-bottom: 30px; margin-left: 30px; } .login-header-line{ height: 7px; background-color: #d5dade; position: relative; } @keyframes breathe { 0% { box-shadow: 0 0 10px 0 rgba(254, 89, 24, 0.3); opacity: 0.7; } 50% { box-shadow: 0 0 10px 1px rgba(254, 89, 24, 0.7); opacity: 0.8; } 100% { box-shadow: 0 0 10px 2px rgba(254, 89, 24, 1); opacity: 1; } } @-moz-keyframes breathe /* Firefox */ { 0% { box-shadow: 0 0 10px 0 rgba(254, 89, 24, 0.3); opacity: 0.7; } 50% { box-shadow: 0 0 10px 1px rgba(254, 89, 24, 0.7); opacity: 0.8; } 100% { box-shadow: 0 0 10px 2px rgba(254, 89, 24, 1); opacity: 1; } } @-webkit-keyframes breathe /* Safari 和 Chrome */ { 0% { box-shadow: 0 0 10px 0 rgba(254, 89, 24, 0.3); opacity: 0.7; } 50% { box-shadow: 0 0 10px 1px rgba(254, 89, 24, 0.7); opacity: 0.8; } 100% { box-shadow: 0 0 10px 2px rgba(254, 89, 24, 1); opacity: 1; } } @-o-keyframes breathe /* Opera */ { 0% { box-shadow: 0 0 10px 0 rgba(254, 89, 24, 0.3); opacity: 0.7; } 50% { box-shadow: 0 0 10px 1px rgba(254, 89, 24, 0.7); opacity: 0.8; } 100% { box-shadow: 0 0 10px 2px rgba(254, 89, 24, 1); opacity: 1; } } .login-header-line > .line{ position: absolute; top: 0; height: 7px; background-color: #fe5918; margin: 0 30px; width: 370px; } .login-body{ margin: 5px 30px; } .login-body input[type=text],.login-body input[type=password]{ width: 370px; height: 50px; margin: 10px 0px; } .login-body input[type=text]:focus,.login-body input[type=password]:focus{ border-color: #fe5918; } .login-body button#btnLogin{ width: 370px; height: 50px; background-color: #fe5918; color: #fff; margin: 5px 0px; border:none; } .login-body button#btnLogin:disabled{ cursor: not-allowed; } .login-body a.reg{ background-color: #fff; color: #758591; width:150px; text-align: center; line-height: 50px; transition: all 0.5s ease; } .login-body a.reg:hover{ color :#fe5918; } .login-body a.forgot{ background-color: #fff; color: #758591; width:150px; text-align: center; line-height: 50px; margin: 15px 0px; transition: all 0.5s ease; } .login-body a.forgot:hover{ color :#fe5918; } .login-body button:focus{ outline: none; } .login-wx{ position: absolute; bottom: 0; right: 0; height: 95px; width:96px; cursor: pointer; } .login-wx>a{ display: inline-block; cursor: pointer; } .login-wx.qrcode{ background: url('../images/new/login-wx.png') no-repeat 0 0; } .login-wx.pc{ background: url('../images/new/pc.png') no-repeat 0 0; } .err-wrap{ top: 60px; padding: 3px; padding: 5px; display: none; position: absolute; width: 510px; text-align: center; display: none; } .err-wrap>#err-msg{ background-color: #ff645f; color: #fff; padding: 5px; } .overlay{ margin-left: auto; margin-right: auto; width: 510px; position: absolute; right: 0; top: 0px; height: 570px; display: none; background-color: rgba(0,0,0,0.25); } .loadingWord{ margin-left: auto; margin-right: auto; width: 510px; position: absolute; right: 0; top: 0px; height: 570px; display: none; line-height: 570px; text-align: center; z-index: 999; } .bubble-wrap{ width: 140px; height: 40px; background-color: #f9e4dc; position: absolute; bottom: 25px; right: 80px; color: #fe5918; line-height: 40px; text-align: center; font-size: 12px; border: 1px solid #fe5918; } .bubble-arrow{ top: 8px; right: 0; position: absolute; z-index: 10; } .bubble-arrow>em{ border-left-color: #fe5918; top: 0; left: 1px; border-width: 6px 0 6px 6px; position: absolute; width: 0; height: 0; border-color: transparent \0; _border-color: tomato; _filter: chroma(color=tomato); border-style: solid; overflow: hidden; top: 5px; border-right-color: rgba(255,255,255,0); border-top-color: rgba(255,255,255,0); border-bottom-color: rgba(255,255,255,0); } .bubble-arrow>span{ border-left-color: #fae4dd; border-width: 6px 0 6px 6px; position: absolute; width: 0; height: 0; border-color: transparent \0; _border-color: tomato; _filter: chroma(color=tomato); border-style: solid; overflow: hidden; top: 5px; border-right-color: rgba(255,255,255,0); border-top-color: rgba(255,255,255,0); border-bottom-color: rgba(255,255,255,0); left: 0; } .eye-wrap{ position: absolute; width: 40px; height: 40px; top: 15px; right: 0; } .eye{ width: 20px; height: 20px; background-size: 100% 100%; margin: 10px; cursor: pointer; } .eye.open{ background-image: url("../../tms/img/console/eye_open.png"); } .eye.close{ background-image: url("../../tms/img/console/eye_close.png"); }