老师端小酷AI曲谱列表固定比例，名字过长打点，鼠标移入滚动

src/components/TheNoticeBar/index.module.less

@@ -0,0 +1,21 @@
+.wrap{
+    max-width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    &:hover{
+        .notice{
+            width: auto;
+            overflow: initial;
+        }
+    }
+}
+.notice{
+    transition-timing-function: linear;
+    transition-duration: 5s;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition-timing-function: linear;
+}

src/components/TheNoticeBar/index.tsx

@@ -0,0 +1,72 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'TheNoticeBar',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    const wrapRef = ref();
+    const contentRef = ref();
+    const notiData = reactive({
+      isActive: false,
+      wrapWidth: 0,
+      contentWidth: 0,
+      contentStyle: {
+        transitionDuration: '0s',
+        transform: 'translateX(0px)'
+      },
+      time: null as any
+    });
+    const init = () => {
+      if (notiData.isActive) return;
+      notiData.isActive = true;
+      notiData.contentWidth = contentRef.value.getBoundingClientRect().width;
+      notiData.wrapWidth = wrapRef.value.getBoundingClientRect().width;
+      startAnimate();
+    };
+    const startAnimate = () => {
+      if (notiData.contentWidth <= notiData.wrapWidth || !notiData.isActive) {
+        notiData.contentStyle.transitionDuration = '0s';
+        notiData.contentStyle.transform = 'translateX(0px)';
+        return;
+      }
+
+      notiData.contentStyle.transitionDuration = '5s';
+      notiData.contentStyle.transform = 'translateX(-100%)';
+
+      notiData.time = setTimeout(() => {
+        notiData.contentStyle.transitionDuration = '0s';
+        notiData.contentStyle.transform = `translateX(${notiData.wrapWidth}px)`;
+        requestAnimationFrame(() => {
+            startAnimate();
+        })
+      }, 5 * 1000);
+    };
+    const stopAnimate = () => {
+      clearTimeout(notiData.time);
+      notiData.isActive = false;
+      notiData.contentStyle.transitionDuration = '0s';
+      notiData.contentStyle.transform = 'translateX(0px)';
+      notiData.time = null;
+    };
+    return () => (
+      <div
+        ref={wrapRef}
+        class={styles.wrap}
+        onMouseenter={() => init()}
+        onMouseleave={() => stopAnimate()}>
+        <div
+          ref={contentRef}
+          style={notiData.contentStyle}
+          class={styles.notice}>
+          {props.text}
+        </div>
+      </div>
+    );
+  }
+});

src/views/xiaoku-music/index.module.less

@@ -82,10 +82,11 @@
 }
 
 .musicList {
-    width: 548Px;
+    width: 548px;
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
+    min-width: 330Px;
 
     &::-webkit-scrollbar {
         width: 0;
@@ -93,7 +94,8 @@
     }
 
     .wrapList {
-        width: 512Px;
+        width: 512px;
+        min-width: 294Px;
         background: #fff;
         border-radius: 16Px;
         padding: 8Px;
@@ -129,6 +131,7 @@
         margin-right: 12Px;
         box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
         overflow: hidden;
+        flex-shrink: 0;
 
         :global {
             .n-image {
@@ -149,13 +152,16 @@
 
     .title {
         flex: 1;
-        margin-right: 15Px;
-
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
         .titleName {
             font-size: 16Px;
             font-weight: 600;
             color: #131415;
             line-height: 28Px;
+            width: 100%;
         }
 
         .titleDes {
@@ -163,18 +169,24 @@
             font-weight: 400;
             color: #777777;
             line-height: 20Px;
+            max-width: 100%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
     }
 
     .btn {
         margin-left: auto;
-        width: 84Px;
-        height: 40Px;
+        width: 84px;
+        height: 40px;
         background: linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
         border: none;
         padding: 0;
         font-weight: bold !important;
-
+        flex-shrink: 0;
+        min-width: 62Px;
+        min-height: 30Px;
         :global {
             .n-button__content {
                 &>img {
@@ -269,4 +281,4 @@
     .van-fade-leave-to {
         opacity: 0;
     }
-}
+}

src/views/xiaoku-music/index.tsx

@@ -27,6 +27,7 @@ import icon_favitorActive from '/src/common/images/icon-collect-active.png';
 import { useRouter } from 'vue-router';
 import PlayItem from './component/play-item';
 import PlayLoading from './component/play-loading';
+import TheNoticeBar from '/src/components/TheNoticeBar';
 
 export default defineComponent({
   name: 'XiaokuMusic',
@@ -80,8 +81,7 @@ export default defineComponent({
     };
 
     /** 音频控制 */
-    const handleChangeAudio = (type: 'play' | 'pause' | 'pre' | 'next') => {
-      console.log("🚀 ~ type:", type)
+    const handleChangeAudio = (type: 'play' | 'pause' | 'pre' | 'next' | 'favitor') => {
       if (type === 'play') {
         data.playState = 'play';
       } else if (type === 'pause') {
@@ -95,7 +95,7 @@ export default defineComponent({
           handlePlay(data.list[data.listActive + 1]);
         }
       } else if (type === 'favitor') {
-        handleFavitor()
+        handleFavitor();
       }
     };
     return () => (
@@ -168,7 +168,7 @@ export default defineComponent({
                         </div>
                         <div class={styles.title}>
                           <div class={styles.titleName}>
-                            {item.musicSheetName}
+                            <TheNoticeBar text={item.musicSheetName} />
                           </div>
                           <div class={styles.titleDes}>{item.composer}</div>
                         </div>
@@ -203,9 +203,13 @@ export default defineComponent({
                 <div class={styles.musicName}>
                   {activeItem.value.musicSheetName}
                 </div>
-                <img class={styles.goBtn} src={icon_goXiaoku} onClick={() => {
+                <img
+                  class={styles.goBtn}
+                  src={icon_goXiaoku}
+                  onClick={() => {
                     window.open('https://dev.kt.colexiu.com/instrument/');
-                }} />
+                  }}
+                />
                 <div class={styles.favitor} onClick={() => handleFavitor()}>
                   <Transition name="favitor" mode="out-in">
                     {activeItem.value.delFlag ? (