多题干 移动端

src/components/Adult/phonePreview/SentenceMulModule.vue

@@ -171,7 +171,7 @@
                         :pyNumber="items.pyNumber && items.pyNumber[sdIndex]"
                         :record_check="sdItem.fn_check_list.record_check"
                         :hengLeg="sdItem.hengLeg"
-                        :maxFontsize="sdItem.maxFontsize"
+                        :maxFontsize="baseSizePhone"
                         :textIndent="sdItem.textindent"
                       />
                       <template
@@ -201,7 +201,7 @@
                               ? typeList[sdItem.fn_check_list.record_check]
                               : 'normal'
                           "
-                          class="promax-box"
+                          class="normal"
                           :TaskModel="TaskModel"
                           :tmIndex="sdIndex"
                           :answerRecordList="[]"
@@ -248,6 +248,7 @@
                         :TaskModel="TaskModel"
                         :is_short_auto="items.fn_check_list.is_short_auto"
                         :judgeAnswer="judgeAnswer"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 判断 -->
@@ -295,6 +296,7 @@
                         :items="items"
                         :judgeAnswer="judgeAnswer"
                         :correctAnswer="items.correct"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 单选题 -->
@@ -322,6 +324,7 @@
                         :curQue="curQue"
                         :items="items"
                         :judgeAnswer="judgeAnswer"
+                        :baseSizePhone="baseSizePhone"
                       />
                     </div>
                     <!-- 录音 -->
@@ -386,6 +389,7 @@
                     :curQue="curQue"
                     :items="items"
                     :judgeAnswer="judgeAnswer"
+                    :baseSizePhone="baseSizePhone"
                   />
                 </div>
                 <!-- 单选题 -->
@@ -418,6 +422,7 @@
                     :curQue="curQue"
                     :items="items"
                     :judgeAnswer="judgeAnswer"
+                    :baseSizePhone="baseSizePhone"
                   />
                 </div>
               </div>
@@ -566,7 +571,7 @@
                           :pyNumber="itemO.pyNumber && itemO.pyNumber[sdIndex]"
                           :record_check="sdItem.fn_check_list.record_check"
                           :hengLeg="sdItem.hengLeg"
-                          :maxFontsize="sdItem.maxFontsize"
+                          :maxFontsize="baseSizePhone"
                           :textIndent="sdItem.textindent"
                         />
                         <template
@@ -672,7 +677,7 @@
                           :pyNumber="items.pyNumber && items.pyNumber[sdIndex]"
                           :record_check="sdItem.fn_check_list.record_check"
                           :hengLeg="sdItem.hengLeg"
-                          :maxFontsize="sdItem.maxFontsize"
+                          :maxFontsize="baseSizePhone"
                           :textIndent="sdItem.textindent"
                         />
                         <template
@@ -756,6 +761,7 @@
                           :TaskModel="TaskModel"
                           :is_short_auto="items.fn_check_list.is_short_auto"
                           :judgeAnswer="judgeAnswer"
+                          :baseSizePhone="baseSizePhone"
                         />
                       </div>
                       <div
@@ -775,6 +781,7 @@
                           :Isexample="items.Isexample"
                           :judgeCorrectAnswer="items.correct.judge"
                           :judgeAnswer="judgeAnswer"
+                          :baseSizePhone="baseSizePhone"
                         />
                       </div>
                       <div
@@ -802,6 +809,7 @@
                           :curQue="curQue"
                           :items="items"
                           :judgeAnswer="judgeAnswer"
+                          :baseSizePhone="baseSizePhone"
                         />
                       </div>
                       <div
@@ -828,6 +836,7 @@
                           :curQue="curQue"
                           :items="items"
                           :judgeAnswer="judgeAnswer"
+                          :baseSizePhone="baseSizePhone"
                         />
                       </div>
                       <div
@@ -901,6 +910,7 @@
                       :curQue="curQue"
                       :items="items"
                       :judgeAnswer="judgeAnswer"
+                      :baseSizePhone="baseSizePhone"
                     />
                   </div>
                   <div
@@ -932,6 +942,7 @@
                       :curQue="curQue"
                       :items="items"
                       :judgeAnswer="judgeAnswer"
+                      :baseSizePhone="baseSizePhone"
                     />
                   </div>
                 </div>
@@ -982,7 +993,7 @@ export default {
     ShortInputTemp,
     OptionTemp
   },
-  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
+  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer", "baseSizePhone"],
   data() {
     return {
       curTime: 0,
@@ -1538,7 +1549,7 @@ export default {
       flex-direction: row;
       justify-content: flex-start;
       box-sizing: border-box;
-      background: #ffffff;
+      // background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       margin: 8px 0;
@@ -1582,7 +1593,7 @@ export default {
     .sent-stem {
       flex: 1;
       display: flex;
-      background: #fff;
+      // background: #fff;
       .stem-maincontent {
         flex: 1;
       }
@@ -1666,7 +1677,7 @@ export default {
     }
   }
   .record-common {
-    background: #ffffff;
+    // background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
@@ -1684,7 +1695,7 @@ export default {
   // }
   .promax-box-div {
     width: 100%;
-    background: #ffffff;
+    // background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 0px 0px 8px 8px;

src/components/Adult/phonePreview/components/OptionTemp.vue

@@ -1,17 +1,24 @@
 <template>
   <div :class="['OptionComponents-npc', 'OptionComponents-npc-' + judgeAnswer]">
-    <ul v-if="option && items" :class="[items.optionAlign&&items.optionAlign=='right'?'OptionComponents-npc-right':'']">
+    <ul
+      v-if="option && items"
+      :class="[
+        items.optionAlign && items.optionAlign == 'right'
+          ? 'OptionComponents-npc-right'
+          : ''
+      ]"
+    >
       <li
         v-for="(item, index) in option"
         :key="index"
         :class="[
-          !row || items.optionAlign&&items.optionAlign=='right'
+          !row || (items.optionAlign && items.optionAlign == 'right')
             ? 'option-left-right'
             : 'option' +
               (type == 'radio' ? items.radioNumber : items.checkboxNumber),
           !items.Isexample && TaskModel != 'ANSWER' ? 'li-hover' : '',
           singleAnswerClass(index),
-          checkBoxAnswerClass(index),
+          checkBoxAnswerClass(index)
         ]"
       >
         <template v-if="judgeAnswer == 'standardAnswer'">
@@ -22,7 +29,9 @@
                 item.detail &&
                 item.detail.pyNumber &&
                 item.detail.pyNumber[0] > 0
-                  ? curQue.pyPosition=='top'?'radio-hasPy':'radio-hasPy-bottom'
+                  ? curQue.pyPosition == 'top'
+                    ? 'radio-hasPy'
+                    : 'radio-hasPy-bottom'
                   : ''
               "
               :disabled="TaskModel == 'ANSWER' || items.Isexample"
@@ -31,14 +40,14 @@
                 :label="index"
                 :style="{
                   'margin-right': 0,
-                  display: 'flex',
+                  display: 'flex'
                 }"
               >
                 <span
                   class="option_number"
                   :class="[
                     item.hasCn ? 'option_number_hasCn' : '',
-                    item.detail.sentence ? '' : 'option_number_no',
+                    item.detail.sentence ? '' : 'option_number_no'
                   ]"
                   v-if="item.number"
                   >{{ item.number }}</span
@@ -75,8 +84,10 @@
                 item.detail &&
                 item.detail.pyNumber &&
                 item.detail.pyNumber[0] > 0
-                  ? curQue.pyPosition=='top'?'radio-hasPy':'radio-hasPy-bottom'
-                  : '',
+                  ? curQue.pyPosition == 'top'
+                    ? 'radio-hasPy'
+                    : 'radio-hasPy-bottom'
+                  : ''
               ]"
               :disabled="true"
               @input="changeSingle"
@@ -85,7 +96,7 @@
                 class="option_number"
                 :class="[
                   item.hasCn ? 'option_number_hasCn' : '',
-                  item.detail.sentence ? '' : 'option_number_no',
+                  item.detail.sentence ? '' : 'option_number_no'
                 ]"
                 v-if="item.number"
                 >{{ item.number }}</span
@@ -118,7 +129,9 @@
                 item.detail &&
                 item.detail.pyNumber &&
                 item.detail.pyNumber[0] > 0
-                  ? curQue.pyPosition=='top'?'radio-hasPy':'radio-hasPy-bottom'
+                  ? curQue.pyPosition == 'top'
+                    ? 'radio-hasPy'
+                    : 'radio-hasPy-bottom'
                   : ''
               "
               :disabled="TaskModel == 'ANSWER' || items.Isexample"
@@ -128,14 +141,14 @@
                 :label="index"
                 :style="{
                   'margin-right': 0,
-                  display: 'flex',
+                  display: 'flex'
                 }"
               >
                 <span
                   class="option_number"
                   :class="[
                     item.hasCn ? 'option_number_hasCn' : '',
-                    item.detail.sentence ? '' : 'option_number_no',
+                    item.detail.sentence ? '' : 'option_number_no'
                   ]"
                   v-if="item.number"
                   >{{ item.number }}</span
@@ -172,8 +185,10 @@
                 item.detail &&
                 item.detail.pyNumber &&
                 item.detail.pyNumber[0] > 0
-                  ? curQue.pyPosition=='top'?'radio-hasPy':'radio-hasPy-bottom'
-                  : '',
+                  ? curQue.pyPosition == 'top'
+                    ? 'radio-hasPy'
+                    : 'radio-hasPy-bottom'
+                  : ''
               ]"
               :disabled="TaskModel == 'ANSWER' || items.Isexample"
               @input="changeSingle"
@@ -182,9 +197,10 @@
                 class="option_number"
                 :class="[
                   item.hasCn ? 'option_number_hasCn' : '',
-                  item.detail.sentence ? '' : 'option_number_no',
+                  item.detail.sentence ? '' : 'option_number_no'
                 ]"
                 v-if="item.number"
+                :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                 >{{ item.number }}</span
               >
               <template v-if="item.img_list && item.img_list.length > 0">
@@ -201,6 +217,7 @@
                     :pyColor="curQue.pyColor"
                     :isInput="false"
                     sentType="option"
+                    :baseSizePhone="baseSizePhone"
                   />
                 </div>
               </template>
@@ -220,7 +237,7 @@ export default {
   //import引入的组件需要注入到对象中才能使用
   name: "OptionTemp",
   components: {
-    SentenceTemp,
+    SentenceTemp
   },
   props: [
     "option",
@@ -233,6 +250,7 @@ export default {
     "items",
     "judgeAnswer",
     "correctAnswer",
+    "baseSizePhone"
   ],
   data() {
     //这里存放数据
@@ -241,7 +259,7 @@ export default {
   //计算属性 类似于data概念
   computed: {
     singleAnswerClass() {
-      return function (index) {
+      return function(index) {
         let _this = this;
         let classname = "";
         if (_this.type == "radio") {
@@ -288,7 +306,7 @@ export default {
       };
     },
     checkBoxAnswerClass() {
-      return function (index) {
+      return function(index) {
         let _this = this;
         let classname = "";
         if (_this.type == "checkbox") {
@@ -338,7 +356,7 @@ export default {
         }
         return classname;
       };
-    },
+    }
   },
   //监控data中数据变化
   watch: {},
@@ -386,7 +404,7 @@ export default {
         }
       }
       _this.$forceUpdate();
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -405,7 +423,7 @@ export default {
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
+  activated() {}
 };
 </script>
 <style lang="scss" scoped>
@@ -421,7 +439,7 @@ ul {
   justify-content: start;
   flex-flow: wrap;
   padding: 0;
-  &.OptionComponents-npc-right{
+  &.OptionComponents-npc-right {
     justify-content: flex-end;
   }
   li {
@@ -504,7 +522,7 @@ ul {
   font-family: "robot";
   font-size: 16px;
   line-height: 16px;
-//   padding-top: 12px;
+  //   padding-top: 12px;
   margin-right: 4px;
   color: #000000;
 }
@@ -512,9 +530,9 @@ ul {
   .option_number {
     padding-top: 12px;
   }
-  &-bottom{
+  &-bottom {
     .option_number {
-        margin-top: -10px;
+      margin-top: -10px;
     }
   }
 }
@@ -583,13 +601,13 @@ ul {
     .el-checkbox__inner {
       margin-top: 24px;
     }
-    &-bottom{
-        .el-radio__inner {
-            margin-top: 14px;
-        }
-        .el-checkbox__inner {
-            margin-top: 14px;
-        }
+    &-bottom {
+      .el-radio__inner {
+        margin-top: 14px;
+      }
+      .el-checkbox__inner {
+        margin-top: 14px;
+      }
     }
   }
   .option_left_right {
@@ -598,4 +616,4 @@ ul {
     }
   }
 }
-</style>
+</style>

src/components/Adult/phonePreview/components/SentenceTemp.vue

@@ -4,7 +4,7 @@
     :class="[
       'sentence-temp',
       sentenceTempOption,
-      sentType == 'option' ? 'sentence-temp-option' : '',
+      sentType == 'option' ? 'sentence-temp-option' : ''
     ]"
     v-if="detail"
   >
@@ -15,7 +15,7 @@
           sentType == 'option' ? 'RLC-sentence-option' : '',
           detail.pyNumber && detail.pyNumber[index] > 0
             ? 'RLC-sentence-hasPY'
-            : '',
+            : ''
         ]"
         v-for="(item, index) in detail.wordsList"
         :key="'wordsList' + index"
@@ -28,7 +28,7 @@
             pItem.chs == '“' ? 'textRight' : 'textCenter',
             detail.pyNumber && detail.pyNumber[index] > 0
               ? 'RLC-words-hasPY'
-              : '',
+              : ''
           ]"
           :style="{
             paddingLeft:
@@ -40,23 +40,23 @@
               pItem.wordPadding.indexOf('right') > -1 ||
               (detail.pyNumber && detail.pyNumber[index] > 0)
                 ? '2px'
-                : '0px',
+                : '0px'
           }"
         >
           <template v-if="pItem.isShow">
             <template
               v-if="
                 item[pIndex + 1] &&
-                item[pIndex + 1].chs &&
-                chsFhList.indexOf(item[pIndex + 1].chs) > -1
+                  item[pIndex + 1].chs &&
+                  chsFhList.indexOf(item[pIndex + 1].chs) > -1
               "
             >
               <span class="RLC-words-box">
                 <span
                   v-if="
                     detail.pyNumber &&
-                    detail.pyNumber[index] > 0 &&
-                    pyPosition == 'top'
+                      detail.pyNumber[index] > 0 &&
+                      pyPosition == 'top'
                   "
                   class="RLC-pinyin"
                   :class="[
@@ -65,8 +65,9 @@
                     pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
                     pItem.pinyin && noFont.indexOf(pItem.pinyin) > -1
                       ? 'noFont'
-                      : '',
+                      : ''
                   ]"
+                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                   >{{ pItem.pinyin | handlePY }}</span
                 >
                 <template v-if="!pItem.isHeng">
@@ -74,16 +75,15 @@
                     :class="[
                       'RLC-chs',
 
-                      sentType == 'option' ? 'RLC-chs-option' : '',
+                      sentType == 'option' ? 'RLC-chs-option' : ''
                     ]"
                     :style="{
-                      fontSize: sentType != 'option' ? pItem.fontSize : '',
+                      fontSize: baseSizePhone + 6 + 'px',
                       color: pItem.fontColor,
-                      fontFamily: pItem.fontFamily,
+                      fontFamily: pItem.fontFamily
                     }"
                     v-html="pItem.chs"
-                    ></span
-                  >
+                  ></span>
                 </template>
                 <template v-else>
                   <template v-if="isInput">
@@ -91,9 +91,11 @@
                     <EditDiv
                       :id="
                         'sentenceTemp_' +
-                        Math.random().toString(36).substr(2) +
-                        '_' +
-                        index
+                          Math.random()
+                            .toString(36)
+                            .substr(2) +
+                          '_' +
+                          index
                       "
                       class="answer-input"
                       :class="[Isexample ? 'answer-input-example' : '']"
@@ -106,6 +108,7 @@
                           ? detail.hengList[index] * 60 + 'px'
                           : '120px',
                         textAlign: detail.hengList[index] ? 'center' : 'left',
+                        fontSize: baseSizePhone + 6 + 'px'
                       }"
                     />
                   </template>
@@ -114,33 +117,33 @@
                       v-if="pItem.chs != '#'"
                       class="RLC-chs"
                       :style="{
-                        fontSize: sentType != 'option' ? pItem.fontSize : '',
+                        fontSize: baseSizePhone + 6 + 'px',
                         color: pItem.fontColor,
-                        fontFamily: pItem.fontFamily,
+                        fontFamily: pItem.fontFamily
                       }"
                       :class="[
                         pItem.chs != '“' && pItem.padding ? 'padding' : '',
 
-                        sentType == 'option' ? 'RLC-chs-option' : '',
+                        sentType == 'option' ? 'RLC-chs-option' : ''
                       ]"
                       v-html="pItem.chs"
-                      ></span
-                    >
+                    ></span>
                   </template>
                 </template>
                 <span
                   v-if="
                     detail.pyNumber &&
-                    detail.pyNumber[index] > 0 &&
-                    pyPosition == 'bottom'
+                      detail.pyNumber[index] > 0 &&
+                      pyPosition == 'bottom'
                   "
                   class="RLC-pinyin"
                   :class="[
                     pyColor == 'black' ? 'RLC-pinyin-black' : '',
                     pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                     pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
-                    noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                    noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                   ]"
+                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                   >{{ pItem.pinyin | handlePY }}</span
                 >
               </span>
@@ -148,19 +151,18 @@
                 <span
                   v-if="
                     detail.pyNumber &&
-                    detail.pyNumber[index] > 0 &&
-                    pyPosition == 'top'
+                      detail.pyNumber[index] > 0 &&
+                      pyPosition == 'top'
                   "
                   class="RLC-pinyin"
                   :class="[
                     pyColor == 'black' ? 'RLC-pinyin-black' : '',
                     pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                     pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
-                    noFont.indexOf(item[pIndex + 1].pinyin) > -1
-                      ? 'noFont'
-                      : '',
+                    noFont.indexOf(item[pIndex + 1].pinyin) > -1 ? 'noFont' : ''
                   ]"
                   style="text-align: left"
+                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                   >{{ item[pIndex + 1].pinyin | handlePY }}</span
                 >
 
@@ -168,34 +170,31 @@
                   :class="[
                     'RLC-chs',
 
-                    sentType == 'option' ? 'RLC-chs-option' : '',
+                    sentType == 'option' ? 'RLC-chs-option' : ''
                   ]"
                   :style="{
-                    fontSize:
-                      sentType != 'option' ? item[pIndex + 1].fontSize : '',
+                    fontSize: baseSizePhone + 6 + 'px',
                     color: item[pIndex + 1].fontColor,
-                    fontFamily: item[pIndex + 1].fontFamily,
+                    fontFamily: item[pIndex + 1].fontFamily
                   }"
                   v-html="item[pIndex + 1].chs"
-                  ></span
-                >
+                ></span>
 
                 <span
                   v-if="
                     detail.pyNumber &&
-                    detail.pyNumber[index] > 0 &&
-                    pyPosition == 'bottom'
+                      detail.pyNumber[index] > 0 &&
+                      pyPosition == 'bottom'
                   "
                   class="RLC-pinyin"
                   :class="[
                     pyColor == 'black' ? 'RLC-pinyin-black' : '',
                     pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                     pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
-                    noFont.indexOf(item[pIndex + 1].pinyin) > -1
-                      ? 'noFont'
-                      : '',
+                    noFont.indexOf(item[pIndex + 1].pinyin) > -1 ? 'noFont' : ''
                   ]"
                   style="text-align: left"
+                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                   >{{ item[pIndex + 1].pinyin | handlePY }}</span
                 >
               </span>
@@ -203,58 +202,54 @@
                 class="RLC-words-box"
                 v-if="
                   item[pIndex + 2] &&
-                  item[pIndex + 2].chs &&
-                  chsFhList.indexOf(item[pIndex + 2].chs) > -1
+                    item[pIndex + 2].chs &&
+                    chsFhList.indexOf(item[pIndex + 2].chs) > -1
                 "
               >
                 <span
                   v-if="
                     detail.pyNumber &&
-                    detail.pyNumber[index] > 0 &&
-                    pyPosition == 'top'
+                      detail.pyNumber[index] > 0 &&
+                      pyPosition == 'top'
                   "
                   :class="[
                     'RLC-pinyin',
                     pyColor == 'black' ? 'RLC-pinyin-black' : '',
                     pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                     pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
-                    noFont.indexOf(item[pIndex + 2].pinyin) > -1
-                      ? 'noFont'
-                      : '',
+                    noFont.indexOf(item[pIndex + 2].pinyin) > -1 ? 'noFont' : ''
                   ]"
                   style="text-align: left"
+                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                   >{{ item[pIndex + 2].pinyin }}</span
                 >
                 <span
                   :class="[
                     'RLC-chs',
-                    sentType == 'option' ? 'RLC-chs-option' : '',
+                    sentType == 'option' ? 'RLC-chs-option' : ''
                   ]"
                   :style="{
-                    fontSize:
-                      sentType != 'option' ? item[pIndex + 2].fontSize : '',
+                    fontSize: baseSizePhone + 6 + 'px',
                     color: item[pIndex + 2].fontColor,
-                    fontFamily: item[pIndex + 2].fontFamily,
+                    fontFamily: item[pIndex + 2].fontFamily
                   }"
                   v-html="item[pIndex + 2].chs"
-                  ></span
-                >
+                ></span>
                 <span
                   v-if="
                     detail.pyNumber &&
-                    detail.pyNumber[index] > 0 &&
-                    pyPosition == 'bottom'
+                      detail.pyNumber[index] > 0 &&
+                      pyPosition == 'bottom'
                   "
                   :class="[
                     'RLC-pinyin',
                     pyColor == 'black' ? 'RLC-pinyin-black' : '',
                     pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                     pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
-                    noFont.indexOf(item[pIndex + 2].pinyin) > -1
-                      ? 'noFont'
-                      : '',
+                    noFont.indexOf(item[pIndex + 2].pinyin) > -1 ? 'noFont' : ''
                   ]"
                   style="text-align: left"
+                  :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                   >{{ item[pIndex + 2].pinyin }}</span
                 >
               </span>
@@ -265,8 +260,8 @@
               <span
                 v-if="
                   detail.pyNumber &&
-                  detail.pyNumber[index] > 0 &&
-                  pyPosition == 'top'
+                    detail.pyNumber[index] > 0 &&
+                    pyPosition == 'top'
                 "
                 class="RLC-pinyin"
                 :class="[
@@ -274,8 +269,9 @@
                   pyColor == 'black' ? 'RLC-pinyin-black' : '',
                   pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                   pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
-                  noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                  noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                 ]"
+                :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                 >{{ pItem.pinyin | handlePY }}</span
               >
               <template v-if="!pItem.isHeng">
@@ -283,17 +279,16 @@
                   v-if="pItem.chs != '#'"
                   class="RLC-chs"
                   :style="{
-                    fontSize: sentType != 'option' ? pItem.fontSize : '',
+                    fontSize: baseSizePhone + 6 + 'px',
                     color: pItem.fontColor,
-                    fontFamily: pItem.fontFamily,
+                    fontFamily: pItem.fontFamily
                   }"
                   :class="[
                     pItem.chs != '“' && pItem.padding ? 'padding' : '',
-                    sentType == 'option' ? 'RLC-chs-option' : '',
+                    sentType == 'option' ? 'RLC-chs-option' : ''
                   ]"
                   v-html="pItem.chs"
-                  ></span
-                >
+                ></span>
               </template>
               <template v-else>
                 <template v-if="isInput">
@@ -301,9 +296,11 @@
                   <EditDiv
                     :id="
                       'sentenceTemp_' +
-                      Math.random().toString(36).substr(2) +
-                      '_' +
-                      index
+                        Math.random()
+                          .toString(36)
+                          .substr(2) +
+                        '_' +
+                        index
                     "
                     class="answer-input"
                     :class="[Isexample ? 'answer-input-example' : '']"
@@ -317,6 +314,7 @@
                           ? detail.hengList[index] * 60 + 'px'
                           : '120px',
                       textAlign: detail.hengList[index] ? 'center' : 'left',
+                      fontSize: baseSizePhone + 6 + 'px'
                     }"
                   />
                 </template>
@@ -325,26 +323,25 @@
                     v-if="pItem.chs != '#'"
                     class="RLC-chs"
                     :style="{
-                      fontSize: sentType != 'option' ? pItem.fontSize : '',
+                      fontSize: baseSizePhone + 6 + 'px',
                       color: pItem.fontColor,
                       textAlign: 'left',
-                      fontFamily: pItem.fontFamily,
+                      fontFamily: pItem.fontFamily
                     }"
                     :class="[
                       pItem.chs != '“' && pItem.padding ? 'padding' : '',
 
-                      sentType == 'option' ? 'RLC-chs-option' : '',
+                      sentType == 'option' ? 'RLC-chs-option' : ''
                     ]"
                     v-html="pItem.chs"
-                    ></span
-                  >
+                  ></span>
                 </template>
               </template>
               <span
                 v-if="
                   detail.pyNumber &&
-                  detail.pyNumber[index] > 0 &&
-                  pyPosition == 'bottom'
+                    detail.pyNumber[index] > 0 &&
+                    pyPosition == 'bottom'
                 "
                 class="RLC-pinyin"
                 :class="[
@@ -352,8 +349,9 @@
                   pyColor == 'black' ? 'RLC-pinyin-black' : '',
                   pyColor == 'grey' ? 'RLC-pinyin-grey' : '',
                   pyColor == 'sub' ? 'RLC-pinyin-sub' : '',
-                  noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                  noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                 ]"
+                :style="{ fontSize: baseSizePhone - 2 + 'px' }"
                 >{{ pItem.pinyin | handlePY }}</span
               >
             </template>
@@ -367,14 +365,15 @@
         v-for="(item, index) in detail.sentenceArr"
         :key="'sentenceArr' + index"
         v-html="item"
-      >
-      </div>
+        :style="{ fontSize: baseSizePhone + 6 + 'px' }"
+      ></div>
     </template>
     <template v-else-if="detail.sentence">
       <div
         class="sentence"
         v-html="detail.sentence"
         style="white-space: pre-wrap"
+        :style="{ fontSize: baseSizePhone + 6 + 'px' }"
       ></div>
     </template>
   </div>
@@ -393,6 +392,7 @@ export default {
     "isInput",
     "Isexample",
     "sentType",
+    "baseSizePhone"
   ],
   filters: {
     handlePY(pinyin) {
@@ -404,13 +404,13 @@ export default {
         py = pinyin;
       }
       return py;
-    },
+    }
   },
   data() {
     return {
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
       chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
-      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
+      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"]
     };
   },
   computed: {
@@ -420,7 +420,7 @@ export default {
         classname = "sentence-temp-24";
       }
       return classname;
-    },
+    }
   },
   watch: {},
   //方法集合
@@ -438,10 +438,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .sentence-temp {
   //   padding: 9px 0;
@@ -570,4 +570,4 @@ export default {
     line-height: 1.4;
   }
 }
-</style>
+</style>

src/components/Adult/phonePreview/components/ShortInputTemp.vue

@@ -6,23 +6,43 @@
       v-for="(item, index) in doubleInput"
       :key="'short-input-temp' + index"
     >
-      <span class="short-notice" v-if="item.notice">{{ item.notice }}</span>
+      <span
+        class="short-notice"
+        v-if="item.notice"
+        :style="{ fontSize: baseSizePhone + 6 + 'px' }"
+        >{{ item.notice }}</span
+      >
       <template v-if="judgeAnswer == 'standardAnswer'">
         <EditDiv
-          :id="'sentence_' + Math.random().toString(36).substr(2) + '_' + index"
+          :id="
+            'sentence_' +
+              Math.random()
+                .toString(36)
+                .substr(2) +
+              '_' +
+              index
+          "
           :class="[
             'answer-input',
             is_short_auto ? 'answer-input-auto' : '',
-            'userRight',
+            'userRight'
           ]"
           v-model="item.correct"
           :canEdit="false"
           textAlign="center"
+          :style="{ fontSize: baseSizePhone + 2 + 'px' }"
         />
       </template>
       <template v-else>
         <EditDiv
-          :id="'sentence_' + Math.random().toString(36).substr(2) + '_' + index"
+          :id="
+            'sentence_' +
+              Math.random()
+                .toString(36)
+                .substr(2) +
+              '_' +
+              index
+          "
           :class="[
             'answer-input',
             is_short_auto ? 'answer-input-auto' : '',
@@ -33,7 +53,7 @@
               : item.correct &&
                 item.correct != Bookanswer.doubleInput[index].correct
               ? 'userError'
-              : '',
+              : ''
           ]"
           v-model="Bookanswer.doubleInput[index].correct"
           :canEdit="
@@ -42,6 +62,7 @@
           textAlign="center"
           @saveBlankTF="saveBlankTF"
           :hengIndex="index"
+          :style="{ fontSize: baseSizePhone + 2 + 'px' }"
         />
       </template>
     </div>
@@ -52,7 +73,7 @@
 import EditDiv from "../EditDiv.vue";
 export default {
   components: {
-    EditDiv,
+    EditDiv
   },
   props: [
     "doubleInput",
@@ -60,6 +81,7 @@ export default {
     "TaskModel",
     "is_short_auto",
     "judgeAnswer",
+    "baseSizePhone"
   ],
   data() {
     return {};
@@ -87,7 +109,7 @@ export default {
           );
         }
       }
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -99,10 +121,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .short-input-temp {
   width: 100%;
@@ -167,4 +189,4 @@ export default {
     }
   }
 }
-</style>
+</style>