选择声调预览

src/views/exercise_questions/preview/ChooseTonePreview.vue

@@ -16,8 +16,11 @@
             <span
               v-for="(itemc, indexc) in con_preview[i].item_con"
               :key="indexc"
-              :class="['item-con']"
-              @click="con_preview[i].item_active_index = indexc"
+              :class="['item-con', active_index_str === i + '-' + indexc ? 'active' : '']"
+              @click="
+                con_preview[i].item_active_index = indexc;
+                active_index_str = i + '-' + indexc;
+              "
             >
               {{ itemc }}
             </span>
@@ -30,7 +33,7 @@
             'tone',
             con_preview[i].user_answer[con_preview[i].item_active_index].select_tone === value ? 'active' : '',
           ]"
-          @click="chooseTone(con_preview[i], value)"
+          @click="chooseTone(con_preview[i], value, i)"
         >
           <SvgIcon :icon-class="img" />
         </span>
@@ -71,6 +74,7 @@ export default {
         ['Ū', 'Ú', 'Û', 'Ù', 'U'],
       ],
       final_con: '',
+      active_index_str: '',
     };
   },
   created() {
@@ -80,13 +84,13 @@ export default {
     isAnswer(mark, option_type) {
       return this.answer.select_list.some((li) => li.mark === mark && li.option_type === option_type);
     },
-    chooseTone(item, value) {
+    chooseTone(item, value, i) {
       item.user_answer[item.item_active_index].select_tone = value;
       if (this.data.property.tone_type === 'dimension') {
         item.user_answer[item.item_active_index].select_letter = item.user_answer[item.item_active_index].active_letter;
       }
+      this.active_index_str = `${i}-${item.item_active_index}`;
       this.handleReplaceTone(item.item_con_yuan[item.item_active_index] + value);
-
       setTimeout(() => {
         item.item_con[item.item_active_index] = this.final_con;
         this.$forceUpdate();
@@ -242,6 +246,10 @@ export default {
 
       .item-con {
         cursor: pointer;
+
+        &.active {
+          color: #2f6fec;
+        }
       }
 
       .tone {
@@ -249,10 +257,12 @@ export default {
         height: 32px;
         padding: 8px;
         font-size: 0;
+        color: #9f9f9f;
         text-align: center;
         cursor: pointer;
 
         &.active {
+          color: #2f6fec;
           background: #dfe9fd;
           border-radius: 16px;
         }