生词预览及录音

src/icons/svg/icon-card.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="M27.68 6.336h-23.36c-0.003 0-0.006-0-0.010-0-1.267 0-2.294 1.027-2.294 2.294 0 0.004 0 0.007 0 0.011v-0.001 14.72c0.006 1.27 1.034 2.298 2.303 2.304h23.361c1.28 0 2.336-1.024 2.336-2.304v-14.72c0-1.28-1.056-2.304-2.336-2.304zM15.104 15.36c0-0.192 0.16-0.384 0.352-0.384h7.232c0.192 0 0.352 0.192 0.352 0.384v0.96c0 0.192-0.16 0.384-0.352 0.384h-7.232c-0.192 0-0.352-0.16-0.352-0.384v-0.96zM13.504 19.136c0 0.192-0.16 0.352-0.352 0.352h-6.976c-0.192 0-0.384-0.16-0.384-0.352v-6.272c0-0.192 0.192-0.352 0.384-0.352h6.976c0.192 0 0.352 0.16 0.352 0.352v6.272zM24.672 19.136c0 0.192-0.16 0.352-0.352 0.352h-8.864c-0.194-0.002-0.35-0.158-0.352-0.352v-0.992c0-0.192 0.16-0.352 0.352-0.352h8.864c0.192 0 0.352 0.16 0.352 0.352v0.992zM26.208 13.856c0 0.192-0.16 0.352-0.384 0.352h-10.368c-0.194-0.002-0.35-0.158-0.352-0.352v-0.992c0-0.192 0.16-0.352 0.352-0.352h10.368c0.224 0 0.384 0.16 0.384 0.352v0.992z" fill="currentColor"></path>
+    </g>
+  </svg>

src/icons/svg/icon-park.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>
+    <rect width="48" height="48" fill="currentColor" fill-opacity="0.01" stroke="none"></rect><rect x="4" y="8" width="40" height="32" rx="2" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M4 29H44H4Z" fill="none"></path><path d="M4 29H44" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4 19H44H4Z" fill="none"></path><path d="M4 19H44" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17 40V19V40Z" fill="none"></path><path d="M17 40V19" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4 38V17V38Z" fill="none"></path><path d="M4 38V17" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M44 38V17V38Z" fill="none"></path><path d="M44 38V17" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M31 40V19V40Z" fill="none"></path><path d="M31 40V19" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M9 40H39" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+    </g>
+  </svg>

src/icons/svg/luyin-delete.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="24" height="24" style="" filter="none">
+    
+    <g>
+    <path d="M22.667 8h6.667v2.667h-2.667v17.333c0 0.736-0.597 1.333-1.333 1.333v0h-18.667c-0.736 0-1.333-0.597-1.333-1.333v0-17.333h-2.667v-2.667h6.667v-4c0-0.736 0.597-1.333 1.333-1.333v0h10.667c0.736 0 1.333 0.597 1.333 1.333v0 4zM24 10.667h-16v16h16v-16zM17.885 18.667l2.357 2.357-1.885 1.885-2.357-2.357-2.357 2.357-1.885-1.885 2.357-2.357-2.357-2.357 1.885-1.885 2.357 2.357 2.357-2.357 1.885 1.885-2.357 2.357zM12 5.333v2.667h8v-2.667h-8z" fill="currentColor"></path>
+    </g>
+  </svg>

src/icons/svg/luyin-play-back.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="24" height="24" style="" filter="none">
+    
+    <g>
+    <path d="M16 29.333c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333 13.333 5.969 13.333 13.333-5.969 13.333-13.333 13.333zM16 26.667c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667v0c-5.891 0-10.667 4.776-10.667 10.667s4.776 10.667 10.667 10.667v0zM14.163 11.22l6.505 4.336c0.144 0.097 0.238 0.26 0.238 0.444s-0.094 0.347-0.236 0.443l-0.002 0.001-6.507 4.336c-0.083 0.056-0.185 0.089-0.295 0.089-0.294 0-0.532-0.238-0.533-0.531v-8.675c0.001-0.294 0.239-0.532 0.533-0.532 0.11 0 0.213 0.034 0.298 0.091l-0.002-0.001z" fill="currentColor"></path>
+    </g>
+  </svg>

src/icons/svg/luyin-radio-button.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="24" height="24" style="" filter="none">
+    
+    <g>
+    <path d="M16 29.333c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333 13.333 5.969 13.333 13.333-5.969 13.333-13.333 13.333zM16 26.667c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667v0c-5.891 0-10.667 4.776-10.667 10.667s4.776 10.667 10.667 10.667v0zM16 22.667c-3.682 0-6.667-2.985-6.667-6.667s2.985-6.667 6.667-6.667v0c3.682 0 6.667 2.985 6.667 6.667s-2.985 6.667-6.667 6.667v0z" fill="currentColor"></path>
+    </g>
+  </svg>

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

@@ -1,7 +1,17 @@
 <template>
   <div class="record">
     <template v-if="type === 'normal' || type === 'mini'">
-      <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone"></div>
+      <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone">
+        <img src="@/assets/voice_matrix/luyin-active.png" v-if="microphoneStatus" />
+        <SvgIcon
+          v-else
+          icon-class="luyin-radio-button"
+          size="24"
+          :style="{
+            color: attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        />
+      </div>
       <span
         v-if="type && type == 'normal'"
         :class="[
@@ -10,34 +20,74 @@
           selectIndex || selectIndex == 0 ? 'record-black' : '',
           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
       >
       <div
         :class="['playBack', hasMicro]"
         @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')"
-      ></div>
+      >
+        <!-- <SvgIcon icon-class="luyin-paly-back" size="24" /> -->
+      </div>
     </template>
 
     <template v-else-if="type === 'pro'">
-      <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone"></div>
+      <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone">
+        <img src="@/assets/voice_matrix/luyin-active.png" v-if="microphoneStatus" />
+        <SvgIcon
+          v-else
+          icon-class="luyin-radio-button"
+          size="24"
+          :style="{
+            color: attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        />
+      </div>
       <el-select v-model="selectIndex" placeholder="无录音" class="proSelect" @change="handleChangeRecord">
         <el-option v-for="(item, i) in recordList" :key="i + item.id" :label="item.name" :value="i" />
       </el-select>
       <div
         :class="['playBack', hasMicro]"
         @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')"
-      ></div>
-      <a :class="['record-delete', hasMicro ? 'record-delete-has' : '']" @click="handleDelete"></a>
+      >
+        <!-- <SvgIcon icon-class="luyin-paly-back" size="24" /> -->
+      </div>
+      <a
+        :class="['record-delete', hasMicro ? 'record-delete-has' : '']"
+        @click="handleDelete"
+        :style="{
+          color: hasMicro && attrib && attrib.topic_color ? attrib.topic_color : '',
+        }"
+      >
+        <SvgIcon icon-class="luyin-delete" size="24" />
+      </a>
     </template>
 
     <template v-else>
-      <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone"></div>
+      <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone">
+        <img src="@/assets/voice_matrix/luyin-active.png" v-if="microphoneStatus" />
+        <SvgIcon
+          v-else
+          icon-class="luyin-radio-button"
+          size="24"
+          :style="{
+            color: attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        />
+      </div>
       <span
         :class="[
           'record-time',
           microphoneStatus ? 'record-ing' : '',
           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
       >
       <el-select v-model="selectIndex" placeholder="无录音" @change="handleChangeRecord">
@@ -46,8 +96,18 @@
       <div
         :class="['playBack', hasMicro]"
         @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')"
-      ></div>
-      <a :class="['record-delete', hasMicro ? 'record-delete-has' : '']" @click="handleDelete"></a>
+      >
+        <!-- <SvgIcon icon-class="luyin-paly-back" size="24" /> -->
+      </div>
+      <a
+        :class="['record-delete', hasMicro ? 'record-delete-has' : '']"
+        @click="handleDelete"
+        :style="{
+          color: hasMicro && attrib && attrib.topic_color ? attrib.topic_color : '',
+        }"
+      >
+        <SvgIcon icon-class="luyin-delete" size="24" />
+      </a>
     </template>
   </div>
 </template>
@@ -331,8 +391,8 @@ export default {
   height: 32px;
 
   .playBack {
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
     margin-left: 8px;
     cursor: pointer;
     background: url('@/assets/voice_matrix/luyin-play.png') center no-repeat;
@@ -358,21 +418,27 @@ 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%;
 
-    &.active {
-      background: url('@/assets/voice_matrix/luyin-active.png') center no-repeat;
-      background-size: 100%;
+    img {
+      width: 24px;
+      height: 24px;
     }
 
-    &.active:hover {
-      background: url('@/assets/voice_matrix/luyin-stop.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%;
+    // }
+
+    // &.active:hover {
+    //   background: url('@/assets/voice_matrix/luyin-stop.png') center no-repeat;
+    //   background-size: 100%;
+    // }
   }
 
   .record-time {
@@ -401,17 +467,19 @@ export default {
 
   .record-delete {
     display: block;
-    width: 16px;
-    height: 16px;
+    width: 24px;
+    height: 24px;
     margin-left: 8px;
-    background: url('@/assets/voice_matrix/luyin-delete.png') center no-repeat;
-    background-size: 100%;
+    color: #000;
+
+    // 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%;
-      }
+      // &:hover {
+      //   background: url('@/assets/voice_matrix/luyin-delete-active.png') center no-repeat;
+      //   background-size: 100%;
+      // }
     }
   }
 }

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -20,8 +20,10 @@
           </div>
 
           <div class="NPC-top-right">
-            <img v-if="is_list" src="@/assets/newWord_list.png" alt="" @click="is_list = false" />
-            <img v-else src="@/assets/newWord_tile.png" alt="" @click="is_list = true" />
+            <SvgIcon v-if="is_list" icon-class="icon-card" size="24" @click="is_list = false" />
+            <!-- <img v-if="is_list" src="@/assets/newWord_list.png" alt="" @click="is_list = false" /> -->
+            <!-- <img v-else src="@/assets/newWord_tile.png" alt="" @click="is_list = true" /> -->
+            <SvgIcon v-else icon-class="icon-park" size="24" @click="is_list = true" />
             <span class="NPC-top-right-text" @click="handleChangeTab">{{ wordShow ? '收起' : '展开' }}</span>
             <img v-if="wordShow" src="@/assets/down.png" alt="" @click="handleChangeTab" />
             <img v-else class="rotate" src="@/assets/down.png" alt="" @click="handleChangeTab" />
@@ -73,12 +75,12 @@
                         v-if="curTime >= sItem.bg && curTime < sItem.ed && stopAudioS"
                         @click="handleChangeTime(sItem.bg, sItem.ed)"
                         icon-class="animated"
+                        size="24"
                         :style="{
                           color:
                             data.unified_attrib && data.unified_attrib.topic_color
                               ? data.unified_attrib.topic_color
                               : '',
-                          marginTop: '4px',
                         }"
                       />
                       <SvgIcon
@@ -101,12 +103,12 @@
                         <SvgIcon
                           v-if="playClass && mp3_index === sItem.sIndex"
                           icon-class="animated"
+                          size="24"
                           :style="{
                             color:
                               data.unified_attrib && data.unified_attrib.topic_color
                                 ? data.unified_attrib.topic_color
                                 : '',
-                            marginTop: '4px',
                           }"
                         />
                         <SvgIcon
@@ -125,7 +127,7 @@
                     </template>
 
                     <template v-else>
-                      <span style="flex-shrink: 0; width: 16px; height: 16px"></span>
+                      <span style="flex-shrink: 0; width: 24px; height: 24px"></span>
                     </template>
                     <div class="tabNum-box">
                       <template v-if="sItem.mIndex == 0">
@@ -481,6 +483,10 @@
                               data.unified_attrib && data.unified_attrib.topic_color
                                 ? data.unified_attrib.topic_color
                                 : '',
+                            fontSize:
+                              data.unified_attrib && data.unified_attrib.pinyin_size
+                                ? data.unified_attrib.pinyin_size
+                                : '',
                           }"
                           class="pinyin-box"
                         >
@@ -495,6 +501,10 @@
                                   data.unified_attrib && data.unified_attrib.topic_color
                                     ? data.unified_attrib.topic_color
                                     : '',
+                                fontSize:
+                                  data.unified_attrib && data.unified_attrib.pinyin_size
+                                    ? data.unified_attrib.pinyin_size
+                                    : '',
                               }"
                             >
                               {{ item.pinyin.split(' ')[indexh] ? item.pinyin.split(' ')[indexh] : '' }}
@@ -594,6 +604,7 @@
             :bg="dataWord && dataWord.bg ? dataWord.bg : null"
             :ed="dataWord && dataWord.ed ? dataWord.ed : null"
             type="newWordDetail"
+            :attrib="data.unified_attrib"
           />
         </div>
         <audio ref="newwordAudio"></audio>
@@ -1024,9 +1035,9 @@ export default {
 
   .play-btn {
     display: block;
-    width: 16px;
-    height: 16px;
-    margin-top: 4px;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
 
     // background: url('@/assets/fill/voice-pause-red.png') no-repeat left top;
     // background-size: 100% 100%;
@@ -1656,15 +1667,19 @@ export default {
       cursor: pointer;
 
       &-text {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: normal;
         line-height: 16px;
         color: #fff;
       }
 
       img {
-        width: 16px;
-        height: 16px;
+        width: 20px;
+        height: 20px;
+      }
+
+      .svg-icon {
+        color: #fff;
       }
     }