生词标题添加背景色

src/views/book/courseware/create/components/question/new_word/NewWord.vue

@@ -9,6 +9,7 @@
           :inline="true"
           :placeholder="'输入标题'"
           toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+          class="title-box"
         />
       </div>
       <div style="margin-bottom: 12px">
@@ -246,7 +247,7 @@
             </template>
           </div>
           <div class="table-item" style="width: 110px">
-            <el-input v-model="item.pinyin" />
+            <el-input v-model="item.pinyin" @blur="handleTone(item.pinyin, i)" />
           </div>
           <div class="table-item" style="width: 110px">
             <RichText
@@ -408,6 +409,7 @@ import { GetStaticResources } from '@/api/app';
 import cnchar from 'cnchar';
 import { ChapterGetBookChapterStruct } from '@/api/book';
 import { getWordTime, prepareTranscribe, fileToBase64Text } from '@/api/article';
+import { addTone, handleToneValue } from '@/views/book/courseware/data/common';
 export default {
   name: 'NewWordPage',
   components: {
@@ -778,6 +780,20 @@ export default {
       });
       this.data.lrc_arr = lrc_list_res;
     },
+    handleTone(value, i) {
+      if (!/^[a-zA-Z0-9\s]+$/.test(value)) return;
+      this.data.new_word_list[i].pinyin = value
+        .trim()
+        .split(/\s+/)
+        .map((item) => {
+          return handleToneValue(item);
+        })
+        .map((item) =>
+          item.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
+        )
+        .filter((item) => item.length > 0)
+        .join(' ');
+    },
   },
 };
 </script>
@@ -850,6 +866,18 @@ export default {
 :deep .upload-wrapper {
   margin-top: 0;
 }
+
+.title-box {
+  padding: 5px;
+  margin: 5px 0;
+  background-color: #f2f3f5;
+  border: 1px solid #f2f3f5;
+  border-radius: 4px;
+
+  :deep p {
+    margin: 0;
+  }
+}
 </style>
 <style lang="scss">
 .tox .tox-editor-header {

src/views/book/courseware/create/components/question/notes/Notes.vue

@@ -8,6 +8,7 @@
         :inline="true"
         :placeholder="'输入标题'"
         toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+        class="title-box"
       />
       <el-table :data="data.option" border style="width: 100%">
         <el-table-column fixed prop="number" label="序号" width="70">
@@ -158,6 +159,18 @@ export default {
     cursor: pointer;
   }
 }
+
+.title-box {
+  padding: 5px;
+  margin: 5px 0;
+  background-color: #f2f3f5;
+  border: 1px solid #f2f3f5;
+  border-radius: 4px;
+
+  :deep p {
+    margin: 0;
+  }
+}
 </style>
 <style lang="scss">
 .tox .tox-editor-header {