阴影 加上移动

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

@@ -22,6 +22,7 @@ type smoothAnimationType = {
    osdmScrollDomWith: number
    osdmScrollDomOffsetLeft: number
    selectionBoxDom: null | HTMLElement
+   selectionBgBoxDom: null | HTMLElement
    batePos: pointsPosType
    pointsPos: pointsPosType
    translateXNum: number
@@ -45,6 +46,7 @@ export const smoothAnimationState = {
    osdmScrollDomWith: 0,
    osdmScrollDomOffsetLeft: 0,
    selectionBoxDom: null,
+   selectionBgBoxDom: null,
    batePos: [], // times 直接转换的数组
    pointsPos: [], // 筛选之后的点坐标数组
    translateXNum: 0, // 当前谱面的translateX的距离   谱面的位置信息 由translateX和scrollLeft的偏移一起决定
@@ -145,6 +147,7 @@ export function destroySmoothAnimation() {
       osdmScrollDomWith: 0,
       osdmScrollDomOffsetLeft: 0,
       selectionBoxDom: null,
+      selectionBgBoxDom: null,
       batePos: [],
       pointsPos: [],
       translateXNum: 0,
@@ -285,6 +288,7 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
 export function moveTranslateXNum(translateXNum: number) {
    smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transform = `translateX(-${translateXNum}px)`)
    smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transform = `translateX(-${translateXNum}px)`)
+   smoothAnimationState.selectionBgBoxDom && (smoothAnimationState.selectionBgBoxDom.style.transform = `translateX(-${translateXNum}px)`)
 }
 
 /**
@@ -308,7 +312,9 @@ function createSmoothAnimation() {
    // selectionBox
    setTimeout(() => {
       const selectionBoxDom = document.querySelector("#selectionBox") as HTMLElement
+      const selectionBgBoxDom = document.querySelector("#selectionBgBox") as HTMLElement
       smoothAnimationState.selectionBoxDom = selectionBoxDom
+      smoothAnimationState.selectionBgBoxDom = selectionBgBoxDom
    }, 0)
    // box
    const smoothAnimationBoxDom = document.createElement("div")

src/view/selection/index.tsx

@@ -257,7 +257,7 @@ export default defineComponent({
 		});
 		return () => (
 			<>
-				<div class={styles.staveBgContainer}>
+				<div id="selectionBgBox" class={styles.staveBgContainer}>
 						{
 							selectData.staves.map((item: any) => {
 								return (