.yohobindbtn { display: block; width: 210px; height: 45px; background-color: #f02200; color: #fff; text-align: center; font-size: 16px; line-height: 45px; } .hide { display: none; } .novisiable { visibility: hidden; } .actlevel { background-color: #f02200 !important; color: white !important; } .mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; } .bindwrapper { margin: 0 auto; padding-top: 122px; min-height: 550px; width: 980px; .img-check-tip { top: 110px !important; } } .welcomeword { margin-bottom: 15px; width: 100%; color: #545454; text-align: center; font-size: 22px; line-height: 22px; .yoho { color: #e12000; } } .safeword { margin-bottom: 63px; width: 100%; color: #545454; text-align: center; font-size: 16px; line-height: 16px; } .yohobindrow { margin: 0 auto 22px; width: 485px; height: 40px; .name { float: left; margin-right: 14px; width: 96px; text-align: right; } .areatag { height: 30px; line-height: 30px; } .phonetag, .setpwdtag { height: 47px; line-height: 47px; } .content { float: left; margin-top: 0; padding-left: 0; text-align: left; } .errinfo { margin-left: 5px; color: #f02200; line-height: 49px; } &:after { display: block; clear: both; content: ""; } } .sendnotify { margin: 0 auto; width: 260px; text-align: left; } .validaterow { margin: 0 auto 22px; padding-left: 248px; .name { float: left; margin-right: 14px; width: 96px; text-align: right; } .areatag { height: 30px; line-height: 30px; } .phonetag { height: 47px; line-height: 47px; } .content { float: left; text-align: left; .err-tip { left: 430px; } } &:after { display: block; clear: both; content: ""; } .validatewrapper { float: left; margin-left: 18px; width: 133px; height: 45px; background-color: #d8d8d8; color: #000; text-align: center; font-size: 13px; line-height: 45px; .yohobindbtn { width: 133px; font-size: 13px; } } } .validatepicrow { overflow: hidden; margin: 0 auto 22px; padding-left: 250px; .name { float: left; margin-right: 14px; width: 96px; text-align: right; } .areatag { height: 30px; line-height: 30px; } .phonetag { height: 47px; line-height: 47px; } .content { float: left; text-align: left; } &:after { display: block; clear: both; content: ""; } .validatewrapper { float: left; margin-left: 18px; height: 45px; color: #000; text-align: center; font-size: 13px; line-height: 45px; .yohobindbtn { width: 133px; font-size: 13px; } } .change-captcha { color: #f02200; text-decoration: underline; cursor: pointer; } } .setpwdwrapper { margin-bottom: 10px; height: 45px; } .safelevel { margin: 0 auto; width: 291px; height: 15px; color: #000; text-align: right; font-size: 10px; span { margin-right: 4px; padding: 1px 8px; width: 28px; height: 15px; background-color: #e5e5e5; color: #000; font-size: 10px; line-height: 15px; } } .green .color { background-color: #0f0; color: #fff; } .yellow .color { background-color: #ff0; color: #fff; } .red .color { background-color: #f00; color: #fff; } .yohoselectarea { position: relative; box-sizing: border-box; width: 131px; height: 33px; .optionshow { padding-left: 16px; width: 100%; height: 100%; border: 1px solid #d9d9d9; .areaname { display: block; float: left; width: 110px; height: 100%; color: #000; font-size: 13px; line-height: 33px; } .righttag { display: block; float: left; width: 21px; height: 100%; background-color: #d8d8d8; background-image: resolve("passport/arrowbottom.png"); background-position: center center; background-repeat: no-repeat; line-height: 33px; } } .optionslist { position: absolute; top: 35px; left: 0; z-index: 2; width: 149px; background-color: white; .optionitem { padding-left: 16px; height: 33px; font-size: 13px; line-height: 33px; &:hover { background-color: #dfdfdf; } } } } .yohophonewrapper { position: relative; width: 271px; height: 47px; border: 1px solid #d9d9d9; .areanum { float: left; width: 63px; height: 100%; background-color: #d8d8d8; color: #000; text-align: center; line-height: 47px; } .phonenum { float: left; box-sizing: border-box; padding-left: 8px; width: 205px; height: 45px; outline: none; border: none; color: #000; line-height: 38px; } .validatenum, .pwdcontent { width: 100%; } } .protoctolwrapper { overflow: hidden; margin: 38px auto 0; padding-left: 85px; width: 350px; .choosewrapper { float: left; margin-right: 14px; width: 13px; height: 13px; background-color: #4c4c4c; background-image: resolve("passport/choosed.png"); background-position: center center; background-repeat: no-repeat; } .choosetag { display: block; margin: 0; width: 110%; height: 110%; opacity: 0; } span { float: left; color: #666; font-size: 13px; line-height: 14px; } .protoctol { color: #f02200; text-decoration: underline; } &:after { display: block; clear: both; content: ""; } } .confirmwrapper { overflow: hidden; margin-top: 47px !important; } .btnwrapper { margin: 20px auto 0; padding-left: 85px; width: 350px; } .thirdloginwrapper { margin: 0 auto; padding-top: 160px; min-height: 450px; width: 1150px; .safeword { margin-bottom: 30px; } .left { float: left; box-sizing: border-box; width: 450px; height: 318px; border-right: 1px solid #e5e5e5; } .right { float: right; box-sizing: border-box; padding-top: 64px; width: 696px; height: 318px; } .gobuy, .completeprofile { float: left; width: 94px; height: 94px; border-radius: 50%; background-color: #f02200; color: white; text-align: center; line-height: 94px; } .gobuy { margin-right: 80px; margin-left: 228px; } } .bindsuccesswrapper { margin: 0 auto; padding-top: 160px; min-height: 450px; width: 1150px; .successwrapper { margin: 0 auto 16px; width: 320px; height: 29px; .successtag { float: left; margin-right: 28px; width: 29px; height: 29px; background-image: resolve("passport/bindsuccess.png"); background-repeat: no-repeat; } .congratulation { display: inline-block; height: 29px; font-size: 22px; line-height: 29px; } } .info { margin-bottom: 48px; text-align: center; font-size: 16px; } .gobuynow { margin: 0 auto; } } .bindconfrimwrapper { box-sizing: border-box; margin: -217px auto; padding-top: 37px; width: 900px; height: 439px; background-color: #fff; .topwrapper { margin: 0 auto 32px; width: 281px; height: 90px; .userphoto { margin-right: 22px; width: 90px; height: 90px; border-radius: 50%; vertical-align: middle; } .username { @mixin ellipsis ; display: inline-block; width: 160px; color: #545454; vertical-align: middle; font-weight: bold; } } .usertaginfo { margin-bottom: 15px; color: #545454; text-align: center; font-weight: bold; font-size: 18px; } .usertagremind { margin-bottom: 47px; color: #888; text-align: center; font-size: 16px; } .otherphone { margin: 0 auto 64px; } .logindirectly { display: block; color: #f02200; text-align: center; text-decoration: underline; } } #alreayregist .bindconfrimwrapper { height: 550px; .gobindwrapper { margin-bottom: 0; } .img-check-main, .img-check-tip { top: 110px; } } .yohobindbtn[disabled] { background-color: #e5e5e5; cursor: not-allowed; } .gobindwrapper { margin-bottom: 70px; width: 100%; height: 45px; overflow: hidden; &:after { display: block; clear: both; content: ""; } .myphone { float: left; margin-left: 20px; width: 193px; } .logindirectly { display: inline-block; } .validaterow { float: left; overflow: hidden; margin: 0 auto 22px; padding-left: 222px; .name { float: left; margin-right: 14px; width: 96px; text-align: right; } .areatag { height: 30px; line-height: 30px; } .phonetag { height: 47px; line-height: 47px; } .content { float: left; text-align: left; .validatacode { float: left; box-sizing: border-box; padding-left: 8px; width: 113px; height: 45px; outline: none; border: 1px solid #d9d9d9; color: #000; line-height: 38px; } } .validatewrapper { float: left; margin-left: 18px; width: 133px; height: 45px; background-color: #d8d8d8; color: #000; text-align: center; font-size: 13px; line-height: 45px; .yohobindbtn { width: 133px; font-size: 13px; } } } } .gobindbottomwrapper { padding-left: 341px; width: 100%; .logindirectly { float: left; margin-right: 36px; color: #f02200; text-decoration: underline; } } .pwd-tips { position: absolute; top: -10px; left: 285px; z-index: 1000; padding-top: 7px; width: 160px !important; height: 72px; background: #fff url(/passport/tip/block.png) no-repeat; font-size: 12px; > div { position: relative; margin-left: 15px; padding-left: 15px; height: 22px; color: #b9b9b9; font-size: 12px; line-height: 22px; i { position: absolute; top: 50%; left: -2px; margin: -7px 0 0; width: 14px; height: 14px; background: url(/passport/tip/info.png) no-repeat; } &.no { color: red; i { background: url(/passport/tip/error.png) no-repeat; } } &.yes { i { background: url(/passport/tip/success.png) no-repeat; } } } } .tip-panel { position: absolute; z-index: 100; display: none; margin-top: 5px; padding: 0 10px; width: 248px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 5px; background-color: #161616; cursor: pointer; li { height: 20px; color: #b9b9b9; line-height: 20px; } } .err-tip { position: absolute; top: 8px; left: 285px; padding: 6px 0; color: #f00; white-space: nowrap; font-size: 14px; i { display: block; float: left; margin-right: 5px; width: 14px; height: 14px; background: url(/passport/tip/error.png) no-repeat; } a { color: #f00; text-decoration: underline; } } .backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; } .err-info { position: absolute; top: -41px; left: 0; z-index: 1000; display: none; padding: 0 10px; height: 30px; border: 1px solid #ffbdbe; background-color: #ffebeb; color: red; line-height: 30px; b { position: absolute; top: 30px; left: 10px; width: 17px; height: 9px; background: resolve("passport/angle.png"); } }