Просмотр исходного кода

fix: 【我的素材】音频播放暂停icon更新

任一存 3 лет назад
Родитель
Сommit
27ff034b26
3 измененных файлов с 37 добавлено и 19 удалено
  1. 18 0
      src/assets/images/icons/pause.svg
  2. 17 0
      src/assets/images/icons/play.svg
  3. 2 19
      src/components/audio/index.vue

+ 18 - 0
src/assets/images/icons/pause.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>pause</title>
+    <g id="管理中心" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="管理中心-音频" transform="translate(-617.000000, -833.000000)" fill="#FFFFFF">
+            <g id="编组-7备份-7" transform="translate(580.000000, 796.000000)">
+                <g id="编组-8" transform="translate(16.000000, 10.000000)">
+                    <g id="编组-9" transform="translate(16.000000, 22.000000)">
+                        <g id="pause" transform="translate(5.000000, 5.000000)">
+                            <rect id="矩形" x="1" y="1" width="2" height="6" rx="1"></rect>
+                            <rect id="矩形" x="5" y="1" width="2" height="6" rx="1"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

Разница между файлами не показана из-за своего большого размера
+ 17 - 0
src/assets/images/icons/play.svg


+ 2 - 19
src/components/audio/index.vue

@@ -8,7 +8,8 @@
         <div :id="idleft" class="left"></div>
         <div :id="idright" class="right"></div>
         <div class="circle"></div>
-        <i class="iconfont" :class="notPlaying ? 'iconbs_play' : 'iconbs_stop'"></i>
+        <img v-if="notPlaying" :src="require('@/assets/images/icons/play.svg')" />
+        <img v-if="!notPlaying" :src="require('@/assets/images/icons/pause.svg')" />
       </div>
     </div>
     <div v-if="showTime" class="namecon">
@@ -281,24 +282,6 @@ export default {
   min-width: @raduiW;
   background: #FF9F2B;
   border-radius: 50%;
-  .iconbs_play {
-    top: 50%;
-    left: 50%;
-    right: unset;
-    bottom: unset;
-    transform: translate(-47%, -50%) scale(0.6);
-    font-size: 12px;
-    color: #fff;
-  }
-  .iconbs_stop {
-    top: 50%;
-    left: 50%;
-    right: unset;
-    bottom: unset;
-    transform: translate(-50%, -50%) scale(0.5);
-    font-size: 12px;
-    color: #fff;
-  }
   .left {
     border-radius: 50%;
     background: @pcolor;