拼音加下划线 标点用勾选字体

src/components/Adult/preview/DialogueArticleViewChs/AnswerModel.vue

@@ -88,7 +88,7 @@
                           chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
                         "
                       >
-                        <span class="NNPE-words-box">
+                        <span class="NNPE-words-box" :style="boxStyle(pItem.config)">
                           <span
                             v-if="item.isHasPY > 0 && pyPosition == 'top'"
                             class="NNPE-pinyin"
@@ -97,6 +97,9 @@
                               pItem.pinyin && noFont.indexOf(pItem.pinyin) > -1
                                 ? 'noFont'
                                 : '',
+                              pItem.config.underLine
+                                  ? 'NNPE-pinyin-underline'
+                                  : '',
                             ]"
                             >{{ pItem.pinyin | handlePY }}</span
                           >
@@ -196,6 +199,9 @@
                             :class="[
                               pItem.className ? pItem.className : '',
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                              pItem.config.underLine
+                                  ? 'NNPE-pinyin-underline'
+                                  : '',
                             ]"
                             >{{ pItem.pinyin | handlePY }}</span
                           >
@@ -203,6 +209,7 @@
                         <span
                           class="NNPE-words-box"
                           v-if="item.wordsList[pIndex + 1]"
+                          :style="boxStyle(item.wordsList[pIndex + 1].config)"
                         >
                           <span
                             v-if="item.isHasPY > 0 && pyPosition == 'top'"
@@ -213,6 +220,9 @@
                               ) > -1
                                 ? 'noFont'
                                 : '',
+                              item.wordsList[pIndex + 1].config.underLine
+                                  ? 'NNPE-pinyin-underline'
+                                  : '',
                             ]"
                             style="text-align: left"
                             >{{
@@ -246,6 +256,9 @@
                               ) > -1
                                 ? 'noFont'
                                 : '',
+                              item.wordsList[pIndex + 1].config.underLine
+                                  ? 'NNPE-pinyin-underline'
+                                  : '',
                             ]"
                             style="text-align: left"
                             >{{
@@ -261,6 +274,7 @@
                             chsFhList.indexOf(item.wordsList[pIndex + 2].chs) >
                               -1
                           "
+                          :style="boxStyle(item.wordsList[pIndex + 2].config)"
                         >
                           <span
                             v-if="
@@ -275,6 +289,9 @@
                               ) > -1
                                 ? 'noFont'
                                 : '',
+                              item.wordsList[pIndex + 2].config.underLine
+                                  ? 'NNPE-pinyin-underline'
+                                  : '',
                             ]"
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
@@ -314,6 +331,9 @@
                               ) > -1
                                 ? 'noFont'
                                 : '',
+                              item.wordsList[pIndex + 2].config.underLine
+                                  ? 'NNPE-pinyin-underline'
+                                  : '',
                             ]"
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
@@ -330,6 +350,9 @@
                             pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                            pItem.config.underLine
+                                  ? 'NNPE-pinyin-underline'
+                                  : '',
                           ]"
                           >{{ pItem.pinyin | handlePY }}</span
                         >
@@ -444,6 +467,9 @@
                             pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                            pItem.config.underLine
+                                  ? 'NNPE-pinyin-underline'
+                                  : '',
                           ]"
                           >{{ pItem.pinyin | handlePY }}</span
                         >
@@ -805,6 +831,14 @@ export default {
         };
       };
     },
+    boxStyle(){
+        return function (config) {
+        let sizeVal = config && config.fontSize ? config.fontSize.replace("px", "") : 20;
+        return {
+          minHeight: Number(sizeVal) + 9 + 22 + "px",
+        };
+      };
+    }
   },
   watch: {},
   //方法集合
@@ -1196,6 +1230,12 @@ export default {
             &.wordActive {
               color: #de4444;
             }
+            &.NNPE-pinyin-underline{
+                text-decoration: underline;
+            }
+            .NNPE-pinyin-underline{
+                text-decoration: underline;
+            }
           }
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
@@ -1252,6 +1292,12 @@ export default {
           &.wordActive {
             color: #de4444;
           }
+          &.NNPE-pinyin-underline{
+            text-decoration: underline;
+          }
+          .NNPE-pinyin-underline{
+            text-decoration: underline;
+          }
         }
         &.NNPE-chs {
           font-family: "FZJCGFKTK";

src/components/Adult/preview/components/OneSentenceTemp.vue

@@ -38,6 +38,7 @@
                   pItem.pinyin && noFont.indexOf(pItem.pinyin) > -1
                     ? 'noFont'
                     : '',
+                  pItem.underLine ? 'NPC-pinyin-underline' : '',
                 ]"
                 >{{ pItem.pinyin | handlePY }}</span
               >
@@ -219,7 +220,7 @@
               <span
                 v-if="pyNumber > 0 && pyPosition == 'bottom'"
                 class="NPC-pinyin"
-                :class="[noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '']"
+                :class="[noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',pItem.underLine ? 'NPC-pinyin-underline' : '',]"
                 >{{ pItem.pinyin | handlePY }}</span
               >
             </span>
@@ -231,6 +232,7 @@
                   noFont.indexOf(detail.wordsList[pIndex + 1].pinyin) > -1
                     ? 'noFont'
                     : '',
+                  detail.wordsList[pIndex + 1].underLine ? 'NPC-pinyin-underline' : '',
                 ]"
                 style="text-align: left"
                 >{{ detail.wordsList[pIndex + 1].pinyin | handlePY }}</span
@@ -252,7 +254,7 @@
                     detail.wordsList[pIndex + 1].fontColor != 'sub'
                       ? detail.wordsList[pIndex + 1].fontColor
                       : '',
-                  fontFamily: pItem.fontFamily,
+                  fontFamily: detail.wordsList[pIndex + 1].fontFamily,
                   lineHeight: (maxFontsize * 3) / 2 + 'px',
                 }"
                 >{{ detail.wordsList[pIndex + 1].chs }}</span
@@ -265,6 +267,7 @@
                   noFont.indexOf(detail.wordsList[pIndex + 1].pinyin) > -1
                     ? 'noFont'
                     : '',
+                  detail.wordsList[pIndex + 1].underLine ? 'NPC-pinyin-underline' : '',
                 ]"
                 style="text-align: left"
                 >{{ detail.wordsList[pIndex + 1].pinyin | handlePY }}</span
@@ -285,6 +288,7 @@
                   noFont.indexOf(detail.wordsList[pIndex + 2].pinyin) > -1
                     ? 'noFont'
                     : '',
+                  detail.wordsList[pIndex + 2].underLine ? 'NPC-pinyin-underline' : '',
                 ]"
                 style="text-align: left"
                 >{{ detail.wordsList[pIndex + 2].pinyin }}</span
@@ -300,7 +304,7 @@
                 :style="{
                   fontSize: pItem.fontSize,
                   color: pItem.fontColor != 'sub' ? pItem.fontColor : '',
-                  fontFamily: pItem.fontFamily,
+                  fontFamily: detail.wordsList[pIndex + 2].fontFamily,
                   lineHeight: (maxFontsize * 3) / 2 + 'px',
                 }"
                 >{{ detail.wordsList[pIndex + 2].chs }}</span
@@ -312,6 +316,7 @@
                   noFont.indexOf(detail.wordsList[pIndex + 2].pinyin) > -1
                     ? 'noFont'
                     : '',
+                  detail.wordsList[pIndex + 2].underLine ? 'NPC-pinyin-underline' : '',
                 ]"
                 style="text-align: left"
                 >{{ detail.wordsList[pIndex + 2].pinyin }}</span
@@ -327,6 +332,7 @@
               :class="[
                 pItem.chs != '“' && pItem.padding ? 'padding' : '',
                 noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                pItem.underLine ? 'NPC-pinyin-underline' : '',
               ]"
               >{{ pItem.pinyin | handlePY }}</span
             >
@@ -511,6 +517,7 @@
               :class="[
                 pItem.chs != '“' && pItem.padding ? 'padding' : '',
                 noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                pItem.underLine ? 'NPC-pinyin-underline' : '',
               ]"
               >{{ pItem.pinyin | handlePY }}</span
             >
@@ -841,6 +848,9 @@ export default {
   &.textLeft {
     text-align: left;
   }
+  &-underline {
+    text-decoration: underline;
+  }
 }
 .NPC-chs {
   font-family: "FZJCGFKTK";