Merge branch 'lhd'

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

@@ -195,6 +195,8 @@ export default {
             heightNumber: null,
             img_list: [],
             widthNumber: null,
+            chsBg: '#988ed6',
+            enBg: '#fff',
           },
           sourceList: [],
           sourcePosition: 'after',
@@ -436,6 +438,8 @@ export default {
                   heightNumber: null,
                   img_list: [],
                   widthNumber: null,
+                  chsBg: '#988ed6',
+                  enBg: '#fff',
                 },
                 sourceList: [],
                 sourcePosition: 'after',

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

@@ -85,7 +85,7 @@
     >
       <div v-if="remark" class="remark">
         <div class="adult-book-input-item">
-          <span class="adult-book-lable">中文：</span>
+          <span class="adult-book-lable">标题：</span>
           <!-- <el-input
               v-model="remark.chs"
               class="adult-book-input"
@@ -106,7 +106,10 @@
           />
         </div>
         <div class="adult-book-input-item">
-          <span class="adult-book-lable">英文：</span>
+          <span class="adult-book-lable">标题背景色：</span> <el-color-picker v-model="remark.chsBg"></el-color-picker>
+        </div>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">正文：</span>
           <!-- <el-input
               class="adult-book-input"
               type="textarea"
@@ -126,6 +129,10 @@
             :font-family="data?.unified_attrib?.font"
           />
         </div>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">正文背景色：</span>
+          <el-color-picker v-model="remark.enBg"></el-color-picker>
+        </div>
         <div v-if="remark.img_list && remark.img_list.length == 0" class="adult-book-input-item">
           <el-upload action="no" accept="image/*" :show-file-list="false" :http-request="changeImage">
             <el-button>上传图片</el-button>

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

@@ -165,10 +165,17 @@
           />
         </div>
       </div>
-      <el-dialog title="标注" :visible.sync="remarkVisible" width="50%" :close-on-click-modal="false">
+      <el-dialog
+        title="标注"
+        :visible.sync="remarkVisible"
+        width="50%"
+        :close-on-click-modal="false"
+        :append-to-body="true"
+        v-if="remarkVisible"
+      >
         <div v-if="remark" class="remark">
           <div class="adult-book-input-item">
-            <span class="adult-book-lable">中文：</span>
+            <span class="adult-book-lable">标题：</span>
             <!-- <el-input
               v-model="remark.chs"
               class="adult-book-input"
@@ -189,7 +196,11 @@
             />
           </div>
           <div class="adult-book-input-item">
-            <span class="adult-book-lable">英文：</span>
+            <span class="adult-book-lable">标题背景色：</span>
+            <el-color-picker v-model="remark.chsBg"></el-color-picker>
+          </div>
+          <div class="adult-book-input-item">
+            <span class="adult-book-lable">正文：</span>
             <!-- <el-input
               class="adult-book-input"
               type="textarea"
@@ -209,6 +220,10 @@
               :font-family="data?.unified_attrib?.font"
             />
           </div>
+          <div class="adult-book-input-item">
+            <span class="adult-book-lable">正文背景色：</span>
+            <el-color-picker v-model="remark.enBg"></el-color-picker>
+          </div>
           <div v-if="remark.img_list && remark.img_list.length == 0" class="adult-book-input-item">
             <el-upload
               action="no"
@@ -407,6 +422,8 @@ export default {
               heightNumber: null,
               img_list: [],
               widthNumber: null,
+              chsBg: '#988ed6',
+              enBg: '#fff',
             },
             type: 'image',
             para: '',
@@ -440,6 +457,8 @@ export default {
           heightNumber: null,
           img_list: [],
           widthNumber: null,
+          chsBg: '#988ed6',
+          enBg: '#fff',
         },
         type: 'text',
         paraIndex: 0,
@@ -467,6 +486,8 @@ export default {
             heightNumber: null,
             img_list: [],
             widthNumber: null,
+            chsBg: '#988ed6',
+            enBg: '#fff',
           },
           type: 'notice',
           paraIndex: 0,

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

@@ -6,9 +6,14 @@
       (remarkDetail.chs || remarkDetail.en || (remarkDetail.img_list && remarkDetail.img_list.length > 0))
     "
     class="remarkChs"
-    :style="{ top: marginTop ? marginTop + 'px' : '0px' }"
+    :style="{ top: marginTop ? marginTop + 'px' : '0px', backgroundColor: remarkDetail.enBg ? remarkDetail.enBg : '' }"
   >
-    <div v-if="remarkDetail.chs" class="remark-chs" v-html="convertText(sanitizeHTML(remarkDetail.chs))"></div>
+    <div
+      :style="{ backgroundColor: remarkDetail.chsBg ? remarkDetail.chsBg : '' }"
+      v-if="remarkDetail.chs"
+      class="remark-chs"
+      v-html="convertText(sanitizeHTML(remarkDetail.chs))"
+    ></div>
     <div v-if="remarkDetail.en" class="remark-en" v-html="convertText(sanitizeHTML(remarkDetail.en))"></div>
     <div v-if="remarkDetail.img_list && remarkDetail.img_list.length > 0" class="remark-img">
       <el-image
@@ -59,7 +64,7 @@ export default {
   position: absolute;
   top: 0;
   box-sizing: border-box;
-  width: 95%;
+  width: 90%;
 
   // border: 1px solid rgba(0, 0, 0, 10%);
   border-radius: 8px;
@@ -68,10 +73,12 @@ export default {
   > .remark-chs {
     box-sizing: border-box;
     display: flex;
+    flex-flow: wrap;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-height: 34px;
+    padding: 0 8px;
     font-size: 14px;
     font-weight: normal;
     line-height: 22px;
@@ -82,6 +89,7 @@ export default {
     border-radius: 8px 8px 0 0;
 
     :deep p {
+      width: 100%;
       margin: 0;
     }
   }
@@ -89,6 +97,7 @@ export default {
   > .remark-en {
     box-sizing: border-box;
     min-height: 34px;
+    padding: 0 8px;
     font-size: 14px;
     line-height: 22px;
     color: #000;