.register-form-wrapper { background: #fff; padding: 5rem 4.5rem; border-radius: 0.8rem; width: 40%; margin: auto; } .register-form-wrapper .title { margin-bottom: 7rem; position: relative; } .register-form-wrapper .title span { width: 4rem; height: 0.2rem; display: block; background: #FF7200; position: absolute; bottom: -1.2rem; left: 0; transition: left 0.4s; } .register-form-wrapper .title p { font-size: 2rem; color: #0147a6; font-weight: 600; } .sms-register form input { width: 100%; height: 4.6rem; border-radius: 0.4rem; outline: none; padding: 0 1.5rem; border: #c1c1c1 1px solid; font-size: 1.5rem; } .sms-register form input::placeholder { color: #9d9d9d; } .sms-register form > div { position: relative; margin-bottom: 3.5rem; } .sms-register form > div:last-of-type { margin-bottom: 0; } .sms-register form > div p { position: absolute; bottom: -2rem; color: #FF7200; display: none; } .register-form-wrapper .checkbox { margin-top: 3rem; display: flex; align-items: center; } .register-form-wrapper .checkbox label { font-size: 1.4rem; color: #666666; margin-left: 0.8rem; cursor: pointer; } .register-form-wrapper .checkbox a { font-size: 1.4rem; color: #0147a6; } .register-form-wrapper .checkbox input { width: 1.4rem; height: 1.4rem; border: #666666 1px solid; cursor: pointer; } .register-form-wrapper .register-btn { width: 100%; background: #0147a6; color: #ffffff; font-size: 1.5rem; height: 4.6rem; border: #0147a6 1px solid; border-radius: 0.4rem; margin-top: 4rem; letter-spacing: 0.5rem; cursor: pointer; } .register-form-wrapper .register-btn:hover { background: #0054c7; } .login-btn { display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 3rem; font-size: 1.3rem; } .register-btn a { font-size: 1.3rem; margin-left: 0.5rem; color: #0147a6; text-decoration: underline; } .register-code-content { display: flex; justify-content: space-between; } .register-code-content button { width: 30%; border-radius: 0 0.4rem 0.4rem 0; border: #c1c1c1 1px solid; border-left: 0; cursor: pointer; } .register-code-content button[disabled] { border-left: none; cursor: no-drop; } .register-code-content input { border-radius: 0.4rem 0 0 0.4rem !important; } .register-alert-wrapper { position: absolute; top: -6rem; background: #ffffff; box-shadow: 0 0.1rem 1rem 0.1rem rgb(0 84 199 / 10%); display: flex; align-items: center; width: 50rem; height: 6rem; border-radius: 0.8rem; left: calc(calc(100% - 20rem) / 2); transition: top 0.5s; } .register-alert-wrapper i { font-size: 1.6rem; margin-left: 2rem; margin-right: 2rem; color: #0054c7; } .login-btn a { font-size: 1.3rem; margin-left: 0.5rem; color: #0147a6; text-decoration: underline; } .register-alert-wrapper p, .register-alert-wrapper a { font-size: 1.5rem; color: #0054c7; } .register-alert-wrapper a { text-decoration: underline; } /* 兼容不同分辨率样式 */ @media screen and (max-width: 1919px) and (min-width: 1680px) { .register-form-wrapper { width: 42%; } } @media screen and (max-width: 1679px) and (min-width: 1600px) { .register-form-wrapper { width: 44%; } } @media screen and (max-width: 1599px) and (min-width: 1440px) { .register-form-wrapper { width: 52%; } .login-register-wrapper .top img { width: 16rem; } } @media screen and (max-width: 1439px) and (min-width: 1280px) { .register-form-wrapper { width: 60%; } .login-register-wrapper .top img { width: 15rem; } }