启动页 移动端适配

src/components/Adult/phonePreview/CourseStart.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="NPC-courseStart">
-    <h2 :class="[curQue.titleType == 'cn' ? 'hanzi' : '']">
+    <h2
+      :class="[curQue.titleType == 'cn' ? 'hanzi' : '']"
+      :style="{ fontSize: baseSizePhone + 10 + 'px' }"
+    >
       {{ curQue.title }}
     </h2>
     <div class="item-content">
       <template v-if="curQue.detail.wordsList.length == 0">
-        <p :class="['content-con']" v-if="curQue.detail.sentence">
+        <p
+          :class="['content-con']"
+          v-if="curQue.detail.sentence"
+          :style="{ fontSize: baseSizePhone + 24 + 'px' }"
+        >
           {{ curQue.detail.sentence }}
         </p>
       </template>
@@ -20,9 +27,9 @@
             <template
               v-if="
                 curQue.detail.wordsList[indexCon + 1] &&
-                curQue.detail.wordsList[indexCon + 1].chs &&
-                chsFhList.indexOf(curQue.detail.wordsList[indexCon + 1].chs) >
-                  -1
+                  curQue.detail.wordsList[indexCon + 1].chs &&
+                  chsFhList.indexOf(curQue.detail.wordsList[indexCon + 1].chs) >
+                    -1
               "
             >
               <div class="synthesis-box">
@@ -30,11 +37,16 @@
                   <span
                     class="pinyin"
                     :class="[
-                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                     ]"
+                    :style="{ fontSize: baseSizePhone + 10 + 'px' }"
                     >{{ itemCon.pinyin }}</span
                   >
-                  <span class="hanzi content-con">{{ itemCon.chs }}</span>
+                  <span
+                    class="hanzi content-con"
+                    :style="{ fontSize: baseSizePhone + 26 + 'px' }"
+                    >{{ itemCon.chs }}</span
+                  >
                 </div>
                 <div style="text-align: left">
                   <span
@@ -44,13 +56,16 @@
                         items.detail.wordsList[indexCon + 1].pinyin
                       ) > -1
                         ? 'noFont'
-                        : '',
+                        : ''
                     ]"
+                    :style="{ fontSize: baseSizePhone + 10 + 'px' }"
                     >{{ curQue.detail.wordsList[indexCon + 1].pinyin }}</span
                   >
-                  <span class="hanzi content-con">{{
-                    curQue.detail.wordsList[indexCon + 1].chs
-                  }}</span>
+                  <span
+                    class="hanzi content-con"
+                    :style="{ fontSize: baseSizePhone + 26 + 'px' }"
+                    >{{ curQue.detail.wordsList[indexCon + 1].chs }}</span
+                  >
                 </div>
               </div>
             </template>
@@ -58,41 +73,61 @@
               <span
                 class="pinyin"
                 :class="[noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '']"
+                :style="{ fontSize: baseSizePhone + 10 + 'px' }"
                 >{{ itemCon.pinyin }}</span
               >
-              <span class="hanzi content-con">{{ itemCon.chs }}</span>
+              <span
+                class="hanzi content-con"
+                :style="{ fontSize: baseSizePhone + 26 + 'px' }"
+                >{{ itemCon.chs }}</span
+              >
             </template>
           </div>
         </div>
       </template>
-      <b class="content-en" v-if="curQue.en">{{ curQue.en }}</b>
+      <b
+        class="content-en"
+        v-if="curQue.en"
+        :style="{ fontSize: baseSizePhone + 6 + 'px' }"
+        >{{ curQue.en }}</b
+      >
     </div>
     <div class="item-intro-box">
-      <div class="item-intro" :style="{textIndent:curQue.textindent?'2em':''}" v-if="curQue.con">
+      <div
+        class="item-intro"
+        :style="{
+          textIndent: curQue.textindent ? '2em' : '',
+          fontSize: baseSizePhone + 2 + 'px'
+        }"
+        v-if="curQue.con"
+      >
         {{ curQue.con }}
       </div>
-      <template v-if="curQue.conDetail&&curQue.conDetail.sentence">
+      <template v-if="curQue.conDetail && curQue.conDetail.sentence">
         <div class="item-intro">
-            <OneSentenceTemp
-                :detail="curQue.conDetail"
-                :TaskModel="TaskModel"
-                :Bookanswer="[]"
-                :correctAnswer="[]"
-                :isInput="
-                    false
-                "
-                :pyPosition="'top'"
-                :pyColors="'rgba(255, 255, 255, 0.85)'"
-                :fn_check_list="[]"
-                :pyNumber="pyNumber"
-                :record_check="[]"
-                :maxFontsize="maxFontsize"
-                :textIndent="curQue.textindent"
-            />
+          <OneSentenceTemp
+            :detail="curQue.conDetail"
+            :TaskModel="TaskModel"
+            :Bookanswer="[]"
+            :correctAnswer="[]"
+            :isInput="false"
+            :pyPosition="'top'"
+            :pyColors="'rgba(255, 255, 255, 0.85)'"
+            :fn_check_list="[]"
+            :pyNumber="pyNumber"
+            :record_check="[]"
+            :maxFontsize="baseSizePhone"
+            :textIndent="curQue.textindent"
+          />
         </div>
       </template>
     </div>
-    <a class="start-btn" @click="handleNNPEnext">开始学习</a>
+    <a
+      class="start-btn"
+      @click="handleNNPEnext"
+      :style="{ fontSize: baseSizePhone + 6 + 'px' }"
+      >开始学习</a
+    >
   </div>
 </template>
 
@@ -102,8 +137,8 @@
 import OneSentenceTemp from "./components/OneSentenceTemp.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: {OneSentenceTemp},
-  props: ["curQue", "handleNNPEnext","TaskModel"],
+  components: { OneSentenceTemp },
+  props: ["curQue", "handleNNPEnext", "TaskModel", "baseSizePhone"],
   data() {
     //这里存放数据
     return {
@@ -111,7 +146,7 @@ export default {
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
       pyNumber: 0,
       maxFontsize: 16,
-      titleChsFhList:["，", "”","。","：", "》", "？", "！", "；"],
+      titleChsFhList: ["，", "”", "。", "：", "》", "？", "！", "；"]
     };
   },
   //计算属性 类似于data概念
@@ -122,37 +157,37 @@ export default {
   methods: {
     // 处理数据
     handleData() {
-        let _this = this;
-        let curQue = JSON.parse(JSON.stringify(this.curQue));
-        let paraArr = [];
-        curQue.detail.wordsList.forEach((sItem, sIndex) => {
-            let obj = {
-                pinyin: sItem.pinyin,
-                chs: sItem.chs,
-                isShow: true,
-            };
-            paraArr.push(obj);
-        });
-        this.$set(_this.curQue.detail, "resArr", paraArr);
+      let _this = this;
+      let curQue = JSON.parse(JSON.stringify(this.curQue));
+      let paraArr = [];
+      curQue.detail.wordsList.forEach((sItem, sIndex) => {
+        let obj = {
+          pinyin: sItem.pinyin,
+          chs: sItem.chs,
+          isShow: true
+        };
+        paraArr.push(obj);
+      });
+      this.$set(_this.curQue.detail, "resArr", paraArr);
 
-        if(this.curQue.hasOwnProperty("conDetail")){
-            let isHasPY = 0;
-            let maxFontsize = 16;
-              if (this.curQue.conDetail.wordsList.length > 0) {
-                this.curQue.conDetail.wordsList.forEach((sItem, sIndex) => {
-                  this.mergeWordSymbol(sItem);
-                  if (sItem.pinyin) {
-                    isHasPY++;
-                  }
-                  sItem.fontColor='rgba(255, 255, 255, 0.85)'
-                  let fontSize = JSON.parse(JSON.stringify(sItem.fontSize));
-                  fontSize = Number(fontSize.replace("px", ""));
-                  maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
-                });
-              } 
-            this.maxFontsize = maxFontsize;
-            this.pyNumber = isHasPY;
+      if (this.curQue.hasOwnProperty("conDetail")) {
+        let isHasPY = 0;
+        let maxFontsize = 16;
+        if (this.curQue.conDetail.wordsList.length > 0) {
+          this.curQue.conDetail.wordsList.forEach((sItem, sIndex) => {
+            this.mergeWordSymbol(sItem);
+            if (sItem.pinyin) {
+              isHasPY++;
+            }
+            sItem.fontColor = "rgba(255, 255, 255, 0.85)";
+            let fontSize = JSON.parse(JSON.stringify(sItem.fontSize));
+            fontSize = Number(fontSize.replace("px", ""));
+            maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
+          });
         }
+        this.maxFontsize = maxFontsize;
+        this.pyNumber = isHasPY;
+      }
     },
     //词和标点合一起
     mergeWordSymbol(sItem) {
@@ -161,7 +196,7 @@ export default {
       } else {
         sItem.isShow = true;
       }
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -182,7 +217,7 @@ export default {
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
+  activated() {}
 };
 </script>
 <style lang="scss" scoped>
@@ -191,10 +226,10 @@ export default {
   width: 100%;
   background: #e35454;
   color: rgba(255, 255, 255, 0.85);
-  padding: 40px;
+  padding: 15px;
   h2 {
     font-size: 24px;
-    line-height: 32px;
+    line-height: 1.3;
     font-weight: normal;
     text-align: center;
     font-family: "robot";
@@ -209,7 +244,7 @@ export default {
   }
   .content-con {
     font-size: 40px;
-    line-height: 48px;
+    line-height: 1.2;
     font-family: "FZJCGFKTK";
     margin: 0;
     &.content-con-small {
@@ -219,7 +254,7 @@ export default {
   .content-en {
     font-weight: normal;
     font-size: 20px;
-    line-height: 28px;
+    line-height: 1.4;
     font-family: "robot";
     display: block;
   }
@@ -254,7 +289,7 @@ export default {
       border: 1px solid rgba(0, 0, 0, 0.1);
       box-sizing: border-box;
       border-radius: 8px;
-      padding: 24px;
+      padding: 15px;
       font-size: 16px;
       line-height: 150%;
       white-space: pre-wrap;
@@ -304,4 +339,4 @@ export default {
     }
   }
 }
-</style>
+</style>