样式布局修改

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

@@ -0,0 +1,38 @@
+.title{
+    width: 216px;
+    margin: 0 auto;
+    :global{
+        .van-notice-bar{
+            height: 30px;
+            line-height: 30px;
+            padding: 0;
+            font-weight: 600;
+            font-size: 18px;
+            color: #FFFFFF;
+            .van-notice-bar__wrap{
+                justify-content: center;
+            }
+        }
+    }
+}
+.authorCon{
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 30px;
+    .author{
+        width: 210px;
+        :global{
+            .van-notice-bar{
+                height: 20px;
+                padding: 0;
+                font-weight: 400;
+                font-size: 14px;
+                color: #FFFFFF;
+                line-height: 20px;
+                .van-notice-bar__wrap{
+                    justify-content: flex-end;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+import { defineComponent } from "vue"
+import styles from "./index.module.less"
+import { NoticeBar } from "vant"
+import state from "/src/state"
+import { smoothAnimationState } from "../../view-detail/smoothAnimation"
+
+export default defineComponent({
+   name: "authorName",
+   setup() {
+      return () => (
+         <>
+            {
+               !smoothAnimationState.isShow.value && 
+               <>
+                  <div class={styles.title}>
+                     <NoticeBar text={state.examSongName} background="none" />
+                  </div>
+                  <div class={styles.authorCon}>
+                     <div class={styles.author}>
+                        <NoticeBar text={'作词：李非 '} background="none" />
+                        <NoticeBar text={'作曲：雅克兄弟'} background="none" />
+                        {/* <NoticeBar text={'作词：李非 / 作曲：雅克兄弟'} background="none" /> */}
+                     </div>
+                  </div>
+               </>
+            }
+         </>
+      )
+   }
+})

src/page-instrument/header-top/index.module.less

@@ -18,10 +18,12 @@
         height: 32px;
     }
     .title{
-        width: 140px;
+        width: 216px;
         margin-left: 10px;
         :global{
             .van-notice-bar{
+                height: 30px;
+                line-height: 30px;
                 padding: 0;
                 font-weight: 600;
                 font-size: 18px;

src/page-instrument/header-top/settting/index.tsx

@@ -4,6 +4,7 @@ import { headImg } from "../image";
 import { headTopData } from "../index"
 import { Switch, showToast, Field } from "vant";
 import state from "/src/state"
+import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnimation"
 
 export default defineComponent({
 	name: "settting",
@@ -40,7 +41,7 @@ export default defineComponent({
                         </div>
                         <div class={styles.cellBox}>
                             <div class={styles.tit}>旋律线</div>
-                            <Switch v-model={state.setting.melodyLine}></Switch>
+                            <Switch v-model={smoothAnimationState.isShow.value}></Switch>
                         </div>                       
                         <div class={styles.cellBox}>
                             <div class={styles.tit}>标准音高</div>

src/page-instrument/view-detail/index.module.less

@@ -37,8 +37,8 @@
 
     .container {
         position: sticky;
-        top: var(--header-height);
-        height: calc(100vh - var(--header-height));
+        top: 38px;
+        height: calc(100vh - 38px);
         margin: 0 10px;
         border-radius: 10px;
         transition: height .2s;
@@ -49,6 +49,9 @@
         height: calc(100vh - var(--header-height) - var(--pc-header-height));
         margin: 0 24px;
     }
+    .fingeringCon{
+        transition: scale 0.2s;
+    }
 }
 
 
@@ -87,7 +90,7 @@
     }
 
     #osmdCanvasPage1 {
-        padding-bottom: 60px;
+        //padding-bottom: 60px;
     }
 }
 

src/page-instrument/view-detail/index.tsx

@@ -33,6 +33,7 @@ import { usePageVisibility } from "@vant/use";
 import { initMidi } from "/src/helpers/midiPlay"
 import TheAudio from "/src/components/the-audio"
 import tickWav from "/src/assets/tick.mp3";
+import AuthorName from "../component/authorName"
 import { initSmoothAnimation } from "./smoothAnimation"
 
 const DelayCheck = defineAsyncComponent(() =>
@@ -220,11 +221,14 @@ export default defineComponent({
         if (state.fingeringInfo.direction === "transverse") {
           return {
             container: {
-              paddingBottom: state.fingeringInfo.height
+              paddingBottom: detailData.headerHide ? state.fingeringInfo.height : state.fingeringInfo.scaleData?.offset
             },
-            fingerBox: {
+            fingerBox: detailData.headerHide ? {
+              height: state.fingeringInfo.height
+            } : {
               height: state.fingeringInfo.height,
-            },
+              transform: `scale(${state.fingeringInfo.scaleData?.scale})`
+            }
           };
         } else {
           console.log('指法',state.playBtnDirection,state.platform)
@@ -413,7 +417,7 @@ export default defineComponent({
         }
         <div
           id="scrollContainer"
-          style={{ ...fingerConfig.value.container, height: detailData.headerHide ? "100vh" : "" }}
+          style={{ ...fingerConfig.value.container }}
           class={[styles.container, !state.setting.displayCursor && "hideCursor", browsInfo.xiaomi && styles.xiaomi, state.platform === IPlatform.PC && styles.pcContainer]}
           onClick={(e: Event) => {
             e.stopPropagation();
@@ -430,7 +434,10 @@ export default defineComponent({
             <MusicScore 
               showPartNames={state.isCombineRender}
               onRendered={handleRendered} 
-            />
+            > 
+              {/* 旋律线关闭时候的 标题和作者 */}
+              <AuthorName></AuthorName>
+            </MusicScore>
           }
 
           {/* {
@@ -440,7 +447,7 @@ export default defineComponent({
 
           {/* 指法 */}
           {state.setting.displayFingering && state.fingeringInfo?.name && !state.isPreView && state.isShowFingering && (
-            <div style={{ ...fingerConfig.value.fingerBox }}>
+            <div style={{ ...fingerConfig.value.fingerBox }} class={styles.fingeringCon}>
               <Fingering
                 style={{
                   background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100})` : "",

src/page-instrument/view-detail/smoothAnimation/index.less

@@ -1,6 +1,9 @@
 #musicAndSelection.singleLineMusicBox{
     .smoothAnimationBox{
         position: relative;
+        &.smoothAnimationBoxHide{
+            opacity: 0;
+        }
         .smoothBot{
             position: absolute;
             background: url("./bird.png") no-repeat;

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -30,7 +30,7 @@ export const smoothAnimationState = {
    canvasDom: null,
    canvasCtx: null,
    canvasDomWith: 0,
-   canvasDomHeight: 160,
+   canvasDomHeight: 80,
    smoothAnimationBoxDom: null,
    smoothBotDom: null,
    osmdCanvasPageDom: null,
@@ -42,7 +42,7 @@ export const smoothAnimationState = {
 } as smoothAnimationType
 
 // 监听显示与隐藏
-watch(smoothAnimationState.isShow, () => {
+watch(smoothAnimationState.isShow, (a,c) => {
    if (smoothAnimationState.isShow.value) {
       smoothAnimationState.smoothAnimationBoxDom?.classList.remove("smoothAnimationBoxHide")
       moveSmoothAnimation(moveState.progress, moveState.activeIndex)
@@ -88,7 +88,7 @@ export function destroySmoothAnimation() {
       canvasDom: null,
       canvasCtx: null,
       canvasDomWith: 0,
-      canvasDomHeight: 160,
+      canvasDomHeight: 80,
       smoothAnimationBoxDom: null,
       smoothBotDom: null,
       osmdCanvasPageDom: null,

src/state.ts

@@ -374,9 +374,7 @@ const state = reactive({
     /** 反应时间 */
     reactionTimeMs: 0,
     /** 节拍器音量 */
-    beatVolume: 50,    
-    /** 旋律线是否显示 */
-    melodyLine: true
+    beatVolume: 50
   },
   /** 后台设置的基准评测频率 */
   baseFrequency: 440,

src/view/fingering/fingering-config.ts

@@ -14,6 +14,11 @@ export type IFingering = {
   direction?: "vertical" | "transverse";
   width?: string;
   height?: string;
+  /* 横向乐器（transverse） 在功能按钮显示的时候会缩放偏移 */
+  scaleData?: {
+    scale: string
+    offset: string
+  }
   /** 禁用替指 */
   disabledFinger?: boolean;
   /** 横竖屏 0:横屏 1: 竖屏 */
@@ -447,6 +452,10 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
         name: "pan-flute",
         direction: "transverse",
         height: "2rem",
+        scaleData: {
+          scale: "0.8",
+          offset: "3.64rem"
+        },
         disabledFinger: true,
         orientation: 0,
         code: "排箫",
@@ -480,6 +489,10 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
         name: "melodica",
         direction: "transverse",
         height: "2rem",
+        scaleData: {
+          scale: "0.8",
+          offset: "3.64rem"
+        },
         orientation: 0,
         code: "口风琴",
         hasTizhi: false,

src/view/music-score/index.module.less

@@ -6,7 +6,7 @@
         overflow-x: scroll;
         height: 100%;
         max-height: 100vh;
-        transform: translateY(-5%);
+        //transform: translateY(-5%);
         transition: all 0.5s;
         &::-webkit-scrollbar {
             width: 0;
@@ -16,17 +16,10 @@
             transform: scale(var(--music-zoom));
             transform-origin: left top;
         }
-        svg{
-            // overflow: visible;
-        }
         #osmdCanvasPage1{
             position: absolute !important;
             left: 0;
             top: 0;
-            >svg {
-                // background: antiquewhite;
-                transition: all 0.5s;
-            }
         }
     }
     .noteActive {

src/view/music-score/index.tsx

@@ -73,7 +73,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	setup(props, { emit }) {
+	setup(props, { emit, slots }) {
 		/** 设置 曲谱模式,五线谱还是简谱 */
 		const setRenderType = () => {
 			const musicRenderType: any = sessionStorage.getItem(props.renderTypeKey || musicRenderTypeKey);
@@ -116,7 +116,8 @@ export default defineComponent({
 			// osmd.EngravingRules.CompactMode = true // 紧凑模式
 			// osmd.EngravingRules.PageRightMargin = state.isSingleLine ? (window.innerWidth+200)/10 : 2;
 			// osmd.EngravingRules.FixedMeasureWidth = state.isSingleLine ? true : false; // 是否固定小节的宽度（小节同一宽度渲染）
-			osmd.EngravingRules.PageTopMargin = state.platform === IPlatform.PC ? 0 : 1; // 老师端顶部间距
+			//osmd.EngravingRules.PageTopMargin = state.platform === IPlatform.PC ? 0 : 1; // 老师端顶部间距
+			osmd.EngravingRules.PageTopMargin = 0; // 老师端顶部间距
 			osmd.EngravingRules.PageTopMarginNarrow = 3;
 			osmd.EngravingRules.PageLeftMargin = 2;
 			osmd.EngravingRules.BreathMarkDistance = 0.1; // 呼吸标记距离音符的位置，百分比
@@ -125,7 +126,8 @@ export default defineComponent({
 			// 	osmd.EngravingRules.PageLeftMargin = 7;
 			// 	osmd.EngravingRules.PageRightMargin = 7;
 			// }
-			osmd.EngravingRules.PageBottomMargin = state.platform === IPlatform.PC ? 1 : 2;
+			//osmd.EngravingRules.PageBottomMargin = state.platform === IPlatform.PC ? 1 : 2;
+			osmd.EngravingRules.PageBottomMargin = 0;
 			osmd.EngravingRules.DYMusicScoreType =
 				state.musicRenderType === EnumMusicRenderType.staff ? "staff" : "jianpu";
 			// 如果为固定调,需要加入全局
@@ -182,6 +184,7 @@ export default defineComponent({
 					state.isSingleLine && "singleLineMusicBox"
 				]}
 			>
+				{slots.default?.()}
 				{props.showSelection && musicData.showSelection && !state.isPreView && !state.isEvaluatReport && <Selection />}
 			</div>
 		);