html, body, #root { height: 100% !important; } .ai-test-help { width: 100%; height: 100%; text-align: center; letter-spacing: 1px; .banner { width: 100%; height: 282px; background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/help-banner.png"); background-repeat: no-repeat; background-position: center; background-size: contain; padding-top: 60px; img { height: 18px; } span { font-size: 25px; font-weight: 400; color: #ffca28; margin: 0 9px; } } .tip-s { margin-top: 10px; font-weight: 400; font-size: 12px; color: #ff5f83; } .tip-m { margin-top: 30px; color: #525c65; font-weight: 400; font-size: 14px; } .tip-l { margin-top: 30px; color: #ff5f83; font-weight: 500; font-size: 18px; } .tip-num { margin-top: 15px; color: #09f; font-weight: 600; font-size: 20px; &:before, &:after { width: 13px; height: 12px; display: inline-block; content: ""; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: text-top; margin: 0 20px; } &:before { background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/mark_icon_l.png"); } &:after { background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/mark_icon_r.png"); } } .share-btn { height: 40px; line-height: 40px; border-radius: 5px; position: fixed; right: 10px; left: 10px; bottom: 5px; background-color: #ffae00; color: #fff; font-size: 18px; font-weight: 400; text-align: center; } .share { position: fixed; right: 0; left: 0; bottom: 0; top: 0; background: rgba(0, 0, 0, 0.6); color: #fff; .content { position: relative; height: 100px; padding-top: 36px; box-sizing: border-box; font-size: 16px; .iconfont { position: absolute; top: 10px; right: 40px; font-size: 38px; color: #fff; width: 50px; height: 38px; background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/share_arrow.png") center center no-repeat; background-size: 100% 100%; } } } }