修改单词详情的样式问题和颜色控件问题

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"
@@ -336,6 +347,7 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
+    console.log(this.data.list1);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -420,7 +432,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 +455,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;