文章主题色

src/icons/svg/icon-article-phrase.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="36" height="36" style="" filter="none">
+    
+    <g>
+    <path d="M7 37C7 29.2967 7 11 7 11C7 7.68629 9.68629 5 13 5H35V31C35 31 18.2326 31 13 31C9.7 31 7 33.6842 7 37Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M35 31C35 31 14.1537 31 13 31C9.68629 31 7 33.6863 7 37C7 40.3137 9.68629 43 13 43C15.2091 43 25.8758 43 41 43V7" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M14 37H34" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+    </g>
+  </svg>

src/icons/svg/icon-article-practice.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="36" height="36" style="" filter="none">
+    
+    <g>
+    <path d="M1.333 29.333c0-5.891 4.776-10.667 10.667-10.667s10.667 4.776 10.667 10.667v0h-2.667c0-4.418-3.582-8-8-8s-8 3.582-8 8v0h-2.667zM12 17.333c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM12 14.667c2.947 0 5.333-2.387 5.333-5.333s-2.387-5.333-5.333-5.333-5.333 2.387-5.333 5.333 2.387 5.333 5.333 5.333zM28.731 1.045c1.221 2.408 1.936 5.251 1.936 8.26 0 0.010 0 0.020-0 0.029v-0.002c0 2.977-0.697 5.792-1.936 8.288l-2.193-1.595c0.924-1.957 1.463-4.25 1.463-6.67 0-0.008 0-0.016-0-0.024v0.001c0-2.389-0.524-4.657-1.463-6.693l2.193-1.595zM24.328 4.245c0.636 1.499 1.005 3.242 1.005 5.071 0 0.006 0 0.012 0 0.018v-0.001c0 0.005 0 0.011 0 0.017 0 1.829-0.37 3.572-1.038 5.159l0.033-0.087-2.236-1.627c0.364-1.029 0.575-2.216 0.575-3.452 0-0.003 0-0.007 0-0.010v0.001c0-0.004 0-0.009 0-0.014 0-1.234-0.21-2.42-0.596-3.522l0.023 0.075 2.235-1.627z" fill="currentColor"></path>
+    </g>
+  </svg>

src/icons/svg/icon-full.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="36" height="36" style="" filter="none">
+    
+    <g>
+    <path d="M30 24v-20h-28v20h-2v2h8.8l-1.8 3.6 1.8 0.8 2.4-4.4h9.8l2.2 4.4 1.8-0.8-1.8-3.6h8.8v-2h-2zM22.2 24h-18.2v-18h24v18h-5.8z" fill="currentColor"></path><path d="M6 22h20v-14h-20v14z" fill="currentColor"></path>
+    </g>
+  </svg>

src/icons/svg/icon-wbfx.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="36" height="36" style="" filter="none">
+    
+    <g>
+    <path d="M40 20.8421V6C40 4.89543 39.1046 4 38 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44H26" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M14 17H20" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M28 17H34" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M14 28H20" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M14 34H20" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M17 20L17 14" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M37.728 37.728L41.9707 41.9707" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><circle cx="33.4854" cy="33.4853" r="6" transform="rotate(45 33.4854 33.4853)" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></circle>
+    </g>
+  </svg>

src/views/book/courseware/preview/common/SoundRecord.vue

@@ -36,7 +36,6 @@
           type && type == 'normal' ? 'record-time-flex' : '',
         ]"
         :style="{
-          fontSize: attrib && attrib.font_size ? attrib.font_size : '',
           color: microphoneStatus && attrib && attrib.topic_color ? attrib.topic_color : '',
         }"
         >{{ isPlaying ? '-' : '' }}{{ handleDateTime(recordtime) }}</span
@@ -130,7 +129,6 @@
           selectIndex || selectIndex == 0 ? 'record-black' : '',
         ]"
         :style="{
-          fontSize: attrib && attrib.font_size ? attrib.font_size : '',
           color: microphoneStatus && attrib && attrib.topic_color ? attrib.topic_color : '',
         }"
         >{{ isPlaying ? '-' : '' }}{{ handleDateTime(recordtime) }}</span
@@ -441,6 +439,7 @@ export default {
   }
 
   .playBack {
+    flex-shrink: 0;
     width: 20px;
     height: 20px;
     margin-left: 8px;

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

@@ -408,7 +408,15 @@
                 />
               </div>
             </div>
-            <span class="full-screen-icon" @click="fullScreen"> </span>
+            <span class="full-screen-icon" @click="fullScreen">
+              <svg-icon
+                icon-class="icon-full"
+                size="24"
+                :style="{
+                  color: attrib && attrib.topic_color ? attrib.topic_color : '',
+                }"
+              />
+            </span>
           </div>
         </div>
         <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
@@ -1122,11 +1130,12 @@ export default {
     }
 
     .full-screen-icon {
-      width: 16px;
-      height: 16px;
+      width: 24px;
+      height: 24px;
       cursor: pointer;
-      background: url('@/assets/full-screen-red.png') no-repeat left top;
-      background-size: 100% 100%;
+
+      // background: url('@/assets/full-screen-red.png') no-repeat left top;
+      // background-size: 100% 100%;
     }
   }
 

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

@@ -105,8 +105,8 @@ export default {
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .compare-box {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   margin-left: 8px;
 
   &-big {
@@ -118,8 +118,8 @@ export default {
 
 .compare-disable {
   display: block;
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   margin-left: 8px;
 
   &-big {

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

@@ -384,8 +384,8 @@ export default {
 
   .audioLine2 {
     .play-icon {
-      width: 16px;
-      height: 16px;
+      width: 24px;
+      height: 24px;
       cursor: pointer;
 
       &.playBtn-icon {

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

@@ -6,23 +6,36 @@
     <div class="main">
       <div class="NPC-ArticleView NPC-ArticleView-container">
         <div class="ArticleView-header">
-          <a class="ArticleView-full" @click="fullScreen">黑板模式</a>
+          <a class="ArticleView-full" @click="fullScreen">
+            <svg-icon
+              icon-class="icon-full"
+              size="24"
+              :style="{
+                color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+              }"
+            />
+          </a>
           <div>
             <div
               v-if="
                 (tokenData && tokenData.popedom_code_list && tokenData.popedom_code_list.indexOf(2100001) != -1) ||
                 (tokenData && tokenData.user_type === 'APP')
               "
-              class="left"
-              :style="{ marginLeft: '104px' }"
+              :style="{ marginLeft: '40px' }"
               @click="submit"
+              title="文本分析"
             >
-              <!-- <img src="@/assets/wbfx-icon.png" alt="" /> -->
-              文本分析
+              <svg-icon
+                icon-class="icon-wbfx"
+                size="24"
+                :style="{
+                  color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                }"
+              />
             </div>
           </div>
           <div class="right">
-            <template v-if="data.property.is_enable_new_word === 'true'">
+            <!-- <template v-if="data.property.is_enable_new_word === 'true'">
               <el-switch
                 v-model="showPhrases"
                 style="display: block"
@@ -54,7 +67,40 @@
                 inactive-text="取词"
                 @change="handleSwitchChange('showPhrases', 'showPractice')"
               />
-            </template>
+            </template> -->
+            <a
+              v-if="data.property.is_enable_new_word === 'true'"
+              @click="handleSwitchChange('showPractice', 'showWord', 'showPhrases')"
+              :style="{
+                color:
+                  showPhrases && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-ci" size="24" />本课生词</a
+            >
+            <a
+              v-if="data.property.is_enable_read === 'true'"
+              @click="handleSwitchChange('showPhrases', 'showWord', 'showPractice')"
+              :style="{
+                color:
+                  showPractice && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-practice" size="24" />语音练习</a
+            >
+            <a
+              v-if="data.property.is_enable_word === 'true'"
+              @click="handleSwitchChange('showPhrases', 'showPractice', 'showWord')"
+              :style="{
+                color:
+                  showWord && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-phrase" size="24" />取词</a
+            >
           </div>
           <!-- <div class="setting-fontsize">
         <a @click="handleFontsize('-')"
@@ -633,13 +679,14 @@ export default {
       top: 0;
       left: 0;
       z-index: 1;
-      padding-left: 24px;
       font-size: 16px;
       font-weight: bold;
       line-height: 24px;
       color: #000;
-      background: url('@/assets/full-screen-red.png') left center no-repeat;
-      background-size: 20px 20px;
+      cursor: pointer;
+
+      // background: url('@/assets/full-screen-red.png') left center no-repeat;
+      // background-size: 20px 20px;
     }
 
     .ArticleView-header {
@@ -654,13 +701,15 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-left: 24px;
+
+        // padding-left: 24px;
         font-size: 16px;
         font-weight: bold;
         line-height: 24px;
         cursor: pointer;
-        background: url('@/assets/wbfx-icon.png') left center no-repeat;
-        background-size: 20px;
+
+        // background: url('@/assets/wbfx-icon.png') left center no-repeat;
+        // background-size: 20px;
 
         img {
           width: 20px;
@@ -671,6 +720,15 @@ export default {
 
       .right {
         display: flex;
+        gap: 24px;
+
+        a {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+          color: rgba(0, 0, 0, 65%);
+          cursor: pointer;
+        }
       }
 
       .setting-fontsize {

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

@@ -476,6 +476,7 @@
                 :tmIndex="index"
                 @handleWav="handleWav"
                 :sentIndex="sentIndex"
+                :attrib="attrib"
                 v-if="refresh"
               />
               <div class="compare-box" v-if="curQue.mp3_list && curQue.mp3_list.length > 0">
@@ -496,7 +497,15 @@
                 />
               </div>
             </div>
-            <span class="full-screen-icon" @click="fullScreen"> </span>
+            <span class="full-screen-icon" @click="fullScreen">
+              <svg-icon
+                icon-class="icon-full"
+                size="24"
+                :style="{
+                  color: attrib && attrib.topic_color ? attrib.topic_color : '',
+                }"
+              />
+            </span>
           </div>
         </div>
         <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
@@ -1348,11 +1357,12 @@ export default {
     }
 
     .full-screen-icon {
-      width: 16px;
-      height: 16px;
+      width: 24px;
+      height: 24px;
       cursor: pointer;
-      background: url('@/assets/full-screen-red.png') no-repeat left top;
-      background-size: 100% 100%;
+
+      // background: url('@/assets/full-screen-red.png') no-repeat left top;
+      // background-size: 100% 100%;
     }
   }
 

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

@@ -6,7 +6,15 @@
     <div class="main">
       <div class="NPC-ArticleView NPC-ArticleView-container">
         <div class="ArticleView-header">
-          <a class="ArticleView-full" @click="fullScreen">黑板模式</a>
+          <a class="ArticleView-full" @click="fullScreen" title="全屏">
+            <svg-icon
+              icon-class="icon-full"
+              size="24"
+              :style="{
+                color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+              }"
+            />
+          </a>
           <div>
             <div
               v-if="
@@ -14,15 +22,22 @@
                 (tokenData && tokenData.user_type === 'APP')
               "
               class="left"
-              :style="{ marginLeft: '104px' }"
+              :style="{ marginLeft: '40px' }"
               @click="submit"
+              title="文本分析"
             >
               <!-- <img src="@/assets/wbfx-icon.png" alt="" /> -->
-              文本分析
+              <svg-icon
+                icon-class="icon-wbfx"
+                size="24"
+                :style="{
+                  color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                }"
+              />
             </div>
           </div>
           <div class="right">
-            <template v-if="data.property.is_enable_new_word === 'true'">
+            <!-- <template v-if="data.property.is_enable_new_word === 'true'">
               <el-switch
                 v-model="showPhrases"
                 style="display: block"
@@ -54,7 +69,40 @@
                 inactive-text="取词"
                 @change="handleSwitchChange('showPhrases', 'showPractice')"
               />
-            </template>
+            </template> -->
+            <a
+              v-if="data.property.is_enable_new_word === 'true'"
+              @click="handleSwitchChange('showPractice', 'showWord', 'showPhrases')"
+              :style="{
+                color:
+                  showPhrases && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-ci" size="24" />本课生词</a
+            >
+            <a
+              v-if="data.property.is_enable_read === 'true'"
+              @click="handleSwitchChange('showPhrases', 'showWord', 'showPractice')"
+              :style="{
+                color:
+                  showPractice && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-practice" size="24" />语音练习</a
+            >
+            <a
+              v-if="data.property.is_enable_word === 'true'"
+              @click="handleSwitchChange('showPhrases', 'showPractice', 'showWord')"
+              :style="{
+                color:
+                  showWord && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-phrase" size="24" />取词</a
+            >
           </div>
         </div>
         <div ref="ArticleViewbody" class="ArticleView-body">
@@ -323,9 +371,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) {
@@ -619,13 +668,14 @@ export default {
       top: 0;
       left: 0;
       z-index: 1;
-      padding-left: 24px;
       font-size: 16px;
       font-weight: bold;
       line-height: 24px;
       color: #000;
-      background: url('@/assets/full-screen-red.png') left center no-repeat;
-      background-size: 20px 20px;
+      cursor: pointer;
+
+      // background: url('@/assets/full-screen-red.png') left center no-repeat;
+      // background-size: 20px 20px;
     }
 
     .ArticleView-header {
@@ -640,13 +690,15 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-left: 24px;
+
+        // padding-left: 24px;
         font-size: 16px;
         font-weight: bold;
         line-height: 24px;
         cursor: pointer;
-        background: url('@/assets/wbfx-icon.png') left center no-repeat;
-        background-size: 20px;
+
+        // background: url('@/assets/wbfx-icon.png') left center no-repeat;
+        // background-size: 20px;
 
         img {
           width: 20px;
@@ -657,6 +709,15 @@ export default {
 
       .right {
         display: flex;
+        gap: 24px;
+
+        a {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+          color: rgba(0, 0, 0, 65%);
+          cursor: pointer;
+        }
       }
 
       .setting-fontsize {

src/views/book/courseware/preview/components/voice_matrix/components/AudioLine.vue

@@ -401,8 +401,8 @@ export default {
 
   .audioLine2 {
     .play-icon {
-      width: 16px;
-      height: 16px;
+      width: 20px;
+      height: 20px;
       cursor: pointer;
 
       &-big {