Merge branch 'NPC-lhd'

src/components/Adult/preview/ArticleViewChs/PhraseModelChs.vue

@@ -95,7 +95,7 @@
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
-        <Wordcard :word="word" :changeWordCard="changeWordCard" />
+        <Wordcard :word="word" :changeWordCard="changeWordCard" :themeColor="themeColor" />
       </div>
     </template>
   </div>
@@ -107,7 +107,7 @@ import AudioLine from "../AudioLine.vue";
 import Wordcard from "../components/Wordcard.vue"; // 卡片
 export default {
   name: "PhraseModelChs",
-  props: ["curQue", "bodyLeft", "NNPENewWordList"],
+  props: ["curQue", "bodyLeft", "NNPENewWordList", "themeColor"],
   components: {
     AudioLine,
     Wordcard,

src/components/Adult/preview/ArticleViewChs/WordModelChs.vue

@@ -114,7 +114,7 @@
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
-        <Wordcard :word="word" :changeWordCard="changeWordCard" />
+        <Wordcard :word="word" :changeWordCard="changeWordCard" :themeColor="themeColor" />
       </div>
     </template>
   </div>
@@ -126,7 +126,7 @@ import AudioLine from "../AudioLine.vue";
 import Wordcard from "../components/Wordcard.vue"; // 卡片
 export default {
   name: "WordModelChs",
-  props: ["curQue", "bodyLeft", "NNPENewWordList"],
+  props: ["curQue", "bodyLeft", "NNPENewWordList", "themeColor"],
   components: {
     AudioLine,
     Wordcard,

src/components/Adult/preview/ArticleViewChs/index.vue

@@ -49,6 +49,7 @@
         :wordFontsize="wordFontsize"
         :bodyLeft="bodyLeft"
         :bodyWidth="bodyWidth"
+        :themeColor="themeColor"
         v-if="!showPhrases && !showPractice && !showWord"
       />
       <PhraseModel
@@ -56,12 +57,14 @@
         :titleFontsize="titleFontsize"
         :wordFontsize="wordFontsize"
         :NNPENewWordList="NNPENewWordList"
+        :themeColor="themeColor"
         v-if="showPhrases"
       />
       <Practice
         :curQue="curQue"
         :titleFontsize="titleFontsize"
         :wordFontsize="wordFontsize"
+        :themeColor="themeColor"
         v-if="showPractice"
       />
       <WordModel
@@ -71,6 +74,7 @@
         :bodyLeft="bodyLeft"
         :bodyWidth="bodyWidth"
         :NNPENewWordList="NNPENewWordList"
+        :themeColor="themeColor"
         v-if="showWord"
       />
     </div>
@@ -85,7 +89,7 @@ import WordModel from "./WordModelChs.vue"; // 语音练习模式
 
 export default {
   name: "ArticleView",
-  props: ["curQue", "NNPENewWordList"],
+  props: ["curQue", "NNPENewWordList", "themeColor"],
   components: { NormalModelChs, Practice, WordModel, PhraseModel },
   data() {
     return {

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

@@ -159,7 +159,7 @@
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
-        <Wordcard :word="word" :changeWordCard="changeWordCard" />
+        <Wordcard :word="word" :changeWordCard="changeWordCard" :themeColor="themeColor" />
       </div>
     </template>
     <template v-if="isNoteShow">
@@ -190,6 +190,7 @@ export default {
     "NNPENewWordList",
     "NNPEAnnotationList",
     "colorBox",
+    "themeColor"
   ],
   components: {
     AudioLine,

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

@@ -161,7 +161,7 @@
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
-        <Wordcard :word="word" :changeWordCard="changeWordCard" />
+        <Wordcard :word="word" :changeWordCard="changeWordCard" :themeColor="themeColor" />
       </div>
     </template>
     <template v-if="isNoteShow">
@@ -186,7 +186,7 @@ import RemarkChs from "./RemarkChs.vue";
 import Soundrecord from "../Soundrecord.vue";
 export default {
   name: "WordModelChs",
-  props: ["curQue", "bodyLeft", "NNPENewWordList", "colorBox"],
+  props: ["curQue", "bodyLeft", "NNPENewWordList", "colorBox", "themeColor"],
   components: {
     AudioLine,
     Wordcard,

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

@@ -51,6 +51,7 @@
         :bodyWidth="bodyWidth"
         :colorBox="colorBox"
         :NNPEAnnotationList="NNPEAnnotationList"
+        :themeColor="themeColor"
         v-if="!showPhrases && !showPractice && !showWord"
       />
       <PhraseModel
@@ -60,6 +61,7 @@
         :NNPENewWordList="NNPENewWordList"
         :NNPEAnnotationList="NNPEAnnotationList"
         :colorBox="colorBox"
+        :themeColor="themeColor"
         v-if="showPhrases"
       />
       <Practice
@@ -67,6 +69,7 @@
         :titleFontsize="titleFontsize"
         :wordFontsize="wordFontsize"
         :colorBox="colorBox"
+        :themeColor="themeColor"
         v-if="showPractice"
       />
       <WordModel
@@ -77,6 +80,7 @@
         :bodyWidth="bodyWidth"
         :NNPENewWordList="NNPENewWordList"
         :colorBox="colorBox"
+        :themeColor="themeColor"
         v-if="showWord"
       />
     </div>

src/components/Adult/preview/components/Practice.vue

@@ -9,7 +9,7 @@
       <img
         @click="changePraShow()"
         class="close-icon"
-        src="../../../../assets/NPC/close-icon-red.png"
+        :src="themeColor?themeColor=='green'?require('../../../../assets/icon/Cross-16-normal-Green.png'):themeColor=='brown'?require('../../../../assets/icon/Cross-16-normal-Brown.png'):require('../../../../assets/icon/Cross-16-normal-red.png'):require('../../../../assets/icon/Cross-16-normal-red.png')"
       />
       <el-tabs type="border-card">
         <el-tab-pane label="简体">
@@ -25,14 +25,12 @@
             <div class="left-content-pra"></div>
             <div class="footer">
               <div @click="collectFlag = !collectFlag" class="bg-box">
-                <img
-                  :src="
-                    collectFlag
-                      ? require('../../../../assets/NPC/icon-collect-red.png')
-                      : require('../../../../assets/NPC/icon-collect-red.png')
-                  "
-                  class="practice-icon"
-                />
+                  <template v-if="collectFlag">
+                      <img :src="themeColor?themeColor=='green'?require('../../../../assets/icon/starline-16-normal-Green.png'):themeColor=='brown'?require('../../../../assets/icon/starline-16-normal-Brown.png'):require('../../../../assets/icon/starline-16-normal-red.png'):require('../../../../assets/icon/starline-16-normal-red.png')" class="practice-icon">
+                  </template>
+                  <template v-else>
+                      <img :src="themeColor?themeColor=='green'?require('../../../../assets/icon/starline-16-normal-Green.png'):themeColor=='brown'?require('../../../../assets/icon/starline-16-normal-Brown.png'):require('../../../../assets/icon/starline-16-normal-red.png'):require('../../../../assets/icon/starline-16-normal-red.png')" class="practice-icon">
+                  </template>
                 收藏
               </div>
             </div>
@@ -130,7 +128,7 @@ export default {
     // ChinaDict,
     // Audio,
   },
-  props: ["cur", "changePraShow"],
+  props: ["cur", "changePraShow", "themeColor"],
   data() {
     return {
       //   learn_mode: "",
@@ -222,6 +220,7 @@ export default {
     right: 8px;
     width: 32px;
     height: 32px;
+    padding: 8px;
     cursor: pointer;
     z-index: 2;
   }
@@ -397,7 +396,7 @@ export default {
     text-align: center;
     padding: 4px 8px;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
@@ -410,9 +409,9 @@ export default {
     //   margin: 0 24px;
     // }
     img {
-      width: 24px;
-      height: 24px;
-      margin: 0;
+      width: 16px;
+      height: 16px;
+      margin: 0 4px 0 0;
     }
   }
   .practice-icon {

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

@@ -120,11 +120,19 @@ export default {
         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%;
+    }
 }
 </style>

src/components/Adult/preview/components/Strockred.vue

@@ -120,22 +120,18 @@ export default {
     }
 }
 .NNPE-Big-Book-preview-green{
-    .freewrite {
-        .strockred {
-            .character-target-div {
-                background: #fff url('../../../../assets/NPC/chinaTianGreen.png') center no-repeat;
-                background-size: cover;
-            }
+    .strockred {
+        .character-target-div {
+            background: #fff url('../../../../assets/NPC/chinaTianGreen.png') center no-repeat;
+            background-size: cover;
         }
     }
 }
 .NNPE-Big-Book-preview-brown{
-    .freewrite {
-        .strockred {
-            .character-target-div {
-                background: #fff url('../../../../assets/NPC/chinaTianYellow.png') center no-repeat;
-                background-size: cover;
-            }
+    .strockred {
+        .character-target-div {
+            background: #fff url('../../../../assets/NPC/chinaTianYellow.png') center no-repeat;
+            background-size: cover;
         }
     }
 }

src/components/Adult/preview/components/Wordcard.vue

@@ -18,6 +18,7 @@
           word.detail.mp3_list.length > 0 ? word.detail.mp3_list[0].url : ''
         "
         :pinyin="word.detail.pinyin"
+        :themeColor="themeColor"
       />
     </div>
     <div
@@ -35,9 +36,10 @@
           :playStorkes="true"
           :targetDiv="'bwcHanziIntp' + conItem + conindex"
           :wordNum="word.detail.new_word.length"
+          :themeColor="themeColor"
         />
         <img
-          src="../../../../assets/NPC/icon-write-red.png"
+          :src="themeColor?themeColor=='green'?require('../../../../assets/icon/Pencil-16-normal-Green.png'):themeColor=='brown'?require('../../../../assets/icon/Pencil-16-normal-Brown.png'):require('../../../../assets/icon/Pencil-16-normal-red.png'):require('../../../../assets/icon/Pencil-16-normal-red.png')"
           class="collect-icon"
           v-if="word.detail.new_word.length > 1"
           @click="writeWord(conItem)"
@@ -66,7 +68,7 @@
     <div class="bwc-footer">
       <button class="bwc-btn">
         <img
-          src="../../../../assets/NPC/icon-collect-red.png"
+          :src="themeColor?themeColor=='green'?require('../../../../assets/icon/starline-16-normal-Green.png'):themeColor=='brown'?require('../../../../assets/icon/starline-16-normal-Brown.png'):require('../../../../assets/icon/starline-16-normal-red.png'):require('../../../../assets/icon/starline-16-normal-red.png')"
           class="collect-icon"
         />
         收藏
@@ -77,17 +79,17 @@
         v-if="word.detail.new_word.length == 1"
       >
         <img
-          src="../../../../assets/NPC/icon-write-red.png"
+          :src="themeColor?themeColor=='green'?require('../../../../assets/icon/Pencil-16-normal-Green.png'):themeColor=='brown'?require('../../../../assets/icon/Pencil-16-normal-Brown.png'):require('../../../../assets/icon/Pencil-16-normal-red.png'):require('../../../../assets/icon/Pencil-16-normal-red.png')"
           class="collect-icon"
         />
         写一写
       </button>
     </div>
     <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
-      <Practice :changePraShow="changePraShow" :cur="curData" />
+      <Practice :changePraShow="changePraShow" :cur="curData" :themeColor="themeColor" />
     </div>
     <div class="practiceBox" v-if="isIntpShow">
-      <Wordintp :changeIntpShow="changeIntpShow" :word="word" />
+      <Wordintp :changeIntpShow="changeIntpShow" :word="word" :themeColor="themeColor" />
     </div>
   </div>
 </template>
@@ -106,7 +108,7 @@ export default {
     Practice,
     Wordintp,
   },
-  props: ["word", "changeWordCard"],
+  props: ["word", "changeWordCard", "themeColor"],
   data() {
     return {
       isPraShow: false,
@@ -336,11 +338,31 @@ export default {
         margin-left: 8px;
       }
       > img {
-        width: 24px;
-        height: 24px;
-        margin-right: 4px;
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
       }
     }
   }
 }
+.NNPE-Big-Book-preview-green{
+    .wordCard{
+        .bwc-tolength,.bwc-Strockplay {
+            border-color: #24B99E;
+            .bwc-line{
+                background: #24B99E;
+            }
+        }
+    }
+}
+.NNPE-Big-Book-preview-brown{
+    .wordCard{
+        .bwc-tolength,.bwc-Strockplay {
+            border-color: #BD8865;
+            .bwc-line{
+                background: #BD8865;
+            }
+        }
+    }
+}
 </style>