Explorar o código

Merge branch 'lhd'

liuhaidi123 hai 3 semanas
pai
achega
6b3eabb617

+ 1 - 0
src/icons/svg/icon-article-notes.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766309911657" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8854" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M897.706667 384c-22.186667 0-39.253333 17.066667-39.253334 39.253333v421.546667c0 35.84-29.013333 64.853333-64.853333 64.853333H225.28c-35.84 0-64.853333-29.013333-64.853333-64.853333V174.08c0-35.84 29.013333-64.853333 64.853333-64.853333h395.946667c22.186667 0 39.253333-17.066667 39.253333-39.253334s-17.066667-39.253333-39.253333-39.253333H225.28c-78.506667 0-141.653333 63.146667-141.653333 141.653333v672.426667c0 78.506667 63.146667 141.653333 141.653333 141.653333h568.32c78.506667 0 141.653333-63.146667 141.653333-141.653333V423.253333c0-22.186667-17.066667-39.253333-37.546666-39.253333z" fill="currentColor" p-id="8855"></path><path d="M344.746667 629.76h104.106666c22.186667 0 39.253333-17.066667 39.253334-39.253333 0-20.48-17.066667-39.253333-39.253334-39.253334h-104.106666c-20.48 0-39.253333 17.066667-39.253334 39.253334 0 22.186667 17.066667 39.253333 39.253334 39.253333zM344.746667 779.946667h250.88c20.48 0 39.253333-17.066667 39.253333-39.253334 0-20.48-17.066667-39.253333-39.253333-39.253333H344.746667c-20.48 0-39.253333 17.066667-39.253334 39.253333 0 22.186667 17.066667 39.253333 39.253334 39.253334zM645.12 469.333333L904.533333 191.146667c22.186667-23.893333 22.186667-61.44 0-81.92-22.186667-20.48-59.733333-18.773333-81.92 5.12L563.2 392.533333l81.92 76.8zM552.96 401.066667l-22.186667 107.52 105.813334-30.72z" fill="currentColor" p-id="8856"></path></svg>

+ 4 - 0
src/views/book/courseware/create/components/question/article/Article.vue

@@ -157,6 +157,8 @@ export default {
           },
           sourceList: [],
           sourcePosition: 'after',
+          heightNumber: null,
+          widthNumber: null,
         };
         // 分段
         contentArr.forEach((item, index) => {
@@ -357,6 +359,8 @@ export default {
             },
             sourceList: [],
             sourcePosition: 'after',
+            heightNumber: null,
+            widthNumber: null,
           };
           this.data.detail.push(obj);
         }

+ 20 - 0
src/views/book/courseware/create/components/question/article/CheckArticle.vue

@@ -42,6 +42,26 @@
               <el-radio label="after">段落后</el-radio>
             </el-radio-group>
           </div>
+          <div class="set-para">
+            <span class="adult-book-lable">图片宽度:</span>
+            <el-input
+              v-model="item.widthNumber"
+              class="adult-book-input"
+              placeholder="请输入宽度值"
+              maxlength="200"
+              style="width: 150px"
+              @blur="onBlur(item, 'widthNumber')"
+            />
+            <span class="adult-book-lable">图片高度:</span>
+            <el-input
+              v-model="item.heightNumber"
+              class="adult-book-input"
+              placeholder="请输入高度值"
+              maxlength="200"
+              style="width: 150px"
+              @blur="onBlur(item, 'heightNumber')"
+            />
+          </div>
         </template>
         <div v-for="(items, indexs) in item.sentenceStr" :key="indexs + 'words'" class="sentence-box">
           <div class="sentence">

+ 31 - 158
src/views/book/courseware/preview/components/article/NormalModelChs.vue

@@ -72,6 +72,10 @@
                 <img
                   v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
                   :src="item.sourceList[0].file_url_open"
+                  :style="{
+                    width: item.widthNumber + 'px',
+                    height: item.heightNumber + 'px',
+                  }"
                 />
                 <video
                   :src="item.sourceList[0].file_url_open"
@@ -216,7 +220,6 @@
                                 v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
                                 :src="pItem.img[0].file_url"
                                 :style="{
-                                  width: attrib && attrib.font_size ? attrib.font_size : '20px',
                                   height: attrib && attrib.font_size ? attrib.font_size : '20px',
                                 }"
                               />
@@ -342,8 +345,8 @@
                                 pItem,
                               )
                             "
-                            >{{ item.wordsList[pIndex + 1].chs
-                            }}<img
+                            ><span>{{ item.wordsList[pIndex + 1].chs }}</span
+                            ><img
                               v-if="
                                 item.wordsList[pIndex + 1].img &&
                                 item.wordsList[pIndex + 1].img.length > 0 &&
@@ -351,7 +354,6 @@
                               "
                               :src="item.wordsList[pIndex + 1].img[0].file_url"
                               :style="{
-                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
                                 height: attrib && attrib.font_size ? attrib.font_size : '20px',
                               }"
                           /></span>
@@ -487,8 +489,8 @@
                                 pItem,
                               )
                             "
-                            >{{ item.wordsList[pIndex + 2].chs
-                            }}<img
+                            ><span>{{ item.wordsList[pIndex + 2].chs }}</span
+                            ><img
                               v-if="
                                 item.wordsList[pIndex + 2].img &&
                                 item.wordsList[pIndex + 2].img.length > 0 &&
@@ -496,7 +498,6 @@
                               "
                               :src="item.wordsList[pIndex + 2].img[0].file_url"
                               :style="{
-                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
                                 height: attrib && attrib.font_size ? attrib.font_size : '20px',
                               }"
                           /></span>
@@ -626,16 +627,16 @@
                                   pItem,
                                 )
                               "
-                              >{{ pItem.chs[wIndex]
-                              }}<img
-                                v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
-                                :src="pItem.img[0].file_url"
-                                :style="{
-                                  width: attrib && attrib.font_size ? attrib.font_size : '20px',
-                                  height: attrib && attrib.font_size ? attrib.font_size : '20px',
-                                }"
-                            /></span>
+                              >{{ pItem.chs[wIndex] }}</span
+                            >
                           </template>
+                          <img
+                            v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                            :src="pItem.img[0].file_url"
+                            :style="{
+                              height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                            }"
+                          />
                         </span>
                         <span
                           v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
@@ -690,6 +691,10 @@
                 <img
                   v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
                   :src="item.sourceList[0].file_url_open"
+                  :style="{
+                    width: item.widthNumber + 'px',
+                    height: item.heightNumber + 'px',
+                  }"
                 />
                 <video
                   :src="item.sourceList[0].file_url_open"
@@ -1550,6 +1555,8 @@ export default {
           remarkDetail,
           sourceList: dItem.sourceList ? dItem.sourceList : [],
           sourcePosition: dItem.sourcePosition,
+          widthNumber: dItem.widthNumber,
+          heightNumber: dItem.heightNumber,
         };
         resArr.push(paraObj);
       });
@@ -1601,6 +1608,8 @@ export default {
             paraAlign: dItem.paraAlign,
             sourceList: dItem.sourceList ? dItem.sourceList : [],
             sourcePosition: dItem.sourcePosition,
+            widthNumber: dItem.widthNumber,
+            heightNumber: dItem.heightNumber,
           };
           sentArrTotal.push(sentArr);
           resArrs.push(objs);
@@ -1794,7 +1803,7 @@ export default {
 
           &.hasRemark {
             box-sizing: border-box;
-            width: 60%;
+            width: 70%;
             border-right: 1px rgba(0, 0, 0, 10%) solid;
           }
         }
@@ -1867,6 +1876,7 @@ export default {
           &.NNPE-chs {
             display: flex;
             flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 1.4;
@@ -1938,6 +1948,7 @@ export default {
         &.NNPE-chs {
           display: flex;
           flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 1.4;
@@ -2032,7 +2043,7 @@ export default {
       width: 100%;
 
       &.hasRemark {
-        width: 60%;
+        width: 70%;
         padding: 8px 0 8px 23px;
         border-right: 1px rgba(0, 0, 0, 10%) solid;
       }
@@ -2123,6 +2134,7 @@ export default {
           &.NNPE-chs {
             display: flex;
             flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 28px;
@@ -2186,6 +2198,7 @@ export default {
         &.NNPE-chs {
           display: flex;
           flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 28px;
@@ -2241,144 +2254,4 @@ export default {
     }
   }
 }
-
-.NPC-Big-Book-preview-green {
-  .NNPE-ArticleView {
-    .NNPE-detail-box {
-      &.active {
-        background: rgba(36, 185, 158, 15%);
-      }
-    }
-
-    .NNPE-detail {
-      .NNPE-words {
-        &-box {
-          > span {
-            &.NNPE-chs {
-              &.active {
-                background: rgba(36, 185, 158, 15%);
-              }
-
-              &.wordActive {
-                color: rgba(36, 185, 158, 100%);
-              }
-
-              .wordActive {
-                color: rgba(36, 185, 158, 100%);
-              }
-            }
-          }
-        }
-
-        > span {
-          &.NNPE-chs {
-            &.active {
-              background: rgba(36, 185, 158, 15%);
-            }
-
-            &.wordActive {
-              color: rgba(36, 185, 158, 100%);
-            }
-
-            .wordActive {
-              color: rgba(36, 185, 158, 100%);
-            }
-          }
-        }
-      }
-    }
-
-    .NNPE-details {
-      .NNPE-words {
-        &-box {
-          > span {
-            &.NNPE-chs {
-              .active {
-                color: #24b99e;
-              }
-            }
-          }
-        }
-
-        > span {
-          &.NNPE-chs {
-            .active {
-              color: #24b99e;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.NPC-Big-Book-preview-brown {
-  .NNPE-ArticleView {
-    .NNPE-detail-box {
-      &.active {
-        background: rgba(189, 136, 101, 15%);
-      }
-    }
-
-    .NNPE-detail {
-      .NNPE-words {
-        &-box {
-          > span {
-            &.NNPE-chs {
-              &.active {
-                background: rgba(189, 136, 101, 15%);
-              }
-
-              &.wordActive {
-                color: rgba(189, 136, 101, 100%);
-              }
-
-              .wordActive {
-                color: rgba(189, 136, 101, 100%);
-              }
-            }
-          }
-        }
-
-        > span {
-          &.NNPE-chs {
-            &.active {
-              background: rgba(189, 136, 101, 15%);
-            }
-
-            &.wordActive {
-              color: rgba(189, 136, 101, 100%);
-            }
-
-            .wordActive {
-              color: rgba(189, 136, 101, 100%);
-            }
-          }
-        }
-      }
-    }
-
-    .NNPE-details {
-      .NNPE-words {
-        &-box {
-          > span {
-            &.NNPE-chs {
-              .active {
-                color: #bd8865;
-              }
-            }
-          }
-        }
-
-        > span {
-          &.NNPE-chs {
-            .active {
-              color: #bd8865;
-            }
-          }
-        }
-      }
-    }
-  }
-}
 </style>

+ 34 - 6
src/views/book/courseware/preview/components/article/PhraseModelChs.vue

@@ -74,6 +74,10 @@
                 <img
                   v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
                   :src="item.sourceList[0].file_url_open"
+                  :style="{
+                    width: item.widthNumber + 'px',
+                    height: item.heightNumber + 'px',
+                  }"
                 />
                 <video
                   :src="item.sourceList[0].file_url_open"
@@ -173,7 +177,6 @@
                               v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
                               :src="pItem.img[0].file_url"
                               :style="{
-                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
                                 height: attrib && attrib.font_size ? attrib.font_size : '20px',
                               }"
                           /></span>
@@ -253,7 +256,6 @@
                               "
                               :src="item.wordsList[pIndex + 1].img[0].file_url"
                               :style="{
-                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
                                 height: attrib && attrib.font_size ? attrib.font_size : '20px',
                               }"
                           /></span>
@@ -348,7 +350,6 @@
                               "
                               :src="item.wordsList[pIndex + 2].img[0].file_url"
                               :style="{
-                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
                                 height: attrib && attrib.font_size ? attrib.font_size : '20px',
                               }"
                           /></span>
@@ -446,7 +447,6 @@
                             v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
                             :src="pItem.img[0].file_url"
                             :style="{
-                              width: attrib && attrib.font_size ? attrib.font_size : '20px',
                               height: attrib && attrib.font_size ? attrib.font_size : '20px',
                             }"
                           />
@@ -495,6 +495,10 @@
                 <img
                   v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
                   :src="item.sourceList[0].file_url_open"
+                  :style="{
+                    width: item.widthNumber + 'px',
+                    height: item.heightNumber + 'px',
+                  }"
                 />
                 <video
                   :src="item.sourceList[0].file_url_open"
@@ -1271,6 +1275,8 @@ export default {
           remarkDetail,
           sourceList: dItem.sourceList ? dItem.sourceList : [],
           sourcePosition: dItem.sourcePosition,
+          widthNumber: dItem.widthNumber,
+          heightNumber: dItem.heightNumber,
         };
         resArr.push(paraObj);
       });
@@ -1333,6 +1339,8 @@ export default {
             paraAlign: dItem.paraAlign,
             sourceList: dItem.sourceList ? dItem.sourceList : [],
             sourcePosition: dItem.sourcePosition,
+            widthNumber: dItem.widthNumber,
+            heightNumber: dItem.heightNumber,
           };
           sentArrTotal.push(sentArr);
           resArrs.push(objs);
@@ -1774,7 +1782,7 @@ export default {
 
           &.hasRemark {
             box-sizing: border-box;
-            width: 60%;
+            width: 70%;
             border-right: 1px rgba(0, 0, 0, 10%) solid;
           }
         }
@@ -1846,6 +1854,9 @@ export default {
           }
 
           &.NNPE-chs {
+            display: flex;
+            flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 1.4;
@@ -1867,6 +1878,10 @@ export default {
 
       &.textCenter {
         text-align: center;
+
+        .NNPE-chs {
+          justify-content: center;
+        }
       }
 
       &.textRight {
@@ -1893,6 +1908,9 @@ export default {
         }
 
         &.NNPE-chs {
+          display: flex;
+          flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 1.4;
@@ -1972,7 +1990,7 @@ export default {
     width: 100%;
 
     &.hasRemark {
-      width: 60%;
+      width: 70%;
       padding: 8px 0 8px 23px;
       border-right: 1px rgba(0, 0, 0, 10%) solid;
     }
@@ -2064,6 +2082,9 @@ export default {
           }
 
           &.NNPE-chs {
+            display: flex;
+            flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 28px;
@@ -2090,6 +2111,10 @@ export default {
 
       &.textCenter {
         text-align: center;
+
+        .NNPE-chs {
+          justify-content: center;
+        }
       }
 
       &.textRight {
@@ -2121,6 +2146,9 @@ export default {
         }
 
         &.NNPE-chs {
+          display: flex;
+          flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 28px;

+ 2 - 4
src/views/book/courseware/preview/components/article/Practicechs.vue

@@ -172,7 +172,6 @@
                           v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
                           :src="pItem.img[0].file_url"
                           :style="{
-                            width: attrib && attrib.font_size ? attrib.font_size : '20px',
                             height: attrib && attrib.font_size ? attrib.font_size : '20px',
                           }"
                         />
@@ -264,7 +263,6 @@
                           "
                           :src="item.sentArr[pIndex + 1].img[0].file_url"
                           :style="{
-                            width: attrib && attrib.font_size ? attrib.font_size : '20px',
                             height: attrib && attrib.font_size ? attrib.font_size : '20px',
                           }"
                         />
@@ -367,7 +365,6 @@
                           "
                           :src="item.sentArr[pIndex + 2].img[0].file_url"
                           :style="{
-                            width: attrib && attrib.font_size ? attrib.font_size : '20px',
                             height: attrib && attrib.font_size ? attrib.font_size : '20px',
                           }"
                         />
@@ -463,7 +460,6 @@
                         v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
                         :src="pItem.img[0].file_url"
                         :style="{
-                          width: attrib && attrib.font_size ? attrib.font_size : '20px',
                           height: attrib && attrib.font_size ? attrib.font_size : '20px',
                         }"
                       />
@@ -1192,6 +1188,7 @@ export default {
           &.NNPE-chs {
             display: flex;
             flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 1.4;
@@ -1255,6 +1252,7 @@ export default {
         &.NNPE-chs {
           display: flex;
           flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 1.4;

+ 32 - 4
src/views/book/courseware/preview/components/article/WordModelChs.vue

@@ -68,6 +68,10 @@
                 <img
                   v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
                   :src="item.sourceList[0].file_url_open"
+                  :style="{
+                    width: item.widthNumber + 'px',
+                    height: item.heightNumber + 'px',
+                  }"
                 />
                 <video
                   :src="item.sourceList[0].file_url_open"
@@ -153,7 +157,6 @@
                               v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
                               :src="pItem.img[0].file_url"
                               :style="{
-                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
                                 height: attrib && attrib.font_size ? attrib.font_size : '20px',
                               }"
                           /></span>
@@ -234,7 +237,6 @@
                               "
                               :src="item.wordsList[pIndex + 1].img[0].file_url"
                               :style="{
-                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
                                 height: attrib && attrib.font_size ? attrib.font_size : '20px',
                               }"
                           /></span>
@@ -338,7 +340,6 @@
                               "
                               :src="item.wordsList[pIndex + 2].img[0].file_url"
                               :style="{
-                                width: attrib && attrib.font_size ? attrib.font_size : '20px',
                                 height: attrib && attrib.font_size ? attrib.font_size : '20px',
                               }"
                           /></span>
@@ -418,7 +419,6 @@
                             v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
                             :src="pItem.img[0].file_url"
                             :style="{
-                              width: attrib && attrib.font_size ? attrib.font_size : '20px',
                               height: attrib && attrib.font_size ? attrib.font_size : '20px',
                             }"
                         /></span>
@@ -464,6 +464,10 @@
                 <img
                   v-if="item.sourceList[0] && item.sourceList[0].type === 'image'"
                   :src="item.sourceList[0].file_url_open"
+                  :style="{
+                    width: item.widthNumber + 'px',
+                    height: item.heightNumber + 'px',
+                  }"
                 />
                 <video
                   :src="item.sourceList[0].file_url_open"
@@ -1130,6 +1134,8 @@ export default {
           paraAlign: dItem.paraAlign,
           sourceList: dItem.sourceList ? dItem.sourceList : [],
           sourcePosition: dItem.sourcePosition,
+          widthNumber: dItem.widthNumber,
+          heightNumber: dItem.heightNumber,
         };
         resArr.push(paraObj);
       });
@@ -1180,6 +1186,8 @@ export default {
             paraAlign: dItem.paraAlign,
             sourceList: dItem.sourceList ? dItem.sourceList : [],
             sourcePosition: dItem.sourcePosition,
+            widthNumber: dItem.widthNumber,
+            heightNumber: dItem.heightNumber,
           };
           sentArrTotal.push(sentArr);
           resArrs.push(objs);
@@ -1436,6 +1444,9 @@ export default {
           }
 
           &.NNPE-chs {
+            display: flex;
+            flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 1.4;
@@ -1461,6 +1472,10 @@ export default {
 
       &.textCenter {
         text-align: center;
+
+        .NNPE-chs {
+          justify-content: center;
+        }
       }
 
       &.textRight {
@@ -1487,6 +1502,9 @@ export default {
         }
 
         &.NNPE-chs {
+          display: flex;
+          flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 1.4;
@@ -1624,6 +1642,9 @@ export default {
         }
 
         &.NNPE-chs {
+          display: flex;
+          flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 28px;
@@ -1650,6 +1671,10 @@ export default {
 
     &.textCenter {
       text-align: center;
+
+      .NNPE-chs {
+        justify-content: center;
+      }
     }
 
     &.textRight {
@@ -1681,6 +1706,9 @@ export default {
       }
 
       &.NNPE-chs {
+        display: flex;
+        flex-flow: wrap;
+        align-items: center;
         font-family: '楷体';
         font-size: 20px;
         line-height: 28px;

+ 2 - 2
src/views/book/courseware/preview/components/dialogue_article/NormalModelChs.vue

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

+ 2 - 2
src/views/book/courseware/preview/components/dialogue_article/PhraseModelChs.vue

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

+ 1 - 1
src/views/book/courseware/preview/components/dialogue_article/WordModelChs.vue

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