增加滚动

src/views/creation/index-share.tsx

@@ -10,7 +10,7 @@ import {
 // import WaveSurfer from 'wavesurfer.js';
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
 import styles from './index.module.less';
-import { Cell, Image, List, Popup, Sticky, TextEllipsis } from 'vant';
+import { Cell, Image, List, Popup, Sticky, TextEllipsis, NoticeBar } from 'vant';
 import iconMember from './images/icon-member.png';
 import iconZan from './images/icon-zan.png';
 import iconZanActive from './images/icon-zan-active.png';
@@ -509,7 +509,10 @@ export default defineComponent({
           <>
             <div class={styles.singerBox}>
               <div class={styles.musicSheetName}>
-                {state.musicDetail?.musicSheetName}
+                <NoticeBar
+                    text={state.musicDetail?.musicSheetName}
+                    background="none"
+                />
               </div>
               <div class={styles.singerName}>
                 演奏：{state.musicDetail?.username}

src/views/creation/index.module.less

@@ -529,12 +529,22 @@
   flex-direction: column;
   justify-content: end;
   .musicSheetName{
-    text-align: center;
-    font-weight: 600;
-    font-size: 20px;
-    color: #FFFFFF;
-    line-height: 28px;
-    margin-bottom: 10px;
+    width: 200px;
+    margin: 0 auto 10px;
+    :global{
+      .van-notice-bar{
+          padding: 0;
+          height: 28px;
+          font-weight: 600;
+          font-size: 20px;
+          color: #FFFFFF;
+          line-height: 28px;
+          .van-notice-bar__content{
+            min-width: 100%;
+            text-align: center;
+          }
+      }
+    }
   }
   .singerName{
     text-align: center;