样式修改

src/views/creation/audioVisualDraw.ts

@@ -92,7 +92,7 @@
               canvWidth: width,
               canvHeight: height,
               canvFillColor: "transparent",
-              lineColor: "rgba(255, 255, 255, 0.7)"
+              lineColor: "rgba(28,172,241, 0.58)"
             })
         }, 300);
       }

src/views/creation/index-share.tsx

@@ -52,8 +52,6 @@ import "plyr/dist/plyr.css";
 import Plyr from "plyr";
 import { Vue3Lottie } from "vue3-lottie";
 import audioBga from "./images/audioBga.json";
-import audioBga1 from "./images/leftCloud.json";
-import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 import btnImg from './images/btn.png';
 import audioVisualDraw from "./audioVisualDraw"
@@ -70,6 +68,7 @@ export default defineComponent({
     const router = useRouter();
     const isScreenScroll = ref(false)
     const creationHeight = ref(0)
+    const playBoxDom = ref()
     const state = reactive({
       id: route.query.id,
       isEmpty:false,
@@ -93,6 +92,7 @@ export default defineComponent({
       messageStatus: false,
       message: '',
       _plrl: null as any,
+      heightA:0,
       heightV:0,
       heightB:0
     });
@@ -453,7 +453,7 @@ 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 = `http://192.168.0.148: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;
@@ -552,6 +552,7 @@ export default defineComponent({
     })
     onMounted(async () => {
       __init();
+      state.heightA = playBoxDom.value.offsetHeight
       setFullHeight()
       window.addEventListener('resize', setFullHeight)
     });
@@ -587,6 +588,7 @@ export default defineComponent({
       <div
         style={
           {
+            '--heightA': state.heightA + 'px',
             '--barheight':state.heightV + "px",
             "--creationHeight":creationHeight.value ? creationHeight.value+"px" : "100vh"
           }
@@ -642,93 +644,93 @@ export default defineComponent({
               </div>
             </div>
             <Sticky zIndex={1000} offsetTop={state.heightV - 1 + "px"}>
-              <div class={[styles.playSection, plyrState.mediaTimeShow && styles.mediaTimeShow,!plyrState.loaded && styles.notLoaded,isLandscapeScreen.value&&styles.isLandscapeScreen]} id="playMediaSection" onClick={handlerClickPlay}>
-                {
-                  isLandscapeScreen.value &&
-                    <div class={styles.backBox}>
-                      <img class={styles.backImg} src={backImg} onClick={handlerBack}/>
-                      <div class={styles.musicDetail}>
-                        <div class={styles.musicSheetName}>
-                            <NoticeBar
-                                text={state.musicDetail?.musicSheetName}
-                                background="none"
-                            />
+              <div class={styles.playBox} ref={playBoxDom}>
+                <div class={[styles.playSection, plyrState.mediaTimeShow && styles.mediaTimeShow,!plyrState.loaded && styles.notLoaded,isLandscapeScreen.value&&styles.isLandscapeScreen,state.playType === 'Video' && styles.videoType]} id="playMediaSection" onClick={handlerClickPlay}>
+                  {
+                    isLandscapeScreen.value &&
+                      <div class={styles.backBox}>
+                        <img class={styles.backImg} src={backImg} onClick={handlerBack}/>
+                        <div class={styles.musicDetail}>
+                          <div class={styles.musicSheetName}>
+                              <NoticeBar
+                                  text={state.musicDetail?.musicSheetName}
+                                  background="none"
+                              />
+                          </div>
+                          <div class={styles.username}>演奏：{state.musicDetail?.username}</div>
                         </div>
-                        <div class={styles.username}>演奏：{state.musicDetail?.username}</div>
                       </div>
-                    </div>
-                }
-                {
-                  state.playType &&
-                  <>
-                    {
-                      state.playType === 'Audio' &&
-                      <div class={styles.audioBox}>
-                        <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-                        <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"
+                  }
+                  {
+                    state.playType &&
+                    <>
+                      {
+                        state.playType === 'Audio' &&
+                        <div class={styles.audioBox}>
+                          <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
+                          <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
+                          <audio
+                            crossorigin="anonymous"
+                            id="audioMediaSrc"
+                            src={state.musicDetail?.videoUrl}
+                            controls="false"
+                            preload="metadata"
+                            playsinline
+                          />
+                        </div>
+                      }
+                      {
+                        state.playType === 'Video' &&
+                        <video
+                          id="videoMediaSrc"
+                          class={styles.videoBox}
                           src={state.musicDetail?.videoUrl}
-                          controls="false"
+                          data-poster={ state.musicDetail?.videoImg || videobg}
+                          poster={ state.musicDetail?.videoImg || videobg}
                           preload="metadata"
                           playsinline
+                          webkit-playsinline
+                          x5-playsinline
                         />
-                      </div>
-                    }
-                    {
-                      state.playType === 'Video' &&
-                      <video
-                        id="videoMediaSrc"
-                        class={styles.videoBox}
-                        src={state.musicDetail?.videoUrl}
-                        data-poster={ state.musicDetail?.videoImg || videobg}
-                        poster={ state.musicDetail?.videoImg || videobg}
-                        preload="metadata"
-                        playsinline
-                        webkit-playsinline
-                        x5-playsinline
-                      />
-                    }
-                    <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 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>
-                    <div class={styles.landscapeScreen} onClick={handlerLandscapeScreen}></div>
-                    {/* 谱面 */}
-                    {
-                      staffState.staffSrc &&
-                      <div class={[styles.staffBoxCon, staffState.isShow && styles.staffBoxShow]}>
-                        <div
-                          class={styles.staffBox}
-                          style={
-                            {
-                              '--staffBoxHeight':staffState.height
+                      <div class={styles.landscapeScreen} onClick={handlerLandscapeScreen}></div>
+                      {/* 谱面 */}
+                      {
+                        staffState.staffSrc &&
+                        <div class={[styles.staffBoxCon, staffState.isShow && styles.staffBoxShow]}>
+                          <div
+                            class={styles.staffBox}
+                            style={
+                              {
+                                '--staffBoxHeight':staffState.height
+                              }
                             }
-                          }
-                        >
-                          <div class={styles.mask}></div>
-                          <iframe
-                            ref={staffDom}
-                            class={styles.staff}
-                            frameborder="0"
-                            src={staffState.staffSrc}>
-                          </iframe>
+                          >
+                            <div class={styles.mask}></div>
+                            <iframe
+                              ref={staffDom}
+                              class={styles.staff}
+                              frameborder="0"
+                              src={staffState.staffSrc}>
+                            </iframe>
+                          </div>
                         </div>
-                      </div>
-                    }
-                  </>
-                }
+                      }
+                    </>
+                  }
+                </div>
               </div>
             </Sticky>
             <div class={[styles.musicSection, styles.musicShareSection]}>

src/views/creation/index.module.less

@@ -32,9 +32,17 @@
   margin-bottom: 14vh;
 }
 
-.playSection{
-  height: 210px;
+.playBox {
   position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+}
+.playSection{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   &::after{
     position: absolute;
     content: "";
@@ -58,7 +66,7 @@
               pointer-events: initial !important;
               .plyr__controls__item.plyr__progress__container{
                   input[type=range]{
-                      color: #73C1FF;
+                      color: #1CACF1;
                       height: 10px;
                   }
                   input[type="range"]::-webkit-slider-runnable-track {
@@ -69,6 +77,7 @@
                       height: 6px;
                       margin-top: -2px;
                       box-shadow: initial;
+                      background-color: #269EFE;
                   }
                   .plyr__progress__buffer{
                       height: 2px;
@@ -105,20 +114,6 @@
         width: 100%;
         height: 82%;
       }
-
-      .audioBga1 {
-          position: absolute;
-          left: 0;
-          top: 16px;
-          width: 94px;
-      }
-
-      .audioBga2 {
-          width: 192px;
-          position: absolute;
-          right: -24px;
-          top: 0;
-      }
       :global {
           .plyr {
               position: absolute;
@@ -170,23 +165,27 @@
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    bottom: 95px;
+    bottom: 36px;
     display: flex;
     font-weight: 500;
     font-size: 16px;
-    color: #B8E8FF;
+    color: #fff;
     line-height: 20px;
     z-index: 10;
+    padding: 3px 10px;
     text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
+    background: rgba(0,0,0,0.7);
+    border-radius: 12px;
+    backdrop-filter: blur(0px);
     & div:first-child{
-      width: 50px;
       text-align: right;
     }
     .note{
-      margin: 0 4px;
+      margin: 0 5px;
+      color: #fff;
     }
     .duration{
-      color: #fff;
+      color: rgba(255,255,255,0.7);
     }
   }
   .landscapeScreen{
@@ -219,7 +218,6 @@
     position: absolute;
     bottom: 0;
     padding-bottom: 12px;
-    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
     .staff{
       width: 100%;
       height: 100%;
@@ -232,11 +230,59 @@
       height: 100%;
     }
   }
+  &.videoType,&.isLandscapeScreen.videoType{
+    :global {
+      .plyr {
+          .plyr__controls{
+              .plyr__controls__item.plyr__control{
+                  .icon--pressed{
+                      background: url("./images/pause1.png") no-repeat;
+                      background-size: 100% 100%;
+                  }
+                  .icon--not-pressed{
+                      background: url("./images/play1.png") no-repeat;
+                      background-size: 100% 100%;
+                  }
+              }
+              .plyr__controls__item.plyr__progress__container{
+                input[type=range] {
+                    color: #ffffff;
+                }
+                input[type="range"]::-webkit-slider-thumb {
+                    background-color: #ffffff;
+                }
+                .plyr__progress__buffer {
+                    color: #fff;
+                    background-color: #fff;
+                }
+            }
+            .plyr__controls__item.plyr__time{
+                color: #ffffff;
+            }
+          }
+      }
+    }
+    .staff {
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+    .backBox{
+      .username{
+        color: #fff !important;
+      }
+      .musicSheetName{
+        :global{
+          .van-notice-bar{
+              color: #fff !important;
+          }
+        }
+      }
+    }
+  }
 }
 
 .musicSection {
   width: 100%;
-  min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20px - 14vh - 210px - 55px - 80px);
+  min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20px - 14vh - var(--heightA) - 55px - 80px);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -576,7 +622,7 @@
   }
 }
 .musicShareSection{
-  min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20vh - 210px - 55px);
+  min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20vh - var(--heightA) - 55px);
 }
 .likeShareItem{
   background-color: initial;
@@ -682,15 +728,14 @@
       .audioBox {
         .audioBga{
           width: 80%;
-          height: 62%;
         }
       }
     }
     .musicSection{
-      min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20px - 14vh - 340px - 55px - 80px);
+      min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20px - 14vh - var(--heightA) - 55px - 80px);
     }
     .musicShareSection{
-      min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20vh - 340px - 55px);
+      min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20vh - var(--heightA) - 55px);
     }
     .wxpopup{
       img{
@@ -783,7 +828,6 @@
     .audioBox {
       .audioBga{
         width: 72%;
-        height: 56%;
       }
     }
   }
@@ -817,7 +861,7 @@
           .icon--pressed{
               width: 100%;
               height: 100%;
-              background: url("./images/pause1.png") no-repeat;
+              background: url("./images/pause2.png") no-repeat;
               background-size: 100% 100%;
               use{
                   display: none;
@@ -826,7 +870,7 @@
           .icon--not-pressed{
               width: 100%;
               height: 100%;
-              background: url("./images/play1.png") no-repeat;
+              background: url("./images/play2.png") no-repeat;
               background-size: 100% 100%;
               use{
                   display: none;
@@ -836,7 +880,7 @@
         .plyr__controls__item.plyr__progress__container{
           margin-left: 9px;
           input[type=range]{
-              color: #73C1FF;
+              color: #1CACF1;
               height: 20px;
           }
           input[type="range"]::-webkit-slider-runnable-track {
@@ -847,6 +891,7 @@
               height: 12px;
               margin-top: -4px;
               box-shadow: initial;
+              background-color: #269EFE;
           }
           .plyr__progress__buffer{
               height: 4px;
@@ -858,7 +903,7 @@
         .plyr__controls__item.plyr__time{
             font-weight: 500;
             font-size: 14px;
-            color: #FFFFFF;
+            color: #333333;
             display: initial;
             &.plyr__time--current{
                 margin-left: 9px;
@@ -888,7 +933,7 @@
               height: 20px;
               font-weight: 600;
               font-size: 18px;
-              color: #FFFFFF;
+              color: #333333;
               line-height: 20px;
           }
       }
@@ -897,7 +942,7 @@
         margin-top: 2px;
         font-weight: 400;
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.7);
+        color: #333333;
         line-height: 18px
       }
     }

src/views/creation/index.tsx

@@ -54,8 +54,6 @@ import "plyr/dist/plyr.css";
 import Plyr from "plyr";
 import { Vue3Lottie } from "vue3-lottie";
 import audioBga from "./images/audioBga.json";
-import audioBga1 from "./images/leftCloud.json";
-import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 //import playProgressData from "./playCreation/playProgress"
 import Loading from './loading';
@@ -71,6 +69,7 @@ export default defineComponent({
     const isScreenScroll = ref(false)
     const mStickyBottom = ref()
     const mStickyUpward = ref()
+    const playBoxDom = ref()
     const state = reactive({
       id: route.query.id,
       deleteStatus: false,
@@ -89,6 +88,7 @@ export default defineComponent({
         rows: 20
       },
       _plrl: null as any,
+      heightA:0,
       heightV:0,
       heightB:0
     });
@@ -365,7 +365,7 @@ export default defineComponent({
             canvWidth: width,
             canvHeight: height,
             canvFillColor: "transparent",
-            lineColor: "rgba(255, 255, 255, 0.7)"
+            lineColor: "rgba(28,172,241, 0.58)"
           })
         }, 300);
       }
@@ -443,7 +443,7 @@ 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 = `http://192.168.0.148: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;
@@ -520,6 +520,7 @@ export default defineComponent({
 			}
     }
     onMounted(async () => {
+      state.heightA = playBoxDom.value.offsetHeight
       setStatusBarTextColor(true)
       try {
         const res = await api_userMusicDetail(state.id);
@@ -586,6 +587,7 @@ export default defineComponent({
       <div
         style={
           {
+            '--heightA': state.heightA + 'px',
             '--barheight':state.heightV + "px"
           }
         }
@@ -614,89 +616,89 @@ export default defineComponent({
           演奏：{state.musicDetail?.username}
         </div>
         <Sticky zIndex={1000} offsetTop={state.heightV - 1 + "px"}>
-          <div data-html2canvas-ignore="true" class={[styles.playSection, plyrState.mediaTimeShow && styles.mediaTimeShow, isLandscapeScreen.value&&styles.isLandscapeScreen]} id="playMediaSection" onClick={handlerClickPlay}>
-            {
-              isLandscapeScreen.value &&
-                <div class={styles.backBox}>
-                  <img class={styles.backImg} src={backImg} onClick={handlerBack}/>
-                  <div class={styles.musicDetail}>
-                    <div class={styles.musicSheetName}>
-                        <NoticeBar
-                            text={state.musicDetail?.musicSheetName}
-                            background="none"
-                        />
+          <div class={styles.playBox} ref={playBoxDom}>
+            <div data-html2canvas-ignore="true" class={[styles.playSection, plyrState.mediaTimeShow && styles.mediaTimeShow, isLandscapeScreen.value&&styles.isLandscapeScreen,state.playType === 'Video' && styles.videoType]} id="playMediaSection" onClick={handlerClickPlay}>
+              {
+                isLandscapeScreen.value &&
+                  <div class={styles.backBox}>
+                    <img class={styles.backImg} src={backImg} onClick={handlerBack}/>
+                    <div class={styles.musicDetail}>
+                      <div class={styles.musicSheetName}>
+                          <NoticeBar
+                              text={state.musicDetail?.musicSheetName}
+                              background="none"
+                          />
+                      </div>
+                      <div class={styles.username}>演奏：{state.musicDetail?.username}</div>
                     </div>
-                    <div class={styles.username}>演奏：{state.musicDetail?.username}</div>
                   </div>
+              }
+              {
+                state.playType === 'Audio' &&
+                <div class={styles.audioBox}>
+                  <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
+                  <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
+                  <audio
+                    crossorigin="anonymous"
+                    id="audioMediaSrc"
+                    src={state.musicDetail?.videoUrl}
+                    controls="false"
+                    preload="metadata"
+                    playsinline
+                    webkit-playsinline
+                  />
                 </div>
-            }
-            {
-              state.playType === 'Audio' &&
-              <div class={styles.audioBox}>
-                <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-                <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"
+              }
+              {
+                state.playType === 'Video' &&
+                <video
+                  id="videoMediaSrc"
+                  class={styles.videoBox}
                   src={state.musicDetail?.videoUrl}
-                  controls="false"
+                  data-poster={ state.musicDetail?.videoImg || videobg}
+                  poster={ state.musicDetail?.videoImg || videobg}
                   preload="metadata"
                   playsinline
                   webkit-playsinline
+                  x5-playsinline
                 />
-              </div>
-            }
-            {
-              state.playType === 'Video' &&
-              <video
-                id="videoMediaSrc"
-                class={styles.videoBox}
-                src={state.musicDetail?.videoUrl}
-                data-poster={ state.musicDetail?.videoImg || videobg}
-                poster={ state.musicDetail?.videoImg || videobg}
-                preload="metadata"
-                playsinline
-                webkit-playsinline
-                x5-playsinline
-              />
-            }
-            <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 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>
-            <div class={styles.landscapeScreen} onClick={handlerLandscapeScreen}></div>
-            {/* 谱面 */}
-            {
-              staffState.staffSrc &&
-              <div class={[styles.staffBoxCon, staffState.isShow && styles.staffBoxShow]}>
-                <div
-                  class={styles.staffBox}
-                  style={
-                    {
-                      '--staffBoxHeight':staffState.height
+              <div class={styles.landscapeScreen} onClick={handlerLandscapeScreen}></div>
+              {/* 谱面 */}
+              {
+                staffState.staffSrc &&
+                <div class={[styles.staffBoxCon, staffState.isShow && styles.staffBoxShow]}>
+                  <div
+                    class={styles.staffBox}
+                    style={
+                      {
+                        '--staffBoxHeight':staffState.height
+                      }
                     }
-                  }
-                >
-                  <div class={styles.mask}></div>
-                  <iframe
-                    ref={staffDom}
-                    class={styles.staff}
-                    frameborder="0"
-                    src={staffState.staffSrc}>
-                  </iframe>
+                  >
+                    <div class={styles.mask}></div>
+                    <iframe
+                      ref={staffDom}
+                      class={styles.staff}
+                      frameborder="0"
+                      src={staffState.staffSrc}>
+                    </iframe>
+                  </div>
                 </div>
-              </div>
-            }
+              }
+            </div>
           </div>
         </Sticky>
         <div class={styles.musicSection}>

src/views/creation/playCreation/index.tsx

@@ -243,7 +243,7 @@ export default defineComponent({
             canvWidth: width,
             canvHeight: height,
             canvFillColor: "transparent",
-            lineColor: "rgba(255, 255, 255, 0.7)"
+            lineColor: "rgba(28,172,241, 0.58)"
           })
         }, 300);
       }

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

@@ -21,6 +21,8 @@
     color: #FFFFFF;
     text-shadow: 0px 2px 4px #3681FF;
     width: 170px;
+    height: 72px;
+    box-sizing: content-box;
 
     .large {
       font-size: 19px;

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

@@ -217,8 +217,8 @@ export default defineComponent({
         <div class={styles.shareContent} id="shareContent">
           <img src={props.playType === "Audio" ? audioShareBg : videoShareBg} class={styles.shareBg} />
           <div class={styles.share_content__title}>
-            <p class={styles.large}>我在音乐数字课堂发布了演奏作品</p>
-            <p class={styles.small}>赶快扫码看看吧！</p>
+            {/* <p class={styles.large}>我在音乐数字课堂发布了演奏作品</p>
+            <p class={styles.small}>赶快扫码看看吧！</p> */}
           </div>
 
           <div class={[styles.share_music__container, styles.sectionFile]}>