生字组件主题色

src/views/book/courseware/preview/components/newWord_template/NewWordTemplatePreview.vue

@@ -20,12 +20,21 @@
                 : '',
           }"
         >
-          <span class="number">{{ index + 1 }}</span>
+          <span
+            class="number"
+            :style="{
+              background: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+            }"
+            >{{ index + 1 }}</span
+          >
         </div>
         <div class="pinyin-en" :class="[item.is_example ? 'item-example' : '']">
           <div
             v-if="isEnable(data.property.view_pinyin) && data.property.model === 'input' && item.is_common_pinyin"
             class="pinyin"
+            :style="{
+              fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+            }"
           >
             {{ item.pinyin }}
           </div>
@@ -40,6 +49,11 @@
               :textAlign="'center'"
               @input="changeAnswer(item, index)"
               :class="[classNameJudge(userAnswer[index].answer_pinyin, item.answer_pinyin, item.is_example)]"
+              :style="{
+                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                background:
+                  data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+              }"
             />
           </div>
           <div class="items-flex">
@@ -55,11 +69,16 @@
                   (data.property.model === 'miao' || (data.property.model === 'input' && !item.is_common_pinyin))
                 "
                 class="pinyin"
+                :style="{
+                  fontSize:
+                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                }"
               >
                 {{ items.pinyin }}
               </div>
               <div
                 class="inputdv pinyin-common"
+                :class="[items.is_example ? 'items-example' : 'items-no-example']"
                 v-if="
                   data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && !item.is_common_pinyin
                 "
@@ -73,6 +92,12 @@
                   :class="[
                     classNameJudge(userAnswer[index].item[indexs].answer_pinyin, items.answer_pinyin, items.is_example),
                   ]"
+                  :style="{
+                    fontSize:
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                    background:
+                      data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                  }"
                 />
               </div>
               <div class="items-content">
@@ -112,6 +137,13 @@
                     item.content_list.length > 1 && indexs != item.content_list.length - 1 ? 'NoborderRight' : '',
                   ]"
                   bgType="tian"
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                  }"
+                  :playColor="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
                 />
               </div>
               <div class="inputdv" v-if="data.property.model === 'miao'">
@@ -123,6 +155,12 @@
                   :textAlign="'center'"
                   @input="changeAnswer(items, index, indexs)"
                   :class="[classNameJudge(userAnswer[index].item[indexs].answer, items.answer, items.is_example)]"
+                  :style="{
+                    fontSize:
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                    background:
+                      data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                  }"
                 />
               </div>
             </div>
@@ -135,6 +173,11 @@
               :textAlign="'center'"
               @input="changeAnswer(item, index)"
               :class="[classNameJudge(userAnswer[index].answer_en, item.answer_en, item.is_example)]"
+              :style="{
+                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                background:
+                  data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+              }"
             />
           </div>
           <div class="en-common" v-if="data.property.model === 'input'">{{ item.shiyi }}</div>
@@ -167,6 +210,9 @@
             <div
               v-if="isEnable(data.property.view_pinyin) && data.property.model === 'input' && item.is_common_pinyin"
               class="pinyin"
+              :style="{
+                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+              }"
             >
               {{ item.pinyin }}
             </div>
@@ -180,6 +226,12 @@
                 v-model="item.answer_pinyin"
                 :textAlign="'center'"
                 @input="changeAnswer(item, index)"
+                :style="{
+                  fontSize:
+                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                  background:
+                    data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                }"
               />
             </div>
             <div class="items-flex">
@@ -195,6 +247,10 @@
                     (data.property.model === 'miao' || (data.property.model === 'input' && !item.is_common_pinyin))
                   "
                   class="pinyin"
+                  :style="{
+                    fontSize:
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                  }"
                 >
                   {{ items.pinyin }}
                 </div>
@@ -210,6 +266,12 @@
                     v-model="items.answer_pinyin"
                     :textAlign="'center'"
                     @input="changeAnswer(item, index, indexs)"
+                    :style="{
+                      fontSize:
+                        data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                      background:
+                        data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                    }"
                   />
                 </div>
                 <div class="items-content">
@@ -248,6 +310,13 @@
                         : '',
                       item.content_list.length > 1 && indexs != item.content_list.length - 1 ? 'NoborderRight' : '',
                     ]"
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                    }"
+                    :playColor="
+                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                    "
                     bgType="tian"
                   />
                 </div>
@@ -259,6 +328,12 @@
                     v-model="items.answer"
                     :textAlign="'center'"
                     @input="changeAnswer(items, index, indexs)"
+                    :style="{
+                      fontSize:
+                        data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                      background:
+                        data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                    }"
                   />
                 </div>
               </div>
@@ -273,6 +348,12 @@
                 v-model="item.answer_en"
                 :textAlign="'center'"
                 @input="changeAnswer(item, index)"
+                :style="{
+                  fontSize:
+                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                  background:
+                    data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                }"
               />
             </div>
             <div class="en-common" v-if="data.property.model === 'input'">{{ item.shiyi }}</div>
@@ -453,14 +534,17 @@ export default {
   .inputdv {
     min-height: 32px;
     margin-top: 16px;
+    overflow: hidden;
+    border-radius: 8px;
 
     :deep .edit-div {
       min-height: 32px;
       font-size: 16px;
       line-height: 30px;
       color: #000;
-      background-color: #deebff;
-      border: 1px solid #deebff;
+
+      // background-color: #deebff;
+      border: 1px solid transparent;
       border-radius: 8px;
     }
 
@@ -487,6 +571,12 @@ export default {
     }
   }
 
+  .items-no-example {
+    :deep .edit-div {
+      color: initial;
+    }
+  }
+
   .items-flex {
     display: flex;
     gap: 5px;
@@ -521,6 +611,9 @@ export default {
   .pinyin-common {
     margin-bottom: 5px;
 
+    &.pinyin-common-isExample {
+    }
+
     :deep .edit-div {
       font-family: 'League';
     }

src/views/book/courseware/preview/components/newWord_template/components/Strockplayredline.vue

@@ -21,6 +21,7 @@
         :className="tianColor ? 'strock-play-red' : 'strock-play-box'"
         v-if="playStorkes"
         @click="playHanzi"
+        :style="{ color: playColor ? playColor : '' }"
       />
       <div :id="targetDiv" class="character-target-div" :style="{ padding: '5px' }"></div>
     </template>
@@ -54,6 +55,7 @@ export default {
     'judgeAnswer',
     'hz_json',
     'bgType',
+    'playColor',
   ],
   data() {
     return {

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -190,7 +190,7 @@ export default {
         ['Ī', 'Í', 'Î', 'Ì', 'I'],
         ['Ū', 'Ú', 'Û', 'Ù', 'U'],
         ['n', 'ń', 'ň', 'ǹ', 'n'],
-        ['m̄', 'ḿ', 'm', 'm̀', 'n'],
+        ['m̄', 'ḿ', 'm', 'm̀', 'm'],
       ],
       final_con: '',
       active_index_str: '', // 高亮索引的字符串