对话文章

src/components/Adult/Preview.vue

@@ -577,6 +577,9 @@
                           :col-length="items.length"
                           :NpcNewWordMp3="NpcNewWordMp3"
                           :baseSizePhone="baseSizePhone"
+                          :themeColorPhone="
+                            themeColorPhone[themeColorPhoneIndex]
+                          "
                         />
                       </template>
                       <!-- <template v-if="itemss.type == 'sentence_segword_chs'">
@@ -608,6 +611,9 @@
                           :col-length="items.length"
                           :NpcNewWordMp3="NpcNewWordMp3"
                           :baseSizePhone="baseSizePhone"
+                          :themeColorPhone="
+                            themeColorPhone[themeColorPhoneIndex]
+                          "
                         />
                       </template>
                       <template v-if="itemss.type == 'dialogue_answer_chs'">
@@ -804,7 +810,7 @@
                       <template
                         v-if="itemss.type == 'sentence_listen_read_chs'"
                       >
-                        <SentenceListenRead
+                        <SentenceListenReadPhone
                           v-if="refresh"
                           :cur-que="itemss.data"
                           :theme-color="themeColor"
@@ -1007,7 +1013,7 @@
                     </template>
                   </div>
                 </div>
-                <div
+                <!-- <div
                   v-if="isAnswerItemShow && item.showSubmit"
                   style="text-align: right; padding: 10px 0px"
                 >
@@ -1017,7 +1023,7 @@
                     :style="{ fontSize: baseSizePhone + 'px' }"
                     >{{ submitCn ? submitCn : "查看答案" }}</a
                   >
-                </div>
+                </div> -->
               </div>
             </template>
           </div>
@@ -3319,6 +3325,9 @@ export default {
     padding-bottom: 10px;
     // transform-origin: 0 0; /* 设置变换的原点为元素的左上角 */
     // transform: scale(0.6);
+    .NNPE-tableList-item2 {
+      width: 48% !important;
+    }
     .classTopic-box {
       width: 100%;
       border-radius: 0 0 20px 20px;
@@ -3382,8 +3391,8 @@ export default {
       margin-bottom: 10px;
       gap: 10px;
       .NNPE-tableList-item-image {
-        width: 50% !important;
-        padding-right: 5px;
+        width: 48% !important;
+        // padding-right: 5px;
       }
     }
     .title-little {

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

@@ -24,11 +24,12 @@
             :mp3="curQue.mp3_list[0].id"
             :getCurTime="getCurTime"
             :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>
@@ -54,6 +55,7 @@
         <p
           :class="['notice', isHasRemark ? 'hasRemark' : '']"
           v-if="curQue.notice"
+          :style="{ fontSize: baseSizePhone + 'px' }"
         >
           {{ curQue.notice }}
         </p>
@@ -74,7 +76,11 @@
         {{item.timeList[0].bg}}
         {{item.timeList[item.timeList.length - 1].ed}} -->
           <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
-            <RoleChs :curRole="item.roleDetail" :type="1" />
+            <RoleChs
+              :curRole="item.roleDetail"
+              :type="1"
+              :baseSizePhone="baseSizePhone"
+            />
             <div class="wordsList-box">
               <img
                 :src="articleImg[index]"
@@ -84,12 +90,16 @@
                 class="roleDetail"
                 v-if="item.roleDetail.detail.wordsList.length > 0"
               >
-                <span class="pinyin">{{
-                  item.roleDetail.detail.wordsList | handlePinyin
-                }}</span>
-                <span class="chs">{{
-                  item.roleDetail.detail.wordsList | handleChs
-                }}</span>
+                <span
+                  class="pinyin"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
+                >
+                <span
+                  class="chs"
+                  :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handleChs }}</span
+                >
               </div>
               <div
                 class="para-con"
@@ -107,6 +117,7 @@
                       curQue.enPosition == 'top'
                   "
                   class="enwords"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -171,6 +182,7 @@
                                   item.timeList[pItem.sentIndex].ed
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span class="NNPE-chs">
@@ -203,7 +215,8 @@
                                 :style="{
                                   fontFamily: pItem.config.fontFamily,
                                   height: '28px',
-                                  display: 'inline-block'
+                                  display: 'inline-block',
+                                  fontSize: baseSizePhone + 6 + 'px'
                                 }"
                                 >{{
                                   NumberList.indexOf(pItem.pinyin) == -1
@@ -237,6 +250,7 @@
                                   item.timeList[pItem.sentIndex].ed
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -269,6 +283,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -302,7 +317,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -340,6 +356,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -384,6 +401,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -416,7 +434,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -454,6 +473,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -484,6 +504,7 @@
                                 item.timeList[pItem.sentIndex].ed
                             )
                           "
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
 
@@ -525,7 +546,8 @@
                               :style="{
                                 fontFamily: pItem.config.fontFamily,
                                 height: '28px',
-                                display: 'inline-block'
+                                display: 'inline-block',
+                                fontSize: baseSizePhone + 6 + 'px'
                               }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
@@ -560,6 +582,7 @@
                                 item.timeList[pItem.sentIndex].ed
                             )
                           "
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -583,6 +606,7 @@
                         (curQue.enPosition && curQue.enPosition == 'bottom'))
                   "
                   class="enwords"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -602,6 +626,7 @@
             <RemarkChs
               :remarkDetail="item.remarkDetail"
               :marginTop="item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"
+              :baseSizePhone="baseSizePhone"
             />
           </div>
         </div>
@@ -616,6 +641,7 @@
             :TaskModel="TaskModel"
             :answerRecordList="curQue.Bookanswer.normalModel.recordList"
             @handleWav="handleWav"
+            :baseSizePhone="baseSizePhone"
           />
         </div>
       </div>
@@ -629,7 +655,11 @@
           left: windowWidth > 642 ? '' : '0px'
         }"
       >
-        <Notecard :item="curNoteCon" :changeCard="changeCard" />
+        <Notecard
+          :item="curNoteCon"
+          :changeCard="changeCard"
+          :themeColorPhone="themeColorPhone"
+        />
       </div>
     </template>
   </div>
@@ -654,7 +684,8 @@ export default {
     "config",
     "TaskModel",
     "colLength",
-    "isPhone"
+    "baseSizePhone",
+    "themeColorPhone"
   ],
   components: {
     AudioLine,
@@ -1090,7 +1121,7 @@ export default {
           box-sizing: border-box;
 
           &.hasRemark {
-            width: 553px;
+            width: calc(100% - 120px);
             box-sizing: border-box;
             border-right: 1px rgba(0, 0, 0, 0.1) solid;
           }
@@ -1134,7 +1165,7 @@ export default {
       justify-content: flex-start;
       align-items: flex-start;
       &.hasRemark {
-        width: 553px;
+        width: calc(100% - 120px);
         border-right: 1px rgba(0, 0, 0, 0.1) solid;
         padding: 8px 0px 8px 23px;
       }
@@ -1270,7 +1301,7 @@ export default {
       clear: both;
       overflow: hidden;
       .roleDetail {
-        height: 36px;
+        min-height: 36px;
         display: flex;
         justify-content: flex-start;
         align-items: center;

src/components/Adult/phonePreview/DialogueArticleViewChs/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>
@@ -51,6 +52,7 @@
         <p
           :class="['notice', isHasRemark ? 'hasRemark' : '']"
           v-if="curQue.notice"
+          :style="{ fontSize: baseSizePhone + 'px' }"
         >
           {{ curQue.notice }}
         </p>
@@ -60,7 +62,11 @@
           :key="'detail' + index"
         >
           <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
-            <RoleChs :curRole="item.roleDetail" :type="1" />
+            <RoleChs
+              :curRole="item.roleDetail"
+              :type="1"
+              :baseSizePhone="baseSizePhone"
+            />
             <div class="wordsList-box">
               <img
                 :src="articleImg[index]"
@@ -70,12 +76,16 @@
                 class="roleDetail"
                 v-if="item.roleDetail.detail.wordsList.length > 0"
               >
-                <span class="pinyin">{{
-                  item.roleDetail.detail.wordsList | handlePinyin
-                }}</span>
-                <span class="chs">{{
-                  item.roleDetail.detail.wordsList | handleChs
-                }}</span>
+                <span
+                  class="pinyin"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
+                >
+                <span
+                  class="chs"
+                  :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handleChs }}</span
+                >
               </div>
               <div
                 class="para-con"
@@ -89,6 +99,7 @@
                       curQue.enPosition == 'top'
                   "
                   class="enwords"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -131,6 +142,7 @@
                               noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -150,7 +162,8 @@
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -170,6 +183,7 @@
                               noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                             ]"
                             @click.stop="viewNotes($event, pItem.pinyin)"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -195,6 +209,7 @@
                                 item.wordsList[pIndex + 1].pinyin
                               )
                             "
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -212,7 +227,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -243,6 +259,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -280,6 +297,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -307,7 +325,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -338,6 +357,7 @@
                               )
                             "
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -355,6 +375,7 @@
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
                         >
@@ -379,7 +400,8 @@
                           :style="{
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            fontSize: baseSizePhone + 6 + 'px'
                           }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
@@ -399,6 +421,7 @@
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           @click.stop="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
                         >
@@ -423,6 +446,7 @@
                         (curQue.enPosition && curQue.enPosition == 'bottom'))
                   "
                   class="enwords"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -434,6 +458,7 @@
             <RemarkChs
               :remarkDetail="item.remarkDetail"
               :marginTop="item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"
+              :baseSizePhone="baseSizePhone"
             />
           </div>
         </div>
@@ -472,6 +497,8 @@
           :mp3Url="wordPlayMp3"
           :bg="wordbgs"
           :ed="wordeds"
+          :baseSizePhone="baseSizePhone"
+          :themeColorPhone="themeColorPhone"
         />
       </div>
     </template>
@@ -484,7 +511,12 @@
           left: windowWidth > 642 ? '' : '0px'
         }"
       >
-        <Notecard :item="curNoteCon" :changeCard="changeCard" />
+        <Notecard
+          :item="curNoteCon"
+          :changeCard="changeCard"
+          :baseSizePhone="baseSizePhone"
+          :themeColorPhone="themeColorPhone"
+        />
       </div>
     </template>
   </div>
@@ -513,7 +545,8 @@ export default {
     "TaskModel",
     "colLength",
     "NpcNewWordMp3",
-    "isPhone"
+    "baseSizePhone",
+    "themeColorPhone"
   ],
   components: {
     AudioLine,
@@ -1117,7 +1150,7 @@ export default {
           box-sizing: border-box;
 
           &.hasRemark {
-            width: 553px;
+            width: calc(100% - 120px);
             box-sizing: border-box;
             border-right: 1px rgba(0, 0, 0, 0.1) solid;
           }
@@ -1161,7 +1194,7 @@ export default {
       justify-content: flex-start;
       align-items: flex-start;
       &.hasRemark {
-        width: 553px;
+        width: calc(100% - 120px);
         border-right: 1px rgba(0, 0, 0, 0.1) solid;
         padding: 8px 0px 8px 23px;
       }
@@ -1291,7 +1324,7 @@ export default {
       clear: both;
       overflow: hidden;
       .roleDetail {
-        height: 36px;
+        min-height: 36px;
         display: flex;
         justify-content: flex-start;
         align-items: center;

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

@@ -26,13 +26,14 @@
             :getCurTime="getCurTime"
             ref="audioLine"
             :stopAudio="stopAudio"
-            :width="colLength == 2 ? 175 : isPhone ? 200 : 555"
+            :width="160"
             :isRepeat="isRepeat"
             :mp3Source="curQue.mp3_list[0].source"
             :ed="ed"
             type="audioLine"
             @handleChangeStopAudio="handleChangeStopAudio"
             @emptyEd="emptyEd"
+            :baseSizePhone="baseSizePhone"
           />
         </template>
       </div>
@@ -55,7 +56,12 @@
     </div>
 
     <template v-if="resObj">
-      <p class="notice" v-if="curQue.notice" style="padding-top: 24px">
+      <p
+        class="notice"
+        v-if="curQue.notice"
+        style="padding-top: 24px"
+        :style="{ fontSize: baseSizePhone + 'px' }"
+      >
         {{ curQue.notice }}
       </p>
       <div class="NPC-sentences-list">
@@ -91,6 +97,7 @@
                     : 'rgba(0,0,0,0.45)'
                 "
                 :type="1"
+                :baseSizePhone="baseSizePhone"
               />
             </template>
             <div v-else style="width: 36px; height: 36px"></div>
@@ -111,6 +118,7 @@
                         ? 'color85'
                         : 'color45'
                     ]"
+                    :style="{ fontSize: baseSizePhone + 'px' }"
                     >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
                   >
                   <span
@@ -124,6 +132,7 @@
                         ? 'color85'
                         : 'color45'
                     ]"
+                    :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                     >{{ item.roleDetail.detail.wordsList | handleChs }}</span
                   >
                 </div>
@@ -140,6 +149,7 @@
                       curQue.enPosition == 'top'
                   "
                   :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -181,6 +191,7 @@
                                     ? 'noFont'
                                     : ''
                                 ]"
+                                :style="{ fontSize: baseSizePhone + 'px' }"
                                 >{{ pItem.pinyin }}</span
                               >
                             </template>
@@ -214,7 +225,8 @@
                                   :style="{
                                     fontFamily: pItem.config.fontFamily,
                                     height: '28px',
-                                    display: 'inline-block'
+                                    display: 'inline-block',
+                                    fontSize: baseSizePhone + 6 + 'px'
                                   }"
                                   >{{
                                     NumberList.indexOf(pItem.pinyin) == -1
@@ -235,6 +247,7 @@
                                     ? 'noFont'
                                     : ''
                                 ]"
+                                :style="{ fontSize: baseSizePhone + 'px' }"
                                 >{{ pItem.pinyin }}</span
                               >
                             </template>
@@ -253,6 +266,7 @@
                                     : ''
                                 ]"
                                 style="text-align: left"
+                                :style="{ fontSize: baseSizePhone + 'px' }"
                                 >{{ item.sentArr[pIndex + 1].pinyin }}</span
                               >
                             </template>
@@ -274,7 +288,8 @@
                                   fontFamily:
                                     item.sentArr[pIndex + 1].config.fontFamily,
                                   height: '28px',
-                                  display: 'inline-block'
+                                  display: 'inline-block',
+                                  fontSize: baseSizePhone + 6 + 'px'
                                 }"
                               >
                                 {{
@@ -299,6 +314,7 @@
                                     : ''
                                 ]"
                                 style="text-align: left"
+                                :style="{ fontSize: baseSizePhone + 'px' }"
                                 >{{ item.sentArr[pIndex + 1].pinyin }}</span
                               >
                             </template>
@@ -326,6 +342,7 @@
                                     : ''
                                 ]"
                                 style="text-align: left"
+                                :style="{ fontSize: baseSizePhone + 'px' }"
                                 >{{ item.sentArr[pIndex + 2].pinyin }}</span
                               >
                             </template>
@@ -347,7 +364,8 @@
                                   fontFamily:
                                     item.sentArr[pIndex + 2].config.fontFamily,
                                   height: '28px',
-                                  display: 'inline-block'
+                                  display: 'inline-block',
+                                  fontSize: baseSizePhone + 6 + 'px'
                                 }"
                               >
                                 {{
@@ -372,6 +390,7 @@
                                     : ''
                                 ]"
                                 style="text-align: left"
+                                :style="{ fontSize: baseSizePhone + 'px' }"
                                 >{{ item.sentArr[pIndex + 2].pinyin }}</span
                               >
                             </template>
@@ -395,6 +414,7 @@
                                     ? 'noFont'
                                     : ''
                                 ]"
+                                :style="{ fontSize: baseSizePhone + 'px' }"
                                 >{{ pItem.pinyin }}</span
                               >
                             </template>
@@ -430,7 +450,8 @@
                                 :style="{
                                   fontFamily: pItem.config.fontFamily,
                                   height: '28px',
-                                  display: 'inline-block'
+                                  display: 'inline-block',
+                                  fontSize: baseSizePhone + 6 + 'px'
                                 }"
                                 >{{ pItem.chs[wIndex] }}</span
                               >
@@ -450,6 +471,7 @@
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : ''
                                 ]"
+                                :style="{ fontSize: baseSizePhone + 'px' }"
                                 >{{ pItem.pinyin }}</span
                               >
                             </template>
@@ -476,6 +498,7 @@
                         (curQue.enPosition && curQue.enPosition == 'bottom'))
                   "
                   :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -485,7 +508,7 @@
           <div v-show="sentIndex == index" class="Soundrecord-content">
             <div class="Soundrecord-content-inner">
               <Soundrecord
-                type="promax"
+                type="normal"
                 class="luyin-box"
                 @getWavblob="getWavblob"
                 @handleParentPlay="handleParentPlay"
@@ -499,6 +522,7 @@
                 @handleWav="handleWav"
                 :sentIndex="sentIndex"
                 v-if="refresh"
+                :baseSizePhone="baseSizePhone"
               />
               <div
                 class="compare-box"
@@ -555,7 +579,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 RoleChs from "./RoleChs.vue";
 import AudioCompare from "../AudioCompare.vue";
 import Voicefullscreen from "../Voicefullscreen.vue";
@@ -572,7 +596,7 @@ export default {
     "TaskModel",
     "colLength",
     "NpcNewWordMp3",
-    "isPhone"
+    "baseSizePhone"
   ],
   components: {
     AudioLine,
@@ -1108,7 +1132,7 @@ export default {
       width: 92px;
       height: 40px;
       box-sizing: border-box;
-      padding: 0 12px;
+      padding: 0 5px;
       border-left: 1px solid rgba(0, 0, 0, 0.1);
       > span {
         width: 16px;
@@ -1278,13 +1302,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/DialogueArticleViewChs/RemarkChs.vue

@@ -2,18 +2,45 @@
 <template>
   <div
     class="remarkChs"
-    v-if="remarkDetail && (remarkDetail.chs || remarkDetail.en || (remarkDetail.img_list && remarkDetail.img_list.length>0))"
-    :style="{top:marginTop?marginTop+'px':'0px'}"
+    v-if="
+      remarkDetail &&
+        (remarkDetail.chs ||
+          remarkDetail.en ||
+          (remarkDetail.img_list && remarkDetail.img_list.length > 0))
+    "
+    :style="{ top: marginTop ? marginTop + 'px' : '0px' }"
   >
-    <div class="remark-chs" v-if="remarkDetail.chs">{{ remarkDetail.chs }}</div>
-    <div class="remark-en" v-if="remarkDetail.en">{{ remarkDetail.en }}</div>
-    <div v-if="remarkDetail.img_list && remarkDetail.img_list.length>0" class="remark-img">
-        <el-image
-            :style="{width: remarkDetail.widthNumber ? remarkDetail.widthNumber+'px':'', height: remarkDetail.heightNumber ? remarkDetail.heightNumber+'px':''}"
-            :src="remarkDetail.img_list[0].id"
-            fit="contain"
-            :preview-src-list="[remarkDetail.img_list[0].id]"
-        ></el-image>
+    <div
+      class="remark-chs"
+      v-if="remarkDetail.chs"
+      :style="{ fontSize: baseSizePhone + 'px' }"
+    >
+      {{ remarkDetail.chs }}
+    </div>
+    <div
+      class="remark-en"
+      v-if="remarkDetail.en"
+      :style="{ fontSize: baseSizePhone + 'px' }"
+    >
+      {{ remarkDetail.en }}
+    </div>
+    <div
+      v-if="remarkDetail.img_list && remarkDetail.img_list.length > 0"
+      class="remark-img"
+    >
+      <el-image
+        :style="{
+          width: remarkDetail.widthNumber
+            ? remarkDetail.widthNumber + 'px'
+            : '',
+          height: remarkDetail.heightNumber
+            ? remarkDetail.heightNumber + 'px'
+            : ''
+        }"
+        :src="remarkDetail.img_list[0].id"
+        fit="contain"
+        :preview-src-list="[remarkDetail.img_list[0].id]"
+      ></el-image>
     </div>
   </div>
 </template>
@@ -22,7 +49,7 @@
 export default {
   name: "RemarkChs",
   components: {},
-  props: ["remarkDetail","marginTop"],
+  props: ["remarkDetail", "marginTop", "baseSizePhone"],
   data() {
     return {};
   },
@@ -46,7 +73,7 @@ export default {
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .remarkChs {
-  width: 178px;
+  width: 100px;
   box-sizing: border-box;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
@@ -85,12 +112,12 @@ export default {
     border-radius: 0px 0px 8px 8px;
     word-break: break-word;
   }
-  > .remark-img{
+  > .remark-img {
     width: 100%;
     text-align: center;
-    .el-image{
-        max-width: 178px;
+    .el-image {
+      max-width: 100px;
     }
   }
 }
-</style>
+</style>

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

@@ -4,22 +4,33 @@
     <span
       v-if="curRole.role"
       class="adult-book-input-roleText"
-      :style="{ background: this.curRole.color.touxiang }"
+      :style="{
+        background: this.curRole.color.touxiang,
+        fontSize: baseSizePhone + 6 + 'px'
+      }"
       >{{ curRole.role }}</span
     >
     <img
-      v-else-if="curRole.img_list.length>0"
+      v-else-if="curRole.img_list.length > 0"
       :src="curRole.img_list[0] && curRole.img_list[0].id"
       class="adult-book-input-roleImg"
     />
-    <div class="adult-book-input-roleImg" :class="['adult-book-input-roleImg'+curRole.simpleHead]" v-else-if="curRole.simpleHead!==''"></div>
+    <div
+      class="adult-book-input-roleImg"
+      :class="['adult-book-input-roleImg' + curRole.simpleHead]"
+      v-else-if="curRole.simpleHead !== ''"
+    ></div>
     <template v-if="type != 1 && curRole.detail.wordsList.length > 0">
-      <span class="pinyin" :style="{ color: wordColor }">{{
-        curRole.detail.wordsList | handlePinyin
-      }}</span>
-      <span class="chs" :style="{ color: wordColor }">{{
-        curRole.detail.wordsList | handleChs
-      }}</span>
+      <span
+        class="pinyin"
+        :style="{ color: wordColor, fontSize: baseSizePhone + 'px' }"
+        >{{ curRole.detail.wordsList | handlePinyin }}</span
+      >
+      <span
+        class="chs"
+        :style="{ color: wordColor, fontSize: baseSizePhone + 2 + 'px' }"
+        >{{ curRole.detail.wordsList | handleChs }}</span
+      >
     </template>
   </div>
 </template>
@@ -27,7 +38,7 @@
 <script>
 export default {
   components: {},
-  props: ["curRole", "color", "type"],
+  props: ["curRole", "color", "type", "baseSizePhone"],
   filters: {
     handlePinyin(wordsList) {
       let str = "";
@@ -50,19 +61,19 @@ export default {
         }
       });
       return str;
-    },
+    }
   },
   data() {
     return {};
   },
   computed: {
-    wordColor: function () {
+    wordColor: function() {
       let color = "rgba(0,0,0,0.85)";
       if (this.color) {
         color = this.color;
       }
       return color;
-    },
+    }
   },
   watch: {},
   //方法集合
@@ -77,10 +88,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .role-rItem {
   display: flex;
@@ -104,45 +115,37 @@ export default {
       width: 36px;
       height: 36px;
     }
-    &-roleImg0{
-        background: url("../../../../assets/NPC/simple1.png") center
-        no-repeat;
-        background-size: contain;
+    &-roleImg0 {
+      background: url("../../../../assets/NPC/simple1.png") center no-repeat;
+      background-size: contain;
     }
-    &-roleImg1{
-        background: url("../../../../assets/NPC/simple2.png") center
-        no-repeat;
-        background-size: contain;
+    &-roleImg1 {
+      background: url("../../../../assets/NPC/simple2.png") center no-repeat;
+      background-size: contain;
     }
-    &-roleImg2{
-        background: url("../../../../assets/NPC/simple3.png") center
-        no-repeat;
-        background-size: contain;
+    &-roleImg2 {
+      background: url("../../../../assets/NPC/simple3.png") center no-repeat;
+      background-size: contain;
     }
-    &-roleImg3{
-        background: url("../../../../assets/NPC/simple4.png") center
-        no-repeat;
-        background-size: contain;
+    &-roleImg3 {
+      background: url("../../../../assets/NPC/simple4.png") center no-repeat;
+      background-size: contain;
     }
-    &-roleImg4{
-        background: url("../../../../assets/NPC/simple5.png") center
-        no-repeat;
-        background-size: contain;
+    &-roleImg4 {
+      background: url("../../../../assets/NPC/simple5.png") center no-repeat;
+      background-size: contain;
     }
-    &-roleImg5{
-        background: url("../../../../assets/NPC/simple6.png") center
-        no-repeat;
-        background-size: contain;
+    &-roleImg5 {
+      background: url("../../../../assets/NPC/simple6.png") center no-repeat;
+      background-size: contain;
     }
-    &-roleImg6{
-        background: url("../../../../assets/NPC/simple7.png") center
-        no-repeat;
-        background-size: contain;
+    &-roleImg6 {
+      background: url("../../../../assets/NPC/simple7.png") center no-repeat;
+      background-size: contain;
     }
-    &-roleImg7{
-        background: url("../../../../assets/NPC/simple8.png") center
-        no-repeat;
-        background-size: contain;
+    &-roleImg7 {
+      background: url("../../../../assets/NPC/simple8.png") center no-repeat;
+      background-size: contain;
     }
   }
   .pinyin {
@@ -160,4 +163,4 @@ export default {
     color: rgba(0, 0, 0, 0.85);
   }
 }
-</style>
+</style>

src/components/Adult/phonePreview/DialogueArticleViewChs/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>
@@ -48,14 +49,24 @@
           <div :class="['empty-left']"></div>
           <div class="empty-right"></div>
         </div>
-        <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
+        <p
+          class="notice"
+          v-if="curQue.notice"
+          :style="{ fontSize: baseSizePhone + 'px' }"
+        >
+          {{ curQue.notice }}
+        </p>
         <div
           :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
           v-for="(item, index) in resArr"
           :key="'detail' + index"
         >
           <div class="article-content">
-            <RoleChs :curRole="item.roleDetail" :type="1" />
+            <RoleChs
+              :curRole="item.roleDetail"
+              :type="1"
+              :baseSizePhone="baseSizePhone"
+            />
             <div class="wordsList-box">
               <img
                 :src="articleImg[index]"
@@ -65,12 +76,16 @@
                 class="roleDetail"
                 v-if="item.roleDetail.detail.wordsList.length > 0"
               >
-                <span class="pinyin">{{
-                  item.roleDetail.detail.wordsList | handlePinyin
-                }}</span>
-                <span class="chs">{{
-                  item.roleDetail.detail.wordsList | handleChs
-                }}</span>
+                <span
+                  class="pinyin"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
+                >
+                <span
+                  class="chs"
+                  :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handleChs }}</span
+                >
               </div>
               <div
                 class="para-con"
@@ -84,6 +99,7 @@
                       curQue.enPosition == 'top'
                   "
                   class="enwords"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -127,6 +143,7 @@
                               pItem.className ? pItem.className : '',
                               noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                             ]"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                           <span
@@ -142,7 +159,8 @@
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
@@ -161,6 +179,7 @@
                               pItem.className ? pItem.className : '',
                               noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                             ]"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -185,6 +204,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                           <span
@@ -194,7 +214,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 1].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -219,6 +240,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
@@ -250,6 +272,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -273,7 +296,8 @@
                               fontFamily:
                                 item.wordsList[pIndex + 2].config.fontFamily,
                               height: '28px',
-                              display: 'inline-block'
+                              display: 'inline-block',
+                              fontSize: baseSizePhone + 6 + 'px'
                             }"
                             >{{
                               NumberList.indexOf(
@@ -298,6 +322,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -316,6 +341,7 @@
                             noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click="showWordDetail($event, pItem)"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -335,7 +361,8 @@
                           :style="{
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
-                            display: 'inline-block'
+                            display: 'inline-block',
+                            fontSize: baseSizePhone + 6 + 'px'
                           }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
@@ -356,6 +383,7 @@
                             noFont.indexOf(item.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           @click="showWordDetail($event, pItem)"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -378,6 +406,7 @@
                       (!curQue.enPosition ||
                         (curQue.enPosition && curQue.enPosition == 'bottom'))
                   "
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                   class="enwords"
                 >
                   {{ item.enwords }}
@@ -396,8 +425,9 @@
             @handleWav="handleWav"
             :TaskModel="TaskModel"
             :answerRecordList="curQue.Bookanswer.wordModel.recordList"
-            type="promax"
+            type="normal"
             class="luyin-box"
+            :baseSizePhone="baseSizePhone"
           />
         </div>
       </div>
@@ -425,6 +455,7 @@
           :TaskModel="TaskModel"
           :writeList="curQue.Bookanswer.writeModel"
           @changeCurQue="changeCurQue"
+          :themeColorPhone="themeColorPhone"
         />
       </div>
     </template>
@@ -437,7 +468,11 @@
           left: windowWidth > 642 ? '' : '0px'
         }"
       >
-        <Notecard :item="curNoteCon" :changeCard="changeCard" />
+        <Notecard
+          :item="curNoteCon"
+          :changeCard="changeCard"
+          :themeColorPhone="themeColorPhone"
+        />
       </div>
     </template>
   </div>
@@ -464,7 +499,8 @@ export default {
     "config",
     "TaskModel",
     "colLength",
-    "isPhone"
+    "baseSizePhone",
+    "themeColorPhone"
   ],
   components: {
     AudioLine,
@@ -1000,7 +1036,7 @@ export default {
         justify-content: start;
         padding: 8px 12px;
         height: 40px;
-        width: 280px;
+        width: 150px;
         justify-content: flex-start;
       }
     }
@@ -1142,7 +1178,7 @@ export default {
       clear: both;
       overflow: hidden;
       .roleDetail {
-        height: 36px;
+        min-height: 36px;
         display: flex;
         justify-content: flex-start;
         align-items: center;

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

@@ -1,17 +1,16 @@
 <!--  -->
 <template>
   <div
-    class="NPC-ArticleView NPC-ArticleView-container"
+    class="NPC-ArticleView-phone NPC-ArticleView-container "
     id="articleBoby"
     v-if="curQue && curQue.Bookanswer"
   >
     <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 &&
@@ -89,7 +88,8 @@
         @changeConfig="changeConfig"
         v-if="!showPhrases && !showPractice && !showWord"
         :colLength="colLength"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
+        :themeColorPhone="themeColorPhone"
       />
       <PhraseModel
         :curQue="curQue"
@@ -108,7 +108,8 @@
         v-if="showPhrases"
         :colLength="colLength"
         :NpcNewWordMp3="NpcNewWordMp3"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
+        :themeColorPhone="themeColorPhone"
       />
       <Practice
         :curQue="curQue"
@@ -126,7 +127,8 @@
         :colLength="colLength"
         :isFull="isFull"
         :NpcNewWordMp3="NpcNewWordMp3"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
+        :themeColorPhone="themeColorPhone"
       />
       <WordModel
         :curQue="curQue"
@@ -144,7 +146,8 @@
         @changeConfig="changeConfig"
         v-if="showWord"
         :colLength="colLength"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
+        :themeColorPhone="themeColorPhone"
       />
     </div>
     <div class="voice-full-screen" :id="'screen-' + mathNum">
@@ -169,7 +172,7 @@
         @exitFullscreen="exitFullscreen"
         @changeIsFull="changeIsFull"
         :NpcNewWordMp3="NpcNewWordMp3"
-        :isPhone="isPhone"
+        :baseSizePhone="baseSizePhone"
       />
     </div>
   </div>
@@ -195,7 +198,8 @@ export default {
     "TaskModel",
     "colLength",
     "NpcNewWordMp3",
-    "isPhone"
+    "baseSizePhone",
+    "themeColorPhone"
   ],
   components: {
     NormalModelChs,
@@ -669,7 +673,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
-.NPC-ArticleView {
+.NPC-ArticleView-phone {
   width: 100%;
   &:-webkit-full-screen {
     width: 100%;
@@ -681,8 +685,6 @@ export default {
     height: 100%;
   }
   .ArticleView-full {
-    position: absolute;
-    top: 0px;
     background: url("../../../../assets/NPC/full-screen-red.png") left center
       no-repeat;
     background-size: 20px 20px;
@@ -693,26 +695,30 @@ export default {
     font-weight: bold;
     left: 0;
     z-index: 1;
+    margin-right: 10px;
   }
   .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;
+      }
       img {
         width: 20px;
         height: 20px;
@@ -721,6 +727,7 @@ export default {
     }
     .right {
       display: flex;
+      justify-content: flex-end;
     }
     .setting-fontsize {
       display: flex;
@@ -746,7 +753,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);
@@ -757,13 +764,13 @@ export default {
 </style>
 <style lang="scss">
 .NNPE-tableList-item-noMargin {
-  .NPC-ArticleView {
-    background: #fff;
+  .NPC-ArticleView-phone {
+    // background: #fff;
   }
 }
-.NPC-ArticleView {
+.NPC-ArticleView-phone {
   &.NPC-ArticleView-container {
-    margin-bottom: 24px;
+    // margin-bottom: 24px;
   }
   .notice {
     font-weight: normal;
@@ -775,14 +782,14 @@ export default {
     margin: 0;
     word-break: break-word;
     &.hasRemark {
-      width: 553px;
+      width: calc(100% - 120px);
       box-sizing: border-box;
       border-right: 1px rgba(0, 0, 0, 0.1) solid;
     }
   }
   .ArticleView-header {
     .el-switch {
-      margin-left: 24px;
+      margin-left: 4px;
     }
     .el-switch__core {
       width: 44px !important;

src/components/Adult/phonePreview/SentenceMulModule.vue

@@ -25,6 +25,7 @@
           type="audioLine"
           ref="fillInforAudioLine"
           @handleListenRead="handleListenRead"
+          :baseSizePhone="baseSizePhone"
         />
       </div>
     </div>

src/components/Adult/phonePreview/VoiceMatrix.vue

@@ -385,10 +385,10 @@
         :handle-change-stop-audio="handleChangeStopAudio"
         @playing="playChange"
       />
-      <span ref="fullscreen" class="fullscreen" @click="fullScreen">
+      <!-- <span ref="fullscreen" class="fullscreen" @click="fullScreen">
         <span>黑板模式</span>
         <el-image :src="fullscreenSrc" />
-      </span>
+      </span> -->
     </div>
     <div :id="`screen-${cid}`" class="voice-full-screen">
       <VoiceFullscreen

src/components/Adult/phonePreview/components/Notecard.vue

@@ -31,7 +31,7 @@
 <script>
 export default {
   components: {},
-  props: ["item", "changeCard"],
+  props: ["item", "changeCard", "themeColorPhone"],
   data() {
     return {};
   },
@@ -49,10 +49,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .NoteCard {
   width: 642px;
@@ -129,4 +129,4 @@ export default {
     }
   }
 }
-</style>
+</style>

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

@@ -246,7 +246,8 @@ export default {
     "mp3Url",
     "bg",
     "ed",
-    "isFull"
+    "isFull",
+    "themeColorPhone"
   ],
   data() {
     return {