body { background: url(https://p2.lefile.cn/fes/cms/2022/07/04/yh6tyahm7wdmgf1c6303ejcuu2s3p8024063.png) no-repeat; background-size: contain; object-fit: cover; background-repeat: no-repeat; background-color: #f6f6f6; } .education .card { margin-top: .37rem; } .education ul.list { display: flex; flex-direction: column; list-style: none; } .education li.item { height: .94rem; background: #fff; box-shadow: 0 0 10px 0 rgba(247, 233, 233, .5); border-radius: 14px; display: flex; justify-content: space-around; align-items: center; margin-top: .08rem; } .education li.item .left { margin-left: .12rem; width: 2rem; display: flex; flex-direction: column; } .education .name { font-size: .18rem; color: #252525; letter-spacing: 0; font-weight: 400; } .education .description { font-size: .11rem; color: #9b9b9b; letter-spacing: 0; line-height: .16rem; font-weight: 400; margin-top: .09rem; } .education .topic { font-size: .12rem; color: #ff6969; letter-spacing: -0.07px; line-height: 17px; font-weight: 400; } .education .note { font-size: .1rem; color: #606060; letter-spacing: 0; line-height: .14rem; font-weight: 400; } .education .note-desc { display: inline-block; font-size: .1rem; color: #9b9b9b; letter-spacing: 0; font-weight: 400; } .education .agree { display: inline-flex; flex-wrap: wrap; justify-content: space-evenly; align-content: stretch; align-items: center; margin-top: .18rem; position: relative; } .education .student-area { display: flex; flex-direction: row; align-content: space-around; justify-content: flex-start; margin-top: .3rem; padding: 0 .04rem; } .education .teacher-area { display: flex; flex-direction: row; align-content: space-around; justify-content: flex-start; margin-top: .05rem; padding: 0 .04rem; } .education .button-empty { border: 1px solid #ff2f2f; border-radius: .15rem; width: .9rem; height: .3rem; background: #fff; color: #ff2f2f; font-size: .14rem; line-height: .3rem; text-align: center; } .education .button-success { border-radius: .15rem; width: .9rem; height: .3rem; color: #fff; font-size: .14rem; line-height: .3rem; text-align: center; background: linear-gradient(349deg, #f00 24%, #9f79ff 90%); } .common-po { display: inline-block; width: .2rem; height: .2rem; cursor: pointer; } #agree { position: absolute; left: 0; top: 0; opacity: 0; } .popup-node { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000001; background: rgba(0, 0, 0, .3); display: none; } .popup-node .popup-content { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 60%; background: #fff; border-radius: .1rem; padding: .25rem; display: flex; flex-direction: column; } .popup-node .popup-content .popup-title { font-family: FZLanTingHeiS-DB-GB; font-size: .17rem; font-weight: normal; line-height: .2rem; text-align: center; letter-spacing: normal; color: #252525; margin-bottom: .1rem; font-weight: 500; } .popup-node .popup-content .popup-desc { font-family: FZLanTingHeiS-R-GB; font-size: .12rem; font-weight: normal; line-height: .17rem; text-align: center; letter-spacing: normal; color: #606060; } .popup-node .popup-content .popup-btns { display: flex; justify-content: space-evenly; margin-top: .2rem; } .popup-node .popup-content .popup-success { width: 1.5rem; height: .34rem; font-size: .13rem; color: #fff; display: flex; justify-content: center; align-items: center; background: #ff2f2f; margin: .21rem auto 0; border-radius: .18rem; cursor: pointer; } .popup-node .popup-content .popup-succ { width: .98rem; height: .34rem; font-size: .13rem; display: flex; justify-content: center; align-items: center; color: #ff2f2f; border: 1px solid #ff2f2f; border-radius: .18rem; cursor: pointer; } .popup-node .popup-content .popup-skip { width: .98rem; height: .34rem; font-size: 13px; color: #fff; display: flex; justify-content: center; align-items: center; background: #ff2f2f; border-radius: .18rem; cursor: pointer; } .popup-node .popup-content .close-popup { position: absolute; left: 50%; bottom: -.6rem; width: .3rem; height: .3rem; font-size: .2rem; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; color: #fff; border: 1px solid #fff; border-radius: 50%; cursor: pointer; } .popup-node { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000001; background: rgba(0, 0, 0, .3); display: none; } .popup-node .popup-content { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 60%; background: #fff; border-radius: .1rem; padding: .25rem; display: flex; flex-direction: column; } .popup-node .popup-content .popup-title { font-family: FZLanTingHeiS-DB-GB; font-size: .17rem; font-weight: normal; line-height: .2rem; text-align: center; letter-spacing: normal; color: #252525; margin-bottom: .1rem; font-weight: 500; } .popup-node .popup-content .popup-desc { font-family: FZLanTingHeiS-R-GB; font-size: .12rem; font-weight: normal; line-height: .17rem; text-align: center; letter-spacing: normal; color: #606060; } .popup-node .popup-content .popup-btns { display: flex; justify-content: space-evenly; margin-top: .2rem; } .popup-node .popup-content .popup-success { width: 1.5rem; height: .34rem; font-size: .13rem; color: #fff; display: flex; justify-content: center; align-items: center; background: #ff2f2f; margin: .21rem auto 0; border-radius: .18rem; cursor: pointer; } .popup-node .popup-content .popup-succ { width: .98rem; height: .34rem; font-size: .13rem; display: flex; justify-content: center; align-items: center; color: #ff2f2f; border: 1px solid #ff2f2f; border-radius: .18rem; cursor: pointer; } .popup-node .popup-content .popup-skip { width: .98rem; height: .34rem; font-size: 13px; color: #fff; display: flex; justify-content: center; align-items: center; background: #ff2f2f; border-radius: .18rem; cursor: pointer; } .popup-node .popup-content .close-popup { position: absolute; left: 50%; bottom: -.6rem; width: .3rem; height: .3rem; font-size: .2rem; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; color: #fff; border: 1px solid #fff; border-radius: 50%; cursor: pointer; } .auth-notice-popup { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background: rgba(0, 0, 0, .5); } .auth-notice-popup .anp-content { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.64rem; background: #fff; border-radius: .2rem; box-sizing: border-box; padding: .24rem .24rem .18rem; color: #333; } .auth-notice-popup .anp-title { font-size: .17rem; line-height: .33rem; font-weight: 600; text-align: center; margin-bottom: .14rem; } .auth-notice-popup .anp-desc, .auth-notice-popup .anp-list, .auth-notice-popup .anp-tip { font-size: .11rem; line-height: .19rem; color: #666; } .auth-notice-popup .anp-list { margin: .04rem 0 0; padding-left: 0; list-style: none; } .auth-notice-popup .anp-tip { margin-top: .05rem; } .auth-notice-popup .anp-tip-label { color: #444; font-weight: 600; } .auth-notice-popup .anp-btn-group { margin-top: .16rem; display: flex; justify-content: space-between; } .auth-notice-popup .anp-btn-primary, .auth-notice-popup .anp-btn-secondary { height: .28rem; width: .93rem; line-height: .28rem; text-align: center; font-size: .13rem; border-radius: .18rem; box-sizing: border-box; font-weight: 500; } .auth-notice-popup .anp-btn-primary { background: #ff2f3b; color: #fff; border: 1px solid #ff2f3b; } .auth-notice-popup .anp-btn-secondary { background: #fff; color: #ff2f3b; border: .01rem solid #ff2f3b; } .auth-notice-popup .anp-close { position: absolute; left: 50%; bottom: -0.66rem; transform: translateX(-50%); width: .42rem; height: .42rem; border-radius: 50%; border: .02rem solid rgba(255, 255, 255, .85); box-sizing: border-box; cursor: pointer; } .auth-notice-popup .anp-close::before, .auth-notice-popup .anp-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: .2rem; height: .02rem; background: rgba(255, 255, 255, .9); transform-origin: center; margin-left: -0.1rem; margin-top: -0.01rem; } .auth-notice-popup .anp-close::before { transform: rotate(45deg); } .auth-notice-popup .anp-close::after { transform: rotate(-45deg); }