课文上方的问题 移动端

src/components/Adult/phonePreview/TextProblem.vue

@@ -1,122 +1,218 @@
 <!--  -->
 <template>
   <div class="Big-Book-prev-Textdes Textproblem" v-if="curQue">
-      <h2 v-if="curQue.title">{{curQue.title}}</h2>
-      <ul>
-          <li v-for="(item,index) in curQue.option" :key="index">
-              <b v-if="item.number">{{item.number}}</b>
-              <div class="content-right">
-                  <template v-if="item.detail.wordsList.length>0">
-                      <div class="con-box">
-                          <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in item.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
-                              <template v-if="item.detail.wordsList[indexCon + 1] && item.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(item.detail.wordsList[indexCon + 1].chs) > -1">
-                                  <div class="synthesis-box">
-                                      <div>
-                                            <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='top'">{{itemCon.pinyin}}</span>
-                                            <span class="hanzi content-con" :style="wordStyle(itemCon.config)">{{itemCon.chs}}</span>
-                                            <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='bottom'">{{itemCon.pinyin}}</span>
-                                        </div>
-                                        <div style="text-align: left">
-                                            <span class="pinyin" :class="[noFont.indexOf(item.detail.wordsList[indexCon + 1].pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='top'">{{item.detail.wordsList[indexCon + 1].pinyin}}</span>
-                                            <span class="hanzi content-con" :style="wordStyle(item.detail.wordsList[indexCon + 1].config)">{{item.detail.wordsList[indexCon + 1].chs}}</span>
-                                            <span class="pinyin" :class="[noFont.indexOf(item.detail.wordsList[indexCon + 1].pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='bottom'">{{item.detail.wordsList[indexCon + 1].pinyin}}</span>
-                                        </div>
-                                  </div>
-                                  
-                              </template>
-                              <template v-else>
-                                    <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='top'">{{itemCon.pinyin}}</span>
-                                    <span class="hanzi content-con" :style="wordStyle(itemCon.config)">{{itemCon.chs}}</span>
-                                    <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='bottom'">{{itemCon.pinyin}}</span>
-                              </template>
-                          </div>
-                      </div>
-                  </template>
-                  <template v-else>
-                      <p class="hanzi content-con">
-                          {{item.detail.sentence}}
-                      </p>
-                  </template>
-                  <span class="english" v-if="item.en">{{item.en}}</span>
+    <h2 v-if="curQue.title" :style="{ fontSize: baseSizePhone + 2 + 'px' }">
+      {{ curQue.title }}
+    </h2>
+    <ul>
+      <li v-for="(item, index) in curQue.option" :key="index">
+        <b
+          v-if="item.number"
+          key=""
+          :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+          >{{ item.number }}</b
+        >
+        <div class="content-right">
+          <template v-if="item.detail.wordsList.length > 0">
+            <div class="con-box">
+              <div
+                :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
+                v-for="(itemCon, indexCon) in item.detail.resArr"
+                :key="indexCon"
+                v-show="itemCon.isShow"
+              >
+                <template
+                  v-if="
+                    item.detail.wordsList[indexCon + 1] &&
+                      item.detail.wordsList[indexCon + 1].chs &&
+                      chsFhList.indexOf(
+                        item.detail.wordsList[indexCon + 1].chs
+                      ) > -1
+                  "
+                >
+                  <div class="synthesis-box">
+                    <div>
+                      <span
+                        class="pinyin"
+                        :class="[
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
+                        ]"
+                        v-if="item.detail.pyPosition == 'top'"
+                        :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+                        >{{ itemCon.pinyin }}</span
+                      >
+                      <span
+                        class="hanzi content-con"
+                        :style="wordStyle(itemCon.config)"
+                        >{{ itemCon.chs }}</span
+                      >
+                      <span
+                        class="pinyin"
+                        :class="[
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
+                        ]"
+                        v-if="item.detail.pyPosition == 'bottom'"
+                        :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+                        >{{ itemCon.pinyin }}</span
+                      >
+                    </div>
+                    <div style="text-align: left">
+                      <span
+                        class="pinyin"
+                        :class="[
+                          noFont.indexOf(
+                            item.detail.wordsList[indexCon + 1].pinyin
+                          ) > -1
+                            ? 'noFont'
+                            : ''
+                        ]"
+                        :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+                        v-if="item.detail.pyPosition == 'top'"
+                        >{{ item.detail.wordsList[indexCon + 1].pinyin }}</span
+                      >
+                      <span
+                        class="hanzi content-con"
+                        :style="
+                          wordStyle(item.detail.wordsList[indexCon + 1].config)
+                        "
+                        >{{ item.detail.wordsList[indexCon + 1].chs }}</span
+                      >
+                      <span
+                        class="pinyin"
+                        :class="[
+                          noFont.indexOf(
+                            item.detail.wordsList[indexCon + 1].pinyin
+                          ) > -1
+                            ? 'noFont'
+                            : ''
+                        ]"
+                        :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+                        v-if="item.detail.pyPosition == 'bottom'"
+                        >{{ item.detail.wordsList[indexCon + 1].pinyin }}</span
+                      >
+                    </div>
+                  </div>
+                </template>
+                <template v-else>
+                  <span
+                    class="pinyin"
+                    :class="[
+                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
+                    ]"
+                    :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+                    v-if="item.detail.pyPosition == 'top'"
+                    >{{ itemCon.pinyin }}</span
+                  >
+                  <span
+                    class="hanzi content-con"
+                    :style="wordStyle(itemCon.config)"
+                    >{{ itemCon.chs }}</span
+                  >
+                  <span
+                    class="pinyin"
+                    :class="[
+                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
+                    ]"
+                    :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+                    v-if="item.detail.pyPosition == 'bottom'"
+                    >{{ itemCon.pinyin }}</span
+                  >
+                </template>
               </div>
-          </li>
-      </ul>
+            </div>
+          </template>
+          <template v-else>
+            <p
+              class="hanzi content-con"
+              :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+            >
+              {{ item.detail.sentence }}
+            </p>
+          </template>
+          <span
+            class="english"
+            v-if="item.en"
+            :style="{ fontSize: baseSizePhone + 'px' }"
+            >{{ item.en }}</span
+          >
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
 export default {
   components: {},
-  props: ["curQue"],
+  props: ["curQue", "baseSizePhone"],
   data() {
     return {
-        chsFhList: ["，", "。", "“", "：", "》", "？", "！", "；"],
-        noFont: ['~','!','@','#','$','%','^','&','*','(',')'], // 对应不要拼音字体
+      chsFhList: ["，", "。", "“", "：", "》", "？", "！", "；"],
+      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"] // 对应不要拼音字体
     };
   },
   computed: {
     wordStyle() {
-      return function (config) {
-        if(config){
-            let sizeVal = config.fontSize.replace("px", "");
-            return {
-                minHeight: Number(sizeVal) + 9 + "px",
-                lineHeight: Number(sizeVal) + 8 + "px",
-                fontSize: config.fontSize,
-                fontFamily: config.fontFamily
-            };
+      return function(config) {
+        if (config) {
+          let sizeVal = config.fontSize.replace("px", "");
+          return {
+            minHeight: Number(sizeVal) + 9 + "px",
+            lineHeight: Number(sizeVal) + 8 + "px",
+            fontSize: this.baseSizePhone + 2 + "px",
+            fontFamily: config.fontFamily
+          };
         }
-        
       };
-    },
+    }
   },
   watch: {},
   //方法集合
   methods: {
     // 处理数据
-    handleData(){
-        let _this = this
-        let curQue = JSON.parse(JSON.stringify(this.curQue));
-        curQue.option.forEach((dItem, dIndex) => {
-            let paraArr = []
-            if(dItem.detail){
-                dItem.detail.wordsList.forEach((sItem, sIndex) => {
-                    this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
-                    let obj = {
-                        pinyin: sItem.pinyin,
-                        chs: sItem.chs,
-                        isShow: sItem.isShow,
-                        config: {
-                            fontColor: sItem.fontColor,
-                            fontFamily: sItem.fontFamily,
-                            fontSize: sItem.fontSize,
-                            underLine: sItem.underLine,
-                            wordPadding: sItem.wordPadding,
-                        },
-                    };
-                    paraArr.push(obj);
-                })
-            }
-            this.$set(_this.curQue.option[dIndex].detail,'resArr',paraArr)
-        })
+    handleData() {
+      let _this = this;
+      let curQue = JSON.parse(JSON.stringify(this.curQue));
+      curQue.option.forEach((dItem, dIndex) => {
+        let paraArr = [];
+        if (dItem.detail) {
+          dItem.detail.wordsList.forEach((sItem, sIndex) => {
+            this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
+            let obj = {
+              pinyin: sItem.pinyin,
+              chs: sItem.chs,
+              isShow: sItem.isShow,
+              config: {
+                fontColor: sItem.fontColor,
+                fontFamily: sItem.fontFamily,
+                fontSize: sItem.fontSize,
+                underLine: sItem.underLine,
+                wordPadding: sItem.wordPadding
+              }
+            };
+            paraArr.push(obj);
+          });
+        }
+        this.$set(_this.curQue.option[dIndex].detail, "resArr", paraArr);
+      });
     },
     //词和标点合一起
     mergeWordSymbol(sItem, wItem, curIndex) {
-        let leg = sItem.length;
-        if (curIndex < leg - 1) {
-            if (this.chsFhList.indexOf(wItem.chs) > -1) {
-                wItem.isShow = false;
-            } else {
-                wItem.isShow = true;
-            }
-        }else{
-            wItem.isShow = true;
+      let leg = sItem.length;
+      if (curIndex < leg - 1) {
+        if (this.chsFhList.indexOf(wItem.chs) > -1) {
+          wItem.isShow = false;
+        } else {
+          wItem.isShow = true;
         }
-    },
+      } else {
+        wItem.isShow = true;
+      }
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-      this.handleData()
+    this.handleData();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -126,88 +222,88 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
-.Textproblem{
-    width: 100%;
-    padding: 8px 24px;
-    background: #F7F7F7;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    margin-bottom: 24px;
-    h2{
-        margin: 16px 0 0;
-        font-weight: 500;
+.Textproblem {
+  width: 100%;
+  padding: 10px;
+  // background: #F7F7F7;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  // margin-bottom: 24px;
+  h2 {
+    margin: 5px 0 0;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    color: #000000;
+  }
+  ul {
+    padding-top: 10px;
+    li {
+      display: flex;
+      margin-bottom: 10px;
+      b {
+        color: rgba(0, 0, 0, 0.85);
         font-size: 16px;
-        line-height: 24px;
-        color: #000000;
-    }
-    ul{
-        padding-top: 16px;
-        li{
-            display: flex;
-            margin-bottom: 16px;
-            b{
-                color: rgba(0, 0, 0, 0.85);
-                font-size: 16px;
-                line-height: 24px;
-                font-family: 'FZJCGFKTK';
-                margin-right: 4px;
-                font-weight: normal;
+        line-height: 1.5;
+        font-family: "FZJCGFKTK";
+        margin-right: 4px;
+        font-weight: normal;
+      }
+      .content-right {
+        flex: 1;
+        .content-con {
+          font-size: 16px;
+          line-height: 1.5;
+          color: #000000;
+          font-family: "FZJCGFKTK";
+          margin: 0;
+          &.content-con-small {
+            font-size: 16px;
+          }
+        }
+        .con-box {
+          display: flex;
+          flex-flow: wrap;
+          .con-item {
+            text-align: center;
+            padding: 0 1px;
+            &.con-item-0 {
+              text-align: left;
+              padding-left: 0;
             }
-            .content-right{
-                flex: 1;
-                .content-con{
-                    font-size: 16px;
-                    line-height: 24px;
-                    color: #000000;
-                    font-family: 'FZJCGFKTK';
-                    margin: 0;
-                    &.content-con-small{
-                        font-size: 16px;
-                    }
-                }
-                .con-box{
-                    display: flex;
-                    flex-flow: wrap;
-                    .con-item{
-                        text-align: center;
-                        padding: 0 1px;
-                        &.con-item-0{
-                            text-align: left;
-                            padding-left: 0;
-                        }
-                    }
-                    span{
-                        display: block;
-                    }
-                    .pinyin{
-                        font-family: 'GB-PINYINOK-B';
-                        font-size: 12px;
-                        line-height: 20px;
-                        color: #000000;
-                        height: 20px;
-                        &.noFont{
-                            font-family: initial;
-                        }
-                    }
-                    .synthesis-box{
-                        display: flex;
-                    }
-                }
-                .english{
-                    color: rgba(0, 0, 0, 0.85);
-                    font-size: 14px;
-                    line-height: 150%;
-                    font-family: 'robot';
-                    display: block;
-                    word-break: break-word;
-                }
+          }
+          span {
+            display: block;
+          }
+          .pinyin {
+            font-family: "GB-PINYINOK-B";
+            font-size: 12px;
+            line-height: 1.5;
+            color: #000000;
+            height: 20px;
+            &.noFont {
+              font-family: initial;
             }
+          }
+          .synthesis-box {
+            display: flex;
+          }
+        }
+        .english {
+          color: rgba(0, 0, 0, 0.85);
+          font-size: 14px;
+          line-height: 150%;
+          font-family: "robot";
+          display: block;
+          word-break: break-word;
         }
+      }
     }
+  }
 }
-</style>
+</style>