preview及对话练习 移动端

src/components/Adult/Preview.vue

@@ -3,9 +3,12 @@
   <div
     v-if="cur"
     class="NPC-Big-Book-preview adult-book-preview-sty"
-    :class="['NPC-Big-Book-preview-' + themeColor]"
+    :class="[
+      'NPC-Big-Book-preview-' + themeColor,
+      isPhone ? 'NPC-Big-Book-preview-phone' : ''
+    ]"
   >
-    <div class="NNPE-title">
+    <div class="NNPE-title NNPE-title-top">
       <!-- 页眉 -->
       <div class="NNPE-title-left">
         <div
@@ -157,7 +160,7 @@
           <p class="NNPE-title-item-en" v-html="item.en" />
         </div>
       </div>
-      <div v-if="isShowTitle" class="NNPE-operate">
+      <div v-if="isShowTitle && !isPhone" class="NNPE-operate">
         <a
           class="btn-prev"
           :class="[preClick ? '' : 'btn-prev-disabled']"
@@ -170,20 +173,54 @@
         />
       </div>
     </div>
-    <div
-      v-if="
-        cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
-      "
-      class="classTopic-box"
-    >
-      <span
-        v-for="(item, index) in cur.classTopic"
-        :key="index"
-        :class="item.font"
+    <div class="operater-classTopic" v-if="isPhone">
+      <div
+        v-if="isShowTitle && isPhone"
+        class="NNPE-operate NNPE-operate-phone"
+      >
+        <a
+          class="btn-prev"
+          :class="[preClick ? '' : 'btn-prev-disabled']"
+          @click="handleNNPEprev"
+        />
+        <a
+          class="btn-next"
+          :class="[nextClick ? '' : 'btn-next-disabled']"
+          @click="handleNNPEnext"
+        />
+      </div>
+      <div
+        v-if="
+          cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
+        "
+        class="classTopic-box"
       >
-        {{ item.con }}
-      </span>
+        <span
+          v-for="(item, index) in cur.classTopic"
+          :key="index"
+          :class="item.font"
+        >
+          {{ item.con }}
+        </span>
+      </div>
     </div>
+    <template v-else>
+      <div
+        v-if="
+          cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
+        "
+        class="classTopic-box"
+      >
+        <span
+          v-for="(item, index) in cur.classTopic"
+          :key="index"
+          :class="item.font"
+        >
+          {{ item.con }}
+        </span>
+      </div>
+    </template>
+
     <el-checkbox
       v-if="previewType && previewType == 'previewCheck'"
       v-model="checkAllNPC"
@@ -449,6 +486,7 @@
                             currentTreeID
                         "
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template
@@ -547,6 +585,7 @@
                         :theme-color="themeColor"
                         :task-model="TaskModel"
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template v-if="itemss.type == 'input_record_chs'">
@@ -1159,10 +1198,21 @@ export default {
       titleChsFhList: ["，", "”", "。", "：", "》", "？", "！", "；"],
       checkAllNPC: false,
       isIndeterminate: false,
-      NpcNewWordMp3: ""
+      NpcNewWordMp3: "",
+      isPhone: false // 是否是移动端打开
     };
   },
-  computed: {},
+  computed: {
+    transScale() {
+      return function() {
+        let width = window.innerWidth;
+        let styleConfig = {
+          transform: "scale(" + width / 860 + ")"
+        };
+        return styleConfig;
+      };
+    }
+  },
   watch: {
     context: {
       handler(val, oldVal) {
@@ -1206,6 +1256,8 @@ export default {
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
     console.log("2024-05-27");
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent);
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -1783,6 +1835,7 @@ export default {
       align-items: center;
       .NNPE-title-item {
         margin-right: 12px;
+        width: max-content;
       }
       .content-con {
         margin: 4px 0;
@@ -1833,35 +1886,35 @@ export default {
         }
       }
     }
-    .NNPE-operate {
-      position: absolute;
-      top: 10px;
-      right: 20px;
-      a {
-        background: #e35454 url("../../assets/newImage/common/btn-pre.png")
+  }
+  .NNPE-operate {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    a {
+      background: #e35454 url("../../assets/newImage/common/btn-pre.png") center
+        no-repeat;
+      background-size: 24px;
+      border-radius: 4px;
+      width: 44px;
+      height: 44px;
+      display: inline-block;
+      margin: 0 4px;
+      &.btn-next {
+        background: #e35454 url("../../assets/newImage/common/btn-next.png")
           center no-repeat;
         background-size: 24px;
-        border-radius: 4px;
-        width: 44px;
-        height: 44px;
-        display: inline-block;
-        margin: 0 4px;
-        &.btn-next {
-          background: #e35454 url("../../assets/newImage/common/btn-next.png")
-            center no-repeat;
-          background-size: 24px;
-        }
-        &:hover {
-          background-color: #f76565;
-        }
-        &:active {
-          background-color: #d24444;
-        }
-        &.btn-prev-disabled,
-        &.btn-next-disabled {
-          background-color: rgba(0, 0, 0, 0.25);
-          cursor: not-allowed;
-        }
+      }
+      &:hover {
+        background-color: #f76565;
+      }
+      &:active {
+        background-color: #d24444;
+      }
+      &.btn-prev-disabled,
+      &.btn-next-disabled {
+        background-color: rgba(0, 0, 0, 0.25);
+        cursor: not-allowed;
       }
     }
   }
@@ -2017,6 +2070,50 @@ export default {
       background-color: #d24444;
     }
   }
+  &-phone {
+    width: 100%;
+    // transform-origin: 0 0; /* 设置变换的原点为元素的左上角 */
+    // transform: scale(0.6);
+    .classTopic-box {
+      width: 100%;
+      border-radius: 0 0 20px 20px;
+      margin-top: 15px;
+    }
+    .NNPE-title-top {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 1;
+    }
+    .NNPE-Book-content-inner {
+      padding: 0 10px;
+    }
+    .operater-classTopic {
+      width: 100%;
+      position: relative;
+      padding-top: 60px;
+    }
+    .NNPE-operate-phone {
+      width: 100%;
+      left: 0;
+      top: 0;
+      .btn-prev,
+      .btn-next {
+        position: absolute;
+        top: 88px;
+        left: 0;
+        // z-index: 1;
+        width: 20px;
+        height: 20px;
+        background-color: transparent;
+      }
+      .btn-next {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
 }
 .submitLookAnswer {
   color: #fff;
@@ -2038,22 +2135,22 @@ export default {
   }
   .NNPE-title {
     background: #24b99e;
-    .NNPE-operate {
-      a {
-        background: #24b99e url("../../assets/newImage/common/btn-pre.png")
+  }
+  .NNPE-operate {
+    a {
+      background: #24b99e url("../../assets/newImage/common/btn-pre.png") center
+        no-repeat;
+      background-size: 24px;
+      &.btn-next {
+        background: #24b99e url("../../assets/newImage/common/btn-next.png")
           center no-repeat;
         background-size: 24px;
-        &.btn-next {
-          background: #24b99e url("../../assets/newImage/common/btn-next.png")
-            center no-repeat;
-          background-size: 24px;
-        }
-        &:hover {
-          background-color: #3dd4b8;
-        }
-        &:active {
-          background-color: #1fa189;
-        }
+      }
+      &:hover {
+        background-color: #3dd4b8;
+      }
+      &:active {
+        background-color: #1fa189;
       }
     }
   }
@@ -2088,22 +2185,22 @@ export default {
   }
   .NNPE-title {
     background: #bd8865;
-    .NNPE-operate {
-      a {
-        background: #bd8865 url("../../assets/newImage/common/btn-pre.png")
+  }
+  .NNPE-operate {
+    a {
+      background: #bd8865 url("../../assets/newImage/common/btn-pre.png") center
+        no-repeat;
+      background-size: 24px;
+      &.btn-next {
+        background: #bd8865 url("../../assets/newImage/common/btn-next.png")
           center no-repeat;
         background-size: 24px;
-        &.btn-next {
-          background: #bd8865 url("../../assets/newImage/common/btn-next.png")
-            center no-repeat;
-          background-size: 24px;
-        }
-        &:hover {
-          background-color: #d6a687;
-        }
-        &:active {
-          background-color: #a37557;
-        }
+      }
+      &:hover {
+        background-color: #d6a687;
+      }
+      &:active {
+        background-color: #a37557;
       }
     }
   }

src/components/Adult/preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue

@@ -1,6 +1,10 @@
 <!--  -->
 <template>
-  <div class="dialogue-answer-view NPC-zhedie" v-if="isShowTemp">
+  <div
+    class="dialogue-answer-view NPC-zhedie"
+    :class="[isPhone ? 'dialogue-answer-view-phone' : '']"
+    v-if="isShowTemp"
+  >
     <!-- 标题 -->
     <template v-if="curQue.title">
       <div class="topTitle">
@@ -34,46 +38,54 @@
               curQue.option[index].detail.length > 0
                 ? 'hasoption'
                 : '',
-              index == curQue.list.length - 1 ? 'haspadding' : '',
+              index == curQue.list.length - 1 ? 'haspadding' : ''
             ]"
             v-for="(item, index) in curQue.list"
             :key="'list' + index"
           >
-            <span class="number" v-if="item.number">{{ item.number }}</span>
-            <div
-              class="dialogue-img"
-              v-if="item.img_list && item.img_list.length > 0"
-            >
-              <el-image
-                style="width: 196px; height: 164px"
-                :src="item.img_list[0].id"
-                fit="scale-down"
-              ></el-image>
-            </div>
-            <div class="dialogue-answer-model">
-              <AnswerModel
-                :curQue="item"
-                :Bookanswer="curQue.Bookanswer[index]"
-                :pyPosition="curQue.pyPosition"
-                :enPosition="curQue.enPosition"
-                :colorBox="colorBox"
-                :TaskModel="TaskModel"
-                :listIndex="index"
-                :judgeAnswer="judgeAnswer"
-                :audioWidth="item.number?592:620"
-              />
+            <span class="number" v-if="item.number && !isPhone">{{
+              item.number
+            }}</span>
+            <div class="dialogue-item">
+              <div
+                class="dialogue-img"
+                v-if="item.img_list && item.img_list.length > 0"
+              >
+                <el-image
+                  :style="{
+                    width: isPhone ? '110px' : '196px',
+                    height: isPhone ? '120px' : '164px'
+                  }"
+                  :src="item.img_list[0].id"
+                  fit="scale-down"
+                  :preview-src-list="[item.img_list[0].id]"
+                ></el-image>
+              </div>
+              <div class="dialogue-answer-model">
+                <AnswerModel
+                  :curQue="item"
+                  :Bookanswer="curQue.Bookanswer[index]"
+                  :pyPosition="curQue.pyPosition"
+                  :enPosition="curQue.enPosition"
+                  :colorBox="colorBox"
+                  :TaskModel="TaskModel"
+                  :listIndex="index"
+                  :judgeAnswer="judgeAnswer"
+                  :audioWidth="item.number ? 592 : 620"
+                />
+              </div>
+              <template
+                v-if="
+                  curQue.option &&
+                    curQue.option.length > 0 &&
+                    curQue.option[index] &&
+                    curQue.option[index].detail &&
+                    curQue.option[index].detail.length > 0
+                "
+              >
+                <OptionModel :curOption="curQue.option[index]" :index="index" />
+              </template>
             </div>
-            <template
-              v-if="
-                curQue.option &&
-                curQue.option.length > 0 &&
-                curQue.option[index] &&
-                curQue.option[index].detail &&
-                curQue.option[index].detail.length > 0
-              "
-            >
-              <OptionModel :curOption="curQue.option[index]" :index="index" />
-            </template>
           </div>
         </div>
       </el-collapse-transition>
@@ -88,53 +100,59 @@
         >
           <template v-if="isShowQue(index)">
             <span class="number" v-if="item.number">{{ item.number }}</span>
-            <div
-              class="dialogue-img"
-              v-if="item.img_list && item.img_list.length > 0"
-            >
-              <el-image
-                style="width: 196px; height: 164px"
-                :src="item.img_list[0].id"
-                fit="scale-down"
-              ></el-image>
+            <div class="dialogue-item">
+              <div
+                class="dialogue-img"
+                v-if="item.img_list && item.img_list.length > 0"
+              >
+                <el-image
+                  :style="{
+                    width: isPhone ? '110px' : '196px',
+                    height: isPhone ? '120px' : '164px'
+                  }"
+                  :src="item.img_list[0].id"
+                  fit="scale-down"
+                  :preview-src-list="[item.img_list[0].id]"
+                ></el-image>
+              </div>
+              <div class="dialogue-answer-model">
+                <AnswerModel
+                  :curQue="item"
+                  :Bookanswer="curQue.Bookanswer[index]"
+                  :pyPosition="curQue.pyPosition"
+                  :enPosition="curQue.enPosition"
+                  :colorBox="colorBox"
+                  :listIndex="index"
+                  :TaskModel="TaskModel"
+                  :judgeAnswer="judgeAnswer"
+                  :audioWidth="item.number ? 592 : 620"
+                />
+              </div>
+              <template
+                v-if="
+                  curQue.option &&
+                    curQue.option.length > 0 &&
+                    curQue.option[index] &&
+                    curQue.option[index].detail &&
+                    curQue.option[index].detail.length > 0
+                "
+              >
+                <OptionModel :curOption="curQue.option[index]" :index="index" />
+              </template>
+              <template
+                v-if="
+                  curQue.wordcard &&
+                    curQue.wordcard.length > 0 &&
+                    curQue.wordcard[index]
+                "
+              >
+                <WordcardModel
+                  :curWordcard="curQue.wordcard[index]"
+                  :index="index"
+                  :pyPosition="curQue.pyPosition"
+                />
+              </template>
             </div>
-            <div class="dialogue-answer-model">
-              <AnswerModel
-                :curQue="item"
-                :Bookanswer="curQue.Bookanswer[index]"
-                :pyPosition="curQue.pyPosition"
-                :enPosition="curQue.enPosition"
-                :colorBox="colorBox"
-                :listIndex="index"
-                :TaskModel="TaskModel"
-                :judgeAnswer="judgeAnswer"
-                :audioWidth="item.number?592:620"
-              />
-            </div>
-            <template
-              v-if="
-                curQue.option &&
-                curQue.option.length > 0 &&
-                curQue.option[index] &&
-                curQue.option[index].detail &&
-                curQue.option[index].detail.length > 0
-              "
-            >
-              <OptionModel :curOption="curQue.option[index]" :index="index" />
-            </template>
-            <template
-              v-if="
-                curQue.wordcard &&
-                curQue.wordcard.length > 0 &&
-                curQue.wordcard[index]
-              "
-            >
-              <WordcardModel
-                :curWordcard="curQue.wordcard[index]"
-                :index="index"
-                :pyPosition="curQue.pyPosition"
-              />
-            </template>
           </template>
         </div>
       </div>
@@ -160,9 +178,9 @@ export default {
     Soundrecord,
     AnswerModel,
     OptionModel,
-    WordcardModel,
+    WordcardModel
   },
-  props: ["curQue", "colorBox", "TaskModel", "judgeAnswer"],
+  props: ["curQue", "colorBox", "TaskModel", "judgeAnswer", "isPhone"],
   data() {
     return {
       wordShow: true,
@@ -170,10 +188,10 @@ export default {
       userAnswer: {
         recordList: [],
         input: [],
-        judge: [],
+        judge: []
       },
       judgeAnswersList: [],
-      userErrorNumberTotal: 0,
+      userErrorNumberTotal: 0
     };
   },
   computed: {
@@ -194,7 +212,7 @@ export default {
       return bool;
     },
     isShowQue() {
-      return function (index) {
+      return function(index) {
         let _this = this;
         let bool = false;
         let userErrorNumberTotal = 0;
@@ -213,7 +231,7 @@ export default {
         }
         return bool;
       };
-    },
+    }
   },
   watch: {},
   //方法集合
@@ -223,7 +241,7 @@ export default {
     },
     handleData() {
       let list = JSON.parse(JSON.stringify(this.curQue.list));
-      list.forEach((item) => {
+      list.forEach(item => {
         let answerArr = [];
         if (item.answer) {
           answerArr = item.answer.split("\n");
@@ -254,7 +272,7 @@ export default {
                 answerArr[aIndex] != "??" &&
                 answerArr[aIndex] != "？？"
                   ? "[JUDGE##F##JUDGE]"
-                  : "",
+                  : ""
             };
             userAnswer.input.push(JSON.parse(JSON.stringify(re)));
           });
@@ -274,7 +292,7 @@ export default {
               userAnswerJudge:
                 item.judge[i].isJudge && item.judge[i].judge
                   ? "[JUDGE##F##JUDGE]"
-                  : "",
+                  : ""
             };
             userAnswer.judge.push(JSON.parse(JSON.stringify(judge_obj)));
           }
@@ -292,7 +310,7 @@ export default {
         userErrorNumberTotal = errorArr.length;
       }
       return userErrorNumberTotal;
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -317,10 +335,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .dialogue-answer-view {
   width: 100%;
@@ -396,6 +414,25 @@ export default {
       width: 100%;
     }
   }
+  &-phone {
+    .dialogue-answer-content {
+      padding: 0;
+    }
+    .dialogue-answer-inner {
+      display: block;
+      .dialogue-item {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        .dialogue-img {
+          margin-left: 0;
+          width: 120px;
+          height: 130px;
+          padding: 5px;
+        }
+      }
+    }
+  }
 }
 .NPC-Big-Book-preview-green {
   .dialogue-answer-view {
@@ -411,4 +448,9 @@ export default {
 }
 </style>
 <style lang="scss">
-</style>
+.dialogue-answer-view-phone {
+  .article-content {
+    padding-right: 0 !important;
+  }
+}
+</style>

src/components/Adult/preview/WordPhrase.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="NPC-zhedie" v-if="curQue">
+  <div
+    class="NPC-zhedie"
+    v-if="curQue"
+    :class="[isPhone ? 'NPC-zhedie-phone' : '']"
+  >
     <div :class="curQue.titleBg == 'white' ? 'topTitleWhite' : 'topTitle'">
       <div class="NPC-top-left">
         <template v-if="curQue.conDetail && curQue.conDetail.sentence">
@@ -334,7 +338,8 @@ export default {
     "indexss",
     "indexStr",
     "TaskModel",
-    "judgeAnswer"
+    "judgeAnswer",
+    "isPhone"
   ],
   data() {
     //这里存放数据
@@ -905,6 +910,9 @@ export default {
       background-size: cover;
     }
   }
+  &-phone {
+    width: 100%;
+  }
 }
 
 .NPC-Big-Book-preview-green {

src/views/courseView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <Header />
+    <Header v-if="!isPhone" />
     <div class="content">
       <div
         id="content-tree"
@@ -365,9 +365,11 @@ export default {
       }
       &-unfold {
         width: 40px;
-        height: 90px;
+        height: 50px;
         border: none;
         overflow: hidden;
+        background: transparent;
+        padding-top: 15px;
       }
     }
     .content-tree-full {
@@ -396,6 +398,8 @@ export default {
       }
       &-phone {
         margin-left: 0;
+        padding: 0;
+        width: 100%;
       }
       .title-box {
         display: flex;
@@ -512,6 +516,11 @@ export default {
         center no-repeat;
       background-size: 32px;
     }
+    .inner-phone {
+      .title-box {
+        margin-bottom: 0;
+      }
+    }
   }
   .answerShow {
     position: absolute;