yonui-ys
Version:
1,309 lines (1,093 loc) • 23.6 kB
text/less
.login-nav {
width: 100%;
min-width: 1190px;
background: #fff;
overflow: hidden;
height: 66px;
}
.login-main {
width: 85%;
margin: 0 auto;
width: 1000px;
}
.login-left {
float: left;
color: #fff;
font-size: 18px;
em {
border-left: 1px solid #e5e5e5;
padding-left: 10px;
display: inline-block;
font-style: normal;
height: 22px;
line-height: 22px;
margin: 26px 10px 0 0;
color: #333;
&.header-left-color {
font-size: 18px;
color: #333333;
border-left: #e5e5e5 solid 1px;
}
}
}
.logo-img {
background: url(images/icon-logo-active.png) no-repeat left center;
line-height: 67px;
display: inline-block;
width: 166px;
vertical-align: top;
height: 35px;
margin-top: 20px;
}
.btn-red-wei {
border: #ee2223 solid 1px;
color: #ee2223;
background: #fff;
line-height: 26px;
padding: 0 15px;
border-radius: 15px;
display: inline-block;
}
.btn-red-wei:hover {
border: #ee2223 solid 1px;
color: #fff;
background: #ee2223;
}
.header-color {
color: #666;
font-style: normal;
&:hover {
color: #666 ;
}
}
.login-btn-lfrt {
background: -webkit-linear-gradient(left, #ff480f, #ee2223);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #ff480f, #ee2223);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #ff480f, #ee2223);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #ff480f, #ee2223);
/* 标准的语法 */
border-top-left-radius: 8px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 8px;
border: none;
color: #fff;
}
.login-btn-lfrt:focus,
.login-btn-lfrt:hover {
font-size: 18px;
color: #fff;
background: -webkit-linear-gradient(left, #ee2223, #ff480f);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #ee2223, #ff480f);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #ee2223, #ff480f);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #ee2223, #ff480f);
/* 标准的语法 */
-moz-box-shadow: 0px 0px 6px #818181;
-webkit-box-shadow: 0px 0px 6px #818181;
box-shadow: 0px 0px 6px #818181;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#818181')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#818181');
-webkit-transform: translateY(-4px);
-moz-transform: translateY(-4px);
-ms-transform: translateY(-4px);
-o-transform: translateY(-4px);
transform: translateY(-4px)
}
.login-bg-banner-top {
position: absolute;
left: 0;
top: -10px;
width: 100%;
height: 40px;
background: url(images/banner_bot.png) repeat-x left top;
}
.ant-col-12 {
position: relative;
}
.login-main {
.ant-col-12:nth-of-type(1) {
width: 60%;
.ant-carousel .slick-dots {
bottom: -10px;
}
}
.ant-col-12:nth-of-type(2) {
width: 40%;
}
}
.login-m-left {
position: absolute;
right: 60px;
top: 100px;
width: 540px ;
height: 340px ;
}
.login-right {
li {
float: left;
margin: 0 20px;
}
li span {
cursor: pointer;
i {
margin-right: 4px;
font-size: 15px;
}
&:hover {
color: #666;
}
}
float: right;
font-size: 14px;
color: #666;
line-height: 76px;
.btn-reg {
line-height: 26px;
border: 1px solid #ee2223;
padding: 0 15px;
color: #ee2223;
border-radius: 15px;
display: inline-block;
&:hover {
background: #ee2223;
color: #fff;
}
}
}
.bg-gray {
background: #f8f8f8;
.logo-img {
margin-top: 15px;
}
.login-right {
line-height: 66px;
}
.login-right li {
margin: 0 20px;
}
.login-left em {
height: 22px;
line-height: 22px;
margin: 22px 10px 0 0;
}
}
.login-bg {
position: relative;
height: 600px;
min-width: 1190px;
margin: 0 auto;
}
.slick-slide.image_1 {
width: 540px;
height: 340px;
background: url(images/login-banner1.png) no-repeat;
}
.slick-slide.image_2 {
width: 540px;
height: 340px;
background: url(images/login-banner2.png) no-repeat;
}
.login_wechat_popover.ant-popover {
top: 172px ;
}
.login-bg .slick-dots {
li {
button {
opacity: 1;
width: 10px;
height: 2px;
background: #DBDEF1;
border-radius: 4px;
}
}
li.slick-active {
button {
width: 14px;
height: 2px;
background: linear-gradient(190deg, rgba(255, 122, 62, 1) 0%, rgba(255, 53, 53, 1) 100%);
border-radius: 4px;
}
}
}
@media screen and (min-width:1440px) and (max-width:1900px) {
.login-bg {
height: 650px;
}
.login-m-left {
top: 110px ;
width: 540px ;
}
.login-m-right {
margin-top: 110px ;
}
.login_wechat_popover.ant-popover {
top: 184px ;
}
}
@media screen and (min-width: 1901px) {
.login-bg {
background-size: cover;
height: 800px;
}
.login-m-left {
top: 155px ;
width: 540px ;
height: 340px ;
}
.login-m-right {
margin-top: 155px ;
}
.login_wechat_popover.ant-popover {
top: 228px ;
}
}
@media screen and (min-width: 2200px) {
.login-bg {
background-size: cover;
height: 800px;
}
.login-m-left {
top: 155px ;
width: 540px ;
height: 340px ;
}
.login-m-right {
margin-top: 155px ;
}
.login_wechat_popover.ant-popover {
top: 244px ;
}
}
/* 二维码登录经过 */
.weChat_erweima {
cursor: pointer;
}
.login_wechat_popover {
.ant-popover-inner {
border: 1px solid #F3D995;
box-shadow: none;
background: #FEFCEE;
overflow: hidden;
}
.ant-popover-arrow {
border-left-color: #F3D995 ;
right: 1px ;
top: 8px ;
}
.ant-popover-arrow:after {
right: 1px ;
bottom: -8px ;
}
.ant-popover-inner-content {
color: #DF9C1F;
font-size: 14px;
padding: 0px 0;
line-height: 30px;
.anticon-kuaisu {
float: left;
margin-top: 5px;
margin-right: 5px;
}
p {
padding: 0 15px 0 10px;
}
p:hover {
background: none;
color: #DF9C1F;
}
}
}
.login-m-right {
.yon-row.ant-form-item {
.ant-form-item-control-wrapper {
.ant-form-item-control {
label {
display: block;
float: left;
span {
display: block;
float: left;
color: #333;
}
span.ant-checkbox {
margin-top: 9px;
}
}
}
}
}
.login_service_error {
color: #f04134;
margin-top: -10px;
margin-bottom: 10px;
}
.ant-form-explain {
margin-top: 4px;
}
.login-title {
font-size: 16px;
font-weight: bold;
color: #666;
margin-bottom: 27px;
}
.ant-input-affix-wrapper .ant-input {
border: 1px solid #ddd ;
}
.ant-input-affix-wrapper .ant-input:hover {
border: 1px solid #88919B ;
}
}
.login-m-right .ant-form-item-control:focus .anticon {
color: #999
}
.login-m-right {
width: 360px;
margin: 0 auto;
border-radius: 15px;
.ant-input-affix-wrapper .ant-input-prefix {
.anticon-user,
.anticon-lock {
margin-top: 7px;
}
}
}
.login-m-right .anticon {
font-size: 20px;
color: #ccc;
}
.login-m-right .ant-card-body {
padding: 45px 25px 50px 25px;
position: relative;
.weChat_erweima {
position: absolute;
top: 0;
right: 0;
}
}
.login-m-right .ant-input-affix-wrapper .ant-input:not(:first-child) {
padding-left: 38px;
height: 42px;
}
.login-pas-icon {
position: absolute;
right: 10px;
line-height: 52px;
color: #949494;
z-index: 3
}
.ant-card {
background: rgba(255, 255, 255, .8);
box-shadow: 0px 2px 25px 0px rgba(153, 153, 153, 0.26);
}
.login-bg .ant-card-bordered {
border: none;
}
.login-bg .ant-card:hover {
box-shadow: 0px 2px 25px 0px rgba(153, 153, 153, 0.26) ;
}
.logo-touch .login-bg .ant-card:hover {
box-shadow: none ;
}
.ant-form-item-control .forget {
float: right;
display: block
}
.btn-block .ant-btn {
line-height: 30px;
font-size: 18px;
display: block;
width: 100%;
height: 44px;
}
// 忘记密码
.forget-bg {
background-image: url(images/pic-forget.jpg);
}
@media screen and (min-width: 1920px) {
.register-bg {
background: none;
.img {
background: url(images/pic-reg.jpg) no-repeat top center;
background-size: cover;
height: 380px;
width: 100%;
position: absolute;
top: 0;
}
}
.forget-bg {
background: none;
.img {
background: url(images/pic-forget.jpg) no-repeat top center;
background-size: cover;
height: 380px;
width: 100%;
position: absolute;
top: 0;
}
}
}
.forget-bg .register-box .steps-action .btn-inline .ant-btn {
height: 40px;
font-size: 16px;
}
.forget-bg .register-box .steps-action .btn-inline {
padding-left: 230px;
}
.forget-bg .ant-form-item {
margin-bottom: 20px;
}
.forget-bg .steps-action .btn-block {
margin-top: 40px;
}
.forget-pic {
background: url(images/pic-findpassword.png) no-repeat;
width: 238px;
height: 42px;
display: inline-block
}
// 注册
.register-bg {
background: url(images/pic-reg.jpg) no-repeat top center;
width: 100%;
background-size: auto 380px;
padding-top: 195px;
min-width: 1190px;
min-height: 380px;
position: relative;
}
.register-title {
position: absolute;
top: 70px;
width: 100%;
text-align: center;
}
.register-box .steps-action .btn-inline .ant-btn {
font-size: 16px;
}
.reg-pic {
background: url(images/pic-reg.png) no-repeat;
width: 423px;
height: 42px;
display: inline-block
}
.register-password {
position: relative
}
.register-password i {
position: absolute;
right: 10px;
line-height: 40px;
top: 0;
color: #949494;
font-size: 19px;
}
.register-main {
background: #fff;
width: 1190px;
margin: 0 auto;
border-radius: 15px;
position: relative;
min-height: 627px;
padding-bottom: 40px;
}
.register-main:before {
content: '';
display: block;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: #fff;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
.register-box {
width: 570px;
margin: 0 auto
}
.register-box .ant-input,
.register-box .ant-input-number,
.register-box .ant-select-selection,
.login-main .ant-input,
.login-main .ant-input-number {
font-size: 14px;
height: 40px;
margin-top: 0;
border-radius: 4px;
line-height: 40px;
.ant-select-selection__rendered {
line-height: 38px;
}
}
@media screen and (min-height: 948px) {
.bg-gray {
height: 100%
}
}
.register-list .ant-form-item-label label:after {
content: "";
margin: 0 18px 0 2px;
}
.register-list .ant-input,
.register-list:hover .ant-input {
background: #FFFFFF;
border: 1px solid #D9D9D9;
border-radius: 4px;
}
.register-list .ant-input:hover {
border: 1px solid #505766 ;
}
.register-list:focus .ant-input,
.register-list .ant-input:focus {
background: #fff;
}
.register-list .ant-form-item-label label,
.forgetister-list .ant-form-item-label label {
font-size: 14px;
color: #666;
line-height: 40px;
}
.forgetister-list .ant-form-item-label label {
margin-right: 10px;
}
.register-list .ant-form-item-label {
line-height: 40px;
text-align: right;
padding-left: 42px;
}
.register-list .ant-form-item-control-wrapper {
width: 320px
}
.register-list .ant-checkbox-wrapper {
font-size: 14px;
padding-right: 0;
}
.register-list .ant-checkbox {
margin-bottom: 2px;
}
.register-list .ant-form-item {
margin-bottom: 20px;
}
.register-list .ant-col-8 .ant-btn {
line-height: 30px;
width: 100%;
height: 40px;
background: #aaa196;
}
.register-list .ant-col-8 .ant-btn:hover {
background: #b6afa5;
}
.register-list .checkbox-txt {
margin-top: -10px;
margin-bottom: 20px;
}
.register-list .has-error .ant-input,
.register-list .has-error .ant-input:hover {
border-color: #f4533c ;
background-color: #fdf6f5
}
.has-error .ant-input,
.has-error .ant-input:hover {
border-color: #EE2223;
}
.register-list .ant-form-explain {
line-height: 30px;
margin-bottom: -20px;
}
.register-list .register_agreeMsg {
margin-left: 143px;
color: #ee2223;
margin-bottom: 15px;
}
.register-list .verify-img {
display: block;
background-color: #f4f4f4;
width: 100%;
height: 40px;
border-radius: 4px;
text-align: center;
line-height: 40px;
}
.register-box .steps-action .btn-block .ant-btn {
font-size: 16px;
line-height: 30px;
color: #fff;
}
.register-list .ant-btn-primary.ant-btn-lg[disabled],
.register-list .ant-btn-primary.ant-btn-lg[disabled]:hover {
border-color: #f4f4f4;
background: #f4f4f4;
}
.register-box .steps-action .btn-block {
margin-left: 25%;
width: 320px;
}
.register-list .verify-img img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.has-error .ant-input:focus {
box-shadow: none
}
.register-list-03 {
background: url(images/icon-face.png) no-repeat 30px 12px;
padding-left: 225px;
margin-top: 40px;
background-position: 147px 5px;
margin-bottom: 40px;
}
.register-box .ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-tail>i,
.register-box .ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-tail>i {
background: none
}
.register-box .steps-action .btn-inline .ant-btn {
line-height: 30px;
width: 134px;
margin-right: 20px;
text-align: center;
font-size: 16px;
height: 40px;
}
.register-box .steps-action .btn-inline {
padding-left: 225px;
}
.register-list-03 h3 {
font-size: 24px;
font-weight: normal;
color: #666;
}
.register-list-03 h3 span {
margin: 0 10px;
}
.register-list-03 p {
font-size: 24px;
line-height: 26px;
color: #666;
}
.register-list-03 p em {
margin-left: 6px;
color: #d36f16;
font-style: normal
}
/* 微信登录 */
.register-box {
.wechat_register_tip {
padding-top: 50px;
padding-left: 142px;
p {
background: #F6F6F6;
width: 320px;
line-height: 40px;
margin-bottom: 20px;
padding-left: 10px;
color: #333;
font-size: 12px;
}
}
}
.forgetister-list .ant-form-item-control {
width: 320px;
}
.forgetister-list .has-error .ant-form-explain {
padding-top: 10px;
margin-bottom: -10px;
}
/* 触摸板登录页关闭 */
@media screen and (max-width:1024px) {
.touch_guanbi {
position: absolute;
right: 30px ;
top: 30px ;
display: block;
width: 30px ;
height: 30px ;
z-index: 2;
text-align: center;
line-height: 30px ;
cursor: pointer;
.anticon-guanbi1:before {
font-size: 24px ;
color: #aaa;
}
}
.touch_zuixiaohua {
position: absolute;
right: 85px ;
top: 30px ;
display: block;
width: 30px ;
height: 30px ;
z-index: 2;
text-align: center;
line-height: 30px ;
cursor: pointer;
.anticon-guanbi1:before {
font-size: 24px ;
color: #aaa;
}
}
}
.touch_guanbi {
position: absolute;
right: 40px;
top: 40px;
display: block;
width: 40px;
height: 40px;
z-index: 2;
text-align: center;
line-height: 40px;
cursor: pointer;
.anticon-guanbi1:before {
font-size: 30px;
color: #aaa;
}
}
.touch_guanbi:hover {
.anticon-guanbi1:before {
color: #505766;
}
}
.touch_zuixiaohua {
position: absolute;
right: 110px;
top: 40px;
display: block;
width: 40px;
height: 40px;
z-index: 2;
text-align: center;
line-height: 40px;
cursor: pointer;
.anticon-zuixiaohua:before {
font-size: 30px;
color: #aaa;
}
}
.touch_zuixiaohua:hover {
.anticon-zuixiaohua:before {
color: #505766;
}
}
/* 触摸板登录页 */
.logo-touch {
width: 100%;
height: 100%;
min-width: 1000px;
min-height: 600px;
.logo-left,
.login-bg {
width: 50%;
float: left;
height: 100%;
background-color: #fff ;
}
.logo-left {
div {
height: 100%;
width: 100%;
}
}
.img_touch_1 {
background: #F3FFFE;
.image_1 {
width: 100%;
height: 100%;
background: url(./images/touch_logn_banner1.png) no-repeat center center;
background-size: 100% auto;
}
}
.img_touch_2 {
background: #FFFBF5;
.image_2 {
width: 100%;
height: 100%;
background: url(./images/touch_logn_banner2.png) no-repeat center center;
background-size: 100% auto;
}
}
.ant-carousel .slick-dots {
bottom: 56px;
li {
margin: 0 5px;
button {
width: 30px;
height: 4px;
background: rgba(219, 222, 241, 1);
border-radius: 9px;
}
}
li.slick-active {
button {
width: 60px;
height: 4px;
background: linear-gradient(-45deg, #fc4c2f, #ee2223);
border-radius: 9px;
}
}
}
.login-bg {
background: url(./images/Page-Copy.png);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100%;
min-width: auto;
.login-content {
height: 600px;
position: relative;
top: 50%;
margin-top: -310px;
}
.login-logo {
width: 100px;
height: 62px;
position: relative;
left: 50%;
margin-left: -50px;
background-image: url(./images/touch-logo.png);
margin-bottom: 40px;
background-size: 100%;
background-repeat: no-repeat;
}
.login-password {
height: 70px;
overflow: hidden;
margin-bottom: 15px;
position: relative;
span {
left: 0px;
top: 0px;
position: absolute;
}
.ant-input-prefix .anticon-user,
.ant-input-prefix .anticon-lock {
margin-top: 23px;
margin-left: 14px;
}
}
.login_service_error {
color: #f00;
font-size: 16px;
}
.ant-form-explain {
color: #f00;
font-size: 16px;
margin-top: 10px;
margin-bottom: -25px;
height: 30px;
}
.choose {
margin-top: 20px;
width: 358px;
position: relative;
left: 50%;
margin-left: -178px;
li {
float: left;
font-size: 24px;
color: #999;
}
li.or-bg {
width: 140px;
height: 2px;
background-image: url(./images/or-left.png);
background-repeat: no-repeat;
margin-top: 19px;
}
li.or-bg.left {
margin-right: 23px;
}
li.or-bg.right {
background-image: url(./images/or-right.png);
margin-left: 30px;
}
}
.ant-card {
box-shadow: none;
border: none;
}
.login-m-right {
width: 66%;
.ant-form-item {
margin-bottom: 15px;
}
input {
border: none ;
border-bottom: 2px solid #D1D7DD ;
border-radius: 0;
font-size: 22px;
color: #333;
height: 70px ;
padding-left: 55px ;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
input:hover {
border: none ;
border-bottom: 2px solid #D1D7DD ;
}
input:focus {
border: none ;
border-bottom: 2px solid #89909D ;
}
.anticon:before {
font-size: 28px;
}
.icon_active {
.anticon:before {
color: #ee2223;
}
}
.login-pas-icon {
display: none;
}
.ant-checkbox-wrapper {
margin-bottom: 35px;
font-size: 18px;
.ant-checkbox {
margin-bottom: 2px;
vertical-align: middle;
}
}
.btn-block .login-btn-lfrt {
background-image: linear-gradient(-45deg, #FC4C2F 0%, #EE2223 100%);
box-shadow: 0 5px 20px 0 rgba(175, 2, 2, 0.41);
border-radius: 0 15px 0 15px;
height: 70px;
border: none;
span {
font-size: 26px;
color: #FFFFFF;
}
}
.ant-card-body {
padding: 0;
.ant-form-item-control-wrapper {
.ant-form-item-control .ant-checkbox-wrapper {
margin-top: 25px;
margin-bottom: 25px;
.ant-checkbox {
margin-top: -2px;
}
}
.ant-checkbox-wrapper {
font-size: 18px;
color: #666;
}
}
}
}
.logo-webchat {
margin-top: 10px;
.icon {
width: 84px;
height: 84px;
cursor: pointer;
background-image: url(./images/webchat-login2.png);
left: 50%;
position: relative;
margin-left: -42px;
}
div {
text-align: center;
font-size: 20px;
color: #666;
}
}
}
@media screen and (max-width: 1240px) {}
.login-password {
.keyboard-box {
position: relative;
.anticon {
position: relative;
z-index: 999;
margin-top: 13px;
margin-left: 14px;
}
}
}
}
@media screen and (max-width: 1440px) {
.logo-touch .login-bg .login-m-right input {
height: 60px
}
.logo-touch .login-bg .login-password .ant-input-prefix .anticon-lock,
.logo-touch .login-bg .login-password .ant-input-prefix .anticon-user {
margin-top: 16px;
margin-left: 14px;
}
}
@media screen and (max-width: 1200px) {
.logo-touch .login-bg .login-password .ant-input-prefix .anticon-lock,
.logo-touch .login-bg .login-password .ant-input-prefix .anticon-user {
margin-top: 13px;
margin-left: 14px;
}
.logo-touch .login-bg .login-m-right .anticon:before {
font-size: 24px;
}
.logo-touch .login-bg .login-content {
margin-top: -230px;
}
.logo-touch .login-bg .login-logo {
width: 80px;
height: 48px;
margin-bottom: 15px;
margin-left: -40px;
}
.logo-touch .login-bg .login-m-right .btn-block .login-btn-lfrt {
height: 56px;
}
.logo-touch .login-bg .login-m-right input {
height: 50px ;
font-size: 18px;
}
.logo-touch .login-bg .login-m-right .ant-card-body .ant-form-item-control-wrapper .ant-form-item-control .ant-checkbox-wrapper {
margin-top: 20px;
margin-bottom: 20px;
}
.logo-touch .login-bg .login-m-right .ant-card-body .ant-form-item-control-wrapper .ant-checkbox-wrapper {
font-size: 16px;
}
.logo-touch .login-bg .login-m-right {
width: 60%;
}
.logo-touch .login-bg .login-m-right .btn-block .login-btn-lfrt span {
font-size: 22px;
}
.logo-touch .login-bg .choose li {
font-size: 20px;
}
.logo-touch .login-bg .logo-webchat .icon {
width: 70px;
height: 70px;
background-size: 100%;
margin-left: -35px;
}
.logo-touch .login-bg .logo-webchat div {
font-size: 18px;
}
}
//登录页
.qiehuanchuping1{
float: right;
svg{
width: 29px;
height: 29px;
margin-top: 24px;
margin-left: 20px;
}
}