文章兼容拼音、英文等内容 高度和空格

src/components/Adult/preview/ArticleViewChs/NormalModelChs.vue

@@ -287,7 +287,11 @@
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              width:
+                                item.wordsList[pIndex + 1].chs.trim() === ''
+                                  ? '6px'
+                                  : ''
                             }"
                             >{{
                               NumberList.indexOf(
@@ -413,7 +417,11 @@
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              width:
+                                item.wordsList[pIndex + 2].chs.trim() === ''
+                                  ? '6px'
+                                  : ''
                             }"
                             >{{
                               NumberList.indexOf(
@@ -531,7 +539,9 @@
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
                                 height: '28px',
-                                display: 'inline-block'
+                                display: 'inline-block',
+                                width:
+                                  pItem.chs[wIndex].trim() === '' ? '6px' : ''
                               }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
@@ -707,7 +717,9 @@
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
                                 height: '28px',
-                                display: 'inline-block'
+                                display: 'inline-block',
+                                width:
+                                  pItem.chs[wIndex].trim() === '' ? '6px' : ''
                               }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
@@ -801,7 +813,11 @@
                               fontFamily:
                                 item.sentArr[pIndex + 1].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              width:
+                                item.sentArr[pIndex + 1].chs.trim() === ''
+                                  ? '6px'
+                                  : ''
                             }"
                           >
                             {{
@@ -907,7 +923,11 @@
                               fontFamily:
                                 item.sentArr[pIndex + 2].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              width:
+                                item.sentArr[pIndex + 2].chs.trim() === ''
+                                  ? '6px'
+                                  : ''
                             }"
                           >
                             {{
@@ -1015,7 +1035,9 @@
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              width:
+                                pItem.chs[wIndex].trim() === '' ? '6px' : ''
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -1586,6 +1608,8 @@ export default {
             font-size: 20px;
             line-height: 28px;
             color: #000000;
+            display: flex;
+            flex-flow: wrap;
             &.overActive {
               background: rgba(0, 0, 0, 0.06);
             }
@@ -1638,6 +1662,8 @@ export default {
           font-size: 20px;
           line-height: 28px;
           color: #000000;
+          display: flex;
+          flex-flow: wrap;
           &.overActive {
             background: rgba(0, 0, 0, 0.06);
           }
@@ -1752,6 +1778,8 @@ export default {
             font-size: 20px;
             line-height: 28px;
             color: rgba(0, 0, 0, 1);
+            display: flex;
+            flex-flow: wrap;
             .active {
               color: #de4444;
             }
@@ -1797,6 +1825,8 @@ export default {
           font-size: 20px;
           line-height: 28px;
           color: rgba(0, 0, 0, 1);
+          display: flex;
+          flex-flow: wrap;
           .active {
             color: #de4444;
           }

src/components/Adult/preview/ArticleViewChs/Practicechs.vue

@@ -138,7 +138,9 @@
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              width:
+                                pItem.chs[wIndex].trim() === '' ? '6px' : ''
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -191,7 +193,11 @@
                             fontFamily:
                               item.sentArr[pIndex + 1].config.fontFamily,
                             height: '28px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            width:
+                              item.sentArr[pIndex + 1].chs.trim() === ''
+                                ? '6px'
+                                : ''
                           }"
                         >
                           {{
@@ -255,7 +261,11 @@
                             fontFamily:
                               item.sentArr[pIndex + 2].config.fontFamily,
                             height: '28px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            width:
+                              item.sentArr[pIndex + 2].chs.trim() === ''
+                                ? '6px'
+                                : ''
                           }"
                         >
                           {{
@@ -323,7 +333,8 @@
                           :style="{
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            width: pItem.chs[wIndex].trim() === '' ? '6px' : ''
                           }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
@@ -942,6 +953,8 @@ export default {
             font-size: 20px;
             line-height: 28px;
             color: rgba(0, 0, 0, 0.45);
+            display: flex;
+            flex-flow: wrap;
             .active {
               color: #de4444;
             }
@@ -987,6 +1000,8 @@ export default {
           font-size: 20px;
           line-height: 28px;
           color: rgba(0, 0, 0, 0.45);
+          display: flex;
+          flex-flow: wrap;
           .active {
             color: #de4444;
           }

src/components/Adult/preview/Voicefullscreen.vue

@@ -283,7 +283,9 @@
                                   ? pItem.config.fontFamily
                                   : '',
                               height: hzSize * 1.17 + 'px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              width:
+                                pItem.chs[wIndex].trim() === '' ? '10px' : ''
                             }"
                             >{{ pItem.chs[wIndex] }}</span
                           >
@@ -364,7 +366,9 @@
                                 ? item[pIndex + 1].config.fontFamily
                                 : '',
                             height: hzSize * 1.17 + 'px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            width:
+                              item[pIndex + 1].chs.trim() === '' ? '10px' : ''
                           }"
                           >{{ item[pIndex + 1].chs }}</span
                         >
@@ -454,7 +458,9 @@
                                 ? item[pIndex + 2].config.fontFamily
                                 : '',
                             height: hzSize * 1.17 + 'px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            width:
+                              item[pIndex + 2].chs.trim() === '' ? '10px' : ''
                           }"
                           >{{ item[pIndex + 2].chs }}</span
                         >
@@ -547,7 +553,8 @@
                                 ? pItem.config.fontFamily
                                 : '',
                             height: hzSize * 1.17 + 'px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            width: pItem.chs[wIndex].trim() === '' ? '10px' : ''
                           }"
                           >{{ pItem.chs[wIndex] }}</span
                         >
@@ -1856,6 +1863,8 @@ export default {
             font-size: 48px;
             line-height: 1.17;
             color: rgba(0, 0, 0, 0.85);
+            display: flex;
+            flex-flow: wrap; // 兼容不是汉字的内容
             &.bottom {
               padding-bottom: 16px;
             }
@@ -1923,6 +1932,8 @@ export default {
           font-size: 48px;
           line-height: 1.17;
           color: rgba(0, 0, 0, 0.85);
+          display: flex;
+          flex-flow: wrap; // 兼容不是汉字的内容
           &.bottom {
             padding-bottom: 16px;
           }