选项 移动端兼容

src/components/Adult/phonePreview/OptionsList.vue

@@ -1,85 +1,102 @@
 <template>
   <div class="OptionsList" v-if="curQue">
-      <ul>
-          <li v-for="(item,index) in curQue.option" :key="index">
-            <template
+    <ul>
+      <li v-for="(item, index) in curQue.option" :key="index">
+        <template v-if="item.wordsList && item.wordsList.length == 0">
+          <p
+            v-if="item.sentence"
+            :class="[
+              'content-con',
+              /^[\u4e00-\u9fa5]/.test(item.sentence) ? 'hasCn' : ''
+            ]"
+            v-html="item.sentence"
+            :style="{ fontSize: baseSizePhone + 'px' }"
+          />
+        </template>
+        <template v-else>
+          <div v-if="item.resArr" class="con-box">
+            <div
+              v-for="(itemCon, indexCon) in item.resArr"
+              v-show="itemCon.isShow"
+              :key="indexCon"
+              :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
+            >
+              <template
                 v-if="
-                item.wordsList &&
-                item.wordsList.length == 0
+                  item.wordsList &&
+                    item.wordsList[indexCon + 1] &&
+                    item.wordsList[indexCon + 1].chs &&
+                    chsFhList.indexOf(item.wordsList[indexCon + 1].chs) > -1
                 "
-            >
-                <p
-                v-if="item.sentence"
-                :class="[
-                    'content-con',
-                    /^[\u4e00-\u9fa5]/.test(item.sentence) ? 'hasCn' : '',
-                ]"
-                v-html="item.sentence"
-                />
-            </template>
-            <template v-else>
-                <div v-if="item.resArr" class="con-box">
-                <div
-                    v-for="(itemCon, indexCon) in item.resArr"
-                    v-show="itemCon.isShow"
-                    :key="indexCon"
-                    :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
-                >
-                    <template
-                    v-if="
-                        item.wordsList &&
-                        item.wordsList[indexCon + 1] &&
-                        item.wordsList[indexCon + 1].chs &&
-                        chsFhList.indexOf(item.wordsList[indexCon + 1].chs) >
-                        -1
-                    "
+              >
+                <div class="synthesis-box">
+                  <div>
+                    <span
+                      class="pinyin"
+                      v-if="curQue.pyPosition == 'top'"
+                      :style="{ fontSize: baseSizePhone - 4 + 'px' }"
+                      >{{ itemCon.pinyin }}</span
                     >
-                    <div class="synthesis-box">
-                        <div>
-                            <span
-                                class="pinyin" v-if="curQue.pyPosition=='top'"
-                                >{{ itemCon.pinyin }}</span
-                            >
-                            <span class="hanzi content-con">{{ itemCon.chs }}</span>
-                            <span
-                                class="pinyin" v-if="curQue.pyPosition=='bottom'"
-                                >{{ itemCon.pinyin }}</span
-                            >
-                        </div>
-                        <div
-                        v-if="item.wordsList[indexCon + 1]"
-                        style="text-align: left"
-                        >
-                        <span
-                            class="pinyin" v-if="curQue.pyPosition=='top'"
-                            >{{ item.wordsList[indexCon + 1].pinyin }}</span
-                        >
-                        <span class="hanzi content-con">{{
-                            item.wordsList[indexCon + 1].chs
-                        }}</span>
-                        <span
-                            class="pinyin" v-if="curQue.pyPosition=='bottom'"
-                            >{{ item.wordsList[indexCon + 1].pinyin }}</span
-                        >
-                        </div>
-                    </div>
-                    </template>
-                    <template v-else>
                     <span
-                        class="pinyin" v-if="curQue.pyPosition=='top'"
-                        >{{ itemCon.pinyin }}</span
+                      class="hanzi content-con"
+                      :style="{ fontSize: baseSizePhone + 'px' }"
+                      >{{ itemCon.chs }}</span
                     >
-                    <span class="hanzi content-con">{{ itemCon.chs }}</span>
                     <span
-                        class="pinyin" v-if="curQue.pyPosition=='bottom'"
-                        >{{ itemCon.pinyin }}</span
+                      class="pinyin"
+                      v-if="curQue.pyPosition == 'bottom'"
+                      :style="{ fontSize: baseSizePhone - 4 + 'px' }"
+                      >{{ itemCon.pinyin }}</span
                     >
-                    </template>
-                </div>
+                  </div>
+                  <div
+                    v-if="item.wordsList[indexCon + 1]"
+                    style="text-align: left"
+                  >
+                    <span
+                      class="pinyin"
+                      v-if="curQue.pyPosition == 'top'"
+                      :style="{ fontSize: baseSizePhone - 4 + 'px' }"
+                      >{{ item.wordsList[indexCon + 1].pinyin }}</span
+                    >
+                    <span
+                      class="hanzi content-con"
+                      :style="{ fontSize: baseSizePhone + 'px' }"
+                      >{{ item.wordsList[indexCon + 1].chs }}</span
+                    >
+                    <span
+                      class="pinyin"
+                      v-if="curQue.pyPosition == 'bottom'"
+                      :style="{ fontSize: baseSizePhone - 4 + 'px' }"
+                      >{{ item.wordsList[indexCon + 1].pinyin }}</span
+                    >
+                  </div>
                 </div>
-            </template>
-          </li>
-      </ul>
+              </template>
+              <template v-else>
+                <span
+                  class="pinyin"
+                  v-if="curQue.pyPosition == 'top'"
+                  :style="{ fontSize: baseSizePhone - 4 + 'px' }"
+                  >{{ itemCon.pinyin }}</span
+                >
+                <span
+                  class="hanzi content-con"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  >{{ itemCon.chs }}</span
+                >
+                <span
+                  class="pinyin"
+                  v-if="curQue.pyPosition == 'bottom'"
+                  :style="{ fontSize: baseSizePhone - 4 + 'px' }"
+                  >{{ itemCon.pinyin }}</span
+                >
+              </template>
+            </div>
+          </div>
+        </template>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -90,13 +107,13 @@ import SentenceTemp from "./components/SentenceTemp.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
-    SentenceTemp,
+    SentenceTemp
   },
-  props: ["curQue","themeColor","TaskModel"],
+  props: ["curQue", "themeColor", "TaskModel", "baseSizePhone"],
   data() {
     //这里存放数据
     return {
-        chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
+      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"]
     };
   },
   //计算属性 类似于data概念
@@ -110,15 +127,15 @@ export default {
       let option = JSON.parse(JSON.stringify(this.curQue.option));
       option.forEach((dItem, dIndex) => {
         let paraArr = [];
-          dItem.wordsList.forEach((sItem, sIndex) => {
-            let obj = {
-              pinyin: sItem.pinyin,
-              chs: sItem.chs,
-              isShow: true,
-            };
-            paraArr.push(obj);
-          });
-          this.$set(dItem, "resArr", paraArr);
+        dItem.wordsList.forEach((sItem, sIndex) => {
+          let obj = {
+            pinyin: sItem.pinyin,
+            chs: sItem.chs,
+            isShow: true
+          };
+          paraArr.push(obj);
+        });
+        this.$set(dItem, "resArr", paraArr);
       });
       this.$set(this.curQue, "option", option);
     },
@@ -129,11 +146,11 @@ export default {
       } else {
         sItem.isShow = true;
       }
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-      this.handleData();
+    this.handleData();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -150,60 +167,60 @@ export default {
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
+  activated() {}
 };
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.OptionsList{
-    width: 100%;
-    ul{ 
-        padding: 0;
-        list-style: none;
-        margin: 0 -8px;
+.OptionsList {
+  width: 100%;
+  ul {
+    padding: 0;
+    list-style: none;
+    margin: 0 -8px;
+    display: flex;
+    flex-flow: wrap;
+    li {
+      padding: 8px 16px;
+      // background: #FFFFFF;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      margin: 8px;
+      .content-con {
+        margin: 4px 0;
+        font-family: "robot";
+        font-size: 16px;
+        color: #000;
+        &.hasCn,
+        &.hanzi {
+          font-family: "FZJCGFKTK";
+        }
+      }
+      .con-box {
         display: flex;
         flex-flow: wrap;
-        li{
-            padding: 8px 16px;
-            background: #FFFFFF;
-            border: 1px solid rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            margin: 8px;
-            .content-con {
-                margin: 4px 0;
-                font-family: "robot";
-                font-size: 16px;
-                color: #000;
-                &.hasCn,
-                &.hanzi {
-                    font-family: "FZJCGFKTK";
-                }
-            }
-            .con-box {
-                display: flex;
-                flex-flow: wrap;
-                justify-content: center;
-                .con-item {
-                    text-align: center;
-                    padding: 0 1px;
-                }
-                span {
-                    display: block;
-                }
-                .pinyin {
-                    font-family: "GB-PINYINOK-B";
-                    font-size: 12px;
-                    line-height: 12px;
-                    height: 12px;
-                &.noFont {
-                    font-family: initial;
-                }
-                }
-                .synthesis-box {
-                    display: flex;
-                }
-            }
+        justify-content: center;
+        .con-item {
+          text-align: center;
+          padding: 0 1px;
+        }
+        span {
+          display: block;
+        }
+        .pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-size: 12px;
+          line-height: 1;
+          height: 100%;
+          &.noFont {
+            font-family: initial;
+          }
         }
+        .synthesis-box {
+          display: flex;
+        }
+      }
     }
+  }
 }
-</style>
+</style>