移动端 对话练习

src/components/Adult/Preview.vue

@@ -604,6 +604,9 @@
                           :task-model="TaskModel"
                           :judge-answer="itemJ"
                           :baseSizePhone="baseSizePhone"
+                          :themeColorPhone="
+                            themeColorPhone[themeColorPhoneIndex]
+                          "
                         />
                       </template>
                       <template v-if="itemss.type == 'input_record_chs'">
@@ -3236,7 +3239,7 @@ export default {
       }
     }
     .NNPE-tableList {
-      background: #fff;
+      // background: #fff;
       border-radius: 8px;
       //   padding: 12px 8px;
       &.NNPE-tableList-hasBg {

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

@@ -3,6 +3,7 @@
   <div
     class="dialogue-answer-view NPC-zhedie dialogue-answer-view-phone"
     v-if="isShowTemp"
+    :style="{ background: themeColorPhone }"
   >
     <!-- 标题 -->
     <template v-if="curQue.title">
@@ -61,8 +62,8 @@
               >
                 <el-image
                   :style="{
-                    width: '110px',
-                    height: '120px'
+                    width: '100px',
+                    height: '100px'
                   }"
                   :src="item.img_list[0].id"
                   fit="scale-down"
@@ -131,8 +132,8 @@
               >
                 <el-image
                   :style="{
-                    width: '110px',
-                    height: '120px'
+                    width: '100px',
+                    height: '100px'
                   }"
                   :src="item.img_list[0].id"
                   fit="scale-down"
@@ -209,7 +210,14 @@ export default {
     OptionModel,
     WordcardModel
   },
-  props: ["curQue", "colorBox", "TaskModel", "judgeAnswer", "baseSizePhone"],
+  props: [
+    "curQue",
+    "colorBox",
+    "TaskModel",
+    "judgeAnswer",
+    "baseSizePhone",
+    "themeColorPhone"
+  ],
   data() {
     return {
       wordShow: true,
@@ -455,10 +463,13 @@ export default {
         align-items: flex-start;
         .dialogue-img {
           margin-left: 0;
-          width: 120px;
-          height: 130px;
-          padding: 5px;
+          margin-right: 5px;
+          width: 122px;
+          height: 122px;
+          padding: 10px;
           flex-shrink: 0;
+          border: 1px solid rgba(0, 0, 0, 0.1);
+          border-radius: 8px;
         }
       }
     }
@@ -480,7 +491,7 @@ export default {
 <style lang="scss">
 .dialogue-answer-view-phone {
   .article-content {
-    padding-right: 0 !important;
+    padding: 8px 0 !important;
   }
 }
 </style>

src/components/Adult/phonePreview/RecordModule.vue

@@ -1,30 +1,35 @@
 <template>
   <div class="NPC-RecordModule">
-      <Soundrecord @handleWav="handleWav" :type="curQue.type?typeList[curQue.type]:'normal'" class="luyin-box" :class="[curQue.type]"
+    <Soundrecord
+      @handleWav="handleWav"
+      :type="curQue.type ? typeList[curQue.type] : 'normal'"
+      class="luyin-box"
+      :class="[curQue.type]"
       :answerRecordList="curQue.Bookanswer.recordList"
-      :TaskModel="TaskModel"/>
+      :TaskModel="TaskModel"
+    />
   </div>
 </template>
 
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
-import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
-      Soundrecord
+    Soundrecord
   },
-  props: ["curQue","TaskModel"],
+  props: ["curQue", "TaskModel"],
   data() {
     //这里存放数据
     return {
-        typeList:{
-            'record_control_mini':'mini',
-            'record_control_normal':'normal',
-            'record_control_pro':'pro',
-            'record_control_promax':'promax'
-        }
+      typeList: {
+        record_control_mini: "mini",
+        record_control_normal: "normal",
+        record_control_pro: "pro",
+        record_control_promax: "promax"
+      }
     };
   },
   //计算属性 类似于data概念
@@ -33,19 +38,19 @@ export default {
   watch: {},
   //方法集合
   methods: {
-      handleWav(list, tmIndex) {
-        tmIndex = tmIndex ? tmIndex : 0;
-        this.$set(this.curQue.Bookanswer, "recordList", list);
-      },
+    handleWav(list, tmIndex) {
+      tmIndex = tmIndex ? tmIndex : 0;
+      this.$set(this.curQue.Bookanswer, "recordList", list);
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-      if (!this.curQue.Bookanswer) {
-        let bookanswer = {
-            recordList: [],
-        }
-        this.$set(this.curQue, "Bookanswer", bookanswer);
-      }
+    if (!this.curQue.Bookanswer) {
+      let bookanswer = {
+        recordList: []
+      };
+      this.$set(this.curQue, "Bookanswer", bookanswer);
+    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -62,31 +67,31 @@ export default {
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
+  activated() {}
 };
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.NPC-RecordModule{
-    width: 100%;
-    .luyin-box{
-        padding:0 12px;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        border-radius: 8px;
-        padding:0 12px;
-    }
-    .record_control_mini{
-        width: 64px;
-        padding: initial;
-    }
-    .record_control_normal{
-        width:129px;
-    }
-    .record_control_pro{
-        width:200px;
-    }
-    .record_control_promax{
-        width:280px;
-    }
+.NPC-RecordModule {
+  width: 100%;
+  .luyin-box {
+    padding: 0 12px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    padding: 0 12px;
+  }
+  .record_control_mini {
+    width: 64px;
+    padding: initial;
+  }
+  .record_control_normal {
+    width: 129px;
+  }
+  .record_control_pro {
+    width: 200px;
+  }
+  .record_control_promax {
+    width: 280px;
+  }
 }
-</style>
+</style>

src/components/Adult/phonePreview/Soundrecord.vue

@@ -548,6 +548,7 @@ export default {
   }
   .el-select {
     margin-left: 8px;
+    display: block;
   }
   .record-delete {
     width: 20px;
@@ -581,13 +582,14 @@ export default {
       width: 78px;
     }
     .el-input__inner {
-      height: 0;
-      line-height: 0;
+      height: 24px;
+      line-height: 22px;
       box-sizing: border-box;
       border-radius: 4px;
       padding: 0px 11px;
       font-size: 14px;
       color: rgba(0, 0, 0, 0.85);
+      background: transparent;
     }
     .el-input {
       .el-select__caret {
@@ -605,4 +607,10 @@ export default {
     }
   }
 }
+.el-select-dropdown {
+  background-color: transparent;
+}
+.el-popper[x-placement^="bottom"] .popper__arrow::after {
+  border-bottom-color: transparent;
+}
 </style>