Browse Source

录音组件主题色

natasha 1 day ago
parent
commit
d77c5a0ece

+ 6 - 0
src/views/book/courseware/preview/components/h5_games/H5GamesPreview.vue

@@ -8,6 +8,12 @@
         :class="[full_type ? 'exit-btn' : '']"
         style="margin-bottom: 10px"
         @click="toggleFullScreen"
+        :style="{
+          background:
+            data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
+          borderColor:
+            data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
+        }"
         >{{ full_type ? '退出全屏' : '进入全屏' }}</el-button
       >
       <iframe :src="games_url" width="100%" :height="full_type ? '100%' : '580px'" style="border: none"></iframe>

+ 1 - 0
src/views/book/courseware/preview/components/record_input/RecordInputPreview.vue

@@ -24,6 +24,7 @@
           class="record-box"
           :answer-record-list="data.answer.answer_list.answer_record_list"
           @handleWav="handleWav"
+          :attrib="data.unified_attrib"
         />
       </div>
     </div>

+ 33 - 6
src/views/book/courseware/preview/components/record_input/SoundRecord.vue

@@ -47,7 +47,20 @@
       ></div>
       <a :class="['record-delete', hasMicro ? 'record-delete-has' : '']" @click="handleDelete"></a>
     </template> -->
-    <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone"></div>
+    <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone">
+      <SvgIcon
+        v-if="microphoneStatus"
+        icon-class="luyin-ing"
+        size="16"
+        :style="{ color: attrib.topic_color ? attrib.topic_color : '#DCDFE6' }"
+      />
+      <SvgIcon
+        v-else
+        icon-class="luyin"
+        size="16"
+        :style="{ color: attrib.topic_color ? attrib.topic_color : '#DCDFE6' }"
+      />
+    </div>
 
     <span
       v-if="type !== 'mini'"
@@ -56,6 +69,7 @@
         microphoneStatus ? 'record-ing' : '',
         selectIndex || selectIndex == 0 ? 'record-black' : '',
       ]"
+      :style="{ color: microphoneStatus ? (attrib.topic_color ? attrib.topic_color : '#DCDFE6') : '' }"
       >{{ isPlaying ? '-' : '' }}{{ handleDateTime(recordtime) }}</span
     >
     <el-select
@@ -71,7 +85,13 @@
       :class="['playBack', hasMicro]"
       @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')"
     ></div>
-    <a v-if="manyTimes" :class="['record-delete', hasMicro ? 'record-delete-has' : '']" @click="handleDelete"></a>
+    <a v-if="manyTimes" :class="['record-delete', hasMicro ? 'record-delete-has' : '']" @click="handleDelete">
+      <SvgIcon
+        icon-class="delete-btn"
+        size="16"
+        :style="{ color: hasMicro ? (attrib.topic_color ? attrib.topic_color : '#DCDFE6') : 'rgba(0, 0, 0, 0.3)' }"
+      />
+    </a>
   </div>
 </template>
 
@@ -117,6 +137,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    attrib: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -436,13 +460,16 @@ export default {
     width: 16px;
     height: 16px;
     margin-left: 8px;
-    background: url('@/assets/voice_matrix/luyin-delete.png') center no-repeat;
-    background-size: 100%;
+    font-size: 0;
+    cursor: pointer;
+
+    // background: url('@/assets/voice_matrix/luyin-delete.png') center no-repeat;
+    // background-size: 100%;
 
     &.record-delete-has {
       &:hover {
-        background: url('@/assets/voice_matrix/luyin-delete-active.png') center no-repeat;
-        background-size: 100%;
+        // background: url('@/assets/voice_matrix/luyin-delete-active.png') center no-repeat;
+        // background-size: 100%;
       }
     }
   }