style: 音频播放样式修改

src/views/creation/index.module.less

@@ -139,6 +139,82 @@
           width: 280px;
           height: 55px;
       }
+      .tyBg {
+        width: 139px;
+        height: 74px;
+        position: absolute;
+        z-index: 1;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, calc(-50% + 28px));
+     }
+     .audioBoxBg {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+        width: 74px;
+        height: 75px;
+        background: url("./images/audio-bg.png") no-repeat center;
+        background-size: 100% 100%;
+
+        .audioPan {
+           position: absolute;
+           left: 50%;
+           top: 50%;
+           transform: translate(-50%, -50%);
+           z-index: 8;
+           width: 59px;
+           height: 60px;
+           background: url("./images/audio-pan.png") no-repeat center;
+           background-size: 100% 100%;
+           display: flex;
+           align-items: center;
+           justify-content: center;
+
+           animation: rotateImg 6s linear infinite;
+
+           &.imgRotate {
+              animation-play-state: paused;
+           }
+        }
+
+        .audioImg {
+           width: 32px;
+           height: 32px;
+           border-radius: 50%;
+        }
+
+        .audioPoint {
+           position: absolute;
+           z-index: 9;
+           left: 50%;
+           top: 50%;
+           transform: translate(-50%, -50%);
+           width: 8px;
+           height: 8px;
+           background: url("./images/audio-point.png") no-repeat center;
+           background-size: contain;
+        }
+
+        .audioZhen {
+           position: absolute;
+           z-index: 9;
+           right: -4px;
+           top: -33px;
+           width: 26px;
+           height: 87px;
+           background: url("./images/audio-zhen.png") no-repeat center;
+           background-size: contain;
+           transition: transform 0.5s ease-in-out;
+
+           &.active {
+              transform: rotate(92deg) translate3d(0, 0, 3px);
+              transition: transform 0.5s ease-in-out;
+           }
+        }
+     }      
   }
   .playLarge{
     position: absolute;

src/views/creation/index.tsx

@@ -35,6 +35,7 @@ import iconEdit from './images/edit.png';
 import iconMember from './images/icon-member.png';
 import vipIcon from './images/vip_icon.png';
 import svipIcon from './images/svip_icon.png';
+import tyBg from './images/ty.png';
 import TextEllipsis from './text-ellipsis/index';
 import Loading from './loading';
 
@@ -423,8 +424,8 @@ export default defineComponent({
     }
     // 初始化五线谱
     function initStaff(){
-      const src = `/klx-music-score/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}&userMusicId=${state.id}`;
-      // const src = `http://192.168.3.68:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}&userMusicId=${state.id}`;
+      // const src = `/klx-music-score/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}&userMusicId=${state.id}`;
+      const src = `http://192.168.3.68:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}&userMusicId=${state.id}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -608,8 +609,8 @@ export default defineComponent({
                   playsinline
                   webkit-playsinline
                 />
-                <img src="./img/ty.png" class={styles.tyBg} />
-                <div class="audioBoxBg">
+                <img src={tyBg} class={styles.tyBg} />
+                <div class={styles.audioBoxBg}>
                     <div class={[styles.audioPan,  plyrState.playIngShow && styles.imgRotate]}>
                       <img class={styles.audioImg} src={state.musicDetail.img || musicBg} />
                     </div>