听录音选音节 移动端

src/components/Adult/Preview.vue

@@ -748,6 +748,7 @@
                         :theme-color="themeColor"
                         :task-model="TaskModel"
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template v-if="itemss.type == 'sentence_listen_read_chs'">
@@ -757,6 +758,7 @@
                         :theme-color="themeColor"
                         :task-model="TaskModel"
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template v-if="itemss.type == 'sort_chs'">

src/components/Adult/preview/SelectYinjie.vue

@@ -1,6 +1,10 @@
 <!--  -->
 <template>
-  <div class="Big-Book-prev-Textdes SelectYinjie" v-if="isShowTemp">
+  <div
+    class="Big-Book-prev-Textdes SelectYinjie"
+    v-if="isShowTemp"
+    :class="[isPhone ? 'SelectYinjie-phone' : '']"
+  >
     <div class="SelectYinjie-inner">
       <div
         class="aduioLine-box"
@@ -30,7 +34,7 @@
               curTime < curQue.wordTime[index].ed &&
               stopAudio
                 ? 'active'
-                : '',
+                : ''
             ]"
             @click="
               handleChangeTime(
@@ -44,7 +48,7 @@
             <p
               :class="[
                 !judgeAnswer ? 'exercise-model' : '',
-                lookanswerClass(index, indexs),
+                lookanswerClass(index, indexs)
               ]"
               v-for="(items, indexs) in item.option"
               :key="indexs"
@@ -60,7 +64,7 @@
               curQue.Bookanswer[index].length > 0 && TaskModel != 'ANSWER'
                 ? 'active'
                 : '',
-              TaskModel == 'ANSWER' ? 'notAllow' : '',
+              TaskModel == 'ANSWER' ? 'notAllow' : ''
             ]"
             @click="handleClear(index)"
           ></a>
@@ -75,18 +79,18 @@ import AudioLine from "../preview/AudioLine.vue";
 
 export default {
   components: { AudioLine },
-  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
+  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer", "isPhone"],
   data() {
     return {
       userList: [],
       curTime: 0,
       stopAudio: false,
-      ed: null,
+      ed: null
     };
   },
   computed: {
     lookanswerClass() {
-      return function (index, indexs) {
+      return function(index, indexs) {
         let _this = this;
         let className = "";
         let userAnswer = this.curQue.Bookanswer[index].value.toString();
@@ -143,7 +147,7 @@ export default {
       return bool;
     },
     isShowOption() {
-      return function (item, index) {
+      return function(item, index) {
         let _this = this;
         let bool = true;
         if (_this.judgeAnswer == "standardAnswer") {
@@ -158,7 +162,7 @@ export default {
         }
         return bool;
       };
-    },
+    }
   },
   watch: {},
   //方法集合
@@ -180,10 +184,10 @@ export default {
       _this.$set(_this.curQue, "option", JSON.parse(JSON.stringify(option)));
       if (!_this.curQue.Bookanswer) {
         let userSelect = [];
-        _this.curQue.option.forEach((item) => {
+        _this.curQue.option.forEach(item => {
           let obj = {
             value: "",
-            userAnswerJudge: item.answer ? "[JUDGE##F##JUDGE]" : "",
+            userAnswerJudge: item.answer ? "[JUDGE##F##JUDGE]" : ""
           };
           userSelect.push(JSON.parse(JSON.stringify(obj)));
         });
@@ -253,7 +257,7 @@ export default {
     },
     emptyEd() {
       this.ed = null;
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -267,10 +271,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .SelectYinjie {
   width: 100%;
@@ -417,4 +421,9 @@ export default {
     }
   }
 }
-</style>
+.SelectYinjie-phone {
+  .SelectYinjie-inner {
+    padding: 10px;
+  }
+}
+</style>