Merge branch 'master' of http://60.205.254.193:3000/GCLS/eep_page

src/components/PinyinText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pinyin-area">
+  <div class="pinyin-area" :style="{ 'text-align': pinyinOverallPosition }">
     <div v-for="(paragraph, i) in paragraphList" :key="i" class="pinyin-paragraph">
       <span
         v-for="(sentence, j) in paragraph"
@@ -65,6 +65,10 @@ export default {
       type: String,
       required: true,
     },
+    pinyinOverallPosition: {
+      type: String,
+      required: true,
+    },
     isPreview: {
       type: Boolean,
       default: false,

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

@@ -23,13 +23,13 @@
         />
 
         <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
-
         <PinyinText
           v-if="isEnable(data.property.view_pinyin)"
           :id="richId + '_pinyin_text'"
           ref="PinyinText"
           :paragraph-list="data.paragraph_list"
           :pinyin-position="data.property.pinyin_position"
+          :pinyin-overall-position="data.property.pinyin_overall_position"
           :component-type="data.type"
           @fillCorrectPinyin="fillCorrectPinyin"
         />

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

@@ -17,6 +17,17 @@
           {{ label }}
         </el-radio>
       </el-form-item>
+      <el-form-item label="对齐样式">
+        <el-radio
+          v-for="{ value, label } in pinyinOverallPositionList"
+          :key="value"
+          v-model="property.pinyin_overall_position"
+          :label="value"
+          :disabled="!isEnable(property.view_pinyin)"
+        >
+          {{ label }}
+        </el-radio>
+      </el-form-item>
       <el-form-item label="">
         <el-checkbox
           v-model="property.is_first_sentence_first_hz_pinyin_first_char_upper_case"
@@ -32,7 +43,7 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import { isEnable, pinyinPositionList } from '@/views/book/courseware/data/common';
+import { isEnable, pinyinPositionList, pinyinOverallPositionList } from '@/views/book/courseware/data/common';
 import { getRichTextProperty } from '@/views/book/courseware/data/richText';
 
 export default {
@@ -42,6 +53,7 @@ export default {
     return {
       isEnable,
       pinyinPositionList,
+      pinyinOverallPositionList,
       labelPosition: 'left',
       property: getRichTextProperty(),
       selectContent: '',

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

@@ -57,6 +57,13 @@ export const pinyinPositionList = [
   { value: 'bottom', label: '下' },
 ];
 
+// 拼音整体位置
+export const pinyinOverallPositionList = [
+  { value: 'left', label: '左' },
+  { value: 'center', label: '中' },
+  { value: 'right', label: '右' },
+];
+
 // 排列方式
 export const arrangeTypeList = [
   { value: 'horizontal', label: '横排' },

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

@@ -4,6 +4,7 @@ import {
   serialNumberStyleList,
   serialNumberPositionList,
   pinyinPositionList,
+  pinyinOverallPositionList,
 } from '@/views/book/courseware/data/common';
 
 // 按用途分类的数学公式宏列表
@@ -456,6 +457,7 @@ export function getRichTextProperty() {
     sn_background_color: '#ea3232', // 序号背景色
     view_pinyin: 'false', // 显示拼音
     pinyin_position: pinyinPositionList[0].value, // top bottom
+    pinyin_overall_position: pinyinOverallPositionList[0].value, // left center right
     is_first_sentence_first_hz_pinyin_first_char_upper_case: 'true', // 句首大写
   };
 }

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

@@ -8,6 +8,7 @@
           v-if="isEnable(data.property.view_pinyin)"
           :paragraph-list="data.paragraph_list"
           :pinyin-position="data.property.pinyin_position"
+          :pinyin-overall-position="data.property.pinyin_overall_position"
           :is-preview="isPreview"
         />
         <span v-else class="rich-text" @click="handleRichFillClick" v-html="sanitizeHTML(data.content)"></span>