文章 移动端

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

@@ -25,11 +25,12 @@
             :getCurTime="getCurTime"
             :duration="curQue.mp3_list[0].media_duration"
             :mp3Source="curQue.mp3_list[0].source"
-            :width="colLength == 2 ? 200 : isPhone ? 200 : 590"
+            :width="160"
             :ed="ed"
             type="audioLine"
             ref="audioLine"
             @emptyEd="emptyEd"
+            :baseSizePhone="baseSizePhone"
           />
         </template>
       </div>
@@ -130,6 +131,7 @@
                                 pItem.articleSentIndex
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -150,7 +152,8 @@
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                           >
                             <template>
@@ -211,6 +214,7 @@
                                 pItem.articleSentIndex
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -243,6 +247,7 @@
                                 pItem.articleSentIndex
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -291,7 +296,8 @@
                               width:
                                 item.wordsList[pIndex + 1].chs.trim() === ''
                                   ? '6px'
-                                  : ''
+                                  : '',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -329,6 +335,7 @@
                                 pItem.articleSentIndex
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -373,6 +380,7 @@
                                 pItem.articleSentIndex
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -421,7 +429,8 @@
                               width:
                                 item.wordsList[pIndex + 2].chs.trim() === ''
                                   ? '6px'
-                                  : ''
+                                  : '',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -459,6 +468,7 @@
                                 pItem.articleSentIndex
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -489,6 +499,7 @@
                               pItem.articleSentIndex
                             )
                           "
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -541,7 +552,8 @@
                                 height: '28px',
                                 display: 'inline-block',
                                 width:
-                                  pItem.chs[wIndex].trim() === '' ? '6px' : ''
+                                  pItem.chs[wIndex].trim() === '' ? '6px' : '',
+                                fontSize: baseSizePhone + 6 + 'px'
                               }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
@@ -576,6 +588,7 @@
                               pItem.articleSentIndex
                             )
                           "
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -628,6 +641,7 @@
                     curQue.enPosition == 'top'
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                :style="{ fontSize: baseSizePhone + 'px' }"
               >
                 {{ item.enwords }}
               </div>
@@ -678,6 +692,7 @@
                                 index
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -719,7 +734,8 @@
                                 height: '28px',
                                 display: 'inline-block',
                                 width:
-                                  pItem.chs[wIndex].trim() === '' ? '6px' : ''
+                                  pItem.chs[wIndex].trim() === '' ? '6px' : '',
+                                fontSize: baseSizePhone + 6 + 'px'
                               }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
@@ -751,6 +767,7 @@
                                 index
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -781,6 +798,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -817,7 +835,8 @@
                               width:
                                 item.sentArr[pIndex + 1].chs.trim() === ''
                                   ? '6px'
-                                  : ''
+                                  : '',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                           >
                             {{
@@ -854,6 +873,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -891,6 +911,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -927,7 +948,8 @@
                               width:
                                 item.sentArr[pIndex + 2].chs.trim() === ''
                                   ? '6px'
-                                  : ''
+                                  : '',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                           >
                             {{
@@ -964,6 +986,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -993,6 +1016,7 @@
                               index
                             )
                           "
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -1037,7 +1061,8 @@
                               height: '28px',
                               display: 'inline-block',
                               width:
-                                pItem.chs[wIndex].trim() === '' ? '6px' : ''
+                                pItem.chs[wIndex].trim() === '' ? '6px' : '',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -1070,6 +1095,7 @@
                               index
                             )
                           "
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -1093,6 +1119,7 @@
                     (!curQue.enPosition ||
                       (curQue.enPosition && curQue.enPosition == 'bottom'))
                 "
+                :style="{ fontSize: baseSizePhone + 'px' }"
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
               >
                 {{ item.enwords }}
@@ -1130,7 +1157,8 @@ export default {
     "TaskModel",
     "NNPEAnnotationList",
     "colLength",
-    "isPhone"
+    "baseSizePhone",
+    "themeColorPhone"
   ],
   components: {
     AudioLine,

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

@@ -24,8 +24,9 @@
             :mp3="curQue.mp3_list[0].id"
             :getCurTime="getCurTime"
             :mp3Source="curQue.mp3_list[0].source"
-            :width="colLength == 2 ? 200 : isPhone ? 200 : 590"
+            :width="160"
             ref="audioLine"
+            :baseSizePhone="baseSizePhone"
           />
         </template>
       </div>
@@ -102,6 +103,7 @@
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -121,7 +123,8 @@
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -141,6 +144,7 @@
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -166,6 +170,7 @@
                                 item.wordsList[pIndex + 1].pinyin
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -183,7 +188,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -214,6 +220,7 @@
                                 item.wordsList[pIndex + 1].pinyin
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -246,6 +253,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -269,7 +277,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -294,6 +303,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -318,6 +328,7 @@
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -338,7 +349,8 @@
                           :style="{
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            fontSize: baseSizePhone + 6 + 'px'
                           }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
@@ -359,6 +371,7 @@
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -398,6 +411,7 @@
                     curQue.enPosition == 'top'
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                :style="{ fontSize: baseSizePhone + 'px' }"
               >
                 {{ item.enwords }}
               </div>
@@ -437,6 +451,7 @@
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -463,7 +478,8 @@
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
                                 height: '28px',
-                                display: 'inline-block'
+                                display: 'inline-block',
+                                fontSize: baseSizePhone + 6 + 'px'
                               }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
@@ -483,6 +499,7 @@
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -503,6 +520,7 @@
                             @click.stop="
                               viewNotes($event, item.sentArr[pIndex + 1].pinyin)
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -521,7 +539,8 @@
                               fontFamily:
                                 item.sentArr[pIndex + 1].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                           >
                             {{
@@ -548,6 +567,7 @@
                             @click.stop="
                               viewNotes($event, item.sentArr[pIndex + 1].pinyin)
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -575,6 +595,7 @@
                             @click.stop="
                               viewNotes($event, item.sentArr[pIndex + 2].pinyin)
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -593,7 +614,8 @@
                               fontFamily:
                                 item.sentArr[pIndex + 2].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                           >
                             {{
@@ -620,6 +642,7 @@
                             @click.stop="
                               viewNotes($event, item.sentArr[pIndex + 1].pinyin)
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -637,6 +660,7 @@
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -665,7 +689,8 @@
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -686,6 +711,7 @@
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click.stop="viewNotes($event, pItem.pinyin)"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -710,6 +736,7 @@
                       (curQue.enPosition && curQue.enPosition == 'bottom'))
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                :style="{ fontSize: baseSizePhone + 'px' }"
               >
                 {{ item.enwords }}
               </div>
@@ -780,7 +807,7 @@ export default {
     "TaskModel",
     "NNPEAnnotationList",
     "colLength",
-    "isPhone"
+    "baseSizePhone"
   ],
   components: {
     AudioLine,

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

@@ -24,7 +24,7 @@
           :getCurTime="getCurTime"
           ref="audioLine"
           :stopAudio="stopAudio"
-          :width="colLength == 2 ? 175 : isPhone ? 200 : 555"
+          :width="160"
           :mp3Source="curQue.mp3_list[0].source"
           :ed="ed"
           type="audioLine"
@@ -78,6 +78,7 @@
                   curQue.enPosition &&
                   curQue.enPosition == 'top'
               "
+              :style="{ fontSize: baseSizePhone + 'px' }"
               :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
             >
               {{ item.enwords }}
@@ -113,6 +114,7 @@
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -140,7 +142,8 @@
                               height: '28px',
                               display: 'inline-block',
                               width:
-                                pItem.chs[wIndex].trim() === '' ? '6px' : ''
+                                pItem.chs[wIndex].trim() === '' ? '6px' : '',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -159,6 +162,7 @@
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -175,6 +179,7 @@
                               : ''
                           ]"
                           style="text-align: left"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ item.sentArr[pIndex + 1].pinyin }}</span
                         >
                       </template>
@@ -201,7 +206,8 @@
                             width:
                               item.sentArr[pIndex + 1].chs.trim() === ''
                                 ? '6px'
-                                : ''
+                                : '',
+                            fontSize: baseSizePhone + 6 + 'px'
                           }"
                         >
                           {{
@@ -224,6 +230,7 @@
                               : ''
                           ]"
                           style="text-align: left"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ item.sentArr[pIndex + 1].pinyin }}</span
                         >
                       </template>
@@ -247,6 +254,7 @@
                               : ''
                           ]"
                           style="text-align: left"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ item.sentArr[pIndex + 2].pinyin }}</span
                         >
                       </template>
@@ -273,7 +281,8 @@
                             width:
                               item.sentArr[pIndex + 2].chs.trim() === ''
                                 ? '6px'
-                                : ''
+                                : '',
+                            fontSize: baseSizePhone + 6 + 'px'
                           }"
                         >
                           {{
@@ -296,6 +305,7 @@
                               : ''
                           ]"
                           style="text-align: left"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ item.sentArr[pIndex + 2].pinyin }}</span
                         >
                       </template>
@@ -312,6 +322,7 @@
                           sentIndex == index ? 'wordBlank' : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                         ]"
+                        :style="{ fontSize: baseSizePhone + 'px' }"
                         >{{ pItem.pinyin }}</span
                       >
                     </template>
@@ -342,7 +353,8 @@
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
-                            width: pItem.chs[wIndex].trim() === '' ? '6px' : ''
+                            width: pItem.chs[wIndex].trim() === '' ? '6px' : '',
+                            fontSize: baseSizePhone + 6 + 'px'
                           }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
@@ -362,6 +374,7 @@
                           sentIndex == index ? 'wordBlank' : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                         ]"
+                        :style="{ fontSize: baseSizePhone + 'px' }"
                         >{{ pItem.pinyin }}</span
                       >
                     </template>
@@ -385,6 +398,7 @@
                   (!curQue.enPosition ||
                     (curQue.enPosition && curQue.enPosition == 'bottom'))
               "
+              :style="{ fontSize: baseSizePhone + 'px' }"
               :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
             >
               {{ item.enwords }}
@@ -402,7 +416,7 @@
           >
             <div class="Soundrecord-content-inner">
               <Soundrecord
-                type="promax"
+                type="normal"
                 class="luyin-box"
                 @getWavblob="getWavblob"
                 @handleParentPlay="handleParentPlay"
@@ -416,6 +430,7 @@
                 :sentIndex="sentIndex"
                 @handleWav="handleWav"
                 v-if="refresh"
+                :baseSizePhone="baseSizePhone"
               />
               <div
                 class="compare-box"
@@ -470,7 +485,7 @@
 <script>
 import { timeStrToSen } from "../../../../utils/index";
 import AudioLine from "../AudioLine.vue";
-import Soundrecord from "../../preview/Soundrecord.vue"; // 录音模板
+import Soundrecord from "../../phonePreview/Soundrecord.vue"; // 录音模板
 import AudioCompare from "../AudioCompare.vue";
 import Voicefullscreen from "../Voicefullscreen.vue";
 export default {
@@ -485,7 +500,7 @@ export default {
     "TaskModel",
     "colLength",
     "isFull",
-    "isPhone"
+    "baseSizePhone"
   ],
   components: {
     AudioLine,
@@ -1034,13 +1049,13 @@ export default {
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      width: 304px;
+      min-width: 154px;
       border-radius: 8px;
-      background: #ffffff;
+      // background: #ffffff;
       padding: 4px 12px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       .luyin-box {
-        width: 280px;
+        width: 120px;
       }
       .compare-box {
         height: 32px;

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

@@ -24,8 +24,9 @@
             :mp3="curQue.mp3_list[0].id"
             :getCurTime="getCurTime"
             :mp3Source="curQue.mp3_list[0].source"
-            :width="colLength == 2 ? 200 : isPhone ? 200 : 590"
+            :width="160"
             ref="audioLine"
+            :baseSizePhone="baseSizePhone"
           />
         </template>
       </div>
@@ -97,6 +98,7 @@
                             "
                             class="NNPE-pinyin"
                             :class="[pItem.className ? pItem.className : '']"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -118,7 +120,8 @@
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -134,6 +137,7 @@
                             "
                             class="NNPE-pinyin"
                             :class="[pItem.className ? pItem.className : '']"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -151,6 +155,7 @@
                             "
                             class="NNPE-pinyin"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -169,7 +174,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -187,6 +193,7 @@
                             "
                             class="NNPE-pinyin"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -218,6 +225,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -248,7 +256,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -273,6 +282,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -289,6 +299,7 @@
                             pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -308,7 +319,8 @@
                           :style="{
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            fontSize: baseSizePhone + 6 + 'px'
                           }"
                           @click="showWordDetail($event, pItem)"
                           >{{
@@ -328,6 +340,7 @@
                             pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -367,6 +380,7 @@
                     curQue.enPosition == 'top'
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                :style="{ fontSize: baseSizePhone + 'px' }"
               >
                 {{ item.enwords }}
               </div>
@@ -404,6 +418,7 @@
                               sentIndex == index ? 'wordBlank' : '',
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -422,7 +437,8 @@
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
                                 height: '28px',
-                                display: 'inline-block'
+                                display: 'inline-block',
+                                fontSize: baseSizePhone + 6 + 'px'
                               }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
@@ -441,6 +457,7 @@
                               sentIndex == index ? 'wordBlank' : '',
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                             ]"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -463,6 +480,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -473,7 +491,8 @@
                               fontFamily:
                                 item.sentArr[pIndex + 1].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                           >
                             {{
@@ -497,6 +516,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -524,6 +544,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -534,7 +555,8 @@
                               fontFamily:
                                 item.sentArr[pIndex + 2].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                           >
                             {{
@@ -558,6 +580,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -574,6 +597,7 @@
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -594,7 +618,8 @@
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -614,6 +639,7 @@
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -638,6 +664,7 @@
                       (curQue.enPosition && curQue.enPosition == 'bottom'))
                 "
                 :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                :style="{ fontSize: baseSizePhone + 'px' }"
               >
                 {{ item.enwords }}
               </div>
@@ -691,7 +718,7 @@ export default {
     "TaskModel",
     "colLength",
     "noFont",
-    "isPhone"
+    "baseSizePhone"
   ],
   components: {
     AudioLine,

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

@@ -1,13 +1,12 @@
 <!--  -->
 <template>
-  <div class="NPC-ArticleView NPC-ArticleView-container">
+  <div class="NPC-ArticleView-phone NPC-ArticleView-container">
     <div class="ArticleView-header">
-      <a class="ArticleView-full" @click="fullScreen">黑板模式</a>
-      <div>
+      <div class="left">
+        <a class="ArticleView-full" @click="fullScreen">黑板模式</a>
         <div
-          class="left"
           @click="submit"
-          :style="{ marginLeft: '104px' }"
+          class="text-fenxi"
           v-if="
             (tokenData &&
               tokenData.popedom_code_list &&
@@ -19,6 +18,7 @@
           文本分析
         </div>
       </div>
+
       <div class="right">
         <template v-if="curQue.checkList.indexOf(1) > -1">
           <el-switch
@@ -57,6 +57,7 @@
           </el-switch>
         </template>
       </div>
+
       <!-- <div class="setting-fontsize">
         <a @click="handleFontsize('-')"
           ><img src="../../../../assets/newImage/common/btn-reduce.png"
@@ -83,7 +84,8 @@
         :TaskModel="TaskModel"
         :NNPEAnnotationList="NNPEAnnotationList"
         :colLength="colLength"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
+        :themeColorPhone="themeColorPhone"
       />
       <PhraseModel
         :curQue="curQue"
@@ -101,7 +103,8 @@
         :NNPEAnnotationList="NNPEAnnotationList"
         :colLength="colLength"
         :NpcNewWordMp3="NpcNewWordMp3"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
+        :themeColorPhone="themeColorPhone"
       />
       <Practice
         :curQue="curQue"
@@ -118,7 +121,8 @@
         :colLength="colLength"
         :NpcNewWordMp3="NpcNewWordMp3"
         :isFull="isFull"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
+        :themeColorPhone="themeColorPhone"
       />
       <WordModel
         :curQue="curQue"
@@ -135,7 +139,8 @@
         @changeConfig="changeConfig"
         :TaskModel="TaskModel"
         :colLength="colLength"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
+        :themeColorPhone="themeColorPhone"
       />
     </div>
     <div class="voice-full-screen" :id="'screen-' + mathNum">
@@ -160,7 +165,7 @@
         @exitFullscreen="exitFullscreen"
         @changeIsFull="changeIsFull"
         :NpcNewWordMp3="NpcNewWordMp3"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
       />
     </div>
   </div>
@@ -186,7 +191,8 @@ export default {
     "NNPEAnnotationList",
     "colLength",
     "NpcNewWordMp3",
-    "isPhone"
+    "baseSizePhone",
+    "themeColorPhone"
   ],
   components: {
     NormalModelChs,
@@ -631,14 +637,12 @@ export default {
 </script>
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
-.NPC-ArticleView {
+.NPC-ArticleView-phone {
   width: 100%;
   &.NPC-ArticleView-container {
     margin-bottom: 24px;
   }
   .ArticleView-full {
-    position: absolute;
-    top: 0px;
     background: url("../../../../assets/NPC/full-screen-red.png") left center
       no-repeat;
     background-size: 20px 20px;
@@ -651,24 +655,28 @@ export default {
     z-index: 1;
   }
   .ArticleView-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
     margin-bottom: 16px;
     position: relative;
-    height: 24px;
+    // height: 24px;
     .left {
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-end;
       cursor: pointer;
       font-size: 16px;
       line-height: 24px;
       font-weight: bold;
-      background: url("../../../../assets/NPC/wbfx-icon.png") left center
-        no-repeat;
-      background-size: 20px;
-      padding-left: 24px;
+      margin-bottom: 10px;
+      .text-fenxi {
+        background: url("../../../../assets/NPC/wbfx-icon.png") left center
+          no-repeat;
+        background-size: 20px;
+        padding-left: 24px;
+        margin-left: 10px;
+      }
       img {
         width: 20px;
         height: 20px;
@@ -677,6 +685,7 @@ export default {
     }
     .right {
       display: flex;
+      justify-content: flex-end;
     }
     .setting-fontsize {
       display: flex;
@@ -702,7 +711,7 @@ export default {
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
-    background: #fff;
+    // background: #fff;
     box-sizing: border-box;
     .aduioLine-box {
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -712,7 +721,7 @@ export default {
 }
 </style>
 <style lang="scss">
-.NPC-ArticleView {
+.NPC-ArticleView-phone {
   .ArticleView-header {
     .el-switch {
       margin-left: 24px;

src/components/Adult/phonePreview/RecordModule.vue

@@ -21,7 +21,7 @@ export default {
   components: {
     Soundrecord
   },
-  props: ["curQue", "TaskModel"],
+  props: ["curQue", "TaskModel", "baseSizePhone"],
   data() {
     //这里存放数据
     return {