.login{ width: 100%; font-family:PingFang SC; } .login-box{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .login-input{ margin-top: 0.6rem; width: 5.5rem; height: 0.8rem; display: flex; align-items: center; justify-content: center; background:rgba(245,245,245,1); border-radius:0.4rem; } .login-input>img{ width: 0.42rem; height: 0.42rem; } .login-input>input{ font-size: 0.28rem; border: 0; outline: 0; height: 0.6rem; width: 4rem; margin-left: 0.16rem; background-color: rgba(245,245,245,1); } .login-input>input::placeholder{ color: #A9A9A9; } .login-gender{ margin-top: 0.4rem; display: flex; align-items: center; } .login-gender .title{ display: flex; align-items: center; font-size: 0.28rem; color: #A9A9A9; } .login-gender .title>img{ width: 0.42rem; height: 0.42rem; margin-right: 0.16rem; } .options_gender{ display: flex; align-items: center; color: #292929; font-size: 0.28rem; font-weight: bold; position: relative; } .radio { color: #292929; font-size: 0.28rem; font-weight: bold; display: flex; align-items: center; margin-left: 0.82rem; } .radio>span{ margin-right: 0.2rem; } .radio input[type="radio"] { position: absolute; opacity: 0; } .radio input[type="radio"] + .radio-label:before { margin-top: 0.12rem; content: ''; background: #f4f4f4; border-radius: 100%; border: 1px solid #b4b4b4; display: inline-block; width: 0.28rem; height: 0.28rem; position: relative; top: -0.2em; /* margin-right: 1rem; */ vertical-align: top; cursor: pointer; text-align: center; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .radio input[type="radio"]:checked + .radio-label:before { background-color: #3197EE; box-shadow: inset 0 0 0 4px #f4f4f4; } .radio input[type="radio"]:focus + .radio-label:before { outline: none; border-color: #3197EE; } .radio input[type="radio"]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #f4f4f4; border-color: #b4b4b4; background: #b4b4b4; } .radio input[type="radio"] + .radio-label:empty:before { margin-right: 0; } .login-btn{ margin-top: 0.38rem; width: 5.5rem; height: 0.8rem; background-color: #389AED; border-radius: 0.4rem; font-size: 0.32rem; color: #fff; text-align: center; line-height: 0.8rem; outline: 0; border: 0; } .login-agreement{ font-size: 0.24rem; color: #292929; margin-top: 0.32rem; } .login-agreement>a{ color: #389AED; font-size: 0.24rem; }