<!-- 开始练习 -->
<template>
  <div class="app-container startPracticing">
    <div class="page-container-top-max-big-box">
      <p class="top-1-p">开始练习</p>
      <p class="top-2-p" @click="backPage()">返回</p>
    </div>
    <div class="content-box" v-if="pageType === 1">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <div class="exam-title">刷题练习</div>
        <div class="exam-subtitle">总{{ examInfo.totalCount }}题</div>
        <div class="exam-name-box scrollbar-box">{{ examInfo.knowledgePointName }}</div>
        <div class="question-group-max-box">
          <!-- 题目导航 -->
          <div v-for="(item,index) in questionTypeGroups" :key="index" class="question-group">
            <div class="group-header">
              <span class="group-title">{{ item.questionTypeName }}</span>
              <span class="group-count">{{ item.count }}题</span>
            </div>
            <div class="question-nums">
              <div
                v-for="(minItem,minIndex) in item.questions"
                :key="minIndex"
                :class="['num-item', getNumClass(minItem), groupIndex===index&&questionIndex===minIndex ? 'num-active' : '']"
                @click="selectQuestion(minItem,index,minIndex)">
                {{ minItem.seq }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容区：只展示当前选中题目 -->
      <div class="right-panel" v-if="currentQuestion">
        <div class="num-flex-box">
          <p class="null-p"></p>
          <p class="text-p">答对：{{correct}} 题</p>
          <p>丨</p>
          <p class="text-p">答错：{{incorrect}} 题</p>
          <p>丨</p>
          <p class="text-p">正确率：{{ (accuracy * 100).toFixed(0) }}%</p>
          <p class="null-p"></p>
        </div>
        <div class="question-card scrollbar-box">
          <!-- 题目头部 -->
          <div class="question-header">
            <div class="question-index-box">{{ questionTypeGroups[groupIndex].questions[questionIndex].seq }}</div>
            <div class="question-type-score">{{ currentQuestion.questionTypeName }}</div>
            <p class="viewAnswer-p" @click="viewAnswerShowType=!viewAnswerShowType">{{viewAnswerShowType?'关闭答案':'查看答案'}}</p>
            <div class="question-stars">
              <i
                v-for="s in 4"
                :key="s"
                :class="['star-icon', s <= currentQuestion.difficulty ? 'star-active' : 'star-empty']"
              >★</i>
            </div>
          </div>
          <!-- 题目内容（富文本） -->
          <div class="question-content" v-html="currentQuestion.questionContent"></div>
          <!-- 单选题选项/多选题选项 -->
          <div class="options-list">
            <div v-for="(minItem,minIndex) in currentQuestion.options"
                 :key="minIndex" class="option-item"
                 @click="checkItemButton(currentQuestion,minItem)"
                 :class="isValueInList(minItem.optionTag,currentQuestion.userAnswer)?'option-selected':''">
              <span class="option-radio">
                <i v-if="isValueInList(minItem.optionTag,currentQuestion.userAnswer)"
                   class="el-icon-check radio-checked"
                ></i>
                <i v-else class="radio-empty"></i>
              </span>
              <span class="option-key"
                    v-if="currentQuestion.questionType == '1' || currentQuestion.questionType == '2'"
              >{{ minItem.optionTag }}</span>
              <span class="option-text" v-html="minItem.optionContent"></span>
            </div>
          </div>
          <!-- 答题结果 -->
          <div class="answer-result-box" v-if="viewAnswerShowType">
            <div class="answer-detail">
              <div class="answer-row"><span class="answer-label">答案：</span>{{ arrayToString(currentQuestion.correctAnswer) }}</div>
              <div class="analysis-title">试题解析</div>
              <div class="analysis-content" v-html="currentQuestion.analysis" v-if="currentQuestion.analysis"></div>
              <div class="analysis-content" v-else>无</div>
            </div>
          </div>
        </div>
        <div class="question-button-box">
          <p class="previous-question" :class="!isFirstQuestion?'check-button':''" @click="prevQuestion">上一题</p>
          <p class="null-p"></p>
          <!--<p class="submit-exam" @click="submitExam()">交卷</p>-->
          <p class="null-p"></p>
          <p class="next-question" :class="!isLastQuestion?'check-button':''" @click="nextQuestion">下一题</p>
        </div>
      </div>
    </div>
    <div class="shade-max-big-box" v-if="shadeType">
      <div class="shade-big-box">
        <div class="title-box">
          <p><span>{{shadeData.totalScore}}</span>分</p>
        </div>
        <p class="text-p">{{shadeData.type==1?'本次模拟考试成绩不及格！':(shadeData.type==2?'本次模拟考试成绩有效':'')}}</p>
        <div class="button-box">
          <p class="null-p"></p>
          <p class="button-p-2" v-if="shadeData.type == 1" @click="retakeExam()">重新考试</p>
          <p class="button-p-2" v-if="shadeData.type == 2" @click="backPage()">确定</p>
          <p class="null-p"></p>
        </div>
        <p class="out-button el-icon-close" @click="backPage()"></p>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    examUserPracticePanel, examUserPracticeQuestionDetail,
    examUserPracticeSubmit,
    examUserExamSubmit,examUserExamStart,
  } from '@/api/safetyEducationExaminationNew/index'

  export default {
    name: 'index',
    data() {
      return {
        pageType:1,
        newData: {},
        //考试信息
        examInfo: {
          knowledgePointName: '',
          totalCount: 0,
        },
        //左侧数据
        questionTypeGroups: [],
        //右侧 数据
        currentQuestion: null,
        //按钮状态
        groupIndex: 0,
        questionIndex: 0,
        //遮罩层数据
        shadeType:false,
        shadeData:{
          type:0,//1.不及格-可以重新考试 2.不及格-不可以重新考试 3.最佳成绩 4.非最佳成绩
          totalScore:0,//分数
          canContinueExam:0, //重新考试 0不可以1可以
        },
        historyOfIncorrectQuestionsPropsData:{},
        viewAnswerShowType:false,
      }
    },
    computed: {
      // 1. 答对的数量
      correct() {
        let count = 0;
        this.questionTypeGroups.forEach(group => {
          if (group.questions && group.questions.length) {
            group.questions.forEach(q => {
              if (q.answerStatus === 1) count++;
            });
          }
        });
        return count;
      },
      // 2. 答错的数量
      incorrect() {
        let count = 0;
        this.questionTypeGroups.forEach(group => {
          if (group.questions && group.questions.length) {
            group.questions.forEach(q => {
              if (q.answerStatus === 2) count++;
            });
          }
        });
        return count;
      },
      // 3. 正确率 (答对数 / 总题数)
      accuracy() {
        // 计算总题数
        let total = 0;
        this.questionTypeGroups.forEach(group => {
          if (group.questions) total += group.questions.length;
        });

        // 如果没有题目，或者还没作答，返回 0
        if (total === 0) return 0;

        // 计算正确率，保留两位小数（例如：0.67 或 67%）
        // 这里返回 0~1 之间的小数，如果页面需要显示百分比，可以在模板里乘100
        return parseFloat((this.correct / total).toFixed(2));
      },
      // 判断是否是绝对的第一题（用于禁用上一题按钮）
      isFirstQuestion() {
        return this.groupIndex === 0 && this.questionIndex === 0
      },
      // 判断是否是绝对的最后一题（用于禁用下一题按钮）
      isLastQuestion() {
        const lastGroupIndex = this.questionTypeGroups.length - 1
        const lastGroup = this.questionTypeGroups[lastGroupIndex]
        const lastQuestionIndex = lastGroup ? lastGroup.questions.length - 1 : 0

        return this.groupIndex === lastGroupIndex && this.questionIndex === lastQuestionIndex
      }
    },
    created() {

    },
    mounted() {
      this.initialize()
    },
    methods: {
      initialize() {
        if (this.$route.query) {
          this.$set(this, 'newData', this.$route.query)
        } else {
          this.$router.back()
          return
        }
        this.$nextTick(() => {
          this.examUserPracticePanel();
        })
      },
      //左侧数据
      examUserPracticePanel(){
        examUserPracticePanel({ knowledgePointId: this.newData.knowledgePointId, }).then(response => {
          this.$set(this,'groupIndex',0);
          this.$set(this,'questionIndex',0);
          this.$set(this, 'examInfo', {
            knowledgePointName: response.data.knowledgePointName ? response.data.knowledgePointName : '',
            totalCount: response.data.totalCount ? response.data.totalCount : 0,
          })
          this.$set(this, 'questionTypeGroups', response.data.questionTypeGroups)
          // 默认选中第一题（假数据直接从 data 里读取，无需接口）
          const firstGroup = this.questionTypeGroups[0]
          if (firstGroup && firstGroup.questions.length) {
            this.examUserPracticeQuestionDetail(firstGroup.questions[0].questionId,firstGroup.questions[0].userAnswer)
          }
        })
      },
      //选中答案
      checkItemButton(item,minItem){
        if(item.questionType == 1){
          item.userAnswer = [minItem.optionTag]
        }else if(item.questionType == 2){
          const index = item.userAnswer.indexOf(minItem.optionTag)
          if (index === -1) {
            item.userAnswer.push(minItem.optionTag);
          } else {
            item.userAnswer.splice(index, 1);
          }
        }else if(item.questionType == 3){
          item.userAnswer = [minItem.optionTag]
        }
      },
      // 上一题
      prevQuestion() {
        // 如果已经是第一题，不做任何操作
        if (this.isFirstQuestion) return
        //判断当前提是否已作答
        if(this.currentQuestion.userAnswer[0]){
          examUserPracticeSubmit({
            attemptId: this.newData.attemptId,
            questionId:this.currentQuestion.id,
            userAnswer:this.currentQuestion.userAnswer+'',
          }).then(response => {
            this.$set(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex],'answerStatus',response.data.answerStatus);
            //切换索引至下一题
            if (this.questionIndex > 0) {
              // 当前组内还有上一题，直接题索引减 1
              this.questionIndex--
            } else {
              // 当前已经是该组的第一题，需要切换到上一个组的最后一题
              this.groupIndex--
              const prevGroup = this.questionTypeGroups[this.groupIndex]
              this.questionIndex = prevGroup.questions.length - 1
            }
            this.examUserPracticeQuestionDetail(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].questionId,this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].userAnswer)
          })
        }else{
          //切换索引至下一题
          if (this.questionIndex > 0) {
            // 当前组内还有上一题，直接题索引减 1
            this.questionIndex--
          } else {
            // 当前已经是该组的第一题，需要切换到上一个组的最后一题
            this.groupIndex--
            const prevGroup = this.questionTypeGroups[this.groupIndex]
            this.questionIndex = prevGroup.questions.length - 1
          }
          this.examUserPracticeQuestionDetail(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].questionId,this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].userAnswer)
        }
      },
      // 下一题
      nextQuestion() {
        // 如果已经是最后一题，不做任何操作
        if (this.isLastQuestion) return
        //判断当前提是否已作答
        if(this.currentQuestion.userAnswer[0]){
          examUserPracticeSubmit({
            questionId:this.currentQuestion.id,
            userAnswer:this.currentQuestion.userAnswer+'',
          }).then(response => {
            this.$set(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex],'answerStatus',response.data.answerStatus);
            //切换索引至下一题
            const currentGroup = this.questionTypeGroups[this.groupIndex]
            if (this.questionIndex < currentGroup.questions.length - 1) {
              // 当前组内还有下一题，直接题索引加 1
              this.questionIndex++
            } else {
              // 当前已经是该组的最后一题，需要切换到下一个组的第一题
              this.groupIndex++
              this.questionIndex = 0
            }
            this.examUserPracticeQuestionDetail(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].questionId,this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].userAnswer)
          })
        }else{
          //切换索引至下一题
          const currentGroup = this.questionTypeGroups[this.groupIndex]
          if (this.questionIndex < currentGroup.questions.length - 1) {
            // 当前组内还有下一题，直接题索引加 1
            this.questionIndex++
          } else {
            // 当前已经是该组的最后一题，需要切换到下一个组的第一题
            this.groupIndex++
            this.questionIndex = 0
          }
          this.examUserPracticeQuestionDetail(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].questionId,this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].userAnswer)
        }
      },
      //右侧数据
      examUserPracticeQuestionDetail(questionId,userAnswer) {
        examUserPracticeQuestionDetail({
          questionId: questionId,
        }).then(response => {
          if(response.data.questionType == 3){
            response.data.options = [
              { optionContent:"对",optionTag:"Y",sortOrder:1 },
              { optionContent:"错",optionTag:"N",sortOrder:2 },
            ]
          }
          response.data.userAnswer = userAnswer?userAnswer.split(','):[];
          this.$set(this, 'currentQuestion', response.data)
          this.$set(this, 'viewAnswerShowType', false)
        })
      },
      //返回按钮
      backPage() {
        this.$router.back()
      },
      //交卷按钮
      submitExam(){
        if(this.currentQuestion.userAnswer[0]){
          examUserPracticeSubmit({
            attemptId: this.newData.attemptId,
            questionId:this.currentQuestion.id,
            userAnswer:this.currentQuestion.userAnswer+'',
          }).then(response => {
            this.$set(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex],'answerStatus',response.data.answerStatus);
            this.examUserExamAnswerSaveExamUserExamSubmit();
          })
        }else{
          this.examUserExamAnswerSaveExamUserExamSubmit();
        }
      },
      examUserExamAnswerSaveExamUserExamSubmit(){
        let self = this;
        let num = 0;
        for(let i=0;i<self.questionTypeGroups.length;i++){
          for(let o=0;o<self.questionTypeGroups[i].questions.length;o++){
            if(self.questionTypeGroups[i].questions[o].answerStatus == 0){
              num++
            }
          }
        }
        self.$confirm(num==0?'确认要交卷吗？':'还有'+num+'题未答，确认要交卷吗?', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          self.examUserExamSubmit();
        }).catch(() => {})
      },
      //交卷
      examUserExamSubmit(){
        examUserExamSubmit({ attemptId: this.newData.attemptId, }).then(response => {
          this.$set(this,'shadeData',{
            type:response.data.totalScore >= this.examInfo.totalScore?2:1,
            totalScore:response.data.totalScore,
            canContinueExam:0,
          });
          this.$set(this,'shadeType',true);
        })
      },
      //查看错题
      reviewMistakes(){
        this.$set(this,'historyOfIncorrectQuestionsPropsData',{
          type:2,
          attemptId:this.newData.attemptId,
        });
        this.$set(this,'shadeType',false);
        this.$set(this,'pageType',2);
      },
      //查看错题返回
      tableButton(){
        this.$router.back();
      },
      //重新考试
      retakeExam(){
        examUserExamStart({examId:this.newData.examId,examScene:2,}).then(response => {
          if(response.data.attemptId){
            this.$set(this.newData, 'attemptId',response.data.attemptId)
            this.$set(this,'shadeType',false);
            this.$nextTick(() => {
              this.examUserPracticePanel();
            })
          }else{
            this.msgError(response.message)
            this.$router.back()
          }
        })
      },
      // 点击左侧题号：切换当前题目，按需从接口加载详情
      selectQuestion(item, index, minIndex) {
        if(this.currentQuestion.userAnswer[0]){
          examUserPracticeSubmit({
            attemptId: this.newData.attemptId,
            questionId:this.currentQuestion.id,
            userAnswer:this.currentQuestion.userAnswer+'',
          }).then(response => {
            this.$set(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex],'answerStatus',response.data.answerStatus);
            this.$set(this, 'groupIndex', index)
            this.$set(this, 'questionIndex', minIndex)
            this.examUserPracticeQuestionDetail(item.questionId,item.userAnswer)
          })
        }else {
          this.$set(this, 'groupIndex', index)
          this.$set(this, 'questionIndex', minIndex)
          this.examUserPracticeQuestionDetail(item.questionId,item.userAnswer)
        }
      },
      // 判断选项是否被选中
      isSelectedOption(q, key) {
        if (!q.userAnswer) return false
        return q.userAnswer.split(',').includes(key)
      },
      // 根据左侧题目列表的 status 字段获取题号样式
      // status: '1' → 绿色，'0' → 红色，'null' → 灰色
      getNumClass(item) {
        if (item.answerStatus === 1) return 'num-correct'
        if (item.answerStatus === 2) return 'num-wrong'
        return 'num-unanswered'
      },
      //匹配用户选择
      isValueInList(target, list) {
        if (!Array.isArray(list)) return false
        return list.some(item => item === target)
      },
      //返回用户选择答案
      arrayToString(list) {
        list = list.split(',');
        const mappedList = list.map(item => {
          if (item === 'Y') return '对';
          if (item === 'N') return '错';
          return item;
        });
        return mappedList.join(',');
      },
      //时间换算
      formatTime(totalSeconds) {
        if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
          return '0秒'
        }
        const minutes = Math.floor(totalSeconds / 60)
        const seconds = totalSeconds % 60
        if (minutes > 0 && seconds > 0) {
          return `${minutes}分${seconds}秒`
        } else if (minutes > 0 && seconds === 0) {
          return `${minutes}分`
        } else {
          return `${seconds}秒`
        }
      }
    },
  }
</script>
<style scoped lang="scss">
  .startPracticing {
    flex:1;
    display: flex;
    flex-direction: column;
    background:#FFFFFF;
    border-radius:10px;
    overflow: hidden;
    padding:0;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
    margin:10px;
    .content-box {
      flex: 1;
      display: flex;
      overflow: hidden;
      background: #f5f5f5;

      /* ========== 左侧面板 ========== */
      .left-panel {
        width: 400px;
        min-width: 400px;
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 20px 16px;
        border-right: 1px solid #e8e8e8;
        position: relative;

        &::-webkit-scrollbar {
          width: 4px;
        }

        &::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 4px;
        }

        .exam-title {
          font-size: 16px;
          font-weight: 700;
          color: #1890ff;
          margin-bottom: 10px;
        }

        .exam-subtitle {
          font-size: 13px;
          color: #666;
          margin-bottom: 16px;
        }

        .exam-name-box {
          font-size: 14px;
          font-weight: 700;
          color: #333;
          margin-bottom: 12px;
          line-height: 1.6;
        }
        .examKindType{
          position: absolute;
          top:0;
          right:0;
          color:#fff;
          background-color: #F59A23;
          width:60px;
          line-height:30px;
          font-size:16px;
          border-bottom-left-radius: 6px;
          text-align: center;
        }

        .question-group-max-box {
          flex: 1;
        }

        .exam-info-box {
          background: #f5f5f5;
          border-radius: 6px;
          padding: 12px;
          margin-bottom: 20px;

          .info-item {
            font-size: 13px;
            color: #333;
            margin-bottom: 6px;
            line-height: 1.5;

            &:last-child {
              margin-bottom: 0;
            }

            .label {
              font-weight: 500;
            }

            .result-pass {
              color: #52c41a;
              font-weight: 700;
            }

            .result-fail {
              color: #faad14;
              font-weight: 700;
            }
          }
        }

        .question-group {
          margin-bottom: 16px;

          .group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;

            .group-title {
              font-size: 14px;
              font-weight: 600;
              color: #333;
            }

            .group-count {
              font-size: 12px;
              color: #999;
            }
          }

          .question-nums {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;

            .num-item {
              width: 36px;
              height: 36px;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 13px;
              font-weight: 600;
              cursor: pointer;
              position: relative;
              color: #fff;
              transition: opacity 0.2s;

              &:hover {
                opacity: 0.85;
              }

              &.num-correct {
                background: #52c41a;
              }

              &.num-wrong {
                background: #ff4d4f;
              }

              &.num-unanswered {
                background: #999;
                color: #fff;
              }

              &.num-active {
                outline: 3px solid #1890ff;
                outline-offset: 1px;
              }
            }
          }
        }

        .left-time-box {
          padding-top: 20px;
          display: flex;

          p {
            line-height: 30px;
          }

          p:nth-child(1) {
            flex: 4;
            color: #666;
            text-align: right;
            padding: 0 10px;
            font-size: 16px;
            font-weight: 700;
          }

          p:nth-child(2) {
            flex: 5;
            color: #EC808D;
            padding: 0 10px;
            font-size: 16px;
            font-weight: 700;
          }
        }
      }

      /* ========== 右侧内容区 ========== */
      .right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 20px;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 4px;
        }
        .num-flex-box{
          display: flex;
          margin-bottom: 20px;
          background: #dedede;
          border-radius:4px;
          p{
            font-size:16px;
            line-height:40px;
            font-weight:700;
          }
          .text-p{
            width:200px;
            text-align: center;
          }
          .null-p{
            flex: 1;
          }
        }
        .question-card {
          flex: 1;
          display: flex;
          flex-direction: column;
          background: #fff;
          border-radius: 8px;
          padding: 20px;

          .question-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;

            .question-index-box {
              width: 28px;
              height: 28px;
              background: #1890ff;
              color: #fff;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 13px;
              font-weight: 700;
              margin-right: 10px;
              flex-shrink: 0;
            }

            .question-type-score {
              font-size: 15px;
              font-weight: 600;
              color: #333;
              flex: 1;
            }
            .viewAnswer-p{
              background-color: #0183fa;
              color:#fff;
              font-size:14px;
              width:80px;
              text-align: center;
              border-radius:4px;
              margin-right:30px;
              cursor: pointer;
              line-height:28px;
            }
            .question-stars {
              display: flex;
              gap: 2px;

              .star-icon {
                font-size: 18px;
                font-style: normal;

                &.star-active {
                  color: #fadb14;
                }

                &.star-empty {
                  color: #d9d9d9;
                }
              }
            }
          }

          .question-content {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 16px;
            line-height: 1.6;
          }

          .options-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;

            .option-item {
              display: flex;
              align-items: center;
              border: 1px solid #e8e8e8;
              border-radius: 6px;
              padding: 10px 14px;
              cursor: pointer;
              transition: border-color 0.2s;

              &.option-selected {
                border-color: #1890ff;
                background: #e6f7ff;

                .option-key {
                  color: #1890ff;
                }

                .option-text {
                  color: #1890ff;
                }
              }

              .option-radio {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 1px solid #d9d9d9;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;

                .radio-checked {
                  color: #1890ff;
                  font-size: 12px;
                }

                .radio-empty {
                  display: block;
                  width: 8px;
                  height: 8px;
                }
              }

              .option-checkbox {
                margin-right: 10px;
                flex-shrink: 0;
              }

              .option-key {
                font-size: 14px;
                font-weight: 600;
                color: #666;
                margin-right: 8px;
                width: 16px;
                flex-shrink: 0;
              }

              .option-text {
                font-size: 14px;
                color: #333;
                flex: 1;
              }
            }
          }

          .answer-result-box {
            background: #f5f5f5;
            border-radius: 6px;
            padding: 14px 16px;

            .answer-status {
              margin-bottom: 10px;
              font-size: 14px;
              font-weight: 600;

              .status-correct {
                color: #52c41a;
              }

              .status-wrong {
                color: #ff4d4f;
              }
            }

            .answer-detail {
              .answer-row {
                font-size: 14px;
                color: #333;
                margin-bottom: 10px;

                .answer-label {
                  font-weight: 600;
                }
              }

              .analysis-title {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                margin-bottom: 6px;
              }

              .analysis-content {
                font-size: 13px;
                /*color: #fa8c16;*/
                line-height: 1.7;
                margin:0 20px;
              }
            }
          }
        }

        .question-button-box {
          height: 34px;
          display: flex;
          margin-top: 20px;

          .null-p {
            flex: 1;
          }

          .previous-question {
            width: 100px;
            line-height: 34px;
            height: 34px;
            border-radius: 6px;
            background-color: #999;
            color: #fff;
            text-align: center;
            margin: 0 0 0 120px;
            cursor: pointer;
          }

          .next-question {
            width: 100px;
            line-height: 34px;
            height: 34px;
            border-radius: 6px;
            background-color: #999;
            color: #fff;
            text-align: center;
            margin: 0 120px 0 0;
            cursor: pointer;
          }

          .submit-exam {
            width: 140px;
            line-height: 34px;
            height: 34px;
            border-radius: 6px;
            background-color: #0183fa;
            color: #fff;
            text-align: center;
            cursor: pointer;
          }

          .check-button {
            background-color: #0183fa;
            color: #fff;
          }
        }
      }
    }
    .shade-max-big-box{
      position: fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,0.4);
      display: flex;             /* 开启 Flex 布局 */
      justify-content: center;   /* 水平居中 */
      align-items: center;       /* 垂直居中 */
      .shade-big-box{
        width:500px;
        height:260px;
        border-radius:6px;
        background-color: #fff;
        position: relative;
        .title-box{
          margin-top:60px;
          p{
            line-height:40px;
            font-size: 16px;
            font-weight:700;
            color:#F59A23;
            text-align: center;
            span{
              font-size:30px;
              margin-right:10px;
            }
          }
        }
        .text-p{
          line-height:40px;
          color:#333;
          text-align: center;
          font-size:15px;
          font-weight: 700;
        }
        .button-box{
          margin-top:40px;
          display: flex;
          p{
            line-height:35px;
            border-radius:6px;
            text-align: center;
          }
          .null-p{
            flex: 1;
          }
          .button-p-1{
            cursor: pointer;
            margin-right:10px;
            width:100px;
            border:1px solid #0183fa;
            color:#0183fa;
            background-color: #fff;
          }
          .button-p-2{
            cursor: pointer;
            width:100px;
            border:1px solid #0183fa;
            color:#fff;
            background-color: #0183fa;
          }
        }
        .out-button{
          position: absolute;
          top:20px;
          right:20px;
          font-size:26px;
          color:#999;
          cursor: pointer;
        }
      }
    }
  }
</style>
