更新CAQ优化，适配低分辨率设备

yj

2024-12-03 7f4105bc2f1d4f8562e1cb9776ce49f8be0c98d2

 src/views/exam/paper/values.vue

@@ -1,19 +1,39 @@
<template>
   <div>
      <el-container class="app-item-contain step1" v-if="step === 'step0'">
         <el-header class="">
            <h1>{{$t('values_step_0_title')}}</h1>
         </el-header>
         <el-main class="">
            <div class="text-line" v-html="$t('values_step_0_content')"></div>
            <el-row class="do-align-center">
              <el-button @click="step0_next" type="primary" round>{{$t('startDo')}}</el-button>
            </el-row>
         </el-main>
      </el-container>
      <el-container class="app-item-contain step1" v-if="step === 'step1'">
         <el-header class="">
            <h1>{{$t('values_title')}}</h1>
         </el-header>
         <el-main class="" style="padding-top: 3%;">
         <el-main class="">
            <div>
               {{$t('values_title_description')}}
               <div class="text-line" v-html="$t('values_title_description')"></div>
               <div class="text-line">{{$t('values_title_description_1')}}<img class="tools-button" src="@/assets/exam-paper/good.png" style="width: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_1_2')}}</span></div>
               <div class="text-line">{{$t('values_title_description_2')}}<img class="tools-button" src="@/assets/exam-paper/nogood.png" style="width: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_2_2')}}</span></div>
               <div class="text-line">{{$t('values_title_description_3')}}<img class="tools-button" src="@/assets/exam-paper/question.png" style="width: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_3_2')}}</span></div>
               <div class="text-line">{{$t('values_title_description_4')}}<img class="tools-button" src="@/assets/exam-paper/scale.png" style="width: 15px;height: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_4_2')}}</span></div>
               <div class="text-line">{{$t('values_title_description_5')}}</div>
            </div>

            <div style="display: flex;justify-content: flex-start;padding: 10px 0;">
               <el-button @click="step1_start" type="primary" round v-if="!step1Start">{{$t('start')}}</el-button>
               <el-button style="margin-top: 12px;" @click="step1_start" type="primary" round v-if="!step1Start">{{$t('start')}}</el-button>
               <el-button style="margin-top: 12px;" type="primary" round @click="step1_next"
                  v-if="(step1Start && itemSize>0)">
                  {{$t('next')}}
               </el-button>
            </div>
            <div class="selectCount">
               {{ questionItems.filter(obj=>obj.content===null).length + $t('values_title_description_6') }}
            </div>
            <div class="mullinediv" v-if="step1Start">
               <div v-for="(question,index1) in questionItems" class="mullinediv-item"
@@ -36,30 +56,62 @@
            </div>
         </el-main>
      </el-container>
      <el-container class="app-item-contain step1" v-if="step === 'step2-0'">
         <el-header class="">
            <h1>{{$t('values_step_2_title')}}</h1>
         </el-header>
         <el-main class="">
            <div v-html="$t('values_step_2_content')"></div>
            <el-row class="do-align-center">
              <el-button @click="step2_0_next" type="primary" round>{{$t('startDo')}}</el-button>
            </el-row>
         </el-main>
      </el-container>
      <el-container class="app-item-contain step2" v-if="step === 'step2'">
         <el-header class="">
            <h1>{{$t('values_step_2_title')}}</h1>
         </el-header>
         <el-main class="">
            <div>
               <div class="tag-group">
               <!-- <div class="tag-group" style="display: flex;">
                  <span class="tag-group__title"
                     style="padding-right: 20px;font-size: 26px;">{{$t('values_cur_step')}}（{{step2SubStep}} /
                     style="padding-right: 10px;font-size: 26px;margin: auto 0px;">{{$t('values_cur_step')}}（{{step2SubStep}} /
                     {{step2ScoreRanges.length}})</span>
                  <el-tag v-for="item in step2ScoreRanges" :key="item.itemOrder"
                     :type="getStep2StepTagType(item.step)" style="margin: 0 2px;font-size: 26px;" size="large"
                     effect="light">
                     {{ item.quantity }}
                  </el-tag>
               </div>
                  <div>
                        <div style="display: flex;padding: 5px 0;">
                        <div v-for="item in step2ScoreRanges" :key="item.itemOrder" style="margin: 0 2px;font-size: 12px;width: 100px;text-align: center;" size="large">
                           {{ item.stepName }}
                        </div>
                        </div>
                        <div>
                        <el-tag v-for="item in step2ScoreRanges" :key="item.itemOrder"
                           :type="getStep2StepTagType(item.step)" style="margin: 0 2px;font-size: 26px;width: 100px;text-align: center;" size="large"
                           effect="light">
                           {{ item.quantity }}
                        </el-tag>
                        </div>
                     </div>
               </div> -->
               <div style="display: flex;justify-content: space-between;">
                  <div style="line-height: 50px;text-indent: 2em;">
                     <span
                  <div class="text-line" style="text-indent: 2em;">
                     <div v-if="step2SubStep == 1">
                        {{ $t('values_step_tips_for_1') }}
                     </div>
                     <div
                        v-if="(step2SubStep == step2ScoreRanges.length) && (step2ScoreRanges.length % 2 == 1)">
                        {{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
                     </span>
                     <span v-else>
                        {{(step2SubStep % 2 == 1)?$t('values_step_tips_for_1').replace('%N',getStep2StepItem(step2SubStep).quantity):$t('values_step_tips_for_2').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
                     </span>
                        {{$t('values_step_tips_for_0').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName.toUpperCase())}}
                     </div>
                     <div v-else>
                        {{$t('values_step_tips_for_2').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName.toLowerCase())}}
                     </div>
                     <div class="text-line">{{$t('values_step_tips_for_3')}}<img class="tools-button" src="@/assets/exam-paper/yes.png" style="width: 15px;position: absolute;margin-top: 6px;margin-left: 5px;"/><span style="margin-left: 22px;">{{$t('values_step_tips_for_3_1')}}</span></div>
                     <div class="text-line">{{$t('values_step_tips_for_4')}}<img class="tools-button" src="@/assets/exam-paper/no.png" style="width: 15px;position: absolute;margin-top: 6px;margin-left: 5px;"/><span style="margin-left: 22px;">{{$t('values_step_tips_for_4_1')}}</span></div>
                     <div class="text-line">{{$t('values_step_tips_for_5')}}<img class="tools-button" src="@/assets/exam-paper/scale.png" style="width: 15px;position: absolute;margin-top: 6px;margin-left: 5px;"/><span style="margin-left: 22px;">{{$t('values_step_tips_for_5_1')}}</span></div>
                     <div style="color: red;">
                        {{$t('values_step_tips').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
                     </div>
                  </div>
                  <div style="display: flex;justify-content: flex-end;">
                  <div style="margin-top: auto;">
                     <el-button type="primary" round @click="step2_pre" v-if="step2SubStep>1">{{$t('pre')}}
                     </el-button>
                     <el-button type="primary" round @click="step2_next">{{$t('next')}}</el-button>
@@ -85,7 +137,151 @@
                     </div>
                  </div>
               </div>
               <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>


					

               <!-- 选择相似的图片 -->
               <div v-if="step2SubStep % 2 >= 1">
                  <!-- 与我相似 -->
                  <el-divider content-position="left">{{$t('values_select_tips_like')}}</el-divider>
                  <div style="height: auto;overflow: auto;">
                     <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===0).length>0">
                        <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===0)" class="mullinediv-item"
                           v-if="isNull(question.subjectId)">
                           <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                              :preview-src-list="[question.imgUrl]"></el-image>
                           <div style="display: flex; justify-content: space-between;">
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                 @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                              </el-image>
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                 @click="previewImg('q2Img'+question.id)"></el-image>
                           </div>
                        </div>
                     </div>
                     <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===0 && obj.subjectId===null).length==0">
                        {{$t('values_no_select')}}
                     </div>
                  </div>

                  <!-- 不确定 -->
                  <el-divider content-position="left">{{$t('values_select_tips_neutral')}}</el-divider>
                  <div style="height: auto;overflow: auto;">
                     <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===1).length>0">
                        <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===1)" class="mullinediv-item"
                           v-if="isNull(question.subjectId)">
                           <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                              :preview-src-list="[question.imgUrl]"></el-image>
                           <div style="display: flex; justify-content: space-between;">
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                 @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                              </el-image>
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                 @click="previewImg('q2Img'+question.id)"></el-image>
                           </div>
                        </div>
                     </div>
                     <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===1 && obj.subjectId===null).length==0">
                        {{$t('values_no_select')}}
                     </div>
                  </div>

                  <!-- 与我不相似 -->
                  <el-divider content-position="left">{{$t('values_select_tips_unlike')}}</el-divider>
                  <div style="height: auto;overflow: auto;">
                     <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>obj.content===2).length>0">
                        <div v-for="(question,index3) in questionItems.filter(obj=>obj.content===2)" class="mullinediv-item"
                           v-if="isNull(question.subjectId)">
                           <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                              :preview-src-list="[question.imgUrl]"></el-image>
                           <div style="display: flex; justify-content: space-between;">
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                 @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                              </el-image>
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                 @click="previewImg('q2Img'+question.id)"></el-image>
                           </div>
                        </div>
                     </div>
                     <!-- <div class="mullinediv" style="" v-if="sumStep2UnSelectedNum()<=0">
                        {{$t('values_no_select')}}
                     </div> -->
                     <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===2 && obj.subjectId===null).length==0">
                        {{$t('values_no_select')}}
                     </div>
                  </div>
               </div>

               <!-- 选择不相似的图片 -->
               <div v-if="step2SubStep % 2 == 0">
                  <!-- 与我不相似 -->
                  <el-divider content-position="left">{{$t('values_select_tips_unlike')}}</el-divider>
                  <div style="height: auto;overflow: auto;">
                     <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===2).length>0">
                        <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===2)" class="mullinediv-item"
                           v-if="isNull(question.subjectId)">
                           <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                              :preview-src-list="[question.imgUrl]"></el-image>
                           <div style="display: flex; justify-content: space-between;">
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                 @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                              </el-image>
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                 @click="previewImg('q2Img'+question.id)"></el-image>
                           </div>
                        </div>
                     </div>
                     <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===2 && obj.subjectId===null).length==0">
                        {{$t('values_no_select')}}
                     </div>
                  </div>

                  <!-- 不确定 -->
                  <el-divider content-position="left">{{$t('values_select_tips_neutral')}}</el-divider>
                  <div style="height: auto;overflow: auto;">
                     <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===1).length>0">
                        <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===1)" class="mullinediv-item"
                           v-if="isNull(question.subjectId)">
                           <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                              :preview-src-list="[question.imgUrl]"></el-image>
                           <div style="display: flex; justify-content: space-between;">
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                 @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                              </el-image>
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                 @click="previewImg('q2Img'+question.id)"></el-image>
                           </div>
                        </div>
                     </div>
                     <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===1 && obj.subjectId===null).length==0">
                        {{$t('values_no_select')}}
                     </div>
                  </div>

                  <!-- 与我相似 -->
                  <el-divider content-position="left">{{$t('values_select_tips_like')}}</el-divider>
                  <div style="height: auto;overflow: auto;">
                     <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===0).length>0">
                        <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===0)" class="mullinediv-item"
                           v-if="isNull(question.subjectId)">
                           <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                              :preview-src-list="[question.imgUrl]"></el-image>
                           <div style="display: flex; justify-content: space-between;">
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                 @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                              </el-image>
                              <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                 @click="previewImg('q2Img'+question.id)"></el-image>
                           </div>
                        </div>
                     </div>
                     <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===0 && obj.subjectId===null).length==0">
                        {{$t('values_no_select')}}
                     </div>
                  </div>
               </div>
               <!-- <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>
               <div style="height: auto;overflow: auto;">
                  <div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
                     <div v-for="(question,index3) in questionItems" class="mullinediv-item"
@@ -104,18 +300,29 @@
                  <div class="mullinediv" style="" v-if="sumStep2UnSelectedNum()<=0">
                     {{$t('values_no_select')}}
                  </div>
               </div>
               </div> -->
            </div>
         </el-main>
      </el-container>
      <el-container class="app-item-contain step3" v-if="step === 'step3'">
         <el-main class="">
            <div style="position: fixed;z-index: 999; width:90%; top: 56px;">
               <div style="display: flex;justify-content: flex-end;">
                  <div style="padding: 0 10px;">{{$t('values_pic_tmpArea')}}</div>
            <div style="position: fixed;z-index: 999; width:90%; top: 50px;">
               <div style="display: flex;justify-content: flex-end;padding: 10px;background-color: #f5f7fa;">
                  <div class="text-line" style="padding-right: 20px;width:50%;">
                     <div v-html="$t('values_pic_tmpArea_desc')">

                     </div>
                     <el-button type="primary" round style="height: fit-content;margin-top:5px"
                        @click="step3_commit" :disabled="submitDisable">
                        {{$t('commit')}}
                     </el-button>
                  </div>
                  <div style="padding: 0 10px;width:80px;">
                     {{$t('values_pic_tmpArea')}}
                  </div>
                  <draggable animation="300" class="pic-tmparea-div"
                     style="background-color: #f5f7fa;border: 1px solid gray;padding: 10px;width: 50%;"
                     :list="step3EWEIArea[0]" :options="{group:{name:'EWEIArea',pull:'clone'}}" 
                     style="border: 1px solid gray;padding: 10px;width: 45%;"
                     :list="step3EWEIArea[0]" :options="{group:{name:'EWEIArea',pull:'clone'}}"
                     @start="ev=>step3TmpAreaStart(ev,0)"
                     @end="step3TmpAreaMoveEnd">
                     <div v-for="q in step3EWEIArea[0]" :key="q.id" class="mullinediv-item2"
@@ -123,20 +330,37 @@
                        <el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" fit="fill"></el-image>
                     </div>
                  </draggable>
                  <el-button type="primary" round style="height: fit-content;margin: 0 10px;"
                  <!-- <el-button type="primary" round style="height: fit-content;margin: 0 10px;"
                     @click="step3_commit" :disabled="submitDisable">
                     {{$t('commit')}}
                  </el-button>
                  </el-button> -->
               </div>
            </div>
            <div style="display:flex;margin-top: 160px;">
               <div style="display: inline-block;min-width: 150px;text-align: right;">
            <div style="display:flex;margin-top: 200px;">
               <div style="display: inline-block;min-width: 160px;text-align: right;padding-right: 5px;">
                  <div class="mul-inlinediv-row mul-inlinediv-lineheight"
                     v-for="(item,index) in step2ScoreRanges">
                     {{(index == 0)?$t('values_mostLikeMe'):''}}{{(index == (step2ScoreRanges.length-1))?$t('values_mostUnLikeMe'):''}}
                     {{item.deviate}}
                     <span v-if="item.stepName=='不确定是否相似'">
                        不确定是否与你相似 <span v-if="item.step<step2ScoreRanges.length">{{$t('values_step_names_unit')}}</span>
                     </span>
                     <span v-else>
                        {{$t('values_step_names_unit_pre')}}{{item.stepName}} <span v-if="item.step<step2ScoreRanges.length">{{$t('values_step_names_unit')}}</span>
                     </span>
                  </div>
               </div>
               <div style="display: inline-block;width: 20px;margin-top: 4px;">
                  <div class="mul-inlinediv-row mul-inlinediv-lineheight mul-inlinediv-down"
                     v-for="(item,index) in step2ScoreRanges">
                  </div>
               </div>
               <!--
               <div style="display: inline-block;min-width: 20px;text-align: right;">
                  <div class="mul-inlinediv-row mul-inlinediv-lineheight"
                     v-for="(item,index) in step2ScoreRanges">
                     {{$t('values_step_names_unit')}}
                  </div>
               </div>
               -->
               <div class="mul-inlinediv-box">

                  <div class="mul-inlinediv" v-for="item in step2ScoreRanges">
@@ -187,6 +411,7 @@
   import examPaperAnswerApi from '@/api/examPaperAnswer'
   import demographyApi from '@/api/demography'
   import draggable from 'vuedraggable'
   import seedrandom from 'seedrandom'

   export default {
      name: 'values',
@@ -195,7 +420,7 @@
      },
      data() {
         return {
            step: 'step1',
            step: 'step0',
            step1Start: false,
            step1SelectedNum: 0,
            step2ScoreRanges: [
@@ -214,6 +439,7 @@
               "completed": false,
               "questionReports": null,
               "step": 0,
               "stepName":'',
               "selected": 0
            }],
            step2SubStep: 1,
@@ -222,210 +448,7 @@
               "subjectId": null,
            },
            step3EWEIArea: [1],
            form: {
               "id": 92,
               "level": 1,
               "subjectId": null,
               "paperType": 1,
               "name": "VAQ",
               "suggestTime": null,
               "limitDateTime": null,
               "titleItems": [{
                  "guide": "",
                  "name": "",
                  "description": "",
                  "permanentId": null,
                  "questionOrder": 0,
                  "questionReport": null,
                  "questionItems": [{
                        "id": 786,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "麻将桌",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 1,
                        "questionOrder": 0,
                        "permanentId": "VAQ00001",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 1,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
                     },
                     {
                        "id": 787,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "麻将桌2",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 2,
                        "questionOrder": 1,
                        "permanentId": "VAQ00002",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 2,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2022/12/26/123f79ad0cc38507368c22b8a7ec9b09.jpg"
                     },
                     {
                        "id": 788,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "测试1",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 3,
                        "questionOrder": 2,
                        "permanentId": "VAQ00003",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 3,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/6b80baab47a9eba6ceeec5a723397109.jpg"
                     },
                     {
                        "id": 789,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "测试2",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 4,
                        "questionOrder": 3,
                        "permanentId": "VAQ00004",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 4,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/3f8e18280f1d47362c69b18e80ddf1a3.jpg"
                     },
                     {
                        "id": 790,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "测试3",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 5,
                        "questionOrder": 4,
                        "permanentId": "VAQ00005",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 5,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/447616cb14745241f0ac700b56d0770b.jpg"
                     }
                  ],
                  "startTime": null,
                  "endTime": null,
                  "parts": [],
                  "scoreRanges": [{
                        "itemOrder": 1,
                        "quantity": 2,
                        "score": 5,
                        "completed": false,
                        "questionReports": null
                     },
                     {
                        "itemOrder": 2,
                        "quantity": 1,
                        "score": 10,
                        "completed": false,
                        "questionReports": null
                     },
                     {
                        "itemOrder": 3,
                        "quantity": 2,
                        "score": 5,
                        "completed": false,
                        "questionReports": null
                     }
                  ]
               }],
               "score": null,
               "guide": "VAQ",
               "questionOrder": [
                  0,
                  1,
                  2,
                  3,
                  4
               ],
               "parts": [],
               "questionTemplateId": "values",
               "reportTemplateId": "61",
               "memberName": "test4",
               "optionOrder": null,
               "timeOut": null,
               "jobDescriptionFile": null
            },
            form:{},
            formLoading: false,
            answer: {
               questionId: null,
@@ -461,7 +484,9 @@

         }
      },
      created: function() {
      //created: function() {
      mounted: function() {
         console.log(".....................mounted start......................")
         //console.log(".....................Test. config start......................")
         //if(this.memberToken == '' || this.memberToken == undefined) this.setMemberTocken("4bdcf437-185c-4f4e-9528-382c99509ea6")
         //console.log(".....................Test. config ednd.......................")
@@ -477,6 +502,10 @@
            _this.titleItems.push(_this.form.titleItems[0])
            _this.questionItem = _this.form.titleItems[0].questionItems[0]
            _this.questionItems = _this.form.titleItems[0].questionItems

            // 使用token生成随机数排序数组
            _this.tokenSort(_this.questionItems)

            _this.partOrder = _this.questionItem.partOrder
            _this.itemOrder = _this.form.titleItems[0].questionItems[0].itemOrder
            _this.itemSize = _this.form.titleItems[0].questionItems.length
@@ -487,12 +516,14 @@
            _this.initStep2ScoreRanges(_this.form.titleItems[0].scoreRanges)

         } else {
            console.log(".....................mounted 刷新......................")
            _this.formLoading = true
            // 防止刷新成了不同的语言
            demographyApi.queryDemographyParamInfo(_this.memberToken).then(
               re => {
                  if (re.response[0].langType !== null || re.response[0].langType.trim() !== '') {
                     _this.setLangType(re.response[0].langType)
                     console.log("lang type",re.response[0].langType,_this.langType)
                  }
                  // 加载题目
                  examPaperApi.select(_this.memberToken, _this.langType).then(re => {
@@ -505,6 +536,10 @@
                     _this.itemSize = _this.form.titleItems[0].questionItems.length
                     _this.questionItem = _this.form.titleItems[0].questionItems[_this.order]
                     _this.questionItems = _this.form.titleItems[0].questionItems

                     // 使用token生成随机数排序数组
                     _this.tokenSort(_this.questionItems)

                     _this.partOrder = _this.questionItem.partOrder
                     _this.initAnswer()
                     _this.formLoading = false
@@ -567,32 +602,49 @@
               }
            ).catch(e => {})
         }
      },
      mounted() {
         //console.log("mounted......")

         document.body.ondrop = function(event) {
            event.preventDefault();
            event.stopPropagation();
         }
      },
      // mounted() {
      //    //console.log("mounted......")
      //    document.body.ondrop = function(event) {
      //       event.preventDefault();
      //       event.stopPropagation();
      //    }
      // },
      beforeDestroy() {
         window.clearInterval(this.timer)
      },
      methods: {
         // 根据token生成随机数并根据随机数排序questionItems
         tokenSort(array) {
            // 使用token创建随机数生成器
            let rng = seedrandom(this.memberToken)
            if (array) {
               array.sort((a,b)=>{
                  return rng() - 0.5
               })
            }
            console.log("list:", this.questionItems)
         },
         step0_next(){
            this.step = "step1"
         },
         step1_start() {
            this.step = "step1"
            this.step1Start = true
            this.questionItems.sort(function(i2, i1) {
               return (i2.id - i1.id)
            })
            // this.questionItems.sort(function(i2, i1) {
            //    return (i2.id - i1.id)
            // })
            //test
            //this.initTestData()
            //回显，没有可选的时候，进入下一步
            let c = this.sumStep1UnSelectedNum()
            if (c <= 0 && this.itemSize > 0) {
               this.step = "step2"
               this.sortQuestions()
               this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
               this.step1_next()
            }
         },
         step1_next() {
@@ -602,9 +654,26 @@
               this.$message.error(_this.$t('values_nextStepTips_choices_all'))
               return
            }
            this.step = "step2"
            this.sortQuestions()
            this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
            /*
            this.$confirm(_this.$t('values_nextStepTips_tips'), _this.$t('prompt'), {
               confirmButtonText: _this.$t('determine'),
               cancelButtonText: _this.$t('cancel'),
               type: 'warning'
            }).then(() => {
                _this.step = "step2"
                _this.sortQuestions()
                _this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
        }).catch(() => {

        });
            */
            this.step2_0_next()
         },
         step2_0_next(){
            let _this = this
            _this.step = "step2"
            _this.sortQuestions()
            _this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
         },
         step2_pre() {
            if (this.step2SubStep > 1) {
@@ -614,6 +683,7 @@
         step2_next() {
            let _this = this
            let stepItem = this.getStep2StepItem(this.step2SubStep)
            console.log("questionItems.filter(obj=>Number(obj.content)===0)", this.questionItems.filter(obj=>Number(obj.content)===0))
            if (stepItem.selected == stepItem.quantity || this.sumStep2UnSelectedNum() == 0) {
               _this.answer.verifyStatus = 2
               _this.submitSubAnswer()
@@ -644,6 +714,11 @@
            this.caculateScoreRangeSelectedById(sid, -1)
         },
         step2Add(qid, sid) {
            let stepItem = this.getStep2StepItem(this.step2SubStep)
            if (stepItem.selected == stepItem.quantity || this.sumStep2UnSelectedNum() == 0) {
               this.$message.error(this.$t('values_nextStepTips_del_unnecessary'))
               return;
            }
            //console.log("step2Add....",value,qid,sid)
            this.resetQuestionItemsSubjectIdById(qid, sid) //借用subjectId，存储
            this.caculateScoreRangeSelectedById(sid, 1)
@@ -827,9 +902,9 @@
         sortQuestions() {
            let type = this.getLikeType(this.step2SubStep)
            switch (type) {
               case 0: //0:最像我
                  this.questionItems.sort(function(i2, i1) {
                     return (i2.content == 0) ? -1 : 1
               case 0: //0:最像我 数字排序（数字和升序）
                  this.questionItems.sort(function(a, b) {
                     return a.content - b.content
                  })
                  break
               case 1: //1:有疑问
@@ -837,9 +912,9 @@
                     return (i2.content == 1) ? -1 : 1
                  })
                  break
               case 2: //2:最不像我
                  this.questionItems.sort(function(i2, i1) {
                     return (i2.content == 2) ? -1 : 1
               case 2: //2:最不像我 数字排序（数字和降序）
                  this.questionItems.sort(function(a, b) {
                     return b.content - a.content
                  })
                  break
            }
@@ -880,8 +955,19 @@
         resetQuestionItemsSubjectIdById(id, value) {
            for (let item of this.questionItems) {
               if (item.id == id) {
                  item["subjectId"] = value
                  item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
                  // 如果为null，就是从选择中取消
                  if (value == null) {
                     item["subjectId"] = value
                     item['content'] = item['tempContent']
                  } else {
                     if (item['content'] != null && item['content'] != undefined) {
                        item['tempContent'] = item['content']
                     }
                     item["subjectId"] = value
                     item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
                  }

                  console.log("更改content:", item)
               }
            }
            //console.log('resetQuestionItems...', id, value, this.questionItems)
@@ -892,6 +978,9 @@
               if (this.isNull(item[key])) {
                  item[key] = value
                  if ("subjectId" == key) {
                     if (item['content'] != null && item['content'] != undefined) {
                        item['tempContent'] = item['content']
                     }
                     item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
                  }
               }
@@ -962,6 +1051,10 @@
            }
            console.log('initTestData...e', this.questionItems)
         },
         /**
          * 设置step2ScoreRanges子项的步骤顺序及正负距离值
          * @param {Object} arr
          */
         initStep2ScoreRanges(arr) {
            //console.log('initStep2ScoreRanges...s', arr)
            let _this = this
@@ -1007,8 +1100,36 @@
               //设置每项已选择的数量
               _this.step2ScoreRanges[i]['selected'] = 0
            }
            console.log('initStep2ScoreRanges...e', this.step2ScoreRanges)
            //console.log('initStep2ScoreRanges...e', this.step2ScoreRanges)
            _this.initStep2ScoreRangesStepName()
            _this.initQuestionItems()
         },
         initStep2ScoreRangesStepName(){
            let _this = this
            let max = _this.step2ScoreRanges.length
            let splitChar = ","
            if(_this.$t('values_step_names').indexOf("，")>=0){
               splitChar = "，"
            }
            //console.log('lang type',_this.langType)
            let names = _this.$t('values_step_names').split(splitChar)
            console.log('initStep2ScoreRangesStepName',names)
            for (let i = 0; i < _this.step2ScoreRanges.length; i++) {
               if(_this.step2ScoreRanges[i]['step'] > names.length){
                  _this.step2ScoreRanges[i]['stepName'] = names[names.length-1]
               } else {
                  _this.step2ScoreRanges[i]['stepName'] = names[_this.step2ScoreRanges[i]['step']-1]
               }
               //设置最后的Step的StepName为固定值
               if(_this.step2ScoreRanges[i]['step'] >= max){
                  if(max % 2 == 0){//偶数

                  } else {//奇数
                     _this.step2ScoreRanges[i]['stepName'] = names[names.length-1]
                  }
               }
            }
            console.log('initStep2ScoreRangesStepName',_this.step2ScoreRanges)
         },
         initQuestionItems(){
            let _this = this
@@ -1022,6 +1143,15 @@
            console.log('initQuestionItems...e', this.questionItems)
         },
         getStep2StepTagType(step) {
            if (this.step2SubStep > step) {
               return ''
            } else if (this.step2SubStep == step) {
               return 'success'
            } else {
               return 'info'
            }
         },
         getStep2StepTagTypeName(step) {
            if (this.step2SubStep > step) {
               return ''
            } else if (this.step2SubStep == step) {
@@ -1177,7 +1307,7 @@
                  answerItem.startTime = ''
               }
               answerItem.completed = true
               answerItem.content = this.getContentByQuestionId(answerItem.questionId) 
               answerItem.content = this.getContentByQuestionId(answerItem.questionId)
                  //this.getLikeTypeByScoreRangeItemOrder(answerItem.subjectId)
               answerItem.questionReport = {
                  questionOrder: answerItem.questionId,
@@ -1220,7 +1350,7 @@
                        langType: question.langType, //答题语言
                        partOrder: question.partOrder, //分片
                        imgUrl: question.imgUrl, //图片地址
                        answer: question.content //题目答案 
                        answer: question.content //题目答案
                     })
                  }
               }
@@ -1366,6 +1496,10 @@
      margin-top: 45px;
   }

   .text-line {
      line-height: 1.5em;
   }

   .footer {
      position: absolute;
      position: fixed;
@@ -1377,6 +1511,7 @@
      overflow: auto;
      display: block;
      -webkit-box-flex: 1;
      margin-left: 10px;
   }

   .mul-inlinediv {
@@ -1400,12 +1535,13 @@

   .mul-inlinediv-row {
      min-height: 100px;
      margin: 0 10px;
      //margin: 0 10px;
   }

   .mul-inlinediv-lineheight {
      line-height: 100px;
      margin: 3px 0 4px 0;
      line-height: 106px;
      //margin: 3px 0 4px 0;
      //margin: 2px 0;
   }

   .mul-inlinediv-item {
@@ -1450,6 +1586,13 @@

   .mullinediv {
      display: contents;
      width:100%;
   }
   .noSelect {
      width: 100%;
      text-align: center;
      color: #9f9f9f;
      font-size: 14px;
   }

   .mullinediv-item {
@@ -1502,4 +1645,37 @@
      justify-content: center;
      width: 100%;
   }

   .mul-inlinediv-down {
      min-width: 16px;
      //line-height: 106px;
      height: 106px;
      background-size: 80% 100%;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABoCAYAAAAAYos6AAAACXBIWXMAABnWAAAZ1gEY0crtAAAGsGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjM3OjQzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNjdjODYwZS1iZjZkLTNjNDUtYTllYi1jZTcxOTExMGRmZjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowOTc1ODBiOC0wNTBjLWMwNDktOTVkOC1mYjA2ZTU5MWMxMGUiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6Mzc6NDMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjlhZDEyMjEtM2MzOC0yMDQ5LTlhOWQtMmJjZjk4NmU5NTFhIiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjMxOjI4KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA2N2M4NjBlLWJmNmQtM2M0NS1hOWViLWNlNzE5MTEwZGZmMyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph/lkloAAAEzSURBVGiB7ZlBDoMwDASdXuBNPI+P8pTtpb3R2FUWaw1ZiUuFmBJ7HZsYAItc+77DzE6vbdsQecbLCGqthe6jwKIKwY7jWADkwFjSgzGWMAxjAaNvtg6TojBPdX1mlhuzYVAYxgLqxQzAkgZjSS9mHqi2qdNgAOZOzYHJpD4V5qmuz+6b+t8pJAXG0sNhAFaZmJU2dR6MBdRbxlRYekc8d+rLYVFJxkwjG1truTGjwqRSnwrr7dTRJQzDPE1TD2djus+i0ksQmZEp3WdpMHo23ncY9LIxzdS1q/4zR6baVV+mSb0E9kuX1EYPSINFgFQYQ8OnubVro5lIk0qH9YC1a6Mnekc89G/+gX2Ap7/TfTYPWCmwXpNavzYypPdmvZHpvpMnHSZzpFX7SypLtb4WyNbGN9sG+pv7TY3OAAAAAElFTkSuQmCC);
   }
   .mul-inlinediv-down:first-child {
      margin-top: 44px;
      height: 62px;
      min-height: 62px;
      background-size: 80% 100%;
      background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABoCAYAAAAAYos6AAAACXBIWXMAABnWAAAZ1gEY0crtAAAGsGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjM3OjQzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNjdjODYwZS1iZjZkLTNjNDUtYTllYi1jZTcxOTExMGRmZjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowOTc1ODBiOC0wNTBjLWMwNDktOTVkOC1mYjA2ZTU5MWMxMGUiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6Mzc6NDMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjlhZDEyMjEtM2MzOC0yMDQ5LTlhOWQtMmJjZjk4NmU5NTFhIiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjMxOjI4KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA2N2M4NjBlLWJmNmQtM2M0NS1hOWViLWNlNzE5MTEwZGZmMyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph/lkloAAAEzSURBVGiB7ZlBDoMwDASdXuBNPI+P8pTtpb3R2FUWaw1ZiUuFmBJ7HZsYAItc+77DzE6vbdsQecbLCGqthe6jwKIKwY7jWADkwFjSgzGWMAxjAaNvtg6TojBPdX1mlhuzYVAYxgLqxQzAkgZjSS9mHqi2qdNgAOZOzYHJpD4V5qmuz+6b+t8pJAXG0sNhAFaZmJU2dR6MBdRbxlRYekc8d+rLYVFJxkwjG1truTGjwqRSnwrr7dTRJQzDPE1TD2djus+i0ksQmZEp3WdpMHo23ncY9LIxzdS1q/4zR6baVV+mSb0E9kuX1EYPSINFgFQYQ8OnubVro5lIk0qH9YC1a6Mnekc89G/+gX2Ap7/TfTYPWCmwXpNavzYypPdmvZHpvpMnHSZzpFX7SypLtb4WyNbGN9sG+pv7TY3OAAAAAElFTkSuQmCC);
   }
   .mul-inlinediv-down:last-child {
         background-size: 82% 60%;
         background-repeat: no-repeat;
   background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAA4CAYAAAAM7IPNAAAACXBIWXMAABnWAAAZ1gEY0crtAAAGrWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjQxOjE3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMzgzOTg1Zi03OGUwLTU2NGQtYmVlZi1mNmI5YjNkMDRmOWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZTY2NWMzZTQtYjM4Yi05MjQ0LThiNTUtYTczMTQ4NGQzN2UwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZTY2NWMzZTQtYjM4Yi05MjQ0LThiNTUtYTczMTQ4NGQzN2UwIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplNjY1YzNlNC1iMzhiLTkyNDQtOGI1NS1hNzMxNDg0ZDM3ZTAiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6NDE6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDQyZDFjNWEtOTZmZS1lMzQ1LTlkN2EtM2NhY2I4YjAyODA3IiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjQyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjEzODM5ODVmLTc4ZTAtNTY0ZC1iZWVmLWY2YjliM2QwNGY5YyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn/gmj0AAAR7SURBVFiF7ZffSyNXFMfPmNikE7OpP5BUEidmmMmMEyc6Mkj8kUSxIT745ItPBQsFoQ99Kbj9A4pKn31SVrq4rKAvSgpFqBCMoaQ0mmgslm7UWA3+qCVZTVC33j64W3RN4kSnUpb9wn2Ye+bezz33Hu49BxBCcFsbHx//3OPxIAC40ViWRQMDAxNS5imCB5QkGEJIgRB6GFg+YRgGGIY9DKwQSd3Gh4PJBZQcILlsr8/sb9lgckmWbXw3o1GqV5JhEoCvZIXJIVlCX1bYa2BOm6zRKNt1FY1GyycnJ3uj0Wj5XSe57Qbxer2fLC8vf6xMJpOV0Wj0eSQSearX638jSTJoMplCHMf9KRGUtX9hYcG2sbHRuLm5KaTT6Y9cLteosri4+Oz09HRyYmLiU4VCAXV1deByuYaOjo4m29rawgAAp6en2ouLi6yTIoTg/Pwcf/O9tLRkWFtb6/D5fJ8Fg0Hn1tYWuN1uaGtr+04piuKLg4ODUa/X2xuLxSAQCMDq6urj6enpxxaLJWS325+vr6+3ptPprLCzszPY2dlhx8bGvohEIp6VlRX39vb2B6lUCk5OTkCr1YLD4fiapmm/EgCAJMmfWZZ9cXR0RO7t7UEymYT9/X1IJBJCPB4XUqkU7O/vZ4UdHh5CKBQSdnd3hXg8DolEAo6PjwEAQKPRgMlkAqvVOkdRVObfzGd4eHiwqakpawZ110YQBOrv7/8xFosprmVXDodjnKbpUNbl31FGoxE6OztHampqLqP1al43ODj4rcFgQEql8t5e6XQ61NfXF8iZN9I07ed5HlQq1b29MplMwLKs72rfNZjFYvE7nc4hHMfhvhJF0V9fX//9tc63U+S5ublWq9WKVCrVnbZPoVAgHMfRyMjIV7em3wRB/GKz2cJlZWV38kir1QLHcUBR1E9v227AaJrOtLe3jxoMhjvBKisrwe12PzEYDKs3jNmqjfX19Q97enp+LzQqMQxDTqfzVSAQYCVXMTRNZxiG8VVXVxfklV6vB4vF4rfb7b9ms+d8z3ie/4Hn+YJgNE2DzWbz5rLnhDU2Ns7Y7fahQmCiKE61tLQ8KxhGkuQZTdOLDMNASUlJXoharQaCIIBl2XmbzZYoGAYAQBDEcmtrq7+8PP8jrtVqQRAEIEkymO+/vLCGhoY/uru7v9Hr9XlhFRUV0NXV9aXRaAzn/VFK4d3b27ui0+myhrtGo0Fut/uvcDhcKUsBX1tb6yMIIqutqqoKOI6b53k+++t6RZJgoihO1dfXZz0PjuOgubk5ZwQWDPN4PD6r1TqP4zgUFV0OwTAM1Go11NbWPhUEYUY2GAAARVGLLMuCRqMBAIDi4mKgKAosFovPbDbLW3mazeZgV1fXk4qKCgAAwHEcOjo6Zmia9kudQ1I0vmk+n88miiIqKipCVVVVaHZ21lPIeKXkVQGAw+EIMwwTymQygl6vf0lR1GIh4wuCAVzemY8ePRJKS0unGIZ5+Z/CmpubnzEM41Or1QWBAAAwucohKfr/lbnvYe9h7x7sHwGftes0162GAAAAAElFTkSuQmCC);
      }

   .selectCount {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #3c8dbc;
      border-radius: 5px;
      text-align: center;
      font-size: 18px;
      color: #fff;
      font-weight: bold;
      margin-bottom: 20px;
   }
</style>