富文本下拼音文本可设置边距

src/components/PinyinText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pinyin-area" :style="{ 'text-align': pinyinOverallPosition }">
+  <div class="pinyin-area" :style="{ 'text-align': pinyinOverallPosition, padding: pinyinPadding }">
     <div v-for="(paragraph, i) in paragraphList" :key="i" class="pinyin-paragraph">
       <span
         v-for="(sentence, j) in paragraph"
@@ -94,6 +94,10 @@ export default {
       type: String,
       default: '',
     },
+    pinyinPadding: {
+      type: String,
+      default: '0px 0px 0px 0px',
+    },
   },
   data() {
     return {

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

@@ -57,6 +57,7 @@
           :font-size="data?.unified_attrib?.font_size"
           :font-family="data?.unified_attrib?.font"
           :component-type="data.type"
+          :pinyin-padding="data.property.pinyin_padding"
           @fillCorrectPinyin="fillCorrectPinyin"
         />
       </div>

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

@@ -9,7 +9,7 @@
         <el-switch v-model="property.is_title" active-value="true" inactive-value="false" />
       </el-form-item>
 
-      <el-form-item label="标题属性" v-if="property.is_title === 'true'">
+      <el-form-item v-if="property.is_title === 'true'" label="标题属性">
         <el-select v-model="property.title_style_level" placeholder="请选择标题级别" style="width: 100px">
           <el-option v-for="item in titleList" :key="item.level" :label="item.level_title" :value="item.level" />
         </el-select>
@@ -40,6 +40,19 @@
           {{ label }}
         </el-radio>
       </el-form-item>
+      <el-form-item label="边距">
+        <el-input
+          v-model="property.pinyin_padding"
+          :disabled="!isEnable(property.view_pinyin)"
+          placeholder="例：10px 20px 30px 40px"
+          style="width: 95%"
+        />
+      </el-form-item>
+      <el-form-item label="">
+        <div style="font-size: 12px; line-height: 1.5; color: #999">
+          格式：上 右 下 左（顺时针方向）。示例：10px 20px 30px 40px
+        </div>
+      </el-form-item>
       <el-form-item label="">
         <el-checkbox
           v-model="property.is_first_sentence_first_hz_pinyin_first_char_upper_case"

src/views/book/courseware/data/richText.js

@@ -462,6 +462,7 @@ export function getRichTextProperty() {
     view_pinyin: 'false', // 显示拼音
     pinyin_position: pinyinPositionList[0].value, // top bottom
     pinyin_overall_position: pinyinOverallPositionList[0].value, // left center right
+    pinyin_padding: '0px 0px 0px 0px', // 拼音文本边距
     is_first_sentence_first_hz_pinyin_first_char_upper_case: 'true', // 句首大写
     title_style_level: '', // 标题样式级别
     is_title: 'false', // 是否标题

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

@@ -13,6 +13,7 @@
           :pinyin-size="data?.unified_attrib?.pinyin_size"
           :font-size="data?.unified_attrib?.font_size"
           :font-family="data?.unified_attrib?.font"
+          :pinyin-padding="data.property.pinyin_padding"
           :is-preview="isPreview"
         />
         <span