课文和对话课文设置高度

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

@@ -64,6 +64,9 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
+      <el-form-item label="内容高度">
+        <el-input v-model="property.content_height" type="number"></el-input>
+      </el-form-item>
     </el-form>
   </div>
 </template>

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

@@ -20,7 +20,13 @@
               <el-radio label="right">右对齐</el-radio>
             </el-radio-group>
           </div>
-          <div class="remark-box" @click="showRemark(index)"><SvgIcon icon-class="edit-line" />添加备注</div>
+          <div class="remark-box" @click="showRemark(index)">
+            <SvgIcon icon-class="edit-line" />{{
+              item.remark && (item.remark.chs || item.remark.en || item.remark.img_list.length > 0)
+                ? '修改备注'
+                : '添加备注'
+            }}
+          </div>
         </template>
         <div v-for="(items, indexs) in item.sentenceStr" :key="indexs + 'words'" class="sentence-box">
           <div class="sentence">

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

@@ -87,7 +87,11 @@
               </div>
             </div>
             <div v-if="item.type !== 'notice'" class="remark-box" @click="showRemark(index)">
-              <SvgIcon icon-class="edit-line" />添加备注
+              <SvgIcon icon-class="edit-line" />{{
+                item.remark && (item.remark.chs || item.remark.en || item.remark.img_list.length > 0)
+                  ? '修改备注'
+                  : '添加备注'
+              }}
             </div>
           </div>
         </div>

src/views/book/courseware/create/components/question/dialogue_article/ArticleSetting.vue

@@ -129,6 +129,9 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
+      <el-form-item label="内容高度">
+        <el-input v-model="property.content_height" type="number"></el-input>
+      </el-form-item>
     </el-form>
   </div>
 </template>

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

@@ -77,6 +77,7 @@ export function getArticleProperty() {
     is_first_sentence_first_hz_pinyin_first_char_upper_case: 'true', // 句首大写
 
     multilingual_position: multilingualList[1].value,
+    content_height:'', // 内容高度
   };
 }
 

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

@@ -117,6 +117,7 @@ export function getArticleProperty() {
     role_list: [getRole(0), getRole(1)],
 
     multilingual_position: multilingualList[0].value,
+    content_height:'', // 内容高度
   };
 }
 

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

@@ -48,7 +48,12 @@
     </div>
     <template v-if="!config.isHasEN || (config.isHasEN && !config.isShowEN)">
       <template v-if="resArr.length > 0">
-        <div class="NPC-sentences-list">
+        <div
+          class="NPC-sentences-list"
+          :style="{
+            height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+          }"
+        >
           <div class="NPC-article-empty">
             <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
             <div class="empty-right"></div>
@@ -716,7 +721,12 @@
     <template v-else>
       <template v-if="resObj">
         <!-- 段落对齐方式和备注在此模式里没有写，如果段落里添加了英文后需要在此添加段落对齐和备注、大小图片、生词样式 -->
-        <div class="NPC-sentences-list">
+        <div
+          class="NPC-sentences-list"
+          :style="{
+            height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+          }"
+        >
           <div
             v-for="(item, index) in resObj.sentList"
             :key="'detail' + index"
@@ -1466,6 +1476,7 @@ export default {
       let wordTimeList = curQue.wordTime;
       let asIndex = 0;
       let dhaspinyin = false; // 每段是否有拼音
+      this.isHasRemark = false;
       curQue.detail.forEach((dItem, dIndex) => {
         dhaspinyin = false;
         let remarkDetail = dItem.remark;
@@ -1786,6 +1797,8 @@ export default {
   }
 
   .NPC-sentences-list {
+    overflow: auto;
+
     // padding: 24px 0;
     color: rgba(0, 0, 0, 85%);
 

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

@@ -50,7 +50,12 @@
     </div>
     <template v-if="!config.isHasEN || (config.isHasEN && !config.isShowEN)">
       <template v-if="resArr.length > 0">
-        <div class="NPC-sentences-list">
+        <div
+          class="NPC-sentences-list"
+          :style="{
+            height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+          }"
+        >
           <div class="NPC-article-empty">
             <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
             <div class="empty-right"></div>
@@ -524,7 +529,12 @@
       <template v-if="resObj">
         <!-- 段落对齐方式和备注在此模式里没有写，如果段落里添加了英文后需要在此添加段落对齐和备注 -->
 
-        <div class="NPC-sentences-list">
+        <div
+          class="NPC-sentences-list"
+          :style="{
+            height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+          }"
+        >
           <div v-for="(item, index) in resObj.sentList" :key="'detail' + index" :class="['NNPE-detail-box']">
             <div :class="['NNPE-details']">
               <div
@@ -1188,6 +1198,7 @@ export default {
       let leg = this.curQue.detail.length;
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       let dhaspinyin = false; // 每段是否有拼音
+      this.isHasRemark = false;
       curQue.detail.forEach((dItem, dIndex) => {
         dhaspinyin = false;
         let remarkDetail = dItem.remark;
@@ -1767,6 +1778,7 @@ export default {
 
   .NPC-sentences-list {
     // padding: 24px 0;
+    overflow: auto;
 
     .NPC-article-empty {
       display: flex;

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

@@ -65,7 +65,12 @@
     </div>
     <template v-if="resObj">
       <!--  -->
-      <div class="NPC-sentences-list">
+      <div
+        class="NPC-sentences-list"
+        :style="{
+          height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+        }"
+      >
         <div
           v-for="(item, index) in resObj.sentList"
           :key="'detail' + index"
@@ -1105,6 +1110,7 @@ export default {
 
   .NPC-sentences-list {
     padding: 16px 0;
+    overflow: auto;
   }
 
   .multilingual {

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

@@ -50,7 +50,12 @@
     </div>
     <template v-if="!config.isHasEN || (config.isHasEN && !config.isShowEN)">
       <template v-if="resArr.length > 0">
-        <div class="NPC-sentences-list">
+        <div
+          class="NPC-sentences-list"
+          :style="{
+            height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+          }"
+        >
           <div
             v-for="(item, index) in resArr"
             :key="'detail' + index"
@@ -489,7 +494,12 @@
     <template v-else>
       <template v-if="resObj">
         <!--  -->
-        <div class="NPC-sentences-list">
+        <div
+          class="NPC-sentences-list"
+          :style="{
+            height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+          }"
+        >
           <div
             v-for="(item, index) in resObj.sentList"
             :key="'detail' + index"
@@ -1391,6 +1401,7 @@ export default {
 
   .NPC-sentences-list {
     padding: 24px 0;
+    overflow: auto;
   }
 
   .multilingual {

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

@@ -52,7 +52,12 @@
       </div>
     </div>
     <template v-if="resArr.length > 0">
-      <div class="NPC-sentences-list">
+      <div
+        class="NPC-sentences-list"
+        :style="{
+          height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+        }"
+      >
         <div class="NPC-article-empty">
           <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
@@ -928,6 +933,7 @@ export default {
       let wordTimeList = curQue.wordTime;
       let asIndex = 0;
       let dhaspinyin = false; // 每段是否有拼音
+      this.isHasRemark = false;
       curQue.detail.forEach((dItem, dIndex) => {
         dhaspinyin = false;
         let roleDetail = this.getRole(dItem);
@@ -1200,6 +1206,8 @@ export default {
   }
 
   .NPC-sentences-list {
+    overflow: auto;
+
     .NPC-article-empty {
       display: flex;
       align-items: flex-start;

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

@@ -50,7 +50,12 @@
       </div>
     </div>
     <template v-if="resArr.length > 0">
-      <div class="NPC-sentences-list">
+      <div
+        class="NPC-sentences-list"
+        :style="{
+          height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+        }"
+      >
         <div class="NPC-article-empty">
           <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
@@ -809,6 +814,7 @@ export default {
       let leg = this.curQue.detail.length;
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       let dhaspinyin = false; // 每段是否有拼音
+      this.isHasRemark = false;
       curQue.detail.forEach((dItem, dIndex) => {
         dhaspinyin = false;
         let roleDetail = this.getRole(dItem);
@@ -1242,6 +1248,8 @@ export default {
   }
 
   .NPC-sentences-list {
+    overflow: auto;
+
     .NPC-article-empty {
       display: flex;
       align-items: flex-start;

src/views/book/courseware/preview/components/dialogue_article/Practicechs.vue

@@ -70,7 +70,12 @@
       <p v-if="curQue.notice" class="notice" style="padding-top: 24px">
         {{ curQue.notice }}
       </p>
-      <div class="NPC-sentences-list">
+      <div
+        class="NPC-sentences-list"
+        :style="{
+          height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+        }"
+      >
         <div
           v-for="(item, index) in resObj.sentList"
           :key="'detail' + index"
@@ -1091,7 +1096,6 @@ export default {
         this.mergeWordTime(sentArrTotal, wordTimeList);
       }
       this.resObj = { sentList: resArr };
-      console.log(resArr);
     },
     // 获取角色
     getRole(dItem) {
@@ -1282,6 +1286,7 @@ export default {
 
   .NPC-sentences-list {
     padding: 0 0 24px;
+    overflow: auto;
   }
 
   .multilingual {

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

@@ -50,7 +50,12 @@
       </div>
     </div>
     <template v-if="resArr.length > 0">
-      <div class="NPC-sentences-list">
+      <div
+        class="NPC-sentences-list"
+        :style="{
+          height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+        }"
+      >
         <div class="NPC-article-empty">
           <div :class="['empty-left']"></div>
           <div class="empty-right"></div>
@@ -426,7 +431,7 @@
           </div>
         </div>
         <div class="NPC-article-empty NPC-article-empty-bottom">
-          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
+          <div :class="['empty-left']"></div>
           <div class="empty-right"></div>
         </div>
         <template v-for="(items, indexs) in curQue.detail">
@@ -731,6 +736,7 @@ export default {
       let resArr = [];
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       let dhaspinyin = false; // 每段是否有拼音
+      this.isHasRemark = false;
       curQue.detail.forEach((dItem, dIndex) => {
         dhaspinyin = false;
         let roleDetail = this.getRole(dItem);
@@ -1036,6 +1042,8 @@ export default {
   }
 
   .NPC-sentences-list {
+    overflow: auto;
+
     .NPC-article-empty {
       display: flex;
       align-items: flex-start;

src/views/book/courseware/preview/components/new_word/components/writeTableZoom.vue

@@ -525,7 +525,8 @@ export default {
       }
 
       .hz-box {
-        width: 100%;
+        width: 528px; // 内容满屏 多余出滚动条
+        overflow: auto;
 
         .hz-item {
           text-align: center;
@@ -794,7 +795,6 @@ export default {
 
   .hz-box {
     display: flex;
-    flex-flow: wrap;
     width: max-content;
   }
 

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -52,7 +52,10 @@
                   backgroundColor: data.mode === 'short' ? data.styles.bgColor : '',
                 }"
               >
-                <div :style="[tdStyle, computedRichStyle(col.content)]" class="cell-wrap">
+                <div
+                  :style="[tdStyle, computedRichStyle(col.content)]"
+                  :class="['cell-wrap', 'cell-wrap-' + data.mode]"
+                >
                   <template v-if="isEnable(data.property.view_pinyin)">
                     <p
                       v-for="(item, index) in col.model_pinyin"
@@ -528,6 +531,12 @@ $border-color: #e6e6e6;
           border-radius: 0;
         }
       }
+
+      &-normal {
+        p {
+          width: 100%; // 为了解决换行问题
+        }
+      }
     }
 
     .multilingual {