考试相关添加，页面等

shuishen

2022-03-02 d196e97a2ff77767268d3e55f07c37c8ce06258c

 components/dyw-answer/answer.vue

@@ -3,36 +3,32 @@
   试卷类型包含
   exam 理论考试
   paper 模拟考试 知识点练习 -->
   <view>
   <view class="container">
      <!-- 大标题 -->
      <view class="header" id="header">
         <!--          <span class="header-button" @click='leave' v-if='!isReviewed && examType=='know' '>暂离</span> -->
         <span v-if="examType=='exam'"> {{examDetail.exam.name}}</span>
         <span v-if="(examType=='paper' )|| (examType=='know') || (examType=='course')">
            {{examDetail.paper.name}}</span>
         <span class="header-button" @click='handleSubmit(1)' v-if='!isReviewed'>交卷</span>
         <!-- <span class="scoreText" v-else>得分：{{examDetail.score}}</span> -->
      </view>

      <u-navbar class="header" id="header" height="44" back-icon-color="#fff" title="模拟考试" title-color="#fff"
         :background="{background: '#103289'}" :custom-back="exitExam">
         <u-button class="slot-wrap-right" type="primary" size="mini" @click="handleSubmit(1)">交卷
         </u-button>
      </u-navbar>

      <!-- 小标题栏 -->
      <view id="subHeader">
         <view class="sub-header" v-if='questionList.length > 0'>
            <u-tag class="typeTag" :text="answerStatusName" mode="dark" shape="circle" />
            <view v-if="examDetail.exam.examTime<=0">不限时</view>
            <u-count-down v-if="(!isReviewed)&&(examType=='exam')&& (examDetail.exam.examTime>0)"
               :timestamp="examDetail.exam.examTime / 1000" :show-days="false" @end="end" @change="change">

            <u-count-down v-if="examDetail.exam.examTime" :timestamp="examDetail.exam.examTime / 1000"
               :show-days="false" @end="end" @change="change">
            </u-count-down>
            <clock v-if="(!isReviewed)&&(examType=='paper' || (examType=='course'))" ref="myClock"
               :timeOrigin="parseInt(examDetail.time)">
            </clock>
            <span v-if="examType=='exam'">第

            <span>第
               {{currentIndex+1}}/{{examDetail.exam.totalQuestion}} 题</span>
            <span v-if="(examType=='paper' )|| (examType=='know')">第
               {{currentIndex+1}}/{{examDetail.totalQuestion}} 题</span>
         </view>
      </view>

      <!-- 答题区域 -->
      <swiper class="content" :duration='duration' :current=currentIndex @change='handleSwiperChanged'
      <swiper class="content" :duration='duration' :current='currentIndex' @change='handleSwiperChanged'
         v-if='questionList.length > 0' :style="{'height':swiperHeight}">
         <template v-for='item in questionList'>
            <swiper-item class="content-item">
@@ -43,115 +39,76 @@
                  </view>
                  <!-- 以下显示选项 -->
                  <!-- type == 0 单选题 -->
                  <view class="content-solutions" v-if='item.template == 0'>
                  <view class="content-solutions" v-if='item.choicesType == 0'>
                     <template v-for='subItem in item.options'>
                        <view
                           :class="[isReviewed && subItem.optAnswer == 1 ? 'right': '',isReviewed && (item.wrongArr.indexOf(subItem.optLetter) >-1)  ? 'wrong': '']"
                           class="content-solutions-item" @click='chooseSolution(item,subItem)'>
                           <view v-if="(!isReviewed) && (examType=='exam') "
                              class="content-solutions-item-single">
                              {{subItem.newOptLetter}}
                        <view class="content-solutions-item"
                           @click="!item.selectedFlag && chooseSolution(item,subItem)">
                           <view class="content-solutions-item-single">
                              {{subItem.optionName}}
                           </view>
                           <view v-else class="content-solutions-item-single">{{subItem.optLetter}}</view>
                           <!-- 此处注意optLetter与newOptLetter的区别，newOptLetter是ABCD顺序的，而optLetter乱序的，两者无直接关系 -->

                           <view
                              :class="item.tempAnswer == subItem.optLetter? 'content-solutions-item-select' : ''"
                              class="content-solutions-item-content">{{subItem.optContent}}</view>
                              :class="item.tempAnswer == subItem.optionName? 'content-solutions-item-select' : ''"
                              class="content-solutions-item-content">{{subItem.optionContent}}</view>
                        </view>
                     </template>
                  </view>

                  <!-- type == 1 多选题 -->
                  <view class="content-solutions" v-if='item.template == 1'>
                  <view class="content-solutions" v-if='item.choicesType == 1'>
                     <template v-for='subItem in item.options'>
                        <view
                           :class="[isReviewed && subItem.optAnswer == 1 ? 'right': '',isReviewed && (item.wrongArr.indexOf(subItem.optLetter) >-1)  ? 'wrong': '']"
                           class="content-solutions-item" @click='chooseMutiSolution(item,subItem)'>
                           <view v-if="(!isReviewed) && (examType=='exam') "
                              class="content-solutions-item-single">
                              {{subItem.newOptLetter}}
                        <view class="content-solutions-item"
                           @click='!item.selectedFlag && chooseMutiSolution(item,subItem)'>
                           <view class="content-solutions-item-single">
                              {{subItem.optionName}}
                           </view>
                           <view v-else class="content-solutions-item-single">{{subItem.optLetter}}</view>
                           <!-- TODO 是否被选中的条件判断不对 -->

                           <view
                              :class="item.tempAnswer.indexOf(subItem.optLetter) >-1 ? 'content-solutions-item-select' : ''"
                              class="content-solutions-item-content">{{subItem.optContent}}
                           </view>
                              :class="item.tempAnswer.indexOf(subItem.optionName) > -1 ? 'content-solutions-item-select' : ''"
                              class="content-solutions-item-content">{{subItem.optionContent}}</view>
                        </view>
                     </template>
                     <u-button v-show="!item.selectedFlag" type="primary" shape="circle"
                        :custom-style="{backgroundColor: '#103289'}" @click="confirm(item)">确认答案
                     </u-button>
                  </view>

                  <!-- type == 2 判断题 -->
                  <view class="content-solutions" v-if='item.template == 2'>
                     <template v-for='subItem in item.options'>
                  <view class="content-solutions" v-if='item.choicesType == 2'>
                     <template v-for="(judgeItem,judgeIndex) in judgeArr">
                        <view class="content-solutions-judge">
                           <view v-for="(judgeItem,judgeIndex) in judgeArr"
                              :class="[item.tempAnswer == judgeItem.value? 'content-solutions-item-select' : '',isReviewed && (item.rightAnswer==judgeItem.name)  ? 'right': '',isReviewed && (item.wrongArr ==judgeItem.value)  ? 'wrong': '']"
                           <view
                              :class="[item.tempAnswer == judgeItem.name? 'content-solutions-item-select' : '']"
                              class="content-solutions-judge-item"
                              @click='judgeSolution(item,judgeItem.value)'>{{judgeItem.name}}</view>
                              @click="!item.selectedFlag && judgeSolution(item, judgeItem.name)">
                              {{judgeItem.name}}
                           </view>
                        </view>
                     </template>
                  </view>

                  <!-- type == 4 填空题 -->
                  <view class="content-solutions" v-if='item.template == 4'>
                     <template v-if="!isReviewed">
                        <view class="content-solutions-item" v-for='(subItem,subIndex) in item.options'
                           :keys="subIndex"
                           :class="[isReviewed && item.answerStatus!=4 &&(item.blankString != item.rightAnswer)? 'wrong':'']">
                           <view class="content-solutions-item-single">{{subIndex+1}}</view>
                           <input :disabled="isReviewed" type="text" class="content-solutions-blank"
                              v-model="item.blankArr[subIndex]" placeholder="请在此处输入答案" />
                        </view>
                     </template>
                     <template v-else>
                        <view class="content-solutions-item">
                           <view class="content-solutions-item-single"></view>
                           <!-- TODOvalue的绑定值不对 :value="item.blankArr[subIndex].replace(/&quot\;/g, '')" -->
                           <input :disabled="isReviewed" :value="(item.blankArr).join(',')" type="text"
                              class="content-solutions-blank" />
                        </view>
                     </template>
                  </view>
                  <!-- type == 5 简答题 -->
                  <view class="content-solutions" v-if='item.template == 5'>
                     <textarea v-if="!isReviewed" @input="textInput" :disabled="isReviewed" placeholder="请输入您的答案"
                        auto-height />
                     <textarea v-else :disabled="isReviewed" :value="item.tempAnswer.replace(/&quot\;/g, '')"
                        auto-height />
                  </view>
                  <view class="explain" v-if="item.selectedFlag">
                     <view>
                        <view style="display: flex; justify-content: flex-start; align-items: center;">

                  <view class="explain" v-if='isReviewed'>
                     <u-tag v-show="item.answerStatus==1" text="未答" type="error" />
                     <u-tag v-show="item.answerStatus==2" text="正确" type="success" />
                     <u-tag v-show="item.answerStatus==3" text="错误" type="error" />
                     <u-tag v-show="item.answerStatus==4" text="未评分" type="warning" />
                     <u-tag v-show="item.answerStatus==5" text="已评分" type="warning" />
                     <u-tag v-show="item.answerStatus==6" text="已答" type="warning" />
                     <view class="explain-title">正确答案：</view>
                     <!-- <span class="text">{{item.rightAnswer}}</span> -->
                     <u-parse :html="item.rightAnswer"></u-parse>
                     <view class="explain-title">试题解析:</view>
                     <!-- <view class="explain-content">{{item.queAnalysis | analysisFilter }}</view> -->
                     <u-parse :html="item.queAnalysis?item.queAnalysis:'暂无'"></u-parse>
                     <view class="noteArea">
                        <view class="noteAreaTitle">
                           <view class="explain-title">我的笔记:</view>
                           <view v-if="eidtOrFinishValue=='编辑笔记'" class="funcGroup" @click="editBtnFunc(item)">
                              <u-icon class="funcBtn" name="edit-pen"></u-icon>
                              <span>编辑笔记</span>
                           <u-tag style="margin: 0 20rpx;" v-show="item.correctOrError" text="正确"
                              type="success" />
                           <u-tag style="margin: 0 20rpx;" v-show="!item.correctOrError" text="错误"
                              type="error" />

                           <view>
                              答案
                              <text style="margin: 0 20rpx;">{{item.answer}}</text>
                           </view>
                           <view v-else class="funcGroup" @click="finishBtnFunc(item)">
                              <u-icon class="funcBtn" name="edit-pen"></u-icon>
                              <span>完成</span>
                           <view>
                              您选择
                              <text style="margin: 0 20rpx;">{{item.tempAnswer}}</text>
                           </view>

                        </view>
                        <!-- 只有回答过的题目才能编辑笔记！！！ -->
                        <text-editor :noteId="item.id" :textContent="item.theoryExamAnswer.queNote"
                           :isreadOnly="isreadOnly" @editorInput='updateEditorText'>
                        </text-editor>
                     </view>
                  </view>

               </scroll-view>
            </swiper-item>
         </template>
@@ -175,53 +132,30 @@
                  <view class="queTypeName" v-show="queTypeStore[subIndex]>=0">{{subItem.name}}</view>
                  <!-- <u-tag :text="subItem.name"  v-show="queTypeStore[subIndex]>0" mode="dark" /> -->
                  <view class="queTypeArea">

                     <template v-for="(item, index) in questionList">
                        <view v-show="item.template == subItem.value">

                           <!-- 1.复习状态且回答正确 -->
                           <!-- <view v-if='item.tempAnswer && item.answer==item.tempAnswer && isReviewed' -->
                           <view v-if='isReviewed && item.answerStatus == "2"'
                              class="question-modal-body-item question-modal-body-item-right"
                              @click="handleJumpSwiper(index)">{{index + 1 }}</view>
                           <!-- 2.复习状态且回答错误 -->
                           <view
                              v-else-if='isReviewed && (item.answerStatus == "1" ||item.answerStatus == "3" )'
                              class="question-modal-body-item question-modal-body-item-failed"
                              @click="handleJumpSwiper(index)">{{index + 1 }}</view>
                           <!-- 3.复习状态且简答题未评分或者已评分 -->
                           <view
                              v-else-if='isReviewed && (item.answerStatus == "4" ||item.answerStatus == "5")'
                              class="question-modal-body-item question-modal-body-item-unScored"
                              @click="handleJumpSwiper(index)">{{index + 1 }}</view>
                           <!-- 3.非复习状态且已经作答 -->
                           <view v-else-if='!isReviewed && item.tempAnswer && item.tempAnswer.length != 0'
                              class="question-modal-body-item question-modal-body-item-select"
                              @click="handleJumpSwiper(index)">{{index + 1 }}</view>
                           <!-- 4.非复习状态且未作答 -->
                           <view v-else class="question-modal-body-item question-modal-body-item-unselect"
                        <view v-show="item.choicesType == subItem.value">
                           <!-- 未作答 -->
                           <view v-if="item.tempAnswer == ''"
                              class="question-modal-body-item question-modal-body-item-unselect"
                              @click="handleJumpSwiper(index)">
                              {{index + 1 }}
                           </view>
                           <!-- <u-line color="red" border-style="info"></u-line> -->
                           <!-- 回答正确 -->
                           <view v-else-if='item.tempAnswer == item.answer'
                              class="question-modal-body-item question-modal-body-item-right"
                              @click="handleJumpSwiper(index)">{{index + 1 }}</view>
                           <!-- 回答错误 -->
                           <view v-else-if='item.tempAnswer != item.answer'
                              class="question-modal-body-item question-modal-body-item-failed"
                              @click="handleJumpSwiper(index)">{{index + 1 }}</view>
                        </view>
                     </template>
                  </view>
               </template>
            </scroll-view>
            <view class="question-modal-foot" id="questionHeader">
               <view v-if="!isReviewed" class="ansBlock">
                  <view class="blockItem">
                     <view class="block-ansed"></view>
                     <view class="">已答</view>
                  </view>
                  <view class="blockItem">
                     <view class="block-unansed"></view>
                     <view class="">未答</view>
                  </view>
               </view>

               <view v-else class="ansBlock">
               <view class="ansBlock">
                  <view class="blockItem">
                     <view class="block-right"></view>
                     <view class="">答对</view>
@@ -231,10 +165,11 @@
                     <view class="">答错</view>
                  </view>
                  <view class="blockItem">
                     <view class="block-unScored"></view>
                     <view class="">未评分</view>
                     <view class="block-unansed"></view>
                     <view class="">未答</view>
                  </view>
               </view>

            </view>
         </view>
      </modal>
@@ -250,7 +185,6 @@
         return {
            isreadOnly: true,
            quesModules: [],
            areaText: ``, //保存简答题答案
            judgeArr: [{
                  name: '正确',
                  value: '1'
@@ -309,14 +243,14 @@
         }
      },
      watch: {

         // 监听currentIndex的变化，改变则提交答案 相同
         currentIndex(newVal, oldVal) {
            let that = this
            if (!this.isReviewed) {
               // 对各题型的答案进行处理
               switch (that.questionList[oldVal].template) {
            // 对各题型的答案进行处理
            if (that.questionList[oldVal].selectedFlag) {
               switch (that.questionList[oldVal].choicesType) {
                  case 0:
                     // 选择题
                     break;
                  case 1:
                     // 多选题
@@ -326,51 +260,9 @@
                  case 2:
                     // 判断题
                     break;
                  case 4:
                     // 填空题
                     that.questionList[oldVal].tempAnswer = that.questionList[oldVal].blankArr.join(
                        '||~||') // 数组拼接为字符串
                     break;
                  case 5:
                     that.questionList[oldVal].tempAnswer = JSON.stringify(that.areaText)
                     // console.log('000:',that.questionList[oldVal].tempAnswer);
                     break;

                  default:
               }

               if (this.examType == 'exam') {
                  // 保存答案
                  var answerObj = {
                     examRecordId: this.questionList[oldVal].recordId,
                     paperQueId: this.questionList[oldVal].id,
                     answer: this.questionList[oldVal].tempAnswer,
                     template: this.questionList[oldVal].template
                  }

                  // 进行答题的api请求
                  console.log('answerObj:', oldVal, answerObj);
                  this.$api.answerExam(answerObj)
                     .then(res => {
                        console.log(res);
                     })
               } else if (this.examType == 'paper' || this.examType == 'know') {
                  var answerObj = {
                     exerciseId: this.examDetail.exerciseId,
                     paperQueId: this.questionList[oldVal].id,
                     answer: this.questionList[oldVal].tempAnswer,
                     template: this.questionList[oldVal].template
                  }

                  // 进行答题的api请求
                  console.log('answerObj:', oldVal, answerObj);
                  this.$api.answerPaper(answerObj)
                     .then(res => {
                        console.log(res);
                     })
               } else {
                  return
               }
               // immediate: true,
            }
         }
      },
@@ -378,7 +270,6 @@
         // swiperHeight(){
         //    uni.getSystemInfo({
         //       success(res) {
         //          console.log(res);
         //          return res.windowHeight+'px'
         //       }
         //    })
@@ -387,7 +278,6 @@
            return this.$store.state.examDetail
         },
         questionList() {
            console.log(this.$store.state.questionList, 77777)
            return this.$store.state.questionList
         },
         queTypeStore() {
@@ -397,8 +287,7 @@
            return this.questionList.length - 1
         },
         answerStatusName() {
            console.log(this.questionList[this.currentIndex].template, 63636636366)
            switch (this.questionList[this.currentIndex].template) {
            switch (this.questionList[this.currentIndex].choicesType) {
               case 0:
                  return '单选题'
                  break;
@@ -420,14 +309,6 @@
         }
      },
      props: {
         isReviewed: {
            type: Boolean,
            default: false
         },
         examType: {
            type: String,
            default: "exam"
         },
         duration: {
            type: [String, Number],
            default: 300
@@ -436,15 +317,18 @@
      mounted() {
         var that = this
         this.setAnswerHeight()
         if ((!this.isReviewed) && ((this.examType == 'paper') || (this.examType == 'course'))) {
            this.$refs.myClock.start();
         }

      },
      components: {
         Modal,
         clock
      },
      methods: {
         exitExam() {
            uni.redirectTo({
               url: '/pages/exam/startexam'
            });
         },
         /*设置题目的高度*/
         setAnswerHeight() {
            let that = this
@@ -452,15 +336,14 @@
            uni.getSystemInfo({
               //获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高                
               success: function(res) {
                  console.log(res, '010101010')
                  tempHeight = res.windowHeight;
                  that.modalHeight = res.windowHeight - uni.upx2px(200) + 'px';
                  that.modalContentHeight = res.windowHeight - uni.upx2px(380) + 'px';

                  that.modalContentHeight = res.windowHeight - uni.upx2px(360) + 'px';
                  uni.createSelectorQuery().in(that).select("#header").fields({
                     size: true,
                     scrollOffset: true
                  }, (data) => {
                     console.log('data', data);
                     tempHeight -= data.height;
                     uni.createSelectorQuery().in(that).select("#subHeader").fields({
                        size: true,
@@ -505,10 +388,6 @@
               this.handleSubmit(0)
            }, 2000)
         },
         textInput(e) {
            this.areaText = e.detail.value
            // console.log(e.detail.value)
         },
         /* 滑动题目 */
         handleSwiperChanged(event) {
            this.currentIndex = event.detail.current
@@ -520,62 +399,79 @@
            // 进行翻页
            if ((this.currentIndex > min && operation < 0) || (this.currentIndex < max && operation > 0)) {
               this.currentIndex += operation
               // console.log(this.currentIndex)
            }
         },
         /* 选择答案（单选）*/
         chooseSolution(item, subItem) {
            if (!this.isReviewed) {
               // tempAnswer为学生答案
               item.tempAnswer = subItem.optLetter
               // 强制刷新更新视图
               this.$forceUpdate()
               // this.questionList[this.currentIndex].tempAnswer = subItem.optLetter
               if (this.currentIndex < this.max) {
                  setTimeout(() => {
                     this.currentIndex += 1
                  }, 300)
               }
               // this.onAnswerChange(item)
            // tempAnswer为学生答案
            item.tempAnswer = subItem.optionName
            item.selectedFlag = true
            if (item.tempAnswer == item.answer) item.correctOrError = true
            // 强制刷新更新视图
            this.$forceUpdate()
            if (this.currentIndex < this.max) {
               setTimeout(() => {
                  this.currentIndex += 1
               }, 300)
            }
         },
         /* 选择答案（多选）*/
         chooseMutiSolution(item, subItem) {
            if (!this.isReviewed) {
               let answerIndex = item.dualChooseArr.indexOf(subItem.optLetter)
               if (answerIndex > -1) {
                  // 该选项已经在数组中了
                  item.dualChooseArr.splice(answerIndex, 1)
               } else {
                  // 该选项不在数组中
                  item.dualChooseArr.push(subItem.optLetter)
               }
               item.tempAnswer = item.dualChooseArr.join(',')
               // this.onAnswerChange(answerIndex)
               // 强制刷新更新视图
               this.$forceUpdate()
            let answerIndex = item.dualChooseArr.indexOf(subItem.optionName)
            if (answerIndex > -1) {
               // 该选项已经在数组中了
               item.dualChooseArr.splice(answerIndex, 1)
            } else {
               // 该选项不在数组中
               item.dualChooseArr.push(subItem.optionName)
            }
            item.tempAnswer = item.dualChooseArr.join(',')
            // 强制刷新更新视图

         },
         // 多选题中的答案确认
         confirm(item) {
            let one = item.answer.split(',')
            let two = item.tempAnswer.split(',')
            let flag = true
            if (one.length == two.length) {

               one.forEach((item) => {
                  if (two.indexOf(item) == -1) {
                     flag = false
                     return
                  }
               })
            } else {
               flag = false
            }


            item.selectedFlag = true

            if (flag != false) item.correctOrError = true

            this.$forceUpdate()

            if (this.currentIndex < this.max) {
               setTimeout(() => {
                  this.currentIndex += 1
               }, 300)
            }
         },
         /* 判断题答案 */
         judgeSolution(item, value) {
            if (!this.isReviewed) {
               // tempAnswer为学生答案
               item.tempAnswer = value
               // 强制刷新更新视图
               this.$forceUpdate()
               if (this.currentIndex < this.max) {
                  setTimeout(() => {
                     this.currentIndex += 1
                  }, 300)
               }
               // this.onAnswerChange(item)
            // tempAnswer为学生答案
            item.tempAnswer = value
            item.selectedFlag = true
            if (item.tempAnswer == item.answer) item.correctOrError = true
            // 强制刷新更新视图
            this.$forceUpdate()
            if (this.currentIndex < this.max) {
               setTimeout(() => {
                  this.currentIndex += 1
               }, 300)
            }
         },

         /* 题目答案变化 */
         onAnswerChange(item) {
            let result = JSON.parse(JSON.stringify(item))
            this.$emit('onChange', item)
         },
         /* 交卷  相同 */
         handleSubmit(submitORimeEnd) {
@@ -592,97 +488,82 @@
            } else {
               this.$emit('timeEnd')
            }
         },

         // 点击编辑笔记
         editBtnFunc(item) {
            if (item.theoryExamAnswer.id == undefined) {
               this.$refs.uToast.show({
                  title: '未作答的题目不可编辑笔记！',
                  type: 'error',
                  // url: '/pages/user/index'
               })
               return
            }
            this.isreadOnly = !this.isreadOnly
            this.eidtOrFinishValue = '完成'
         },
         // 完成编辑
         finishBtnFunc(item) {
            var that = this
            this.isreadOnly = !this.isreadOnly
            this.eidtOrFinishValue = '编辑笔记'
            console.log('保存笔记内容', item, that.editorText);
            this.$api.examNote(item.theoryExamAnswer.id, that.editorText)
               .then(res => {
                  console.log('更新笔记成功', res)
               })
         },
         updateEditorText(text) {
            // 从子组件获取输入框输入内容
            this.editorText = text
         },
         }
      }
   }
</script>

<style lang="scss">
   .slot-wrap-right {
      position: absolute;
      top: 0;
      left: auto;
      right: 10px;
      bottom: 0;
      margin: auto;
      color: #fff;
      letter-spacing: 4rpx;
      /* 如果您想让slot内容占满整个导航栏的宽度 */
      /* flex: 1; */
      /* 如果您想让slot内容与导航栏左右有空隙 */
      /* padding: 0 30rpx; */
   }

   page {
      background-color: #FFFFFF;
   }

   #header,
   #subHeader {
      height: 100rpx;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
   }

   .header {
      width: 750rpx;
      // position: fixed;
      margin-top: 30rpx;
      position: relative;
      text-align: center;
      line-height: 100rpx;
      font-size: 36rpx;
      font-weight: 600;
      color: #103289;
      letter-spacing: 10rpx;
      background-color: #FFFFFF;

      &-button {
         width: 80rpx;
         height: 40rpx;
         line-height: 40rpx;
         position: absolute;
         top: 20rpx;
         right: 40rpx;
         padding: 10rpx 20rpx;
         border-radius: 15rpx;
         letter-spacing: 2rpx;
         font-weight: 500;
         color: #FFFFFF;
         background-color: #103289;
      }

      .scoreText {
         color: #00b060;
         font-size: 35rpx;
      }
      letter-spacing: 2rpx;
   }

   .sub-header {
      width: 750rpx;

      // position: fixed;
      // margin-top: 130rpx;
      padding: 30rpx 20rpx;
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #000;
      font-size: 33rpx;
      font-size: 32rpx;
      font-weight: bold;
      background-color: #FFFFFF;
   }

   .footer {
      width: 100%;
      height: 88rpx;
      padding: 30rpx 20rpx;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      box-sizing: border-box;
      color: #4c8af3;
      box-shadow: 0 0 5px 1px #eee;
      background-color: #FFFFFF;

      &-card {
         padding: 10rpx 20rpx;
         border: 1px solid #103289;
         border-radius: 15rpx;
         color: #FFFFFF;
         background-color: #103289;
      }
   }


   .content {
      // margin-top: 130rpx;
@@ -808,58 +689,17 @@

      .explain {
         border-top: solid #999999 1px;
         padding-top: 10rpx;
         padding: 10rpx;
         font-size: 28rpx;
         color: #666666;

         .explainResult {
            color: #103289;
         }

         .explain-title {
            font-weight: bold;
         }

         .noteArea {
            border-top: 2rpx solid #103289;
            padding-top: 10rpx;

            // background-color: #0077AA;
            .noteAreaTitle {
               display: flex;
               justify-content: space-between;
            }
         }
      }

   }

   .footer {
      width: 750rpx;
      height: 100rpx;
      padding: 30rpx 20rpx;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      box-sizing: border-box;
      color: #4c8af3;
      box-shadow: 0 0 5px 1px #eee;
      background-color: #FFFFFF;

      &-card {
         padding: 10rpx 20rpx;
         border: 1px solid #103289;
         border-radius: 15rpx;
         color: #FFFFFF;
         background-color: #103289;
      }
   }

   .question-modal {
      width: 700rpx;
      padding: 40rpx;
      padding: 0 40rpx;
      background-color: #FFFFFF;

      &-header {
@@ -926,11 +766,10 @@
      }

      .question-modal-foot {
         height: 100rpx;
         height: 40rpx;
         border-top: 1rpx solid #F0F0F0;
         // position: fixed;
         // margin-bottom: 0rpx;
         margin-top: -60rpx;

         .ansBlock {
            display: flex;
@@ -943,46 +782,31 @@
               margin: 20rpx;
            }

            .block-ansed {
               width: 80rpx;
               height: 80rpx;
               border-radius: 50%;
               background: #103289;
               margin: 0 10rpx;
            }

            .block-unansed {
               width: 80rpx;
               height: 80rpx;
               border-radius: 50%;
               // border: solid #ffffff 1px;
               background: #bbbbbb;
               margin: 0 10rpx;
            }

            .block-right {
               width: 80rpx;
               height: 80rpx;
               width: 40rpx;
               height: 40rpx;
               border-radius: 50%;
               background: #39b54a;
               margin: 0 10rpx;
            }

            .block-wrong {
               width: 80rpx;
               height: 80rpx;
               width: 40rpx;
               height: 40rpx;
               border-radius: 50%;
               background: #982121;
               margin: 0 10rpx;
            }

            .block-unScored {
               width: 80rpx;
               height: 80rpx;
            .block-unansed {
               width: 40rpx;
               height: 40rpx;
               border-radius: 50%;
               background: #ff9f73;
               // border: solid #ffffff 1px;
               background: #bbbbbb;
               margin: 0 10rpx;
            }

         }

      }