ui包

src/components/Adult/preview/NewWordShow.vue

@@ -47,10 +47,10 @@
           </div>
       </div>
       <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
-        <Practice :changePraShow="changePraShow" :cur="curData" />
+        <Practice :changePraShow="changePraShow" :cur="curData" :themeColor="themeColor" />
       </div>
       <div class="practiceBox practiceBoxStrock" v-if="ifFreeShow">
-        <FreePaint :changePraShow="changePraShow" :cur="curDataImg" ref="freePaint" />
+        <FreePaint :changePraShow="changePraShow" :cur="curDataImg" ref="freePaint" :themeColor="themeColor" />
       </div>
   </div>
 </template>
@@ -61,7 +61,7 @@ import Practice from "../preview/components/Practice.vue";
 import FreePaint from "../preview/components/FreePaint.vue";
 export default {
   components: {Strockplayredline,Practice,FreePaint},
-  props: ["curQue"],
+  props: ["curQue","themeColor"],
   data() {
     return {
         isPraShow: false,

src/components/Adult/preview/components/FreePaint.vue

@@ -4,7 +4,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')"
       />
         <div class="right-content">
             <div class="right-strockred">
@@ -14,6 +14,7 @@
                 :lineWidth="hanziweight"
                 :handleGetImg="handleGetImg"
                 :changePraShow="changePraShow"
+                :themeColor="themeColor"
                 ref="freewrite"
                 />
             </div>
@@ -48,7 +49,7 @@ export default {
     // ChinaDict,
     // Audio,
   },
-  props: ["cur", "changePraShow"],
+  props: ["cur", "changePraShow", "themeColor"],
   data() {
     return {
       //   learn_mode: "",
@@ -148,6 +149,7 @@ export default {
     right: 8px;
     width: 32px;
     height: 32px;
+    padding: 8px;
     cursor: pointer;
     z-index: 2;
   }

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

@@ -434,6 +434,34 @@ export default {
 .el-tabs {
   width: 100%;
 }
+.NNPE-Big-Book-preview-green{
+    .practice {
+        .nav-list {
+            > li {
+                color: #24B99E;
+                background: rgba(36, 185, 158, 0.25);
+                &.active {
+                    background: #24B99E;
+                    color: #ffffff;
+                }
+            }
+        }
+    }
+}
+.NNPE-Big-Book-preview-brown{
+    .practice {
+        .nav-list {
+            > li {
+                color: #BD8865;
+                background: rgba(189, 136, 101, 0.25);
+                &.active {
+                    background: #BD8865;
+                    color: #ffffff;
+                }
+            }
+        }
+    }
+}
 </style>
 <style lang="scss">
 .practiceSingle {

src/components/Adult/preview/components/Wordintp.vue

@@ -7,7 +7,7 @@
     </div>
     <div class="bwc-top" v-if="word.detail">
       <span v-if="word.detail.pinyin">{{ word.detail.pinyin }}</span>
-      <Audio :fontSize="20" :mp3="mp3Url ? mp3Url : ''" />
+      <Audio :fontSize="20" :mp3="mp3Url ? mp3Url : ''" :themeColor="themeColor" />
     </div>
     <div
       class="bwc-Strockplay"
@@ -114,7 +114,7 @@ export default {
     Strockplayredline,
     Audio,
   },
-  props: ["word", "changeIntpShow"],
+  props: ["word", "changeIntpShow", "themeColor"],
   data() {
     return {
       isPraShow: false,
@@ -380,7 +380,6 @@ export default {
         query: this.word.detail.new_word,
         //  query: "开心",
       };
-      debugger;
       getHZChineseInfo(data).then((res) => {
         _this.dataDetail = res.data.result;
         _this.handleChineseDetail();
@@ -423,7 +422,6 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
-    console.log(this.word);
     this.getChineseInfo();
     // _this.handleChineseDetail();
   },
@@ -637,6 +635,52 @@ export default {
     }
   }
 }
+.NNPE-Big-Book-preview-green{
+    .wordIntp {
+        .bwc-intp {
+            .pinyin {
+                color: #24B99E;
+            }
+        }
+        .bwc-Strockplay {
+            border: 2px solid #24B99E;
+            .bwc-line {
+                background: #24B99E;
+            }
+        }
+        .bwc-tolength {
+            border: 2px solid #24B99E;
+        }
+        .bwc-footer {
+            > button {
+                color: #24B99E;
+            }
+        }
+    }
+}
+.NNPE-Big-Book-preview-brown{
+    .wordIntp {
+        .bwc-intp {
+            .pinyin {
+                color: #BD8865;
+            }
+        }
+        .bwc-Strockplay {
+            border: 2px solid #BD8865;
+            .bwc-line {
+                background: #BD8865;
+            }
+        }
+        .bwc-tolength {
+            border: 2px solid #BD8865;
+        }
+        .bwc-footer {
+            > button {
+                color: #BD8865;
+            }
+        }
+    }
+}
 </style>
 <style lang="scss">
 .wordIntp {
@@ -655,4 +699,20 @@ export default {
     border-bottom: 2px solid #de4444;
   }
 }
+.NNPE-Big-Book-preview-green{
+    .wordIntp {
+        .el-menu--horizontal > .el-menu-item.is-active {
+            color: #24B99E;
+            border-bottom: 2px solid #24B99E;
+        }
+    }
+}
+.NNPE-Big-Book-preview-brown{
+    .wordIntp {
+        .el-menu--horizontal > .el-menu-item.is-active {
+            color: #BD8865;
+            border-bottom: 2px solid #BD8865;
+        }
+    }
+}
 </style>