1、修改正文无法显示问题

2、修改批注显示问题
3、修改英语写作流程问题

src/components/easy2/studyStudent.vue

@@ -11340,7 +11340,7 @@
           </div>
           <div class="engText">
             <div>作文内容：</div>
-            <div class="cont" v-html="englishList1.englishText" @click="checkImg(getImgList(englishList1.englishText))"></div>
+            <div class="cont" v-html="englishList1.englishText" style="white-space: pre-line;" @click="checkImg(getImgList(englishList1.englishText))"></div>
           </div>
         </div>
         <div class="correctBox" :style="{height: `calc(100% - ${topHeight}px)` }">
@@ -11354,7 +11354,7 @@
                 </div>
                 <div class="oldDetail1">
                   <div>正文：</div>
-                  <div v-html="oldEnglishJson.engText"></div>
+                  <div v-html="oldEnglishJson.engText" style="white-space: pre-line;"></div>
                 </div>
                 <div class="oldDetail" v-if="oldEnglishJson.imgList && oldEnglishJson.imgList.length > 0">
                   <div>图片：</div>
@@ -11377,7 +11377,9 @@
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
                   <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
                 </div>
-                <el-button @click="isUpdateCorrect(newEnglishList.engText,1)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(newEnglishList.engText,1)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
           </div>
@@ -11399,7 +11401,9 @@
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="oldEnglishJson1.engText" @input="gx"/>
                   <div v-else style="white-space: pre-line;" v-html="Correct(oldEnglishJson1.engText)"></div>
                 </div>
-                <el-button @click="isUpdateCorrect(oldEnglishJson1.engText,2)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(oldEnglishJson1.engText,2)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
             <div class="oldText" v-else-if="newEngIndex == -1">
@@ -11414,7 +11418,9 @@
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
                   <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
                 </div>
-                <el-button @click="isUpdateCorrect(newEnglishList.engText,3)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(newEnglishList.engText,3)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
             <div class="oldText" v-else-if="newEngIndex > -1 && newEnglishList1.length > 0">
@@ -11435,7 +11441,9 @@
                     <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList1[newEngIndex].cWork.engText)"></div>
                   </div>
                 </div>
-                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
           </div>
@@ -19318,18 +19326,16 @@ export default {
         let a = this.correctWord;
         for(var k = 0;k<a.length;k++){
           //diffWordsWithSpace
-          if(w == ""){
-            if(a[k].added == true){
-              w = '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
-            }else if(a[k].removed == true){
-              w = '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
-            }
+          if(a.length > 1){
+              if(a[k].added == true){
+                w += '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
+              }else if(a[k].removed == true){
+                w += '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
+              }else{
+                w += '<span>' + a[k].value + '</span>';
+              }
           }else{
-            if(a[k].added == true){
-              w += '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
-            }else if(a[k].removed == true){
-              w += '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
-            }
+            w = c
           }
 
           //diffChars方法
@@ -23746,4 +23752,11 @@ ol {
 .show_taskD.show > img {
   transform: rotate(0deg);
 }
+
+.correctCss{
+  position: absolute;
+  bottom: -70px;
+  background: #409eff;
+  color: #fff;
+}
 </style>

src/components/easy3/studyStudent.vue

@@ -11327,7 +11327,7 @@
           </div>
           <div class="engText">
             <div>作文内容：</div>
-            <div class="cont" v-html="englishList1.englishText" @click="checkImg(getImgList(englishList1.englishText))"></div>
+            <div class="cont" v-html="englishList1.englishText" style="white-space: pre-line;" @click="checkImg(getImgList(englishList1.englishText))"></div>
           </div>
         </div>
         <div class="correctBox" :style="{height: `calc(100% - ${topHeight}px)` }">
@@ -11341,7 +11341,7 @@
                 </div>
                 <div class="oldDetail1">
                   <div>正文：</div>
-                  <div v-html="oldEnglishJson.engText"></div>
+                  <div v-html="oldEnglishJson.engText" style="white-space: pre-line;"></div>
                 </div>
                 <div class="oldDetail" v-if="oldEnglishJson.imgList && oldEnglishJson.imgList.length > 0">
                   <div>图片：</div>
@@ -11364,7 +11364,9 @@
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
                   <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
                 </div>
-                <el-button @click="isUpdateCorrect(newEnglishList.engText,1)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(newEnglishList.engText,1)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
           </div>
@@ -11386,7 +11388,9 @@
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="oldEnglishJson1.engText" @input="gx"/>
                   <div v-else style="white-space: pre-line;" v-html="Correct(oldEnglishJson1.engText)"></div>
                 </div>
-                <el-button @click="isUpdateCorrect(oldEnglishJson1.engText,2)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(oldEnglishJson1.engText,2)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
             <div class="oldText" v-else-if="newEngIndex == -1">
@@ -11401,7 +11405,9 @@
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
                   <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
                 </div>
-                <el-button @click="isUpdateCorrect(newEnglishList.engText,3)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(newEnglishList.engText,3)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
             <div class="oldText" v-else-if="newEngIndex > -1 && newEnglishList1.length > 0">
@@ -11423,7 +11429,9 @@
                     <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList1[newEngIndex].cWork.engText)"></div>
                   </div>
                 </div>
-                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
           </div>
@@ -19310,18 +19318,16 @@ export default {
         let a = this.correctWord;
         for(var k = 0;k<a.length;k++){
           //diffWordsWithSpace
-          if(w == ""){
-            if(a[k].added == true){
-              w = '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
-            }else if(a[k].removed == true){
-              w = '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
-            }
+          if(a.length > 1){
+              if(a[k].added == true){
+                w += '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
+              }else if(a[k].removed == true){
+                w += '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
+              }else{
+                w += '<span>' + a[k].value + '</span>';
+              }
           }else{
-            if(a[k].added == true){
-              w += '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
-            }else if(a[k].removed == true){
-              w += '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
-            }
+            w = c
           }
 
           //diffChars方法
@@ -23738,4 +23744,11 @@ ol {
 .show_taskD.show > img {
   transform: rotate(0deg);
 }
+
+.correctCss{
+  position: absolute;
+  bottom: -70px;
+  background: #409eff;
+  color: #fff;
+}
 </style>

src/components/studyStudent.vue

@@ -11312,7 +11312,7 @@
           </div>
           <div class="engText">
             <div>作文内容：</div>
-            <div class="cont" v-html="englishList1.englishText" @click="checkImg(getImgList(englishList1.englishText))"></div>
+            <div class="cont" v-html="englishList1.englishText" style="white-space: pre-line;" @click="checkImg(getImgList(englishList1.englishText))"></div>
           </div>
         </div>
         <div class="correctBox" :style="{height: `calc(100% - ${topHeight}px)` }">
@@ -11326,7 +11326,7 @@
                 </div>
                 <div class="oldDetail1">
                   <div>正文：</div>
-                  <div v-html="oldEnglishJson.engText"></div>
+                  <div v-html="oldEnglishJson.engText" style="white-space: pre-line;"></div>
                 </div>
                 <div class="oldDetail" v-if="oldEnglishJson.imgList && oldEnglishJson.imgList.length > 0">
                   <div>图片：</div>
@@ -11349,7 +11349,9 @@
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
                   <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
                 </div>
-                <el-button @click="isUpdateCorrect(newEnglishList.engText,1)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(newEnglishList.engText,1)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
           </div>
@@ -11371,7 +11373,9 @@
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="oldEnglishJson1.engText" @input="gx"/>
                   <div v-else style="white-space: pre-line;" v-html="Correct(oldEnglishJson1.engText)"></div>
                 </div>
-                <el-button @click="isUpdateCorrect(oldEnglishJson1.engText,2)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(oldEnglishJson1.engText,2)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
             <div class="oldText" v-else-if="newEngIndex == -1">
@@ -11386,7 +11390,9 @@
                   <el-input v-if="greyType" type="textarea" :rows="10" resize="none" v-model="newEnglishList.engText" @input="gx"/>
                   <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList.engText)"></div>
                 </div>
-                <el-button @click="isUpdateCorrect(newEnglishList.engText,3)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(newEnglishList.engText,3)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
             <div class="oldText" v-else-if="newEngIndex > -1 && newEnglishList1.length > 0">
@@ -11407,7 +11413,9 @@
                     <div v-else style="white-space: pre-line;" v-html="Correct(newEnglishList1[newEngIndex].cWork.engText)"></div>
                   </div>
                 </div>
-                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" style="position: absolute;bottom: -50px;right: 0;background: #409eff;color: #fff;">{{ greyType == false ? '修改批注' : '取消修改' }}</el-button>
+                <div style="position: absolute;bottom: -25px;">注：红色划线字为删除，绿色背景白色字为新添加.</div>
+                <el-button @click="isUpdateCorrect(newEnglishList1[newEngIndex].cWork.engText,4)" class="correctCss" :style="{right: greyType == false ? '0' : '80px' }">{{ greyType == false ? '添加批注' : '取消添加' }}</el-button>
+                <el-button @click="addCorrect" style="position: absolute;bottom: -70px;right: 0;background: #409eff;color: #fff;" v-if="greyType">确定</el-button>
               </div>
             </div>
           </div>
@@ -19283,20 +19291,17 @@ export default {
         let a = this.correctWord;
         for(var k = 0;k<a.length;k++){
           //diffWordsWithSpace
-          if(w == ""){
-            if(a[k].added == true){
-              w = '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
-            }else if(a[k].removed == true){
-              w = '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
-            }
+          if(a.length > 1){
+              if(a[k].added == true){
+                w += '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
+              }else if(a[k].removed == true){
+                w += '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
+              }else{
+                w += '<span>' + a[k].value + '</span>';
+              }
           }else{
-            if(a[k].added == true){
-              w += '<span style="background-color: green;color:#fff">' + a[k].value + '</span>';
-            }else if(a[k].removed == true){
-              w += '<span style="text-decoration: line-through;color:red">' + a[k].value + '</span>';
-            }
+            w = c
           }
-
           //diffChars方法
           // if(a.length > 1){
           //   if(w == ""){
@@ -23738,4 +23743,10 @@ ol {
   transform: rotate(0deg);
 }
 
+.correctCss{
+  position: absolute;
+  bottom: -70px;
+  background: #409eff;
+  color: #fff;
+}
 </style>