课文问题

src/icons/svg/icon-pencil.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9L2.58555 4.27834C2.66132 4.05271 2.92697 3.89498 3.23121 3.89498H6.76879C7.07303 3.89498 7.33835 4.05171 7.41412 4.27735L9 9M5 4.0226C4.25022 4.0226 3.87533 4.0226 3.67622 3.84922C3.65023 3.8266 3.62692 3.80226 3.60654 3.77649C3.45039 3.57898 3.563 3.30516 3.78822 2.75753C4.25832 1.61443 4.49337 1.04288 4.9206 1.00363C4.97334 0.998789 5.02666 0.998789 5.0794 1.00363C5.50663 1.04288 5.74168 1.61443 6.21179 2.75753C6.437 3.30516 6.54961 3.57898 6.39346 3.77649C6.37308 3.80226 6.34977 3.8266 6.32378 3.84922C6.12467 4.0226 5.74978 4.0226 5 4.0226Z" stroke="currentColor" stroke-linecap="round"/>
+</svg>

src/views/book/courseware/preview/components/article/PhraseModelChs.vue

@@ -107,6 +107,12 @@
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              color:
+                                newWordList.indexOf(pItem.chs) > -1 || pItem.words
+                                  ? attrib
+                                    ? attrib.topic_color
+                                    : ''
+                                  : '',
                             }"
                             @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
@@ -243,6 +249,12 @@
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
+                            color:
+                              newWordList.indexOf(pItem.chs) > -1 || pItem.words
+                                ? attrib
+                                  ? attrib.topic_color
+                                  : ''
+                                : '',
                           }"
                           @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span

src/views/book/courseware/preview/components/article/components/AudioRed.vue

@@ -1,7 +1,15 @@
 <!--  -->
 <template>
   <div v-if="mp3" class="content-voices" @click="handlePlayVoice">
-    <img :src="voiceSrc" :class="type == 'full' ? 'icon-big' : ''" />
+    <img
+      :src="voiceSrc"
+      :class="type == 'full' ? 'icon-big' : ''"
+      class="icon-mask"
+      :style="{
+        backgroundColor: themeColor,
+        maskImage: `url(${voiceSrc})`,
+      }"
+    />
   </div>
 </template>
 

src/views/book/courseware/preview/components/article/components/Practice.vue

@@ -22,19 +22,30 @@
       <div class="tab-box" :class="[isPhone ? 'tab-box-phone' : '']">
         <div class="tab-box_0" :class="[isShow == '0' ? 'z-top' : '']">
           <div class="left-content">
-            <div class="strockplay">
+            <div
+              class="strockplay"
+              :style="{
+                borderColor: attrib ? attrib.topic_color : '',
+              }"
+            >
               <Strockplayredline
                 :play-storkes="true"
                 :word-num="item.con.length"
                 :Book_text="item.con"
                 :target-div="'pra' + item.con + index"
+                :attrib="attrib"
               />
             </div>
             <div class="left-content-pra">
               <div>
                 <span v-if="item.pinyin">{{ item.pinyin.toLowerCase() }}</span>
                 <div v-if="mp3Url" style="margin-left: 4px">
-                  <Audio :mp3="mp3Url ? mp3Url : ''" :theme-color="themeColor" :bg="bg" :ed="ed" />
+                  <Audio
+                    :mp3="mp3Url ? mp3Url : ''"
+                    :theme-color="attrib ? attrib.topic_color : '#e35454'"
+                    :bg="bg"
+                    :ed="ed"
+                  />
                 </div>
               </div>
             </div>
@@ -81,6 +92,7 @@
                     :hanzicolor="hanzicolor"
                     :play-storkes="true"
                     :target-div="'write-pra' + cur.stem[0].con"
+                    :attrib="attrib"
                   />
                 </template>
                 <template v-else>
@@ -94,6 +106,7 @@
                     :TaskModel="TaskModel"
                     :write-list="writeList"
                     @saveWriteAnswer="saveWriteAnswer"
+                    :attrib="attrib"
                   />
                   <div class="footer">
                     <div class="pen-colors"></div>
@@ -103,20 +116,43 @@
               </div>
 
               <ul v-if="TaskModel != 'ANSWER'" class="nav-list">
-                <li :class="navIndex == 0 ? 'active' : ''" @click="changeNav(0)">描红</li>
-                <li :class="navIndex == 1 ? 'active' : ''" @click="changeNav(1)">临摹</li>
+                <li
+                  :class="navIndex == 0 ? 'active' : ''"
+                  @click="changeNav(0)"
+                  :style="{
+                    background: attrib ? attrib.topic_color : '',
+                  }"
+                >
+                  描红
+                </li>
+                <li
+                  :class="navIndex == 1 ? 'active' : ''"
+                  @click="changeNav(1)"
+                  :style="{
+                    background: attrib ? attrib.assist_color : '',
+                    color: attrib ? attrib.topic_color : '',
+                  }"
+                >
+                  临摹
+                </li>
               </ul>
             </div>
           </template>
         </div>
         <div class="tab-box_1" :class="[isShow == '1' ? 'z-top' : '']">
           <div class="left-content">
-            <div class="strockplay">
+            <div
+              class="strockplay"
+              :style="{
+                borderColor: attrib ? attrib.topic_color : '',
+              }"
+            >
               <Strockplayredline
                 :play-storkes="true"
                 :word-num="item.TChinese.length"
                 :Book_text="item.TChinese"
                 :target-div="'praT' + item.TChinese + index"
+                :attrib="attrib"
               />
             </div>
             <div class="left-content-pra"></div>
@@ -163,6 +199,7 @@
                     :hanzicolor="hanzicolor"
                     :play-storkes="true"
                     :target-div="'write-praT' + cur.stem[0].TChinese"
+                    :attrib="attrib"
                   />
                 </template>
                 <template v-else>
@@ -176,6 +213,7 @@
                     :TaskModel="TaskModel"
                     :write-list="writeList"
                     @saveWriteAnswer="saveWriteAnswer"
+                    :attrib="attrib"
                   />
                   <div class="footer">
                     <div class="pen-colors"></div>
@@ -185,8 +223,25 @@
               </div>
 
               <ul v-if="TaskModel != 'ANSWER'" class="nav-list">
-                <li :class="navIndex == 0 ? 'active' : ''" @click="changeNav(0)">描红</li>
-                <li :class="navIndex == 1 ? 'active' : ''" @click="changeNav(1)">临摹</li>
+                <li
+                  :class="navIndex == 0 ? 'active' : ''"
+                  @click="changeNav(0)"
+                  :style="{
+                    background: attrib ? attrib.topic_color : '',
+                  }"
+                >
+                  描红
+                </li>
+                <li
+                  :class="navIndex == 1 ? 'active' : ''"
+                  @click="changeNav(1)"
+                  :style="{
+                    background: attrib ? attrib.assist_color : '',
+                    color: attrib ? attrib.topic_color : '',
+                  }"
+                >
+                  临摹
+                </li>
               </ul>
             </div>
           </template>
@@ -211,7 +266,18 @@ export default {
     Freewrite,
     Audio,
   },
-  props: ['cur', 'changePraShow', 'themeColor', 'currentTreeID', 'mp3Url', 'TaskModel', 'writeList', 'bg', 'ed'],
+  props: [
+    'cur',
+    'changePraShow',
+    'themeColor',
+    'currentTreeID',
+    'mp3Url',
+    'TaskModel',
+    'writeList',
+    'bg',
+    'ed',
+    'attrib',
+  ],
   data() {
     return {
       //   learn_mode: "",

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

@@ -14,7 +14,10 @@
               : 'red-border',
       ]"
       @click="playHanzi"
-    ></div>
+      :style="{ color: attrib ? attrib.topic_color : '' }"
+    >
+      <SvgIcon icon-class="hanzi-strock-play" size="22" class="strock-play-btn" />
+    </div>
 
     <div :id="targetDiv" class="character-target-div"></div>
   </div>
@@ -25,7 +28,7 @@ import { GetStaticResources } from '@/api/app';
 const HanziWriter = require('hanzi-writer');
 export default {
   components: {},
-  props: ['targetDiv', 'Book_text', 'playStorkes', 'strokeColor', 'wordNum', 'themeColor'],
+  props: ['targetDiv', 'Book_text', 'playStorkes', 'strokeColor', 'wordNum', 'themeColor', 'attrib'],
   data() {
     return {
       writer: null,
@@ -69,7 +72,7 @@ export default {
       _this.writer = null;
       // var ren = require("hanzi-writer-data/国");
       _this.writer = HanziWriter.default.create(_this.targetDiv, _this.Book_text, {
-        charDataLoader (char, onComplete) {
+        charDataLoader(char, onComplete) {
           let MethodName = 'hz_resource_manager-GetHZStrokesContent';
           let data = {
             hz: char,
@@ -114,7 +117,7 @@ export default {
 .strock-play-box {
   position: absolute;
   top: 0;
-  right: -2px;
+  right: 0;
   z-index: 999;
   display: flex;
   align-items: center;
@@ -125,8 +128,8 @@ export default {
 }
 
 .red-border {
-  background: url('@/assets/strock-play-red-click.png');
-  background-size: 100%;
+  // background: url('@/assets/strock-play-red-click.png');
+  // background-size: 100%;
 }
 
 // .strock-play-box:active {

src/views/book/courseware/preview/components/article/components/Wordcard.vue

@@ -7,8 +7,8 @@
       </div>
       <div v-if="word.detail" class="bwc-top">
         <span v-if="word.detail.pinyin">{{ word.detail.pinyin.toLowerCase() }}</span>
-        <div v-if="mp3Url" style="margin-left: 4px">
-          <Audio :mp3="mp3Url ? mp3Url : ''" :theme-color="themeColor" :bg="bg" :ed="ed" />
+        <div style="margin-left: 4px">
+          <Audio :mp3="mp3Url ? mp3Url : ''" :theme-color="attrib ? attrib.topic_color : '#e35454'" :bg="bg" :ed="ed" />
         </div>
 
         <!-- <img
@@ -29,7 +29,10 @@
         <div
           v-if="word.detail.new_word.length < 5"
           class="bwc-Strockplay"
-          :style="{ width: word.detail.new_word.length * 126 + 4 + 'px' }"
+          :style="{
+            width: word.detail.new_word.length * 126 + 4 + 'px',
+            borderColor: attrib ? attrib.topic_color : '',
+          }"
         >
           <div v-for="(conItem, conindex) in word.detail.new_word" :key="conindex" class="strockplay">
             <Strockplayredline
@@ -38,8 +41,19 @@
               :target-div="'bwcHanziIntp' + conItem + conindex"
               :word-num="word.detail.new_word.length"
               :theme-color="themeColor"
+              :attrib="attrib"
             />
-            <img
+            <svg-icon
+              v-if="word.detail.new_word.length > 1"
+              icon-class="icon-pencil"
+              size="24"
+              :style="{
+                color: attrib && attrib.topic_color ? attrib.topic_color : '#de4444',
+              }"
+              class="collect-icon"
+              @click="writeWord(conItem, '', word.detail.new_word.length)"
+            />
+            <!-- <img
               v-if="word.detail.new_word.length > 1"
               :src="
                 themeColor
@@ -52,11 +66,23 @@
               "
               class="collect-icon"
               @click="writeWord(conItem, '', word.detail.new_word.length)"
-            />
-            <div v-if="conindex < word.detail.new_word.length - 1" class="bwc-line"></div>
+            /> -->
+            <div
+              v-if="conindex < word.detail.new_word.length - 1"
+              class="bwc-line"
+              :style="{
+                background: attrib && attrib.topic_color ? attrib.topic_color : '',
+              }"
+            ></div>
           </div>
         </div>
-        <p v-else class="bwc-tolength">
+        <p
+          v-else
+          class="bwc-tolength"
+          :style="{
+            borderColor: attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        >
           <span v-for="(item, index) in word.detail.new_word" :key="index">{{ item }}</span>
         </p>
       </div>
@@ -121,6 +147,14 @@
           class="bwc-btn bwc-btn2"
           @click="writeWord(word.detail.new_word, word.detail.pinyin, word.detail.new_word.length)"
         >
+          <svg-icon
+            icon-class="icon-pencil"
+            size="24"
+            :style="{
+              color: attrib && attrib.topic_color ? attrib.topic_color : '#de4444',
+            }"
+            class="collect-icon"
+          />
           <img
             :src="
               themeColor
@@ -159,6 +193,7 @@
           :bg="bg"
           :ed="ed"
           @changeCurQue="changeCurQue"
+          :attrib="attrib"
         />
       </div>
       <!-- </el-dialog> -->
@@ -170,6 +205,7 @@
           :theme-color="themeColor"
           :bg="bg"
           :ed="ed"
+          :attrib="attrib"
         />
       </div>
     </template>
@@ -202,6 +238,7 @@ export default {
     'mp3Url',
     'bg',
     'ed',
+    'attrib',
   ],
   data() {
     return {

src/views/book/courseware/preview/components/article/index.vue

@@ -384,9 +384,10 @@ export default {
       }
     },
     // 切换开关
-    handleSwitchChange(obj1, obj2) {
+    handleSwitchChange(obj1, obj2, obj3) {
       this[obj1] = false;
       this[obj2] = false;
+      this[obj3] = !this[obj3];
       this.showPreview = false;
     },
     handleObj(list) {

src/views/book/courseware/preview/components/dialogue_article/PhraseModelChs.vue

@@ -124,6 +124,12 @@
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              color:
+                                newWordList.indexOf(pItem.chs) > -1 || pItem.words
+                                  ? attrib
+                                    ? attrib.topic_color
+                                    : ''
+                                  : '',
                             }"
                             @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
@@ -265,6 +271,12 @@
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
+                            color:
+                              newWordList.indexOf(pItem.chs) > -1 || pItem.words
+                                ? attrib
+                                  ? attrib.topic_color
+                                  : ''
+                                : '',
                           }"
                           @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span