新增课文组件段落对齐方式

src/views/book/courseware/create/components/question/article/Article.vue

@@ -140,6 +140,7 @@ export default {
           timeList: [],
           isTitle: false,
           sentencesEn: [],
+          paraAlign: 'left',
         };
         // 分段
         contentArr.forEach((item, index) => {
@@ -314,6 +315,7 @@ export default {
             isTitle: false,
             sentencesEn: [],
             sentenceStr,
+            paraAlign: 'left',
           };
           this.data.detail.push(obj);
         }

src/views/book/courseware/create/components/question/article/CheckArticle.vue

@@ -11,6 +11,14 @@
       </div>
       <div v-for="(item, index) in data.detail" :key="index + 'paragraph'" class="paragraph">
         <label>段 {{ index + 1 }}</label>
+        <div class="set-para">
+          <span>对齐方式：</span>
+          <el-radio-group v-model="item.paraAlign">
+            <el-radio label="left">左对齐</el-radio>
+            <el-radio label="center">居中对齐</el-radio>
+            <el-radio label="right">右对齐</el-radio>
+          </el-radio-group>
+        </div>
         <div v-for="(items, indexs) in item.sentenceStr" :key="indexs + 'words'" class="sentence-box">
           <div class="sentence">
             <b>{{ indexs + 1 }}.</b>
@@ -229,5 +237,10 @@ export default {
       }
     }
   }
+
+  .set-para {
+    margin-top: 8px;
+    text-align: left;
+  }
 }
 </style>

src/views/book/courseware/preview/components/article/NormalModelChs.vue

@@ -63,7 +63,7 @@
               ]"
             >
               <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
-              <div :class="[item.isTitle ? 'NNPE-title' : '']">
+              <div :class="[item.isTitle ? 'NNPE-title' : '', 'para-' + item.paraAlign]">
                 <div
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
@@ -597,7 +597,7 @@
               <div
                 v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
-                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                :class="[item.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + item.paraAlign]"
               >
                 {{
                   curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -1095,7 +1095,7 @@
             <div
               v-if="curQue.property.multilingual_position === 'para'"
               class="multilingual-para"
-              :class="[item.isTitle ? 'multilingual-para-center' : '']"
+              :class="[item.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + item.paraAlign]"
             >
               {{ multilingualTextList[multilingual] ? multilingualTextList[multilingual].join(' ') : '' }}
             </div>
@@ -1114,7 +1114,10 @@
         :key="indexs"
         class="multilingual"
       >
-        <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
+        <div
+          class="multilingual-para"
+          :class="[items.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + items.paraAlign]"
+        >
           {{
             items.multilingualTextList && items.multilingualTextList[multilingual]
               ? items.multilingualTextList[multilingual].join(' ')
@@ -1400,6 +1403,7 @@ export default {
           isTitle: dItem.isTitle,
           dhaspinyin,
           enwords: dItem.sentencesEn ? dItem.sentencesEn : [],
+          paraAlign: dItem.paraAlign,
         };
         resArr.push(paraObj);
       });
@@ -1448,6 +1452,7 @@ export default {
           let objs = {
             sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/'/g, '’'),
+            paraAlign: dItem.paraAlign,
           };
           sentArrTotal.push(sentArr);
           resArrs.push(objs);
@@ -1622,6 +1627,18 @@ export default {
     overflow: hidden;
     clear: both;
 
+    .para-center {
+      display: flex;
+      flex-flow: wrap;
+      justify-content: center;
+    }
+
+    .para-right {
+      display: flex;
+      flex-flow: wrap;
+      justify-content: end;
+    }
+
     .NNPE-words {
       float: left;
       padding-bottom: 5px;
@@ -1980,10 +1997,15 @@ export default {
     text-indent: 40px;
     word-break: break-word;
 
-    &-center {
+    &-center,
+    &.multilingual-center {
       text-align: center;
       text-indent: 0;
     }
+
+    &.multilingual-right {
+      text-align: right;
+    }
   }
 }
 

src/views/book/courseware/preview/components/article/PhraseModelChs.vue

@@ -65,7 +65,7 @@
               ]"
             >
               <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
-              <div>
+              <div :class="['para-' + item.paraAlign]">
                 <div
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
@@ -402,7 +402,7 @@
               <div
                 v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
-                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                :class="[item.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + item.paraAlign]"
               >
                 {{
                   curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -757,7 +757,7 @@
               <div
                 v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
-                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                :class="[item.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + item.paraAlign]"
               >
                 {{
                   curQue.detail[index].multilingualTextList[multilingual]
@@ -784,7 +784,10 @@
         :key="indexs"
         class="multilingual"
       >
-        <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
+        <div
+          class="multilingual-para"
+          :class="[items.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + items.paraAlign]"
+        >
           {{
             items.multilingualTextList && items.multilingualTextList[multilingual]
               ? items.multilingualTextList[multilingual].join(' ')
@@ -1114,6 +1117,7 @@ export default {
           wordsList: paraArr,
           dhaspinyin,
           isTitle: dItem.isTitle,
+          paraAlign: dItem.paraAlign,
         };
         resArr.push(paraObj);
       });
@@ -1165,6 +1169,7 @@ export default {
           let objs = {
             sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/'/g, '’'),
+            paraAlign: dItem.paraAlign,
           };
           sentArrTotal.push(sentArr);
           resArrs.push(objs);
@@ -1560,6 +1565,18 @@ export default {
     clear: both;
     color: rgba(0, 0, 0, 100%);
 
+    .para-center {
+      display: flex;
+      flex-flow: wrap;
+      justify-content: center;
+    }
+
+    .para-right {
+      display: flex;
+      flex-flow: wrap;
+      justify-content: end;
+    }
+
     .NNPE-words {
       float: left;
       padding-bottom: 5px;
@@ -1862,10 +1879,15 @@ export default {
     text-indent: 40px;
     word-break: break-word;
 
-    &-center {
+    &-center,
+    &.multilingual-center {
       text-align: center;
       text-indent: 0;
     }
+
+    &.multilingual-right {
+      text-align: right;
+    }
   }
 }
 </style>

src/views/book/courseware/preview/components/article/WordModelChs.vue

@@ -65,7 +65,7 @@
               ]"
             >
               <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
-              <div>
+              <div :class="['para-' + item.paraAlign]">
                 <div
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
@@ -389,7 +389,7 @@
               <div
                 v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
-                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                :class="[item.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + item.paraAlign]"
               >
                 {{
                   curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -717,7 +717,7 @@
               <div
                 v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
-                :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                :class="[item.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + item.paraAlign]"
               >
                 {{
                   curQue.detail[index].multilingualTextList[multilingual]
@@ -744,7 +744,10 @@
         :key="indexs"
         class="multilingual"
       >
-        <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
+        <div
+          class="multilingual-para"
+          :class="[items.isTitle ? 'multilingual-para-center' : '', 'multilingual-' + items.paraAlign]"
+        >
           {{
             items.multilingualTextList && items.multilingualTextList[multilingual]
               ? items.multilingualTextList[multilingual].join(' ')
@@ -1024,6 +1027,7 @@ export default {
           timeList,
           dhaspinyin,
           isTitle: dItem.isTitle,
+          paraAlign: dItem.paraAlign,
         };
         resArr.push(paraObj);
       });
@@ -1071,6 +1075,7 @@ export default {
           let objs = {
             sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/'/g, '’'),
+            paraAlign: dItem.paraAlign,
           };
           sentArrTotal.push(sentArr);
           resArrs.push(objs);
@@ -1286,6 +1291,18 @@ export default {
     clear: both;
     color: rgba(0, 0, 0, 85%);
 
+    .para-center {
+      display: flex;
+      flex-flow: wrap;
+      justify-content: center;
+    }
+
+    .para-right {
+      display: flex;
+      flex-flow: wrap;
+      justify-content: end;
+    }
+
     .NNPE-words {
       float: left;
       padding-bottom: 5px;
@@ -1597,10 +1614,15 @@ export default {
   text-indent: 40px;
   word-break: break-word;
 
-  &-center {
+  &-center,
+  &.multilingual-center {
     text-align: center;
     text-indent: 0;
   }
+
+  &.multilingual-right {
+    text-align: right;
+  }
 }
 
 .NPC-Big-Book-preview-green {