<!--我的考试开始-->
<template>
  <div class="exam_start">
    <div class="exam_start_min" v-if="pageType==1">
      <p class="exam-title color_33">{{examData.title}}</p>
      <div class="exam-max-box">
        <div class="exam-left-max-box scrollbar-box" v-if="lookType">
          <!--<p class="time-p color_33" style="margin-top:20px;">距离考试结束还有</p>-->
          <!--<p class="time-p color_33">{{minute}}分{{second}}秒</p>-->
          <div class="max-num-box">
            <div class="num-name-box">
              <div>
                <i class="el-icon-success"></i>
                <p>{{numData.right}}</p>
              </div>
              <div>
                <i class="el-icon-error"></i>
                <p>{{numData.wrong}}</p>
              </div>
            </div>
            <p class="num-box">{{numData.check}} / {{numData.max}}</p>
          </div>
          <div class="for-max-box" v-if="lookData.radioList[0]">
            <div class="for-title-box">
              <p class="for-title-p">单选题</p>
              <p class="for-title-right-icon" :class="leftOneType?'el-icon-arrow-down':'el-icon-arrow-right'" @click="leftIconClick(1)"></p>
            </div>
            <div class="for-big-box" v-show="leftOneType">
              <p class="for-box"
                 :class="item.answered == 0&&questionType==1&&questionIndex!=index?'null-check':
                 (item.answered == 0&&questionType==1&&questionIndex==index?'null-check-one':
                 (item.isRight == 0&&questionType==1&&questionIndex!=index?'wrong-check':
                 (item.isRight == 0&&questionType==1&&questionIndex==index?'wrong-check-one':
                 (item.isRight == 1&&questionType==1&&questionIndex!=index?'right-check':
                 (item.isRight == 1&&questionType==1&&questionIndex==index?'right-check-one':'')))))"
                 @click="questionClick('1',index,item)"
                 v-for="(item,index) in lookData.radioList" :key="index">{{index+1}}</p>
            </div>
          </div>
          <div class="for-max-box" v-if="lookData.multiList[0]">
            <div class="for-title-box">
              <p class="for-title-p">多选题</p>
              <p class="for-title-right-icon" :class="leftTwoType?'el-icon-arrow-down':'el-icon-arrow-right'" @click="leftIconClick(2)"></p>
            </div>
            <div class="for-big-box" v-show="leftTwoType">
              <p class="for-box"
                 :class="item.answered == 0&&questionType==2&&questionIndex!=index?'null-check':
                 (item.answered == 0&&questionType==2&&questionIndex==index?'null-check-one':
                 (item.isRight == 0&&questionType==2&&questionIndex!=index?'wrong-check':
                 (item.isRight == 0&&questionType==2&&questionIndex==index?'wrong-check-one':
                 (item.isRight == 1&&questionType==2&&questionIndex!=index?'right-check':
                 (item.isRight == 1&&questionType==2&&questionIndex==index?'right-check-one':'')))))"
                 @click="questionClick('2',index,item)"
                 v-for="(item,index) in lookData.multiList" :key="index">{{index+1}}</p>
            </div>
          </div>
          <div class="for-max-box" v-if="lookData.judgeList[0]">
            <div class="for-title-box">
              <p class="for-title-p">判断题</p>
              <p class="for-title-right-icon" :class="leftThreeType?'el-icon-arrow-down':'el-icon-arrow-right'" @click="leftIconClick(3)"></p>
            </div>
            <div class="for-big-box" v-show="leftThreeType">
              <p class="for-box"
                 :class="item.answered == 0&&questionType==3&&questionIndex!=index?'null-check':
                 (item.answered == 0&&questionType==3&&questionIndex==index?'null-check-one':
                 (item.isRight == 0&&questionType==3&&questionIndex!=index?'wrong-check':
                 (item.isRight == 0&&questionType==3&&questionIndex==index?'wrong-check-one':
                 (item.isRight == 1&&questionType==3&&questionIndex!=index?'right-check':
                 (item.isRight == 1&&questionType==3&&questionIndex==index?'right-check-one':'')))))"
                 @click="questionClick('3',index,item)"
                 v-for="(item,index) in lookData.judgeList" :key="index"
              >{{index+1}}</p>
            </div>
          </div>
          <p class="button-left-p-one" @click='backButton'>返回</p>
        </div>
        <div class="exam-left-max-box scrollbar-box" v-if="!lookType">
          <!--<p class="time-p color_33" style="margin-top:20px;">距离考试结束还有</p>-->
          <!--<p class="time-p color_33">{{minute}}分{{second}}秒</p>-->
          <div class="for-max-box" v-if="examData.radioList[0]">
            <div class="for-title-box">
              <p class="for-title-p">单选题</p>
              <p class="for-title-right-icon" :class="leftOneType?'el-icon-arrow-down':'el-icon-arrow-right'" @click="leftIconClick(1)"></p>
            </div>
            <div class="for-big-box" v-show="leftOneType">
              <p class="for-box"
                 :class="questionType==1&&questionIndex==index?'for-box-one':(item.type?'for-box-two':'')"
                 @click="questionClick('1',index,item)"
                 v-for="(item,index) in examData.radioList" :key="index">{{index+1}}</p>
            </div>
          </div>
          <div class="for-max-box" v-if="examData.multiList[0]">
            <div class="for-title-box">
              <p class="for-title-p">多选题</p>
              <p class="for-title-right-icon" :class="leftTwoType?'el-icon-arrow-down':'el-icon-arrow-right'" @click="leftIconClick(2)"></p>
            </div>
            <div class="for-big-box" v-show="leftTwoType">
              <p class="for-box"
                 :class="questionType==2&&questionIndex==index?'for-box-one':(item.type?'for-box-two':'')"
                 @click="questionClick('2',index,item)"
                 v-for="(item,index) in examData.multiList" :key="index">{{index+1}}</p>
            </div>
          </div>
          <div class="for-max-box" v-if="examData.judgeList[0]">
            <div class="for-title-box">
              <p class="for-title-p">判断题</p>
              <p class="for-title-right-icon" :class="leftThreeType?'el-icon-arrow-down':'el-icon-arrow-right'" @click="leftIconClick(3)"></p>
            </div>
            <div class="for-big-box" v-show="leftThreeType">
              <p class="for-box"
                 :class="questionType==3&&questionIndex==index?'for-box-one':(item.type?'for-box-two':'')"
                 @click="questionClick('3',index,item)"
                 v-for="(item,index) in examData.judgeList" :key="index">{{index+1}}</p>
            </div>
          </div>
          <div class="button-max-box">
            <p class="button-left-p" @click='backButton'>返回</p>
            <p class="button-right-p" @click="backPage">交卷</p>
          </div>
        </div>
        <div class="exam-right-max-box scrollbar-box">
          <p class="right-title-p">
            <span class="span-type">{{questionType==1?'单选':(questionType==2?'多选':(questionType==3?'判断':''))}}</span>
            <span class="span-num">{{questionIndex+1}}.</span>
            {{questionData.content}}
          </p>
          <p class="right-title-text">请选择选项:</p>
          <template v-if="questionType==1 || questionType==3">
            <el-radio v-model="radio" :label="index"
                      :disabled="lookType"
                      @change="calculateCheck"
                      style="white-space:normal;word-break:break-all;word-wrap:break-word;height:auto"
                      v-for="(item,index) in questionData.elPaperQuAnswerList" :key="index">{{item.abc}}. {{item.content}}</el-radio>
          </template>
          <template v-if="questionType==2">
            <el-checkbox-group v-model="radioList">
              <el-checkbox :label="index"
                           :disabled="lookType"
                           @change="calculateCheck"
                           style="white-space:normal;word-break:break-all;word-wrap:break-word;height:auto"
                           v-for="(item,index) in questionData.elPaperQuAnswerList" :key="index">{{item.abc}}. {{item.content}}</el-checkbox>
            </el-checkbox-group>
          </template>
          <div class="right-button-box">
            <p class="left-button" @click="superiorQuestion" v-if="leftButtonType">上一题</p>
            <p class="right-button" @click="downQuestion" v-if="rightButtonType">下一题</p>
          </div>
        </div>
      </div>
    </div>
    <div class="success-box" v-if="pageType==2">
      <p class="success-title-p">你已做完最后一题</p>
      <div class="success-num-box">
        <p>正确率</p>
        <p>{{successData.accuracy}}<span>%</span></p>
      </div>
      <p class="success-num-box-two">本次考核共获得<span>{{successData.points}}</span>奖励分</p>
      <div class="success-text-box">
        <div style="margin-right:2px;">
          <p>{{successData.unAnswered}}</p>
          <p>未答题数</p>
        </div>
        <div style="margin-right:2px;">
          <p>{{successData.answered}}</p>
          <p>已答题数</p>
        </div>
        <div>
          <p>{{successData.errors}}</p>
          <p>错题数</p>
        </div>
      </div>
      <!--<p class="success-button-p" @click="backClickPage">回顾考核</p>-->
      <div class="success-button-max-p">
        <p class="success-button-left-p" @click="backButton">返回</p>
        <p class="success-button-right-p" @click="assessDetail">回顾考核</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { assessFinish,assessDetail } from "@/api/myPage/safeLearning";
  import { paperDetail,fillAnswer,handPaper,paperResult } from "@/api/exam/paper";
  export default {
    props:{
      transferData:{},
      violationId:{},
    },
    name: 'exam_start',
    data() {
      return {
        pageType:1,
        successData:{},
        //时间数据
        timer:{},
        minute:"",
        second:"",
        //考试数据
        examData:{},
        questionData:{},
        //当前选择题型
        questionType:"",
        //当前选中题目
        questionIndex:0,
        //单选/判断选中的ID
        radio:"",
        //多选题选中
        radioList:[],
        //按钮显示状态
        leftButtonType:false,
        rightButtonType:false,
        //题目展开状态
        leftOneType:true,
        leftTwoType:true,
        leftThreeType:true,
        //回顾状态
        lookType:false,
        lookData:{},
        numData:{
          right:0,
          wrong:0,
          check:0,
          max:0,
        }
      }
    },
    created() {

    },
    mounted(){
      console.log("examData",this.examData)
      if(this.transferData){
        this.examData = JSON.parse(JSON.stringify(this.transferData))
        this.initializationQuestion();
        // this.time(this.examData.totalTime);
      }
    },
    methods: {
      //考核回顾
      assessDetail(){
        let self = this;
        assessDetail(this.examData.id).then(response => {
          this.$set(this,'lookData',response.data);
          let obj = {
            right:0,
            wrong:0,
            check:0,
            max:0,
          };
          for(let i=0;i<self.lookData.radioList.length;i++){
            obj.max++;
            if(self.lookData.radioList[i].answered == 1){
              obj.check++;
              if(self.lookData.radioList[i].isRight == 0){
                obj.wrong++
              }else if(self.lookData.radioList[i].isRight == 1){
                obj.right++
              }
            }
          }
          for(let i=0;i<self.lookData.multiList.length;i++){
            obj.max++;
            if(self.lookData.multiList[i].answered == 1){
              obj.check++;
              if(self.lookData.multiList[i].isRight == 0){
                obj.wrong++
              }else if(self.lookData.multiList[i].isRight == 1){
                obj.right++
              }
            }
          }
          for(let i=0;i<self.lookData.judgeList.length;i++){
            obj.max++;
            if(self.lookData.judgeList[i].answered == 1){
              obj.check++;
              if(self.lookData.judgeList[i].isRight == 0){
                obj.wrong++
              }else if(self.lookData.judgeList[i].isRight == 1){
                obj.right++
              }
            }
          }
          this.$set(this,'numData',obj);
          this.$forceUpdate();
          this.lookType = true;
          this.pageType = 1;
        })
      },
      //返回
      backButton(){
        this.$parent.goPage(1);
      },
      //icon点击切换展示左侧列表
      leftIconClick(type){
        if(type == 1){
          this.leftOneType = !this.leftOneType;
        }else if(type == 2){
          this.leftTwoType = !this.leftTwoType;
        }else if(type == 3){
          this.leftThreeType = !this.leftThreeType;
        }
      },
      //计算按钮显示
      buttonTypeClickShow(){
        if(this.questionType==1){
          //左
          this.leftButtonType = this.questionIndex != 0;
          //右
          if(this.examData.multiList[0]||this.examData.judgeList[0]){
            this.rightButtonType = true;
          }else{
            this.rightButtonType = this.questionIndex != this.examData.radioList.length - 1;
          }
        }else if(this.questionType==2){
          //左
          if(this.examData.radioList[0]){
            this.leftButtonType = true;
          }else{
            if(this.questionIndex == 0){
              this.leftButtonType = this.questionIndex != this.examData.multiList.length - 1;
            }else{
              this.leftButtonType = true;
            }
          }
          //右
          if(this.examData.judgeList[0]){
            this.rightButtonType = true;
          }else{
            this.rightButtonType = this.questionIndex != this.examData.multiList.length - 1;
          }
        }else if(this.questionType==3){
          //左
          if(this.examData.radioList[0]||this.examData.multiList[0]){
            this.leftButtonType = true;
          }else{
            this.leftButtonType = this.questionIndex != this.examData.judgeList.length - 1;
          }
          //右
          this.rightButtonType = this.questionIndex != this.examData.judgeList.length - 1;

        }
      },
      //获取问题
      getPaperDetail(){
        this.radio = "";
        this.radioList = [];
        let self = this;
        let obj = {
          paperId:this.examData.id,
          quId:this.calculateId(),
        };
        paperDetail(obj).then(response => {
          this.questionData = response.data;
          if(this.questionType == 1||this.questionType == 3){
            for(let i=0;i<self.questionData.elPaperQuAnswerList.length;i++){
              if(self.questionData.elPaperQuAnswerList[i].checked == 1){
                this.radio = i;
              }
            }
          }else if(this.questionType == 2){
            let list = [];
            for(let i=0;i<self.questionData.elPaperQuAnswerList.length;i++){
              if(self.questionData.elPaperQuAnswerList[i].checked == 1){
                list.push(i);
              }
            }
            this.radioList = list;
          }
          this.buttonTypeClickShow();
          this.$forceUpdate()
        });
      },
      //上一题
      superiorQuestion(){
        if(this.questionIndex!=0){
          fillAnswer(this.calculateFillAnswer()).then(response => {
            this.questionIndex --
            this.getPaperDetail();
          });
        }else{
          if(this.questionType==2 && this.examData.radioList[0]){
            fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 1;
              this.questionIndex = this.examData.radioList.length-1;
              this.getPaperDetail();
            });
          }else if (this.questionType==3 && this.examData.multiList[0]){
            fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 2;
              this.questionIndex = this.examData.multiList.length-1;
              this.getPaperDetail();
            });
          }else if (this.questionType==3 && this.examData.radioList[0]){
            fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 1;
              this.questionIndex = this.examData.radioList.length-1;
              this.getPaperDetail();
            });
          }
        }
      },
      //下一题
      downQuestion(){
        if (this.questionType==1){
          if(this.questionIndex < this.examData.radioList.length-1){
            fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionIndex++
              this.getPaperDetail();
            });
          }else if(this.examData.multiList[0]){
            fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 2;
              this.questionIndex = 0;
              this.getPaperDetail();
            });
          }else if(this.examData.judgeList[0]){
            fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 3;
              this.questionIndex = 0;
              this.getPaperDetail();
            });
          }
        } else if(this.questionType==2){
          if(this.questionIndex < this.examData.multiList.length-1){
            fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionIndex++
              this.getPaperDetail();
            });
          }else if(this.examData.judgeList[0]){
            fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 3;
              this.questionIndex = 0;
              this.getPaperDetail();
            });
          }
        } else if(this.questionType==3){
          if(this.questionIndex < this.examData.judgeList.length-1){
            fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionIndex++
              this.getPaperDetail();
            });
          }
        }
      },
      //题目选择
      questionClick(type,index,item){
        console.log("type",type)
        console.log("index",index)
        fillAnswer(this.calculateFillAnswer()).then(response => {
          if(this.questionType != type || this.questionIndex != index){
            this.questionType = type;
            this.questionIndex = index;
            this.getPaperDetail();
          }
        });
      },
      //计算当前选中选项
      calculateCheck(index){
        console.log(index)
        let self = this;
        if(this.questionType == 1||this.questionType == 3){
          //单选或判断
          for(let i=0;i<self.questionData.elPaperQuAnswerList.length;i++){
            if(i==index){
              self.questionData.elPaperQuAnswerList[i].checked = 1;
            }else{
              self.questionData.elPaperQuAnswerList[i].checked = 0;
            }
          }
        }
        if(this.questionType == 1){
          this.examData.radioList[this.questionIndex].type = true;
        }else if(this.questionType == 2){
          this.examData.multiList[this.questionIndex].type = true;
        }else if(this.questionType == 3){
          this.examData.judgeList[this.questionIndex].type = true;
        }
        this.$forceUpdate()
      },
      //答题卡初始化
      initializationQuestion(){
        if(this.examData.radioList[0]){
          this.questionType=1;
        }else if(this.examData.multiList[0]){
          this.questionType=2;
        }else if(this.examData.judgeList[0]){
          this.questionType=3;
        }
        this.getPaperDetail();
      },
      //当前题目ID计算
      calculateId(){
        let id = "";
        if(this.questionType == 1){
          id = this.examData.radioList[this.questionIndex].quId;
        }else if(this.questionType == 2){
          id = this.examData.multiList[this.questionIndex].quId;
        }else if(this.questionType == 3){
          id = this.examData.judgeList[this.questionIndex].quId;
        }
        return id;
      },
      //计算当前选项答案
      calculateFillAnswer(){
        let self = this;
        let obj = {
          paperId:this.examData.id,
          quId:this.calculateId(),
          elPaperQuAnswerList:[]
        };
        if(this.questionType == 1||this.questionType == 3){
          for(let i=0;i<self.questionData.elPaperQuAnswerList.length;i++){
            if(self.questionData.elPaperQuAnswerList[i].checked == 1){
              obj.elPaperQuAnswerList.push(self.questionData.elPaperQuAnswerList[i]);
            }
          }
        }else if(this.questionType == 2){
          for(let i=0;i<self.radioList.length;i++){
            self.questionData.elPaperQuAnswerList[self.radioList[i]].checked=1;
            obj.elPaperQuAnswerList.push(self.questionData.elPaperQuAnswerList[self.radioList[i]]);
          }
        }
        return obj;
      },
      // 提交按钮
      backPage(){
        this.$confirm('确认交卷吗？')
          .then(_ => {
            fillAnswer(this.calculateFillAnswer()).then(response => {
              assessFinish(this.examData.id).then(response => {
                this.successData = response.data;
                this.pageType = 2;
                // this.msgSuccess("提交成功");
                // this.$parent.goPage(1);
              });
            });
          })
          .catch(_ => {});
      },
      // 考试时间到
      timeOver(){
        let obj = {
          id:this.examData.id,
          violationId:this.violationId
        };
        fillAnswer(this.calculateFillAnswer()).then(response => {
          handPaper(obj).then(response => {
            this.msgSuccess("考试时间结束,自动交卷成功.");
            this.$parent.pageSwitch(1);
          });
        });
      },
      //定时器
      time(num){
        let self = this;
        let time = num * 60;
        this.timer = window.setInterval(refreshCount, 1000);
        function refreshCount() {
          if(time<=0){
            window.clearInterval(this.timer);
            self.timeOver();
          }else{
            time--;
            self.minute = parseInt(time/60);
            self.second = time%60;
          }
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
      console.log("beforeDestroy");
    },
    destroyed() {
      //清除定时器
      //clearInterval(this.timer);
      console.log("destroyed");
    }
  }
</script>

<style lang="scss" scoped>
  .exam_start{
    color:#333;
    flex:1;
    /*box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);*/
    /*margin:10px 20px 20px;*/
    border-radius:10px;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently not supported by any browser */
    p{
      margin:0;
    }
    .exam_start_min{
      flex:1;
      display: flex!important;
      flex-direction: column;
      overflow: hidden;
      .exam-title{
        height:80px;
        line-height:80px;
        text-align: center;
        font-size:18px;
        box-shadow: 0 3px 16px 2px rgba(0, 0, 0, 0.06);
      }
      .exam-max-box{
        flex:1;
        display: flex;
        overflow: hidden;
        .exam-left-max-box{
          width:300px;
          padding-top:10px;
          box-shadow: 0 3px 16px 2px rgba(0, 0, 0, 0.06);
          .time-p{
            line-height:30px;
            font-size:16px;
            text-align: center;
          }
          .max-num-box{
            margin-top:20px;
            .num-name-box{
              display: flex;
              div{
                display: flex;
                text-align: center;
                height:26px;
                line-height:26px;
                font-size:22px;
                margin: 0 0 0 20px;
                i{
                  font-size:26px;
                  line-height:26px;
                  margin-right:10px;
                }
                p{
                  font-size:14px;
                  width:60px;
                  text-align: left;
                }
              }
              div:nth-child(1){
                color: #02A7F0;
              }
              div:nth-child(2){
                color: #D9001B;
              }
            }
            .num-box{
              display: inline-block;
              font-size:14px;
              padding:5px 30px;
              text-align: center;
              border:1px solid #999;
              margin:20px 0 0 20px;
            }
          }
          .for-max-box{
            padding:0 20px;
            .for-title-box{
              display: flex;
              .for-title-p{
                line-height:50px;
                font-size:16px;
              }
              .for-title-right-icon{
                width:50px;
                line-height:50px;
                font-size:20px;
                text-align: center;
                cursor:pointer;
              }
            }
            .for-big-box{
              .for-box{
                display: inline-block;
                border:1px solid #E0E0E0;
                height:30px;
                width:46px;
                text-align: center;
                line-height:30px;
                border-radius:4px;
                margin:0 8px 8px 0;
                font-size:16px;
                color:#999;
                cursor:pointer;
              }
            }
            .for-box-one{
              border:1px solid #0045af!important;
              color:#0045af!important;
            }
            .for-box-two{
              border:1px solid #0045af;
              background: #0045af;
              color:#fff!important;
            }
            .null-check{
              border:1px solid #999!important;
              background: #999!important;
              color:#fff!important;
              opacity:0.4;
            }
            .null-check-one{
              border:1px solid #999!important;
              background: #999!important;
              color:#fff!important;
              opacity:1;
            }
            .wrong-check{
              border:1px solid #D9001B!important;
              background: #D9001B!important;
              color:#fff!important;
              opacity:0.4;
            }
            .wrong-check-one{
              border:1px solid #D9001B!important;
              background: #D9001B!important;
              color:#fff!important;
              opacity:1;
            }
            .right-check{
              border:1px solid #02A7F0!important;
              background: #02A7F0!important;
              color:#fff!important;
              opacity:0.4;
            }
            .right-check-one{
              border:1px solid #02A7F0!important;
              background: #02A7F0!important;
              color:#fff!important;
              opacity:1;
            }
          }
          .button-max-box{
            display: flex;
            width:220px;
            margin:60px auto;
            .button-left-p{
              cursor:pointer;
              width: 100px;
              border:1px solid #999;
              border-radius: 4px;
              color:#999;
              line-height:38px;
              font-size:16px;
              text-align: center;
              margin-right:20px;
            }
            .button-right-p{
              cursor:pointer;
              width: 100px;
              border:1px solid #0045AF;
              background: #0045AF;
              border-radius: 4px;
              color:#fff;
              line-height:38px;
              font-size:16px;
              text-align: center;
            }
          }
          .button-left-p-one{
            cursor:pointer;
            width: 100px;
            margin:60px auto;
            border:1px solid #999;
            border-radius: 4px;
            color:#999;
            line-height:38px;
            font-size:16px;
            text-align: center;
          }
        }
        .exam-right-max-box{
          flex:1;
          padding:50px 60px;
          .right-title-p{
            margin-bottom:40px;
            font-size:16px;
            line-height:20px;
            .span-type{
              line-height:20px;
              padding:0 5px;
              background: #02A7F0;
              color:#fff;
              font-size:14px;
              margin-right:10px;
            }
            .span-num{
              font-size:16px;
              line-height:20px;
            }
          }
          .right-title-text{
            margin-bottom:40px;
            font-size:16px;
            line-height:20px;
          }
          .right-button-box{
            display: flex;
            margin-top:60px;
            p{
              font-size:14px;
              text-align: center;
              cursor:pointer;
            }
            .left-button{
              width: 100px;
              height: 40px;
              border: 1px solid #E0E0E0;
              color:#999;
              border-radius: 6px;
              margin-right:26px;
              line-height:38px;
            }
            .right-button{
              width: 100px;
              height: 40px;
              background: #0045AF;
              color:#FFFFFF;
              border-radius: 6px;
              line-height:40px;
            }
          }
        }
      }
    }
    .success-box{
      flex:1;
      display: flex!important;
      flex-direction: column;
      .success-title-p{
        font-size:20px;
        text-align: center;
        margin-top:100px;
      }
      .success-num-box{
        width:100px;
        height:100px;
        border:2px solid #fff;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
        background: #02A7F0;
        border-radius:50%;
        margin:40px auto;
        color:#fff;
        p:nth-child(1){
          margin-top:13px;
          font-weight:500;
          text-align: center;
          font-size:16px;
        }
        p:nth-child(2){
          margin-top:5px;
          font-size:40px;
          height:40px;
          line-height:40px;
          text-align: center;
          font-weight:500;
          span{
            font-size:16px;
          }
        }
      }
      .success-num-box-two{
        text-align: center;
        font-weight:500;
        font-size:14px;
        span{
          margin:0 10px;
          font-size:40px;
          color:#02A7F0;
        }
      }
      .success-text-box{
        display: flex;
        margin:40px auto 0;
        div{
          background: #dedede;
          width:112px;
          height:77px;
          p{
            text-align: center;
          }
          p:nth-child(1){
            height:46px;
            line-height:46px;
          }
        }
      }
      .success-button-p{
        margin:60px auto 0;
        text-align: center;
        width:205px;
        line-height:55px;
        background: #0045af;
        color:#fff;
        border-radius:4px;
        cursor:pointer;
      }
      .success-button-max-p{
        margin:60px auto 0;
        width:340px;
        display: flex;
        .success-button-left-p{
          margin-right:20px;
          text-align: center;
          width:160px;
          height:40px;
          line-height:38px;
          background: #fff;
          color:#999;
          font-size:16px;
          border:1px solid #999;
          border-radius:4px;
          cursor:pointer;
        }
        .success-button-right-p{
          text-align: center;
          width:160px;
          height:40px;
          line-height:38px;
          border:1px solid #0045af;
          background: #0045af;
          color:#fff;
          font-size:16px;
          border-radius:4px;
          cursor:pointer;
        }
      }
    }
  }
</style>
