注释 移动端

src/components/Adult/phonePreview/Notes.vue

@@ -13,13 +13,27 @@
               :fn_check_list="[]"
               :pyNumber="0"
               :record_check="[]"
+              :maxFontsize="baseSizePhone"
             />
           </div>
         </template>
-        <span class="NPC-topTitle-text" v-else>{{ curQue.title }}</span>
+        <span
+          class="NPC-topTitle-text"
+          v-else
+          :style="{
+            fontSize: baseSizePhone + 2 + 'px'
+          }"
+          >{{ curQue.title }}</span
+        >
       </div>
       <div class="NPC-top-right" @click="handleChangeTab">
-        <span class="NPC-top-right-text">{{ wordShow ? "收起" : "展开" }}</span>
+        <span
+          class="NPC-top-right-text"
+          :style="{
+            fontSize: baseSizePhone + 'px'
+          }"
+          >{{ wordShow ? "收起" : "展开" }}</span
+        >
         <img v-if="wordShow" src="../../../assets/NPC/down.png" alt="" />
         <img v-else class="rotate" src="../../../assets/NPC/down.png" alt="" />
       </div>
@@ -32,13 +46,37 @@
           :key="'NPC-notes' + index"
         >
           <div class="NPC-notes-con">
-            <span class="NPC-notes-con-number">{{ item.number }}</span>
-            <span class="NPC-notes-con-text">{{ item.con }}</span>
+            <span
+              class="NPC-notes-con-number"
+              :style="{
+                fontSize: baseSizePhone + 'px'
+              }"
+              >{{ item.number }}</span
+            >
+            <span
+              class="NPC-notes-con-text"
+              :style="{
+                fontSize: baseSizePhone + 'px'
+              }"
+              >{{ item.con }}</span
+            >
           </div>
-          <div class="NPC-notes-trans">
+          <div
+            class="NPC-notes-trans"
+            :style="{
+              fontSize: baseSizePhone + 'px'
+            }"
+          >
             {{ item.interpret }}
           </div>
-          <div class="NPC-notes-note" v-if="item.note" v-html="item.note"></div>
+          <div
+            class="NPC-notes-note"
+            v-if="item.note"
+            v-html="item.note"
+            :style="{
+              fontSize: baseSizePhone + 'px'
+            }"
+          ></div>
           <div
             class="NPC-notes-note-img"
             v-if="item.img_list && item.img_list.length > 0"
@@ -47,7 +85,17 @@
               v-for="(imgItem, imgIndex) in item.img_list"
               :key="'imgList' + imgIndex"
             >
-              <img :src="imgItem.id" class="NPC-notes-img" />
+              <!-- <img :src="imgItem.id" class="NPC-notes-img" /> -->
+              <el-image
+                :src="imgItem.id"
+                fit="scale-down"
+                class="img_url"
+                :preview-src-list="[imgItem.id]"
+              >
+                <div slot="placeholder" class="image-slot">
+                  <img src="../../../assets/common/icon-imgloading.png" />
+                </div>
+              </el-image>
             </div>
           </div>
         </div>
@@ -67,7 +115,7 @@ export default {
     WordPhraseDetail,
     OneSentenceTemp
   },
-  props: ["curQue", "TaskModel"],
+  props: ["curQue", "TaskModel", "baseSizePhone"],
   data() {
     //这里存放数据
     return {
@@ -138,12 +186,12 @@ export default {
 /* @import url(); 引入css类 */
 .NPC-zhedie {
   width: 780px;
-  margin-bottom: 24px;
+  // margin-bottom: 24px;
   .topTitle {
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding-left: 24px;
+    padding-left: 10px;
     padding-right: 16px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     overflow: hidden;
@@ -193,18 +241,18 @@ export default {
     }
   }
   .NPC-notes-list {
-    padding: 24px 24px 5px 24px;
+    padding: 10px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-top: none;
     border-radius: 0 0 8px 8px;
     .NPC-notes {
       width: 100%;
-      margin-bottom: 24px;
+      margin-bottom: 10px;
       .NPC-notes-con {
         display: flex;
         justify-content: flex-start;
         align-items: center;
-        margin-bottom: 12px;
+        margin-bottom: 8px;
         > span {
           font-style: normal;
           font-weight: normal;
@@ -228,7 +276,7 @@ export default {
         font-size: 14px;
         line-height: 150%;
         color: #000000;
-        margin-bottom: 12px;
+        margin-bottom: 8px;
         padding-left: 27px;
       }
       .NPC-notes-note {

src/components/Adult/phonePreview/components/OneSentenceTemp.vue

@@ -644,7 +644,8 @@
           {
             'white-space': 'pre-wrap',
             'line-height': (maxFontsize * 3) / 2 + 'px',
-            'text-indent': textIndent ? '2em' : '0'
+            'text-indent': textIndent ? '2em' : '0',
+            'font-size': maxFontsize + 2 + 'px'
           },
           sentenceStyle
         ]"