最近项目中使用到很多答题卡，实现了一个可以复用的答题卡组件。
项目使用HbuilderX，uniapp，uview进行开发。
代码中有些地方判断写的没必要，懒得改了，xdm看不惯自己改吧 hhhhhhh ^_^。
HTML代码：微信小程序页面，如果要修改为H5，直接把view标签修改为div，
并把 :style="[getBackgroundColor(item)]"，修改为:style="getBackgroundColor(item)"
{{ questionType }}题{{ current }}|{{ list.length }}提交答案提交答案提交答案
AI智能解析
查看答案
收藏
答题卡
上一题
{{ list.length === current ? '完成' : '下一题' }}答题卡未做已做正确错误{{ index + 1 }}
答题完成{{ examName }}正确率{{ (right / list.length).toFixed(2) * 100 }}%查看解析返回列表 js代码：使用了lodash，需要先安装lodash npm install lodash，
项目中包含很多题型，可以根据自己的题型进行修改，每个题型都由对应的数字type表达：
1: '单项选择'，2: '多项选择'，3: '问答'，4: '材料'，5: '判断'，6: '填空'。
关键信息：currentQuestion：当前题目信息，list：题目列表，collectionList：收藏列表
data中的数据：
data() {const type = Number(this.$route == undefined ? 1 : this.$route.query.type);return {examquestionSource: {},tokenDetail: {},type,isEqual,form: {answer: [''],questionId: ''},radio: 3,tip: type === 2,list: [],current: 1,submitLoading: false,loading: false,examName: this.$route == undefined ? '' : this.$route.query.name,answerPanel: false,redoExam: false,showAnalysis: false,statusIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A25rightn.png',rightIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A25rightn.png',errorIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A49errorn.png',resultText: '',rightText: '回答正确',errorText: '回答错误',isFinal: false,materialList: [],strategy: '',collectionList: [],collectIds: [],everyDay: '',selectRight: 0,right: 0,error: 0,submitList: [],// 错题errChild: [],paperId: '',collectList: [],imitateTest: uni.getStorageSync('imitateTest')// // 0 综合知识// // 1 案例分析};},计算属性 computed：
computed: {currentQuestion() {return this.getCurrentQuestion();},questionType() {return {1: '单项选择',2: '多项选择',3: '问答',4: '材料',5: '判断',6: '填空'}[this.currentQuestion.type || 3];},isAnswer() {return this.type === 1;},getBackgroundColor() {return function(item = {}) {if (this.currentQuestion.type == 1) {if (this.tip && this.currentQuestion.rightAnswer === item.value && item.value === this.currentQuestion.stuAnswer)return {backgroundColor: 'rgb(168 255 173)'};else if (this.tip && this.currentQuestion.rightAnswer !== item.value && item.value === this.currentQuestion.stuAnswer)return {backgroundColor: '#ffbaba'};else if (this.tip && this.currentQuestion.rightAnswer == item.value)return {backgroundColor: 'rgb(168 255 173)'};else return {};}if (this.currentQuestion.type == 4) {if (this.tip && parseInt(this.currentQuestion.rightAnswer) === item)return {backgroundColor: 'rgb(168 255 173)'};else if (this.tip && this.currentQuestion.rightAnswer != item)return {backgroundColor: '#ffbaba'};else return {};}if (this.currentQuestion.type == 5) {let YorN = '';if (item == 0) {YorN = '错误';} else {YorN = '正确';}console.log(this.currentQuestion.rightAnswer[0] === YorN);if (this.tip && this.currentQuestion.rightAnswer[0] === YorN)return {backgroundColor: 'rgb(168 255 173)'};else if (this.tip && this.currentQuestion.rightAnswer[0] != YorN)return {backgroundColor: '#ffbaba'};else return {};}};},answerEqual() {return function(a, b, c) {if (c == 1) {return a[0] === b[0];} else if (typeof a === 'object' && typeof b === 'object') {return JSON.stringify(a) === JSON.stringify(b);}return a === b;};}},监听数据变化 watch:
watch: {form: {handler(old, news) {},deep: true},currentQuestion(value) {//题目信息if (value.type === 1) {if (value.stuAnswer.length > 0) {this.form.answer = value.stuAnswer;this.checkAnswer();} else {this.form.answer = '';}}if (value.type === 2) {if (value.stuAnswer.length > 0) {this.form.answer = value.stuAnswer;this.checkAnswer();} else this.form.answer = [];}if (value.type === 3) {this.form.answer = value.stuAnswer.length > 0 ? value.stuAnswer : '';if (value.stuAnswer.length > 0) this.checkAnswer();}if (value.type === 6) {this.form.answer = value.stuAnswer.length > 0 ? value.stuAnswer : '';if (value.stuAnswer.length > 0) this.checkAnswer();}if (value.type === 4) {// console.log(value);if (value.stuAnswer.length > 0) {this.form.answer = value.stuAnswer;this.checkAnswer();} else this.form.answer = '';}if (value.type === 5) {console.log(value);console.log(value.stuAnswer);if (value.stuAnswer.length > 0) {this.form.answer = value.stuAnswer;this.checkAnswer();} else this.form.answer = '';}}},onLoad()生命周期:
根据自己的页面传参，在onLoad中获取，并根据options中的数据进行判断获取的是什么题目，例如：从每日一练、模拟考试、收藏、错题等跳转传参不同，获取的题目也不同。
onLoad(options) {this.getList(1);this.getCollectionList();},methods方法：
toAi() {// 跳转文心一言，并携带题目。uni.navigateTo({url: `/pages/wenxin/index?question=${this.currentQuestion.title}`});},// 获取收藏列表async getCollectionList(id) {this.collectIds = [];this.collectionList = [];let res = await this.$request.request({url: `/student/collect`,method: 'GET'});let collectionList = res.data;for (let collect of collectionList) {if (collect.paperId == this.currentQuestion.paperId) {this.collectionList = collect.collectChildren;for (let question of collect.collectChildren) {this.collectIds.push(question.questionId);}}}},// 收藏async addCollection() {// 如果获取的收藏列表中包含点击的题目id，就取消收藏if (this.collectIds.includes(this.currentQuestion.id)) {await this.$request.request({url: `/student/collect?questionId=${this.currentQuestion.id}`,method: 'DELETE'}).then(res => {// 重新获取收藏列表this.getCollectionList();// 提示uni.showToast({title: '取消收藏',icon: 'none',duration: 1500});});} else {// 否则添加收藏await this.$request.request({url: `/student/collect`,method: 'POST',data: {questionId: this.currentQuestion.id,paperId: this.currentQuestion.paperId}}).then(res => {// 重新获取收藏列表this.getCollectionList();// 提示uni.showToast({title: '收藏成功',icon: 'none',duration: 1500});});}},// 下一题async handlePreNextClick(p) {if (this.list.length === this.current) {if (this.right + this.error == this.list.length) {// 提交答案this.isFinal = true;if (this.everyDay == true) {// 如果每日一练还要添加每日一练记录this.postDays();}} else {// 最后一道题uni.showToast({title: `当前最后一题，您还有${this.list.length - (this.right + this.error)}道题目未作答`,icon: 'none',duration: 1500});}}if (p === 1 && (!this.isAnswer || this.currentQuestion.type === 3)) {await this.submit();}if (this.isAnswer) {this.tip = false;}// 查看解析if (this.redoExam === true) this.tip = true;// current为题目序号this.current = Math.max(1, Math.min(this.current + p, this.list.length));this.checkAnswer();if (this.redoExam === false) this.tip = false;},// 添加每日一练记录postDays() {this.$request.request({url: `/student/dailyParactice?accuracy=${(this.selectRight / this.list.length).toFixed(2)}`,method: 'POST'}).then(res => {// console.log(res);// 显示返回结果uni.showToast({title: res.msg,icon: 'none',duration: 2000});// 等待一下之后跳转首页setTimeout(function() {uni.reLaunch({url: '/pages/chapters/index'});}, 2000);});},getCurrentQuestion() {const data = _.cloneDeep(this.list).find((_, i) => i === this.current - 1) || {};data.formOptions = Object.entries(data.options || {}).map(([key, value]) => ({label: key + '、' + value,value: key}));if (data.type === 1 && Array.isArray(data.rightAnswer) && data.rightAnswer.length > 0) {data.rightAnswer = data.rightAnswer[0];}return data;},// 答题记录async noteTitle(correct, userAnswer) {// 缓存中的course，在点击课程的时候会保存课程的信息在缓存中。if (uni.getStorageSync('course')) {var course = JSON.parse(uni.getStorageSync('course'));// 添加刷题记录到数据库await this.$request.request({url: `/student/pascal/count`,method: 'POST',data: {courseId: course.coursesId, //课程idcourseName: course.paperName, //课程名称pascalId: this.currentQuestion.id, //试题IDanswer: userAnswer, //用户作答isRigth: correct, //是否正确paperId: this.currentQuestion.paperId //套题id}}).then(res => {// console.log('答题记录', res);});}},handleSubmit() {let isRight = false;if (this.currentQuestion.type === 1 || this.currentQuestion.type === 2) {this.list[this.current - 1].stuAnswer = this.form.answer;if (this.currentQuestion.type === 2) this.form.answer = this.form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt());if (this.outputList(this.currentQuestion.rightAnswer, 'this.currentQuestion.rightAnswer') !== this.outputList(this.form.answer, 'this.form.answer')) {this.tip = true;this.statusIcon = this.errorIcon;this.resultText = this.errorText;this.currentQuestion.isRight = false;let answer = [];answer.push(this.currentQuestion.stuAnswer);this.noteTitle(0, JSON.stringify(answer));if (!this.submitList.includes(this.currentQuestion.id)) {this.submitList.push(this.currentQuestion.id);this.error++;}} else {this.resultText = this.rightText;this.statusIcon = this.rightIcon;this.currentQuestion.isRight = true;if (this.current !== this.list.length) {uni.showToast({title: '回答正确，正在跳转第' + (this.current + 1) + '题',icon: 'none',duration: 2000});}let answer = [];answer.push(this.currentQuestion.stuAnswer);this.noteTitle(1, JSON.stringify(answer));if (!this.submitList.includes(this.currentQuestion.id)) {this.submitList.push(this.currentQuestion.id);this.right++;}let _this = this;setTimeout(function() {_this.handlePreNextClick(1);}, 1000);}}if (this.currentQuestion.type === 3) {this.list[this.current - 1].stuAnswer = this.form.answer;this.tip = true;this.noteTitle(1, JSON.stringify(this.form.answer));}if (this.currentQuestion.type === 6) {this.list[this.current - 1].stuAnswer = this.form.answer;this.tip = true;this.noteTitle(1, JSON.stringify(this.form.answer));this.right++;}if (this.currentQuestion.type === 4) {this.list[this.current - 1].stuAnswer = this.form.answer;if (this.list[this.current - 1].stuAnswer === this.list[this.current - 1].rightAnswer) {uni.showToast({title: '回答正确，正在跳转第' + (this.current + 1) + '题',icon: 'none',duration: 2000});let _this = this;setTimeout(function() {_this.handlePreNextClick(1);}, 1000);}}if (this.currentQuestion.type === 5) {if (this.form.answer == 1) {this.list[this.current - 1].stuAnswer = '正确';// 正确this.tip = true;this.resultText = this.rightText;this.statusIcon = this.rightIcon;this.currentQuestion.isRight = true;} else if (this.form.answer == 0) {this.list[this.current - 1].stuAnswer = '错误';// 错误this.tip = true;this.statusIcon = this.errorIcon;this.resultText = this.errorText;this.currentQuestion.isRight = false;}if (this.list[this.current - 1].stuAnswer == this.list[this.current - 1].rightAnswer) {uni.showToast({title: '回答正确，正在跳转第' + (this.current + 1) + '题',icon: 'none',duration: 2000});setTimeout(() => {this.handlePreNextClick(1);}, 1000);this.noteTitle(1, JSON.stringify(this.form.answer));} else {this.noteTitle(0, JSON.stringify(this.form.answer));}}this.$forceUpdate();this.submit();uni.setStorageSync('questionList', this.list);},async submit() {const form = {...this.form};if (this.currentQuestion.type === 2 && form.answer && form.answer.length) {// 答案排序form.answer = form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt());}this.submitLoading = true;// 显示答题完成界面if (this.list.length === this.current) {if (this.right + this.error == this.list.length) {this.isFinal = true;if (this.everyDay) {this.postDays();}} else {uni.showToast({title: `当前最后一题，您还有${this.list.length - (this.right + this.error)}道题目未作答`,icon: 'none',duration: 2000});}}},checkToken(res) {if (res.code == 500) {Dialog.confirm({title: '广东自考题库',message: '登录状态已过期，请重新登录'}).then(() => {// 页面跳转uni.navigateTo({url: '/pages/Login/index'});}).catch(() => {console.log('取消');});}},async getList(isFirstFetch) {if (this.everyDay) {let course = uni.getStorageSync('course');await this.$request.request({url: `/student/dailyParactice/days/questions?courseId=2`,method: 'GET'}).then(res => {this.examquestionSource = res.data;// 获取题目列表this.getquestionList();});} else if (this.errChild.length > 0) {this.examquestionSource = this.errChild;this.getquestionList();} else if (this.collectList.length > 0) {this.examquestionSource = this.collectList;this.getquestionList();} else if (uni.getStorageSync('questionList')) {this.examquestionSource = uni.getStorageSync('questionList');// 获取题目列表this.getquestionList();} else if (uni.getStorageSync('imitateTest')) {if (uni.getStorageSync('imitateTest') == 0) {// 获取机考选择题await this.$request.request({url: `/student/dailyParactice/get/testSgin`,method: 'GET'}).then(res => {this.examquestionSource = res.data;// 获取题目列表this.getquestionList();});} else {// 案例分析await this.$request.request({url: `/student/dailyParactice/get/case`,method: 'GET'}).then(res => {this.examquestionSource = res.data;// 获取题目列表this.getquestionList();});}} else {await this.$request.request({url: `/student/paper/question/list?paperId=${this.paperId}`,method: 'GET'}).then(res => {this.checkToken(res);this.examquestionSource = res.rows;// 获取题目列表this.getquestionList();});}},getquestionList() {this.list = this.handleQuestion(this.examquestionSource);if (this.strategy == 1) {this.$request.request({url: `/student/pascal/count/getPascale/record`,data: {paperId: this.paperId,strategy: this.strategy},method: 'GET'}).then(res => {for (let question of res.data) {for (let item of this.list) {if (item.id == question.pascalId) {if (typeof JSON.parse(question.answer) == 'string') {item.stuAnswer = JSON.parse(question.answer);} else {item.stuAnswer = JSON.parse(question.answer)[0];}}}}});} else if (this.strategy == 0) {// 点击取消清空用户答题记录this.$request.request({// paperType为1测试章节套题url: `/student/pascal/count/getPascale/record`,data: {paperId: this.paperId,strategy: this.strategy},method: 'GET'}).then(res => {// console.log('题目列表', this.list);// console.log('清空答题记录', res);});}},isJSON(str) {if (typeof str == 'string') {try {var obj = JSON.parse(str);if (typeof obj == 'object' && obj) {return true;} else {return false;}} catch (e) {console.log('error：' + str + '!!!' + e);return false;}}},// 对题目进行处理handleQuestion(singleList, mid = 0, isM = false) {let delist = [];for (let i = 0; i < singleList.length; i++) {if (singleList[i].options != '') {singleList[i].options = JSON.parse(singleList[i].options);}let examp = {analysis: singleList[i].analysis,analysisImgKey: '',analysisImgUrl: '',id: singleList[i].questionId,isAnswer: true,options: {A: singleList[i].options.A,B: singleList[i].options.B,C: singleList[i].options.C,D: singleList[i].options.D,E: singleList[i].options.E ? singleList[i].options.E : null,F: singleList[i].options.F ? singleList[i].options.F : null},questionImgKey: '',questionImgUrl: '',rightAnswer: this.isJSON(singleList[i].rightAnswer) ? JSON.parse(singleList[i].rightAnswer) : singleList[i].rightAnswer,stuAnswer: '',title: singleList[i].title,type: singleList[i].type,isM: false,mid: mid,paperId: singleList[i].paperId};console.log();if (!singleList[i].options.E) {delete examp.options.E;delete examp.options.F;}if (!singleList[i].options.F) {delete examp.options.F;}if (isM) examp.isM = true;delist.push(examp);}// console.log(delist);return delist;},openAside() {this.$forceUpdate();this.answerPanel = !this.answerPanel;},answerPanelClick(index) {this.current = index + 1;this.tip = false;// uniapp获取微信小程序窗口信息let getWindowInfo = uni.getWindowInfo();if (getWindowInfo.screenWidth a.charCodeAt() - b.charCodeAt());if (this.outputList(this.currentQuestion.rightAnswer) !== this.outputList(this.form.answer)) {if (this.form.answer == [] || this.form.answer.length === 0) return;this.tip = true;this.statusIcon = this.errorIcon;this.resultText = this.errorText;} else {this.tip = true;this.resultText = this.rightText;this.statusIcon = this.rightIcon;this.selectRight++;}}if (this.currentQuestion.type === 1) {if (this.form.answer == [] || this.form.answer.length === 0) return;if (this.form.answer == this.currentQuestion.rightAnswer) {this.tip = true;this.resultText = this.rightText;this.statusIcon = this.rightIcon;this.selectRight++;} else {this.tip = true;this.statusIcon = this.errorIcon;this.resultText = this.errorText;}}}if (this.currentQuestion.type === 3 || this.currentQuestion.type === 6) {this.tip = true;}if (this.currentQuestion.type === 4) {if (this.form.answer == [] || this.form.answer.length === 0) return;if (this.form.answer === this.currentQuestion.rightAnswer) {this.resultText = this.rightText;this.statusIcon = this.rightIcon;this.selectRight++;} else {this.tip = true;this.statusIcon = this.errorIcon;this.resultText = this.errorText;}}if (this.currentQuestion.type === 5) {if (this.form.answer == [] || this.form.answer.length === 0) return;if (this.form.answer === this.currentQuestion.rightAnswer) {this.resultText = this.rightText;this.statusIcon = this.rightIcon;this.selectRight++;} else {this.tip = true;this.statusIcon = this.errorIcon;this.resultText = this.errorText;}}this.$forceUpdate();},getAnswerPanelColor(item) {if (this.tip && this.currentQuestion.rightAnswer === item.value) return '#68ff72';else if (this.tip && this.currentQuestion.rightAnswer !== item.value) return '#ff5555';else return '';},lookAnswerClick() {this.tip = !this.tip;this.checkAnswer();}scss样式：
$right: green;$error: red;$normal: #03a9f4ab;.span_label /deep/ p {display: inline;}.container {max-width: 1200px;margin: auto;/deep/ .el-checkbox {display: block;margin-bottom: 32px;}}.aside {width: 330px;display: flex;position: fixed;right: -330px;top: 154px;transition: right 0.3s ease;z-index: 1001;background-color: white;box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);}.openAside {right: 0 !important;}.answer {display: flex;.main {flex: 1;}&__type {display: flex;justify-content: space-between;padding-right: 20px;color: #333;.text {font-weight: bold;font-size: 16px;margin-bottom: 16px;}.progress {color: #999;&__content {font-size: 14px;font-weight: bold;margin-bottom: 20px;}span {font-size: 16px;font-weight: bold;color: #1890ff;}}}&__content {margin-bottom: 20px;font-weight: bold;}&__form {}}.el-radio-group {.el-radio {display: block;margin-top: 10px;width: 100%;}}.el-radio.is-bordered + .el-radio.is-bordered {margin-left: 0;}.card-title {font-weight: bold;color: #0d0e10;text-align: left;padding-left: 10px;font-size: 14px;border-left: #1e88e5 3px solid;}.answer-type {color: #666;margin-top: 46px;padding-bottom: 14px;border-bottom: solid 1px #ebecf2;}.picker-item {cursor: pointer;width: 38px;height: 38px;line-height: 38px;text-align: center;border: 1px solid #dddddd;border-radius: 5px;background: #ffffff;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;float: left;margin: 4px 6px;position: relative;overflow: hidden;&.error {background: $error;color: #fff;}&.right {background: $right;color: #fff;}&.normal {background: $normal;color: #fff;}}.bottom {display: flex;justify-content: space-between;margin-top: 40px;}.tip-box {margin-top: 32px;padding: 16px;box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);border-radius: 6px;position: relative;.title {color: #333;font-weight: bold;}.desc {margin-top: 16px;color: #7f7f7f;span {color: #333;font-weight: bold;}}.arrow {position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid;top: -6px;left: 32px;margin-right: 3px;border-top-color: #ebeef5;border-bottom-width: 0;&::after {content: ' ';position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid;border-width: 6px;top: 1px;margin-left: -6px;border-top-width: 0;border-bottom-color: #fff;}}}.bread {padding: 20px 0;}.answer-container {background: initial;}.titleText {position: relative;display: inline-block;border: 1px solid #bfbfbf;width: 12px;height: 12px;text-indent: 0;margin-left: 3px;top: 2px;}.titleRight {background: $right;}.titleError {background: $error;}.titleAnswered {border: 1px solid #5a82ff;background: #5a82ff;}.titleDeText {font-size: 12px;color: #9cb2cd;text-indent: 0;margin-left: 5px;}.openAfix {font-size: 16px;margin-top: 20px;color: white;border-radius: 5px;width: 18px;height: 120px;display: none;background: #1e88e5;padding: 14px;justify-content: center;align-items: center;}@media screen and (max-width: 786px) {.bread {padding: 20px;}.openAfix {display: flex;}}.questTypeBox {height: 41px;line-height: 41px;padding: 0 14px;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-webkit-flex-direction: row;flex-direction: row;-webkit-box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;}.questionType {font-size: 13px;color: #666;}.questionAmount {font-size: 12px;color: #999;}.questionBox {background: #fff;padding: 14px;}.titleBox {color: #333;padding-bottom: 14px;}.titleMain {height: auto;}.titleContent {margin-bottom: 10px;font-size: 15px;}.titleImg {width: 100%;max-height: 200px;object-fit: contain;object-position: left;}.answerBox {padding: 14px 16px;background-color: #fff;display: -webkit-box;display: -webkit-flex;display: flex;}.answerIcon {width: 20px;margin-right: 10px;position: relative;}.answerIcon img {width: 100%;margin-top: 2px;}.answerBoxText {flex: 1;}.answerBoxContent {font-weight: 500;font-size: 14px;color: #666;line-height: 22px;margin-bottom: 9px;}.answerBoxAnswers {flex: 1;}.resultCompareText {font-weight: 500;font-size: 14px;color: #666;line-height: 22px;margin-bottom: 9px;}.answerBoxAnswersList {flex: 1;}.answers {font-size: 14px;line-height: 22px;color: #666;}.questionAnalysis {padding: 14px;background-color: #fff;margin-top: 10px;}.analysisTitle {display: flex;justify-content: space-between;align-items: center;font-size: 14px;color: #666;line-height: 22px;font-weight: 700;.analysis_AI {display: flex;align-items: center;img {width: 25px;height: 25px;}}}.analysisContent {padding: 6px 0 12px;border-bottom: 1px dashed #ddd;margin-bottom: 11px;}.bottomButton {position: fixed;bottom: 0;left: 0;height: 50px;width: 100%;display: -webkit-box;display: -webkit-flex;display: flex;background: #fff;z-index: 1000;}.buttonGroup {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;display: -webkit-box;display: -webkit-flex;display: flex;}.rButtonBox {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;-webkit-flex-wrap: wrap;flex-wrap: wrap;display: flex;align-items: center;padding-right: 14px;}.lButton {flex: 1;-webkit-flex-wrap: wrap;flex-wrap: wrap;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;justify-items: center;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-align-content: center;align-content: center;}.lButton img {width: 18px;height: 18px;text-align: center;}.lButton p {text-align: center;width: 100%;font-size: 11px;color: #666;line-height: 15px;}.rButton {height: 33px;width: 122px;border-radius: 74px;background-color: #0096ff;color: #fff;text-align: center;line-height: 33px;cursor: pointer;}.accomplish {padding-top: 45px;background: linear-gradient(#0096ff, rgb(159, 207, 241), rgba(254, 159, 16, 0) 90%);height: calc(100vh - 45px);}.detailBox {text-align: center;height: calc(100vh - 200px);border-radius: 10px;background-color: #fff;padding-top: 67px;margin: 0 20px;}.detailIcon {width: 99px;height: 99px;overflow: visible;opacity: 1;transition: opacity 0.5s ease-in-out 0s;background-color: transparent;margin: 0 auto 24px;}.detailTitle {width: 300px;margin: 0 auto;font-size: 16px;line-height: 20px;font-weight: 500;margin-bottom: 20px;}.detailButton {text-align: center;width: 290px;height: 37px;border-radius: 74px;font-size: 14px;}.detailButtonTop {line-height: 37px;background-color: #0096ff;color: #fff;margin: 0 auto 24px;}.detailButtonBottom {border: 1px solid #0096ff;color: #20a3fd;line-height: 35px;margin: 0 auto;}.u-radio {min-height: 41px;width: 100%;padding: 0 7px;box-sizing: border-box;background: #f6f6f6;margin-bottom: 14px;border-radius: 4px;font-size: 14px;}.u-radio__label {font-size: 14px !important;white-space: normal;padding: 7px;}.u-checkbox {width: 100%;min-height: 41px;padding: 0 7px;box-sizing: border-box;background: #f6f6f6;margin-bottom: 14px;border-radius: 4px;border: initial;display: flex;align-items: center;height: initial;}.u-checkbox__label {white-space: normal;padding: 7px;font-size: 14px !important;}.u-checkbox .is-checked {background-color: #e5f1ff;}答题卡作答之后不可以继续作答
选择题：
材料题：
答题卡：
