.gender-info{ width: 100%; } .gender-input { padding: 0.15rem 0.3rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F5F5F5; height: 0.78rem; } .gender-inputBox { display: flex; align-items: center; font-size:0.28rem; font-family:PingFang SC; font-weight:500; color:rgba(41,41,41,1) } .gender-inputBox>img{ width: 0.3rem; height: 0.3rem; margin-right: 0.23rem; } .gender-sel{ display: flex; align-items: center; } .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; } .save{ width:5rem; height:0.8rem; background:rgba(33,177,235,1); border-radius:0.4rem; font-size:0.32rem; font-family:PingFang SC; font-weight:500; color:rgba(255,255,255,1); line-height: 0.8rem; text-align: center; margin: 0.3rem auto 0 auto; }