调整移动端问题

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

@@ -131,7 +131,11 @@
                                 pItem.articleSentIndex
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -151,7 +155,8 @@
                             ]"
                             :style="{
                               fontFamily: pItem.config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -166,7 +171,7 @@
                                   pItem.chstimeList[wIndex] &&
                                   curTime >= pItem.chstimeList[wIndex].wordBg &&
                                   curTime < item.timeList[pItem.sentIndex].ed
-                                    ? 'wordActive'
+                                    ? 'active'
                                     : ''
                                 ]"
                                 @click.stop="
@@ -214,7 +219,11 @@
                                 pItem.articleSentIndex
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -247,7 +256,11 @@
                                 pItem.articleSentIndex
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -268,11 +281,10 @@
                                 : '',
                               pItem.chstimeList &&
                               pItem.chstimeList[pItem.leg - 1] &&
-                              curTime >=
-                                pItem.chstimeList[pItem.leg - 1].wordBg &&
+                              curTime >= item.timeList[pItem.sentIndex].bg &&
                               curQue.wordTime &&
                               curTime <= item.timeList[pItem.sentIndex].ed
-                                ? 'wordActive'
+                                ? 'active'
                                 : ''
                             ]"
                             @click.stop="
@@ -291,7 +303,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               width:
                                 item.wordsList[pIndex + 1].chs.trim() === ''
@@ -335,7 +348,11 @@
                                 pItem.articleSentIndex
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -380,7 +397,11 @@
                                 pItem.articleSentIndex
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -401,11 +422,10 @@
                                 : '',
                               pItem.chstimeList &&
                               pItem.chstimeList[pItem.leg - 1] &&
-                              curTime >=
-                                pItem.chstimeList[pItem.leg - 1].wordBg &&
+                              curTime >= item.timeList[pItem.sentIndex].bg &&
                               curQue.wordTime &&
                               curTime <= item.timeList[pItem.sentIndex].ed
-                                ? 'wordActive'
+                                ? 'active'
                                 : ''
                             ]"
                             @click.stop="
@@ -424,7 +444,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               width:
                                 item.wordsList[pIndex + 2].chs.trim() === ''
@@ -468,7 +489,11 @@
                                 pItem.articleSentIndex
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -499,7 +524,11 @@
                               pItem.articleSentIndex
                             )
                           "
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -531,7 +560,7 @@
                                 pItem.chstimeList[wIndex] &&
                                 curTime >= pItem.chstimeList[wIndex].wordBg &&
                                 curTime < item.timeList[pItem.sentIndex].ed
-                                  ? 'wordActive'
+                                  ? 'active'
                                   : ''
                               ]"
                               @click.stop="
@@ -549,7 +578,8 @@
                               "
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
-                                height: '28px',
+                                height: baseSizePhone + 14 + 'px',
+                                lineHeight: baseSizePhone + 14 + 'px',
                                 display: 'inline-block',
                                 width:
                                   pItem.chs[wIndex].trim() === '' ? '6px' : '',
@@ -588,7 +618,11 @@
                               pItem.articleSentIndex
                             )
                           "
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -641,7 +675,11 @@
                     curQue.enPosition == 'top'
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-                :style="{ fontSize: baseSizePhone + 'px' }"
+                :style="{
+                  fontSize: baseSizePhone + 'px',
+                  height: baseSizePhone + 8 + 'px',
+                  lineHeight: baseSizePhone + 8 + 'px'
+                }"
               >
                 {{ item.enwords }}
               </div>
@@ -692,7 +730,11 @@
                                 index
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -731,7 +773,8 @@
                               "
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
-                                height: '28px',
+                                height: baseSizePhone + 14 + 'px',
+                                lineHeight: baseSizePhone + 14 + 'px',
                                 display: 'inline-block',
                                 width:
                                   pItem.chs[wIndex].trim() === '' ? '6px' : '',
@@ -767,7 +810,11 @@
                                 index
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -798,7 +845,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -830,7 +881,8 @@
                             :style="{
                               fontFamily:
                                 item.sentArr[pIndex + 1].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               width:
                                 item.sentArr[pIndex + 1].chs.trim() === ''
@@ -873,7 +925,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -911,7 +967,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -943,7 +1003,8 @@
                             :style="{
                               fontFamily:
                                 item.sentArr[pIndex + 2].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               width:
                                 item.sentArr[pIndex + 2].chs.trim() === ''
@@ -986,7 +1047,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -1016,7 +1081,11 @@
                               index
                             )
                           "
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -1058,7 +1127,8 @@
                             "
                             :style="{
                               fontFamily: pItem.config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               width:
                                 pItem.chs[wIndex].trim() === '' ? '6px' : '',
@@ -1095,7 +1165,11 @@
                               index
                             )
                           "
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -1119,7 +1193,11 @@
                     (!curQue.enPosition ||
                       (curQue.enPosition && curQue.enPosition == 'bottom'))
                 "
-                :style="{ fontSize: baseSizePhone + 'px' }"
+                :style="{
+                  fontSize: baseSizePhone + 'px',
+                  height: baseSizePhone + 8 + 'px',
+                  lineHeight: baseSizePhone + 8 + 'px'
+                }"
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
               >
                 {{ item.enwords }}

src/components/Adult/phonePreview/ArticleViewChs/PhraseModelChs.vue

@@ -103,7 +103,11 @@
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -122,7 +126,8 @@
                             "
                             :style="{
                               fontFamily: pItem.config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -144,7 +149,11 @@
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -170,7 +179,11 @@
                                 item.wordsList[pIndex + 1].pinyin
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -187,7 +200,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -220,7 +234,11 @@
                                 item.wordsList[pIndex + 1].pinyin
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -253,7 +271,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -276,7 +298,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -303,7 +326,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -328,7 +355,11 @@
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -348,7 +379,8 @@
                           "
                           :style="{
                             fontFamily: pItem.config.fontFamily,
-                            height: '28px',
+                            height: baseSizePhone + 14 + 'px',
+                            lineHeight: baseSizePhone + 14 + 'px',
                             display: 'inline-block',
                             fontSize: baseSizePhone + 6 + 'px'
                           }"
@@ -371,7 +403,11 @@
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -411,7 +447,11 @@
                     curQue.enPosition == 'top'
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-                :style="{ fontSize: baseSizePhone + 'px' }"
+                :style="{
+                  fontSize: baseSizePhone + 'px',
+                  height: baseSizePhone + 8 + 'px',
+                  lineHeight: baseSizePhone + 8 + 'px'
+                }"
               >
                 {{ item.enwords }}
               </div>
@@ -451,7 +491,11 @@
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -477,7 +521,8 @@
                               "
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
-                                height: '28px',
+                                height: baseSizePhone + 14 + 'px',
+                                lineHeight: baseSizePhone + 14 + 'px',
                                 display: 'inline-block',
                                 fontSize: baseSizePhone + 6 + 'px'
                               }"
@@ -499,7 +544,11 @@
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -520,7 +569,11 @@
                             @click.stop="
                               viewNotes($event, item.sentArr[pIndex + 1].pinyin)
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -538,7 +591,8 @@
                             :style="{
                               fontFamily:
                                 item.sentArr[pIndex + 1].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -567,7 +621,11 @@
                             @click.stop="
                               viewNotes($event, item.sentArr[pIndex + 1].pinyin)
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -595,7 +653,11 @@
                             @click.stop="
                               viewNotes($event, item.sentArr[pIndex + 2].pinyin)
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -613,7 +675,8 @@
                             :style="{
                               fontFamily:
                                 item.sentArr[pIndex + 2].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -642,7 +705,11 @@
                             @click.stop="
                               viewNotes($event, item.sentArr[pIndex + 1].pinyin)
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -660,7 +727,11 @@
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -688,7 +759,8 @@
                             "
                             :style="{
                               fontFamily: pItem.config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -711,7 +783,11 @@
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -736,7 +812,11 @@
                       (curQue.enPosition && curQue.enPosition == 'bottom'))
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-                :style="{ fontSize: baseSizePhone + 'px' }"
+                :style="{
+                  fontSize: baseSizePhone + 'px',
+                  height: baseSizePhone + 8 + 'px',
+                  lineHeight: baseSizePhone + 8 + 'px'
+                }"
               >
                 {{ item.enwords }}
               </div>

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

@@ -78,7 +78,11 @@
                   curQue.enPosition &&
                   curQue.enPosition == 'top'
               "
-              :style="{ fontSize: baseSizePhone + 'px' }"
+              :style="{
+                fontSize: baseSizePhone + 'px',
+                height: baseSizePhone + 8 + 'px',
+                lineHeight: baseSizePhone + 8 + 'px'
+              }"
               :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
             >
               {{ item.enwords }}
@@ -114,7 +118,11 @@
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -139,7 +147,8 @@
                             ]"
                             :style="{
                               fontFamily: pItem.config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               width:
                                 pItem.chs[wIndex].trim() === '' ? '6px' : '',
@@ -162,7 +171,11 @@
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -179,7 +192,11 @@
                               : ''
                           ]"
                           style="text-align: left"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ item.sentArr[pIndex + 1].pinyin }}</span
                         >
                       </template>
@@ -201,7 +218,8 @@
                           :style="{
                             fontFamily:
                               item.sentArr[pIndex + 1].config.fontFamily,
-                            height: '28px',
+                            height: baseSizePhone + 14 + 'px',
+                            lineHeight: baseSizePhone + 14 + 'px',
                             display: 'inline-block',
                             width:
                               item.sentArr[pIndex + 1].chs.trim() === ''
@@ -230,7 +248,11 @@
                               : ''
                           ]"
                           style="text-align: left"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ item.sentArr[pIndex + 1].pinyin }}</span
                         >
                       </template>
@@ -254,7 +276,11 @@
                               : ''
                           ]"
                           style="text-align: left"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ item.sentArr[pIndex + 2].pinyin }}</span
                         >
                       </template>
@@ -276,7 +302,8 @@
                           :style="{
                             fontFamily:
                               item.sentArr[pIndex + 2].config.fontFamily,
-                            height: '28px',
+                            height: baseSizePhone + 14 + 'px',
+                            lineHeight: baseSizePhone + 14 + 'px',
                             display: 'inline-block',
                             width:
                               item.sentArr[pIndex + 2].chs.trim() === ''
@@ -305,7 +332,11 @@
                               : ''
                           ]"
                           style="text-align: left"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ item.sentArr[pIndex + 2].pinyin }}</span
                         >
                       </template>
@@ -322,7 +353,11 @@
                           sentIndex == index ? 'wordBlank' : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                         ]"
-                        :style="{ fontSize: baseSizePhone + 'px' }"
+                        :style="{
+                          fontSize: baseSizePhone + 'px',
+                          height: baseSizePhone + 8 + 'px',
+                          lineHeight: baseSizePhone + 8 + 'px'
+                        }"
                         >{{ pItem.pinyin }}</span
                       >
                     </template>
@@ -351,7 +386,8 @@
                           ]"
                           :style="{
                             fontFamily: pItem.config.fontFamily,
-                            height: '28px',
+                            height: baseSizePhone + 14 + 'px',
+                            lineHeight: baseSizePhone + 14 + 'px',
                             display: 'inline-block',
                             width: pItem.chs[wIndex].trim() === '' ? '6px' : '',
                             fontSize: baseSizePhone + 6 + 'px'
@@ -374,7 +410,11 @@
                           sentIndex == index ? 'wordBlank' : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                         ]"
-                        :style="{ fontSize: baseSizePhone + 'px' }"
+                        :style="{
+                          fontSize: baseSizePhone + 'px',
+                          height: baseSizePhone + 8 + 'px',
+                          lineHeight: baseSizePhone + 8 + 'px'
+                        }"
                         >{{ pItem.pinyin }}</span
                       >
                     </template>
@@ -398,7 +438,11 @@
                   (!curQue.enPosition ||
                     (curQue.enPosition && curQue.enPosition == 'bottom'))
               "
-              :style="{ fontSize: baseSizePhone + 'px' }"
+              :style="{
+                fontSize: baseSizePhone + 'px',
+                height: baseSizePhone + 8 + 'px',
+                lineHeight: baseSizePhone + 8 + 'px'
+              }"
               :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
             >
               {{ item.enwords }}

src/components/Adult/phonePreview/ArticleViewChs/WordModelChs.vue

@@ -98,7 +98,11 @@
                             "
                             class="NNPE-pinyin"
                             :class="[pItem.className ? pItem.className : '']"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -119,7 +123,8 @@
                             ]"
                             :style="{
                               fontFamily: pItem.config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -137,7 +142,11 @@
                             "
                             class="NNPE-pinyin"
                             :class="[pItem.className ? pItem.className : '']"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -155,7 +164,11 @@
                             "
                             class="NNPE-pinyin"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -173,7 +186,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -193,7 +207,11 @@
                             "
                             class="NNPE-pinyin"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -225,7 +243,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -255,7 +277,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -282,7 +305,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -299,7 +326,11 @@
                             pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : ''
                           ]"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -318,7 +349,8 @@
                           ]"
                           :style="{
                             fontFamily: pItem.config.fontFamily,
-                            height: '28px',
+                            height: baseSizePhone + 14 + 'px',
+                            lineHeight: baseSizePhone + 14 + 'px',
                             display: 'inline-block',
                             fontSize: baseSizePhone + 6 + 'px'
                           }"
@@ -340,7 +372,11 @@
                             pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : ''
                           ]"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -380,7 +416,11 @@
                     curQue.enPosition == 'top'
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-                :style="{ fontSize: baseSizePhone + 'px' }"
+                :style="{
+                  fontSize: baseSizePhone + 'px',
+                  height: baseSizePhone + 8 + 'px',
+                  lineHeight: baseSizePhone + 8 + 'px'
+                }"
               >
                 {{ item.enwords }}
               </div>
@@ -418,7 +458,11 @@
                               sentIndex == index ? 'wordBlank' : '',
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -436,7 +480,8 @@
                               :class="[]"
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
-                                height: '28px',
+                                height: baseSizePhone + 14 + 'px',
+                                lineHeight: baseSizePhone + 14 + 'px',
                                 display: 'inline-block',
                                 fontSize: baseSizePhone + 6 + 'px'
                               }"
@@ -457,7 +502,11 @@
                               sentIndex == index ? 'wordBlank' : '',
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -480,7 +529,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -490,7 +543,8 @@
                             :style="{
                               fontFamily:
                                 item.sentArr[pIndex + 1].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -516,7 +570,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -544,7 +602,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -554,7 +616,8 @@
                             :style="{
                               fontFamily:
                                 item.sentArr[pIndex + 2].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -580,7 +643,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -597,7 +664,11 @@
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -617,7 +688,8 @@
                             :class="[]"
                             :style="{
                               fontFamily: pItem.config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -639,7 +711,11 @@
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -664,7 +740,11 @@
                       (curQue.enPosition && curQue.enPosition == 'bottom'))
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-                :style="{ fontSize: baseSizePhone + 'px' }"
+                :style="{
+                  fontSize: baseSizePhone + 'px',
+                  height: baseSizePhone + 8 + 'px',
+                  lineHeight: baseSizePhone + 8 + 'px'
+                }"
               >
                 {{ item.enwords }}
               </div>

src/components/Adult/phonePreview/DialogueArticleViewChs/NormalModelChs.vue

@@ -55,7 +55,11 @@
         <p
           :class="['notice', isHasRemark ? 'hasRemark' : '']"
           v-if="curQue.notice"
-          :style="{ fontSize: baseSizePhone + 'px' }"
+          :style="{
+            fontSize: baseSizePhone + 'px',
+            minHeight: baseSizePhone + 8 + 'px',
+            lineHeight: baseSizePhone + 8 + 'px'
+          }"
         >
           {{ curQue.notice }}
         </p>
@@ -92,7 +96,11 @@
               >
                 <span
                   class="pinyin"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                   >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
                 >
                 <span
@@ -117,7 +125,11 @@
                       curQue.enPosition == 'top'
                   "
                   class="enwords"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -182,7 +194,11 @@
                                   item.timeList[pItem.sentIndex].ed
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span class="NNPE-chs">
@@ -214,7 +230,8 @@
                                 "
                                 :style="{
                                   fontFamily: pItem.config.fontFamily,
-                                  height: '28px',
+                                  height: baseSizePhone + 14 + 'px',
+                                  lineHeight: baseSizePhone + 14 + 'px',
                                   display: 'inline-block',
                                   fontSize: baseSizePhone + 6 + 'px'
                                 }"
@@ -250,7 +267,11 @@
                                   item.timeList[pItem.sentIndex].ed
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -283,7 +304,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -316,7 +341,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -356,7 +382,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -401,7 +431,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -433,7 +467,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -473,7 +508,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -504,7 +543,11 @@
                                 item.timeList[pItem.sentIndex].ed
                             )
                           "
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
 
@@ -545,7 +588,8 @@
                               "
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
-                                height: '28px',
+                                height: baseSizePhone + 14 + 'px',
+                                lineHeight: baseSizePhone + 14 + 'px',
                                 display: 'inline-block',
                                 fontSize: baseSizePhone + 6 + 'px'
                               }"
@@ -582,7 +626,11 @@
                                 item.timeList[pItem.sentIndex].ed
                             )
                           "
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -606,7 +654,11 @@
                         (curQue.enPosition && curQue.enPosition == 'bottom'))
                   "
                   class="enwords"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                 >
                   {{ item.enwords }}
                 </div>

src/components/Adult/phonePreview/DialogueArticleViewChs/PhraseModelChs.vue

@@ -52,7 +52,11 @@
         <p
           :class="['notice', isHasRemark ? 'hasRemark' : '']"
           v-if="curQue.notice"
-          :style="{ fontSize: baseSizePhone + 'px' }"
+          :style="{
+            fontSize: baseSizePhone + 'px',
+            minHeight: baseSizePhone + 8 + 'px',
+            lineHeight: baseSizePhone + 8 + 'px'
+          }"
         >
           {{ curQue.notice }}
         </p>
@@ -78,7 +82,11 @@
               >
                 <span
                   class="pinyin"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                   >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
                 >
                 <span
@@ -99,7 +107,11 @@
                       curQue.enPosition == 'top'
                   "
                   class="enwords"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -142,7 +154,11 @@
                               noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -161,7 +177,8 @@
                             "
                             :style="{
                               fontFamily: pItem.config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -183,7 +200,11 @@
                               noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -209,7 +230,11 @@
                                 item.wordsList[pIndex + 1].pinyin
                               )
                             "
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -226,7 +251,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -259,7 +285,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -297,7 +327,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -324,7 +358,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -357,7 +392,11 @@
                               )
                             "
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -375,7 +414,11 @@
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
                         >
@@ -399,7 +442,8 @@
                           "
                           :style="{
                             fontFamily: pItem.config.fontFamily,
-                            height: '28px',
+                            height: baseSizePhone + 14 + 'px',
+                            lineHeight: baseSizePhone + 14 + 'px',
                             display: 'inline-block',
                             fontSize: baseSizePhone + 6 + 'px'
                           }"
@@ -421,7 +465,11 @@
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
                         >
@@ -446,7 +494,11 @@
                         (curQue.enPosition && curQue.enPosition == 'bottom'))
                   "
                   class="enwords"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                 >
                   {{ item.enwords }}
                 </div>

src/components/Adult/phonePreview/DialogueArticleViewChs/Practicechs.vue

@@ -60,7 +60,11 @@
         class="notice"
         v-if="curQue.notice"
         style="padding-top: 24px"
-        :style="{ fontSize: baseSizePhone + 'px' }"
+        :style="{
+          fontSize: baseSizePhone + 'px',
+          minHeight: baseSizePhone + 8 + 'px',
+          lineHeight: baseSizePhone + 8 + 'px'
+        }"
       >
         {{ curQue.notice }}
       </p>
@@ -118,7 +122,11 @@
                         ? 'color85'
                         : 'color45'
                     ]"
-                    :style="{ fontSize: baseSizePhone + 'px' }"
+                    :style="{
+                      fontSize: baseSizePhone + 'px',
+                      height: baseSizePhone + 8 + 'px',
+                      lineHeight: baseSizePhone + 8 + 'px'
+                    }"
                     >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
                   >
                   <span
@@ -149,7 +157,11 @@
                       curQue.enPosition == 'top'
                   "
                   :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -191,7 +203,11 @@
                                     ? 'noFont'
                                     : ''
                                 ]"
-                                :style="{ fontSize: baseSizePhone + 'px' }"
+                                :style="{
+                                  fontSize: baseSizePhone + 'px',
+                                  height: baseSizePhone + 8 + 'px',
+                                  lineHeight: baseSizePhone + 8 + 'px'
+                                }"
                                 >{{ pItem.pinyin }}</span
                               >
                             </template>
@@ -224,7 +240,8 @@
                                   ]"
                                   :style="{
                                     fontFamily: pItem.config.fontFamily,
-                                    height: '28px',
+                                    height: baseSizePhone + 14 + 'px',
+                                    lineHeight: baseSizePhone + 14 + 'px',
                                     display: 'inline-block',
                                     fontSize: baseSizePhone + 6 + 'px'
                                   }"
@@ -247,7 +264,11 @@
                                     ? 'noFont'
                                     : ''
                                 ]"
-                                :style="{ fontSize: baseSizePhone + 'px' }"
+                                :style="{
+                                  fontSize: baseSizePhone + 'px',
+                                  height: baseSizePhone + 8 + 'px',
+                                  lineHeight: baseSizePhone + 8 + 'px'
+                                }"
                                 >{{ pItem.pinyin }}</span
                               >
                             </template>
@@ -266,7 +287,11 @@
                                     : ''
                                 ]"
                                 style="text-align: left"
-                                :style="{ fontSize: baseSizePhone + 'px' }"
+                                :style="{
+                                  fontSize: baseSizePhone + 'px',
+                                  height: baseSizePhone + 8 + 'px',
+                                  lineHeight: baseSizePhone + 8 + 'px'
+                                }"
                                 >{{ item.sentArr[pIndex + 1].pinyin }}</span
                               >
                             </template>
@@ -287,7 +312,8 @@
                                 :style="{
                                   fontFamily:
                                     item.sentArr[pIndex + 1].config.fontFamily,
-                                  height: '28px',
+                                  height: baseSizePhone + 14 + 'px',
+                                  lineHeight: baseSizePhone + 14 + 'px',
                                   display: 'inline-block',
                                   fontSize: baseSizePhone + 6 + 'px'
                                 }"
@@ -314,7 +340,11 @@
                                     : ''
                                 ]"
                                 style="text-align: left"
-                                :style="{ fontSize: baseSizePhone + 'px' }"
+                                :style="{
+                                  fontSize: baseSizePhone + 'px',
+                                  height: baseSizePhone + 8 + 'px',
+                                  lineHeight: baseSizePhone + 8 + 'px'
+                                }"
                                 >{{ item.sentArr[pIndex + 1].pinyin }}</span
                               >
                             </template>
@@ -342,7 +372,11 @@
                                     : ''
                                 ]"
                                 style="text-align: left"
-                                :style="{ fontSize: baseSizePhone + 'px' }"
+                                :style="{
+                                  fontSize: baseSizePhone + 'px',
+                                  height: baseSizePhone + 8 + 'px',
+                                  lineHeight: baseSizePhone + 8 + 'px'
+                                }"
                                 >{{ item.sentArr[pIndex + 2].pinyin }}</span
                               >
                             </template>
@@ -363,7 +397,8 @@
                                 :style="{
                                   fontFamily:
                                     item.sentArr[pIndex + 2].config.fontFamily,
-                                  height: '28px',
+                                  height: baseSizePhone + 14 + 'px',
+                                  lineHeight: baseSizePhone + 14 + 'px',
                                   display: 'inline-block',
                                   fontSize: baseSizePhone + 6 + 'px'
                                 }"
@@ -390,7 +425,11 @@
                                     : ''
                                 ]"
                                 style="text-align: left"
-                                :style="{ fontSize: baseSizePhone + 'px' }"
+                                :style="{
+                                  fontSize: baseSizePhone + 'px',
+                                  height: baseSizePhone + 8 + 'px',
+                                  lineHeight: baseSizePhone + 8 + 'px'
+                                }"
                                 >{{ item.sentArr[pIndex + 2].pinyin }}</span
                               >
                             </template>
@@ -414,7 +453,11 @@
                                     ? 'noFont'
                                     : ''
                                 ]"
-                                :style="{ fontSize: baseSizePhone + 'px' }"
+                                :style="{
+                                  fontSize: baseSizePhone + 'px',
+                                  height: baseSizePhone + 8 + 'px',
+                                  lineHeight: baseSizePhone + 8 + 'px'
+                                }"
                                 >{{ pItem.pinyin }}</span
                               >
                             </template>
@@ -449,7 +492,8 @@
                                 ]"
                                 :style="{
                                   fontFamily: pItem.config.fontFamily,
-                                  height: '28px',
+                                  height: baseSizePhone + 14 + 'px',
+                                  lineHeight: baseSizePhone + 14 + 'px',
                                   display: 'inline-block',
                                   fontSize: baseSizePhone + 6 + 'px'
                                 }"
@@ -471,7 +515,11 @@
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : ''
                                 ]"
-                                :style="{ fontSize: baseSizePhone + 'px' }"
+                                :style="{
+                                  fontSize: baseSizePhone + 'px',
+                                  height: baseSizePhone + 8 + 'px',
+                                  lineHeight: baseSizePhone + 8 + 'px'
+                                }"
                                 >{{ pItem.pinyin }}</span
                               >
                             </template>
@@ -498,7 +546,11 @@
                         (curQue.enPosition && curQue.enPosition == 'bottom'))
                   "
                   :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                 >
                   {{ item.enwords }}
                 </div>

src/components/Adult/phonePreview/DialogueArticleViewChs/WordModelChs.vue

@@ -52,7 +52,11 @@
         <p
           class="notice"
           v-if="curQue.notice"
-          :style="{ fontSize: baseSizePhone + 'px' }"
+          :style="{
+            fontSize: baseSizePhone + 'px',
+            minHeight: baseSizePhone + 8 + 'px',
+            lineHeight: baseSizePhone + 8 + 'px'
+          }"
         >
           {{ curQue.notice }}
         </p>
@@ -78,7 +82,11 @@
               >
                 <span
                   class="pinyin"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                   >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
                 >
                 <span
@@ -99,7 +107,11 @@
                       curQue.enPosition == 'top'
                   "
                   class="enwords"
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -143,7 +155,11 @@
                               pItem.className ? pItem.className : '',
                               noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                             ]"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -158,7 +174,8 @@
                             ]"
                             :style="{
                               fontFamily: pItem.config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -179,7 +196,11 @@
                               pItem.className ? pItem.className : '',
                               noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                             ]"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -204,7 +225,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -213,7 +238,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -240,7 +266,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -272,7 +302,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -295,7 +329,8 @@
                             :style="{
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
-                              height: '28px',
+                              height: baseSizePhone + 14 + 'px',
+                              lineHeight: baseSizePhone + 14 + 'px',
                               display: 'inline-block',
                               fontSize: baseSizePhone + 6 + 'px'
                             }"
@@ -322,7 +357,11 @@
                                 : ''
                             ]"
                             style="text-align: left"
-                            :style="{ fontSize: baseSizePhone + 'px' }"
+                            :style="{
+                              fontSize: baseSizePhone + 'px',
+                              height: baseSizePhone + 8 + 'px',
+                              lineHeight: baseSizePhone + 8 + 'px'
+                            }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -341,7 +380,11 @@
                             noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click="showWordDetail($event, pItem)"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -360,7 +403,8 @@
                           @click="showWordDetail($event, pItem)"
                           :style="{
                             fontFamily: pItem.config.fontFamily,
-                            height: '28px',
+                            height: baseSizePhone + 14 + 'px',
+                            lineHeight: baseSizePhone + 14 + 'px',
                             display: 'inline-block',
                             fontSize: baseSizePhone + 6 + 'px'
                           }"
@@ -383,7 +427,11 @@
                             noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click="showWordDetail($event, pItem)"
-                          :style="{ fontSize: baseSizePhone + 'px' }"
+                          :style="{
+                            fontSize: baseSizePhone + 'px',
+                            height: baseSizePhone + 8 + 'px',
+                            lineHeight: baseSizePhone + 8 + 'px'
+                          }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -406,7 +454,11 @@
                       (!curQue.enPosition ||
                         (curQue.enPosition && curQue.enPosition == 'bottom'))
                   "
-                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  :style="{
+                    fontSize: baseSizePhone + 'px',
+                    height: baseSizePhone + 8 + 'px',
+                    lineHeight: baseSizePhone + 8 + 'px'
+                  }"
                   class="enwords"
                 >
                   {{ item.enwords }}

src/components/Adult/phonePreview/Voicefullscreen.vue

@@ -872,6 +872,7 @@
           :ed="wordeds"
           :isFull="true"
           :baseSizePhone="baseSizePhone"
+          pageFrom="fullscreen"
         />
       </div>
     </template>

src/components/Adult/phonePreview/components/Freewrite.vue

@@ -22,7 +22,7 @@
       </div>
     </div>
 
-    <div class="imgsave">
+    <!-- <div class="imgsave">
       <div class="image">
         <div
           :class="['character-target-div', i == imgIndex ? 'select' : '']"
@@ -43,23 +43,9 @@
         >
           <img src="../../../../assets/NPC/word-remove.png" alt="" />
         </div>
-        <!-- 
-                  @mouseover="saveShow = true"
-          @mouseout="saveShow = false"
-         -->
-        <!-- <div :class="['xj', saveShow ? 'click' : '']">
-          <img
-            @click="handleGenerate"
-            :src="
-              saveShow
-                ? require('../../../../assets/NPC/xj-xz.png')
-                : require('../../../../assets/NPC/xj.png')
-            "
-            alt=""
-          />
-        </div> -->
+        
       </div>
-    </div>
+    </div> -->
     <div class="record-notice" v-if="isNotice">最多保存5条记录</div>
   </div>
 </template>

src/components/Adult/phonePreview/components/Practice.vue

@@ -26,8 +26,15 @@
         <el-tab-pane label="简体"> </el-tab-pane>
         <el-tab-pane label="繁体"> </el-tab-pane>
       </el-tabs>
-      <div class="tab-box tab-box-phone">
-        <div class="tab-box_0" :class="[isShow == '0' ? 'z-top' : '']">
+      <div
+        class="tab-box tab-box-phone"
+        :class="[pageFrom && pageFrom === 'fullscreen' ? 'tab-box-full' : '']"
+      >
+        <div
+          class="tab-box_0"
+          :class="[isShow == '0' ? 'z-top' : 'z-none']"
+          v-show="isShow == '0'"
+        >
           <div class="left-content">
             <div class="strockplay">
               <Strockplayredline
@@ -58,11 +65,11 @@
                     :src="
                       themeColor
                         ? themeColor == 'green'
-                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                          ? require('../../../../assets/icon/starfill-16-normal-Green.png')
                           : themeColor == 'brown'
-                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                          : require('../../../../assets/icon/starline-16-normal-red.png')
-                        : require('../../../../assets/icon/starline-16-normal-red.png')
+                          ? require('../../../../assets/icon/starfill-16-normal-Brown.png')
+                          : require('../../../../assets/icon/starfill-16-normal-red.png')
+                        : require('../../../../assets/icon/starfill-16-normal-red.png')
                     "
                     class="practice-icon"
                   />
@@ -87,7 +94,19 @@
           </div>
           <template>
             <div class="right-content">
-              <div class="right-strockred">
+              <div
+                class="right-strockred"
+                :style="{
+                  width:
+                    pageFrom && pageFrom === 'fullscreen'
+                      ? fullWidth + 'px'
+                      : '',
+                  height:
+                    pageFrom && pageFrom === 'fullscreen'
+                      ? fullWidth + 'px'
+                      : ''
+                }"
+              >
                 <template v-if="navIndex == 0">
                   <Strockred
                     :Book_text="cur.stem[0].con"
@@ -132,7 +151,7 @@
             </div>
           </template>
         </div>
-        <div class="tab-box_1" :class="[isShow == '1' ? 'z-top' : '']">
+        <div class="tab-box_1" :class="[isShow == '1' ? 'z-top' : 'z-none']">
           <div class="left-content">
             <div class="strockplay">
               <Strockplayredline
@@ -143,7 +162,19 @@
                 v-if="isShow === '1'"
               />
             </div>
-            <div class="left-content-pra"></div>
+            <div class="left-content-pra">
+              <div>
+                <span v-if="item.pinyin">{{ item.pinyin.toLowerCase() }}</span>
+                <div style="margin-left: 4px" v-if="mp3Url">
+                  <Audio
+                    :mp3="mp3Url ? mp3Url : ''"
+                    :themeColor="themeColor"
+                    :bg="bg"
+                    :ed="ed"
+                  />
+                </div>
+              </div>
+            </div>
             <div class="footer" v-if="TaskModel != 'ANSWER'">
               <div class="bg-box" @click="handleColl">
                 <template v-if="collFlag">
@@ -151,11 +182,11 @@
                     :src="
                       themeColor
                         ? themeColor == 'green'
-                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                          ? require('../../../../assets/icon/starfill-16-normal-Green.png')
                           : themeColor == 'brown'
-                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                          : require('../../../../assets/icon/starline-16-normal-red.png')
-                        : require('../../../../assets/icon/starline-16-normal-red.png')
+                          ? require('../../../../assets/icon/starfill-16-normal-Brown.png')
+                          : require('../../../../assets/icon/starfill-16-normal-red.png')
+                        : require('../../../../assets/icon/starfill-16-normal-red.png')
                     "
                     class="practice-icon"
                   />
@@ -165,11 +196,11 @@
                     :src="
                       themeColor
                         ? themeColor == 'green'
-                          ? require('../../../../assets/icon/starfill-16-normal-Green.png')
+                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
                           : themeColor == 'brown'
-                          ? require('../../../../assets/icon/starfill-16-normal-Brown.png')
-                          : require('../../../../assets/icon/starfill-16-normal-red.png')
-                        : require('../../../../assets/icon/starfill-16-normal-red.png')
+                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                          : require('../../../../assets/icon/starline-16-normal-red.png')
+                        : require('../../../../assets/icon/starline-16-normal-red.png')
                     "
                     class="practice-icon"
                   />
@@ -180,7 +211,19 @@
           </div>
           <template>
             <div class="right-content">
-              <div class="right-strockred">
+              <div
+                class="right-strockred"
+                :style="{
+                  width:
+                    pageFrom && pageFrom === 'fullscreen'
+                      ? fullWidth + 'px'
+                      : '',
+                  height:
+                    pageFrom && pageFrom === 'fullscreen'
+                      ? fullWidth + 'px'
+                      : ''
+                }"
+              >
                 <template v-if="navIndex == 0">
                   <Strockred
                     :Book_text="cur.stem[0].TChinese"
@@ -255,7 +298,8 @@ export default {
     "writeList",
     "bg",
     "ed",
-    "themeColorPhone"
+    "themeColorPhone",
+    "pageFrom"
   ],
   data() {
     return {
@@ -274,7 +318,8 @@ export default {
       thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
       isShow: "0",
       collFlag: false,
-      isPhone: false
+      isPhone: false,
+      fullWidth: 0 // 手机全屏模式下临摹宽度
     };
   },
   computed: {},
@@ -306,8 +351,10 @@ export default {
           }
         };
         LearnWebSI(MethodName, data).then(res => {
-          this.collFlag = true;
-          this.$message.success("收藏成功！");
+          if (res.status === 1) {
+            this.collFlag = true;
+            this.$message.success("收藏成功！");
+          }
         });
       } else {
         this.$message({
@@ -331,8 +378,10 @@ export default {
         ]
       };
       LearnWebSI(MethodName, data).then(res => {
-        this.collFlag = false;
-        this.$message.success("取消成功！");
+        if (res.status === 1) {
+          this.collFlag = false;
+          this.$message.success("取消成功！");
+        }
       });
     },
     //检查收藏状态
@@ -433,6 +482,15 @@ export default {
     _this.checkCollStatus();
     const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
     this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
+
+    if (this.pageFrom && this.pageFrom === "fullscreen") {
+      this.fullWidth = window.innerWidth - 160;
+      this.$forceUpdate();
+    } else if (window.innerWidth > window.innerHeight) {
+      this.pageFrom = "fullscreen";
+      this.fullWidth = window.innerHeight - 160;
+      this.$forceUpdate();
+    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -547,7 +605,7 @@ export default {
       align-items: center;
       padding: 0;
       list-style: none;
-      margin-top: 30px;
+      margin-top: 20px;
       > li {
         height: 34px;
         width: 124px;
@@ -777,6 +835,43 @@ export default {
       }
     }
   }
+  &-full {
+    .left-content {
+      display: block;
+      width: 100px !important;
+      .left-content-pra {
+        width: 84px;
+      }
+      .footer {
+        width: 84px;
+      }
+    }
+    .z-top {
+      display: flex;
+    }
+    .z-none {
+      z-index: -1;
+    }
+  }
+}
+::v-deep
+  .tab-box-full.tab-box-phone
+  .freewrite
+  .strockred
+  .character-target-div {
+  height: 100% !important;
+}
+::v-deep .tab-box-full.tab-box-phone .freewrite .strockred {
+  height: 100% !important;
+}
+::v-deep
+  .tab-box-full.tab-box-phone
+  .freewrite
+  .strockred
+  .character-target-div
+  .vueEsign {
+  height: 100% !important;
+  width: 100% !important;
 }
 .NPC-Big-Book-preview-green {
   .practice {

src/components/Adult/phonePreview/components/WordPhraseDetail.vue

@@ -272,7 +272,9 @@
                   v-if="CurrentList.length === 0"
                   :style="{
                     textAlign: 'center',
-                    fontSize: baseSizePhone - 2 + 'px'
+                    fontSize: baseSizePhone - 2 + 'px',
+                    margin: '0',
+                    padding: ' 16px 0 0 24px'
                   }"
                 >
                   暂无例句

src/components/Adult/phonePreview/components/Wordcard.vue

@@ -185,6 +185,7 @@
         class="practiceBox practiceBoxStrock"
         v-if="isPraShow"
         :modal="false"
+        top="0"
       >
         <!-- <div class="practiceBox practiceBoxStrock" v-if="isPraShow"> -->
         <Practice
@@ -198,6 +199,7 @@
           @changeCurQue="changeCurQue"
           :bg="bg"
           :ed="ed"
+          :pageFrom="pageFrom"
         />
         <!-- </div> -->
       </el-dialog>
@@ -249,7 +251,8 @@ export default {
     "ed",
     "isFull",
     "themeColorPhone",
-    "baseSizePhone"
+    "baseSizePhone",
+    "pageFrom"
   ],
   data() {
     return {
@@ -522,6 +525,10 @@ export default {
       align-items: center;
       padding-top: 0px;
     }
+    ::v-deep .el-dialog {
+      position: absolute;
+      top: 0;
+    }
   }
   .closeBox {
     width: 100%;

src/components/Adult/preview/VoiceMatrixFullscreen.vue

@@ -529,7 +529,26 @@ export default {
       cellTimer: null,
       // 拼音、英文显隐判断
       isShowPY: true,
-      isShowEN: true
+      isShowEN: true,
+      isPad:
+        /(?:iPad)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ) ||
+        /(?:PlayBook)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ) ||
+        (/(?:Android)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ) &&
+          !/(?:Mobile)/.test(
+            navigator.userAgent || navigator.vendor || window.opera
+          )) ||
+        (/(?:Firefox)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ) &&
+          /(?:Tablet)/.test(
+            navigator.userAgent || navigator.vendor || window.opera
+          ))
     };
   },
   computed: {
@@ -598,6 +617,9 @@ export default {
     }
   },
   created() {
+    if (this.isPad) {
+      this.isTopShow = true;
+    }
     document.addEventListener("keyup", this.handleKeyup);
 
     [
@@ -929,7 +951,11 @@ export default {
     },
 
     setTopShow(bool) {
-      this.isTopShow = bool;
+      if (this.isPad) {
+        this.isTopShow = true;
+      } else {
+        this.isTopShow = bool;
+      }
     },
     setBottomShow(bool) {
       if (!this.recordPlaying && !this.isRecording) {
@@ -1403,7 +1429,7 @@ $dark-color-play: #fff2c6;
     align-items: center;
     justify-content: center;
     height: calc(100vh - 272px);
-
+    overflow: auto;
     // 语音矩阵
 
     .matrix {
@@ -1734,7 +1760,8 @@ $dark-color-play: #fff2c6;
   }
 
   &-bottom {
-    height: 136px;
+    // height: 136px;
+    height: 0;
     width: 100%;
 
     display: flex;

src/components/Adult/preview/Voicefullscreen.vue

@@ -996,7 +996,26 @@ export default {
       isCollArr: [],
       enwords: "",
       screenHeight: 0,
-      wordPlayMp3: ""
+      wordPlayMp3: "",
+      isPad:
+        /(?:iPad)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ) ||
+        /(?:PlayBook)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ) ||
+        (/(?:Android)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ) &&
+          !/(?:Mobile)/.test(
+            navigator.userAgent || navigator.vendor || window.opera
+          )) ||
+        (/(?:Firefox)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ) &&
+          /(?:Tablet)/.test(
+            navigator.userAgent || navigator.vendor || window.opera
+          ))
     };
   },
   computed: {
@@ -1064,7 +1083,11 @@ export default {
   //方法集合
   methods: {
     setTopShow(bool) {
-      this.isTopShow = bool;
+      if (this.isPad) {
+        this.isTopShow = true;
+      } else {
+        this.isTopShow = bool;
+      }
     },
     setBottomShow(bool) {
       if (!this.recordPlaying && !this.isRecording) {
@@ -1511,7 +1534,11 @@ export default {
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    if (this.isPad) {
+      this.isTopShow = true;
+    }
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
@@ -1795,8 +1822,9 @@ export default {
     }
     .top-middle {
       display: flex;
-      justify-content: center;
+      justify-content: space-around;
       align-items: center;
+      width: 360px;
       .audio-box {
         width: 56px;
         height: 56px;
@@ -1822,10 +1850,11 @@ export default {
     align-items: center;
 
     cursor: pointer;
-    margin-left: 32px;
+    // margin-left: 32px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
+    flex-shrink: 0;
     &-green {
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(0, 0, 0, 0.1);

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -248,7 +248,9 @@
                   v-if="CurrentList.length === 0"
                   :style="{
                     textAlign: 'center',
-                    fontSize: baseSizePhone - 2 + 'px'
+                    fontSize: baseSizePhone - 2 + 'px',
+                    margin: '0',
+                    padding: ' 16px 0 0 24px'
                   }"
                 >
                   暂无例句

src/components/TreeView.vue

@@ -239,7 +239,26 @@ export default {
   },
   created() {
     const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
-    this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
+    this.isPhone =
+      (regExp.test(navigator.userAgent) && window.innerWidth < 860) ||
+      /(?:iPad)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) ||
+      /(?:PlayBook)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) ||
+      (/(?:Android)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) &&
+        !/(?:Mobile)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        )) ||
+      (/(?:Firefox)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) &&
+        /(?:Tablet)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ));
     this.getList();
     //this.$refs.tree.foldAllAfterMounted = true;
   }

src/views/courseView.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="container">
-    <Header v-if="!isPhone" />
+    <Header v-if="!isPhone && !isPad" />
     <div class="content">
       <div
         id="content-tree"
         :class="[
           fullTree ? 'content-tree-full' : 'content-tree',
-          isPhone ? 'content-tree-phone' : '',
+          isPhone || isPad ? 'content-tree-phone' : '',
           showMenu ? '' : 'content-tree-unfold'
         ]"
         :style="{ background: isPhone && showMenu ? themeColorPhone : '' }"
       >
-        <template v-if="isPhone">
+        <template v-if="isPhone || isPad">
           <div class="toggle-box" :class="[showMenu ? 'toggle-box-fold' : '']">
             <i
               @click="toggleMenu"
@@ -25,7 +25,7 @@
           :change-id="changeId"
           :change-tree-data="changeTreeData"
           :current-tree-i-d="chapterId"
-          v-show="(isPhone && showMenu) || !isPhone"
+          v-show="((isPhone || isPad) && showMenu) || (!isPhone && !isPad)"
         />
       </div>
 
@@ -35,9 +35,13 @@
         :class="[
           'inner',
           fullscreen ? 'inner-full' : '',
-          isPhone ? 'inner-phone' : ''
+          isPhone ? 'inner-phone' : '',
+          isPad ? 'inner-pad' : ''
         ]"
-        :style="{ background: isPhone ? themeColorPhone : '' }"
+        :style="{
+          background: isPhone ? themeColorPhone : '',
+          marginLeft: isPad ? '0' : ''
+        }"
       >
         <el-image
           :src="pictureUrl"
@@ -93,7 +97,7 @@
         />
       </div>
       <a
-        v-if="chapterId && treeFlag && !isPhone"
+        v-if="chapterId && treeFlag && !isPhone && !isPad"
         class="screen-full"
         @click="fullScreen()"
       />
@@ -153,7 +157,7 @@ export default {
       previewType: "previewCheck",
       pictureUrl: "",
       isPhone: false, // 是否是移动端打开
-
+      isPad: false, //是否是平板打开
       showMenu: true, //是否展开菜单
       themeColorPhone: "" // 移动端护眼色
     };
@@ -162,6 +166,25 @@ export default {
     const _this = this;
     const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
     this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
+    this.isPad =
+      /(?:iPad)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) ||
+      /(?:PlayBook)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) ||
+      (/(?:Android)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) &&
+        !/(?:Mobile)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        )) ||
+      (/(?:Firefox)/.test(
+        navigator.userAgent || navigator.vendor || window.opera
+      ) &&
+        /(?:Tablet)/.test(
+          navigator.userAgent || navigator.vendor || window.opera
+        ));
     _this.bookId = this.$route.query.bookId;
     // if (localStorage.getItem("Bookanswer")) {
     //   this.TaskModel = "ANSWER";
@@ -230,24 +253,32 @@ export default {
     changeTreeData(val) {
       this.FatherTreeData = JSON.parse(JSON.stringify(val));
       let nodes = this.FatherTreeData;
-      for (let i = 0; i < nodes.length; i++) {
-        if (nodes[i].is_courseware == "true") {
-          this.changeId(nodes[i].id, "");
-          return false;
-        } else {
-          if (nodes[i].children) {
-            let nodesC = nodes[i].children;
-            for (let j = 0; j < nodesC.length; j++) {
-              if (nodesC[j].is_courseware == "true") {
-                this.changeId(nodesC[j].id, "");
-                return false;
-              } else {
-                if (nodesC[j].children) {
-                  let nodesCs = nodesC[j].children;
-                  for (let l = 0; j < nodesCs.length; l++) {
-                    if (nodesCs[l].is_courseware == "true") {
-                      this.changeId(nodesCs[l].id, "");
-                      return false;
+      if (
+        sessionStorage.getItem("gclsBookId") &&
+        sessionStorage.getItem("gclsBookId") === this.bookId &&
+        sessionStorage.getItem("gclsChapterId")
+      ) {
+        this.changeId(sessionStorage.getItem("gclsChapterId"), "");
+      } else {
+        for (let i = 0; i < nodes.length; i++) {
+          if (nodes[i].is_courseware == "true") {
+            this.changeId(nodes[i].id, "");
+            return false;
+          } else {
+            if (nodes[i].children) {
+              let nodesC = nodes[i].children;
+              for (let j = 0; j < nodesC.length; j++) {
+                if (nodesC[j].is_courseware == "true") {
+                  this.changeId(nodesC[j].id, "");
+                  return false;
+                } else {
+                  if (nodesC[j].children) {
+                    let nodesCs = nodesC[j].children;
+                    for (let l = 0; j < nodesCs.length; l++) {
+                      if (nodesCs[l].is_courseware == "true") {
+                        this.changeId(nodesCs[l].id, "");
+                        return false;
+                      }
                     }
                   }
                 }
@@ -263,7 +294,8 @@ export default {
       _this.chapterId = id;
       _this.chapterName = name;
       _this.isAnswerShow = false;
-
+      sessionStorage.setItem("gclsChapterId", id);
+      sessionStorage.setItem("gclsBookId", this.bookId);
       _this.onGetData();
       if (!_this.treeFlag) {
         _this.fullTree = false;
@@ -272,7 +304,7 @@ export default {
       if (document.getElementById("content-scroll")) {
         document.getElementById("content-scroll").scrollTop = 0;
       }
-      if (_this.isPhone) {
+      if (_this.isPhone || _this.isPad) {
         _this.showMenu = false;
         document.getElementsByClassName("content-tree-phone")[0].scrollTop = 0;
       }
@@ -389,7 +421,8 @@ export default {
       padding-top: 64px;
       z-index: 2;
       background: #fff;
-      &-phone {
+      &-phone,
+      &-pad {
         width: 50%;
         padding-top: 50px;
         z-index: 4;
@@ -427,7 +460,8 @@ export default {
       &.inner-full {
         margin-left: 0;
       }
-      &-phone {
+      &-phone,
+      &-pad {
         margin-left: 0;
         padding: 0;
         width: 100%;
@@ -547,7 +581,8 @@ export default {
         center no-repeat;
       background-size: 32px;
     }
-    .inner-phone {
+    .inner-phone,
+    .inner-pad {
       min-height: 100vh;
       .title-box {
         margin-bottom: 0;