body.passport-body { background-color: #444; font-family: "MicroSoft YaHei", SimSun, sans-serif; * { box-sizing: border-box; } .main-wrap { position: relative; } } .passport-page { text-align: center; padding: 0 6%; .bind-tip { margin-top: 10PX; margin-bottom: 10PX; color: #fff; font-size: 13PX; .title { font-size: 28PX; line-height: 1.5; } } .tip { margin-top: 30PX; color: #fff; font-size: 16PX; line-height: 2; a { color: #3fb274; } } .header { position: relative; height: 40PX; margin: 20PX 0 30PX; .go-back { display: block; position: absolute; height: 30PX; width: 30PX; top: 5PX; left: 0; background: resolve("passport/go-back.png") no-repeat; background-size: 100% 100%; } .title { font-size: 20PX; line-height: 40PX; color: #fff; } .img-header { width: 68PX; height: 40PX; background: resolve("passport/yoho-family.png") no-repeat; background-size: 100% 100%; margin: 0 auto; } .opts { display: block; background: transparent; border: solid 1PX #fff; width: auto; height: 30PX; line-height: 30PX; border-radius: 30PX; color: #fff; padding-left: 15PX; padding-right: 15PX; position: absolute; right: 0; top: 5PX; } } .input-container, .select-container { position: relative; width: 100%; height: 52PX; font-size: 20PX; background-color: #575757; border: 1px solid #606060; border-radius: 5PX; text-align: left; color: #fff; } .select-container { .select { position: absolute; height: 50PX; padding-right: 40PX; right: 0; color: #fff; background-color: #575757; border: 0; border-radius: 5PX; appearance: none; direction: rtl; -webkit-appearance: none; &:focus { outline: 0; border: none; } &:-moz-focusring { color: transparent; text-shadow: 0 0 0 #fff; } } .select-title { line-height: 2.5; margin-left: 15PX; } .arrow-right { position: absolute; width: 13PX; height: 20PX; right: 15PX; top: 16PX; background: resolve("passport/arrow-right.png") no-repeat; background-size: 100% 100%; } } .has-eye, .has-clear { padding-right: 30PX; } .area-code { position: absolute; left: 15PX; line-height: 2.5; } .invite-code { position: absolute; left: 15PX; line-height: 2.5; } .phone-container { padding-left: 55PX; } .code-container { padding-left: 70PX; } .input { width: 100%; line-height: 26PX; padding: 12PX 0; padding-left: 15PX; border-radius: 5PX; color: #fff; background-color: transparent; border: none; } .code { padding-left: 35PX; } .btn { display: block; width: 100%; font-size: 20PX; line-height: 2.5; background-color: #36a74c; border-radius: 5PX; color: #fff; border: none; outline: none; &.disable, &:disabled { background-color: #a2a2a2; } } .country-select.in-android-uc { width: 140PX; } .clear-input { position: absolute; display: none; top: 18PX; right: 10PX; width: 16PX; height: 16PX; background: resolve("passport/clear-input.png") no-repeat; background-size: 100% 100%; outline: none; border: none; padding: 0; /* button has padding in default */ } .eye { position: absolute; top: 20PX; right: 10PX; width: 19PX; height: 12PX; background: resolve("passport/eye.png") no-repeat; background-size: 100% 100%; &.close { background-image: resolve("passport/eye-close.png"); } } .row { margin-bottom: 10PX; } .pwd-lint { text-align: left; color: #858585; margin-top: 20px; margin-bottom: 35px; .icon-tip { color: #fc0304; } } .app-agreement { color: #fff; i { color: #000; position: relative; left: -33px; font-size: 28px; } span { display: inline-block; border-radius: 12px; width: 24px; height: 24px; background: #fff; position: relative; top: 2px; left: -7px; } .agreement-detail { color: #fff; position: relative; left: -16px; } } } .prompt { width: 540px; height: 290px; background: #fff; border-radius: 15px; font-size: 26px; position: absolute; top: 300px; left: 50px; display: none; .word { width: 100%; height: 200px; display: block; padding: 50px 60px; text-align: center; line-height: 50px; } .choose { width: 100%; height: 90px; border-top: 1px solid #e0e0e0; span { width: 50%; display: inline-block; text-align: center; height: 88px; line-height: 88px; } .ensure { display: inline-block; float: right; border-left: 1px solid #e0e0e0; color: #f41e1f; } } }