拼音组件扩展内容宽度 保证预览时对齐

src/views/book/courseware/create/components/question/pinyin_base/PinyinBaseSetting.vue

@@ -23,6 +23,9 @@
         </el-radio-group>
       </el-form-item>
       <el-divider />
+      <el-form-item label="内容宽度">
+        <el-input v-model="property.content_width" type="number" />
+      </el-form-item>
       <el-form-item label="读音">
         <el-select v-model="property.audio_generation_method" placeholder="请选择">
           <el-option v-for="{ value, label } in audioGenerationMethodList" :key="value" :label="label" :value="value" />

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

@@ -79,6 +79,7 @@ export function getPinyinBaseProperty() {
     voice_type: '', // 音色
     emotion: '', // 风格，情感
     speed_ratio: '', // 语速
+    content_width:'', // 内容宽度
   };
 }
 

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -25,6 +25,7 @@
             ]"
             :style="{
               fontSize: data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
+              minWidth: data.property.content_width ? data.property.content_width + 'px' : '',
             }"
           >
             <span v-if="data.content_hz" class="items-hz">{{ convertText(data.content_hz) }}</span>
@@ -213,6 +214,7 @@
                 :style="{
                   fontSize: data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                   color: data.unified_attrib && data.unified_attrib.text_color ? data.unified_attrib.text_color : '',
+                  minWidth: data.property.content_width ? data.property.content_width + 'px' : '',
                 }"
               >
                 <span v-if="data.content_hz" class="items-hz">{{ convertText(data.content_hz) }}</span>