问答题 移动端

src/components/Adult/phonePreview/InputHasRecord.vue

@@ -1,11 +1,8 @@
 <!--  -->
 <template>
   <div
-    class="Big-Book-prev-Textdes InputHasRecordNPC"
-    :class="[
-      curQue.guide ? 'NPC-zhedie' : '',
-      isPhone ? 'InputHasRecordNPC-phone' : ''
-    ]"
+    class="Big-Book-prev-Textdes InputHasRecordNPC InputHasRecordNPC-phone"
+    :class="[curQue.guide ? 'NPC-zhedie' : '']"
     v-if="
       curQue && judgeAnswer == 'standardAnswer'
         ? userErrList.length > 0
@@ -17,11 +14,17 @@
     <template v-if="judgeAnswer == 'standardAnswer'">
       <div v-for="(items, indexs) in userErrList" :key="indexs">
         <div class="item-content">
-          <b class="xuhao" v-if="items.number">{{ items.number }}</b>
+          <b
+            class="xuhao"
+            v-if="items.number"
+            :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+            >{{ items.number }}</b
+          >
           <template v-if="items.detail.wordsList.length == 0">
             <p
               :class="['content-con', items.font]"
               v-if="items.detail.sentence"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
             >
               {{ items.detail.sentence }}
             </p>
@@ -51,6 +54,7 @@
                         :class="[
                           noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                         ]"
+                        :style="{ fontSize: baseSizePhone + 'px' }"
                         >{{ itemCon.pinyin }}</span
                       >
                       <span
@@ -64,6 +68,7 @@
                         :class="[
                           noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                         ]"
+                        :style="{ fontSize: baseSizePhone + 'px' }"
                         >{{ itemCon.pinyin }}</span
                       >
                     </div>
@@ -78,6 +83,7 @@
                             ? 'noFont'
                             : ''
                         ]"
+                        :style="{ fontSize: baseSizePhone + 'px' }"
                         >{{ items.detail.wordsList[indexCon + 1].pinyin }}</span
                       >
                       <span
@@ -97,6 +103,7 @@
                             ? 'noFont'
                             : ''
                         ]"
+                        :style="{ fontSize: baseSizePhone + 'px' }"
                         >{{ items.detail.wordsList[indexCon + 1].pinyin }}</span
                       >
                     </div>
@@ -109,6 +116,7 @@
                     :class="[
                       noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                     ]"
+                    :style="{ fontSize: baseSizePhone + 'px' }"
                     >{{ itemCon.pinyin }}</span
                   >
                   <span
@@ -122,6 +130,7 @@
                     :class="[
                       noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                     ]"
+                    :style="{ fontSize: baseSizePhone + 'px' }"
                     >{{ itemCon.pinyin }}</span
                   >
                 </template>
@@ -147,6 +156,7 @@
             :readonly="TaskModel == 'ANSWER'"
             @input="forupdata"
             @change="changeuserAnswerJudge(indexs)"
+            :style="{ fontSize: baseSizePhone + 2 + 'px' }"
           ></el-input>
           <div v-if="items.record" class="luyin-inner">
             <Soundrecord
@@ -158,7 +168,7 @@
               "
               :tmIndex="indexs"
               :TaskModel="TaskModel"
-              type="promax"
+              type="normal"
               class="luyin-box"
             />
           </div>
@@ -169,7 +179,11 @@
       <template v-if="curQue.guide">
         <div class="topTitle">
           <div class="NPC-top-left">
-            <span class="NPC-topTitle-text">{{ curQue.guide }}</span>
+            <span
+              class="NPC-topTitle-text"
+              :style="{ 'font-size': baseSizePhone + 2 + 'px' }"
+              >{{ curQue.guide }}</span
+            >
           </div>
           <div class="NPC-top-right" @click="handleChangeTab">
             <span class="NPC-top-right-text">{{
@@ -190,7 +204,12 @@
             v-if="curQue.option && curQue.option.length > 0"
             v-show="wordShow"
           >
-            <h2 v-if="curQue.title">{{ curQue.title }}</h2>
+            <h2
+              v-if="curQue.title"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+            >
+              {{ curQue.title }}
+            </h2>
             <div v-for="(items, indexs) in curQue.option" :key="indexs">
               <div class="item-content">
                 <b class="xuhao" v-if="items.number">{{ items.number }}</b>
@@ -198,6 +217,7 @@
                   <p
                     :class="['content-con', items.font]"
                     v-if="items.detail.sentence"
+                    :style="{ 'font-size': baseSizePhone + 2 + 'px' }"
                   >
                     {{ items.detail.sentence }}
                   </p>
@@ -229,6 +249,7 @@
                                   ? 'noFont'
                                   : ''
                               ]"
+                              :style="{ 'font-size': baseSizePhone + 'px' }"
                               >{{ itemCon.pinyin }}</span
                             >
                             <span
@@ -244,6 +265,7 @@
                                   ? 'noFont'
                                   : ''
                               ]"
+                              :style="{ 'font-size': baseSizePhone + 'px' }"
                               >{{ itemCon.pinyin }}</span
                             >
                           </div>
@@ -258,6 +280,7 @@
                                   ? 'noFont'
                                   : ''
                               ]"
+                              :style="{ 'font-size': baseSizePhone + 'px' }"
                               >{{
                                 items.detail.wordsList[indexCon + 1].pinyin
                               }}</span
@@ -283,6 +306,7 @@
                                   ? 'noFont'
                                   : ''
                               ]"
+                              :style="{ 'font-size': baseSizePhone + 'px' }"
                               >{{
                                 items.detail.wordsList[indexCon + 1].pinyin
                               }}</span
@@ -297,6 +321,7 @@
                           :class="[
                             noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ 'font-size': baseSizePhone + 'px' }"
                           >{{ itemCon.pinyin }}</span
                         >
                         <span
@@ -310,6 +335,7 @@
                           :class="[
                             noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ 'font-size': baseSizePhone + 'px' }"
                           >{{ itemCon.pinyin }}</span
                         >
                       </template>
@@ -346,6 +372,7 @@
                   :readonly="TaskModel == 'ANSWER'"
                   @input="forupdata"
                   @change="changeuserAnswerJudge(indexs)"
+                  :style="{ 'font-size': baseSizePhone + 2 + 'px' }"
                 ></el-input>
                 <div v-if="items.record" class="luyin-inner">
                   <Soundrecord
@@ -357,7 +384,7 @@
                     "
                     :tmIndex="indexs"
                     :TaskModel="TaskModel"
-                    type="promax"
+                    type="normal"
                     class="luyin-box"
                   />
                 </div>
@@ -367,14 +394,26 @@
         </el-collapse-transition>
       </template>
       <template v-else>
-        <h2 v-if="curQue.title" style="margin-top: 0">{{ curQue.title }}</h2>
+        <h2
+          v-if="curQue.title"
+          style="margin-top: 0"
+          :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+        >
+          {{ curQue.title }}
+        </h2>
         <div v-for="(items, indexs) in curQue.option" :key="indexs">
           <div class="item-content">
-            <b class="xuhao" v-if="items.number">{{ items.number }}</b>
+            <b
+              class="xuhao"
+              v-if="items.number"
+              :style="{ 'font-size': baseSizePhone - 2 + 'px' }"
+              >{{ items.number }}</b
+            >
             <template v-if="items.detail.wordsList.length == 0">
               <p
                 :class="['content-con', items.font]"
                 v-if="items.detail.sentence"
+                :style="{ 'font-size': baseSizePhone + 2 + 'px' }"
               >
                 {{ items.detail.sentence }}
               </p>
@@ -404,6 +443,7 @@
                           :class="[
                             noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ 'font-size': baseSizePhone + 'px' }"
                           >{{ itemCon.pinyin }}</span
                         >
                         <span
@@ -417,6 +457,7 @@
                           :class="[
                             noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                           ]"
+                          :style="{ 'font-size': baseSizePhone + 'px' }"
                           >{{ itemCon.pinyin }}</span
                         >
                       </div>
@@ -431,6 +472,7 @@
                               ? 'noFont'
                               : ''
                           ]"
+                          :style="{ 'font-size': baseSizePhone + 'px' }"
                           >{{
                             items.detail.wordsList[indexCon + 1].pinyin
                           }}</span
@@ -452,6 +494,7 @@
                               ? 'noFont'
                               : ''
                           ]"
+                          :style="{ 'font-size': baseSizePhone + 'px' }"
                           >{{
                             items.detail.wordsList[indexCon + 1].pinyin
                           }}</span
@@ -466,6 +509,7 @@
                       :class="[
                         noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                       ]"
+                      :style="{ 'font-size': baseSizePhone + 'px' }"
                       >{{ itemCon.pinyin }}</span
                     >
                     <span
@@ -479,6 +523,7 @@
                       :class="[
                         noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                       ]"
+                      :style="{ 'font-size': baseSizePhone + 'px' }"
                       >{{ itemCon.pinyin }}</span
                     >
                   </template>
@@ -517,6 +562,7 @@
               :readonly="TaskModel == 'ANSWER'"
               @input="forupdata"
               @change="changeuserAnswerJudge(indexs)"
+              :style="{ 'font-size': baseSizePhone + 2 + 'px' }"
             ></el-input>
             <div v-if="items.record" class="luyin-inner">
               <Soundrecord
@@ -528,7 +574,7 @@
                 "
                 :tmIndex="indexs"
                 :TaskModel="TaskModel"
-                type="promax"
+                type="normal"
                 class="luyin-box"
               />
             </div>
@@ -544,7 +590,7 @@ import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
 import AnswerTitle from "../preview/components/AnswerTitle.vue";
 export default {
   components: { Soundrecord, AnswerTitle },
-  props: ["curQue", "TaskModel", "judgeAnswer", "isPhone"],
+  props: ["curQue", "TaskModel", "judgeAnswer", "baseSizePhone"],
   data() {
     return {
       wordShow: true,
@@ -561,9 +607,9 @@ export default {
         if (config) {
           let sizeVal = config.fontSize.replace("px", "");
           return {
-            minHeight: Number(sizeVal) + 9 + "px",
-            lineHeight: Number(sizeVal) + 8 + "px",
-            fontSize: config.fontSize,
+            minHeight: Number(this.baseSizePhone) + 11 + "px",
+            lineHeight: Number(this.baseSizePhone) + 10 + "px",
+            fontSize: this.baseSizePhone + 2 + "px",
             fontFamily: config.fontFamily
           };
         }
@@ -685,8 +731,9 @@ export default {
     font-size: 16px;
     line-height: 150%;
     color: #000000;
-    margin: 16px 0 8px 0;
+    margin: 0 0 8px 0;
     word-break: break-word;
+    padding-top: 8px;
   }
   b.xuhao {
     background: #de4444;
@@ -706,9 +753,9 @@ export default {
     max-width: 520px;
     border-radius: 8px;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    background: #fff;
+    // background: #fff;
     overflow: hidden;
-    margin: 8px 0 36px 23px;
+    margin: 10px 0 10px 23px;
     > div.luyin-inner {
       border-top: 1px solid rgba(0, 0, 0, 0.1);
     }
@@ -783,13 +830,13 @@ export default {
   }
 }
 .NPC-zhedie {
-  width: 780px;
+  width: 100%;
   //   margin-top: 16px;
   .topTitle {
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding-left: 24px;
+    padding-left: 10px;
     padding-right: 16px;
     height: 48px;
     border: 1px solid rgba(0, 0, 0, 0.1);
@@ -830,7 +877,7 @@ export default {
     }
   }
   .NPC-word-list {
-    padding: 0px 24px;
+    padding: 0px 10px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-top: none;
     border-radius: 0 0 8px 8px;

src/components/Adult/phonePreview/TextInputRecord.vue

@@ -389,7 +389,7 @@ export default {
       border-radius: 8px;
       display: flex;
       align-items: center;
-      padding: 8px 12px;
+      padding: 10px;
       margin-bottom: 8px;
       .audio-play {
         width: 16px;
@@ -441,7 +441,7 @@ export default {
         box-sizing: border-box;
         border-radius: 8px;
         outline: none;
-        height: 40px;
+        height: 30px;
         padding: 8px;
         color: #000000;
         font-size: 16px;
@@ -458,7 +458,7 @@ export default {
         // border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: 8px;
         width: 200px;
-        height: 40px;
+        height: 30px;
         margin-left: 8px;
         padding: 0 12px;
       }