生字卡片 弹窗移动端适配

src/components/Adult/Preview.vue

@@ -360,7 +360,10 @@
                         : '0px'
                   }"
                 >
-                  <b v-html="item.little_title_number" :style="{ fontSize: baseSizePhone+2 + 'px' }" />
+                  <b
+                    v-html="item.little_title_number"
+                    :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+                  />
                   <template
                     v-if="item.l_title_detail && item.l_title_detail.sentence"
                   >
@@ -374,11 +377,15 @@
                         :fn_check_list="[]"
                         :py-number="0"
                         :record_check="[]"
-                        :max-fontsize="baseSizePhone+2"
+                        :max-fontsize="baseSizePhone + 2"
                       />
                     </div>
                   </template>
-                  <p v-else-if="item.little_title" v-html="item.little_title"  :style="{ fontSize: baseSizePhone+2 + 'px' }" />
+                  <p
+                    v-else-if="item.little_title"
+                    v-html="item.little_title"
+                    :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+                  />
                 </div>
               </template>
               <div
@@ -775,6 +782,9 @@
                           :task-model="TaskModel"
                           :judge-answer="itemJ"
                           :baseSizePhone="baseSizePhone"
+                          :themeColorPhone="
+                            themeColorPhone[themeColorPhoneIndex]
+                          "
                         />
                       </template>
                       <template

src/components/Adult/phonePreview/NewWordShow.vue

@@ -150,6 +150,7 @@
         @changePraShow="changePraShow"
         :cur="curData"
         :theme-color="themeColor"
+        :themeColorPhone="themeColorPhone"
       />
     </el-dialog>
     <!-- <div v-if="isPraShow" class="practiceBox practiceBoxStrock">
@@ -184,6 +185,7 @@
         :task-model="TaskModel"
         @changeCurQue="changeCurQue"
         @deleteWriteRecord="deleteWriteRecord"
+        :themeColorPhone="themeColorPhone"
       />
     </el-dialog>
     <!-- <div v-if="ifFreeShow" class="practiceBox practiceBoxStrock">
@@ -220,7 +222,8 @@ export default {
     "currentTreeID",
     "TaskModel",
     "judgeAnswer",
-    "baseSizePhone"
+    "baseSizePhone",
+    "themeColorPhone"
   ],
   data() {
     return {

src/components/Adult/phonePreview/components/FreewriteLettle.vue

@@ -1,6 +1,9 @@
 <!--  -->
 <template>
-  <div class="practice practiceSingleNPC">
+  <div
+    class="practice practiceSingleNPC"
+    :style="{ background: themeColorPhone }"
+  >
     <img
       @click="changePraShow()"
       class="close-icon"
@@ -83,7 +86,8 @@ export default {
     "rowIndex",
     "colIndex",
     "TaskModel",
-    "writeList"
+    "writeList",
+    "themeColorPhone"
   ],
   data() {
     return {
@@ -358,7 +362,7 @@ export default {
     position: relative;
     width: 288px;
     height: 360px;
-    background: #f3f3f3;
+    // background: #f3f3f3;
     border-radius: 16px;
     box-sizing: border-box;
     padding: 30px 16px 30px;

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

@@ -1,6 +1,9 @@
 <!--  -->
 <template>
-  <div class="practice practiceSingleNPC">
+  <div
+    class="practice practiceSingleNPC"
+    :style="{ background: themeColorPhone }"
+  >
     <div
       :key="item.con + index"
       class="Book_content"
@@ -23,7 +26,7 @@
         <el-tab-pane label="简体"> </el-tab-pane>
         <el-tab-pane label="繁体"> </el-tab-pane>
       </el-tabs>
-      <div class="tab-box" :class="[isPhone ? 'tab-box-phone' : '']">
+      <div class="tab-box tab-box-phone">
         <div class="tab-box_0" :class="[isShow == '0' ? 'z-top' : '']">
           <div class="left-content">
             <div class="strockplay">
@@ -32,6 +35,7 @@
                 :wordNum="item.con.length"
                 :Book_text="item.con"
                 :targetDiv="'pra' + item.con + index"
+                v-if="isShow === '0'"
               />
             </div>
             <div class="left-content-pra">
@@ -136,6 +140,7 @@
                 :wordNum="item.TChinese.length"
                 :Book_text="item.TChinese"
                 :targetDiv="'praT' + item.TChinese + index"
+                v-if="isShow === '1'"
               />
             </div>
             <div class="left-content-pra"></div>
@@ -249,7 +254,8 @@ export default {
     "TaskModel",
     "writeList",
     "bg",
-    "ed"
+    "ed",
+    "themeColorPhone"
   ],
   data() {
     return {
@@ -266,7 +272,7 @@ export default {
       thinpenActive: require("../../../../assets/common/thin-pen-active.png"),
       thickpen: require("../../../../assets/common/thick-pen.png"),
       thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
-      isShow: 0,
+      isShow: "0",
       collFlag: false,
       isPhone: false
     };
@@ -514,7 +520,7 @@ export default {
     position: relative;
     width: 288px;
     height: 364px;
-    background: #f3f3f3;
+    // background: #f3f3f3;
     border-radius: 16px;
     box-sizing: border-box;
     padding: 16px;
@@ -531,7 +537,7 @@ export default {
       align-items: center;
       padding: 0;
       list-style: none;
-      margin-top: 44px;
+      margin-top: 30px;
       > li {
         height: 34px;
         width: 124px;
@@ -660,6 +666,7 @@ export default {
   width: 100%;
   display: flex;
   align-items: center;
+  justify-content: end;
   cursor: pointer;
   .bg-box {
     min-width: 76px;
@@ -669,7 +676,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: #ffffff;
+    // background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 4px;
@@ -706,7 +713,7 @@ export default {
   width: 100%;
 }
 .tab-box {
-  background: #fff;
+  // background: #fff;
   padding: 24px;
   position: relative;
   height: 428px;
@@ -725,7 +732,7 @@ export default {
     }
   }
   &-phone {
-    height: 460px;
+    height: 480px;
     > div {
       display: block;
       width: calc(100% - 48px);
@@ -744,12 +751,12 @@ export default {
       }
       .right-content {
         width: 290px;
-        height: 290px;
+        height: 360px;
         margin: 10px auto 0 auto;
         padding: 4px 16px;
         .right-strockred {
-          width: 200px;
-          height: 200px;
+          width: 256px;
+          height: 256px;
           :deep .character-target-div {
             height: 180px;
           }
@@ -793,9 +800,9 @@ export default {
 <style lang="scss">
 .tab-box-phone {
   .freewrite .strockred {
-    height: 200px;
+    height: 256px;
     .character-target-div {
-      height: 200px;
+      height: 256px;
     }
   }
 }