富文本默认字号

src/styles/mixin.scss

@@ -1,5 +1,18 @@
 @use './variables.scss' as *;
 
+@mixin rich-text($font-size: 16pt) {
+  font-family: 'Arial', 'Helvetica', sans-serif;
+  font-size: $font-size;
+
+  :deep ul {
+    padding-inline-start: 40px;
+
+    li {
+      list-style: disc;
+    }
+  }
+}
+
 // 预览
 @mixin preview {
   display: flex;
@@ -12,23 +25,25 @@
   border-radius: 8px;
 
   // 富文本格式
-  %rich-text,
   .rich-text {
-    font-family: 'Arial', 'Helvetica', sans-serif;
-    font-size: 16pt;
+    @include rich-text;
   }
 
   // 题干
   .stem {
     display: flex;
     align-items: flex-start;
-    font-family: 'Arial', 'Helvetica', sans-serif;
-    font-size: 18pt;
     font-weight: bold;
     color: #34343a;
 
+    @include rich-text(18pt);
+
     .question-number {
       margin-right: 4px;
+
+      + span {
+        flex: 1;
+      }
     }
 
     :deep p {
@@ -40,7 +55,6 @@
   .description {
     min-height: 48px;
     padding: 12px 24px;
-    white-space: pre-line;
     background-color: $content-color;
     border-radius: 16px;
   }

src/views/exercise_questions/data/common.js

@@ -1,10 +1,8 @@
-import { digitToChinese } from '@/utils/transform';
-
 // 选项类型
 export const optionTypeList = [
   { value: 'letter', label: '字母' },
   { value: 'number', label: '数字' },
-  { value: 'chinese', label: '中文数字' },
+  { value: 'capital', label: '大写字母' },
   { value: 'bracket_number', label: '括号数字' },
 ];
 
@@ -12,7 +10,7 @@ export const optionTypeList = [
 export const computeOptionMethods = {
   [optionTypeList[0].value]: (i) => `${String.fromCharCode(97 + i)}.`,
   [optionTypeList[1].value]: (i) => `${i + 1}.`,
-  [optionTypeList[2].value]: (i) => `${digitToChinese(i + 1)}.`,
+  [optionTypeList[2].value]: (i) => `${String.fromCharCode(65 + i)}.`,
   [optionTypeList[3].value]: (i) => `（${i + 1}）`,
 };
 

src/views/exercise_questions/preview/DialoguePreview.vue

@@ -7,7 +7,7 @@
     </div>
     <div
       v-if="isEnable(data.property.is_enable_description)"
-      class="description"
+      class="description rich-text"
       v-html="sanitizeHTML(data.description)"
     ></div>
     <div class="dialogue-wrapper">

src/views/exercise_questions/preview/FillPreview.vue

@@ -214,6 +214,8 @@ export default {
   }
 
   .fill-wrapper {
+    font-size: 16pt;
+
     .el-input {
       display: inline-flex;
       align-items: center;

src/views/exercise_questions/preview/JudgePreview.vue

@@ -14,7 +14,7 @@
       >
         <div :class="['option-content', computedIsJudgeRight(mark)]">
           <span class="serial-number">{{ computedQuestionNumber(i, data.option_number_show_mode) }}</span>
-          <div v-html="sanitizeHTML(content)"></div>
+          <div class="rich-text" v-html="sanitizeHTML(content)"></div>
         </div>
         <div class="option-type">
           <div
@@ -118,7 +118,7 @@ export default {
       .option-content {
         display: flex;
         flex: 1;
-        column-gap: 24px;
+        column-gap: 8px;
         align-items: center;
         padding: 12px 24px;
         background-color: $content-color;
@@ -133,6 +133,7 @@ export default {
         }
 
         .serial-number {
+          font-size: 16pt;
           color: #000;
         }
       }

src/views/exercise_questions/preview/ListenFillPreview.vue

@@ -220,6 +220,8 @@ export default {
   }
 
   .fill-wrapper {
+    font-size: 16pt;
+
     .el-input {
       display: inline-flex;
       align-items: center;

src/views/exercise_questions/preview/ListenJudgePreview.vue

@@ -18,7 +18,7 @@
       >
         <div :class="['option-content', computedIsJudgeRight(mark)]">
           <span class="serial-number">{{ computedQuestionNumber(i, data.option_number_show_mode) }}</span>
-          <div v-html="sanitizeHTML(content)"></div>
+          <div class="rich-text" v-html="sanitizeHTML(content)"></div>
         </div>
         <div class="option-type">
           <div
@@ -122,7 +122,7 @@ export default {
       .option-content {
         display: flex;
         flex: 1;
-        column-gap: 24px;
+        column-gap: 8px;
         align-items: center;
         padding: 12px 24px;
         background-color: $content-color;
@@ -137,6 +137,7 @@ export default {
         }
 
         .serial-number {
+          font-size: 16pt;
           color: #000;
         }
       }

src/views/exercise_questions/preview/ListenSelectPreview.vue

@@ -7,7 +7,7 @@
     </div>
     <div
       v-if="isEnable(data.property.is_enable_description)"
-      class="description"
+      class="description rich-text"
       v-html="sanitizeHTML(data.description)"
     ></div>
     <AudioPlay
@@ -23,8 +23,8 @@
         @click="selectAnswer(mark)"
       >
         <span class="selectionbox"></span>
-        <span>{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
-        <span class="content" v-html="sanitizeHTML(content)"></span>
+        <span class="serial-number">{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
+        <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
       </li>
     </ul>
   </div>
@@ -108,6 +108,10 @@ export default {
         border-radius: 50%;
       }
 
+      .serial-number {
+        font-size: 16pt;
+      }
+
       .content {
         flex: 1;
       }

src/views/exercise_questions/preview/MatchingPreview.vue

@@ -7,7 +7,7 @@
     </div>
     <div
       v-if="isEnable(data.property.is_enable_description)"
-      class="description"
+      class="description rich-text"
       v-html="sanitizeHTML(data.description)"
     ></div>
 
@@ -22,7 +22,7 @@
             @mouseup="mouseup($event, i, j, 'pre', mark)"
             @click="handleClickConnection($event, i, j, 'pre', mark)"
           ></span>
-          <span class="content" v-html="sanitizeHTML(content)"></span>
+          <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
           <span
             v-if="j < item.length - 1"
             :class="['connection', `next-line-${i}-${j}`]"
@@ -42,7 +42,7 @@
         <li v-for="(item, i) in optionList" :key="i" class="list-item">
           <div v-for="({ content, mark }, j) in item" :key="mark" :class="'item-wrapper'">
             <span v-if="j > 0 && j < item.length" :class="['connection', `answer-pre-line-${i}-${j}`]"></span>
-            <span class="content" v-html="sanitizeHTML(content)"></span>
+            <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
             <span v-if="j < item.length - 1" :class="['connection', `answer-next-line-${i}-${j}`]"></span>
           </div>
         </li>

src/views/exercise_questions/preview/ReadPreview.vue

@@ -7,12 +7,12 @@
     </div>
     <div
       v-if="isEnable(data.property.is_enable_description)"
-      class="description"
+      class="description rich-text"
       v-html="sanitizeHTML(data.description)"
     ></div>
 
     <div class="container">
-      <div class="articel" v-html="sanitizeHTML(data.article)"></div>
+      <div class="articel rich-text" v-html="sanitizeHTML(data.article)"></div>
       <div class="question-list">
         <template v-if="isAnswer">
           <component

src/views/exercise_questions/preview/SelectPreview.vue

@@ -7,7 +7,7 @@
     </div>
     <div
       v-if="isEnable(data.property.is_enable_description)"
-      class="description"
+      class="description rich-text"
       v-html="sanitizeHTML(data.description)"
     ></div>
 
@@ -20,8 +20,8 @@
         @click="selectAnswer(mark)"
       >
         <span class="selectionbox"></span>
-        <span>{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
-        <span class="content" v-html="sanitizeHTML(content)"></span>
+        <span class="serial-number">{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
+        <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
       </li>
     </ul>
   </div>
@@ -105,6 +105,10 @@ export default {
         border-radius: 50%;
       }
 
+      .serial-number {
+        font-size: 16pt;
+      }
+
       .content {
         flex: 1;
       }