.camp-test-container { height: 100vh; width: 100vw; background-color: #F7F8F9; overflow-y: auto; .icon { display: inline-block; } .layout-flex-center { display: flex; justify-content: center; align-items: center; } .layout-flex-between { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .layout-flex-around { display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .fixed_container { position: fixed; top: 0; left: 0; right: 0; width: 100%; background-color: #F7F8F9; } .camp-test-header { width: 100%; height: 44px; padding: 0 16px; background-color: #FFFFFF; .camp-test-time { span { color: #111111; font-size: 14px; } } .icon-close { font-size: 20px; color: #333333; } .icon-clock { margin-right: 10px; width: 18px; height: 18px; background: url("../image/clock.png") no-repeat; background-size: 100% 100%; } .icon-order { width: 19px; height: 19px; background: url("../image/order.png") no-repeat; background-size: 100% 100%; } .no_height { height: 0; } } .camp-test-title { width: 100%; height: 44px; padding: 0 16px; background-color: #FFF; border-bottom: 1px solid #E5E5E5; margin-top: 10px; .qtitle { font-size: 14px; color: #111111; } .qnumber { font-size: 14px; color: #0099FF; } } .test-item-container { background-color: #F7F8F9; font-size: 14px; color: #333333; padding-bottom: 60px; padding-top: 96px; .ques { min-height: 50px; color: #222; text-align: left; padding: 18px 16px; background-color: #FFF; } ul { background-color: #FFF; } ul > li { color: #333; min-height: 50px; text-align: left; padding: 12px 16px; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; .letter { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; line-height: 24px; border: 1px solid #999999; border-radius: 50%; font-size: 16px; color: #333; flex: 0 0 auto; margin-right: 12px } .des { /* height: 100%; */ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; min-height: 20px; } } ul > li.option_checked { background-color: #F7F8F9; color: #0099ff; min-height: 50px; text-align: left; padding: 12px 16px; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; .letter { border: 1px solid #0099ff; color: #0099ff; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; text-align: center; font-size: 16px; flex: 0 0 auto; margin-right: 12px } } ul > li.user_check { background-color: #FFF; .letter { border: 1px solid #ff5a5a; background-color: #ff5a5a; color: #fff; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; text-align: center; font-size: 16px; flex: 0 0 auto; margin-right: 12px } } ul > li.right_check { background-color: #FFF; color: #000; min-height: 50px; text-align: left; padding: 12px 16px; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; .letter { border: 1px solid #29c8a0; background-color: #29c8a0; color: #fff; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; text-align: center; font-size: 16px; flex: 0 0 auto; margin-right: 12px } } } .change_question_container { position: fixed; width: 100%; height: 60px; left: 0; right: 0; bottom: 0; background-color: #FFF; box-shadow: 0 0 5px 0 rgba(0,0,0,0.06); .change_button { width: 130px; height: 34px; display: flex; justify-content: center; align-items: center; border: 1px solid #0099FF; color: #0099FF; border-radius: 17px; font-size: 16px; } .first_question { border: 1px solid #999999; color: #999999; } } .test-card-container { width: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 44px; background-color: #FFF; padding: 20px 16px 0; font-size: 14px; color: #000; p { margin-bottom: 25px; } .test-item { display: flex; flex-direction: row; justify-content: flex-start; align-content: center; flex-wrap: wrap; } .test-item li { width: 40px; height: 40px; border-radius: 50%; color: #666666; font-size: 16px; border: 1px solid #666666; margin-right: 35px; margin-bottom: 30px; &:nth-child(5n + 0) { margin-right: 0; } } li.answered { border: 1px solid #0099FF; color: #FFF; background-color: #0099FF; } .bottom_commit { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; padding: 8px 16px; border-top: 1px solid #E5E5E5; .commit_answer { width: 100%; height: 44px; background-color: #0099FF; color: #FFF; font-size: 16px; border-radius: 4px; } } } .test-resolve-card-container { position: fixed; width: 100%; height: 100%; left: 0; top: 0; right: 0; background-color: #fff; } } .camp-report-bottom { position: fixed; width: 100%; height: 60px; left: 0; right: 0; bottom: 0; padding: 10px 16px; border-top: 1px solid #E5E5E5; .bottom_commit { width: 100%; height: 100%; background-color: #0099FF; color: #fff; font-size: 16px; border-radius: 4px; } } .report-body { border-top: 1px solid #DDDDDD; height: 100%; display: flex; flex-direction: column; align-items: center; } .right_rate { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 145px; height: 145px; border: 1px solid #CCCCCC; border-radius: 50%; margin: 30px 0 18px 0; font-size: 12px; color: #999999; .rate { margin-top: 20px; } .percentage { color: #333; font-size: 50px; display: flex; flex-direction: row; justify-content: center; align-items: baseline; position: relative; span:nth-child(2) { font-size: 16px; color: #666666; position: absolute; bottom: 16px; right: -18px; } } } .use_total_time { font-size: 16px; color: #333; margin-bottom: 26px; } .right_wrong_li { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 0 16px; width: 100%; li { width: 40px; height: 40px; border: 1px solid #666666; font-size: 16px; color: #666666; border-radius: 50%; margin-right: 35px; margin-bottom: 30px; &:nth-child(5n + 0) { margin-right: 0; } } li.right{ background-color: #29C8A0; color: #fff; border: 1px solid #29C8A0; } li.wrong{ background-color: #FE5A59; color: #fff; border: 1px solid #FE5A59; } li.noSelect { background-color: #fff; color: #666; border: 1px solid #666666; } } .test-resolve { background-color: #FFF; margin-top: 8px; padding: 16px; font-size: 15px; color: #333333; .isRight { font-size: 12px; color: #666666; margin-bottom: 8px; } p { color: #999999; margin-bottom: 4px; } }