录音组件统一样式

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

@@ -2,14 +2,22 @@
   <div class="record">
     <template v-if="type === 'normal' || type === 'mini'">
       <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone">
-        <div
+        <!-- <div
           v-if="microphoneStatus"
           :style="{
             backgroundColor: attrib?.topic_color,
             maskImage: `url(${require('@/assets/voice_matrix/luyin-active.png')})`,
           }"
           class="icon-mask"
-        ></div>
+        ></div> -->
+        <SvgIcon
+          v-if="microphoneStatus"
+          icon-class="luyin-ing"
+          size="24"
+          :style="{
+            color: attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        />
         <SvgIcon
           v-else
           icon-class="luyin-radio-button"
@@ -43,14 +51,22 @@
 
     <template v-else-if="type === 'pro'">
       <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone">
-        <div
+        <!-- <div
           v-if="microphoneStatus"
           :style="{
             backgroundColor: attrib?.topic_color,
             maskImage: `url(${require('@/assets/voice_matrix/luyin-active.png')})`,
           }"
           class="icon-mask"
-        ></div>
+        ></div> -->
+        <SvgIcon
+          v-if="microphoneStatus"
+          icon-class="luyin-ing"
+          size="24"
+          :style="{
+            color: attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        />
         <SvgIcon
           v-else
           icon-class="luyin-radio-button"
@@ -82,14 +98,22 @@
 
     <template v-else>
       <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone">
-        <div
+        <!-- <div
           v-if="microphoneStatus"
           :style="{
             backgroundColor: attrib?.topic_color,
             maskImage: `url(${require('@/assets/voice_matrix/luyin-active.png')})`,
           }"
           class="icon-mask"
-        ></div>
+        ></div> -->
+        <SvgIcon
+          v-if="microphoneStatus"
+          icon-class="luyin-ing"
+          size="24"
+          :style="{
+            color: attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        />
         <SvgIcon
           v-else
           icon-class="luyin-radio-button"

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

@@ -196,7 +196,8 @@ export default {
     height: 40px;
     color: #fff;
     cursor: pointer;
-    background-color: $main-color;
+
+    // background-color: $main-color;
     border-radius: 20px;
 
     &.not-url {

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

@@ -17,6 +17,9 @@
           <div
             class="option-content"
             :class="[isJudgingRightWrong ? (con_preview[0].all_right ? 'all-right' : 'has-error') : '']"
+            :style="{
+              fontSize: data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
+            }"
           >
             <span v-if="data.content_hz" class="items-hz">{{ data.content_hz }}</span>
             <!-- 拼音输入 -->

src/views/book/courseware/preview/components/record_input/SoundRecord.vue

@@ -51,13 +51,13 @@
       <SvgIcon
         v-if="microphoneStatus"
         icon-class="luyin-ing"
-        size="16"
+        size="24"
         :style="{ color: attrib.topic_color ? attrib.topic_color : '#DCDFE6' }"
       />
       <SvgIcon
         v-else
-        icon-class="luyin"
-        size="16"
+        icon-class="luyin-radio-button"
+        size="24"
         :style="{ color: attrib.topic_color ? attrib.topic_color : '#DCDFE6' }"
       />
     </div>
@@ -69,7 +69,10 @@
         microphoneStatus ? 'record-ing' : '',
         selectIndex || selectIndex == 0 ? 'record-black' : '',
       ]"
-      :style="{ color: microphoneStatus ? (attrib.topic_color ? attrib.topic_color : '#DCDFE6') : '' }"
+      :style="{
+        fontSize: attrib && attrib.font_size ? attrib.font_size : '',
+        color: microphoneStatus && attrib && attrib.topic_color ? attrib.topic_color : '#DCDFE6',
+      }"
       >{{ isPlaying ? '-' : '' }}{{ handleDateTime(recordtime) }}</span
     >
     <el-select
@@ -87,8 +90,8 @@
     ></div>
     <a v-if="manyTimes" :class="['record-delete', hasMicro ? 'record-delete-has' : '']" @click="handleDelete">
       <SvgIcon
-        icon-class="delete-btn"
-        size="16"
+        icon-class="luyin-delete"
+        size="24"
         :style="{ color: hasMicro ? (attrib.topic_color ? attrib.topic_color : '#DCDFE6') : 'rgba(0, 0, 0, 0.3)' }"
       />
     </a>
@@ -387,8 +390,8 @@ export default {
   height: 32px;
 
   .playBack {
-    width: 16px;
-    height: 16px;
+    width: 24px;
+    height: 24px;
     margin-left: 8px;
     cursor: pointer;
     background: url('@/assets/voice_matrix/luyin-play.png') center no-repeat;
@@ -414,20 +417,21 @@ export default {
   }
 
   .record {
-    width: 16px;
-    height: 16px;
+    width: 24px;
+    height: 24px;
     cursor: pointer;
-    background: url('@/assets/voice_matrix/luyin.png') center no-repeat;
-    background-size: 100%;
+
+    // background: url('@/assets/voice_matrix/luyin.png') center no-repeat;
+    // background-size: 100%;
 
     &.active {
-      background: url('@/assets/voice_matrix/luyin-active.png') center no-repeat;
-      background-size: 100%;
+      // background: url('@/assets/voice_matrix/luyin-active.png') center no-repeat;
+      // background-size: 100%;
     }
 
     &.active:hover {
-      background: url('@/assets/voice_matrix/luyin-stop.png') center no-repeat;
-      background-size: 100%;
+      // background: url('@/assets/voice_matrix/luyin-stop.png') center no-repeat;
+      // background-size: 100%;
     }
   }
 
@@ -457,8 +461,8 @@ export default {
 
   .record-delete {
     display: block;
-    width: 16px;
-    height: 16px;
+    width: 24px;
+    height: 24px;
     margin-left: 8px;
     font-size: 0;
     cursor: pointer;