Merge branch 'lhd'

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

@@ -136,11 +136,11 @@
           />
         </div>
       </div>
-      <el-dialog title="标注" :visible.sync="remarkVisible" width="50%">
+      <el-dialog title="标注" :visible.sync="remarkVisible" width="50%" :close-on-click-modal="false">
         <div v-if="remark" class="remark">
           <div class="adult-book-input-item">
             <span class="adult-book-lable">中文：</span>
-            <el-input
+            <!-- <el-input
               v-model="remark.chs"
               class="adult-book-input"
               type="textarea"
@@ -149,6 +149,14 @@
               maxlength="200"
               show-word-limit
               @blur="onBlur(remark, 'chs')"
+            /> -->
+            <RichText
+              ref="richText"
+              v-model="remark.chs"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+              :wordlimit-num="200"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
             />
           </div>
           <div class="adult-book-input-item">

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

@@ -1133,7 +1133,7 @@ export default {
 
           &.hasRemark {
             box-sizing: border-box;
-            width: 553px;
+            width: 60%;
             border-right: 1px rgba(0, 0, 0, 10%) solid;
           }
         }
@@ -1184,7 +1184,7 @@ export default {
       padding: 8px 24px;
 
       &.hasRemark {
-        width: 553px;
+        width: 60%;
         padding: 8px 0 8px 23px;
         border-right: 1px rgba(0, 0, 0, 10%) solid;
       }

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

@@ -1119,7 +1119,7 @@ export default {
 
           &.hasRemark {
             box-sizing: border-box;
-            width: 553px;
+            width: 60%;
             border-right: 1px rgba(0, 0, 0, 10%) solid;
           }
         }
@@ -1175,7 +1175,7 @@ export default {
       padding: 8px 24px;
 
       &.hasRemark {
-        width: 553px;
+        width: 60%;
         padding: 8px 0 8px 23px;
         border-right: 1px rgba(0, 0, 0, 10%) solid;
       }

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

@@ -8,8 +8,8 @@
     class="remarkChs"
     :style="{ top: marginTop ? marginTop + 'px' : '0px' }"
   >
-    <div v-if="remarkDetail.chs" class="remark-chs">{{ remarkDetail.chs }}</div>
-    <div v-if="remarkDetail.en" class="remark-en">{{ remarkDetail.en }}</div>
+    <div v-if="remarkDetail.chs" class="remark-chs" v-html="remarkDetail.chs"></div>
+    <div v-if="remarkDetail.en" class="remark-en" v-html="remarkDetail.en"></div>
     <div v-if="remarkDetail.img_list && remarkDetail.img_list.length > 0" class="remark-img">
       <el-image
         :style="{
@@ -55,7 +55,7 @@ export default {
   position: absolute;
   top: 0;
   box-sizing: border-box;
-  width: 178px;
+  width: 95%;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 10%);
 
@@ -74,13 +74,14 @@ export default {
     background: #988ed6;
     border: 1px solid rgba(0, 0, 0, 10%);
     border-radius: 8px 8px 0 0;
+
+    :deep p {
+      margin: 0;
+    }
   }
 
   > .remark-en {
     box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     min-height: 34px;
     font-size: 14px;
     line-height: 22px;
@@ -90,6 +91,10 @@ export default {
     border: 1px solid rgba(0, 0, 0, 10%);
     border-top: 0;
     border-radius: 0 0 8px 8px;
+
+    :deep p {
+      margin: 0;
+    }
   }
 
   > .remark-img {

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

@@ -993,7 +993,7 @@ export default {
 
           &.hasRemark {
             box-sizing: border-box;
-            width: 553px;
+            width: 60%;
             border-right: 1px rgba(0, 0, 0, 10%) solid;
           }
         }