音频条 主题色

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

@@ -3,13 +3,16 @@
   <div :class="['AudioNNPE', mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '']">
     <div v-if="!hideSlider" class="audioLine">
       <div class="playBox" @click="PlayAudio">
-        <div class="play" :class="[audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn']"></div>
+        <div class="play" :class="[audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn']">
+          <SvgIcon v-if="audio.playing" icon-class="pause-large-fill" :style="{ color: bookInfo.theme_color }" />
+          <SvgIcon v-else icon-class="play-large-fill" :style="{ color: bookInfo.theme_color }" />
+        </div>
       </div>
 
       <template v-if="!isRepeat">
         <el-slider
           v-model="playValue"
-          :style="{ width: sliderWidth + 'px', height: '2px' }"
+          :style="{ width: sliderWidth + 'px', height: '2px', '--slider-color': bookInfo.theme_color }"
           :format-tooltip="formatProcessToolTip"
           @change="changeCurrentTime"
         />
@@ -134,6 +137,7 @@ export default {
       activeContent: 1,
     };
   },
+  inject: ['bookInfo'],
   // 计算属性 类似于data概念
   computed: {
     sliderWidth() {
@@ -371,17 +375,8 @@ export default {
       display: block;
       width: 16px;
       height: 16px;
+      font-size: 0;
       cursor: pointer;
-
-      &.playBtn {
-        background: url('@/assets/voice_matrix/icon-pause-blue.png') no-repeat left top;
-        background-size: 100% 100%;
-      }
-
-      &.pauseBtn {
-        background: url('@/assets/voice_matrix/icon-play-blue.png') no-repeat left top;
-        background-size: 100% 100%;
-      }
     }
 
     span {
@@ -450,7 +445,7 @@ export default {
     top: 12px;
     width: 8px;
     height: 8px;
-    background: #1890ff;
+    background: var(--slider-color);
     border: none;
   }
 
@@ -468,7 +463,7 @@ export default {
 
   .el-slider__bar {
     height: 2px;
-    background: #1890ff;
+    background: var(--slider-color);
   }
 }
 </style>