图片模板 移动端

src/components/Adult/phonePreview/Picture.vue

@@ -13,22 +13,18 @@
             "
             class="pinyin"
             :style="{
-              fontSize: items.fontSize
-                ? items.fontSize.substring(0, 2) - 6 + 'px'
-                : ''
+              fontSize: baseSizePhone - 2 + 'px'
             }"
             >{{ items.pinyin }}</span
           >
-          <p v-if="items.hanzi" :style="{ fontSize: items.fontSize }">
+          <p v-if="items.hanzi" :style="{ fontSize: baseSizePhone + 2 + 'px' }">
             {{ items.hanzi }}
           </p>
           <span
             v-if="items.pinyin && items.pinyinSite == 'bottom'"
             class="pinyin"
             :style="{
-              fontSize: items.fontSize
-                ? items.fontSize.substring(0, 2) - 6 + 'px'
-                : ''
+              fontSize: baseSizePhone - 2 + 'px'
             }"
             >{{ items.pinyin }}</span
           >
@@ -40,6 +36,7 @@
           fit="scale-down"
           class="img_url"
           @click="playmicrophone(items.mp3_list[0].id, 'mp3')"
+          :preview-src-list="[itemss.id]"
         >
           <div slot="placeholder" class="image-slot">
             <img src="../../../assets/common/icon-imgloading.png" />
@@ -59,21 +56,17 @@
             "
             class="pinyin"
             :style="{
-              fontSize: items.fontSize
-                ? items.fontSize.substring(0, 2) - 6 + 'px'
-                : ''
+              fontSize: baseSizePhone - 2 + 'px'
             }"
             >{{ items.pinyin }}</span
           >
-          <p v-if="items.hanzi" :style="{ fontSize: items.fontSize }">
+          <p v-if="items.hanzi" :style="{ fontSize: baseSizePhone + 2 + 'px' }">
             {{ items.hanzi }}
           </p>
           <span
             v-if="items.pinyin && items.pinyinSite == 'bottom'"
             :style="{
-              fontSize: items.fontSize
-                ? items.fontSize.substring(0, 2) - 6 + 'px'
-                : ''
+              fontSize: baseSizePhone - 2 + 'px'
             }"
             class="pinyin"
             >{{ items.pinyin }}</span
@@ -95,7 +88,7 @@
             :readonly="TaskModel == 'ANSWER'"
             maxlength="200"
             :class="['singleInput', 'userRight', inputAnswerClass('input', 0)]"
-            :style="{ fontSize: items.fontSize }"
+            :style="{ fontSize: baseSizePhone + 2 + 'px' }"
           />
         </template>
         <template v-else>
@@ -106,7 +99,7 @@
             :readonly="TaskModel == 'ANSWER'"
             maxlength="200"
             :class="['singleInput', inputAnswerClass('input', 0)]"
-            :style="{ fontSize: items.fontSize }"
+            :style="{ fontSize: baseSizePhone + 2 + 'px' }"
           />
         </template>
       </template>
@@ -114,9 +107,11 @@
       <!-- 补齐输入 -->
       <template v-if="ChildType == 'image_gdcy'">
         <div class="fill-box">
-          <b v-if="items.hanzi" :style="{ fontSize: items.fontSize }">{{
-            items.hanzi
-          }}</b>
+          <b
+            v-if="items.hanzi"
+            :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+            >{{ items.hanzi }}</b
+          >
           <template v-if="judgeAnswer == 'standardAnswer'">
             <input
               v-model="curQue.correct[0].input[0]"
@@ -125,7 +120,7 @@
               :readonly="true"
               maxlength="200"
               :class="inputAnswerClass('input', 0)"
-              :style="{ fontSize: items.fontSize }"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
             />
           </template>
           <template v-else>
@@ -136,7 +131,7 @@
               :readonly="TaskModel == 'ANSWER'"
               maxlength="200"
               :class="inputAnswerClass('input', 0)"
-              :style="{ fontSize: items.fontSize }"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
             />
           </template>
         </div>
@@ -151,7 +146,7 @@
               :readonly="true"
               maxlength="200"
               :class="inputAnswerClass('input', 0)"
-              :style="{ fontSize: items.fontSize }"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
             />
             <input
               placeholder=""
@@ -159,7 +154,7 @@
               :readonly="true"
               maxlength="200"
               :class="inputAnswerClass('input', 1)"
-              :style="{ fontSize: items.fontSize }"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
             />
           </template>
           <template v-else>
@@ -170,7 +165,7 @@
               :readonly="TaskModel == 'ANSWER'"
               maxlength="200"
               :class="inputAnswerClass('input', 0)"
-              :style="{ fontSize: items.fontSize }"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
             />
             <input
               placeholder=""
@@ -179,7 +174,7 @@
               :readonly="TaskModel == 'ANSWER'"
               maxlength="200"
               :class="inputAnswerClass('input', 1)"
-              :style="{ fontSize: items.fontSize }"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
             />
           </template>
         </div>
@@ -239,15 +234,13 @@
                       "
                       class="pinyin"
                       :style="{
-                        fontSize: items.fontSize
-                          ? items.fontSize.substring(0, 2) - 6 + 'px'
-                          : ''
+                        fontSize: baseSizePhone - 2 + 'px'
                       }"
                       >{{ itemss.pinyin }}</span
                     >
                     <p
                       v-if="itemss.hanzi"
-                      :style="{ fontSize: items.fontSize }"
+                      :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                     >
                       {{ itemss.hanzi }}
                     </p>
@@ -255,9 +248,7 @@
                       v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                       class="pinyin"
                       :style="{
-                        fontSize: items.fontSize
-                          ? items.fontSize.substring(0, 2) - 6 + 'px'
-                          : ''
+                        fontSize: baseSizePhone - 2 + 'px'
                       }"
                       >{{ itemss.pinyin }}</span
                     >
@@ -282,15 +273,13 @@
                       "
                       class="pinyin"
                       :style="{
-                        fontSize: items.fontSize
-                          ? items.fontSize.substring(0, 2) - 6 + 'px'
-                          : ''
+                        fontSize: baseSizePhone - 2 + 'px'
                       }"
                       >{{ itemss.pinyin }}</span
                     >
                     <p
                       v-if="itemss.hanzi"
-                      :style="{ fontSize: items.fontSize }"
+                      :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                     >
                       {{ itemss.hanzi }}
                     </p>
@@ -298,9 +287,7 @@
                       v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                       class="pinyin"
                       :style="{
-                        fontSize: items.fontSize
-                          ? items.fontSize.substring(0, 2) - 6 + 'px'
-                          : ''
+                        fontSize: baseSizePhone - 2 + 'px'
                       }"
                       >{{ itemss.pinyin }}</span
                     >
@@ -329,15 +316,13 @@
                       "
                       class="pinyin"
                       :style="{
-                        fontSize: items.fontSize
-                          ? items.fontSize.substring(0, 2) - 6 + 'px'
-                          : ''
+                        fontSize: baseSizePhone - 2 + 'px'
                       }"
                       >{{ itemss.pinyin }}</span
                     >
                     <p
                       v-if="itemss.hanzi"
-                      :style="{ fontSize: items.fontSize }"
+                      :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                     >
                       {{ itemss.hanzi }}
                     </p>
@@ -345,9 +330,7 @@
                       v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                       class="pinyin"
                       :style="{
-                        fontSize: items.fontSize
-                          ? items.fontSize.substring(0, 2) - 6 + 'px'
-                          : ''
+                        fontSize: baseSizePhone - 2 + 'px'
                       }"
                       >{{ itemss.pinyin }}</span
                     >
@@ -373,15 +356,13 @@
                       "
                       class="pinyin"
                       :style="{
-                        fontSize: items.fontSize
-                          ? items.fontSize.substring(0, 2) - 6 + 'px'
-                          : ''
+                        fontSize: baseSizePhone - 2 + 'px'
                       }"
                       >{{ itemss.pinyin }}</span
                     >
                     <p
                       v-if="itemss.hanzi"
-                      :style="{ fontSize: items.fontSize }"
+                      :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                     >
                       {{ itemss.hanzi }}
                     </p>
@@ -389,9 +370,7 @@
                       v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                       class="pinyin"
                       :style="{
-                        fontSize: items.fontSize
-                          ? items.fontSize.substring(0, 2) - 6 + 'px'
-                          : ''
+                        fontSize: baseSizePhone - 2 + 'px'
                       }"
                       >{{ itemss.pinyin }}</span
                     >
@@ -425,10 +404,11 @@
               : []
           "
           :TaskModel="TaskModel"
-          :type="items.RecordControl ? items.RecordControl : 'normal'"
+          :type="'normal'"
           class="luyin-box"
           :class="[items.RecordControl]"
           v-if="fn_list_obj.indexOf('image_record') > -1 || items.RecordControl"
+          :baseSizePhone="baseSizePhone"
         />
         <!-- <span :class="['luyin',microphoneStatus?'active':'']" @click="microphone"></span>
                     <span :class="['play',hasMicro]" @click="playmicrophone(wavblob)"></span> -->
@@ -439,7 +419,7 @@
 </template>
 
 <script>
-import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
 import Recorder from "js-audio-recorder"; //录音插件
 export default {
   components: { Soundrecord },
@@ -938,7 +918,7 @@ export default {
     padding: 8px;
     border-radius: 8px;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    background: #fff;
+    // background: #fff;
     position: relative;
     .xuhao {
       position: absolute;
@@ -1027,6 +1007,7 @@ export default {
       text-align: center;
       font-size: 16px;
       line-height: 150%;
+      background: transparent;
       &.singleInput {
         margin-top: 8px;
       }

src/components/Adult/phonePreview/PlayRecordView.vue

@@ -57,5 +57,6 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .PlayRecordView {
+  width: 100%;
 }
 </style>