增加阴影

src/views/creation/index-share.tsx

@@ -334,8 +334,8 @@ export default defineComponent({
     });
     // 初始化五线谱
     function initStaff(){
-      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      //const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      //const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;

src/views/creation/index.module.less

@@ -38,6 +38,7 @@
       .plyr {
           width: 100%;
           height: 100%;
+          z-index: initial;
           .plyr__controls{
               background: initial;
               padding: 0 12px;
@@ -56,6 +57,7 @@
                       width: 8px;
                       height: 8px;
                       margin-top: -3px;
+                      box-shadow: initial;
                   }
                   .plyr__progress__buffer{
                       height: 2px;
@@ -90,6 +92,7 @@
               height: initial;
               left: 0;
               bottom: 0;
+              z-index: 2;
           }
       }
       .audioVisualizer{
@@ -155,10 +158,13 @@
   }
   .staffBox{
     width: 100%;
-    height: var(--staffBoxHeight);
+    height: calc(var(--staffBoxHeight) + 10px);
     position: absolute;
-    bottom: 10px;
+    bottom: 0;
+    padding-bottom: 10px;
     visibility: hidden;
+    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
+    z-index: 1;
     &.staffBoxShow{
       visibility: initial;
     }
@@ -540,6 +546,7 @@
       margin-top: 6px;
       .likeNum{
         display: flex;
+        align-items: center;
         border-radius: 3px;
         background-color: rgba(255,255,255,.22);
         padding: 1px 2px 1px 1px;
@@ -551,7 +558,7 @@
           font-weight: 400;
           font-size: 10px;
           color: #FFFFFF;
-          line-height: 14px;
+          line-height: 1;
           margin-left: 2px;
         }
       }

src/views/creation/index.tsx

@@ -360,8 +360,8 @@ export default defineComponent({
     }
     // 初始化五线谱
     function initStaff(){
-      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      //const src = `https://dev.kt.colexiu.com/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      //const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;

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

@@ -27,6 +27,7 @@
       .plyr {
           width: 100%;
           height: 100%;
+          z-index: initial;
           .plyr__controls{
               background: initial;
               padding: 0 20px 20px;
@@ -69,6 +70,7 @@
                       width: 12px;
                       height: 12px;
                       margin-top: -4px;
+                      box-shadow: initial;
                   }
                   .plyr__progress__buffer{
                       height: 4px;
@@ -114,6 +116,7 @@
               height: initial;
               left: 0;
               bottom: 0;
+              z-index: 2;
           }
       }
       .audioVisualizer{
@@ -170,10 +173,13 @@
   }
   .staffBox{
     width: 100%;
-    height: var(--staffBoxHeight);
+    height: calc(var(--staffBoxHeight) + 44px);
     position: absolute;
-    bottom: 44px;
+    bottom: 0;
+    padding-bottom: 44px;
     visibility: hidden;
+    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
+    z-index: 1;
     &.staffBoxShow{
       visibility: initial;
     }

src/views/creation/playCreation/index.tsx

@@ -297,8 +297,8 @@ export default defineComponent({
     });
     // 初始化五线谱
     function initStaff(){
-      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      //const src = `https://dev.kt.colexiu.com/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      //const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;

src/views/download/index.module.less

@@ -3,7 +3,7 @@
   background: url('./images/download_bg.png') no-repeat top center;
   background-size: cover;
   min-height: 100vh;
-  padding: 0 15px 0 23px;
+  padding: 6px 15px 0 23px;
   text-align: center;
 
   :global {
@@ -45,4 +45,4 @@
 .downImg {
   // width: 275px;
   padding-top: 25px;
-}
+}