修改正确选项样式

src/modules/exam-module/src/ExamTopic.vue

@@ -29,22 +29,70 @@
               <ul class="option" v-if="item.type === '1' || item.type === '6' || item.type === '5' && dItem.answer_count <= 1">
                 <template v-for="(opt, oIndex) in dItem.question_options">
                   <template v-if="requestData2 != 0 && requestData[item.id]">
-                    <li :key="oIndex" v-if="requestData[item.id][dItem.id]" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : requestData[item.id][dItem.id].answer.find(res => { return res === opt.id }) ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li>
-                    <li :key="oIndex" v-else :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li>
+                    <li :key="oIndex" v-if="requestData[item.id][dItem.id]" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : requestData[item.id][dItem.id].answer.find(res => { return res === opt.id }) ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">
+                      <van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
+                      <div>
+                        <span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
+                          {{opaKey[oIndex]}}.
+                        </span>
+                        {{ opt.option }}
+                      </div>
+                    </li>
+                    <li :key="oIndex" v-else :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">
+                      <van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
+                      <div>
+                        <span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
+                          {{opaKey[oIndex]}}.
+                        </span>
+                        {{ opt.option }}
+                      </div>
+                    </li>
                   </template>
                   <template v-else>
-                    <li :key="oIndex" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li>
+                    <li :key="oIndex" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">
+                      <van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
+                      <div>
+                        <span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
+                          {{opaKey[oIndex]}}.
+                        </span>
+                        {{ opt.option }}
+                      </div>
+                    </li>
                   </template>
                 </template>
               </ul>
               <ul class="option" v-if="item.type === '2' || item.type === '5' && dItem.answer_count > 1">
                 <template v-for="(opt, oIndex) in dItem.question_options">
                   <template v-if="requestData2 != 0 && requestData[item.id]">
-                    <li :key="oIndex+'-'" v-if="requestData[item.id][dItem.id]" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li>
-                    <li :key="oIndex+'-'" v-else :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' :opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li>
+                    <li :key="oIndex+'-'" v-if="requestData[item.id][dItem.id]" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">
+                      <van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
+                      <div>
+                        <span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
+                          {{opaKey[oIndex]}}.
+                        </span>
+                        {{ opt.option }}
+                      </div>
+                    </li>
+                    <li :key="oIndex+'-'" v-else :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' :opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">
+                      <van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
+                      <div>
+                        <span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
+                          {{opaKey[oIndex]}}.
+                        </span>
+                        {{ opt.option }}
+                      </div>
+                    </li>
                   </template>
                   <template v-else>
-                    <li :key="oIndex+'-'" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' :opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li>
+                    <li :key="oIndex+'-'" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' :opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">
+                      <van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
+                      <div>
+                        <span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
+                          {{opaKey[oIndex]}}.
+                        </span>
+                        {{ opt.option }}
+                      </div>
+                    </li>
                   </template>
                 </template>
               </ul>
@@ -836,6 +884,12 @@ export default {
         padding: .35rem .2rem;
         margin-bottom: .2rem;
         word-wrap:break-word;
+        display: flex;
+        align-items: center;
+        .icon{
+          margin-right: 0.1rem;
+          color: #5CB9A2;
+        }
       }
       .active{
         color: #5F95DE;

src/pages/my/questionsDetails.vue

@@ -36,7 +36,10 @@
                       : ''"
                     >
                     <van-icon class="icon" name="checked" v-if="item.user_answer.length != 0 && item.question_answer.find(id => { return id === opt.id })"/>
-                    <div>{{ A_Z[optIndex] }}. {{ opt.option }}</div>
+                    <div>
+                      <span v-if="!(item.user_answer.length != 0 && item.question_answer.find(id => { return id === opt.id }))">{{ A_Z[optIndex] }}.</span>
+                      {{ opt.option }}
+                    </div>
                   </li>
                   <li
                     v-else
@@ -49,7 +52,10 @@
                       : ''"
                     >
                   <van-icon class="icon" name="checked" v-if="item.user_answer.length != 0 && item.question_answer.find(id => { return id === opt.id })"/>
-                  <div>{{ A_Z[optIndex] }}. {{ opt.option }}</div>
+                  <div>
+                    <span v-if="!(item.question_answer.find(id => { return id === opt.id }))">{{ A_Z[optIndex] }}.</span>
+                    {{ opt.option }}
+                  </div>
                 </li>
                 </template>
               </ul>