Merge branch 'master' into gcj

# Conflicts:
#	src/components/Adult/preview/WordPhrase.vue

src/components/Adult/preview/NewWordShow.vue

@@ -1,6 +1,7 @@
 <!--  -->
 <template>
   <div class="Big-Book-prev-Textdes NewWordShow" v-if="curQue">
+      <h2 v-if="curQue.title">{{curQue.title}}</h2>
       <div class="item-box">
           <div class="item" v-for="(item,index) in curQue.option" :key="index">
               <p v-if="item.pinyin">{{item.pinyin}}</p>
@@ -125,14 +126,22 @@ export default {
 //@import url(); 引入公共css类
 .NewWordShow{
     width: 100%;
-    padding: 0 4px;
-    background: #F7F7F7;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
+    h2{
+        margin: 16px 0 0;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        color: #000000;
+        margin-bottom: 16px;
+    }
     .item-box{
         display: flex;
         flex-flow: wrap;
         padding-bottom: 8px;
+        padding: 0 4px;
+        background: #F7F7F7;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
         .item{
             display: flex;
             align-items: flex-end;
@@ -260,6 +269,20 @@ export default {
 }
 </style>
 <style lang="scss">
+.NNPE-Big-Book-preview-red{
+    .NewWordShow{
+        .strock-play-box{
+            width: 16px;
+            height: 16px;
+            right: -1px;
+            background: url('../../../assets/NPC/strock-play-red-click.png') center no-repeat;
+            background-size: cover;
+        }
+        .character-target-div{
+            // background-color: initial;
+        }
+    }
+}
 .NNPE-Big-Book-preview-green{
     .NewWordShow{
         .strock-play-box{

src/components/Adult/preview/VoiceMatrix.vue

@@ -489,7 +489,7 @@ $select-color-brown-active: #a37557;
 .voice-matrix {
   height: 100%;
   width: 100%;
-  margin-bottom: 16px;
+  padding-bottom: 16px;
   color: #262626;
 
   &-audio {
@@ -838,7 +838,7 @@ $select-color-brown-active: #a37557;
 <style lang="scss" scoped>
 .NNPE-tableList-tr-last{
   .voice-matrix{
-    margin-bottom: 0;
+    padding-bottom: 0;
   }
 }
 </style>

src/components/Adult/preview/WordPhrase.vue

@@ -100,6 +100,7 @@
     </el-collapse>
     <div v-if="detailShow">
       <WordPhraseDetail
+        v-if="isSuccess"
         :data="data"
         :curQue="curQue"
         :changeDetailIndex="changeDetailIndex"
@@ -137,6 +138,7 @@ export default {
       playWord: null,
       optionRes: [],
       mp3List: [],
+      isSuccess: false,
     };
   },
   //计算属性 类似于data概念
@@ -192,6 +194,7 @@ export default {
     },
     // 获取生词的例句
     getWordLiju(val) {
+      this.isSuccess = false;
       console.log(this.data);
       this.data.list1 = [];
       this.data.list2 = [];
@@ -219,7 +222,9 @@ export default {
             search_scope: 0, //检索范围0 本课件  1本教材 2本套
             is_contain_word_variants: false,
           }).then((res) => {
-            this.data.list1 = res.sentence_list;
+            this.$set(this.data, "list1", res.sentence_list);
+            this.isSuccess = true;
+            console.log("=======");
             console.log(this.data.list1);
           });
         });

src/components/Adult/preview/components/Strockplayredline.vue

@@ -1,7 +1,18 @@
 <!--  -->
 <template>
   <div class="strockplayRedInner">
-    <div @click="playHanzi" class="strock-play-box" v-if="playStorkes"></div>
+    <div
+      @click="playHanzi"
+      :class="[
+        'strock-play-box',
+        themeColor == 'green'
+          ? 'green-border'
+          : themeColor == 'red'
+          ? 'red-border'
+          : 'brown-border',
+      ]"
+      v-if="playStorkes"
+    ></div>
 
     <div :id="targetDiv" class="character-target-div"></div>
   </div>
@@ -11,7 +22,14 @@
 const HanziWriter = require("hanzi-writer");
 export default {
   components: {},
-  props: ["targetDiv", "Book_text", "playStorkes", "strokeColor", "wordNum"],
+  props: [
+    "targetDiv",
+    "Book_text",
+    "playStorkes",
+    "strokeColor",
+    "wordNum",
+    "themeColor",
+  ],
   data() {
     return {
       writer: null,
@@ -84,7 +102,8 @@ export default {
 .character-target-div {
   width: 100%;
   height: 100%;
-  background: #fff url("../../../../assets/NPC/chinaTianRed.png") center no-repeat;
+  background: #fff url("../../../../assets/NPC/chinaTianRed.png") center
+    no-repeat;
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
@@ -99,13 +118,26 @@ export default {
   z-index: 999;
   width: 24px;
   height: 24px;
-  background: url("../../../../assets/NPC/strock-play-red-click.png");
-  background-size: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
 }
+.red-border {
+  background: url("../../../../assets/NPC/strock-play-red-click.png");
+  background-size: 100%;
+
+}
+.green-border {
+  background: url("../../../../assets/NPC/strock-play-green-click.png");
+  background-size: 100%;
+
+}
+.brown-border {
+  background: url("../../../../assets/NPC/strock-play-yellow-click.png");
+  background-size: 100%;
+
+}
 // .strock-play-box:active {
 //   background: url("../../../../assets/NPC/strock-play-red-click.png");
 //   background-size: 100%;
@@ -115,24 +147,26 @@ export default {
   height: 160px;
   font-size: 28px;
 }
-.NNPE-Big-Book-preview-green{
-    .character-target-div {
-        background: #fff url('../../../../assets/NPC/chinaTianGreen.png') center no-repeat;
-        background-size: cover;
-    }
-    .strock-play-box{
-        background: url("../../../../assets/NPC/strock-play-green-click.png");
-        background-size: 100%;
-    }
+.NNPE-Big-Book-preview-green {
+  .character-target-div {
+    background: #fff url("../../../../assets/NPC/chinaTianGreen.png") center
+      no-repeat;
+    background-size: cover;
+  }
+  .strock-play-box {
+    background: url("../../../../assets/NPC/strock-play-green-click.png");
+    background-size: 100%;
+  }
 }
-.NNPE-Big-Book-preview-brown{
-    .character-target-div {
-        background: #fff url('../../../../assets/NPC/chinaTianYellow.png') center no-repeat;
-        background-size: cover;
-    }
-    .strock-play-box{
-        background: url("../../../../assets/NPC/strock-play-yellow-click.png");
-        background-size: 100%;
-    }
+.NNPE-Big-Book-preview-brown {
+  .character-target-div {
+    background: #fff url("../../../../assets/NPC/chinaTianYellow.png") center
+      no-repeat;
+    background-size: cover;
+  }
+  .strock-play-box {
+    background: url("../../../../assets/NPC/strock-play-yellow-click.png");
+    background-size: 100%;
+  }
 }
 </style>

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -37,7 +37,17 @@
           </div>
         </div>
         <div class="wordDetail">
-          <div class="bwc-Strockplay" v-if="isShow">
+          <div
+            :class="[
+              'bwc-Strockplay',
+              themeColor == 'green'
+                ? 'green-border'
+                : themeColor == 'red'
+                ? 'red-border'
+                : 'brown-border',
+            ]"
+            v-if="isShow"
+          >
             <div
               class="strockplay"
               v-for="(conItem, conindex) in data.new_word"
@@ -48,6 +58,7 @@
                 :playStorkes="true"
                 :targetDiv="'bwcHanziIntp' + detailIndex + conindex"
                 :wordNum="data.new_word.length"
+                :themeColor="themeColor"
               />
               <div
                 class="bwc-line"
@@ -335,8 +346,7 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.initData();
@@ -420,7 +430,6 @@ export default {
         min-width: 130px;
         height: 130px;
         margin-bottom: 16px;
-        border: 2px solid #24b99e;
         border-radius: 8px;
         box-sizing: border-box;
         overflow: hidden;
@@ -444,6 +453,15 @@ export default {
           background: #24b99e;
         }
       }
+      .red-border {
+        border: 2px solid #ff5757;
+      }
+      .green-border {
+        border: 2px solid #24b99e;
+      }
+      .brown-border {
+        border: 2px solid #bd8865;
+      }
       .wordInfor {
         .yinpin {
           display: flex;