替换练习

src/views/exercise_questions/preview/ReplaceAnswerPreview.vue

@@ -9,12 +9,22 @@
     <div class="option-list">
       <div v-for="(item, i) in option_list" :key="i" :class="['option-item']">
         <template v-if="item.length > 1">
-          <el-select v-model="answer.answer_list[0].select_mark[i]" placeholder="请选择">
+          <!-- <el-select v-model="answer.answer_list[0].select_mark[i]" placeholder="请选择">
             <el-option v-for="items in item" :key="items.content" :label="items.content" :value="items.content">
             </el-option>
-          </el-select>
+          </el-select> -->
+          <span class="select-item selsec-active"></span>
+          <ul @scroll="handleScroll">
+            <li
+              :class="[answer.answer_list[0].select_mark[i] === items.mark ? 'active' : '']"
+              v-for="(items, indexs) in item"
+              :key="indexs"
+            >
+              {{ items.content }}
+            </li>
+          </ul>
         </template>
-        <span v-else>{{ item[0].content }}</span>
+        <span v-else class="select-item">{{ item[0].content }}</span>
       </div>
       <SoundRecordPreview :wav-blob.sync="answer.answer_list[0].audio_file_id" />
     </div>
@@ -47,7 +57,6 @@ export default {
     };
   },
   created() {
-    console.log(this.data);
     this.handleData();
   },
   mounted() {},
@@ -72,10 +81,14 @@ export default {
       option_lists.forEach((option_item) => {
         if (option_item.length > 0) {
           this.option_list.push(option_item);
-          this.answer.answer_list[0].select_mark.push('');
+          this.answer.answer_list[0].select_mark.push(option_item.length > 1 ? option_item[0].mark : '');
         }
       });
     },
+    // 处理滚动
+    handleScroll(event) {
+      console.log(event);
+    },
   },
 };
 </script>
@@ -88,8 +101,56 @@ export default {
 
   .option-list {
     display: flex;
-    column-gap: 8px;
     justify-content: center;
+    width: max-content;
+    margin: 0 auto;
+    border-left: 1px solid rgba(0, 0, 0, 8%);
+
+    .option-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      height: 356px;
+      border-right: 1px solid rgba(0, 0, 0, 8%);
+    }
+
+    .select-item {
+      padding: 6px 8px;
+      font-size: 20px;
+      line-height: 28px;
+      color: #1d2129;
+      background-color: rgba(239, 239, 239, 100%);
+    }
+
+    .selsec-active {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 40px;
+      margin-top: -20px;
+      background-color: rgba(239, 239, 239, 100%);
+    }
+
+    ul {
+      height: 356px;
+      padding: 158px 0 150px;
+      overflow-y: scroll;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      li {
+        padding: 6px 8px;
+        margin-bottom: 8px;
+        font-size: 20px;
+        line-height: 28px;
+        color: rgba(29, 33, 41, 100%);
+        opacity: 0.4;
+      }
+    }
   }
 
   .sound-record-wrapper {