修改样式

src/views/hot-music-more/index.module.less

@@ -188,6 +188,13 @@
 
   .musicItem {
     padding: 15px 12px;
+
+    :global {
+      .van-cell__title {
+        overflow: hidden;
+        padding-right: 12px;
+      }
+    }
   }
 
   .musicImg {
@@ -197,6 +204,7 @@
     border-radius: 8px;
     overflow: hidden;
     position: relative;
+    flex-shrink: 0;
   }
 
   .iconType {
@@ -251,6 +259,7 @@
       line-height: 1;
       margin-right: 1px;
       transform: scale(0.85);
+      flex-shrink: 0;
 
       .iconFire {
         display: inline-block;
@@ -268,6 +277,7 @@
       line-height: 1;
       margin-right: 1px;
       transform: scale(0.85);
+      flex-shrink: 0;
     }
 
     .iconPlay {
@@ -285,7 +295,8 @@
       color: #777777;
       line-height: 1;
       padding-top: 1px;
-      max-width: 120px;
+      // max-width: 120px;
+      flex-shrink: 1;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -455,9 +466,9 @@
   }
 
   .subjectItem4 {
-    width: 23%;
+    width: 23.4%;
     margin-left: 0 !important;
-    margin-right: 2.333% !important;
+    margin-right: 1.6% !important;
 
     &:nth-child(4n) {
       margin-right: 0 !important;

src/views/hot-music-more/music-detail/index.module.less

@@ -55,6 +55,16 @@
         color: #131415;
         line-height: 25px;
       }
+
+      &.isScroll {
+        text-align: left;
+
+        :global {
+          .van-notice-bar__wrap {
+            justify-content: normal !important;
+          }
+        }
+      }
     }
     .downloadMusicName {
       width: 95%;

src/views/hot-music-more/music-detail/index.tsx

@@ -30,6 +30,7 @@ import { ACCESS_TOKEN } from '@/store/mutation-types';
 import { promisefiyPostMessage } from '@/helpers/native-message';
 import html2canvas from 'html2canvas';
 import { addWatermark, convasToImg } from '@/views/co-ai/imageFunction';
+import { nextTick } from 'process';
 
 export default defineComponent({
   name: 'music-detail',
@@ -42,6 +43,8 @@ export default defineComponent({
   emits: ['handleGoto'],
   setup(props, { emit }) {
     const item = toRef(props.item);
+    const noticeBarDom = ref()
+    const isScroll = ref(false)
     const data = reactive({
       musicPdfUrl: '',
       iframeSrc: '',
@@ -484,6 +487,13 @@ export default defineComponent({
     const __init = async () => {
       await analyzeXml();
       musicIframeLoad();
+
+      nextTick(() => {
+        const noticeBarEl = noticeBarDom.value.$el
+        if(noticeBarEl){
+           isScroll.value = noticeBarEl.querySelector(".van-notice-bar__wrap")?.offsetWidth < noticeBarEl.querySelector(".van-notice-bar__content")?.offsetWidth
+        }
+      })
     };
 
 
@@ -500,12 +510,13 @@ export default defineComponent({
         <div class={styles.musicContainer}>
           <div class={styles.container}>
             <div
-              class={styles['right-musicName']}
+              class={[styles['right-musicName'], isScroll.value && styles.isScroll]}
               style={{
                 opacity: !data.musicPdfUrl ? '1' : '0',
                 height: !data.musicPdfUrl ? 'auto' : '0'
               }}>
                 <NoticeBar
+                    ref={noticeBarDom}
                     text={item.value?.musicSheetName}
                     class={styles.noticeBar}
                     background="none"