汉字组件统一主题色

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -17,15 +17,35 @@
               marginTop: isEnable(data.property.view_pinyin) ? '30px' : '',
             }"
           >
-            <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) && item.is_common_pinyin" class="pinyin">
+            <div
+              v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin"
+              class="pinyin"
+              :style="{
+                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+              }"
+            >
               {{ item.pinyin }}
             </div>
             <div class="items-flex">
               <div class="items" v-for="(items, indexs) in item.content_list" :key="indexs">
-                <div v-if="isEnable(data.property.view_pinyin) && !item.is_common_pinyin" class="pinyin">
+                <div
+                  v-if="isEnable(data.property.view_pinyin) && !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="items-content">
@@ -38,7 +58,14 @@
                     ></el-image>
                   </template>
                   <template v-else-if="items && items.type === 'lian'">
-                    <span class="items-lian">{{ items.con }}</span>
+                    <span
+                      class="items-lian"
+                      :style="{
+                        background:
+                          data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                      }"
+                      >{{ items.con }}</span
+                    >
                   </template>
                   <Strockplayredline
                     v-if="items && items.type === 'hanzi'"
@@ -52,7 +79,7 @@
                         : null
                     "
                     :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                    :targetDiv="'newWordTemplates' + items.con + index + indexs + Math.random().toString(36)"
+                    :targetDiv="'newWordTemplate-character' + items.con + index + indexs + randomId"
                     :hz_json="items.hz_info[0].hzDetail.hz_json"
                     :bgType="data.property.frame_type"
                     class="hanzi-storck"
@@ -72,6 +99,15 @@
                         ? 'NoborderRight'
                         : '',
                     ]"
+                    :playColor="
+                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                    "
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346cda',
+                    }"
                   />
 
                   <div
@@ -100,6 +136,12 @@
                         indexs,
                       )
                     "
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346cda',
+                    }"
                   >
                     <SvgIcon
                       icon-class="hanzi-writer-bg"
@@ -136,12 +178,20 @@
               <div class="words-left" :style="{}">
                 <AudioPlay
                   :file-id="item.audio_file_id"
-                  theme-color="gray"
+                  :theme-color="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
                   v-if="isEnable(data.property.is_enable_voice)"
                 />
-                <span class="pinyin" v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin">{{
-                  item.pinyin
-                }}</span>
+                <span
+                  class="pinyin"
+                  v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin"
+                  :style="{
+                    fontSize:
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                  }"
+                  >{{ item.pinyin }}</span
+                >
               </div>
             </div>
             <div class="card-box">
@@ -155,11 +205,22 @@
                     :Book_text="items.con"
                     :playStorkes="isEnable(data.property.is_enable_stroke)"
                     :curItem="null"
-                    :targetDiv="'newWordTemplates' + items.con + index + indexs + Math.random().toString(36)"
-                    :hz_json="items.hz_info[0].hzDetail.hz_json"
+                    :targetDiv="'newWordTemplate-character-answer' + items.con + index + indexs"
+                    :hz_json="
+                      items.hz_info && items.hz_info[0].hzDetail.hz_json ? items.hz_info[0].hzDetail.hz_json : []
+                    "
                     class="hanzi-storck"
                     :class="['strock-chinese', 'border-right-none']"
                     :bgType="data.property.frame_type"
+                    :playColor="
+                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                    "
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346cda',
+                    }"
                   />
                 </div>
               </template>
@@ -169,6 +230,12 @@
                 :key="indexI + index"
                 style="display: flex"
                 @click="miaoStorkes(index, indexI, item.mark, item.content, itemI.strokes)"
+                :style="{
+                  borderColor:
+                    data.unified_attrib && data.unified_attrib.topic_color
+                      ? data.unified_attrib.topic_color
+                      : '#346cda',
+                }"
               >
                 <Strockplayredlines
                   v-if="
@@ -177,20 +244,38 @@
                   "
                   :play-storkes="false"
                   :book-text="item.content"
-                  :target-div="'write-praT' + Math.random().toString(36).substring(2, 10)"
+                  :target-div="'write-praT-1' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
                   :class="['strock-chinese']"
                   :bgType="data.property.frame_type"
+                  :playColor="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color
+                        ? data.unified_attrib.topic_color
+                        : '#346cda',
+                  }"
                 />
                 <Strockplayredlines
                   v-else
                   :play-storkes="false"
                   :book-text="item.content"
-                  :target-div="'write-praT' + Math.random().toString(36).substring(2, 10)"
+                  :target-div="'write-praT-2' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
                   :stroke-color="'#ddd'"
                   :class="['strock-chinese']"
                   :bgType="data.property.frame_type"
+                  :playColor="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color
+                        ? data.unified_attrib.topic_color
+                        : '#346cda',
+                  }"
                 />
               </div>
               <!-- 书写 -->
@@ -206,6 +291,12 @@
                       indexs,
                     )
                   "
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color
+                        ? data.unified_attrib.topic_color
+                        : '#346cda',
+                  }"
                 >
                   <SvgIcon
                     icon-class="hanzi-writer-bg"
@@ -248,6 +339,7 @@
           @changeCurQue="changeCurQue"
           @deleteWriteRecord="deleteWriteRecord"
           :bgType="data.property.frame_type"
+          :attrib="data.unified_attrib"
         />
       </div>
       <div v-if="if_miao_show" class="practiceBox practice-box-strock">
@@ -261,7 +353,7 @@
             "
             :play-storkes="false"
             :book-text="current_hz"
-            :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+            :target-div="'write-praT-3' + current_hz + active_col_index + active_index + randomId"
             :book-strokes="current_hz_data"
             :stroke-color="
               disabled &&
@@ -272,6 +364,7 @@
                 : ''
             "
             :bgType="data.property.frame_type"
+            :playColor="data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''"
           />
           <Strockred
             ref="strockRed"
@@ -284,7 +377,7 @@
             ]"
             :book-text="current_hz"
             :hanzi-color="hanzi_color"
-            :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+            :target-div="'write-praT' + current_hz + active_col_index + active_index + randomId"
             :book-strokes="current_hz_data"
             :is-answer.sync="userAnswer[active_index].strokes_content_list[active_col_index].flag"
             :show-error-tip="isEnable(data.property.is_enable_error)"
@@ -339,6 +432,7 @@ export default {
       show_preview: false,
       miao_arr: [],
       if_miao_show: false, // 描红模块
+      randomId: Math.random().toString(36).substring(2, 12),
     };
   },
   computed: {},
@@ -422,7 +516,12 @@ export default {
       this.active_index = index;
       this.active_col_index = indexs;
 
-      this.current_hz = this.data.option_list[index].content_list[indexs].con;
+      this.current_hz =
+        this.data.option_list[index] &&
+        this.data.option_list[index].content_list[indexs] &&
+        this.data.option_list[index].content_list[indexs].con
+          ? this.data.option_list[index].content_list[indexs].con
+          : '';
       this.current_hz_data = imgUrl;
     },
     // 删除记录
@@ -487,12 +586,13 @@ export default {
   }
 
   .audio-wrapper-nobg {
-    height: 16px;
+    height: 24px;
 
     :deep .audio-play {
-      width: 16px;
-      height: 16px;
-      color: #000;
+      width: 24px;
+      height: 24px;
+
+      // color: #000;
       background-color: initial;
     }
 
@@ -590,6 +690,7 @@ export default {
     font-family: 'League';
     font-size: 20px;
     font-weight: 400;
+    line-height: 30px;
     color: rgba(0, 0, 0, 50%);
     text-align: center;
   }
@@ -751,7 +852,7 @@ export default {
   :deep .strockplay-redInner {
     width: 80px;
     height: 80px;
-    border: 2px solid #346cda !important;
+    border-width: 2px !important;
     border-radius: 8px;
   }
 

src/views/book/courseware/preview/components/character_base/CharacterBasePreview.vue

@@ -5,7 +5,11 @@
 
     <div class="main">
       <div class="main-top" :style="{ width: data.hz_strokes_list.length * 64 + 'px' }">
-        <AudioPlay v-if="isEnable(data.property.is_enable_voice)" :file-id="data.audio_file_id" theme-color="gray" />
+        <AudioPlay
+          v-if="isEnable(data.property.is_enable_voice)"
+          :file-id="data.audio_file_id"
+          :theme-color="data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''"
+        />
         <span v-if="isEnable(data.property.view_pinyin)" class="pinyin">{{ data.pinyin }}</span>
       </div>
       <div class="strock-chinese-box">
@@ -19,7 +23,7 @@
             :book-strokes="items.strokes"
             :class="['strock-chinese', indexs !== data.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
             :bg-type="data.property.frame_type"
-            :frame-color="data.property.frame_color"
+            :playColor="data.property.frame_color"
           />
         </template>
         <template v-else>

src/views/book/courseware/preview/components/character_base/components/AudioPlay.vue

@@ -7,17 +7,19 @@
         width: showSlider ? '230px' : '',
         justifyContent: showSlider && !showProgress ? 'space-between' : 'center',
         backgroundColor: themeColor ? '' : bookInfo.theme_color,
+        color: themeColor ? themeColor : '#000',
       }"
       @click="playAudio"
     >
-      <SvgIcon v-if="audio.paused" :size="audio.paused ? 20 : 14" :icon-class="iconClass" />
-      <img
+      <SvgIcon size="24" :icon-class="iconClass" />
+
+      <!-- <img
         v-else
         :src="
           themeColor === 'gray' ? require('@/assets/voice-play-gray.png') : require('@/assets/voice-play-white.png')
         "
         class="voice-play"
-      />
+      /> -->
 
       <template v-if="showSlider">
         <template v-if="showProgress">
@@ -91,7 +93,7 @@ export default {
   },
   computed: {
     iconClass() {
-      return this.audio.paused ? 'audio' : 'audio-stop';
+      return this.audio.paused ? 'play-btn' : 'animated';
     },
   },
   watch: {

src/views/book/courseware/preview/components/character_base/components/FreewriteLettle.vue

@@ -25,10 +25,24 @@
         </a>
       </div>
       <ul class="nav-list" :class="[showPlay ? '' : 'nav-list-line']">
-        <li v-if="showPlay" :class="currenHzData && currenHzData.strokes_content ? '' : 'disabled'" @click="play()">
+        <li
+          v-if="showPlay"
+          :class="currenHzData && currenHzData.strokes_content ? '' : 'disabled'"
+          @click="play()"
+          :style="{
+            backgroundColor:
+              currenHzData && currenHzData.strokes_content && attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        >
           播放
         </li>
-        <li :class="disabled ? 'disabled' : ''" @click="handleWriteImg">保存</li>
+        <li
+          :class="disabled ? 'disabled' : ''"
+          @click="handleWriteImg"
+          :style="{ backgroundColor: attrib && attrib.topic_color ? attrib.topic_color : '#de4444' }"
+        >
+          保存
+        </li>
       </ul>
     </div>
   </div>
@@ -76,6 +90,10 @@ export default {
       type: String,
       default: 'tian',
     },
+    attrib: {
+      type: Object,
+      default: {},
+    },
   },
   data() {
     return {

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

@@ -2,9 +2,9 @@
   <div
     v-if="bookText"
     class="strockplay-redInner"
-    :style="{ borderColor: frameColor, borderWidth: bgType === 'none' ? '0px' : '1px' }"
+    :style="{ borderColor: playColor, borderWidth: bgType === 'none' ? '0px' : '1px' }"
   >
-    <div v-if="playStorkes" :class="['strock-play-box']" :style="{ color: frameColor }" @click="playHanzi">
+    <div v-if="playStorkes" :class="['strock-play-box']" :style="{ color: playColor }" @click="playHanzi">
       <SvgIcon icon-class="hanzi-strock-play" class="strock-play-btn" />
     </div>
     <div class="character-target-box">
@@ -44,7 +44,7 @@ export default {
       type: String,
       default: 'tian',
     },
-    frameColor: {
+    playColor: {
       type: String,
       default: '#F13232',
     },

src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

@@ -78,7 +78,7 @@
                   :paly-width="'18px'"
                   :BoxbgType="'0'"
                   :cur-item="items.hz_info[0].hzDetail.hz_json"
-                  :target-div="'writeTops-item-' + '-' + items.hz_info[0].con"
+                  :target-div="'writeTops-item-' + '-' + items.hz_info[0].con + row"
                   class="writeTop-item"
                   :style="{
                     borderColor:

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

@@ -2,7 +2,6 @@
 <template>
   <div class="newWord-template-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
-
     <div class="main">
       <div
         class="item-box"
@@ -50,9 +49,12 @@
               @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 : '',
+                fontSize:
+                  data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                 background:
-                  data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                  data.unified_attrib && data.unified_attrib.assist_color
+                    ? data.unified_attrib.assist_color
+                    : '#deebff',
               }"
             />
           </div>
@@ -94,9 +96,11 @@
                   ]"
                   :style="{
                     fontSize:
-                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                     background:
-                      data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                      data.unified_attrib && data.unified_attrib.assist_color
+                        ? data.unified_attrib.assist_color
+                        : '#deebff',
                   }"
                 />
               </div>
@@ -128,7 +132,7 @@
                       : null
                   "
                   :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                  :targetDiv="'newWordTemplate' + items.con + index + indexs + Math.random().toString(36)"
+                  :targetDiv="'newWordTemplate-answer' + items.con + index + indexs + randomId"
                   :hz_json="items.hz_info[0].hzDetail.hz_json"
                   class="hanzi-storck"
                   :class="[
@@ -161,9 +165,11 @@
                   :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 : '',
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                     background:
-                      data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                      data.unified_attrib && data.unified_attrib.assist_color
+                        ? data.unified_attrib.assist_color
+                        : '#deebff',
                   }"
                 />
               </div>
@@ -178,9 +184,12 @@
               @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 : '',
+                fontSize:
+                  data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                 background:
-                  data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                  data.unified_attrib && data.unified_attrib.assist_color
+                    ? data.unified_attrib.assist_color
+                    : '#deebff',
               }"
             />
           </div>
@@ -208,7 +217,14 @@
                   : '',
             }"
           >
-            <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
@@ -232,9 +248,11 @@
                 @input="changeAnswer(item, index)"
                 :style="{
                   fontSize:
-                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                   background:
-                    data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                    data.unified_attrib && data.unified_attrib.assist_color
+                      ? data.unified_attrib.assist_color
+                      : '#deebff',
                 }"
               />
             </div>
@@ -272,9 +290,13 @@
                     @input="changeAnswer(item, index, indexs)"
                     :style="{
                       fontSize:
-                        data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                        data.unified_attrib && data.unified_attrib.pinyin_size
+                          ? data.unified_attrib.pinyin_size
+                          : '16px',
                       background:
-                        data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                        data.unified_attrib && data.unified_attrib.assist_color
+                          ? data.unified_attrib.assist_color
+                          : '#deebff',
                     }"
                   />
                 </div>
@@ -306,7 +328,7 @@
                         : null
                     "
                     :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                    :targetDiv="'newWordTemplatez' + items.con + index + indexs + Math.random().toString(36)"
+                    :targetDiv="'newWordTemplatez' + items.con + index + indexs + randomId"
                     :hz_json="items.hz_info[0].hzDetail.hz_json"
                     class="hanzi-storck"
                     :class="[
@@ -338,9 +360,13 @@
                     @input="changeAnswer(items, index, indexs)"
                     :style="{
                       fontSize:
-                        data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                        data.unified_attrib && data.unified_attrib.pinyin_size
+                          ? data.unified_attrib.pinyin_size
+                          : '16px',
                       background:
-                        data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                        data.unified_attrib && data.unified_attrib.assist_color
+                          ? data.unified_attrib.assist_color
+                          : '#deebff',
                     }"
                   />
                 </div>
@@ -358,9 +384,11 @@
                 @input="changeAnswer(item, index)"
                 :style="{
                   fontSize:
-                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                   background:
-                    data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                    data.unified_attrib && data.unified_attrib.assist_color
+                      ? data.unified_attrib.assist_color
+                      : '#deebff',
                 }"
               />
             </div>
@@ -387,6 +415,7 @@ export default {
     return {
       data: getNewWordTemplateData(),
       userAnswer: [],
+      randomId: Math.random().toString(36).substring(2, 12),
     };
   },
   watch: {
@@ -547,7 +576,8 @@ export default {
 
     :deep .edit-div {
       min-height: 32px;
-      font-size: 16px;
+
+      // font-size: 16px;
       line-height: 30px;
       color: #000;
 

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

@@ -12,6 +12,7 @@
           <AudioPlay
             v-if="data.audio_file_id && data.property.audio_position === 'front'"
             :file-id="data.audio_file_id"
+            :theme-color="data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''"
           />
           <div
             class="option-content"

src/views/book/courseware/preview/components/write/WritePreview.vue

@@ -23,7 +23,12 @@
               }"
             >
               <div class="words-left" :style="{ width: '64' * item.hz_strokes_list.length + 'px' }">
-                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+                <AudioPlay
+                  :file-id="item.audio_file_id"
+                  :theme-color="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
+                />
                 <span class="pinyin">{{ item.pinyin }}</span>
               </div>
             </div>