文章中小图不设宽度及上下居中对齐

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>

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

@@ -216,7 +216,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 +341,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 +350,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 +485,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 +494,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 +623,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"
@@ -1794,7 +1791,7 @@ export default {
 
           &.hasRemark {
             box-sizing: border-box;
-            width: 60%;
+            width: 70%;
             border-right: 1px rgba(0, 0, 0, 10%) solid;
           }
         }
@@ -1867,6 +1864,7 @@ export default {
           &.NNPE-chs {
             display: flex;
             flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 1.4;
@@ -1938,6 +1936,7 @@ export default {
         &.NNPE-chs {
           display: flex;
           flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 1.4;
@@ -2032,7 +2031,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 +2122,7 @@ export default {
           &.NNPE-chs {
             display: flex;
             flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 28px;
@@ -2186,6 +2186,7 @@ export default {
         &.NNPE-chs {
           display: flex;
           flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 28px;
@@ -2241,144 +2242,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>

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

@@ -173,7 +173,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 +252,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 +346,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 +443,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',
                             }"
                           />
@@ -1774,7 +1770,7 @@ export default {
 
           &.hasRemark {
             box-sizing: border-box;
-            width: 60%;
+            width: 70%;
             border-right: 1px rgba(0, 0, 0, 10%) solid;
           }
         }
@@ -1846,6 +1842,9 @@ export default {
           }
 
           &.NNPE-chs {
+            display: flex;
+            flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 1.4;
@@ -1867,6 +1866,10 @@ export default {
 
       &.textCenter {
         text-align: center;
+
+        .NNPE-chs {
+          justify-content: center;
+        }
       }
 
       &.textRight {
@@ -1893,6 +1896,9 @@ export default {
         }
 
         &.NNPE-chs {
+          display: flex;
+          flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 1.4;
@@ -1972,7 +1978,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 +2070,9 @@ export default {
           }
 
           &.NNPE-chs {
+            display: flex;
+            flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 28px;
@@ -2090,6 +2099,10 @@ export default {
 
       &.textCenter {
         text-align: center;
+
+        .NNPE-chs {
+          justify-content: center;
+        }
       }
 
       &.textRight {
@@ -2121,6 +2134,9 @@ export default {
         }
 
         &.NNPE-chs {
+          display: flex;
+          flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 28px;

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;

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

@@ -153,7 +153,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 +233,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 +336,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 +415,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>
@@ -1436,6 +1432,9 @@ export default {
           }
 
           &.NNPE-chs {
+            display: flex;
+            flex-flow: wrap;
+            align-items: center;
             font-family: '楷体';
             font-size: 20px;
             line-height: 1.4;
@@ -1461,6 +1460,10 @@ export default {
 
       &.textCenter {
         text-align: center;
+
+        .NNPE-chs {
+          justify-content: center;
+        }
       }
 
       &.textRight {
@@ -1487,6 +1490,9 @@ export default {
         }
 
         &.NNPE-chs {
+          display: flex;
+          flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 1.4;
@@ -1624,6 +1630,9 @@ export default {
         }
 
         &.NNPE-chs {
+          display: flex;
+          flex-flow: wrap;
+          align-items: center;
           font-family: '楷体';
           font-size: 20px;
           line-height: 28px;
@@ -1650,6 +1659,10 @@ export default {
 
     &.textCenter {
       text-align: center;
+
+      .NNPE-chs {
+        justify-content: center;
+      }
     }
 
     &.textRight {
@@ -1681,6 +1694,9 @@ export default {
       }
 
       &.NNPE-chs {
+        display: flex;
+        flex-flow: wrap;
+        align-items: center;
         font-family: '楷体';
         font-size: 20px;
         line-height: 28px;

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;
       }

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;
       }

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;
           }
         }