中间 字体 居中

src/page-instrument/component/authorName/index.module.less

@@ -4,6 +4,13 @@
 .title{
     width: 280px;
     margin: 0 auto;
+    &.isScroll{
+        :global{
+            .van-notice-bar .van-notice-bar__wrap{
+                justify-content: initial;
+            }
+        }
+    }
     :global{
         .van-notice-bar{
             height: 30px;

src/page-instrument/component/authorName/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, computed } from "vue"
+import { defineComponent, computed, onMounted, ref } from "vue"
 import styles from "./index.module.less"
 import { NoticeBar } from "vant"
 import state from "/src/state"
@@ -11,14 +11,21 @@ export default defineComponent({
 			const context = state.musicLyricist ? state.musicComposer + ' / ' + state.musicLyricist : state.musicComposer;
 			return context
 		});
-
+      const noticeBarDom = ref()
+      const isScroll = ref(false)
+      onMounted(() => {
+         const noticeBarEl = noticeBarDom.value.$el
+         if(noticeBarEl){
+            isScroll.value = noticeBarEl.querySelector(".van-notice-bar__wrap")?.offsetWidth < noticeBarEl.querySelector(".van-notice-bar__content")?.offsetWidth
+         }
+      })
       return () => (
          <>
             {
                !smoothAnimationState.isShow.value && !state.isCombineRender && 
                <div class={["authorName", styles.authorName]}>
-                  <div class={[styles.title, state.isCbsView && styles.blackTitle]}>
-                     <NoticeBar text={state.examSongName} background="none" />
+                  <div class={[styles.title, state.isCbsView && styles.blackTitle, isScroll.value && styles.isScroll]}>
+                     <NoticeBar ref={noticeBarDom} text={state.examSongName} background="none" />
                   </div>
                   <div class={styles.authorCon}>
                      <div class={[styles.author, state.isCbsView && styles.blackTitle]}>