src/components/PinyinText.vue

@@ -17,9 +17,9 @@
             }"
             @click="correctPinyin(item, i, j, k)"
           >
-            <span v-if="pinyinPosition === 'top'" class="pinyin">{{ item.pinyin.replace(/\s+/g, '') }}</span>
-            <span class="py-char" :style="{ ...item.activeTextStyle }">{{ item.text }}</span>
-            <span v-if="pinyinPosition !== 'top'" class="pinyin">{{ item.pinyin.replace(/\s+/g, '') }}</span>
+            <span v-if="pinyinPosition === 'top'" class="pinyin" :style="{'font-size':pinyinSize}">{{ item.pinyin.replace(/\s+/g, '') }}</span>
+            <span class="py-char" :style="textStyle(item)">{{ item.text }}</span>
+            <span v-if="pinyinPosition !== 'top'" class="pinyin" :style="{'font-size':pinyinSize}">{{ item.pinyin.replace(/\s+/g, '') }}</span>
           </span>
         </span>
       </span>
@@ -65,6 +65,18 @@ export default {
       type: String,
       required: true,
     },
+    fontFamily: {
+      type: String,
+      required: false,
+    },
+    fontSize: {
+      type: String,
+      required: false,
+    },
+    pinyinSize: {
+      type: String,
+      required: false,
+    },
     pinyinOverallPosition: {
       type: String,
       default: 'left',
@@ -78,6 +90,9 @@ export default {
       default: '',
     },
   },
+  watch:{
+    
+  },
   data() {
     return {
       sanitizeHTML,
@@ -98,6 +113,12 @@ export default {
     };
   },
   methods: {
+    textStyle(item) {
+      const styles = { ...item.activeTextStyle };
+      if (this.fontSize) styles['font-size'] = this.fontSize;
+      if (this.fontFamily) styles['font-family'] = this.fontFamily;
+      return styles;
+    },
     // 校对拼音
     correctPinyin(item, i, j, k) {
       if (this.isPreview) {

src/views/book/courseware/create/components/base/rich_text/RichText.vue

@@ -31,6 +31,9 @@
           :paragraph-list="data.paragraph_list"
           :pinyin-position="data.property.pinyin_position"
           :pinyin-overall-position="data.property.pinyin_overall_position"
+          :pinyin-size="data?.unified_attrib?.pinyin_size"
+          :font-size="data?.unified_attrib?.font_size"
+          :font-family="data?.unified_attrib?.font"
           :component-type="data.type"
           @fillCorrectPinyin="fillCorrectPinyin"
         />

src/views/book/courseware/preview/components/rich_text/RichTextPreview.vue

@@ -9,6 +9,9 @@
           :paragraph-list="data.paragraph_list"
           :pinyin-position="data.property.pinyin_position"
           :pinyin-overall-position="data.property.pinyin_overall_position"
+          :pinyin-size="data?.unified_attrib?.pinyin_size"
+          :font-size="data?.unified_attrib?.font_size"
+          :font-family="data?.unified_attrib?.font"
           :is-preview="isPreview"
         />
         <span v-else class="rich-text" @click="handleRichFillClick" v-html="sanitizeHTML(data.content)"></span>