样式修改

src/views/creation/audioVisualDraw.ts

@@ -87,6 +87,9 @@
       }
       const pauseVisualDraw = () => {
         isPause = true
+        requestAnimationFrame(()=>{
+          canvasCtx.clearRect(0, 0, width, height);
+        })
         //audioCtx?.suspend()  // 暂停   加了暂停和恢复音频音质发生了变化  所以这里取消了
         // source?.disconnect()
         // analyser?.disconnect()

src/views/creation/edit/index.module.less

@@ -203,6 +203,10 @@
       font-weight: 600;
       color: #131415;
       line-height: 22px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width: 240px;
     }
 
     .username {

src/views/creation/index-share.tsx

@@ -337,6 +337,8 @@ export default defineComponent({
     };
     // 滚动事件
     const cleanScrollEvent = useEventListener('scroll', () => {
+      // 作品已删除不让滚动变色
+      if(state.isEmpty) return
       const height =
         window.scrollY ||
         document.documentElement.scrollTop
@@ -522,9 +524,9 @@ export default defineComponent({
                       state.playType === 'Audio' &&
                       <div class={styles.audioBox}>
                         <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-                        <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
-                        <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
-                        <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
+                        <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
+                        <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={true} loop={true}></Vue3Lottie>
+                        <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={true} loop={true}></Vue3Lottie>
                         <audio
                           crossorigin="anonymous"
                           id="audioMediaSrc"
@@ -547,14 +549,16 @@ export default defineComponent({
                         webkit-playsinline
                       />
                     }
-                    <div class={[styles.playLarge, plyrState.playIngShow && styles.playIngShow]}></div>
-                    <div class={styles.mediaTime}>
-                      <div>
-                        {getSecondRPM(plyrState.currentTime)}
-                      </div>
-                      <div class={styles.note}>/</div>
-                      <div class={styles.duration}>
-                        {getSecondRPM(plyrState.duration)}
+                    <div class={[styles.playLarge, !plyrState.mediaTimeShow && plyrState.playIngShow && styles.playIngShow]}></div>
+                    <div class={styles.mediaTimeCon}>
+                      <div class={styles.mediaTime}>
+                        <div>
+                          {getSecondRPM(plyrState.currentTime)}
+                        </div>
+                        <div class={styles.note}>/</div>
+                        <div class={styles.duration}>
+                          {getSecondRPM(plyrState.duration)}
+                        </div>
                       </div>
                     </div>
                     <div class={styles.landscapeScreen} onClick={handlerLandscapeScreen}></div>
@@ -648,7 +652,7 @@ export default defineComponent({
                                   <img src={iconZanActive} />
                                   <span>{item.likeNum}</span>
                                 </div>
-                                <div class={styles.username}>{item.username}</div>
+                                <div class={[styles.username, 'van-ellipsis']}>{item.username}</div>
                               </div>
                             </div>
                           ),
@@ -662,8 +666,8 @@ export default defineComponent({
                   {
                     (!state.listState.finished || state.params.page>2) &&
                       <div class={styles.btnImg}>
-                        <img onClick={handleChangeList} src={btnImg} />
-                    </div>
+                        <img onClick={handleChangeList} onTouchstart={()=>{}} src={btnImg} />
+                      </div>
                   }
                 </>
               ) : (

src/views/creation/index.module.less

@@ -145,17 +145,32 @@
       display: initial;
     }
   }
+  .mediaTimeCon{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .3);
+  }
+  &.mediaTimeShow{
+    .mediaTimeCon{
+      display: block;
+    }
+  }
   .mediaTime{
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    bottom: 56px;
-    display: none;
+    bottom: 95px;
+    display: flex;
     font-weight: 500;
-    font-size: 14px;
-    color: #FFFFFF;
+    font-size: 16px;
+    color: #B8E8FF;
     line-height: 20px;
     z-index: 10;
+    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
     & div:first-child{
       width: 50px;
       text-align: right;
@@ -164,12 +179,7 @@
       margin: 0 4px;
     }
     .duration{
-      color: rgba(255,255,255,0.5);
-    }
-  }
-  &.mediaTimeShow{
-    .mediaTime{
-      display: flex;
+      color: #fff;
     }
   }
   .landscapeScreen{
@@ -240,6 +250,10 @@
             font-size: 16px;
             color: #FFFFFF;
             line-height: 22px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            max-width: 160px;
           }
           .iconMember{
             margin-left: 6px;
@@ -589,7 +603,7 @@
         align-items: center;
         border-radius: 3px;
         background-color: rgba(255,255,255,.22);
-        padding: 1px 2px 1px 1px;
+        padding: 1px 2px;
         img{
           width: 14px;
           height: 15px;
@@ -603,6 +617,7 @@
         }
       }
       .username{
+        max-width: 160px;
         margin-left: 4px;
         font-weight: 400;
         font-size: 13px;

src/views/creation/index.tsx

@@ -350,6 +350,9 @@ export default defineComponent({
       }
       const pauseVisualDraw = () => {
         isPause = true
+        requestAnimationFrame(()=>{
+          canvasCtx.clearRect(0, 0, width, height);
+        })
         //audioCtx?.suspend()  // 暂停   加了暂停和恢复音频音质发生了变化  所以这里取消了
         // source?.disconnect()
         // analyser?.disconnect()
@@ -555,9 +558,9 @@ export default defineComponent({
               state.playType === 'Audio' &&
               <div class={styles.audioBox}>
                 <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-                <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
-                <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
-                <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
+                <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
+                <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={true} loop={true}></Vue3Lottie>
+                <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={true} loop={true}></Vue3Lottie>
                 <audio
                   crossorigin="anonymous"
                   id="audioMediaSrc"
@@ -580,14 +583,16 @@ export default defineComponent({
                 playsinline
               />
             }
-            <div class={[styles.playLarge, plyrState.playIngShow && styles.playIngShow]}></div>
-            <div class={styles.mediaTime}>
-              <div>
-                {getSecondRPM(plyrState.currentTime)}
-              </div>
-              <div class={styles.note}>/</div>
-              <div class={styles.duration}>
-                {getSecondRPM(plyrState.duration)}
+            <div class={[styles.playLarge, !plyrState.mediaTimeShow && plyrState.playIngShow && styles.playIngShow]}></div>
+            <div class={styles.mediaTimeCon}>
+              <div class={styles.mediaTime}>
+                <div>
+                  {getSecondRPM(plyrState.currentTime)}
+                </div>
+                <div class={styles.note}>/</div>
+                <div class={styles.duration}>
+                  {getSecondRPM(plyrState.duration)}
+                </div>
               </div>
             </div>
             <div class={styles.landscapeScreen} onClick={handlerLandscapeScreen}></div>

src/views/creation/playCreation/index.module.less

@@ -182,11 +182,18 @@
     .musicDetail{
       margin-left: 10px;
       .musicSheetName{
+        width: 300px;
         margin-top: 4px;
-        font-weight: 600;
-        font-size: 18px;
-        color: #FFFFFF;
-        line-height: 20px;
+        :global{
+          .van-notice-bar{
+              padding: 0;
+              height: 20px;
+              font-weight: 600;
+              font-size: 18px;
+              color: #FFFFFF;
+              line-height: 20px;
+          }
+      }
       }
       .username{
         margin-top: 2px;

src/views/creation/playCreation/index.tsx

@@ -16,6 +16,7 @@ import {
 import { usePageVisibility } from '@vant/use';
 import playProgressData from "./playProgress"
 import Loading from '../loading';
+import { NoticeBar } from "vant"
 
 export default defineComponent({
   name: 'playCreation',
@@ -238,6 +239,9 @@ export default defineComponent({
       }
       const pauseVisualDraw = () => {
         isPause = true
+        requestAnimationFrame(()=>{
+          canvasCtx.clearRect(0, 0, width, height);
+        })
         //audioCtx?.suspend()  // 暂停   加了暂停和恢复音频音质发生了变化  所以这里取消了
         // source?.disconnect()
         // analyser?.disconnect()
@@ -420,7 +424,12 @@ export default defineComponent({
       <div class={styles.backBox}>
         <img class={styles.backImg} src={backImg} onClick={handlerBack} />
         <div class={styles.musicDetail}>
-          <div class={styles.musicSheetName}>{musicSheetName}</div>
+          <div class={styles.musicSheetName}>
+              <NoticeBar
+                  text={musicSheetName}
+                  background="none"
+              />
+          </div>
           <div class={styles.username}>演奏：{username}</div>
         </div>
       </div>
@@ -428,9 +437,9 @@ export default defineComponent({
           playType === 'Audio' ?
           <div class={styles.audioBox}>
             <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-            <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
-            <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
-            <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
+            <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
+            <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={true} loop={true}></Vue3Lottie>
+            <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={true} loop={true}></Vue3Lottie>
             <audio
               crossorigin="anonymous"
               id="audioMediaSrc"

src/views/creation/share-model/index.module.less

@@ -97,6 +97,7 @@
       font-size: 13px;
       color: #aaa;
       line-height: 20px;
+      max-width: 200px;
     }
   }
 }
@@ -175,7 +176,8 @@
   position: relative;
   background-color: #fff;
   border-radius: 12px 12px 0px 0px;
-  padding-bottom: env(safe-area-inset-bottom);
+  //padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: 10px;
 
   .iconClose {
     position: absolute;

src/views/creation/share-model/index.tsx

@@ -243,7 +243,7 @@ export default defineComponent({
               <p class={[styles.musicName, 'van-ellipsis']}>
                 {props.musicDetail.musicSheetName}
               </p>
-              <p class={styles.username}>
+              <p class={[styles.username, 'van-ellipsis']}>
                 演奏者：{props.musicDetail.username}
               </p>
             </div>